@privyid/persona 0.13.1 → 0.15.0

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -60,7 +60,7 @@ export default defineComponent({
 <style lang="postcss">
 .breadcrumbs {
   &__item {
-    @apply inline-flex text-sm items-center;
+    @apply inline-flex text-sm items-center capitalize;
 
     &:last-child {
       & > .breadcrumbs__item__icon {

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -48,15 +48,19 @@ export default defineComponent({
 .breadcrumbs__item {
   &&--dropdown {
     .dropdown__activator {
-      @apply px-0 text-subtle bg-transparent border-transparent hover:shadow-none hover:border-transparent hover:bg-transparent focus:shadow-none focus:border-transparent focus:bg-transparent;
-      @apply dark:text-dark-subtle dark:bg-transparent dark:border-transparent hover:dark:border-transparent hover:dark:bg-transparent focus:dark:border-transparent focus:dark:bg-transparent;
+      &.btn.btn--default.btn--variant-solid {
+        @apply px-0 text-subtle bg-transparent border-transparent hover:shadow-none hover:border-transparent hover:bg-transparent focus:shadow-none focus:border-transparent focus:bg-transparent;
+        @apply dark:text-dark-subtle dark:bg-transparent dark:border-transparent hover:dark:border-transparent hover:dark:bg-transparent focus:dark:border-transparent focus:dark:bg-transparent;
+      }
     }
   }
 
   &&--active {
     .dropdown__activator {
-      @apply text-default;
-      @apply dark:text-dark-default;
+      &.btn.btn--default.btn--variant-solid {
+        @apply text-default;
+        @apply dark:text-dark-default;
+      }
 
       & > .dropdown__caret {
         @apply text-subtle;

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

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

package/dist/components/collapse/Collapse.vue

@@ -80,14 +80,4 @@ export default defineComponent({
     @apply hidden;
   }
 }
-
-.navbar {
-  &--collapse {
-    @apply basis-full flex-grow items-center;
-
-    &.collapse--show {
-      @apply pt-3;
-    }
-  }
-}
 </style>

package/dist/components/cropper/Cropper.vue

@@ -366,8 +366,7 @@ export default defineComponent({
   }
 
   &__preview {
-    background-image: url("./assets/ps-neutral.png");
-
+    @apply bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGklEQVR4AWNYJYoK92ihwpGiAF0AXcMIUQAAbIfSgRmCFqkAAAAASUVORK5CYII=)];
     @apply flex w-full overflow-hidden h-auto relative aspect-compat-square select-none;
   }
 

package/dist/components/dropdown/Dropdown.vue

@@ -36,7 +36,7 @@
         ref="menu"
         data-testid="dropdown-menu"
         class="dropdown__menu"
-        :class="menuClass">
+        :class="[menuClass, containerSize]">
         <DropdownGroup
           ref="wizard"
           class="dropdown__menu__container">
@@ -132,6 +132,10 @@ export default defineComponent({
         Object
       ],
       default: void 0
+    },
+    menuSize: {
+      type: String,
+      default: "sm"
     }
   },
   models: {
@@ -156,6 +160,12 @@ export default defineComponent({
         result.push("dropdown--divider");
       return result;
     });
+    const containerSize = computed(() => {
+      const result = [""];
+      if (props.menuSize)
+        result.push(`dropdown__menu--${props.menuSize}`);
+      return result;
+    });
     function toggle() {
       if (!props.disabled) {
         if (isOpen.value)
@@ -247,6 +257,7 @@ export default defineComponent({
     return {
       isOpen,
       classNames,
+      containerSize,
       toggle,
       open,
       close
@@ -257,10 +268,15 @@ export default defineComponent({
 
 <style lang="postcss">
 .dropdown {
+  --p-dropdown-z-index: theme(zIndex.dropdown);
+  --p-dropdown-size-lg: 30rem; /* 480px */
+  --p-dropdown-size-md: 20rem; /* 320px */
+  --p-dropdown-size-sm: 15rem; /* 240px */
+
   @apply relative inline-flex;
 
   &__menu {
-    @apply max-h-64 border rounded w-full min-w-[15rem] bg-default z-10 border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
+    @apply max-h-64 border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
     @apply dark:bg-dark-default dark:border-dark-default;
 
     &__container {
@@ -276,6 +292,18 @@ export default defineComponent({
         }
       }
     }
+
+    &--lg {
+      @apply w-[var(--p-dropdown-size-lg)];
+    }
+
+    &--md {
+      @apply w-[var(--p-dropdown-size-md)];
+    }
+
+    &--sm {
+      @apply w-[var(--p-dropdown-size-sm)];
+    }
   }
 
   &__activator > &__caret {

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

@@ -1,6 +1,7 @@
 import { PropType } from 'vue-demi';
 import { Placement } from '@floating-ui/dom';
 import type { StyleVariant, ColorVariant, SizeVariant } from '../button';
+import type { MenuSizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
@@ -50,9 +51,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    menuSize: {
+        type: PropType<MenuSizeVariant>;
+        default: string;
+    };
 }, {
     isOpen: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
+    containerSize: import("vue-demi").ComputedRef<string[]>;
     toggle: () => void;
     open: () => void;
     close: () => void;
@@ -105,6 +111,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    menuSize: {
+        type: PropType<MenuSizeVariant>;
+        default: string;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
@@ -112,9 +122,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: StyleVariant;
     size: SizeVariant;
+    text: string;
     color: ColorVariant;
     icon: boolean;
-    text: string;
     pill: boolean;
     modelValue: boolean;
     disabled: boolean;
@@ -122,5 +132,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     noCaret: boolean;
     divider: boolean;
     menuClass: string | Record<string, any> | unknown[];
+    menuSize: MenuSizeVariant;
 }, {}>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import { Ref, InjectionKey } from 'vue-demi';
+export type MenuSizeVariant = 'sm' | 'md' | 'lg';
 interface DropdownContext {
     close: () => void;
     open: () => void;

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

@@ -10,7 +10,8 @@
       :size="size"
       :placement="placement"
       :no-caret="noCaret"
-      :menu-class="menuClass">
+      :menu-class="menuClass"
+      :menu-size="menuSize">
       <template #button-content>
         <slot name="button-content">
           {{ text }}
@@ -63,6 +64,10 @@ export default defineComponent({
         Object
       ],
       default: void 0
+    },
+    menuSize: {
+      type: String,
+      default: "sm"
     }
   },
   models: {
@@ -82,6 +87,14 @@ export default defineComponent({
   &__item {
     &--dropdown {
       @apply ml-auto;
+
+      .dropdown {
+        &__menu {
+          .dropdown__item {
+            @apply px-3;
+          }
+        }
+      }
     }
   }
 

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

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

package/dist/components/navbar/Navbar.vue

@@ -38,6 +38,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    sticky: {
+      type: Boolean,
+      default: false
+    },
     condensed: {
       type: Boolean,
       default: false
@@ -56,6 +60,8 @@ export default defineComponent({
       const result = [""];
       if (props.fixed)
         result.push("navbar--fixed");
+      if (props.sticky)
+        result.push("navbar--sticky");
       if (props.variant)
         result.push(`navbar--${props.variant}`);
       if (props.toggleable)
@@ -82,6 +88,8 @@ export default defineComponent({
 <style lang="postcss">
 .navbar {
   --p-navbar-z-index: theme(zIndex.fixed);
+  --p-navbar-sticky-top: theme(spacing.0);
+  --p-navbar-collapse-max-height: 20rem; /** 320px */
 
   @apply bg-default relative p-3 flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
   @apply dark:bg-dark-default;
@@ -90,6 +98,10 @@ export default defineComponent({
     @apply fixed left-0 top-0 w-full z-[var(--p-navbar-z-index)];
   }
 
+  &&--sticky {
+    @apply sticky top-[var(--p-navbar-sticky-top)] z-sticky;
+  }
+
   &&--shadow {
     @apply shadow-lg transition-shadow duration-150 ease-in-out;
   }
@@ -151,5 +163,105 @@ export default defineComponent({
       }
     }
   }
+
+  &--collapse {
+    @apply basis-full flex-grow items-center max-h-[var(--p-navbar-collapse-max-height)] overflow-y-auto;
+
+    &.collapse--show {
+      @apply mt-3;
+
+      .nav__item--dropdown {
+        @apply ml-0;
+
+        .dropdown,
+        .btn {
+          @apply flex w-full;
+        }
+
+        .dropdown {
+          @apply flex-col;
+
+          &__menu {
+            @apply static shadow-none border-0 bg-base rounded-t-none;
+            @apply dark:bg-dark-base;
+
+            &:where(.dropdown__menu--sm, .dropdown__menu--md, .dropdown__menu--lg) {
+              @apply w-full;
+            }
+
+            &__container {
+              .dropdown__item {
+                @apply first:rounded-t-none;
+              }
+            }
+          }
+
+          &.dropdown--open {
+            .dropdown__activator.btn.btn--md {
+              @apply rounded-b-none bg-base;
+              @apply dark:bg-dark-base;
+            }
+          }
+        }
+
+        &-icon {
+          .dropdown__menu__container {
+            .dropdown__item {
+              @apply px-11;
+            }
+          }
+        }
+
+        .btn {
+          @apply justify-start;
+
+          .dropdown__caret {
+            @apply ml-auto;
+          }
+        }
+      }
+
+      :where(.nav__item, .nav__text, .nav__form) {
+        @apply w-full;
+      }
+    }
+  }
+
+  &&--lines {
+    .navbar--collapse {
+
+      &.collapse--show {
+
+        .nav__item--dropdown {
+
+          .dropdown {
+            &__menu {
+              @apply rounded mt-2;
+
+              &__container {
+                .dropdown__item {
+                  @apply first:rounded-t;
+                }
+              }
+            }
+
+            &.dropdown--open {
+              .dropdown__activator.btn.btn--md {
+                @apply rounded-b-none bg-transparent;
+              }
+            }
+          }
+
+          &-icon {
+            .dropdown__menu__container {
+              .dropdown__item {
+                @apply px-3;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>

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

@@ -14,6 +14,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     condensed: {
         type: BooleanConstructor;
         default: boolean;
@@ -35,6 +39,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     condensed: {
         type: BooleanConstructor;
         default: boolean;
@@ -44,5 +52,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     variant: StyleVariant;
     toggleable: ToggleableVariant | undefined;
     condensed: boolean;
+    sticky: boolean;
 }, {}>;
 export default _default;

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

@@ -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/sidebar/Sidebar.vue

@@ -1,18 +1,24 @@
 <template>
   <aside
+    ref="sidebar"
     data-testid="sidebar"
     class="sidebar"
     :class="classNames">
-    <slot name="brand" />
+    <slot
+      v-if="$slots.brand"
+      name="brand" />
     <div
       ref="sidebarMenus"
       data-testid="sidebar-menus"
+      :data-sidebar-menu="brandHeight"
+      :data-bottom-menu="isBottomMenu"
       class="sidebar__menus"
-      :style="`padding-bottom: ${height+40}px`">
+      :style="{ 'padding-bottom': bottomHeight }">
       <slot />
 
       <div
         v-if="$slots.bottom"
+        data-testid="sidebar-bottom"
         class="sidebar__bottom">
         <slot name="bottom" />
       </div>
@@ -25,7 +31,9 @@ import { templateRef, useElementSize } from "@vueuse/core";
 import {
   defineComponent,
   computed,
-  provide
+  ref,
+  provide,
+  onMounted
 } from "vue-demi";
 import { SIDEBAR_SETTINGS } from ".";
 import { useSelector } from "../pdf-object/utils/use-selector";
@@ -48,6 +56,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    sticky: {
+      type: Boolean,
+      default: false
+    },
     toggleable: {
       type: String,
       default: void 0
@@ -62,17 +74,24 @@ export default defineComponent({
     event: "update:modelValue"
   },
   emits: ["update:modelValue"],
-  setup(props) {
+  setup(props, { slots }) {
     provide(SIDEBAR_SETTINGS, {
       variant: props.variant,
       align: props.align,
       type: props.type
     });
+    const sidebar = templateRef("sidebar");
+    const sidebarBrand = useSelector(".sidebar__brand", sidebar);
+    const brand = useElementSize(sidebarBrand);
     const sidebarMenus = templateRef("sidebarMenus");
     const sidebarBottom = useSelector(".sidebar__bottom", sidebarMenus);
-    const {
-      height
-    } = useElementSize(sidebarBottom);
+    const { height } = useElementSize(sidebarBottom);
+    const brandHeight = computed(() => {
+      return slots.brand ? `${brand.height.value + titleHeight.value + 16}px` : 0;
+    });
+    const bottomHeight = computed(() => {
+      return isBottomMenu.value && !isDefault.value || !isBottomMenu.value && isDefault.value ? 0 : `${height.value + 16}px`;
+    });
     const model = useVModel(props);
     const classNames = computed(() => {
       const result = [""];
@@ -84,13 +103,29 @@ export default defineComponent({
         result.push(`sidebar--${props.variant}`);
       if (props.fixed)
         result.push("sidebar--fixed");
+      if (props.sticky)
+        result.push("sidebar--sticky");
       if (props.toggleable)
         result.push(`sidebar--toggleable sidebar--toggleable-${props.toggleable}`);
       if (props.toggleable && props.fixed && model.value)
         result.push("sidebar--show");
       return result;
     });
-    return { classNames, height };
+    const titleHeight = ref(0);
+    const isBottomMenu = ref(false);
+    const isDefault = ref(false);
+    onMounted(() => {
+      titleHeight.value = document.querySelectorAll(".sidebar .nav--has-title").length * 0.25 * 20;
+      isBottomMenu.value = document.querySelectorAll(".sidebar .sidebar__nav--bottom").length > 0;
+      isDefault.value = document.querySelectorAll(".sidebar .sidebar__nav:not(.sidebar__nav--bottom)").length > 0;
+    });
+    return {
+      classNames,
+      bottomHeight,
+      brandHeight,
+      isBottomMenu,
+      isDefault
+    };
   }
 });
 </script>
@@ -102,6 +137,7 @@ export default defineComponent({
   --p-sidebar-bg: theme(backgroundColor.DEFAULT);
   --p-sidebar-bg-dark: theme(backgroundColor.dark.DEFAULT);
   --p-sidebar-z-index: theme(zIndex.fixed);
+  --p-sidebar-sticky-top: theme(spacing.0);
 
   @apply bg-[color:var(--p-sidebar-bg)] px-2 py-4;
   @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
@@ -130,7 +166,7 @@ export default defineComponent({
     @apply fixed z-[var(--p-sidebar-z-index)] top-0 h-full shadow-lg overflow-y-auto;
 
     .sidebar__menus {
-      @apply relative min-h-full;
+      @apply relative min-h-[calc(100%-v-bind(brandHeight))];
     }
 
     &:not(.sidebar--right) {
@@ -138,8 +174,12 @@ export default defineComponent({
     }
 
     .sidebar__bottom {
-      @apply absolute -bottom-4 pb-4 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
+      @apply absolute -bottom-2 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
       @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
+
+      .sidebar__nav {
+        @apply px-2;
+      }
     }
 
     /**
@@ -177,6 +217,13 @@ export default defineComponent({
     }
   }
 
+  /**
+  * Sticky sidebar
+  */
+  &&--sticky {
+    @apply sticky top-[var(--p-sidebar-sticky-top)] z-sticky;
+  }
+
   /**
   * Narrow sidebar
   * is 60px width

package/dist/components/sidebar/Sidebar.vue.d.ts

@@ -19,6 +19,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     toggleable: {
         type: PropType<ToggleableVariant>;
         default: undefined;
@@ -29,7 +33,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    height: import("vue-demi").Ref<number>;
+    bottomHeight: import("vue-demi").ComputedRef<string | 0>;
+    brandHeight: import("vue-demi").ComputedRef<string | 0>;
+    isBottomMenu: import("vue-demi").Ref<boolean>;
+    isDefault: 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<{
     variant: {
         type: PropType<StyleVariant>;
@@ -47,6 +54,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     toggleable: {
         type: PropType<ToggleableVariant>;
         default: undefined;
@@ -64,5 +75,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     modelValue: boolean;
     align: AlignVariant;
     toggleable: ToggleableVariant;
+    sticky: boolean;
 }, {}>;
 export default _default;

package/dist/components/sidebar/SidebarBrand.vue

@@ -57,9 +57,19 @@ export default defineComponent({
 
     a {
       @apply no-underline;
+
+      & > img {
+        @apply max-w-full h-auto;
+      }
+
+      .sidebar--wide & {
+        & > img {
+          @apply h-7 w-auto;
+        }
+      }
     }
 
-    img {
+    & > img {
       @apply max-w-full h-auto;
     }
 
@@ -78,7 +88,7 @@ export default defineComponent({
     .sidebar--wide & {
       @apply px-3;
 
-      img {
+      & > img {
         @apply h-7 w-auto;
       }
     }

package/dist/components/sidebar/SidebarNav.vue

@@ -80,10 +80,6 @@ export default defineComponent({
         @apply pr-3;
       }
     }
-
-    /* &&--bottom {
-      @apply absolute bottom-0;
-    } */
   }
 
   &&--narrow {

package/dist/components/sidebar-menu/SidebarMenu.vue

@@ -3,6 +3,7 @@
     data-testid="sidebar-menu"
     :type="type"
     :fixed="fixed"
+    :sticky="sticky"
     :toggleable="toggleable"
     :align="align">
     <template #brand>
@@ -59,7 +60,9 @@
         </NavItem>
       </template>
     </SidebarNav>
-    <template #bottom>
+    <template
+      v-if="$slots.bottom"
+      #bottom>
       <slot name="bottom" />
     </template>
   </Sidebar>
@@ -87,6 +90,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    sticky: {
+      type: Boolean,
+      default: false
+    },
     type: {
       type: String,
       default: "wide"

package/dist/components/sidebar-menu/SidebarMenu.vue.d.ts

@@ -12,6 +12,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     type: {
         type: PropType<TypeVariant>;
         default: string;
@@ -33,6 +37,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     type: {
         type: PropType<TypeVariant>;
         default: string;
@@ -50,6 +58,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     type: TypeVariant;
     align: AlignVariant;
     toggleable: ToggleableVariant;
+    sticky: boolean;
     menus: Menu[];
 }, {}>;
 export default _default;

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

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

package/dist/components/signature-text/utils/formatter.d.ts

@@ -1,2 +1,2 @@
-export declare function capitalize(text: string): string;
-export declare function formatName(text: string): string;
+export declare function capitalize(text: string): any;
+export declare function formatName(text: string): any;

package/dist/components/signature-text/utils/formatter.mjs

@@ -1,8 +1,8 @@
 export function capitalize(text) {
-  return String(text).toLowerCase().replace(/^\w|([\s,.])(\w)/gm, (i) => i.toUpperCase());
+  return String(text).toLowerCase().replaceAll(/^\w|([\s,.])(\w)/gm, (i) => i.toUpperCase());
 }
 export function formatName(text) {
   if (!text)
     return "";
-  return capitalize(String(text).trim().replace(/[^\s,.A-Za-z]+/g, ""));
+  return capitalize(String(text).trim().replaceAll(/[^\s,.A-Za-z]+/g, ""));
 }

package/dist/components/toast/Toast.vue

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

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;
-    dismissable: boolean;
     text: string;
+    dismissable: boolean;
     title: string;
     step: number;
     highlight: boolean;

package/dist/module.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -67,7 +67,7 @@
     "@zxing/library": "0.20.0",
     "chart.js": "4.3.0",
     "core-js": "3",
-    "date-fns": "2.29.3",
+    "date-fns": "2.30.0",
     "defu": "6.1.2",
     "fast-equals": "^4.0.3",
     "fuse.js": "6.6.2",
@@ -88,7 +88,7 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/tailwind-preset": "^0.13.1",
+    "@privyid/tailwind-preset": "^0.15.0",
     "postcss-custom-properties": "^12.1.11",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -96,11 +96,11 @@
     "vue-router": ">=4.0.0"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.3.0",
+    "@nuxt/module-builder": "^0.4.0",
     "@nuxt/schema": "3.3.3",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.13.1",
-    "@privyid/tailwind-preset": "^0.13.1",
+    "@privyid/browserslist-config": "^0.15.0",
+    "@privyid/tailwind-preset": "^0.15.0",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^1.2.0",
     "nuxt": "3.3.3",