@dynamic-framework/ui-react 2.0.0-dev.2 → 2.0.0-dev.20

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-dev.2",
+  "version": "2.0.0-dev.20",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -54,9 +54,8 @@
     "dev:scss": "node scripts/build-scss.js",
     "build:once": "npm run dev:ts && npm run dev:rollup && sleep 0.5 && npm run dev:scss && yalc push",
     "watch:ds": "npx nodemon --watch src --ext ts,tsx,scss --delay 1000ms --exec \"npm run build:once\"",
-    "cp": "npm run cp:bootstrap && npm run cp:popper && npm run cp:bootstrap-icons",
+    "cp": "npm run cp:bootstrap && npm run cp:popper",
     "cp:bootstrap": "scripts/cp-boostrap.sh",
-    "cp:bootstrap-icons": "scripts/cp-boostrap-icons.sh",
     "cp:popper": "scripts/cp-popper.sh",
     "clean": "rimraf dist-transpiled && rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.mjs",
@@ -75,7 +74,8 @@
     "publish:cdn-dev": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/dev/ui-react --delete --acl public-read",
     "lint-staged": "lint-staged",
     "prepare": "husky",
-    "commitlint": "commitlint --edit"
+    "commitlint": "commitlint --edit",
+    "verify": "node scripts/verify.js"
   },
   "engines": {
     "node": ">=22.0.0"
@@ -89,22 +89,23 @@
     "jest/"
   ],
   "dependencies": {
-    "@floating-ui/react": "~0.26.1",
-    "@react-input/mask": "~1.0.20",
+    "@floating-ui/react": "~0.27.16",
+    "@react-input/mask": "~2.0.4",
     "@splidejs/react-splide": "~0.7.12",
     "@splidejs/splide": "~4.1.4",
-    "bootstrap": "~5.3.3",
-    "classnames": "~2.3.2",
+    "bootstrap": "~5.3.8",
+    "classnames": "~2.5.1",
     "currency.js": "~2.0.4",
-    "date-fns": "~2.30.0",
-    "file-selector": "^2.1.2",
-    "google-libphonenumber": "^3.2.40",
-    "i18next": "~23.6.0",
-    "lucide-react": "^0.548.0",
+    "date-fns": "~4.1.0",
+    "file-selector": "~2.1.2",
+    "google-libphonenumber": "~3.2.43",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^4.0.0",
+    "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
-    "react-international-phone": "~4.5.0",
-    "react-responsive-pagination": "^2.9.0",
-    "react-select": "^5.8.3"
+    "react-international-phone": "~4.6.0",
+    "react-responsive-pagination": "~2.11.3",
+    "react-select": "~5.10.2"
   },
   "devDependencies": {
     "@babel/core": "~7.23.2",
@@ -125,9 +126,9 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/google-libphonenumber": "~7.4.30",
     "@types/jest": "~29.5.12",
-    "@types/node": "~18.15.3",
-    "@types/react": "~19.1.8",
-    "@types/react-dom": "~19.1.6",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@typescript-eslint/eslint-plugin": "~6.9.0",
     "@typescript-eslint/parser": "~6.9.0",
     "@vitejs/plugin-react": "~4.7.0",
@@ -135,7 +136,6 @@
     "axe-playwright": "~1.2.3",
     "babel-jest": "^29.7.0",
     "babel-loader": "~9.1.3",
-    "bootstrap-icons": "~1.13.1",
     "conventional-changelog-conventionalcommits": "~6.1.0",
     "eslint": "~8.52.0",
     "eslint-config-airbnb": "~19.0.4",
@@ -144,25 +144,27 @@
     "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",
+    "formik": "~2.4.8",
+    "framer-motion": "^12.23.24",
+    "glob": "^11.1.0",
     "husky": "~9.1.7",
+    "i18next": "~25.6.1",
     "jest": "~29.7.0",
     "jest-axe": "~8.0.0",
     "jest-cli": "~29.7.0",
     "jest-environment-jsdom": "~29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-cli": "~10.1.0",
-    "react": "~19.1.0",
-    "react-dom": "~19.1.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~3.1.0",
+    "react": "~19.2.1",
+    "react-dom": "~19.2.1",
+    "react-hot-toast": "~2.6.0",
+    "react-i18next": "~16.2.4",
+    "recharts": "~3.3.0",
     "remark-gfm": "~4.0.1",
-    "rimraf": "~6.0.1",
-    "rollup": "^4.27.4",
+    "rimraf": "~6.1.0",
+    "rollup": "~4.53.1",
     "sass": "~1.69.4",
-    "storybook": "~9.0.17",
+    "storybook": "^9.1.17",
     "stylelint": "^16.16.0",
     "stylelint-config-twbs-bootstrap": "^16.0.0",
     "ts-jest": "~29.2.3",
@@ -172,15 +174,11 @@
     "yup": "^1.6.1"
   },
   "peerDependencies": {
-    "react": "~19.1.0",
-    "react-dom": "~19.1.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~3.1.0"
-  },
-  "peerDependenciesMeta": {
-    "recharts": {
-      "optional": true
-    }
+    "framer-motion": ">=12 <13",
+    "i18next": ">=25 <26",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "react-hot-toast": ">=2 <3",
+    "react-i18next": ">=16 <17"
   }
 }

package/src/style/abstracts/_mixins.scss

@@ -44,12 +44,12 @@
 @mixin df-button-outline-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-bg-color: var(--#{$prefix}#{$color-name}-600),
-  $hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
-  $focus-bg-color: var(--#{$prefix}#{$color-name}-600),
-  $focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-700),
-  $active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
+  $default-border-color: $default-color,
+  $hover-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-border-color: $hover-color,
+  $focus-color: $hover-color,
+  $active-color: var(--#{$prefix}#{$color-name}-700),
+  $active-border-color: $active-color,
   $disabled-opacity: $btn-disabled-opacity,
   $box-shadow: $btn-box-shadow,
   $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
@@ -57,21 +57,21 @@
 ) {
   --#{$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}-border-color: #{$default-border-color};
   --#{$prefix}btn-outline-#{$color-name}-box-shadow: #{$box-shadow};
 
-  --#{$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: #{$hover-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-hover-color: #{$hover-color};
+  --#{$prefix}btn-outline-#{$color-name}-hover-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$hover-border-color};
 
-  --#{$prefix}btn-outline-#{$color-name}-focus-color: #{$focus-text-color};
-  --#{$prefix}btn-outline-#{$color-name}-focus-bg: #{$focus-bg-color};
-  --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$focus-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-color: #{$focus-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$focus-color};
   --#{$prefix}btn-outline-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
 
-  --#{$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-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-color: #{$active-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-border-color};
   --#{$prefix}btn-outline-#{$color-name}-active-box-shadow: #{$active-box-shadow};
 
   --#{$prefix}btn-outline-#{$color-name}-disabled-color: #{$default-color};
@@ -120,6 +120,24 @@
 }
 // scss-docs-end df-btn-link-variant-variables-mixin
 
+@mixin df-button-variant-outline-mapper($color-name) {
+  --#{$prefix}btn-color: var(--#{$prefix}btn-outline-#{$color-name}-color);
+  --#{$prefix}btn-border-color: var(--#{$prefix}btn-outline-#{$color-name}-border-color);
+
+  --#{$prefix}btn-hover-color: var(--#{$prefix}btn-outline-#{$color-name}-hover-color);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-outline-#{$color-name}-hover-border-color);
+  --#{$prefix}btn-active-color: var(--#{$prefix}btn-outline-#{$color-name}-active-color);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-outline-#{$color-name}-active-border-color);
+
+  --#{$prefix}btn-focus-color: var(--#{$prefix}btn-outline-#{$color-name}-focus-color);
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-outline-#{$color-name}-focus-shadow-rgb);
+
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-outline-#{$color-name}-disabled-border-color);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-outline-#{$color-name}-disabled-color);
+}
+
 // scss-docs-start df-btn-variant-mixin
 @mixin df-button-variant-mapper($color-name, $variant-name: "") {
   @if $variant-name != "" {
@@ -149,10 +167,6 @@
   --#{$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-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
-  }
 }
 // scss-docs-end df-btn-variant-mixin
 

package/src/style/abstracts/_utilities-hover.scss

@@ -0,0 +1,55 @@
+@mixin generate-hover-utility($utility) {
+  $values: map-get($utility, values);
+
+  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+    $values: zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map-get($utility, property);
+
+    @if type-of($properties) == "string" {
+      $properties: append((), $properties);
+    }
+
+    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+    $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+    $property-class-modifier: if($key, if($property-class == "", "", "-") + $key, "");
+
+    $is-css-var: map-get($utility, css-var);
+    $is-local-vars: map-get($utility, local-vars);
+
+    @if $value != null {
+      $escaped-prefix: "hover\\:";
+      $selector: ".#{$escaped-prefix}#{$property-class}#{$property-class-modifier}:hover";
+
+      @if $is-css-var {
+        #{$selector} {
+          --#{$prefix}#{$css-variable-name}: #{$value};
+        }
+      } @else {
+        #{$selector} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --#{$prefix}#{$local-var}: #{$variable};
+              }
+            }
+            #{$property}: $value if($enable-important-utilities, !important, null);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin generate-hover-utilities($utilities-map) {
+  @each $name, $utility in $utilities-map {
+    @if map-has-key($utility, values) and map-has-key($utility, property) {
+      @include generate-hover-utility($utility);
+    }
+  }
+}
+
+@include generate-hover-utilities($utilities);

package/src/style/abstracts/_utilities.scss

@@ -81,6 +81,25 @@ $utilities: map-merge(
         )
       )
     ),
+    "grid-column": (
+      class: "g-col",
+      property: grid-column,
+      responsive: true,
+      values: (
+        13: auto/span 13,
+        14: auto/span 14,
+        15: auto/span 15,
+        16: auto/span 16,
+        17: auto/span 17,
+        18: auto/span 18,
+        19: auto/span 19,
+        20: auto/span 20,
+        21: auto/span 21,
+        22: auto/span 22,
+        23: auto/span 23,
+        24: auto/span 24
+      )
+    ),
     "overlay": (
       property: opacity,
       class: "overlay",

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

@@ -34,3 +34,5 @@ $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, bord
 $btn-outline-primary-hover-color: inherit !default;
 $btn-outline-primary-hover-bg: transparent !default;
 $btn-outline-primary-focus-bg: transparent !default;
+
+$btn-loading-gap: var(--#{$prefix}ref-spacer-2) !default;

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

@@ -362,7 +362,7 @@ $dark: $gray-900 !default;
 // scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
-$theme-colors: (
+$theme-colors-base: (
   "primary": $primary,
   "secondary": $secondary,
   "success": $success,
@@ -371,6 +371,9 @@ $theme-colors: (
   "danger": $danger,
   "light": $light,
   "dark": $dark,
+) !default;
+
+$theme-colors-extra: (
   "indigo": $indigo,
   "purple": $purple,
   "pink": $pink,
@@ -379,8 +382,10 @@ $theme-colors: (
   "yellow": $yellow,
   "green": $green,
   "teal": $teal,
-  "cyan": $cyan
+  "cyan": $cyan,
 ) !default;
+
+$theme-colors: map-merge($theme-colors-base, $theme-colors-extra) !default;
 // scss-docs-end theme-colors-map
 
 // TODO: check this.
@@ -564,6 +569,7 @@ $theme-colors-palettes: (
   "danger-700": $danger-700,
   "danger-800": $danger-800,
   "danger-900": $danger-900,
+  // extras colors
   "indigo-25": $indigo-25,
   "indigo-50": $indigo-50,
   "indigo-100": $indigo-100,

package/src/style/base/_buttons.scss

@@ -21,7 +21,9 @@
   --#{$prefix}btn-sm-padding-x: #{$btn-padding-x-sm};
   --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
   --#{$prefix}btn-box-shadow: #{btn-box-shadow};
+  --#{$prefix}btn-loading-gap: #{$btn-loading-gap};
 
+  position: relative;
   display: inline-flex;
   flex-direction: row;
   gap: var(--#{$prefix}btn-gap, $spacer-2);
@@ -46,14 +48,10 @@
   @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);
+    color: var(--#{$prefix}btn-hover-color);
     text-decoration: none;
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
@@ -81,6 +79,16 @@
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
+  /* stylelint-disable-next-line scss/selector-no-union-class-name */
+  &-loading {
+    position: relative;
+    display: inline-flex;
+    gap: var(--#{$prefix}btn-loading-gap);
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
 
   .btn-check.focus-visible + &,
   .btn-check:focus-visible + & {
@@ -130,11 +138,13 @@
   &.disabled,
   &:disabled,
   fieldset:disabled & {
+
     color: var(--#{$prefix}btn-disabled-color);
     pointer-events: none;
     background-color: var(--#{$prefix}btn-disabled-bg);
     background-image: if($enable-gradients, none, null);
     border-color: var(--#{$prefix}btn-disabled-border-color);
+
     opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow(none);
   }
@@ -145,145 +155,18 @@
 }
 
 @each $color, $value in $theme-colors {
-  .btn-#{$color} {
-    @include df-button-variant-mapper($color);
-  }
-
-  .btn-link-#{$color} {
-    @include df-button-variant-mapper($color, "link");
-  }
-}
-
-
-.btn-outline-primary {
-  --#{$prefix}btn-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-border-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-active-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-primary-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}primary-500);
-  }
-}
-
-.btn-outline-secondary {
-  --#{$prefix}btn-color: var(--#{$prefix}gray-700);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-400);
-  --#{$prefix}btn-border-color: var(--#{$prefix}gray-200);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}gray-400);
-  --#{$prefix}btn-active-color: var(--#{$prefix}gray-700);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}gray-700);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}gray-700);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-secondary-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-700);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-700);
-  }
-}
-
-.btn-outline-light {
-  --#{$prefix}btn-color: var(--#{$prefix}gray-25);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-25);
-  --#{$prefix}btn-border-color: var(--#{$prefix}gray-25);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}gray-50);
-  --#{$prefix}btn-active-color: var(--#{$prefix}gray-50);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}gray-50);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}gray-50);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-light-focus-shadow-rgb);
-}
-
-.btn-outline-success {
-  --#{$prefix}btn-color: var(--#{$prefix}success-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}success-600);
-  --#{$prefix}btn-border-color: var(--#{$prefix}success-500);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}success-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}success-700);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}success-700);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}success-700);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-success-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}success-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}success-500);
-  }
-}
-
-.btn-outline-danger {
-  --#{$prefix}btn-color: var(--#{$prefix}danger-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}danger-600);
-  --#{$prefix}btn-border-color: var(--#{$prefix}danger-500);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}danger-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}danger-700);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}danger-700);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}danger-700);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-danger-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-active-border-color: var(--#{$prefix}danger-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}danger-500);
-  }
-}
-
-.btn-outline-info {
-  --#{$prefix}btn-color: var(--#{$prefix}info-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}info-600);
-  --#{$prefix}btn-border-color: var(--#{$prefix}info-500);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}info-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}info-700);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}info-700);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}info-700);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-info-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}info-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}info-500);
-  }
-}
+  @if not map-has-key($theme-colors-extra, $color) {
+    .btn-#{$color} {
+      @include df-button-variant-mapper($color);
+    }
 
-.btn-outline-warning {
-  --#{$prefix}btn-color: var(--#{$prefix}warning-600);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-600);
-  --#{$prefix}btn-border-color: var(--#{$prefix}warning-500);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}warning-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}warning-700);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}warning-700);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}warning-700);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-warning-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}warning-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}warning-600);
-  }
-}
+    .btn-link-#{$color} {
+      @include df-button-variant-mapper($color, "link");
+    }
 
-.btn-outline-dark {
-  --#{$prefix}btn-color: var(--#{$prefix}black);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}black);
-  --#{$prefix}btn-border-color: var(--#{$prefix}black);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}black);
-  --#{$prefix}btn-active-color: var(--#{$prefix}black);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}black);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}black);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-dark-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}black);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}black);
+    .btn-outline-#{$color} {
+      @include df-button-variant-outline-mapper($color);
+    }
   }
 }
 

package/src/style/base/_label.scss

@@ -9,8 +9,4 @@ label {
   font-size: var(--#{$prefix}label-font-size);
   font-weight: var(--#{$prefix}label-font-weight);
   color: var(--#{$prefix}label-color);
-
-  .d-icon {
-    --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
-  }
 }

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

@@ -11,6 +11,7 @@
 @import "d-collapse-icon-text";
 @import "d-datepicker";
 @import "d-timepicker";
+@import "d-voucher";
 @import "d-close";
 @import "d-popover";
 @import "d-box-file";

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

@@ -50,7 +50,7 @@
     border: var(--#{$prefix}box-file-disabled-border);
   }
 
-  .d-icon {
+  .d-box-file-dropzone > .d-icon {
     --#{$prefix}icon-size: var(--#{$prefix}box-file-icon-size);
     --#{$prefix}icon-color: var(--#{$prefix}box-file-icon-color);
   }

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

@@ -1,10 +1,10 @@
 @import "node_modules/@splidejs/splide/src/css/template/default/index";
-// stylelint-disable
+
 .d-carousel {
   // Arrows
   --#{$prefix}carousel-arrow-space: calc(var(--#{$prefix}ref-spacer-4) * -1);
   // Pagination
-  --#{$prefix}carousel-pagination-bottom: calc(var(--#{$prefix}ref-spacer-4) * -1);
+  --#{$prefix}carousel-pagination-bottom: auto;
   --#{$prefix}carousel-pagination-page-bg: var(--#{$prefix}secondary-100);
   --#{$prefix}carousel-pagination-active-page-bg: var(--#{$prefix}secondary);
   // :focus
@@ -19,6 +19,7 @@
     }
   }
 
+  // stylelint-disable
   .splide__pagination__page {
     margin: 0;
   }
@@ -26,7 +27,6 @@
   .d-carousel-pagination {
     bottom: var(--#{$prefix}carousel-pagination-bottom);
     position: relative;
-    bottom: auto;
     top: -0.5rem;
     width: fit-content;
     background: var(--#{$prefix}gray-25);
@@ -48,6 +48,7 @@
       }
     }
   }
+  // stylelint-enable
 
   &.splide.is-focus-in .d-carousel-arrow:focus,
   &.splide.is-focus-in .d-carousel-pagination-page:focus {

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

@@ -138,10 +138,29 @@
   }
 
   .custom-year-selector {
-    width: 6ch;
-    background: none;
-    color: var(--#{$prefix}white);
-    border: 0;
+    width: 8ch;
+    background: transparent;
+    color: var(--#{$prefix}body-color);
+    margin: auto;
+
+    .input-group {
+      border: 0;
+    }
+
+    .d-select__indicator-separator {
+      display: none;
+    }
+
+    .d-select__control {
+      background-color: var(--#{$prefix}datepicker-top-header-bg);
+      padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-1);
+      flex-wrap: nowrap;
+      color: var(--#{$prefix}white);
+      border: 0;
+    }
+    .d-select__menu-list {
+      max-height: 10lh;
+    }
   }
 
   &-selector {