@privyid/persona 0.12.0 → 0.13.0

package/dist/components/avatar/Avatar.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
 }, {
@@ -51,7 +51,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
 }>> & {

package/dist/components/badge/Badge.vue.d.ts

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

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

@@ -54,11 +54,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    color: ColorVariant;
     variant: StyleVariant;
     size: SizeVariant;
-    href: string;
+    color: ColorVariant;
     icon: boolean;
+    href: string;
     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.d.ts

@@ -4,15 +4,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -41,15 +41,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {

package/dist/components/cropper/Cropper.vue.d.ts

@@ -40,7 +40,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     rounded: {
@@ -112,7 +112,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     rounded: {

package/dist/components/dot/Dot.vue.d.ts

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

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,21 +101,26 @@ 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;
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
-    color: ColorVariant;
     variant: StyleVariant;
     size: SizeVariant;
-    text: string;
+    color: ColorVariant;
     icon: boolean;
+    text: string;
     pill: boolean;
     modelValue: boolean;
     disabled: boolean;
     placement: Placement;
     noCaret: boolean;
     divider: boolean;
+    menuClass: string | unknown[] | Record<string, any>;
 }>;
 export default _default;

package/dist/components/filterbar/pinned/PinnedSelect.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => never[];
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: undefined;
     };
 }, {
@@ -30,7 +30,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => never[];
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: undefined;
     };
 }>> & {

package/dist/components/filterbar/pinned/PinnedToggle.vue.d.ts

@@ -6,15 +6,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         required: true;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -30,15 +30,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         required: true;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {

package/dist/components/input/Input.vue

@@ -125,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;
     }
   }
@@ -174,7 +174,7 @@ export default defineComponent({
 
   &__prepend,
   &__append {
-    @apply absolute top-0 h-full flex items-center;
+    @apply absolute top-0 h-full flex items-center z-1;
   }
 
   &__prepend {

package/dist/components/input-pin/InputPin.vue.d.ts

@@ -55,8 +55,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
 }, {
-    length: string | number;
     error: boolean;
+    length: string | number;
     modelValue: string;
     disabled: boolean;
     readonly: boolean;

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

@@ -42,9 +42,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
-    color: ColorVariant;
     variant: StyleVariant;
     size: SizeVariant;
+    color: ColorVariant;
     dismissable: boolean;
 }>;
 export default _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/modal/Modal.vue.d.ts

@@ -92,9 +92,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     size: SizeVariant;
-    text: string;
     dismissable: boolean;
     banner: boolean;
+    text: string;
     modelValue: boolean;
     title: string;
     centered: boolean;

package/dist/components/nav/NavItemDropdown.vue

@@ -9,7 +9,8 @@
       :variant="variant"
       :size="size"
       :placement="placement"
-      :no-caret="noCaret">
+      :no-caret="noCaret"
+      :menu-class="menuClass">
       <template #button-content>
         <slot name="button-content">
           {{ text }}
@@ -54,6 +55,14 @@ export default defineComponent({
     placement: {
       type: String,
       default: "bottom-end"
+    },
+    menuClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
     }
   },
   models: {

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

@@ -30,6 +30,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         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<{
@@ -61,15 +65,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<Placement>;
         default: string;
     };
+    menuClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
     size: SizeVariant;
-    text: string;
     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-text/PdfText.vue.d.ts

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

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/radio/Radio.vue.d.ts

@@ -10,11 +10,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -43,11 +43,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {

package/dist/components/select/Select.vue.d.ts

@@ -4,7 +4,7 @@ import { Adapter } from './adapter/adapter';
 import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: string;
     };
     selected: {
@@ -62,7 +62,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     isSelected: (item: SelectItem) => boolean;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:selected" | "userInput")[], "change" | "update:modelValue" | "update:selected" | "userInput", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: string;
     };
     selected: {

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/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/toggle/Toggle.vue.d.ts

@@ -6,15 +6,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -51,15 +51,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     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

@@ -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/TourDialog.vue.d.ts

@@ -94,8 +94,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     onPrev?: ((...args: any[]) => any) | undefined;
 }, {
     image: string;
-    text: string;
     dismissable: boolean;
+    text: string;
     title: string;
     step: number;
     highlight: boolean;

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/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.12.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.12.0",
+  "description": "Persona core package",
+  "version": "0.13.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -60,8 +61,8 @@
     "@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",
+    "@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",
@@ -87,7 +88,7 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/tailwind-preset": "^0.12.0",
+    "@privyid/tailwind-preset": "^0.13.0",
     "postcss-custom-properties": "^12.1.11",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -98,8 +99,8 @@
     "@nuxt/module-builder": "^0.3.0",
     "@nuxt/schema": "3.3.3",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.12.0",
-    "@privyid/tailwind-preset": "^0.12.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",