@dynamic-framework/ui-react 1.17.1 → 1.19.0

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

@@ -0,0 +1,9 @@
+import type { AvatarSize, BaseProps } from '../interface';
+type Props = BaseProps & {
+    id?: string;
+    size?: AvatarSize;
+    image?: string;
+    title?: string;
+};
+export default function DAvatar({ id, size, image, title, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

@@ -1,10 +1,11 @@
-import type { PropsWithChildren } from 'react';
+/// <reference types="react" />
+import { Splide } from '@splidejs/react-splide';
 import type { SplideProps } from '@splidejs/react-splide';
 import DCarouselSlide from './components/DCarouselSlide';
 import type { BaseProps } from '../interface';
-type Props = SplideProps & PropsWithChildren<BaseProps>;
-declare function DCarousel({ children, className, style, options, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof DCarousel & {
+declare const _default: import("react").ForwardRefExoticComponent<SplideProps & BaseProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<Splide>> & {
     Slide: typeof DCarouselSlide;
 };
 export default _default;

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

@@ -1,12 +1,14 @@
 import type { CSSProperties } from 'react';
-import type { ToastPosition } from 'react-toastify';
-import type { BaseProps } from '../interface';
-type Props = BaseProps & {
+import type { ToastContainerProps } from 'react-toastify';
+import { BaseProps } from '../interface';
+type Props = BaseProps & Pick<ToastContainerProps, 'autoClose' | 'closeOnClick' | 'position'> & {
+    containerId?: string;
+    stacked?: boolean;
     style?: CSSProperties & {
-        '--toastify-toast-width': any;
-        [index: string]: any;
+        '--toastify-toast-width': string | number;
+        [index: string]: string | number;
     };
-    position?: ToastPosition;
+    transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
 };
-export default function DToastContainer({ style, position, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DToastContainer({ style, className, closeOnClick, position, autoClose, stacked, transition, containerId, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,3 +1,3 @@
 import DToastContainer from './DToastContainer';
-export { default as useToast } from './useToast';
+export { default as useDToast } from './useDToast';
 export default DToastContainer;

package/dist/types/components/DToastContainer/{useToast.d.ts → useDToast.d.ts}

@@ -2,12 +2,15 @@ import type { ToastPosition } from 'react-toastify';
 import type { AlertType } from '../interface';
 export type ToastConfig = {
     type?: AlertType;
+    icon?: string;
+    iconClose?: string;
     showClose?: boolean;
     position?: ToastPosition;
     autoClose?: number | false;
-    icon?: string;
-    iconClose?: string;
+    stacked?: boolean;
+    containerId?: string;
+    transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
 };
-export default function useToast(): {
-    toast: (message: string, { position, type, showClose, autoClose, icon, iconClose, }?: ToastConfig) => void;
+export default function useDToast(): {
+    toast: (message: string, { icon, iconClose, type, showClose, transition, ...rest }: ToastConfig) => void;
 };

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

@@ -38,4 +38,4 @@ export { default as DStepperDesktop } from './DStepperDesktop';
 export { default as DStepperMobile } from './DStepperMobile';
 export { default as DTooltip } from './DTooltip';
 export { default as DTabs, useTabContext, DTabOption, DTabContent, } from './DTabs';
-export { default as DToastContainer, useToast, } from './DToastContainer';
+export { default as DToastContainer, useDToast, } from './DToastContainer';

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

@@ -12,6 +12,7 @@ export type NavegableProps = {
 };
 export type ComponentSize = 'sm' | 'lg';
 export type BreakpointSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type AvatarSize = 'xs' | 'sm' | 'lg' | 'xl' | 'xxl';
 export type BaseProps = {
     style?: CSSProperties;
     className?: string;

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

@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from 'react';
+import { PortalContextProps } from './DPortalContext';
 import type { AlertTypeIconMap } from '../components/interface';
 type CurrencyProps = {
     symbol: string;
@@ -32,16 +33,16 @@ type IconMapProps = {
         increase: string;
     };
 };
-type Props = {
+type Props<T extends Record<string, unknown>> = {
     language: string;
     currency: CurrencyProps;
     icon: IconProps;
     iconMap: IconMapProps;
+} & PortalContextProps<T>;
+type Context<T extends Record<string, unknown>> = Props<T> & {
+    setContext: (value: Partial<Props<T>>) => void;
 };
-type Context = Props & {
-    setContext: (value: Partial<Props>) => void;
-};
-export declare const DContext: import("react").Context<Partial<Context>>;
-export declare function DContextProvider({ language, currency, icon, iconMap, children, }: PropsWithChildren<Partial<Props>>): import("react/jsx-runtime").JSX.Element;
-export declare function useDContext(): Context;
+export declare const DContext: import("react").Context<Partial<Context<any>>>;
+export declare function DContextProvider<T extends Record<string, unknown>>({ language, currency, icon, iconMap, portalName, availablePortals, children, }: PropsWithChildren<Partial<Props<T>>>): import("react/jsx-runtime").JSX.Element;
+export declare function useDContext<T extends Record<string, unknown>>(): Context<T>;
 export {};

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

@@ -0,0 +1,29 @@
+import type { PropsWithChildren, FC } from 'react';
+type PortalComponent<P = any> = FC<PortalProps<P>>;
+type PortalAvailableList<T extends Record<string, unknown>> = {
+    [K in keyof T]: PortalComponent<T[K]>;
+};
+export type PortalContextProps<T extends Record<string, unknown>> = PropsWithChildren<{
+    portalName: string;
+    availablePortals?: PortalAvailableList<T>;
+}>;
+type PortalStackItem<N extends string = string, P = any> = {
+    name: N;
+    Component: PortalComponent<P>;
+    payload: P;
+};
+type OpenPortalFunction<P = unknown> = (name: string, payload: P) => void;
+type ClosePortalFunction = () => void;
+export type PortalContextType<T extends Record<string, unknown>> = {
+    stack: PortalStackItem<string, T[keyof T]>[];
+    openPortal: OpenPortalFunction<T[keyof T]>;
+    closePortal: ClosePortalFunction;
+};
+export type PortalProps<P = unknown> = {
+    name: string;
+    payload: P;
+};
+export declare const DPortalContext: import("react").Context<PortalContextType<any> | undefined>;
+export declare function DPortalContextProvider<T extends Record<string, unknown>>({ portalName, children, availablePortals, }: PortalContextProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useDPortalContext<T extends Record<string, unknown>>(): PortalContextType<T>;
+export {};

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

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

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.17.1",
+  "version": "1.19.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -83,7 +83,7 @@
     "react-dropzone": "^14.2.3",
     "react-responsive-pagination": "^2.4.1",
     "react-select": "^5.8.0",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^10.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -149,5 +149,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "cb4961253c750d22816d61859c53540863845041"
+  "gitHead": "9542d1738c6c95536756b97fb13d1f032d760523"
 }

package/src/style/abstracts/_mixins.scss

@@ -1,126 +1,142 @@
-// scss-docs-start df-btn-variant-mixin
-@mixin df-button-variant(
+// scss-docs-start df-button-variant-variables-mixin
+@mixin df-button-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
   $hover-color: var(--#{$prefix}#{$color-name}-600),
-  $focus-color: var(--#{$prefix}#{$color-name}-600),
+  $focus-color: var(--#{$prefix}#{$color-name}-500),
   $active-color: var(--#{$prefix}#{$color-name}-700),
-  $disabled-color: var(--#{$prefix}#{$color-name}-100),
   $default-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-500)),
   $hover-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
   $focus-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
   $active-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-700)),
-  $disabled-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-100)),
+  $disabled-opacity: .5
 ) {
-  --#{$prefix}btn-color: #{$default-text-color};
-  --#{$prefix}btn-bg: #{$default-color};
-  --#{$prefix}btn-border-color: #{$default-color};
-
-  --#{$prefix}btn-hover-color: #{$hover-text-color};
-  --#{$prefix}btn-hover-bg: #{$hover-color};
-  --#{$prefix}btn-hover-border-color: #{$hover-color};
-
-  --#{$prefix}btn-focus-color: #{$focus-text-color};
-  --#{$prefix}btn-focus-bg: #{$focus-color};
-  --#{$prefix}btn-focus-border-color: #{$focus-color};
-
-  --#{$prefix}btn-active-color: #{$active-text-color};
-  --#{$prefix}btn-active-bg: #{$active-color};
-  --#{$prefix}btn-active-border-color: #{$active-color};
-
-  --#{$prefix}btn-disabled-color: #{$disabled-text-color};
-  --#{$prefix}btn-disabled-bg: #{$disabled-color};
-  --#{$prefix}btn-disabled-border-color: #{$disabled-color};
-
-  &.loading {
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-bg: #{$active-color};
-    --#{$prefix}btn-disabled-border-color: #{$active-color};
-    --#{$prefix}btn-disabled-color: #{$hover-text-color};
-  }
+  --#{$prefix}btn-#{$color-name}-color: #{$default-text-color};
+  --#{$prefix}btn-#{$color-name}-bg: #{$default-color};
+  --#{$prefix}btn-#{$color-name}-border-color: #{$default-color};
+
+  --#{$prefix}btn-#{$color-name}-hover-color: #{$hover-text-color};
+  --#{$prefix}btn-#{$color-name}-hover-bg: #{$hover-color};
+  --#{$prefix}btn-#{$color-name}-hover-border-color: #{$hover-color};
+
+  --#{$prefix}btn-#{$color-name}-focus-color: #{$focus-text-color};
+  --#{$prefix}btn-#{$color-name}-focus-bg: #{$focus-color};
+  --#{$prefix}btn-#{$color-name}-focus-border-color: #{$focus-color};
+
+  --#{$prefix}btn-#{$color-name}-active-color: #{$active-text-color};
+  --#{$prefix}btn-#{$color-name}-active-bg: #{$active-color};
+  --#{$prefix}btn-#{$color-name}-active-border-color: #{$active-color};
+
+  --#{$prefix}btn-#{$color-name}-disabled-color: #{$default-text-color};
+  --#{$prefix}btn-#{$color-name}-disabled-bg: #{$default-color};
+  --#{$prefix}btn-#{$color-name}-disabled-border-color: #{$default-color};
+  --#{$prefix}btn-#{$color-name}-disabled-opacity: #{$disabled-opacity};
 }
-// scss-docs-end df-btn-variant-mixin
+// scss-docs-end df-button-variant-variables-mixin
 
-
-// scss-docs-start df-btn-outline-variant-mixin
-@mixin df-button-outline-variant(
+// scss-docs-start df-btn-outline-variant-variables-mixin
+@mixin df-button-outline-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
   $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $focus-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-200),
-  $disabled-color: var(--#{$prefix}#{$color-name}-100),
-  $disabled-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-100)),
+  $hover-text-color: var(--#{$prefix}#{$color-name}-500),
+  $focus-text-color: var(--#{$prefix}#{$color-name}-500),
+  $active-text-color: var(--#{$prefix}#{$color-name}-700),
+  $active-bg-color: var(--#{$prefix}#{$color-name}-100),
+  $active-border-color: var(--#{$prefix}#{$color-name}-700),
+  $disabled-opacity: .5
 ) {
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: #{$default-color};
-  --#{$prefix}btn-color: #{$default-color};
-
-  --#{$prefix}btn-hover-bg: #{$hover-bg-color};
-  --#{$prefix}btn-hover-border-color: #{$default-color};
-  --#{$prefix}btn-hover-color: #{$default-color};
-
-  --#{$prefix}btn-focus-bg: #{$focus-bg-color};
-  --#{$prefix}btn-focus-border-color: #{$default-color};
-  --#{$prefix}btn-focus-color: #{$default-color};
-
-  --#{$prefix}btn-active-bg: #{$active-bg-color};
-  --#{$prefix}btn-active-border-color: #{$default-color};
-  --#{$prefix}btn-active-color: #{$default-color};
-
-  --#{$prefix}btn-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: #{$disabled-color};
-  --#{$prefix}btn-disabled-color: #{$disabled-text-color};
-
-  --#{$prefix}gradient: none;
-
-  &.loading {
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-border-color: #{$default-color};
-    --#{$prefix}btn-disabled-color: #{$default-color};
-  }
+  --#{$prefix}btn-outline-#{$color-name}-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-border-color: #{$default-color};
+
+  --#{$prefix}btn-outline-#{$color-name}-hover-color: #{$hover-text-color};
+  --#{$prefix}btn-outline-#{$color-name}-hover-bg: #{$hover-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$default-color};
+
+  --#{$prefix}btn-outline-#{$color-name}-focus-color: #{$focus-text-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$default-color};
+
+  --#{$prefix}btn-outline-#{$color-name}-active-color: #{$active-text-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-bg: #{$active-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-border-color};
+
+  --#{$prefix}btn-outline-#{$color-name}-disabled-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-disabled-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-disabled-border-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-disabled-opacity: #{$disabled-opacity};
 }
-// scss-docs-end df-btn-outline-variant-mixin
+// scss-docs-end df-btn-outline-variant-variables-mixin
 
-// scss-docs-start df-btn-link-variant-mixin
-@mixin df-button-link-variant(
+// scss-docs-start df-btn-link-variant-variables-mixin
+@mixin df-button-link-variant-variables(
   $color-name,
-  $default-color: var(--#{$prefix}#{$color-name}-600),
+  $default-color: var(--#{$prefix}#{$color-name}-500),
   $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-200),
-  $disable-color: var(--#{$prefix}#{$color-name}-300),
+  $hover-text-color: var(--#{$prefix}#{$color-name}-500),
+  $focus-text-color: var(--#{$prefix}#{$color-name}-500),
+  $active-text-color: var(--#{$prefix}#{$color-name}-700),
+  $active-bg-color: var(--#{$prefix}#{$color-name}-100),
+  $disabled-opacity: .5
 ) {
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-color: #{$default-color};
+  --#{$prefix}btn-link-#{$color-name}-bg: transparent;
+  --#{$prefix}btn-link-#{$color-name}-border-color: transparent;
+  --#{$prefix}btn-link-#{$color-name}-color: #{$default-color};
+
+  --#{$prefix}btn-link-#{$color-name}-hover-bg: #{$hover-bg-color};
+  --#{$prefix}btn-link-#{$color-name}-hover-border-color: transparent;
+  --#{$prefix}btn-link-#{$color-name}-hover-color: #{$hover-text-color};
+
+  --#{$prefix}btn-link-#{$color-name}-focus-bg: transparent;
+  --#{$prefix}btn-link-#{$color-name}-focus-border-color: transparent;
+  --#{$prefix}btn-link-#{$color-name}-focus-color: #{$focus-text-color};
+
+  --#{$prefix}btn-link-#{$color-name}-active-bg: #{$active-bg-color};
+  --#{$prefix}btn-link-#{$color-name}-active-border-color: transparent;
+  --#{$prefix}btn-link-#{$color-name}-active-color: #{$active-text-color};
+
+  --#{$prefix}btn-link-#{$color-name}-disabled-bg: transparent;
+  --#{$prefix}btn-link-#{$color-name}-disabled-border-color: transparent;
+  --#{$prefix}btn-link-#{$color-name}-disabled-color: #{$default-color};
+  --#{$prefix}btn-link-#{$color-name}-disabled-opacity: #{$disabled-opacity};
+}
+// scss-docs-end df-btn-link-variant-variables-mixin
+
+// scss-docs-start df-btn-variant-mixin
+@mixin df-button-variant-mapper($color-name, $variant-name: "") {
+  @if $variant-name != "" {
+    $variant-name: "#{$variant-name}-";
+  }
 
-  --#{$prefix}btn-hover-bg: #{$hover-bg-color};
-  --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-hover-color: #{$default-color};
+  --#{$prefix}btn-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-color);
+  --#{$prefix}btn-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-bg);
+  --#{$prefix}btn-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-border-color);
 
-  --#{$prefix}btn-focus-bg: transparent;
-  --#{$prefix}btn-focus-border-color: transparent;
-  --#{$prefix}btn-focus-color: #{$default-color};
+  --#{$prefix}btn-hover-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-color);
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-bg);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-border-color);
 
-  --#{$prefix}btn-active-bg: #{$active-bg-color};
-  --#{$prefix}btn-active-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$default-color};
+  --#{$prefix}btn-focus-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-color);
+  --#{$prefix}btn-focus-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-bg);
+  --#{$prefix}btn-focus-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-border-color);
 
-  --#{$prefix}btn-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}btn-disabled-color: #{$disable-color};
+  --#{$prefix}btn-active-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
+  --#{$prefix}btn-active-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
 
-  --#{$prefix}btn-focus-outline-offset: 0;
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-color);
+  --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-bg);
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-border-color);
+  --#{$prefix}btn-disabled-opacity: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-opacity);
 
   &.loading {
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-disabled-color: #{$default-color};
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
   }
 }
-// scss-docs-end df-btn-link-variant-mixin
+// scss-docs-end df-btn-variant-mixin
 
 // scss-docs-start df-table-variant
 @mixin df-table-variant($state, $background) {

package/src/style/abstracts/_utilities.scss

@@ -55,6 +55,12 @@ $utilities: map-merge(
         )
       )
     ),
+    "font-weight": map-merge(
+      map-get($utilities, "font-weight"),
+      (
+        responsive: true
+      )
+    ),
     "border-color": map-merge(
       map-get($utilities, "border-color"),
       (
@@ -76,9 +82,36 @@ $utilities: map-merge(
         100: 1
       )
     ),
+    "text-truncate": (
+      responsive: true,
+      class: "text-truncate",
+      css-var: true,
+      values: (
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 6,
+        6: 6
+      )
+    ),
     "cursor": (
       property: cursor,
-      values: $cursors,
+      values: $cursors
+    ),
+    "font-size": map-merge(
+      map-get($utilities, "font-size"),
+      (
+        responsive: true,
+        rfs: false
+      )
+    ),
+    "display-font-size": (
+      class: "display",
+      responsive: true,
+      css-var: true,
+      css-variable-name: display-font-size,
+      values: $display-font-sizes
     ),
   )
 );

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

@@ -57,6 +57,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 
 @import "buttons";
 @import "forms";
+@import "z-index";
 @import "navs";
 @import "navbar";
 @import "dropdowns";
@@ -64,6 +65,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 
 @import "cards";
 @import "accordion";
+@import "tooltip";
 @import "badges";
 @import "modals";
 @import "alerts";

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

@@ -9,8 +9,8 @@ $accordion-bg: var(--#{$prefix}white) !default;
 // custom
 $accordion-body-padding-top: $accordion-padding-x !default;
 $accordion-button-border-color: var(--#{$prefix}gray-100) !default;
-$accordion-button-font-weight: var(--#{$prefix}ref-fw-bold) !default;
-$accordion-button-font-size: var(--#{$prefix}ref-fs-6) !default;
+$accordion-button-font-weight: var(--#{$prefix}fw-bold) !default;
+$accordion-button-font-size: var(--#{$prefix}fs-6) !default;
 // end custom
 
 $accordion-button-active-bg: var(--#{$prefix}secondary-soft) !default;

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

@@ -5,7 +5,7 @@
 // scss-docs-start alert-variables
 $alert-padding-x: $spacer-6 !default;
 $alert-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$alert-link-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$alert-link-font-weight: var(--#{$prefix}fw-bold) !default;
 // scss-docs-end alert-variables
 
 // fusv-disable

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

@@ -24,7 +24,7 @@ $btn-focus-box-shadow: none !default;
 $btn-disabled-opacity: 1 !default;
 $btn-active-box-shadow: none !default;
 
-$btn-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-$btn-border-radius-lg: var(--#{$prefix}border-radius) !default;
+$btn-border-radius: var(--#{$prefix}border-radius-pill) !default;
+$btn-border-radius-sm: var(--#{$prefix}border-radius-pill) !default;
+$btn-border-radius-lg: var(--#{$prefix}border-radius-pill) !default;
 // scss-docs-end btn-variables

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

@@ -4,4 +4,6 @@
 $card-border-width: 0px !default; // stylelint-disable-line length-zero-no-unit
 $card-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 $card-bg: var(--#{$prefix}white) !default;
+$card-spacer-y: $spacer-6 !default;
+$card-spacer-x: $spacer-6 !default;
 // scss-docs-end card-variables

package/src/style/abstracts/variables/_collapse-icon-text.scss

@@ -1,3 +1,3 @@
 $collapse-icon-text-header-gap: var(--#{$prefix}ref-spacer-4) !default;
-$collapse-icon-text-header-font-size: var(--#{$prefix}ref-fs-6) !default;
-$collapse-icon-text-header-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$collapse-icon-text-header-font-size: var(--#{$prefix}fs-6) !default;
+$collapse-icon-text-header-font-weight: var(--#{$prefix}fw-bold) !default;

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

@@ -5,8 +5,8 @@ $form-text-color: $text-muted !default;
 
 // scss-docs-start form-label-variables
 $form-label-margin-bottom: 0 !default;
-$form-label-font-size: var(--#{$prefix}ref-fs-small) !default;
-$form-label-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$form-label-font-size: var(--#{$prefix}fs-small) !default;
+$form-label-font-weight: var(--#{$prefix}fw-bold) !default;
 $form-label-color: var(--#{$prefix}gray) !default;
 // scss-docs-end form-label-variables
 
@@ -48,9 +48,9 @@ $input-plaintext-color: var(--#{$prefix}body-color) !default;
 $form-check-size-multiplier: 1.5 !default;
 // end custom
 $form-check-input-width: 1em * $form-check-size-multiplier !default;
-$form-check-min-height: $font-size-base * $line-height-base * $form-check-size-multiplier !default;
+$form-check-min-height: $form-check-input-width !default;
 $form-check-padding-start: $form-check-input-width - .5em * $form-check-size-multiplier !default;
-$form-check-margin-bottom: .125rem * $form-check-size-multiplier !default;
+$form-check-margin-bottom: .125rem !default;
 
 // custom
 $form-check-input-border-color: var(--#{$prefix}gray-400) !default;
@@ -69,9 +69,7 @@ $form-check-input-hover-border-color: var(--#{$prefix}focus-ring-color) !default
 $form-check-input-checked-bg-image: url("data:image/svg+xml, <svg viewBox='-4 -6 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M14.294 0.594229C14.3863 0.498719 14.4966 0.422536 14.6186 0.370127C14.7406 0.317718 14.8719 0.290132 15.0046 0.288978C15.1374 0.287824 15.2691 0.313126 15.392 0.363407C15.5149 0.413688 15.6265 0.487941 15.7204 0.581833C15.8143 0.675726 15.8886 0.787378 15.9389 0.910275C15.9891 1.03317 16.0144 1.16485 16.0133 1.29763C16.0121 1.43041 15.9846 1.56163 15.9321 1.68363C15.8797 1.80564 15.8036 1.91598 15.708 2.00823L6.70804 11.0082C6.52051 11.1957 6.26621 11.301 6.00104 11.301C5.73588 11.301 5.48157 11.1957 5.29404 11.0082L0.293041 6.00723C0.110883 5.81863 0.0100885 5.56602 0.0123669 5.30383C0.0146453 5.04163 0.119815 4.79082 0.305223 4.60541C0.490631 4.42 0.741443 4.31483 1.00364 4.31255C1.26584 4.31028 1.51844 4.41107 1.70704 4.59323L6.00104 8.88723L14.294 0.594229V0.594229Z' fill='#{$white}'/></svg>") !default;
 $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$white}'/></svg>") !default;
 
-$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$secondary}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
-
-$form-check-input-disabled-opacity: 1 !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
 
 // custom
 $form-check-input-disabled-border-color: var(--#{$prefix}gray-300) !default;

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

@@ -2,7 +2,7 @@
 
 // scss-docs-start nav-variables
 $nav-link-font-size: var(--#{$prefix}body-font-size) !default;
-$nav-link-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$nav-link-font-weight: var(--#{$prefix}fw-normal) !default;
 $nav-link-color: var(--#{$prefix}gray-500) !default;
 $nav-link-hover-color: var(--#{$prefix}secondary-600) !default;
 $nav-link-disabled-color: var(--#{$prefix}gray-200) !default;
@@ -12,7 +12,7 @@ $nav-link-border-height: 2px !default;
 $nav-link-line-height: var(--#{$prefix}ref-spacer-6) !default;
 $nav-link-border-border-radius: $border-radius-pill !default;
 $nav-link-border-active-color: var(--#{$prefix}secondary) !default;
-$nav-link-border-active-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$nav-link-border-active-font-weight: var(--#{$prefix}fw-bold) !default;
 $nav-link-border-active-bg: var(--#{$prefix}secondary) !default;
 // end custom
 

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

@@ -3,10 +3,10 @@
 // scss-docs-start pagination-variables
 $pagination-padding-y: var(--#{$prefix}ref-spacer-1) !default;
 $pagination-padding-x: var(--#{$prefix}ref-spacer-1) !default;
-$pagination-padding-y-sm: var(--#{$prefix}ref-spacer-1) !default;
-$pagination-padding-x-sm: var(--#{$prefix}ref-spacer-1) !default;
-$pagination-padding-y-lg: var(--#{$prefix}ref-spacer-2) !default;
-$pagination-padding-x-lg: var(--#{$prefix}ref-spacer-2) !default;
+$pagination-padding-y-sm: var(--#{$prefix}ref-spacer-0) !default;
+$pagination-padding-x-sm: var(--#{$prefix}ref-spacer-0) !default;
+$pagination-padding-y-lg: var(--#{$prefix}ref-spacer-1) !default;
+$pagination-padding-x-lg: var(--#{$prefix}ref-spacer-1) !default;
 
 // custom
 $pagination-page-item-size: $spacer-8 !default;