@privyid/persona 0.10.0 → 0.11.0

package/dist/components/navbar/NavbarNav.vue.d.ts

@@ -6,8 +6,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }, {
-    variant: import("vue-demi").Ref<import("../nav").StyleVariant>;
-    condensed: import("vue-demi").Ref<boolean>;
+    variant: import("vue-demi").Ref<import("../nav").StyleVariant> | undefined;
+    condensed: import("vue-demi").Ref<boolean> | undefined;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     align: {
         type: PropType<AlignVariant>;

package/dist/components/navbar/NavbarToggle.vue

@@ -58,7 +58,8 @@ export default defineComponent({
     @apply inline-flex;
 
     &:is(.btn--variant-outline, .btn--default) {
-      @apply bg-emphasis-alpha dark:border-on-emphasis-alpha-subtle hover:shadow-none text-subtle dark:text-muted;
+      @apply bg-subtle hover:shadow-none text-subtle;
+      @apply dark:bg-dark-subtle dark:text-dark-subtle;
     }
 
     &&--all {

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

@@ -1,6 +1,6 @@
 import { InjectionKey, Ref } from 'vue-demi';
 import { StyleVariant } from '../nav';
-export declare type ToggleableVariant = 'sm' | 'md' | 'lg' | 'all';
+export type ToggleableVariant = 'sm' | 'md' | 'lg' | 'all';
 export interface NavbarSettings {
     variant: Ref<StyleVariant>;
     toggleable?: Ref<string | undefined>;

package/dist/components/overlay/Overlay.vue

@@ -53,7 +53,8 @@ export default defineComponent({
 }
 
 .overlay {
-  @apply fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-50 bg-emphasis/20 flex items-center justify-center select-none will-change-[transform,opacity];
+  @apply fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-50 bg-inverse/30 flex items-center justify-center select-none will-change-[transform,opacity];
+  @apply dark:bg-dark-inverse/30;
 
   &__icon {
     @apply w-10 md:w-16 animate-[overlayLoading_1s_ease-in-out_infinite];

package/dist/components/page/Page.vue

@@ -52,7 +52,11 @@ export default defineComponent({
 
 <style lang="postcss">
 .page {
-  @apply w-full;
+  --p-page-type-wide: 60px;
+  --p-page-type-narrow: 230px;
+
+  @apply w-full text-default;
+  @apply dark:text-dark-default;
 
   &&--expand {
     &:where(&&-all, &&-lg, &&-md, &&-sm) {
@@ -60,11 +64,11 @@ export default defineComponent({
         @apply transition-[padding] ease-out delay-75;
 
         &.page--type-wide {
-          @apply pl-[60px];
+          @apply pl-[var(--p-page-type-wide)];
         }
 
         &.page--type-narrow {
-          @apply pl-[230px];
+          @apply pl-[var(--p-page-type-narrow)];
         }
       }
     }
@@ -74,26 +78,26 @@ export default defineComponent({
     }
 
     &&-lg {
-      @apply lg:pl-[230px];
+      @apply lg:pl-[var(--p-page-type-narrow)];
 
       &:not(.page--type-narrow) {
-        @apply lg:pl-[60px];
+        @apply lg:pl-[var(--p-page-type-wide)];
       }
     }
 
     &&-md {
-      @apply md:pl-[230px];
+      @apply md:pl-[var(--p-page-type-narrow)];
 
       &:not(.page--type-narrow) {
-        @apply md:pl-[60px];
+        @apply md:pl-[var(--p-page-type-wide)];
       }
     }
 
     &&-sm {
-      @apply sm:pl-[230px];
+      @apply sm:pl-[var(--p-page-type-narrow)];
 
       &:not(.page--type-narrow) {
-        @apply sm:pl-[60px];
+        @apply sm:pl-[var(--p-page-type-wide)];
       }
     }
   }

package/dist/components/page/Page.vue.d.ts

@@ -4,7 +4,7 @@ import { TypeVariant } from '../sidebar';
 declare const _default: import("vue-demi").DefineComponent<{
     expand: {
         type: PropType<ToggleableVariant>;
-        default: any;
+        default: undefined;
     };
     type: {
         type: PropType<TypeVariant>;
@@ -19,7 +19,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     expand: {
         type: PropType<ToggleableVariant>;
-        default: any;
+        default: undefined;
     };
     type: {
         type: PropType<TypeVariant>;
@@ -30,7 +30,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: TypeVariant;
     modelValue: boolean;

package/dist/components/pagination/Pagination.vue

@@ -26,6 +26,7 @@
         variant="solid"
         size="sm"
         :disabled="!canPrev"
+        class="pagination__items__nav-first"
         icon
         @click="selectPage(1)">
         <slot name="first-navigation">
@@ -38,6 +39,7 @@
         variant="solid"
         size="sm"
         :disabled="!canPrev"
+        class="pagination__items__nav-prev"
         icon
         @click="prev">
         <slot name="prev-navigation">
@@ -67,6 +69,7 @@
         variant="solid"
         size="sm"
         :disabled="!canNext"
+        class="pagination__items__nav-next"
         icon
         @click="next">
         <slot name="next-navigation">
@@ -82,6 +85,7 @@
         variant="solid"
         size="sm"
         :disabled="!canNext"
+        class="pagination__items__nav-last"
         icon
         @click="selectPage(totalPageCount)">
         <slot name="last-navigation">
@@ -322,7 +326,8 @@ export default defineComponent({
   &__quickjump,
   &__items,
   &__options {
-    @apply flex flex-wrap items-center;
+    @apply flex flex-wrap items-center text-default;
+    @apply dark:text-dark-default;
   }
 
   &__quickjump {
@@ -335,12 +340,16 @@ export default defineComponent({
     @apply space-x-2;
 
     .btn--icon.btn--sm {
-      @apply p-2 min-w-[34px];
+      @apply px-2 py-1 min-w-[34px];
+      &:is(.pagination__items__nav-first, .pagination__items__nav-prev, .pagination__items__nav-next, .pagination__items__nav-last) > svg {
+        @apply my-[0.15rem];
+      }
     }
   }
 
   &__count {
-    @apply ml-5;
+    @apply ml-5 text-default;
+    @apply dark:text-dark-default;
   }
 
   &__options {
@@ -357,10 +366,6 @@ export default defineComponent({
     &__menu {
       @apply min-w-fit;
     }
-
-    .input {
-      @apply py-1.5 leading-[1.4];
-    }
   }
 
   .btn {
@@ -371,10 +376,12 @@ export default defineComponent({
     @apply justify-center items-center hover:shadow-none;
 
     &.btn--default {
-      @apply bg-transparent hover:bg-subtle focus:bg-subtle border-transparent focus:border-default hover:border-default text-default font-normal focus:outline-none;
+      @apply bg-transparent hover:bg-base focus:bg-base border-transparent focus:border-default hover:border-default text-default font-normal focus:outline-none;
+      @apply dark:bg-transparent hover:dark:bg-dark-base focus:dark:bg-dark-base dark:border-transparent focus:dark:border-dark-default hover:dark:border-dark-default dark:text-dark-default;
 
       &[active="true"] {
-        @apply bg-accent-emphasis border-accent-emphasis text-on-emphasis cursor-default;
+        @apply bg-info-emphasis border-info-emphasis text-state-emphasis cursor-default;
+        @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis dark:text-dark-state-emphasis;
       }
 
       &[readonly] {

package/dist/components/pagination/Pagination.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { SelectItem } from '../select';
-declare type NavigationVariant = 'none' | 'short' | 'far';
+type NavigationVariant = 'none' | 'short' | 'far';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -92,7 +92,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     classNames: import("vue-demi").ComputedRef<string[]>;
     pageOptions: import("vue-demi").ComputedRef<SelectItem[]>;
     rowPerPageOptions: import("vue-demi").ComputedRef<SelectItem[]>;
-    pageItems: import("vue-demi").ComputedRef<(string | number)[]>;
+    pageItems: import("vue-demi").ComputedRef<(string | number)[] | undefined>;
     rowRange: import("vue-demi").ComputedRef<number[]>;
     totalPageCount: import("vue-demi").ComputedRef<number>;
     rowPerPage: import("vue-demi").WritableComputedRef<number>;
@@ -188,9 +188,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    "onUpdate:perPage"?: (...args: any[]) => any;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:perPage"?: ((...args: any[]) => any) | undefined;
 }, {
     variant: NavigationVariant;
     modelValue: number;

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

@@ -5,7 +5,7 @@ interface PaginationProps {
     displayLimit: number;
 }
 export declare function usePagination(props: PaginationProps): {
-    pageItems: import("vue-demi").ComputedRef<(string | number)[]>;
+    pageItems: import("vue-demi").ComputedRef<(string | number)[] | undefined>;
     rowRange: import("vue-demi").ComputedRef<number[]>;
     totalPageCount: import("vue-demi").ComputedRef<number>;
     canNext: import("vue-demi").ComputedRef<boolean>;

package/dist/components/pagination/index.mjs

@@ -3,7 +3,7 @@ import {
   getPageItems,
   getPageRange,
   PAGE_PADDING
-} from "./utils/calculate-page";
+} from "./utils/calculate-page.mjs";
 export function usePagination(props) {
   const page = toRef(props, "modelValue");
   const perPage = toRef(props, "perPage");

package/dist/components/pagination/utils/calculate-page.d.ts

@@ -8,4 +8,4 @@ export declare function getSiblings(displayLimit: number): {
     totalSiblings: number;
     totalPageDisplay: number;
 };
-export declare function getPageItems(page: number, totalPageCount: number, displayLimit: number): (string | number)[];
+export declare function getPageItems(page: number, totalPageCount: number, displayLimit: number): (string | number)[] | undefined;

package/dist/components/pdf-helipad/PdfHelipad.vue.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onLanded?: (...args: any[]) => any;
+    onLanded?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
     width: number;

package/dist/components/pdf-object/PdfObject.vue

@@ -288,6 +288,7 @@ export default defineComponent({
 
   &__container {
     @apply overflow-visible relative border-2 border-dashed border-subtle rounded w-full h-full;
+    @apply dark:border-dark-subtle;
 
     &,
     & > * {
@@ -303,7 +304,8 @@ export default defineComponent({
   }
 
   &__resize {
-    @apply absolute w-3 h-3 bottom-0 right-0 translate-x-1/2 translate-y-1/2 bg-gray-20 rounded-full;
+    @apply absolute w-3 h-3 bottom-0 right-0 translate-x-1/2 translate-y-1/2 bg-subtle rounded-full;
+    @apply dark:bg-dark-subtle;
   }
 }
 </style>

package/dist/components/pdf-object/PdfObject.vue.d.ts

@@ -2,15 +2,15 @@
 declare const _default: import("vue-demi").DefineComponent<{
     x: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     y: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     page: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     width: {
         type: NumberConstructor;
@@ -22,19 +22,19 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     minWidth: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     minHeight: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     maxWidth: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     maxHeight: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     moveable: {
         type: BooleanConstructor;
@@ -58,15 +58,15 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:x" | "update:y" | "update:page" | "update:width" | "update:height")[], "update:x" | "update:y" | "update:page" | "update:width" | "update:height", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     x: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     y: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     page: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     width: {
         type: NumberConstructor;
@@ -78,19 +78,19 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     minWidth: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     minHeight: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     maxWidth: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     maxHeight: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     moveable: {
         type: BooleanConstructor;
@@ -109,15 +109,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    "onUpdate:x"?: (...args: any[]) => any;
-    "onUpdate:y"?: (...args: any[]) => any;
-    "onUpdate:page"?: (...args: any[]) => any;
-    "onUpdate:width"?: (...args: any[]) => any;
-    "onUpdate:height"?: (...args: any[]) => any;
+    "onUpdate:x"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:y"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:width"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:height"?: ((...args: any[]) => any) | undefined;
 }, {
     x: number;
-    y: number;
     width: number;
+    y: number;
     height: number;
     autofocus: boolean;
     maxHeight: number;

package/dist/components/pdf-object/PdfObjectDebugger.vue

@@ -64,8 +64,11 @@ export default defineComponent({
 
 <style lang="postcss">
 .pdf-object {
+  --p-pdf-debugger-size: 198px;
+
   &__debugger {
-    @apply grid grid-cols-1 p-4 bg-emphasis text-on-emphasis absolute rounded w-[198px];
+    @apply grid grid-cols-1 p-4 bg-inverse text-on-emphasis absolute rounded w-[var(--p-pdf-debugger-size)];
+    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
 
     > pre {
       @apply truncate;

package/dist/components/pdf-object/PdfObjectDebugger.vue.d.ts

@@ -1,8 +1,8 @@
 declare const _default: import("vue-demi").DefineComponent<{}, {
-    x: import("vue-demi").Ref<number>;
-    y: import("vue-demi").Ref<number>;
-    page: import("vue-demi").Ref<number>;
-    width: import("vue-demi").Ref<number>;
-    height: import("vue-demi").Ref<number>;
+    x: any;
+    y: any;
+    page: any;
+    width: any;
+    height: any;
 }, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/components/pdf-object/index.d.ts

@@ -23,7 +23,7 @@ export interface PdfObjectSize {
     maxWidth?: number;
     maxHeight?: number;
 }
-export declare type PdfObjectProp = PdfObjectSize & Omit<PdfObject, 'id'>;
+export type PdfObjectProp = PdfObjectSize & Omit<PdfObject, 'id'>;
 export declare const PDF_OBJECTS_CONTEXT: InjectionKey<PdfObjects>;
 export declare const PDF_OBJECT_CONTEXT: InjectionKey<ReturnType<typeof useObjectModel>>;
 export declare function useSizeModel(props: PdfObjectSize): {
@@ -41,9 +41,9 @@ export declare function useSizeModel(props: PdfObjectSize): {
  */
 export declare function useObjectModel(props: PdfObjectProp): {
     id: symbol;
-    x: Ref<number>;
-    y: Ref<number>;
-    page: Ref<number>;
+    x: Ref<number | undefined>;
+    y: Ref<number | undefined>;
+    page: any;
     width: Ref<number>;
     height: Ref<number>;
     minWidth: Ref<number>;
@@ -54,4 +54,4 @@ export declare function useObjectModel(props: PdfObjectProp): {
 };
 export declare function usePage(page: MaybeRef<number>): Readonly<Ref<HTMLElement>>;
 export declare const focus: import("lodash").DebouncedFunc<typeof focus_>;
-export declare type AddonPositionVariant = 'top' | 'left' | 'right' | 'bottpm';
+export type AddonPositionVariant = 'top' | 'left' | 'right' | 'bottom';

package/dist/components/pdf-object/utils/overlap.d.ts

@@ -6,7 +6,7 @@ export interface ObjectPosition {
     x: number;
     y: number;
 }
-export declare type CheckOverlapFn = (object: ObjectPosition, objects: Iterable<ObjectPosition>) => boolean;
+export type CheckOverlapFn = (object: ObjectPosition, objects: Iterable<ObjectPosition>) => boolean;
 export interface GetEmptyPositionOptions {
     /**
      * Other objects position

package/dist/components/pdf-object/utils/position.d.ts

@@ -43,7 +43,7 @@ interface GetPosition {
  * @param element Element to search
  * @param container Maximum search element
  */
-export declare function findRelativeParent(element: HTMLElement, container?: HTMLElement): HTMLElement;
+export declare function findRelativeParent(element: HTMLElement, container?: HTMLElement): HTMLElement | null;
 /**
  * Computed X, Y position to Top, Left position
  * @param context

package/dist/components/pdf-text/PdfText.vue.d.ts

@@ -3,7 +3,7 @@ import { ModelModifier } from '../dropzone';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: (StringConstructor | {
-            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag | undefined): File;
             prototype: File;
         })[];
         default: string;
@@ -66,7 +66,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     labelFont: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     labelSize: {
         type: NumberConstructor;
@@ -77,7 +77,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: (StringConstructor | {
-            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag | undefined): File;
             prototype: File;
         })[];
         default: string;
@@ -140,7 +140,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     labelFont: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     labelSize: {
         type: NumberConstructor;
@@ -148,8 +148,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     size: number;
-    color: string;
     text: string;
+    color: string;
     modelValue: string | File;
     label: string;
     modelModifiers: ModelModifier;

package/dist/components/pdf-viewer/PdfError.vue

@@ -3,9 +3,9 @@
     v-p-aspect-ratio="1122/793"
     data-testid="pdf-error"
     class="pdf__error">
-    <h3 class="text-danger">
+    <Heading element="h3">
       Failed to load PDF
-    </h3>
+    </Heading>
     <dl class="mt-7">
       <dt>URL:</dt>
       <dd class="truncate">
@@ -30,8 +30,10 @@
 <script>
 import { pAspectRatio } from "../aspect-ratio";
 import { defineComponent } from "vue-demi";
+import Heading from "../heading/Heading.vue";
 export default defineComponent({
   directives: { pAspectRatio },
+  components: { Heading },
   props: {
     url: {
       type: String,
@@ -54,6 +56,21 @@ export default defineComponent({
 
 <style lang="postcss">
 .pdf__error {
-  @apply shadow-lg mb-4 p-6 bg-danger w-full h-full max-w-[793px] mx-auto;
+  @apply shadow-lg mb-4 p-6 bg-danger w-full h-full max-w-[var(--p-pdf-container-width)] mx-auto text-default;
+  @apply dark:bg-dark-danger-emphasis dark:text-dark-default;
+
+  a {
+    &,
+    &:hover {
+      > code {
+        @apply text-danger;
+      }
+    }
+  }
+
+  :not(pre) code {
+    @apply bg-subtle-alpha text-danger;
+    @apply dark:bg-dark-danger dark:text-dark-danger;
+  }
 }
 </style>

package/dist/components/pdf-viewer/PdfLoading.vue

@@ -21,7 +21,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .pdf__loading {
-  @apply shadow-lg mb-4 p-4 bg-base-white max-w-[793px] mx-auto;
+  @apply shadow-lg mb-4 p-4 bg-default max-w-[var(--p-pdf-container-width)] mx-auto;
 
   > img {
     @apply max-w-full object-contain h-auto;

package/dist/components/pdf-viewer/PdfNavigation.vue

@@ -119,26 +119,30 @@ export default defineComponent({
     @apply absolute bottom-4 inset-x-0 justify-center items-center flex w-80 mx-auto z-10;
 
     &-container {
-      @apply flex bg-gray-70 text-gray-30 rounded p-2 space-x-1 items-center;
+      @apply flex bg-inverse text-subtlest rounded p-2 space-x-1 items-center;
+      @apply dark:text-dark-default;
 
       > .btn {
-        @apply text-gray-30;
+        @apply text-subtlest hover:text-muted;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default;
       }
 
       > .select {
         @apply w-16;
 
         > .input {
-          @apply bg-emphasis-subtle;
+          @apply bg-default-alpha;
+          @apply dark:bg-dark-default-alpha;
 
           > .input__form {
-            @apply border-on-emphasis-subtle bg-emphasis-subtle;
+            @apply border-subtle-alpha bg-default-alpha text-state-emphasis;
+            @apply dark:border-dark-subtle-alpha dark:bg-dark-default-alpha dark:text-dark-state-emphasis;
           }
         }
       }
 
       > .divider {
-        @apply border-none bg-gray-50;
+        @apply border-none bg-dark-subtle-alpha;
       }
     }
 

package/dist/components/pdf-viewer/PdfViewer.vue

@@ -218,7 +218,10 @@ export default defineComponent({
 
 <style lang="postcss">
 .pdf {
+  --p-pdf-container-width: 793px;
+
   @apply relative overflow-hidden w-full flex flex-col bg-subtle z-1;
+  @apply dark:bg-dark-subtle;
 
   &__wrapper {
     @apply relative h-full w-full flex-grow;
@@ -237,17 +240,20 @@ export default defineComponent({
       @apply shadow-lg mb-4 mt-0 border;
 
       &.hover {
-        @apply ring-accent ring;
+        @apply ring-info ring;
+        @apply dark:ring-dark-info;
       }
     }
   }
 
   &__header {
     @apply z-1 bg-default shadow-lg;
+    @apply dark:bg-dark-default;
   }
 
   &__footer {
     @apply z-1 bg-default shadow-lg-top;
+    @apply dark:bg-dark-default;
   }
 }
 </style>