@dynamic-framework/ui-react 1.11.1 → 1.12.1

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

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { AlertType, BaseProps } from '../interface';
+type Props = BaseProps & PropsWithChildren<{
+    id?: string;
+    type?: AlertType;
+    icon?: string;
+    iconFamilyClass?: string;
+    iconFamilyPrefix?: string;
+    showIcon?: boolean;
+    showClose?: boolean;
+    soft?: boolean;
+    onClose?: () => void;
+}>;
+export default function DAlert({ type, icon, iconFamilyClass, iconFamilyPrefix, showIcon, soft, showClose, onClose, children, id, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -15,7 +15,8 @@ type Props = BaseProps & StartIconProps & EndIconProps & {
     loadingAriaLabel?: string;
     disabled?: boolean;
     stopPropagationEnabled?: boolean;
+    form?: string;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
-export default function DButton({ theme, size, variant, state, text, ariaLabel, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, value, type, pill, loading, loadingAriaLabel, disabled, stopPropagationEnabled, className, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DButton({ theme, size, variant, state, text, ariaLabel, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, value, type, pill, loading, loadingAriaLabel, disabled, stopPropagationEnabled, className, form, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { MaskProps } from '@react-input/mask';
+declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+    value?: string | undefined;
+    label?: string | undefined;
+    loading?: boolean | undefined;
+    hint?: string | undefined;
+    invalid?: boolean | undefined;
+    valid?: boolean | undefined;
+    floatingLabel?: boolean | undefined;
+    inputStart?: import("react").ReactNode;
+    onChange?: ((value: string) => void) | undefined;
+    onIconStartClick?: ((value?: string | undefined) => void) | undefined;
+    onIconEndClick?: ((value?: string | undefined) => void) | undefined;
+} & import("react").RefAttributes<HTMLInputElement>, "ref">, keyof MaskProps> & MaskProps & import("react").RefAttributes<HTMLInputElement>>;
+export default ForwardedDInputMask;

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

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

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

@@ -10,9 +10,9 @@ type Props = BaseProps & PropsWithChildren<{
     centered?: boolean;
     fullScreen?: boolean;
     fullScreenFrom?: ModalFullScreenFrom;
-    modalSize?: ModalSize;
+    size?: ModalSize;
 }>;
-declare function DModal({ name, className, style, staticBackdrop, scrollable, centered, fullScreen, fullScreenFrom, modalSize, children, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DModal({ name, className, style, staticBackdrop, scrollable, centered, fullScreen, fullScreenFrom, size, children, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DModal & {
     Header: typeof DModalHeader;
     Body: typeof DModalBody;

package/dist/types/components/DToastContainer/useToast.d.ts

@@ -1,7 +1,7 @@
 import type { ToastPosition } from 'react-toastify';
-import type { ToastType } from '../interface';
+import type { AlertType } from '../interface';
 export type ToastConfig = {
-    type?: ToastType;
+    type?: AlertType;
     showClose?: boolean;
     position?: ToastPosition;
     autoClose?: number | false;

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

@@ -2,15 +2,16 @@ import type { PropsWithChildren, ReactNode } from 'react';
 import type { Placement } from '@floating-ui/react';
 import type { BaseProps, ComponentSize } from '../interface';
 export type Props = BaseProps & PropsWithChildren<{
-    classNameContainer?: string;
+    childrenClassName?: string;
     offSet?: number;
     padding?: number;
     withHover?: boolean;
     withFocus?: boolean;
     withClick?: boolean;
     open?: boolean;
+    theme?: string;
     size?: ComponentSize;
     placement?: Placement;
     Component: ReactNode;
 }>;
-export default function DTooltip({ classNameContainer, className, style, offSet, padding, withFocus, withClick, withHover, open, placement, size, Component, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DTooltip({ className, childrenClassName, style, offSet, padding, withFocus, withClick, withHover, open, theme, placement, size, Component, children, }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
-import { ToastTypeIconMap } from './interface';
+import { AlertTypeIconMap } from './interface';
 export declare const PREFIX_BS = "bs-";
 export declare const ICON_FAMILY_CLASS = "bi";
 export declare const ICON_FAMILY_PREFIX = "bi-";
-export declare const ALERT_TYPE_ICON: ToastTypeIconMap;
+export declare const ALERT_TYPE_ICON: AlertTypeIconMap;

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

@@ -1,6 +1,5 @@
 export * from './banking';
-export { default as DToast } from './DToast';
-export { default as DAlertBox } from './DAlertBox';
+export { default as DAlert } from './DAlert';
 export { default as DBadge } from './DBadge';
 export { default as DBoxFile } from './DBoxFile';
 export { default as DButton } from './DButton';
@@ -14,6 +13,7 @@ export { default as DCurrencyText } from './DCurrencyText';
 export { default as DDatePicker } from './DDatePicker';
 export { default as DIcon } from './DIcon';
 export { default as DInput } from './DInput';
+export { default as DInputMask } from './DInputMask';
 export { default as DInputCounter } from './DInputCounter';
 export { default as DInputCurrencyBase } from './DInputCurrencyBase';
 export { default as DInputCurrency } from './DInputCurrency';

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

@@ -39,11 +39,10 @@ export type EndIconProps = {
     iconEndAriaLabel?: string;
     iconEndTabIndex?: number;
 };
-export type ToastType = 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';
-export type ToastTypeIconMap = {
-    [state in ToastType]: string;
+export type AlertType = 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark' | 'primary' | 'secondary';
+export type AlertTypeIconMap = {
+    [state in AlertType]: string;
 };
-export type AlertBoxTheme = 'box-info' | 'box-white' | 'box-secondary';
 export type ButtonVariant = 'outline' | 'link';
 export type ButtonType = 'submit' | 'reset' | 'button';
 export type InputCheckType = 'checkbox' | 'radio';

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

@@ -0,0 +1,31 @@
+import type { PropsWithChildren, FC } from 'react';
+type ModalComponent<P = any> = FC<ModalProps<P>>;
+type ModalAvailableList<T extends Record<string, unknown>> = {
+    [K in keyof T]: ModalComponent<T[K]>;
+};
+type Props<T extends Record<string, unknown>> = PropsWithChildren<{
+    portalName: string;
+    availableModals: ModalAvailableList<T>;
+}>;
+type ModalStackItem<N extends string = string, P = any> = {
+    modalName: N;
+    Component: ModalComponent<P>;
+    payload: P;
+};
+type OpenModalFunction<P = unknown> = (name: string, payload: P) => void;
+type CloseModalFunction = () => void;
+type ModalContextType<T extends Record<string, unknown>> = {
+    stack: ModalStackItem<string, T[keyof T]>[];
+    openModal: OpenModalFunction<T[keyof T]>;
+    closeModal: CloseModalFunction;
+};
+export type ModalProps<P = unknown> = {
+    name: string;
+    payload: P;
+    openModal: OpenModalFunction<P>;
+    closeModal: CloseModalFunction;
+};
+export declare const DModalContext: import("react").Context<ModalContextType<any> | undefined>;
+export declare function DModalContextProvider<T extends Record<string, unknown>>({ portalName, children, availableModals, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useDModalContext<T extends Record<string, unknown>>(): ModalContextType<T>;
+export {};

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

@@ -0,0 +1,31 @@
+import type { PropsWithChildren, FC } from 'react';
+type OffcanvasComponent<P = any> = FC<OffcanvasProps<P>>;
+type OffcanvasAvailableList<T extends Record<string, unknown>> = {
+    [K in keyof T]: OffcanvasComponent<T[K]>;
+};
+type Props<T extends Record<string, unknown>> = PropsWithChildren<{
+    portalName: string;
+    availableOffcanvas: OffcanvasAvailableList<T>;
+}>;
+type OffcanvasStackItem<N extends string = string, P = any> = {
+    offcanvasName: N;
+    Component: OffcanvasComponent<P>;
+    payload: P;
+};
+type OpenOffcanvasFunction<P = unknown> = (name: string, payload: P) => void;
+type CloseOffcanvasFunction = () => void;
+type OffcanvasContextType<T extends Record<string, unknown>> = {
+    stack: OffcanvasStackItem<string, T[keyof T]>[];
+    openOffcanvas: OpenOffcanvasFunction<T[keyof T]>;
+    closeOffcanvas: CloseOffcanvasFunction;
+};
+export type OffcanvasProps<P = any> = {
+    name: string;
+    payload: P;
+    openOffcanvas: OpenOffcanvasFunction<P>;
+    closeOffcanvas: CloseOffcanvasFunction;
+};
+export declare const DOffcanvasContext: import("react").Context<OffcanvasContextType<any> | undefined>;
+export declare function DOffcanvasContextProvider<T extends Record<string, unknown>>({ portalName, children, availableOffcanvas, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useDOffcanvasContext<T extends Record<string, unknown>>(): OffcanvasContextType<T>;
+export {};

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

@@ -1,3 +1,3 @@
 export * from './DContext';
-export * from './ModalContext';
-export * from './OffcanvasContext';
+export * from './DModalContext';
+export * from './DOffcanvasContext';

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

@@ -2,3 +2,5 @@ export { default as useFormatCurrency } from './useFormatCurrency';
 export { default as useInputCurrency } from './useInputCurrency';
 export { default as useProvidedRefOrCreate } from './useProvidedRefOrCreate';
 export { default as useStackState } from './useStackState';
+export { default as useDisableBodyScrollEffect } from './useDisableBodyScrollEffect';
+export { default as usePortal } from './usePortal';

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

@@ -0,0 +1 @@
+export default function useDisableBodyScrollEffect(disable: boolean): void;

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

@@ -0,0 +1,3 @@
+export default function usePortal(portalName: string): {
+    created: boolean;
+};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.11.1",
+  "version": "1.12.1",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -67,6 +67,7 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.1",
+    "@react-input/mask": "^1.0.20",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
     "bootstrap": "^5.3.2",
@@ -143,5 +144,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "25610e0797ec0c26899a5dbff3769b407249f284"
+  "gitHead": "afc5f7db0e63ab20d8ede81b1784f6f85545cb86"
 }

package/src/style/abstracts/_maps.scss

@@ -1,6 +1,6 @@
 // Theme maps
 
-$alert-boxes: (
+$alert-soft: (
   "secondary": (var(--#{$prefix}secondary-100), var(--#{$prefix}secondary)),
   "white": (var(--#{$prefix}white), var(--#{$prefix}secondary)),
   "info": (var(--#{$prefix}info-100), var(--#{$prefix}info)),

package/src/style/abstracts/_utilities.scss

@@ -21,7 +21,7 @@ $utilities: map-merge(
         values: map-merge(
           map-get(map-get($utilities, "color"), "values"),
           // TODO: try to move the map-loop to $utilities-text map libraries/dynamic-ui/node_modules/bootstrap/scss/_maps.scss
-          map-loop($palette-grays, rgba-css-var, "$key", "text"),
+          map-loop(map-merge-multiple($theme-colors-palletes, $palette-grays), rgba-css-var, "$key", "text"),
         )
       )
     ),
@@ -31,10 +31,7 @@ $utilities: map-merge(
         values: map-merge(
           map-get(map-get($utilities, "background-color"), "values"),
           // TODO: try to move the map-loop to $utilities-bg map libraries/dynamic-ui/node_modules/bootstrap/scss/_maps.scss
-          map-merge(
-            map-loop($palette-grays, rgba-css-var, "$key", "bg"),
-            map-loop($bg-soft-colors, rgba-css-var, "$key", "bg")
-          )
+          map-loop(map-merge-multiple($theme-colors-palletes, $palette-grays, $bg-soft-colors), rgba-css-var, "$key", "bg"),
         )
       )
     ),

package/src/style/abstracts/variables/_box-file.scss

@@ -1,4 +1,5 @@
 $box-file-gap: var(--#{$prefix}ref-spacer-3) !default;
+$box-file-background: unset !default;
 $box-file-border: 1px dashed var(--#{$prefix}gray-700) !default;
 $box-file-border-radius: var(--#{$prefix}border-radius) !default;
 $box-file-padding: var(--#{$prefix}ref-spacer-5) !default;

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

@@ -3,6 +3,10 @@
 // scss-docs-start modal-variables
 $modal-inner-padding: 0 !default;
 
+// custom
+$modal-header-gap: $spacer-4 !default;
+// end custom
+
 $modal-footer-margin-between: $spacer-3 !default;
 
 $modal-dialog-margin: .5rem !default;

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

@@ -3,6 +3,7 @@
 // scss-docs-start offcanvas-variables
 $offcanvas-padding-y: $spacer-4 !default;
 // custom
+$offcanvas-header-gap: $spacer-4 !default;
 $offcanvas-footer-gap: $spacer-4 !default;
 // end custom
 $offcanvas-padding-x: $spacer-4 !default;

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

@@ -51,6 +51,7 @@ $font-sizes: (
 $headings-margin-bottom: 0 !default;
 $headings-font-family: null !default;
 $headings-font-style: null !default;
+$headings-font-weight: $font-weight-bold !default;
 $headings-line-height: 1.2 !default;
 $headings-color: null !default;
 // scss-docs-end headings-variables

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

@@ -37,7 +37,7 @@
 @import "d-quick-action-check";
 @import "d-quick-action-switch";
 @import "d-progress";
-@import "d-toast";
+@import "d-alert";
 @import "d-badge";
 @import "d-chip";
 @import "d-modal";
@@ -55,6 +55,7 @@
 @import "d-stepper-mobile";
 @import "d-paginator";
 @import "d-card-account";
+@import "d-tooltip";
 
 // TODO: review.
 @import "d-permission-group";

package/src/style/components/{_d-toast.scss → _d-alert.scss}

@@ -1,7 +1,7 @@
 .alert {
   --#{$prefix}alert-gap: #{$alert-gap};
   --#{$prefix}alert-box-shadow: #{$alert-box-shadow};
-  --#{$prefix}alert-icon-color: var(--#{$prefix}alert-component-icon-color, var(--#{$prefix}alert-color));
+  --#{$prefix}alert-icon-color: var(--#{$prefix}alert-color);
   --#{$prefix}alert-separator-opacity: var(--#{$prefix}alert-component-separator-opacity);
   --#{$prefix}alert-close-icon-size: #{$alert-close-icon-size};
 
@@ -45,21 +45,22 @@
     }
   }
 
-  &.alert-box {
+  &.alert-soft {
     --#{$prefix}alert-color: var(--#{$prefix}gray-900);
-
     border-width: 0 0 0 5px;
 
-    @each $theme, $value in $alert-boxes {
-      $background: nth($value, 1);
-      $color: nth($value, 2);
-
-      &.alert-box-#{$theme} {
-        --#{$prefix}alert-icon-color: #{$color};
-        --#{$prefix}alert-border-color: #{$color};
+    @each $theme, $value in map-remove($theme-colors, "light", "dark") {
+      &.alert-#{$theme} {
+        --#{$prefix}alert-icon-color: var(--#{$prefix}#{$theme}-500);
 
-        --#{$prefix}alert-bg: #{$background};
+        --#{$prefix}alert-bg: var(--#{$prefix}#{$theme}-100);
       }
     }
+
+    &.alert-light {
+      --#{$prefix}alert-icon-color: var(--#{$prefix}secondary-500);
+      --#{$prefix}alert-border-color: var(--#{$prefix}secondary-500);
+      --#{$prefix}alert-bg: var(--#{$prefix}white);
+    }
   }
 }

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

@@ -1,5 +1,6 @@
 .d-box-file {
   --#{$prefix}box-file-gap: #{$box-file-gap};
+  --#{$prefix}box-file-bg: #{$box-file-background};
   --#{$prefix}box-file-border: #{$box-file-border};
   --#{$prefix}box-file-border-radius: #{$box-file-border-radius};
   --#{$prefix}box-file-padding: #{$box-file-padding};
@@ -18,6 +19,7 @@
   gap: var(--#{$prefix}box-file-gap);
   width: 100%;
   cursor: pointer;
+  background: var(--#{$prefix}box-file-bg);
   border: var(--#{$prefix}box-file-border);
   border-radius: var(--#{$prefix}box-file-border-radius);
 

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

@@ -121,13 +121,37 @@
   }
 }
 
-@each $color, $value in map-remove($theme-colors, "light", "dark") {
+@each $color, $value in $theme-colors {
   .btn-#{$color} {
-    @include df-button-variant($color);
+    @if $color == "light" { // default bootstrap style
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+        $active-background: shade-color($value, $btn-active-bg-shade-amount),
+        $active-border: shade-color($value, $btn-active-border-shade-amount)
+      );
+    } @else if $color == "dark" { // default bootstrap style
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+        $active-background: tint-color($value, $btn-active-bg-tint-amount),
+        $active-border: tint-color($value, $btn-active-border-tint-amount)
+      );
+    } @else {
+      @include df-button-variant($color);
+    }
   }
 
   .btn-outline-#{$color} {
-    @include df-button-outline-variant($color);
+    @if $color == "light" or $color == "dark" { // default bootstrap style
+      @include button-outline-variant($value);
+    } @else {
+      @include df-button-outline-variant($color);
+    }
   }
 
   .btn-link-#{$color} {
@@ -160,3 +184,43 @@
     background-image: none;
   }
 }
+
+//
+// Link buttons
+//
+
+// 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-border-color: transparent;
+  --#{$prefix}btn-active-color: #{$btn-link-hover-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};
+
+  text-decoration: $link-decoration;
+  @if $enable-gradients {
+    background-image: none;
+  }
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus-visible {
+    color: var(--#{$prefix}btn-color);
+  }
+
+  &:hover {
+    color: var(--#{$prefix}btn-hover-color);
+  }
+
+  // No need for an active state here
+}

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

@@ -1,4 +1,5 @@
 .modal {
+  --#{$prefix}modal-header-gap: #{$offcanvas-header-gap};
   --#{$prefix}modal-body-padding: #{$modal-body-padding};
   --#{$prefix}modal-footer-padding: #{$modal-footer-padding};
   --#{$prefix}modal-separator-margin-x: #{$modal-separator-margin-x};
@@ -6,14 +7,19 @@
   --#{$prefix}modal-separator-bg: #{$modal-separator-bg};
 
   .modal-header {
-    flex-direction: column;
-    align-items: flex-start;
+    flex-direction: row;
+    gap: var(--#{$prefix}modal-header-gap);
+    align-items: center;
+    justify-content: space-between;
+
+    &:has(.d-modal-close:only-child) {
+      justify-content: flex-end;
+    }
   }
 
   .d-modal-close {
-    align-self: flex-end;
+    align-self: flex-start;
     padding: 0;
-    margin-bottom: $spacer-3;
     background: transparent;
     border: 0;
 
@@ -53,3 +59,9 @@
     justify-content: flex-end;
   }
 }
+
+.d-portal {
+  .modal {
+    display: block;
+  }
+}

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

@@ -1,8 +1,10 @@
 .offcanvas {
+  --#{$prefix}offcanvas-header-gap: #{$offcanvas-header-gap};
   --#{$prefix}offcanvas-footer-gap: #{$offcanvas-footer-gap};
 
   .offcanvas-header {
     flex-direction: row;
+    gap: var(--#{$prefix}offcanvas-header-gap);
     align-items: center;
     justify-content: space-between;
 
@@ -22,6 +24,7 @@
   }
 
   .d-offcanvas-close {
+    align-self: flex-start;
     padding: 0;
     background: transparent;
     border: 0;
@@ -43,3 +46,4 @@
     justify-content: flex-end;
   }
 }
+

package/src/style/components/_d-stepper-desktop.scss

@@ -131,7 +131,7 @@
         width: 0;
         height: 100%;
         content: "";
-        border: var(--#{$prefix}step-icon-container-border-width) solid var(--#{$prefix}step-icon-container-border-color);
+        border: var(--#{$prefix}step-line-stroke) solid var(--#{$prefix}step-line-color);
       }
 
       &:first-child .d-step-value::after {

package/src/style/components/_d-stepper-mobile.scss

@@ -24,7 +24,6 @@
   --#{$prefix}step-info-description-font-size: var(--#{$prefix}ref-fs-small);
   --#{$prefix}step-info-description-color: var(--#{$prefix}gray-500);
 
-
   display: flex;
   gap: var(--#{$prefix}step-container-gap);
   align-items: center;
@@ -40,6 +39,7 @@
     height: var(--#{$prefix}step-progress-outter-size);
     border-radius: var(--#{$prefix}step-progress-outter-size);
   }
+
   .d-step-bar::after {
     position: absolute;
     z-index: var(--#{$prefix}step-progress-inner-z-index);
@@ -49,19 +49,23 @@
     background-color: var(--#{$prefix}step-progress-inner-background-color);
     border-radius: var(--#{$prefix}step-progress-inner-size);
   }
+
   .d-step-number {
     z-index: var(--#{$prefix}step-current-step-z-index);
     font-weight: var(--#{$prefix}step-current-step-font-weight);
     color: var(--#{$prefix}step-current-step-color);
   }
+
   .d-step-info {
     display: flex;
     flex-direction: column;
     max-width: var(--#{$prefix}step-info-max-width);
   }
+
   .d-step-label {
     font-size: var(--#{$prefix}step-info-label-font-size);
   }
+
   .d-step-description {
     font-size: var(--#{$prefix}step-info-description-font-size);
     color: var(--#{$prefix}step-info-description-color);

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

@@ -0,0 +1,35 @@
+.d-tooltip {
+  --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-component-font-size, var(--#{$prefix}body-font-size));
+  --#{$prefix}tooltip-sm-font-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}tooltip-lg-font-size: var(--#{$prefix}ref-fs-6);
+  --#{$prefix}tooltip-bg: var(--#{$prefix}tooltip-component-bg, transparent);
+  --#{$prefix}tooltip-border-radius: var(--#{$prefix}tooltip-component-border-radius, var(--#{$prefix}border-radius));
+  --#{$prefix}tooltip-color: var(--#{$prefix}tooltip-component-color, var(--#{$prefix}body-color));
+  --#{$prefix}tooltip-padding: var(--#{$prefix}tooltip-component-padding, var(--#{$prefix}ref-spacer-2));
+  --#{$prefix}tooltip-max-width: var(--#{$prefix}tooltip-component-max-width, 300px);
+  max-width: var(--#{$prefix}tooltip-max-width);
+  padding: var(--#{$prefix}tooltip-padding);
+
+  font-size: var(--#{$prefix}tooltip-font-size);
+  color: var(--#{$prefix}tooltip-color);
+  background: var(--#{$prefix}tooltip-bg);
+  border-radius: var(--#{$prefix}tooltip-border-radius);
+  fill: var(--#{$prefix}tooltip-bg);
+
+  &.d-tooltip-sm {
+    --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-sm-font-size);
+  }
+
+  &.d-tooltip-lg {
+    --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-lg-font-size);
+  }
+
+  @each $theme, $value in $theme-colors {
+    $color: color-contrast-var($value);
+
+    &.d-tooltip-#{$theme} {
+      --#{$prefix}tooltip-color: var(--#{$prefix}tooltip-component-color, #{$color});
+      --#{$prefix}tooltip-bg: var(--#{$prefix}tooltip-component-bg, var(--#{$prefix}#{$theme}));
+    }
+  }
+}

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

@@ -1,9 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { BaseProps, AlertBoxTheme, FamilyIconProps } from '../interface';
-type Props = BaseProps & FamilyIconProps & PropsWithChildren<{
-    id?: string;
-    theme?: AlertBoxTheme;
-    icon?: string;
-}>;
-export default function DAlertBox({ theme, icon, iconFamilyClass, iconFamilyPrefix, children, id, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

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

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