@dynamic-framework/ui-react 2.6.0 → 2.8.0

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

@@ -1,11 +1,18 @@
-/// <reference types="react" />
 import { Splide } from '@splidejs/react-splide';
+import type { ComponentProps } from 'react';
 import type { SplideProps } from '@splidejs/react-splide';
+import DIcon from '../DIcon';
 import DCarouselSlide from './components/DCarouselSlide';
 import type { BaseProps } from '../interface';
+type ArrowIconProps = {
+    /** DIcon props used to render the "previous" arrow icon. */
+    iconArrowLeft?: ComponentProps<typeof DIcon>;
+    /** DIcon props used to render the "next" arrow icon. */
+    iconArrowRight?: ComponentProps<typeof DIcon>;
+};
 declare const _default: import("react").ForwardRefExoticComponent<SplideProps & BaseProps & {
     children?: import("react").ReactNode;
-} & import("react").RefAttributes<Splide>> & {
+} & ArrowIconProps & import("react").RefAttributes<Splide>> & {
     Slide: typeof DCarouselSlide;
 };
 export default _default;

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

@@ -8,7 +8,14 @@ export type DropdownAction = {
     isDivider?: boolean;
     label: string;
 };
-type DropdownPlacement = 'auto' | 'down' | 'up' | 'start' | 'end';
+type ResolvedSide = 'down' | 'up' | 'start' | 'end';
+type DropdownPlacement = 'auto' | ResolvedSide;
+/**
+ * Horizontal alignment of the menu relative to the toggle, applied only when
+ * the resolved placement is vertical (`down`/`up`) — mirrors Bootstrap's
+ * `dropdown-menu-end`/`dropdown-center` menu alignment options.
+ */
+export type DropdownAlignment = 'start' | 'end' | 'center';
 type Props = {
     actions: DropdownAction[];
     dropdownToggle?: ((props: {
@@ -19,6 +26,7 @@ type Props = {
     classNameMenu?: string;
     asPortal?: boolean;
     placement?: DropdownPlacement;
+    alignment?: DropdownAlignment;
 };
-export default function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal, placement, }: Props): import("react").JSX.Element;
+export default function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal, placement, alignment, }: Props): import("react").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
-import type { ComponentProps } from 'react';
-import DIconBase from '../DIconBase';
-type Props = ComponentProps<typeof DIconBase>;
-export default function DIcon({ familyClass: propFamilyClass, familyPrefix: propFamilyPrefix, materialStyle: propMaterialStyle, ...props }: Props): import("react").JSX.Element;
+/// <reference types="react" />
+import type { DIconBaseProps } from '../DIconBase';
+type Props = DIconBaseProps;
+export default function DIcon({ icon, familyClass: propFamilyClass, familyPrefix: propFamilyPrefix, materialStyle: propMaterialStyle, ...props }: Props): import("react").JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { BaseProps, ComponentColor } from '../interface';
+import type { BaseProps, ComponentColor, IconValue } from '../interface';
 import { ResponsiveProp } from '../../hooks/useResponsiveProp';
 type Props = BaseProps & {
-    icon: string;
+    icon: IconValue;
     color?: ComponentColor;
     size?: string | ResponsiveProp;
     /**
@@ -18,5 +18,6 @@ type Props = BaseProps & {
     familyPrefix?: string;
     strokeWidth?: number;
 };
+export type DIconBaseProps = Props;
 export default function DIconBase({ icon, color, style, className, size, useListenerSize, hasCircle, materialStyle, familyClass, familyPrefix, strokeWidth, dataAttributes, }: Props): import("react").JSX.Element;
 export {};

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

@@ -1,2 +1,3 @@
 import DIconBase from './DIconBase';
+export type { DIconBaseProps } from './DIconBase';
 export default DIconBase;

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

@@ -1,17 +1,29 @@
 import { type Transition } from 'framer-motion';
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
+import { ResponsiveProp } from '../../hooks/useResponsiveProp';
 import DOffcanvasHeader from './components/DOffcanvasHeader';
 import DOffcanvasBody from './components/DOffcanvasBody';
 import DOffcanvasFooter from './components/DOffcanvasFooter';
 import type { BaseProps, OffcanvasPositionToggleFrom } from '../interface';
+type OffcanvasResponsivePlacement = Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', OffcanvasPositionToggleFrom>>;
 type Props = BaseProps & PropsWithChildren<{
     name: string;
     staticBackdrop?: boolean;
     scrollable?: boolean;
-    openFrom?: OffcanvasPositionToggleFrom;
+    openFrom?: OffcanvasPositionToggleFrom | OffcanvasResponsivePlacement;
+    /**
+     * Overrides the offcanvas size on the `start`/`end` placements (defaults to `400px`).
+     * Accepts any CSS length (e.g. `'320px'`, `'50vw'`, `'100%'`) or a `ResponsiveProp` object.
+     */
+    width?: string | ResponsiveProp;
+    /**
+     * Overrides the offcanvas size on the `top`/`bottom` placements (defaults to `100%`).
+     * Accepts any CSS length (e.g. `'50vh'`, `'320px'`) or a `ResponsiveProp` object.
+     */
+    height?: string | ResponsiveProp;
     transition?: Transition;
 }>;
-declare function DOffcanvas({ name, className, style, staticBackdrop, scrollable, openFrom, transition, children, dataAttributes, }: Props): import("react").JSX.Element;
+declare function DOffcanvas({ name, className, style, staticBackdrop, scrollable, openFrom, width, height, transition, children, dataAttributes, }: Props): import("react").JSX.Element;
 declare const _default: typeof DOffcanvas & {
     Header: typeof DOffcanvasHeader;
     Body: typeof DOffcanvasBody;

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

@@ -11,6 +11,7 @@ export type PropsOtp = PropsWithChildren<{
         title?: string;
         contact?: string | React.ReactNode;
         resendText?: string;
+        invalidCode?: string;
     };
 }>;
 export default function DOtp({ className, action, isLoading, otpSize, texts, seconds, }: PropsOtp): import("react").JSX.Element;

package/dist/types/components/DOtp/components/OtpCountdown.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 type Props = {
-    seconds: number;
+    secondsLeft: number;
+    restartCountdown: () => void;
     resendText?: string;
     message?: (secondsLeft: number) => string;
 };
-export default function OtpCountdown({ seconds, resendText, message, }: Props): import("react").JSX.Element;
+export default function OtpCountdown({ secondsLeft, restartCountdown, resendText, message, }: Props): import("react").JSX.Element;
 export {};

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

@@ -9,7 +9,9 @@ type Props = PropsWithChildren<{
     title: string;
     downloadText?: string;
     shareText?: string;
+    fileName?: string;
+    hideActions?: boolean;
     onError?: (err: Error) => Promise<void> | void;
 }>;
-export default function DVoucher({ amount, amountDetails, icon, title, onError, message, downloadText, shareText, className, children, }: Props): import("react").JSX.Element;
+export default function DVoucher({ amount, amountDetails, icon, title, onError, message, downloadText, shareText, fileName, hideActions, className, children, }: Props): import("react").JSX.Element;
 export {};

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

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

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,2 +1,5 @@
 import DVoucher from './DVoucher';
+export { default as useScreenshot } from './hooks/useScreenshot';
+export { default as useScreenshotDownload } from './hooks/useScreenshotDownload';
+export { default as useScreenshotWebShare } from './hooks/useScreenshotWebShare';
 export default DVoucher;

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

@@ -50,7 +50,7 @@ export type { DToastContainerProps, DToastOptions, ToastData } from './DToastCon
 export { default as DInputPhone } from './DInputPhone';
 export { default as DCreditCard } from './DCreditCard';
 export { default as DDropdown } from './DDropdown';
-export { default as DVoucher } from './DVoucher';
+export { default as DVoucher, useScreenshot, useScreenshotDownload, useScreenshotWebShare, } from './DVoucher';
 export { default as DOtp } from './DOtp';
 export { default as DErrorBoundary, useErrorBoundary, type FallbackProps, getErrorMessage, } from './DErrorBoundary';
 export { default as DDataStateWrapper, EmptyState, ErrorState, LoadingState, } from './DDataStateWrapper';

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

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { ComponentType, CSSProperties, SVGProps } from 'react';
 export type ClassMap = {
     [className: string]: boolean;
 };
@@ -19,13 +19,15 @@ export type BaseProps = {
     className?: string;
     dataAttributes?: DataAttributes;
 };
+export type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+export type IconValue = string | IconComponent;
 export type FamilyIconProps = {
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
     iconMaterialStyle?: boolean;
 };
 export type StartIconProps = {
-    iconStart?: string;
+    iconStart?: IconValue;
     iconStartDisabled?: boolean;
     iconStartFamilyClass?: string;
     iconStartFamilyPrefix?: string;
@@ -34,7 +36,7 @@ export type StartIconProps = {
     iconStartMaterialStyle?: boolean;
 };
 export type EndIconProps = {
-    iconEnd?: string;
+    iconEnd?: IconValue;
     iconEndDisabled?: boolean;
     iconEndFamilyClass?: string;
     iconEndFamilyPrefix?: string;

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

@@ -1,6 +1,6 @@
 import { type PropsWithChildren } from 'react';
 import { type PortalContextProps } from './DPortalContext';
-import type { AlertThemeIconMap } from '../components/interface';
+import type { AlertThemeIconMap, IconComponent } from '../components/interface';
 /**
  * Currency formatting configuration used by `DContextProvider`.
  */
@@ -86,6 +86,7 @@ type Props = {
     language: string;
     currency: CurrencyProps;
     icon: IconProps;
+    iconRegistry?: Record<string, IconComponent>;
     iconMap: IconMapProps;
     breakpoints: BreakpointProps;
 };
@@ -124,7 +125,7 @@ export declare const DContext: import("react").Context<Context>;
  * @template T - Map of portal name → payload shape (e.g. `{ modal: { title: string } }`).
  *   Pass it once at the top level: `<DContextProvider<MyPortals> ...>`.
  */
-export declare function DContextProvider<T extends Record<string, unknown>>({ language, currency, icon, iconMap, portalName, availablePortals, children, }: PropsWithChildren<Partial<DContextProviderProps<T>>>): import("react").JSX.Element;
+export declare function DContextProvider<T extends Record<string, unknown>>({ language, currency, icon, iconRegistry, iconMap, portalName, availablePortals, children, }: PropsWithChildren<Partial<DContextProviderProps<T>>>): import("react").JSX.Element;
 /**
  * Returns the Dynamic UI context value set by `DContextProvider`.
  * Falls back to the library's built-in defaults when no `DContextProvider`

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

@@ -9,3 +9,6 @@ export { default as useMediaQuery } from './useMediaQuery';
 export { default as useConfirmModal } from './useConfirmModal';
 export type { UseConfirmModalConfig, UseConfirmModalReturn, ConfirmModalColor, CriticalConfirmConfig, } from './useConfirmModal';
 export { useMediaBreakpointUpXs, useMediaBreakpointUpSm, useMediaBreakpointUpMd, useMediaBreakpointUpLg, useMediaBreakpointUpXl, useMediaBreakpointUpXxl, } from './useMediaBreakpointUp';
+export { default as useCountdown } from './useCountdown';
+export { default as useOtp } from './useOtp';
+export type { UseOtpConfig, UseOtpReturn } from './useOtp';

package/dist/types/hooks/tests/useCountdown.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+/**
+ * Generic seconds-based countdown hook.
+ *
+ * Starts counting down from `seconds` to `0` and exposes `restartCountdown`
+ * to reset and restart the timer (e.g. for "resend code in Xs" patterns,
+ * session-expiry banners, or any other cooldown/throttle UI).
+ *
+ * @example
+ * const { secondsLeft, restartCountdown } = useCountdown(30);
+ */
+export default function useCountdown(seconds: number): {
+    secondsLeft: number;
+    restartCountdown: () => void;
+};

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

@@ -1,15 +1,10 @@
 import type { RefObject, ForwardedRef, FocusEvent } from 'react';
 import type { Options } from 'currency.js';
-import type { CustomStyles } from '../components/interface';
-export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>): {
+export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>, minValue?: number, maxValue?: number): {
     inputRef: RefObject<HTMLInputElement | null>;
     innerValue: string;
     innerType: string;
     handleOnFocus: (event: FocusEvent<HTMLInputElement>) => void;
     handleOnChange: (newValue?: string) => void;
     handleOnBlur: (event: FocusEvent<HTMLInputElement>) => void;
-    generateStyleVariables: CustomStyles;
-    generateSymbolStyleVariables: {
-        color: string;
-    };
 };

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

@@ -0,0 +1,98 @@
+export type UseOtpConfig = {
+    /** Called when the OTP reaches the expected length and `submit()` is invoked. */
+    action: () => Promise<void> | void;
+    /** Expected number of digits/characters for a valid OTP. Defaults to `6`. */
+    otpSize?: number;
+    /** Initial countdown (in seconds) before resend becomes available. Defaults to `15`. */
+    seconds?: number;
+};
+export type UseOtpReturn = {
+    /** Current OTP value. */
+    otp: string;
+    /**
+     * Updates the OTP value (wire this to your custom pin input's `onChange`).
+     * Also clears `invalid`/`error` as soon as the value actually changes, so
+     * the error state disappears once the user edits the code (a no-op call
+     * with the same value, e.g. from an uncontrolled input re-notifying its
+     * current value, does not reset `invalid`/`error`).
+     */
+    setOtp: (value: string) => void;
+    /**
+     * `true` when `submit()` is called with an OTP shorter than `otpSize`, or
+     * when `action` throws/rejects (e.g. the backend rejected the entered
+     * code as incorrect).
+     */
+    invalid: boolean;
+    /**
+     * The value thrown/rejected by `action`, or `null` otherwise. Use it to
+     * render a specific message for a wrong code, as opposed to a too-short
+     * one.
+     */
+    error: unknown;
+    /**
+     * Validates the OTP length; if valid, calls `action`. If `action`
+     * rejects, the returned promise rejects too (so callers can still
+     * `.catch()` it for logging), and `invalid`/`error` are set beforehand.
+     */
+    submit: () => Promise<void>;
+    /**
+     * `true` while `action` is being awaited inside `submit()` (i.e. the OTP
+     * passed the length check and the async action hasn't settled yet). Wire
+     * it to your submit button's loading/disabled state. It's `false` while
+     * idle and immediately after `action` settles (whether it resolves or
+     * rejects), and it's never set to `true` for the too-short/length
+     * validation failure since `action` isn't called in that case.
+     */
+    isLoading: boolean;
+    /** Seconds remaining until resend is available. */
+    secondsLeft: number;
+    /** Restarts the resend countdown (call it from your "Resend" action). */
+    restartCountdown: () => void;
+};
+/**
+ * Headless hook exposing the same OTP logic used internally by `DOtp`
+ * (code state, length + correctness validation, submit action and resend
+ * countdown), without any bundled markup/styles.
+ *
+ * Use this when the default `DOtp` component doesn't match your design and
+ * you need to build a fully custom UI while reusing the same behavior.
+ *
+ * Internally composes `useCountdown` for the resend timer and re-exposes
+ * `secondsLeft`/`restartCountdown`, so there is no need to call
+ * `useCountdown` separately.
+ *
+ * `invalid` becomes `true` both when the OTP is shorter than `otpSize` and
+ * when `action` throws/rejects (e.g. the backend rejected the entered code
+ * as incorrect). In the latter case, the thrown value is exposed as `error`
+ * so custom UIs can render an appropriate message (e.g. "Invalid code" vs.
+ * "Enter all digits"). `invalid`/`error` are cleared automatically as soon
+ * as the user edits the code via `setOtp`.
+ *
+ * @example
+ * function CustomOtp() {
+ *   const {
+ *     otp,
+ *     setOtp,
+ *     invalid,
+ *     error,
+ *     submit,
+ *     isLoading,
+ *     secondsLeft,
+ *     restartCountdown,
+ *   } = useOtp({ action: async () => verifyOtp(otp), otpSize: 6, seconds: 15 });
+ *
+ *   return (
+ *     <>
+ *       <MyCustomPinInput value={otp} onChange={setOtp} invalid={invalid} />
+ *       {invalid && <span>{error ? 'Invalid code' : 'Enter all digits'}</span>}
+ *       <button disabled={isLoading} onClick={() => { submit().catch(() => {}); }}>
+ *         {isLoading ? 'Submitting...' : 'Submit'}
+ *       </button>
+ *       <button disabled={secondsLeft > 0} onClick={restartCountdown}>
+ *         Resend {secondsLeft > 0 ? `(${secondsLeft}s)` : ''}
+ *       </button>
+ *     </>
+ *   );
+ * }
+ */
+export default function useOtp({ action, otpSize, seconds, }: UseOtpConfig): UseOtpReturn;

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
@@ -110,6 +110,7 @@
     "react-datepicker": "~8.3.0",
     "react-error-boundary": "^6.1.0",
     "react-international-phone": "~4.6.0",
+    "react-is": "^19.2.7",
     "react-responsive-pagination": "~2.11.3",
     "react-select": "~5.10.2"
   },
@@ -132,6 +133,7 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
+    "@types/react-is": "^19.2.0",
     "@typescript-eslint/eslint-plugin": "~6.9.0",
     "@typescript-eslint/parser": "~6.9.0",
     "@vitejs/plugin-react": "~4.7.0",

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

@@ -94,4 +94,5 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "box-file";
 @import "datepicker";
 @import "input-phone";
+@import "input-currency";
 // end custom

package/src/style/abstracts/variables/_input-currency.scss

@@ -0,0 +1 @@
+$input-currency-symbol-color: var(--#{$prefix}secondary) !default;

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

@@ -15,3 +15,11 @@ $offcanvas-separator-margin-x: var(--#{$prefix}ref-spacer-4) !default;
 
 $offcanvas-bg-color: var(--#{$prefix}white) !default;
 // scss-docs-end offcanvas-variables
+
+// custom
+// Bootstrap's default is 30vh, which cuts off top/bottom offcanvas content
+// (e.g. mobile bottom-sheet placements) and forces an inner scroll. Cover the
+// full viewport height instead, relying on `.offcanvas-body`'s own
+// `overflow-y: auto` to scroll long content while header/footer stay fixed.
+$offcanvas-vertical-height: 100% !default;
+// end custom

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

@@ -22,3 +22,10 @@
 @import "d-table-head";
 @import "d-input-phone";
 @import "d-credit-card";
+@import "d-input-currency";
+@import "d-confirm-modal";
+@import "d-data-state-wrapper";
+@import "d-error-boundary";
+@import "d-otp";
+@import "d-password-strength-meter";
+@import "d-stepper";

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

@@ -69,6 +69,11 @@
   }
 }
 
+.d-box-file-empty-text {
+  margin: 0;
+  text-align: center;
+}
+
 .d-box-files {
   --#{$prefix}box-file-list-gap: #{$box-file-list-gap};
   --#{$prefix}box-file-list-padding: #{$box-file-list-padding};

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

@@ -42,9 +42,27 @@
     height: $carousel-control-height;
     background: var(--#{$prefix}primary);
     padding: var(--#{$prefix}ref-spacer-1);
-    svg {
+
+    // Only invert the default arrow icon (a bare <svg> as a direct child).
+    // Custom icons rendered via `iconArrowLeft`/`iconArrowRight` use DIcon
+    // (wrapped in a .d-icon span) and are reset below, so they are untouched here.
+    > svg {
       filter: invert(1);
     }
+
+    // Splide's default theme applies `fill` and, for the prev arrow, a
+    // `scaleX(-1)` flip to every descendant <svg>, assuming a single arrow
+    // path reused for both directions. `iconArrowLeft`/`iconArrowRight` are
+    // typed as DIcon props, so the only <svg> rendered here is a Lucide icon,
+    // which is always stroke-based with `fill="none"` (see lucide-react
+    // defaultAttributes). Resetting to `fill: none` restores that intended
+    // stroke-only look and lets DIcon's own `color` (applied via `currentColor`
+    // on stroke) keep controlling the icon color; `transform: none` cancels
+    // the flip so the icon keeps its intended orientation.
+    .d-icon svg {
+      fill: none;
+      transform: none;
+    }
   }
 
   .d-carousel-pagination {

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

@@ -1,5 +1,6 @@
 .d-close {
   display: flex;
+  align-self: center;
   padding: 0;
   background: transparent;
   border: 0;

package/src/style/components/_d-confirm-modal.scss

@@ -0,0 +1,17 @@
+.confirm-modal {
+  --#{$prefix}confirm-modal-body-padding-y: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}confirm-modal-body-padding-x: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}confirm-modal-field-gap: var(--#{$prefix}ref-spacer-4);
+}
+
+.d-confirm-modal-body {
+  padding: var(--#{$prefix}confirm-modal-body-padding-y) var(--#{$prefix}confirm-modal-body-padding-x);
+}
+
+.d-confirm-modal-message {
+  margin-bottom: var(--#{$prefix}confirm-modal-field-gap);
+}
+
+.d-confirm-modal-field {
+  margin-bottom: var(--#{$prefix}confirm-modal-field-gap);
+}

package/src/style/components/_d-data-state-wrapper.scss

@@ -0,0 +1,47 @@
+.d-empty-state {
+  --#{$prefix}empty-state-padding: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}empty-state-spacing: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}empty-state-color: var(--#{$prefix}secondary);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--#{$prefix}empty-state-padding);
+  text-align: center;
+}
+
+.d-empty-state-icon {
+  margin-bottom: var(--#{$prefix}empty-state-spacing);
+  color: var(--#{$prefix}empty-state-color);
+}
+
+.d-empty-state-message {
+  margin-bottom: var(--#{$prefix}empty-state-spacing);
+  color: var(--#{$prefix}empty-state-color);
+}
+
+.d-error-state {
+  --#{$prefix}error-state-gap: var(--#{$prefix}ref-spacer-3);
+
+  display: flex;
+  gap: var(--#{$prefix}error-state-gap);
+  align-items: center;
+}
+
+.d-error-state-content {
+  flex: 1 1 auto;
+}
+
+.d-error-state-message {
+  margin-bottom: 0;
+}
+
+.d-loading-state {
+  --#{$prefix}loading-state-padding: var(--#{$prefix}ref-spacer-4);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--#{$prefix}loading-state-padding);
+}

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

@@ -215,6 +215,12 @@
     }
   }
 
+  &-year-selector {
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
   &-day-selector {
     margin-bottom: var(--#{$prefix}ref-spacer-4);
 
@@ -287,6 +293,11 @@
   margin-top: -.5rem;
 }
 
+.datepicker-top-header-title {
+  margin-bottom: 0;
+  font-weight: var(--#{$prefix}fw-normal);
+}
+
 .react-datepicker__year,
 .react-datepicker__quarterPicker {
   --#{$prefix}datepicker-body-gap: 1rem;

package/src/style/components/_d-error-boundary.scss

@@ -0,0 +1,7 @@
+.d-error-boundary-content {
+  --#{$prefix}error-boundary-gap: var(--#{$prefix}ref-spacer-2);
+
+  display: flex;
+  gap: var(--#{$prefix}error-boundary-gap);
+  align-items: center;
+}

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

@@ -0,0 +1,5 @@
+.d-input-currency-symbol {
+  --#{$prefix}input-currency-symbol-color: var(--#{$prefix}input-currency-component-symbol-color, #{$input-currency-symbol-color});
+
+  color: var(--#{$prefix}input-currency-symbol-color);
+}