@dynamic-framework/ui-react 2.0.0-dev.4 → 2.0.0-dev.5

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

@@ -1,23 +1,13 @@
-import type { MouseEvent, ReactNode } from 'react';
-import type { BaseProps, ButtonType, ButtonVariant, ComponentColor, ComponentSize, EndIconProps, InputState, StartIconProps } from '../interface';
-type Props = BaseProps & StartIconProps & EndIconProps & {
-    id?: string;
+import { type ButtonHTMLAttributes } from 'react';
+import type { BaseProps, ButtonVariant, ComponentColor, ComponentSize, EndIconProps, StartIconProps } from '../interface';
+interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, BaseProps, StartIconProps, EndIconProps {
     color?: ComponentColor;
     size?: ComponentSize;
     variant?: ButtonVariant;
-    state?: InputState;
     text?: string;
-    children?: ReactNode;
-    ariaLabel?: string;
-    value?: string;
-    type?: ButtonType;
-    loadingText?: string;
     loading?: boolean;
+    loadingText?: string;
     loadingAriaLabel?: string;
-    disabled?: boolean;
-    stopPropagationEnabled?: boolean;
-    form?: string;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-};
-export default function DButton({ color, size, variant, state, text, children, ariaLabel, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, loadingText, value, type, loading, loadingAriaLabel, disabled, stopPropagationEnabled, className, style, form, dataAttributes, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+}
+declare const DButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+export default DButton;

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

@@ -7,6 +7,7 @@ type Props = ComponentPropsWithoutRef<'input'> & BaseProps & {
     label?: string;
     ariaLabel?: string;
     checked?: boolean;
+    inputClassName?: string;
     disabled?: boolean;
     invalid?: boolean;
     valid?: boolean;
@@ -15,5 +16,5 @@ type Props = ComponentPropsWithoutRef<'input'> & BaseProps & {
     value?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, value, hint, onChange, className, style, dataAttributes, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, inputClassName, value, hint, onChange, className, style, dataAttributes, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,10 +6,11 @@ type Props = BaseProps & {
     name?: string;
     checked?: boolean;
     disabled?: boolean;
+    inputClassName?: string;
     invalid?: boolean;
     valid?: boolean;
     readonly?: boolean;
     onChange?: (isChecked: boolean) => void;
 };
-export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid, valid, readonly, className, style, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid, valid, readonly, className, style, dataAttributes, inputClassName, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,23 @@
+import type { BaseProps } from '../interface';
+export type ValidationMessages = {
+    number: string;
+    lowercaseLetter: string;
+    uppercaseLetter: string;
+    especialChar: string;
+    notMatch?: string;
+};
+export type ValidationCheck = 'uppercase' | 'lowercase' | 'number' | 'specialChar';
+type Props = BaseProps & {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    validationMessages?: ValidationMessages;
+    enabledChecks?: ValidationCheck[];
+    onChange?: (value: string) => void;
+};
+export default function DPasswordStrengthMeter({ id, label, placeholder, value, name, disabled, invalid, validationMessages, enabledChecks, className, style, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DPasswordStrengthMeter/PasswordCheckItem.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    password: string;
+    regex: RegExp;
+    text: string;
+};
+export default function PasswordCheckItem({ password, regex, text, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DPasswordStrengthMeter/PasswordCheckList.d.ts

@@ -0,0 +1,14 @@
+import type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
+type Props = {
+    password: string;
+    validationMessages: ValidationMessages;
+    enabledChecks: ValidationCheck[];
+};
+export declare const CHECK_REGEX: {
+    uppercase: RegExp;
+    lowercase: RegExp;
+    number: RegExp;
+    specialChar: RegExp;
+};
+export default function PasswordChecksList({ password, validationMessages, enabledChecks, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DPasswordStrengthMeter/PasswordStrength.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    strength: number;
+    total: number;
+};
+export default function PasswordStrengthBar({ strength, total }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import DPasswordStrengthMeter from './DPasswordStrengthMeter';
+export type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
+export default DPasswordStrengthMeter;

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

@@ -0,0 +1,14 @@
+import { PropsWithChildren, ReactNode } from 'react';
+type Props = PropsWithChildren<{
+    amount?: string;
+    amountDetails?: ReactNode;
+    icon?: string;
+    color?: string;
+    message: string;
+    title: string;
+    downloadText?: string;
+    shareText?: string;
+    onError?: (err: Error) => Promise<void> | void;
+}>;
+export default function DVoucher({ amount, amountDetails, icon, color, title, onError, message, downloadText, shareText, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DVoucher/hooks/useScreenshot.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function useScreenshot(): {
+    clipRef: import("react").RefObject<HTMLDivElement | null>;
+    takeBlob: (type?: string) => Promise<Blob>;
+};

package/dist/types/components/DVoucher/hooks/useScreenshotDownload.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function useScreenshotDownload(): {
+    download: () => Promise<void>;
+    downloadRef: import("react").RefObject<HTMLDivElement | null>;
+};

package/dist/types/components/DVoucher/hooks/useScreenshotWebShare.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function useScreenshotWebShare(): {
+    share: () => Promise<void>;
+    shareRef: import("react").RefObject<HTMLDivElement | null>;
+};

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

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

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

@@ -19,6 +19,8 @@ export { default as DInputMask } from './DInputMask';
 export { default as DInputCounter } from './DInputCounter';
 export { default as DInputCurrency } from './DInputCurrency';
 export { default as DInputPassword } from './DInputPassword';
+export { default as DPasswordStrengthMeter } from './DPasswordStrengthMeter';
+export type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
 export { default as DInputCheck } from './DInputCheck';
 export { default as DInputPin } from './DInputPin';
 export { default as DInputSelect } from './DInputSelect';
@@ -45,3 +47,4 @@ export { default as DTableHead } from './DTableHead';
 export { default as DInputPhone } from './DInputPhone';
 export { default as DCreditCard } from './DCreditCard';
 export { default as DDropdown } from './DDropdown';
+export { default as DVoucher } from './DVoucher';

package/jest/setup.js

@@ -1,8 +1,6 @@
 /* eslint-disable react/prop-types */
 const React = require('react');
 
-jest.mock('react-content-loader', () => jest.fn());
-
 jest.mock('react-responsive-pagination', () => {
   function MockPagination(props) {
     const {

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-dev.4",
+  "version": "2.0.0-dev.5",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -99,6 +99,8 @@
     "date-fns": "~4.1.0",
     "file-selector": "~2.1.2",
     "google-libphonenumber": "~3.2.43",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.3",
     "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
     "react-international-phone": "~4.6.0",
@@ -144,8 +146,9 @@
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-react-hooks": "~4.6.0",
     "formik": "~2.4.8",
-    "glob": "~11.0.3",
+    "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",
@@ -156,7 +159,6 @@
     "react-dom": "~19.2.0",
     "react-hot-toast": "~2.6.0",
     "react-i18next": "~16.2.4",
-    "i18next": "~25.6.1",
     "recharts": "~3.3.0",
     "remark-gfm": "~4.0.1",
     "rimraf": "~6.1.0",
@@ -172,11 +174,11 @@
     "yup": "^1.6.1"
   },
   "peerDependencies": {
+    "i18next": "~25.6.1",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "react-hot-toast": "~2.6.0",
     "react-i18next": "~16.2.4",
-    "i18next": "~25.6.1",
     "recharts": "~3.3.0"
   },
   "peerDependenciesMeta": {

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/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,10 +48,6 @@
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
 
-  > span {
-    text-decoration: var(--#{$prefix}btn-text-decoration);
-  }
-
   // hover selectors
   &.hover,
   &:hover {
@@ -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);
   }
@@ -157,20 +167,17 @@
 
 .btn-outline-primary {
   --#{$prefix}btn-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-700);
   --#{$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-700);
-  --#{$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-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);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}primary-500);
-  }
+  --#{$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 {
@@ -178,21 +185,17 @@
   --#{$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-active-color: var(--#{$prefix}secondary-700);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}secondary-700);
   --#{$prefix}btn-focus-color: var(--#{$prefix}secondary-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}secondary-200);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}secondary-600);
-  }
+  --#{$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-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);
@@ -200,12 +203,10 @@
   --#{$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,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-25);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-25);
-    opacity: var(--#{$prefix}btn-disabled-opacity);
-  }
+  // 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 {
@@ -218,11 +219,9 @@
   --#{$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);
-  }
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}success-500);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}success-500);
 }
 
 .btn-outline-danger {
@@ -235,11 +234,9 @@
   --#{$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);
-  }
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}danger-500);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}danger-500);
 }
 
 .btn-outline-info {
@@ -252,45 +249,39 @@
   --#{$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);
-  }
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}info-500);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}info-500);
 }
 
 .btn-outline-warning {
-  --#{$prefix}btn-color: var(--#{$prefix}warning-600);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-700);
+  --#{$prefix}btn-color: var(--#{$prefix}warning-500);
   --#{$prefix}btn-border-color: var(--#{$prefix}warning-500);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}warning-600);
+  --#{$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-hover-color: var(--#{$prefix}warning-700);
+  --#{$prefix}btn-active-border-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);
-  }
+  --#{$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-outline-dark {
   --#{$prefix}btn-color: var(--#{$prefix}black);
-  --#{$prefix}btn-hover-border-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}black);
-  --#{$prefix}btn-active-color: var(--#{$prefix}black);
-  --#{$prefix}btn-hover-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,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}black);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}black);
-  }
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}black);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}black);
 }
 
 .btn-lg {

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-voucher.scss

@@ -0,0 +1,30 @@
+.d-voucher {
+  --#{$prefix}voucher-header-gap: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-amount-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-amount-background: var(--#{$prefix}secondary-50);
+  --#{$prefix}voucher-amount-rounded: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-footer-gap: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-margin: 0 0 var(--#{$prefix}ref-spacer-4) 0;
+}
+
+.d-voucher-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}voucher-header-gap);
+  align-items: center;
+  justify-content: center;
+  margin: var(--#{$prefix}voucher-margin);
+}
+
+.d-voucher-amount {
+  padding: var(--#{$prefix}voucher-amount-padding);
+  background: var(--#{$prefix}voucher-amount-background);
+  border-radius: var(--#{$prefix}voucher-amount-rounded);
+}
+
+.d-voucher-footer {
+  display: flex;
+  gap: var(--#{$prefix}voucher-footer-gap);
+  justify-content: center;
+  justify-content: flex-start;
+}