@dynamic-framework/ui-react 1.9.1 → 1.11.0

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

@@ -1,5 +1,5 @@
-import { AlertTypeIconMap } from './interface';
+import { ToastTypeIconMap } 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: AlertTypeIconMap;
+export declare const ALERT_TYPE_ICON: ToastTypeIconMap;

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

@@ -1,5 +1,6 @@
 export * from './banking';
-export { default as DAlert } from './DAlert';
+export { default as DToast } from './DToast';
+export { default as DAlertBox } from './DAlertBox';
 export { default as DBadge } from './DBadge';
 export { default as DBoxFile } from './DBoxFile';
 export { default as DButton } from './DButton';

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

@@ -29,16 +29,21 @@ export type StartIconProps = {
     iconStart?: string;
     iconStartFamilyClass?: string;
     iconStartFamilyPrefix?: string;
+    iconStartAriaLabel?: string;
+    iconStartTabIndex?: number;
 };
 export type EndIconProps = {
     iconEnd?: string;
     iconEndFamilyClass?: string;
     iconEndFamilyPrefix?: string;
+    iconEndAriaLabel?: string;
+    iconEndTabIndex?: number;
 };
-export type AlertType = 'success' | 'info' | 'light' | 'dark' | 'warning' | 'danger';
-export type AlertTypeIconMap = {
-    [state in AlertType]: string;
+export type ToastType = 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';
+export type ToastTypeIconMap = {
+    [state in ToastType]: 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/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.9.1",
+  "version": "1.11.0",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -42,6 +42,7 @@
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watch",
+    "test:storybook": "test-storybook",
     "build": "pnpm clean && pnpm build:react && pnpm build:scss",
     "build:react": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
@@ -86,6 +87,7 @@
     "@babel/preset-typescript": "^7.23.2",
     "@mdx-js/react": "^2.3.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-a11y": "^7.5.3",
     "@storybook/addon-actions": "^7.5.1",
     "@storybook/addon-essentials": "^7.5.1",
     "@storybook/addon-interactions": "^7.5.1",
@@ -94,6 +96,7 @@
     "@storybook/blocks": "^7.5.1",
     "@storybook/react": "^7.5.1",
     "@storybook/react-webpack5": "^7.5.1",
+    "@storybook/test-runner": "^0.14.1",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.5.1",
     "@testing-library/jest-dom": "^6.1.4",
@@ -106,6 +109,7 @@
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "autoprefixer": "^10.4.16",
+    "axe-playwright": "^1.2.3",
     "babel-loader": "^9.1.3",
     "bootstrap": "^5.3.2",
     "eslint": "^8.52.0",
@@ -116,6 +120,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
+    "jest-axe": "^8.0.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.0.2",
@@ -138,5 +143,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "06a9c8a57f224fd54a68bc521b45a4b1d75ac8ed"
+  "gitHead": "3c33b40ebe68b56e1f5e073a05c76ada032214ed"
 }

package/src/style/abstracts/_maps.scss

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

package/src/style/abstracts/_mixins.scss

@@ -2,27 +2,33 @@
 @mixin df-button-variant(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-color: var(--#{$prefix}#{$color-name}-700),
-  $active-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-color: var(--#{$prefix}#{$color-name}-600),
+  $focus-color: var(--#{$prefix}#{$color-name}-600),
+  $active-color: var(--#{$prefix}#{$color-name}-700),
   $disabled-color: var(--#{$prefix}#{$color-name}-100),
-  $text-color-100: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-100)),
-  $text-color-500: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-500)),
-  $text-color-700: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
-  $text-color-900: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-700)),
+  $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)),
 ) {
-  --#{$prefix}btn-color: #{$text-color-500};
+  --#{$prefix}btn-color: #{$default-text-color};
   --#{$prefix}btn-bg: #{$default-color};
   --#{$prefix}btn-border-color: #{$default-color};
 
-  --#{$prefix}btn-hover-color: #{$text-color-900};
+  --#{$prefix}btn-hover-color: #{$hover-text-color};
   --#{$prefix}btn-hover-bg: #{$hover-color};
   --#{$prefix}btn-hover-border-color: #{$hover-color};
 
-  --#{$prefix}btn-active-color: #{$text-color-700};
+  --#{$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: #{$text-color-100};
+  --#{$prefix}btn-disabled-color: #{$disabled-text-color};
   --#{$prefix}btn-disabled-bg: #{$disabled-color};
   --#{$prefix}btn-disabled-border-color: #{$disabled-color};
 
@@ -30,41 +36,49 @@
     --#{$prefix}btn-disabled-opacity: 1;
     --#{$prefix}btn-disabled-bg: #{$active-color};
     --#{$prefix}btn-disabled-border-color: #{$active-color};
-    --#{$prefix}btn-disabled-color: #{$text-color-700};
+    --#{$prefix}btn-disabled-color: #{$hover-text-color};
   }
 }
 // scss-docs-end df-btn-variant-mixin
 
 
 // scss-docs-start df-btn-outline-variant-mixin
-@mixin df-button-outline-variant($color-name) {
+@mixin df-button-outline-variant(
+  $color-name,
+  $default-color: var(--#{$prefix}#{$color-name}-600),
+  $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)),
+) {
   --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: var(--#{$prefix}#{$color-name}-500);
-  --#{$prefix}btn-color: var(--#{$prefix}#{$color-name}-500);
+  --#{$prefix}btn-border-color: #{$default-color};
+  --#{$prefix}btn-color: #{$default-color};
 
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color-name}-100);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$color-name}-600);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color-name}-600);
+  --#{$prefix}btn-hover-bg: #{$hover-bg-color};
+  --#{$prefix}btn-hover-border-color: #{$default-color};
+  --#{$prefix}btn-hover-color: #{$default-color};
 
-  --#{$prefix}btn-focus-bg: var(--#{$prefix}#{$color-name}-100);
-  --#{$prefix}btn-focus-border-color: var(--#{$prefix}#{$color-name});
-  --#{$prefix}btn-focus-color: var(--#{$prefix}#{$color-name});
+  --#{$prefix}btn-focus-bg: #{$focus-bg-color};
+  --#{$prefix}btn-focus-border-color: #{$default-color};
+  --#{$prefix}btn-focus-color: #{$default-color};
 
-  --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color-name}-300);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}#{$color-name}-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}#{$color-name}-600);
+  --#{$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: var(--#{$prefix}#{$color-name}-100);
-  --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color-name}-100);
+  --#{$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: var(--#{$prefix}#{$color-name}-600);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color-name}-600);
+    --#{$prefix}btn-disabled-border-color: #{$default-color};
+    --#{$prefix}btn-disabled-color: #{$default-color};
   }
 }
 // scss-docs-end df-btn-outline-variant-mixin
@@ -72,33 +86,30 @@
 // scss-docs-start df-btn-link-variant-mixin
 @mixin df-button-link-variant(
   $color-name,
-  $text-color-100: var(--#{$prefix}#{$color-name}-100),
-  $text-color-500: var(--#{$prefix}#{$color-name}-500),
-  $text-color-700: var(--#{$prefix}#{$color-name}-600),
-  $text-color-900: var(--#{$prefix}#{$color-name}-700),
+  $default-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
+  $active-bg-color: var(--#{$prefix}#{$color-name}-200),
+  $disable-color: var(--#{$prefix}#{$color-name}-300),
 ) {
-  --#{$prefix}btn-padding-x: var(--#{$prefix}btn-link-padding-x);
-  --#{$prefix}btn-padding-y: var(--#{$prefix}btn-link-padding-y);
-
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-color: #{$text-color-500};
+  --#{$prefix}btn-color: #{$default-color};
 
-  --#{$prefix}btn-hover-bg: transparent;
+  --#{$prefix}btn-hover-bg: #{$hover-bg-color};
   --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-hover-color: #{$text-color-900};
+  --#{$prefix}btn-hover-color: #{$default-color};
 
   --#{$prefix}btn-focus-bg: transparent;
   --#{$prefix}btn-focus-border-color: transparent;
-  --#{$prefix}btn-focus-color: #{$text-color-500};
+  --#{$prefix}btn-focus-color: #{$default-color};
 
-  --#{$prefix}btn-active-bg: transparent;
+  --#{$prefix}btn-active-bg: #{$active-bg-color};
   --#{$prefix}btn-active-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$text-color-700};
+  --#{$prefix}btn-active-color: #{$default-color};
 
   --#{$prefix}btn-disabled-bg: transparent;
   --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}btn-disabled-color: #{$text-color-100};
+  --#{$prefix}btn-disabled-color: #{$disable-color};
 
   --#{$prefix}btn-focus-outline-offset: 0;
 
@@ -106,7 +117,7 @@
     --#{$prefix}btn-disabled-opacity: 1;
     --#{$prefix}btn-disabled-bg: transparent;
     --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color-name}-600);
+    --#{$prefix}btn-disabled-color: #{$default-color};
   }
 }
 // scss-docs-end df-btn-link-variant-mixin

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

@@ -17,6 +17,7 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width
 // custom
 $alert-gap: $spacer-3 !default;
 $alert-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+$alert-close-icon-size: .75rem !default;
 // end custom
 // scss-docs-end alert-variables
 

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

@@ -4,18 +4,18 @@
 
 // scss-docs-start btn-variables
 $btn-color: var(--#{$prefix}body-color) !default;
-$btn-padding-y: $small-font-size !default;
-$btn-padding-x: $spacer-4 !default;
+$btn-padding-y: $spacer-2 !default;
+$btn-padding-x: $spacer-3 !default;
 $btn-font-family: $input-btn-font-family !default;
 $btn-font-size: $input-btn-font-size !default;
-$btn-line-height: 1rem !default;
+$btn-line-height: $line-height-base * 1rem !default;
 $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
 
-$btn-padding-y-sm: .625rem !default;
-$btn-padding-x-sm: $spacer-4 !default;
+$btn-padding-y-sm: $spacer-1 !default;
+$btn-padding-x-sm: $spacer-3 !default;
 $btn-font-size-sm: $small-font-size !default;
 
-$btn-padding-y-lg: 1.125rem !default;
+$btn-padding-y-lg: .875rem !default;
 $btn-padding-x-lg: $spacer-4 !default;
 $btn-font-size-lg: $h6-font-size !default;
 
@@ -25,19 +25,13 @@ $btn-font-weight: $font-weight-normal !default;
 $btn-box-shadow: none !default;
 $btn-focus-width: 0 !default;
 $btn-focus-box-shadow: none !default;
-$btn-disabled-opacity: .5 !default;
+$btn-disabled-opacity: 1 !default;
 $btn-active-box-shadow: none !default;
 
 $btn-link-color: var(--#{$prefix}link-color) !default;
 $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color: $gray-600 !default;
 
-// custom
-$btn-link-padding-y: $spacer-2 !default;
-$btn-link-padding-x: $spacer-2 !default;
-$btn-link-font-size-sm: $small-font-size !default;
-// end custom
-
 $btn-border-radius: $border-radius-sm !default;
 $btn-border-radius-sm: $border-radius-sm !default;
 $btn-border-radius-lg: $border-radius-lg !default;

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

@@ -80,7 +80,7 @@ $bg-soft-colors: (
 $min-contrast-ratio: 4.5 !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark: $gray-900 !default;
+$color-contrast-dark: $gray-700 !default;
 $color-contrast-light: $white !default;
 
 // fusv-disable

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-alert";
+@import "d-toast";
 @import "d-badge";
 @import "d-chip";
 @import "d-modal";

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

@@ -14,10 +14,7 @@
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
   --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
-
-  --#{$prefix}btn-link-padding-y: #{$btn-link-padding-y};
-  --#{$prefix}btn-link-padding-x: #{$btn-link-padding-x};
-  @include rfs($btn-link-font-size-sm, --#{$prefix}btn-link-font-size-sm);
+  --#{$prefix}btn–text-decoration: if($link-decoration == none, null, none);
 
   --#{$prefix}btn-lg-padding-y: #{$btn-padding-y-lg};
   --#{$prefix}btn-lg-padding-x: #{$btn-padding-x-lg};
@@ -29,7 +26,6 @@
   --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
   --#{$prefix}btn-sm-border-radius: var(--#{$prefix}btn-component-sm-border-radius, #{$btn-border-radius-sm});
 
-
   display: flex;
   flex-direction: row;
   gap: var(--#{$prefix}btn-gap, $spacer-2);
@@ -42,7 +38,7 @@
   line-height: var(--#{$prefix}btn-line-height);
   color: var(--#{$prefix}btn-color);
   text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: none;
   white-space: $btn-white-space;
   vertical-align: middle;
   cursor: if($enable-button-pointers, pointer, null);
@@ -53,11 +49,14 @@
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
 
+  > span {
+    text-decoration: var(--#{$prefix}btn-text-decoration);
+  }
+
   // hover selectors
   &:hover,
   &.hover {
     color: var(--#{$prefix}btn-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
@@ -74,9 +73,9 @@
   &:focus-visible,
   &.focus-visible {
     // copy of .btn:focus bootstrap + focus var
-    color: var(var(--#{$prefix}btn-focus-color), var(--#{$prefix}btn-hover-color));
-    @include gradient-bg(var(var(--#{$prefix}btn-focus-bg), var(--#{$prefix}btn-hover-bg)));
-    border-color: var(var(--#{$prefix}btn-focus-border-color), var(--#{$prefix}btn-hover-border-color));
+    color: var(--#{$prefix}btn-focus-color, var(--#{$prefix}btn-hover-color));
+    @include gradient-bg(var(--#{$prefix}btn-focus-bg, var(--#{$prefix}btn-hover-bg)));
+    border-color: var(--#{$prefix}btn-focus-border-color, var(--#{$prefix}btn-hover-border-color));
     // end copy
 
     outline: var(--#{$prefix}btn-focus-border-width, var(--#{$prefix}btn-border-width)) solid var(--#{$prefix}btn-focus-outline-color, var(--#{$prefix}focus-ring-color));
@@ -130,29 +129,9 @@
   .btn-outline-#{$color} {
     @include df-button-outline-variant($color);
   }
-}
 
-@each $color, $value in $theme-colors {
   .btn-link-#{$color} {
-    @if $color == "light" {
-      @include df-button-link-variant(
-        $color,
-        $text-color-100: var(--#{$prefix}light),
-        $text-color-500: var(--#{$prefix}light),
-        $text-color-700: var(--#{$prefix}light),
-        $text-color-900: var(--#{$prefix}light),
-      );
-    } @else if $color == "dark" {
-      @include df-button-link-variant(
-        $color,
-        $text-color-100: var(--#{$prefix}dark),
-        $text-color-500: var(--#{$prefix}dark),
-        $text-color-700: var(--#{$prefix}dark),
-        $text-color-900: var(--#{$prefix}dark),
-      );
-    } @else {
-      @include df-button-link-variant($color);
-    }
+    @include df-button-link-variant($color);
   }
 }
 
@@ -174,16 +153,8 @@
   );
 }
 
-[class^="btn-link"] {
-  text-decoration: var(--#{$prefix}link-decoration);
-
-  > span {
-    text-decoration: var(--#{$prefix}link-decoration);
-  }
-
-  &.btn-sm {
-    @include font-size(var(--#{$prefix}btn-link-font-size-sm));
-  }
+[class*="btn-link-"] {
+  --#{$prefix}btn-text-decoration: var(--#{$prefix}link-decoration);
 
   @if $enable-gradients {
     background-image: none;

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

@@ -9,7 +9,7 @@
   --#{$prefix}chip-font-weight: #{$chip-font-weight};
   --#{$prefix}chip-line-height: #{$chip-line-height};
 
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   gap: var(--#{$prefix}chip-gap);
   align-items: center;

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

@@ -27,6 +27,7 @@
   --#{$prefix}datepicker-month-gap: var(--#{$prefix}ref-fs-small);
   --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-month-margin: 0;
+  --#{$prefix}datepicker-month-color: var(--#{$prefix}white);
 
   --#{$prefix}datepicker-week-gap: 1.875rem;
 
@@ -93,6 +94,14 @@
     }
   }
 
+  &.d-month-picker {
+    .react-datepicker__month-container {
+      .d-icon {
+        --#{$prefix}icon-component-color: var(--#{$prefix}datepicker-month-color);
+      }
+    }
+  }
+
   .react-datepicker__month {
     display: flex;
     flex-direction: column;

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

@@ -39,9 +39,7 @@
     color: var(--#{$prefix}input-pin-label-color);
 
     .d-input-pin-icon {
-      .d-icon {
-        --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
-      }
+      --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
     }
   }
 
@@ -99,9 +97,7 @@
       }
 
       .d-input-pin-validation-icon {
-        .d-icon {
-          --#{$prefix}icon-color: #{$tooltip-bg-color};
-        }
+        --#{$prefix}icon-color: #{$tooltip-bg-color};
       }
     }
   }

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

@@ -3,12 +3,19 @@
     --#{$prefix}input-group-border-color: var(--#{$prefix}input-group-hover-border-color);
   }
 
+  .form-floating:not(:last-child) {
+    .form-select {
+      padding-right: $form-select-padding-x * 2;
+      background-position: right center;
+    }
+  }
+
   .form-select {
     text-align: var(--#{$prefix}input-form-control-text-align);
     border-width: 0;
     box-shadow: none;
 
-    &:not(:last-child) {
+    &:not(:last-child, .floating-label) {
       padding-right: $form-select-padding-x * 2;
       background-position: right center;
     }

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

@@ -3,6 +3,7 @@
   --#{$prefix}alert-box-shadow: #{$alert-box-shadow};
   --#{$prefix}alert-icon-color: var(--#{$prefix}alert-component-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};
 
   display: flex;
   flex-direction: row;
@@ -25,12 +26,13 @@
     --#{$prefix}btn-close-bg: transparent;
   }
 
-  .alert-icon .d-icon {
+  .alert-icon.d-icon {
     --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);
   }
 
   .alert-close-icon {
     --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);
+    --#{$prefix}icon-size: var(--#{$prefix}alert-close-icon-size);
   }
 
   @each $theme, $value in $theme-colors {
@@ -42,4 +44,22 @@
       --#{$prefix}alert-link-color: #{$color};
     }
   }
+
+  &.alert-box {
+    --#{$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};
+
+        --#{$prefix}alert-bg: #{$background};
+      }
+    }
+  }
 }

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

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