@dynamic-framework/ui-react 2.0.0-dev.6 → 2.0.0-dev.8

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

@@ -1,13 +1,21 @@
 import type { BaseProps, ComponentColor } from '../interface';
+import { ResponsiveProp } from '../../hooks/useResponsiveProp';
 type Props = BaseProps & {
     icon: string;
     color?: ComponentColor;
-    size?: string;
+    size?: string | ResponsiveProp;
+    /**
+     * Enables real-time breakpoint listeners for responsive size changes.
+     * When set to true, the component will listen for size changes and update responsively.
+     * Note: Enabling this feature may have performance implications, especially
+     * in complex or frequently updated components.
+     */
+    useListenerSize?: boolean;
     hasCircle?: boolean;
     materialStyle?: boolean;
     familyClass?: string;
     familyPrefix?: string;
     strokeWidth?: number;
 };
-export default function DIconBase({ icon, color, style, className, size, hasCircle, materialStyle, familyClass, familyPrefix, strokeWidth, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DIconBase({ icon, color, style, className, size, useListenerSize, hasCircle, materialStyle, familyClass, familyPrefix, strokeWidth, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, StartIconProps } from '../interface';
-declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "value">, "size" | "onChange" | "label" | "invalid" | "value" | keyof BaseProps | keyof FamilyIconProps | keyof StartIconProps | keyof EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & StartIconProps & EndIconProps & {
+declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "label" | "invalid" | "value" | "onChange" | "size" | keyof BaseProps | keyof FamilyIconProps | keyof StartIconProps | keyof EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "readonly" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & StartIconProps & EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;
@@ -11,6 +11,7 @@ declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Om
     floatingLabel?: boolean | undefined;
     inputStart?: ReactNode;
     inputEnd?: ReactNode;
+    readonly?: boolean | undefined;
     onChange?: ((value: string) => void) | undefined;
     onIconStartClick?: ((value?: string) => void) | undefined;
     onIconEndClick?: ((value?: string) => void) | undefined;

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

@@ -5,7 +5,7 @@ type NonDInputProps = {
     maxValue: number;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "value">, "size" | "onChange" | "label" | "invalid" | "value" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "label" | "invalid" | "value" | "onChange" | "size" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "readonly" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;
@@ -16,8 +16,9 @@ declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<
     floatingLabel?: boolean | undefined;
     inputStart?: import("react").ReactNode;
     inputEnd?: import("react").ReactNode;
+    readonly?: boolean | undefined;
     onChange?: ((value: string) => void) | undefined;
     onIconStartClick?: ((value?: string | undefined) => void) | undefined;
     onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, "type" | "onChange" | "value" | "validIcon" | "invalidIcon">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>, "ref">, "value" | "onChange" | "type" | "validIcon" | "invalidIcon">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputCounter;

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

@@ -6,7 +6,7 @@ type NonDInputProps = {
     currencyCode?: string;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCurrency: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "value">, "size" | "onChange" | "label" | "invalid" | "value" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+declare const ForwardedDInputCurrency: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "label" | "invalid" | "value" | "onChange" | "size" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "readonly" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;
@@ -17,8 +17,9 @@ declare const ForwardedDInputCurrency: import("react").ForwardRefExoticComponent
     floatingLabel?: boolean | undefined;
     inputStart?: import("react").ReactNode;
     inputEnd?: import("react").ReactNode;
+    readonly?: boolean | undefined;
     onChange?: ((value: string) => void) | undefined;
     onIconStartClick?: ((value?: string | undefined) => void) | undefined;
     onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, "type" | "onChange" | "value">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>, "ref">, "value" | "onChange" | "type">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputCurrency;

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

@@ -7,7 +7,7 @@ type OnChangeType = {
     country: ParsedCountry;
     isValid: boolean;
 };
-declare const ForwardedDInputPhone: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "onChange" | "onWheel" | "pattern" | "value" | "inputMode">, "size" | "onChange" | "label" | "invalid" | "value" | keyof BaseProps | keyof FamilyIconProps | keyof EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputEnd" | "onIconEndClick" | "countrySelectorProps" | "filteredCountries" | "defaultCountry"> & BaseProps & FamilyIconProps & EndIconProps & {
+declare const ForwardedDInputPhone: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "pattern" | "value" | "inputMode" | "onChange" | "onWheel" | "type">, "label" | "invalid" | "value" | "onChange" | "size" | keyof BaseProps | keyof FamilyIconProps | keyof EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputEnd" | "onIconEndClick" | "countrySelectorProps" | "filteredCountries" | "defaultCountry"> & BaseProps & FamilyIconProps & EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;

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

@@ -1,3 +1 @@
 export declare const PREFIX_BS = "bs-";
-export declare const ICON_FAMILY_CLASS = "bi";
-export declare const ICON_FAMILY_PREFIX = "bi-";

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

@@ -0,0 +1,35 @@
+/**
+ * A mapping of breakpoint names to values for responsive properties.
+ *
+ * This type allows you to specify a value for one or more
+ * breakpoints ('xs', 'sm', 'md', 'lg', 'xl', 'xxl').
+ * When used with `useResponsiveProp`, the value for
+ * the highest matching breakpoint will be selected.
+ *
+ * Usage example:
+ * ```ts
+ * const prop: ResponsiveProp = { xs: "small", md: "medium", xl: "large" };
+ * ```
+ */
+export type ResponsiveProp = Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', string>>;
+/**
+ * React hook to resolve a responsive property value based on the current viewport breakpoint.
+ *
+ * Given a `ResponsiveProp` object, this hook returns the value for the highest matching breakpoint.
+ * If multiple breakpoints match, the value for the largest (highest) breakpoint is used.
+ * If no breakpoints match, `undefined` is returned.
+ *
+ * @param useListener - Whether to listen for breakpoint changes (default: false).
+ * @returns An object with a `responsivePropValue` function that takes a
+ * `ResponsiveProp` and returns the resolved value.
+ *
+ * Usage example:
+ * ```ts
+ * const { responsivePropValue } = useResponsiveProp();
+ * const value = responsivePropValue({ xs: "A", md: "B", xl: "C" });
+ * // value will be "C" if xl breakpoint is active, "B" if md is active, etc.
+ * ```
+ */
+export declare function useResponsiveProp(useListener?: boolean): {
+    responsivePropValue: (prop: ResponsiveProp) => string | undefined;
+};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-dev.6",
+  "version": "2.0.0-dev.8",
   "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"
@@ -126,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.2.2",
-    "@types/react-dom": "~19.2.2",
+    "@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",
@@ -136,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",
@@ -146,6 +145,7 @@
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-react-hooks": "~4.6.0",
     "formik": "~2.4.8",
+    "framer-motion": "^12.23.24",
     "glob": "^11.1.0",
     "husky": "~9.1.7",
     "i18next": "~25.6.1",
@@ -155,8 +155,8 @@
     "jest-environment-jsdom": "~29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-cli": "~10.1.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.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",
@@ -174,20 +174,11 @@
     "yup": "^1.6.1"
   },
   "peerDependencies": {
-    "framer-motion": "^12.23.24",
-    "i18next": "~25.6.1",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "react-hot-toast": "~2.6.0",
-    "react-i18next": "~16.2.4",
-    "recharts": "~3.3.0"
-  },
-  "peerDependenciesMeta": {
-    "recharts": {
-      "optional": true
-    },
-    "formik": {
-      "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 != "" {

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

@@ -155,133 +155,19 @@
 }
 
 @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-border-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}primary-700);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}primary-700);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}primary-700);
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-primary-focus-shadow-rgb);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  // Disabled state
-  --#{$prefix}btn-disabled-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary-500);
-}
-
-.btn-outline-secondary {
-  --#{$prefix}btn-color: var(--#{$prefix}secondary-700);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}secondary-400);
-  --#{$prefix}btn-border-color: var(--#{$prefix}secondary-200);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}secondary-400);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}secondary-700);
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-secondary-focus-shadow-rgb);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  // Disabled state
-  --#{$prefix}btn-disabled-color: var(--#{$prefix}secondary-700);
-  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}secondary-200);
-}
-
-.btn-outline-light {
-  --#{$prefix}btn-color: var(--#{$prefix}gray-25);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-50);
-  --#{$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);
-  // Disabled state
-  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-25);
-  --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-25);
-  opacity: var(--#{$prefix}btn-disabled-opacity);
-}
-
-.btn-outline-success {
-  --#{$prefix}btn-color: var(--#{$prefix}success-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}success-700);
-  --#{$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 state
-  --#{$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-700);
-  --#{$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 state
-  --#{$prefix}btn-disabled-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-700);
-  --#{$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 state
-  --#{$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-500);
-  --#{$prefix}btn-border-color: var(--#{$prefix}warning-500);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}warning-600);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}warning-700);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}warning-700);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}warning-700);
-  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-warning-focus-shadow-rgb);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  // Disabled state
-  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}warning-500);
-  --#{$prefix}btn-disabled-color: var(--#{$prefix}warning-500);
-}
+    .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}gray-600);
-  --#{$prefix}btn-border-color: var(--#{$prefix}black);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}gray-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}gray-600);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}gray-600);
-  --#{$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 state
-  --#{$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);
+    }
+  }
 }
 
 .btn-lg {

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/_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 {