@privyid/persona 0.11.0 → 0.13.0

package/dist/components/button/Button.vue

@@ -104,7 +104,7 @@ export default defineComponent({
   --p-color-danger-focus: darken(theme(backgroundColor.danger.emphasis), 10%);
   --p-color-dark-danger-focus: darken(theme(backgroundColor.dark.danger.emphasis), 10%);
 
-  @apply inline-flex align-middle font-medium disabled:opacity-50 disabled:pointer-events-none transition-all ease-in-out duration-200;
+  @apply inline-flex align-middle justify-center font-medium no-underline hover:no-underline disabled:opacity-50 disabled:pointer-events-none transition-all ease-in-out duration-200;
 
   > svg {
     @apply self-center;
@@ -139,8 +139,8 @@ export default defineComponent({
   * default style variant
   */
   &&--variant-solid {
-    @apply border border-solid hover:shadow-lg focus:shadow-none active:shadow-none text-state-emphasis;
-    @apply dark:text-dark-state-emphasis;
+    @apply border border-solid hover:shadow-lg focus:shadow-none active:shadow-none text-state-emphasis hover:text-state-emphasis;
+    @apply dark:text-dark-state-emphasis dark:hover:text-dark-state-emphasis;
 
     &.btn {
       &--default {

package/dist/components/button/Button.vue.d.ts

@@ -56,9 +56,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>>, {
     variant: StyleVariant;
     size: SizeVariant;
+    color: ColorVariant;
     icon: boolean;
     href: string;
-    color: ColorVariant;
     pill: boolean;
 }>;
 export default _default;

package/dist/components/button-group/ButtonGroup.vue

@@ -72,7 +72,7 @@ export default defineComponent({
     * to the front to overlay borders
     */
     &:is(:hover, :focus, :active, .active) {
-      @apply z-[1];
+      @apply z-1;
     }
 
     /**

package/dist/components/camera/Camera.vue

@@ -218,10 +218,13 @@ export default defineComponent({
     const deviceId = computed(() => {
       return cameras.value?.at(camera.value)?.deviceId;
     });
-    const { stream, start, stop, enabled: isActive } = useUserMedia({
-      videoDeviceId: deviceId,
-      audioDeviceId: false
+    const constraints = computed(() => {
+      return {
+        video: { deviceId: deviceId.value },
+        audio: false
+      };
     });
+    const { stream, start, stop, enabled: isActive } = useUserMedia({ constraints });
     const classNames = computed(() => {
       const result = [];
       if (meta.value.mirror)
@@ -316,7 +319,8 @@ export default defineComponent({
       turnOn,
       onStart,
       toast,
-      deviceId
+      deviceId,
+      constraints
     };
   }
 });

package/dist/components/camera/Camera.vue.d.ts

@@ -48,6 +48,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     onStart: () => void;
     toast: (text: string) => void;
     deviceId: ComputedRef<string | undefined>;
+    constraints: ComputedRef<MediaStreamConstraints>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "start" | "update:modelValue" | "result")[], "change" | "start" | "update:modelValue" | "result", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<string | string[] | File | File[]>;

package/dist/components/checkbox/Checkbox.vue

@@ -152,7 +152,7 @@ export default defineComponent({
   * with custom icon
   */
   &__icon {
-    @apply w-5 h-5 border rounded-tn border-subtle inline-flex items-center justify-center bg-default;
+    @apply w-5 h-5 inline-flex flex-shrink-0 border rounded-tn border-subtle items-center justify-center bg-default;
     @apply dark:border-dark-subtle dark:bg-dark-default;
 
     > svg {

package/dist/components/datepicker/Datepicker.vue

@@ -142,7 +142,7 @@ export default defineComponent({
   }
 
   &__icon {
-    @apply absolute right-3 top-0 bottom-0 my-auto transition-transform duration-150 text-muted pointer-events-none;
+    @apply transition-transform duration-150 text-muted pointer-events-none;
     @apply dark:text-dark-muted;
   }
 

package/dist/components/dropdown/Dropdown.vue

@@ -35,7 +35,8 @@
         v-show="isOpen"
         ref="menu"
         data-testid="dropdown-menu"
-        class="dropdown__menu">
+        class="dropdown__menu"
+        :class="menuClass">
         <DropdownGroup
           ref="wizard"
           class="dropdown__menu__container">
@@ -123,6 +124,14 @@ export default defineComponent({
     divider: {
       type: Boolean,
       default: false
+    },
+    menuClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
     }
   },
   models: {
@@ -183,18 +192,20 @@ export default defineComponent({
       }
     });
     onKeyStroke(["ArrowUp"], (event) => {
-      event.preventDefault();
-      if (isOpen.value)
+      if (isOpen.value) {
+        event.preventDefault();
         prevFocus();
+      }
     });
     onKeyStroke(["ArrowDown"], (event) => {
-      event.preventDefault();
-      if (isOpen.value)
+      if (isOpen.value) {
+        event.preventDefault();
         nextFocus();
+      }
     });
     onKeyStroke(["Tab"], (event) => {
-      event.preventDefault();
       if (isOpen.value) {
+        event.preventDefault();
         if (event.shiftKey)
           prevFocus();
         else

package/dist/components/dropdown/Dropdown.vue.d.ts

@@ -46,6 +46,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    menuClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
 }, {
     isOpen: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
@@ -97,6 +101,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    menuClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
@@ -104,14 +112,15 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: StyleVariant;
     size: SizeVariant;
+    color: ColorVariant;
     icon: boolean;
     text: string;
-    color: ColorVariant;
     pill: boolean;
     modelValue: boolean;
     disabled: boolean;
     placement: Placement;
     noCaret: boolean;
     divider: boolean;
+    menuClass: string | unknown[] | Record<string, any>;
 }>;
 export default _default;

package/dist/components/form-group/FormGroup.vue

@@ -101,7 +101,7 @@ export default defineComponent({
   }
 
   &__hint {
-    @apply absolute bottom-0 right-0 text-info cursor-pointer focus:outline-none;
+    @apply absolute right-0 text-info cursor-pointer focus:outline-none;
     @apply dark:text-dark-info;
   }
 }

package/dist/components/input/Input.vue

@@ -2,7 +2,11 @@
   <div
     class="input"
     data-testid="input-container">
-    <slot name="prepend" />
+    <span
+      v-if="$slots.prepend"
+      class="input__prepend">
+      <slot name="prepend" />
+    </span>
     <input
       v-model="model"
       class="input__form"
@@ -16,7 +20,11 @@
       class="input__clear"
       data-testid="input-clear"
       @click="clear" />
-    <slot name="append" />
+    <span
+      v-if="$slots.append"
+      class="input__append">
+      <slot name="append" />
+    </span>
   </div>
 </template>
 
@@ -63,7 +71,7 @@ export default defineComponent({
     event: "update:modelValue"
   },
   emits: ["update:modelValue", "clear"],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const model = useVModel(props);
     const setting = inject(INPUTGROUP_SETTING, void 0, false);
     const classNames = computed(() => {
@@ -80,6 +88,10 @@ export default defineComponent({
         result.push("input--error", "state--error");
       if (props.clearable)
         result.push("input--clearable");
+      if (slots.prepend)
+        result.push("input--has-prepend");
+      if (slots.append)
+        result.push("input--has-append");
       return result;
     });
     function clear(event) {
@@ -113,7 +125,7 @@ export default defineComponent({
     }
 
     &:focus {
-      @apply border-subtle ring-4 ring-subtle/10 z-[1];
+      @apply border-subtle ring-4 ring-subtle/10 z-1;
       @apply dark:border-dark-subtle dark:ring-dark-subtle/10;
     }
   }
@@ -152,6 +164,35 @@ export default defineComponent({
     + .input__clear {
       @apply absolute right-3 top-1/2 -translate-y-1/2;
     }
+
+    &:where(.input--has-append) {
+      + .input__clear {
+        @apply right-10;
+      }
+    }
+  }
+
+  &__prepend,
+  &__append {
+    @apply absolute top-0 h-full flex items-center z-1;
+  }
+
+  &__prepend {
+    @apply left-3;
+  }
+
+  &__append {
+    @apply right-3;
+  }
+
+  &--has {
+    &-prepend {
+      @apply pl-9;
+    }
+
+    &-append {
+      @apply pr-9;
+    }
   }
 }
 </style>

package/dist/components/label/Label.vue.d.ts

@@ -44,7 +44,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: StyleVariant;
     size: SizeVariant;
-    dismissable: boolean;
     color: ColorVariant;
+    dismissable: boolean;
 }>;
 export default _default;

package/dist/components/main/Main.vue

@@ -6,21 +6,32 @@
 
 <style lang="postcss">
 .main {
+  --p-spacer: 1rem;
+
+  /**
+  * Heading
+  */
+  h1, h2, h3, h4, h5, h6 {
+    --p-heading-margin-bottom: calc(var(--p-spacer) * .5);
+    @apply mb-[var(--p-heading-margin-bottom)];
+  }
+
   /**
   * Permalink
   */
   a {
     --p-color-link-hover: darken(theme(textColor.link), 5%);
     --p-color-dark-link-hover: darken(theme(textColor.link), 5%);
-    @apply underline text-link hover:text-[color:var(--p-color-info-hover)];
-    @apply dark:text-dark-link hover:dark:text-[color:var(--p-color-dark-info-hover)];
+    @apply underline text-link hover:text-[color:var(--p-color-link-hover)];
+    @apply dark:text-dark-link hover:dark:text-[color:var(--p-color-dark-link-hover)];
   }
 
   /**
   * Paragraph
   */
   p {
-    @apply text-base text-default;
+    --p-paragraph-margin-bottom: var(--p-spacer);
+    @apply mt-0 mb-[var(--p-paragraph-margin-bottom)] text-base text-default;
     @apply dark:text-dark-default;
   }
 

package/dist/components/modal/Modal.vue

@@ -176,7 +176,7 @@ export default defineComponent({
   --p-modal-size-lg: 800px;
   --p-modal-size-md: 600px;
   --p-modal-size-sm: 400px;
-  --p-modal-z-index: 1060;
+  --p-modal-z-index: theme(zIndex.modal);
   --p-modal-dismiss-z-index: calc(var(--p-modal-z-index) + 1);
 
   /**
@@ -206,7 +206,7 @@ export default defineComponent({
   * in white
   */
   &__content {
-    @apply my-8 bg-default rounded relative shadow-2xl;
+    @apply my-8 bg-default rounded relative shadow-2xl max-w-[calc(100vw_-_theme('spacing.4'))];
     @apply dark:bg-dark-default;
 
     .modal__dismiss {

package/dist/components/nav/NavItemDropdown.vue

@@ -3,18 +3,19 @@
     data-testid="nav-item-dropdown"
     class="nav__item nav__item--dropdown">
     <Dropdown
+      v-model="model"
       :text="text"
       :icon="icon"
       :variant="variant"
       :size="size"
-      placement="bottom-end"
-      :no-caret="noCaret">
+      :placement="placement"
+      :no-caret="noCaret"
+      :menu-class="menuClass">
       <template #button-content>
         <slot name="button-content">
           {{ text }}
         </slot>
       </template>
-
       <slot />
     </Dropdown>
   </li>
@@ -23,9 +24,14 @@
 <script>
 import { defineComponent } from "vue-demi";
 import Dropdown from "../dropdown/Dropdown.vue";
+import { useVModel } from "../input";
 export default defineComponent({
   components: { Dropdown },
   props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
     text: {
       type: String,
       default: ""
@@ -45,7 +51,28 @@ export default defineComponent({
     noCaret: {
       type: Boolean,
       default: false
+    },
+    placement: {
+      type: String,
+      default: "bottom-end"
+    },
+    menuClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
     }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const model = useVModel(props);
+    return { model };
   }
 });
 </script>

package/dist/components/nav/NavItemDropdown.vue.d.ts

@@ -1,6 +1,11 @@
 import { PropType } from 'vue-demi';
+import { Placement } from '@floating-ui/core';
 import type { SizeVariant, StyleVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     text: {
         type: StringConstructor;
         default: string;
@@ -21,7 +26,21 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, unknown, 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<{
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    menuClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+}, {
+    model: import("vue-demi").Ref<boolean>;
+}, 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<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     text: {
         type: StringConstructor;
         default: string;
@@ -42,11 +61,24 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    menuClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     variant: StyleVariant;
     size: SizeVariant;
     icon: boolean;
     text: string;
+    modelValue: boolean;
+    placement: Placement;
     noCaret: boolean;
+    menuClass: string | unknown[] | Record<string, any>;
 }>;
 export default _default;

package/dist/components/navbar/Navbar.vue

@@ -81,7 +81,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .navbar {
-  --p-navbar-z-index: 1030;
+  --p-navbar-z-index: theme(zIndex.fixed);
 
   @apply bg-default relative p-3 flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
   @apply dark:bg-dark-default;

package/dist/components/navbar/NavbarNav.vue

@@ -36,7 +36,7 @@ export default defineComponent({
 <style lang="postcss">
 .navbar {
   &__nav {
-    @apply flex flex-row;
+    @apply flex flex-row items-center;
 
     &:not(.nav--align-center):not(.nav--align-right) {
       @apply mr-auto;

package/dist/components/overlay/Overlay.vue

@@ -53,7 +53,9 @@ export default defineComponent({
 }
 
 .overlay {
-  @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];
+  --p-overlay-z-index: theme(zIndex.overlay);
+
+  @apply z-[var(--p-overlay-z-index)] fixed top-0 left-0 right-0 bottom-0 w-screen h-screen bg-inverse/30 flex items-center justify-center select-none will-change-[transform,opacity];
   @apply dark:bg-dark-inverse/30;
 
   &__icon {

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

@@ -82,10 +82,8 @@ export default defineComponent({
       onend(event) {
         if (event.relatedTarget) {
           const reference = event.relatedTarget;
-          const container = reference.closest(".pdf-objects");
           const result = getPosition({
             reference,
-            container,
             object: object.value,
             scale: scale.value
           });

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

@@ -35,6 +35,7 @@ export default defineComponent({
 .pdf-object {
   &__addon {
     @apply absolute;
+    @apply dark:text-default;
 
     &--right {
       @apply top-0 left-full pl-2;

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

@@ -68,7 +68,7 @@ export default defineComponent({
 
   &__debugger {
     @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;
+    /* @apply dark:bg-dark-inverse dark:text-dark-on-emphasis; */
 
     > pre {
       @apply truncate;

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

@@ -24,7 +24,7 @@ interface GetPosition {
     /**
      * Root container element
      */
-    container: HTMLElement;
+    container?: HTMLElement;
     /**
      * Reference element where the object should be placed
      */

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

@@ -148,8 +148,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     size: number;
-    text: string;
     color: string;
+    text: string;
     modelValue: string | File;
     label: string;
     modelModifiers: ModelModifier;

package/dist/components/pdf-viewer/utils/use-viewer.mjs

@@ -43,12 +43,12 @@ export function useViewer(container, viewer) {
         pdfDoc.value = await pdfLoadingTask.value.promise;
         pdfViewer.value.setDocument(pdfDoc.value);
         pdfLinkService.value.setDocument(pdfDoc.value);
-        loadEvent.trigger(pdfDoc.value);
+        void loadEvent.trigger(pdfDoc.value);
       }
     } catch (error_) {
       if (error_ instanceof Error) {
         error.value = error_;
-        errorEvent.trigger(error_);
+        void errorEvent.trigger(error_);
       }
     } finally {
       loading.value = false;
@@ -77,7 +77,7 @@ export function useViewer(container, viewer) {
         pdfViewer.value.currentScaleValue = isWide ? "1" : "page-width";
         pdfViewer.value.currentPageNumber = page.value;
         ready.value = true;
-        readyEvent.trigger(pdfViewer.value);
+        void readyEvent.trigger(pdfViewer.value);
       });
       bus.on("pagechanging", (event) => {
         page.value = event.pageNumber;

package/dist/components/sidebar/Sidebar.vue

@@ -79,6 +79,7 @@ export default defineComponent({
 .sidebar {
   --p-sidebar-size-narrow: 60px;
   --p-sidebar-size-wide: 230px;
+  --p-sidebar-z-index: theme(zIndex.fixed);
 
   @apply bg-default px-2 py-4;
   @apply dark:bg-dark-default;
@@ -104,7 +105,7 @@ export default defineComponent({
   * Fixed sidebar
   */
   &&--fixed {
-    @apply fixed top-0 h-full shadow-lg overflow-y-auto;
+    @apply fixed z-[var(--p-sidebar-z-index)] top-0 h-full shadow-lg overflow-y-auto;
 
     &:not(.sidebar--right) {
       @apply left-0;

package/dist/components/signature-text/SignatureText.vue.d.ts

@@ -84,8 +84,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>>, {
-    text: string;
     color: string;
+    text: string;
     modelValue: string | File;
     modelModifiers: ModelModifier;
     font: string;

package/dist/components/spread/Spread.vue

@@ -39,7 +39,7 @@ export default defineComponent({
 
     &:nth-child(1),
     &:nth-child(3) {
-      @apply opacity-25 absolute top-0 left-0 origin-bottom transition-transform z-[1] will-change-transform;
+      @apply opacity-25 absolute top-0 left-0 origin-bottom transition-transform z-1 will-change-transform;
     }
   }
 

package/dist/components/text/Text.vue

@@ -23,6 +23,14 @@ export default defineComponent({
     href: {
       type: String,
       default: void 0
+    },
+    weight: {
+      type: String,
+      default: "normal"
+    },
+    transform: {
+      type: String,
+      default: "normalcase"
     }
   },
   setup(props) {
@@ -34,6 +42,10 @@ export default defineComponent({
       const result = [""];
       if (props.variant)
         result.push(`freetext--${props.variant}`);
+      if (props.weight)
+        result.push(`freetext--${props.weight}`);
+      if (props.transform)
+        result.push(`freetext--${props.transform}`);
       if (props.href)
         result.push("freetext--hyperlink");
       if (props.href && (props.variant === "caption" || props.variant === "caption2"))
@@ -54,10 +66,42 @@ export default defineComponent({
     @apply underline decoration-solid;
   }
 
+  /**
+  * Weight variant
+  * of text
+  */
+  &--normal {
+    @apply font-normal;
+  }
+
   &--medium {
     @apply font-medium;
   }
 
+  &--bold {
+    @apply font-bold;
+  }
+
+  /**
+  * Text transform
+  * of text
+  */
+  &--normalcase {
+    @apply normal-case;
+  }
+
+  &--lowercase {
+    @apply lowercase;
+  }
+
+  &--capitalize {
+    @apply capitalize;
+  }
+
+  &--uppercase {
+    @apply uppercase;
+  }
+
   /**
   * Heading Style
   */

package/dist/components/text/Text.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
 import { StyleVariant } from '.';
+import { WeightVariant, TransformVariant } from '../heading';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
@@ -9,6 +10,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
 }, {
     hyperlink: import("vue-demi").ComputedRef<String>;
     classNames: import("vue-demi").ComputedRef<String[]>;
@@ -21,8 +30,18 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
 }>>, {
     variant: StyleVariant;
     href: string;
+    weight: WeightVariant;
+    transform: TransformVariant;
 }>;
 export default _default;

package/dist/components/toast/Toast.vue

@@ -110,6 +110,8 @@ export default defineComponent({
   * global style
   * of toast
   */
+  --p-toast-z-index: theme(zIndex.toast);
+
   @apply flex shadow-xl rounded w-72 md:w-96 overflow-hidden;
 
   .toast__icon,

package/dist/components/toast/ToastContainer.vue

@@ -44,7 +44,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .toast-container {
-  @apply fixed top-0 right-0 z-40 flex flex-col space-y-2 max-h-screen overflow-visible;
+  @apply z-[var(--p-toast-z-index)] fixed top-0 right-0 flex flex-col space-y-2 max-h-screen overflow-visible;
 }
 
 .toast {

package/dist/components/toggle/Toggle.vue

@@ -194,7 +194,7 @@ export default defineComponent({
     }
 
     .toggle__pointer {
-      @apply w-1/2 h-full rounded-xs z-[1];
+      @apply w-1/2 h-full rounded-xs z-1;
     }
 
     &.toggle--checked {

package/dist/components/tooltip/Tooltip.vue

@@ -114,7 +114,9 @@ export default defineComponent({
 
 <style lang="postcss">
 .tooltip {
-  @apply px-4 py-3 rounded text-xs inline-block z-30 absolute drop-shadow-sm;
+  --p-tooltip-z-index: theme(zIndex.tooltip);
+
+  @apply z-[var(--p-tooltip-z-index)] px-4 py-3 rounded text-xs inline-block absolute drop-shadow-sm;
 
   &__arrow {
     @apply absolute after:w-4 after:h-4 after:block after:rounded-[3px] after:rotate-45 after:left-0 after:content-[''] after:z-0;

package/dist/components/tour/Tour.vue

@@ -94,6 +94,9 @@ export default defineComponent({
 
 <style lang="postcss">
 .tour {
+  --p-tour-z-index: theme(zIndex.tour.DEFAULT);
+  --p-tour-backdrop-z-index: theme(zIndex.tour.backdrop);
+
   & > &__dialog {
     @apply absolute top-0 left-0;
   }

package/dist/components/tour/TourDialog.vue

@@ -65,7 +65,7 @@
           data-testid="tour-control-finish"
           size="xs"
           variant="solid"
-          color="primary"
+          color="info"
           @click="$emit('next', $event)">
           {{ finishLabel }}
         </p-button>
@@ -74,7 +74,7 @@
           data-testid="tour-control-next"
           size="xs"
           variant="solid"
-          color="primary"
+          color="info"
           @click="$emit('next', $event)">
           {{ nextLabel }}
         </p-button>
@@ -158,7 +158,7 @@ export default defineComponent({
 <style lang="postcss">
 .tour {
   &__dialog {
-    @apply rounded bg-inverse w-full max-w-xs z-[100] overflow-hidden relative shadow-sm;
+    @apply z-[var(--p-tour-z-index)] rounded bg-inverse w-full max-w-xs overflow-hidden relative shadow-sm;
     @apply dark:bg-dark-inverse;
   }
 

package/dist/components/tour/TourHighlight.vue

@@ -47,11 +47,11 @@ export default defineComponent({
 <style lang="postcss">
 .tour {
   &__backdrop {
-    @apply fixed inset-0 overflow-hidden w-full h-full z-[100];
+    @apply fixed inset-0 overflow-hidden w-full h-full z-[var(--p-tour-backdrop-z-index)];
   }
 
   &__highlight {
-    @apply absolute shadow-mask cursor-pointer rounded-tn;
+    @apply z-[var(--p-tour-z-index)] absolute shadow-mask cursor-pointer rounded-tn;
   }
 }
 </style>

package/dist/components/tour/core/tour.mjs

@@ -80,7 +80,7 @@ export class Tour extends AbstractTour {
    * Run "on-finished" hooks
    */
   async runOnFinishedHooks() {
-    await Promise.allSettled(this.onFinishedHooks.map((hook) => hook()));
+    await Promise.allSettled(this.onFinishedHooks.map(async (hook) => await hook()));
   }
   /**
    * Execute current step

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.11.0"
+  "version": "0.13.0"
 }

package/dist/types.d.ts

@@ -6,5 +6,10 @@ declare module '@nuxt/schema' {
   interface NuxtOptions { ['persona']?: ModuleOptions }
 }
 
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['persona']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['persona']?: ModuleOptions }
+}
+
 
 export { ModuleOptions, default } from './module'

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@privyid/persona",
-  "version": "0.11.0",
+  "description": "Persona core package",
+  "version": "0.13.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -60,9 +61,9 @@
     "@nuxt/kit": "^3.3.2",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/user-event": "^14.4.3",
-    "@vueuse/core": "9.11.1",
-    "@vueuse/math": "^9.4.0",
-    "@zxing/browser": "0.1.1",
+    "@vueuse/core": "10.1.2",
+    "@vueuse/math": "10.1.2",
+    "@zxing/browser": "0.1.3",
     "@zxing/library": "0.19.2",
     "chart.js": "4.2.1",
     "core-js": "3",
@@ -87,23 +88,23 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/tailwind-preset": "^0.11.0",
+    "@privyid/tailwind-preset": "^0.13.0",
     "postcss-custom-properties": "^12.1.11",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
-    "tailwind": ">= 3.0.0",
+    "tailwind": ">=3.0.0",
     "vue-router": ">=4.0.0"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.3.0",
     "@nuxt/schema": "3.3.3",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.11.0",
-    "@privyid/tailwind-preset": "^0.11.0",
+    "@privyid/browserslist-config": "^0.13.0",
+    "@privyid/tailwind-preset": "^0.13.0",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^1.2.0",
     "nuxt": "3.3.3",
-    "postcss-custom-properties": "^12.1.11",
+    "postcss-custom-properties": "^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
     "tailwind": "^4.0.0"