@dynamic-framework/ui-react 1.35.1 → 1.36.0

package/dist/types/components/DBoxFile/useDBoxFile.d.ts

@@ -16,7 +16,7 @@ export type DBoxFileProps = {
     onDrop?: (acceptedFiles: File[], rejectedFiles: RejectedFile[], event?: Event) => void;
     onDragEnter?: (event: DragEvent<HTMLDivElement>) => void;
     onDragLeave?: (event: DragEvent<HTMLDivElement>) => void;
-    onFileDialogCancel?: () => void;
+    onLoad?: (acceptedFiles: File[]) => void;
     onError?: (error: Error) => void;
 };
 export default function useDBoxFile(props: DBoxFileProps): {

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

@@ -1,6 +1,7 @@
 import type { DatePickerProps } from 'react-datepicker';
+import { Locale } from 'date-fns';
 import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps } from '../interface';
-type Props = BaseProps & FamilyIconProps & Omit<DatePickerProps, 'showMonthDropdown' | 'showMonthYearDropdown' | 'showYearDropdown' | 'useShortMonthInDropdown' | 'yearDropdownItemNumber' | 'scrollableYearDropdown' | 'dropdownMode' | 'yearItemNumber'> & {
+type Props = BaseProps & FamilyIconProps & Omit<DatePickerProps, 'showMonthDropdown' | 'showMonthYearDropdown' | 'showYearDropdown' | 'useShortMonthInDropdown' | 'yearDropdownItemNumber' | 'scrollableYearDropdown' | 'dropdownMode' | 'yearItemNumber' | 'portalId' | 'withPortal' | 'onPortalKeyDown' | 'portalHost' | 'locale'> & {
     inputLabel?: string;
     inputHint?: string;
     inputAriaLabel?: string;
@@ -8,7 +9,6 @@ type Props = BaseProps & FamilyIconProps & Omit<DatePickerProps, 'showMonthDropd
     iconInput?: string;
     inputId?: string;
     timeId?: string;
-    timeLabel?: string;
     iconHeaderPrev?: string;
     iconHeaderNext?: string;
     iconHeaderSize?: ComponentSize;
@@ -22,6 +22,7 @@ type Props = BaseProps & FamilyIconProps & Omit<DatePickerProps, 'showMonthDropd
     valid?: boolean;
     placeholder?: string;
     showHeaderSelectors?: boolean;
+    locale?: Locale;
 };
-export default function DDatePicker({ inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput, iconHeaderPrev, iconHeaderNext, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, invalid, valid, renderCustomHeader: renderCustomHeaderProp, className, dateFormatCalendar, style, dataAttributes, placeholder, showHeaderSelectors, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DDatePicker({ inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeInputLabel, iconInput, iconHeaderPrev, iconHeaderNext, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, invalid, valid, renderCustomHeader: renderCustomHeaderProp, className, dateFormatCalendar, style, dataAttributes, placeholder, showHeaderSelectors, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import { Locale } from 'date-fns';
 import type { ComponentProps } from 'react';
 import type { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
 import DButton from '../../DButton';
@@ -33,6 +34,7 @@ type Props = BaseProps & FamilyIconProps & ReactDatePickerCustomHeaderProps & {
     maxYearSelect?: number;
     showHeaderSelectors?: boolean;
     monthsShown?: number;
+    locale?: Locale;
 } & Omit<ComponentProps<typeof DButton>, 'iconStart' | 'onClick' | 'disabled'>;
-export default function DDatePickerHeaderSelector({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, decreaseYear, increaseYear, monthDate, pickerType, prevMonthButtonDisabled, nextMonthButtonDisabled, monthsShown, iconPrev, iconNext, prevYearButtonDisabled, nextYearButtonDisabled, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel, nextMonthAriaLabel, prevYearAriaLabel, nextYearAriaLabel, iconSize, buttonVariant, buttonTheme, style, className, minYearSelect, maxYearSelect, showHeaderSelectors, customHeaderCount, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DDatePickerHeaderSelector({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, decreaseYear, increaseYear, monthDate, pickerType, prevMonthButtonDisabled, nextMonthButtonDisabled, monthsShown, iconPrev, iconNext, prevYearButtonDisabled, nextYearButtonDisabled, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel, nextMonthAriaLabel, prevYearAriaLabel, nextYearAriaLabel, iconSize, buttonVariant, buttonTheme, style, className, minYearSelect, maxYearSelect, showHeaderSelectors, customHeaderCount, locale, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,7 @@
-import type { ComponentProps } from 'react';
-import { BaseProps } from '../../interface';
-import DInput from '../../DInput';
-type Props = BaseProps & {
+type Props = {
+    id?: string;
     value?: string;
-    onChange?: (value?: string) => void;
-} & Omit<ComponentProps<typeof DInput>, 'type' | 'isReadOnly' | 'onChange' | 'value'>;
-export default function DDatePickerTime({ value, onChange, id, label, className, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    onChange?: (time: string) => void;
+};
+export default function DDatePickerTime({ value, onChange, id, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { CountryIso2, CountrySelectorProps, ParsedCountry } from 'react-international-phone';
+import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps } from '../interface';
+type OnChangeType = {
+    phone: string;
+    inputValue: string;
+    country: ParsedCountry;
+    isValid: boolean;
+};
+declare const ForwardedDInputPhone: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "pattern" | "value" | "type" | "onChange" | "onWheel" | "inputMode">, "size" | "loading" | "label" | "value" | "invalid" | "onChange" | keyof BaseProps | keyof FamilyIconProps | keyof LabelIconProps | keyof EndIconProps | "hint" | "valid" | "floatingLabel" | "inputEnd" | "onIconEndClick" | "countrySelectorProps" | "filteredCountries" | "defaultCountry"> & BaseProps & FamilyIconProps & LabelIconProps & EndIconProps & {
+    value?: string | undefined;
+    label?: string | undefined;
+    loading?: boolean | undefined;
+    hint?: string | undefined;
+    size?: ComponentSize | undefined;
+    invalid?: boolean | undefined;
+    valid?: boolean | undefined;
+    floatingLabel?: boolean | undefined;
+    inputEnd?: ReactNode;
+    onChange?: ((value: OnChangeType) => void) | undefined;
+    onIconEndClick?: ((value?: string) => void) | undefined;
+    countrySelectorProps?: Omit<CountrySelectorProps, "disabled" | "onSelect" | "selectedCountry" | "countries"> | undefined;
+    filteredCountries?: CountryIso2[] | undefined;
+    defaultCountry?: CountryIso2 | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default ForwardedDInputPhone;

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

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

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

@@ -17,6 +17,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
     invalid?: boolean;
     valid?: boolean;
     menuWithMaxContent?: boolean;
+    floatingLabel?: boolean;
     onIconStartClick?: (value?: SelectProps<Option, IsMulti, Group>['defaultValue']) => void;
     onIconEndClick?: (value?: SelectProps<Option, IsMulti, Group>['defaultValue']) => void;
     disabled?: SelectProps<Option, IsMulti, Group>['isDisabled'];
@@ -26,7 +27,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
     searchable?: SelectProps<Option, IsMulti, Group>['isSearchable'];
     multi?: SelectProps<Option, IsMulti, Group>['isMulti'];
 };
-declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DSelect & {
     OptionCheck: typeof DSelectOptionCheck;
     OptionIcon: typeof DSelectOptionIcon;

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

@@ -47,3 +47,4 @@ export type { DTabOption } from './DTabs';
 export { default as DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';
 export { default as DTableHead } from './DTableHead';
+export { default as DInputPhone } from './DInputPhone';

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

@@ -3,4 +3,5 @@ export { default as configureI18n } from './configureI18n';
 export { default as getQueryString } from './getQueryString';
 export { default as changeQueryString } from './changeQueryString';
 export { default as getCssVariable } from './getCssVariable';
+export { default as validatePhoneNumber } from './validatePhoneNumber';
 export * from './mediaQuery';

package/dist/types/utils/validatePhoneNumber.d.ts

@@ -0,0 +1 @@
+export default function validatePhoneNumber(phone: string): boolean;

package/jest/setup.js

@@ -1,7 +1,5 @@
 jest.mock('react-content-loader', () => jest.fn());
 
-jest.mock('react-responsive-pagination', () => jest.fn());
-
 jest.mock('@react-input/mask', () => ({
   InputMask: jest.fn(),
 }));
@@ -28,3 +26,18 @@ Object.defineProperty(global.window, 'matchMedia', {
     dispatchEvent: jest.fn(),
   })),
 });
+
+// eslint-disable-next-line no-undef
+globalThis.ResizeObserver = class {
+  observe() {
+    return this;
+  }
+
+  unobserve() {
+    return this;
+  }
+
+  disconnect() {
+    return this;
+  }
+};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.35.1",
+  "version": "1.36.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -91,9 +91,11 @@
     "currency.js": "~2.0.4",
     "date-fns": "~2.30.0",
     "file-selector": "^2.1.2",
+    "google-libphonenumber": "^3.2.40",
     "i18next": "~23.6.0",
     "react-content-loader": "~6.2.1",
     "react-datepicker": "~8.3.0",
+    "react-international-phone": "~4.5.0",
     "react-responsive-pagination": "^2.9.0",
     "react-select": "^5.8.3"
   },
@@ -120,6 +122,7 @@
     "@storybook/theming": "~8.2.9",
     "@testing-library/jest-dom": "~6.1.4",
     "@testing-library/react": "~14.0.0",
+    "@types/google-libphonenumber": "^7.4.30",
     "@types/jest": "~29.5.12",
     "@types/node": "~18.15.3",
     "@types/react": "~18.2.31",
@@ -128,6 +131,7 @@
     "@typescript-eslint/parser": "~6.9.0",
     "autoprefixer": "~10.4.16",
     "axe-playwright": "~1.2.3",
+    "babel-jest": "^29.7.0",
     "babel-loader": "~9.1.3",
     "bootstrap-icons": "~1.11.3",
     "conventional-changelog-conventionalcommits": "~6.1.0",
@@ -138,6 +142,7 @@
     "eslint-plugin-jsx-a11y": "~6.7.1",
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-react-hooks": "~4.6.0",
+    "formik": "^2.4.6",
     "glob": "~10.3.10",
     "husky": "~8.0.3",
     "jest": "~29.7.0",
@@ -159,7 +164,8 @@
     "stylelint-config-twbs-bootstrap": "^16.0.0",
     "ts-jest": "~29.2.3",
     "tslib": "~2.6.2",
-    "typescript": "~5.2.2"
+    "typescript": "~5.2.2",
+    "yup": "^1.6.1"
   },
   "peerDependencies": {
     "react": "~18.3.1",
@@ -173,4 +179,4 @@
       "optional": true
     }
   }
-}
+}

package/src/style/abstracts/_utilities.scss

@@ -136,6 +136,16 @@ $utilities: map-merge(
       css-var: true,
       css-variable-name: fs-body-font-size,
       values: $body-font-sizes
-    )
+    ),
+    "line-height": (
+      property: line-height,
+      class: lh,
+      values: (
+        1: 1,
+        sm: var(--#{$prefix}lh-sm),
+        base: var(--#{$prefix}lh-base),
+        lg: var(--#{$prefix}lh-lg),
+      )
+    ),
   )
 );

package/src/style/abstracts/variables/_+import.scss

@@ -95,5 +95,6 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "chips";
 @import "collapse-icon-text";
 @import "box-file";
-@import "datepicker"
+@import "datepicker";
+@import "input-phone";
 // end custom

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

@@ -5,10 +5,10 @@ $datepicker-border-color: var(--#{$prefix}gray-400) !default;
 $datepicker-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $datepicker-day-border-radius: .25rem !default;
 // Header
-$datepicker-header-bg: var(--#{$prefix}gray-100) !default;
+$datepicker-header-bg: var(--#{$prefix}secondary-soft) !default;
 $datepicker-header-padding: var(--#{$prefix}ref-spacer-2) 0 !default;
 $datepicker-header-font-weight: var(--#{$prefix}fw-bold) !default;
-$datepicker-day-names-color: var(--#{$prefix}body-color) !default;
+$datepicker-day-names-color: var(--#{$prefix}gray) !default;
 $datepicker-day-names-font-size: var(--#{$prefix}fs-small) !default;
 
 // Body
@@ -20,6 +20,7 @@ $datepicker-day-outside-month-color: var(--#{$prefix}gray-700) !default;
 $datepicker-day-bg: var(--#{$prefix}secondary) !default;
 $datepicker-day-hover-bg: var(--#{$prefix}gray-100) !default;
 $datepicker-day-width: var(--#{$prefix}ref-spacer-7) !default;
+$datepicker-day-color: var(--#{$prefix}body-color) !default;
 
 // Day selected
 $datepicker-day-selected-color: var(--#{$prefix}white) !default;
@@ -42,9 +43,5 @@ $datepicker-range-end-bg: var(--#{$prefix}secondary-600) !default;
 $datepicker-in-range-bg: var(--#{$prefix}secondary-200) !default;
 $datepicker-range-color: var(--#{$prefix}body-color) !default;
 $datepicker-in-range-hover-bg: var(--#{$prefix}secondary-400) !default;
-$datepicker-in-range-disabled-color: var(--#{$prefix}secondary-300) !default;
-$datepicker-in-range-disabled-bg: var(--#{$prefix}gray-300) !default;
-
-// Portal
-$datepicker-portal-bg: rgba(var(--#{$prefix}black-rgb), .3) !default;
-// scss-docs-start breadcrumb-variables
+$datepicker-in-range-disabled-color: var(--#{$prefix}secondary-200) !default;
+$datepicker-in-range-disabled-bg: var(--#{$prefix}secondary-50) !default;

package/src/style/abstracts/variables/_input-phone.scss

@@ -0,0 +1,62 @@
+// General styles
+$input-phone-height: 36px !default;
+$input-phone-font-size: var(--#{$prefix}fs-sm) !default;
+$input-phone-border-radius: var(--#{$prefix}ref-spacer-1) !default;
+$input-phone-border-color: var(--#{$prefix}gray-100) !default;
+$input-phone-background-color: var(--#{$prefix}white) !default;
+$input-phone-text-color: var(--#{$prefix}body-color) !default;
+$input-phone-disabled-background-color: var(--#{$prefix}gray-100) !default;
+$input-phone-disabled-text-color: var(--#{$prefix}gray-600) !default;
+
+// Country selector
+$input-phone-country-selector-border-color: transparent !default;
+$input-phone-country-selector-background-color: $input-phone-background-color !default;
+$input-phone-country-selector-background-color-hover: transparent !default;
+$input-phone-disabled-country-selector-background-color: $input-phone-disabled-background-color !default;
+
+// Country selector arrow
+$input-phone-country-selector-arrow-size: 4px !default;
+$input-phone-country-selector-arrow-color: var(--#{$prefix}gray-700) !default;
+$input-phone-disabled-country-selector-arrow-color: var(--#{$prefix}gray-500) !default;
+
+// Flag
+$input-phone-flag-width: 24px !default;
+$input-phone-flag-height: 24px !default;
+
+// Dropdown (country list)
+$input-phone-dropdown-top: calc(100% + var(--#{$prefix}ref-spacer-2)) !default;
+$input-phone-dropdown-left: 0 !default;
+$input-phone-dropdown-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$input-phone-dropdown-border: 1px solid var(--#{$prefix}gray-200) !default;
+$input-phone-dropdown-shadow: 0 !default;
+
+// Dropdown items
+$input-phone-dropdown-item-background-color: $input-phone-background-color !default;
+$input-phone-dropdown-item-text-color: $input-phone-text-color !default;
+$input-phone-dropdown-item-dial-code-color: var(--#{$prefix}gray-500) !default;
+$input-phone-dropdown-item-height: 28px !default;
+$input-phone-dropdown-item-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-3) !default;
+$input-phone-dropdown-item-font-size: var(--#{$prefix}fs-body-small) !default;
+$input-phone-dropdown-item-font-weight: var(--#{$prefix}fw-normal) !default;
+
+// Selected / hover items
+$input-phone-hover-dropdown-item-background-color: var(--#{$prefix}gray-100) !default;
+$input-phone-selected-dropdown-item-background-color: unset !default;
+$input-phone-selected-dropdown-item-color: $input-phone-text-color !default;
+$input-phone-selected-dropdown-item-font-weight: var(--#{$prefix}fw-bold) !default;
+$input-phone-selected-dropdown-item-dial-code-color: $input-phone-dropdown-item-dial-code-color !default;
+
+// Preferred list
+$input-phone-dropdown-preferred-list-item-background-color: var(--#{$prefix}gray-25) !default;
+
+// Preferred list separator
+$input-phone-dropdown-preferred-list-divider-margin: 0 !default;
+$input-phone-dropdown-preferred-list-divider-color: $input-phone-border-color !default;
+
+// Country code preview
+$input-phone-dial-code-preview-border-color: $input-phone-border-color !default;
+$input-phone-dial-code-preview-background-color: $input-phone-background-color !default;
+$input-phone-dial-code-preview-text-color: $input-phone-text-color !default;
+$input-phone-dial-code-preview-font-size: $input-phone-font-size !default;
+$input-phone-dial-code-preview-disabled-background-color: $input-phone-disabled-background-color !default;
+$input-phone-dial-code-preview-disabled-text-color: $input-phone-disabled-text-color !default;

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

@@ -7,7 +7,7 @@ $nav-link-font-size: var(--#{$prefix}body-font-size) !default;
 $nav-link-font-weight: var(--#{$prefix}fw-normal) !default;
 $nav-link-color: var(--#{$prefix}gray-900) !default;
 $nav-link-hover-color: var(--#{$prefix}primary-600) !default;
-$nav-link-hover-bg: var(--#{$prefix}surface-primary) !default;
+$nav-link-hover-bg: transparent !default; // Custom
 $nav-link-disabled-color: var(--#{$prefix}gray-300) !default;
 
 // custom
@@ -30,3 +30,5 @@ $nav-pills-link-active-bg: var(--#{$prefix}primary) !default;
 // scss-docs-end nav-variables
 
 $nav-underline-link-active-color: var(--#{$prefix}primary) !default;
+$nav-underline-border-width: 2px !default;
+$nav-underline-border-color: transparent !default;

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

@@ -36,6 +36,8 @@ $font-weight-bolder: var(--#{$prefix}fw-bolder) !default;
 $font-weight-base: $font-weight-normal !default;
 
 $line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
 
 // custom
 $body-large-font-size-value: $font-size-base * 1.5 !default;   // 24px - 21.525px

package/src/style/base/_form-switch.scss

@@ -1,6 +1,6 @@
 .form-switch {
   --#{$prefix}form-switch-width: #{$form-switch-width};
-  --#{$prefix}form-switch-padding-start: #{$form-switch-padding-start} * -1;
+  --#{$prefix}form-switch-padding-start: calc(#{$form-switch-padding-start} * -1);
   --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
   --#{$prefix}form-switch-border-radius: #{$form-switch-border-radius};
   --#{$prefix}form-switch-focus-bg-image: #{escape-svg($form-switch-focus-bg-image)};

package/src/style/base/_nav.scss

@@ -10,7 +10,7 @@
   --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
 
   .nav-link {
-    &:hover {
+    &:hover:not(.active, .disabled, :disabled) {
       background-color: var(--#{$prefix}nav-link-hover-bg);
     }
   }
@@ -29,30 +29,25 @@
   }
 }
 
-.nav-pills {
-  .nav-link.active {
-    &:hover {
-      color: var(--#{$prefix}nav-link-hover-color);
-    }
-  }
-}
-
 .nav-underline {
+  --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+  --#{$prefix}nav-underline-border-color: #{$nav-underline-border-color};
+
   &.flex-column {
     .nav-link {
-      border-right: 1px solid var(--#{$prefix}nav-tabs-border-color);
-      border-bottom-color: transparent;
+      border-right: var(--#{$prefix}nav-underline-border-width) solid var(--#{$prefix}nav-underline-border-color);
+      border-bottom-width: 0;
     }
 
     .nav-link.active {
       background-color: var(--#{$prefix}nav-link-hover-bg);
-      border-right: 1px solid currentcolor;
+      border-right: var(--#{$prefix}nav-underline-border-width) solid currentcolor;
     }
   }
 
   .nav-link {
     padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
-    border-bottom: 1px solid var(--#{$prefix}gray-300);
+    border-bottom: var(--#{$prefix}nav-underline-border-width) solid var(--#{$prefix}nav-underline-border-color);
   }
 }
 
@@ -61,6 +56,7 @@
     &.active {
       border-bottom-color: transparent;
     }
+
     &:not(.active):is(:hover, :focus) {
       border-color: transparent;
     }

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

@@ -21,3 +21,4 @@
 @import "d-card-account";
 @import "d-select";
 @import "d-table-head";
+@import "d-input-phone";