@privyid/persona 0.18.0 → 0.20.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 | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
 }, {
@@ -51,7 +51,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
 }>> & {

package/dist/components/avatar/utils/create-image.mjs

@@ -4,7 +4,7 @@ export function createText(text, size, bgColor, textColor) {
   return `data:image/svg+xml,<svg height="${size}" width="${size}" xmlns="http://www.w3.org/2000/svg"><rect fill="${encodeURIComponent(bgColor)}" x="0" y="0" height="${size}" width="${size}"></rect><text fill="${encodeURIComponent(textColor)}" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="sans-serif" font-weight="600">${encodeURIComponent(text)}</text></svg>`;
 }
 export function createSpinner(width = 50, height = width) {
-  return `data:image/svg+xml,<svg v-once data-testid="spinner" class="spinner spinner-basic" width="${width}" height="${height}" viewBox="0 0 19 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><rect class="spinner-basic__bar" x="8.125" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="15.1202" y="1.86199" width="2.5" height="6.25" rx="1.25" transform="rotate(45 15.1202 1.86199)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.125s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="18.75" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 18.75 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.250s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="16.888" y="15.1202" width="2.5" height="6.25" rx="1.25" transform="rotate(135 16.888 15.1202)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.375s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.125" y="12.5" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.500s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.2814" y="10.7008" width="2.5" height="6.25" rx="1.25" transform="rotate(45 6.2814 10.7008)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.625s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.25" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 6.25 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.750s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.04917" y="6.2814" width="2.5" height="6.25" rx="1.25" transform="rotate(135 8.04917 6.2814)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.875s" repeatCount="indefinite" /></rect></svg>`;
+  return `data:image/svg+xml,<svg class="spinner spinner-basic" width="${width}" height="${height}" viewBox="0 0 19 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g transform="translate(4.75 4.75) scale(.5)"><rect class="spinner-basic__bar" x="8.125" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="15.1202" y="1.86199" width="2.5" height="6.25" rx="1.25" transform="rotate(45 15.1202 1.86199)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.125s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="18.75" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 18.75 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.250s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="16.888" y="15.1202" width="2.5" height="6.25" rx="1.25" transform="rotate(135 16.888 15.1202)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.375s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.125" y="12.5" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.500s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.2814" y="10.7008" width="2.5" height="6.25" rx="1.25" transform="rotate(45 6.2814 10.7008)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.625s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.25" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 6.25 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.750s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.04917" y="6.2814" width="2.5" height="6.25" rx="1.25" transform="rotate(135 8.04917 6.2814)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.875s" repeatCount="indefinite" /></rect></g></svg>`;
 }
 export function getAlias(name) {
   return name.split(" ").slice(0, 2).map((c) => c.at(0)).join("").toUpperCase();

package/dist/components/breadcrumbs/Breadcrumb.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue-demi";
+import { defineComponent, provide } from "vue-demi";
 import BreadcrumbItem from "./BreadcrumbItem.vue";
 import BreadcrumbItemDropdown from "./BreadcrumbItemDropdown.vue";
 import DropdownItem from "../dropdown/DropdownItem.vue";
@@ -49,6 +49,10 @@ export default defineComponent({
       default: () => {
       }
     }
+  },
+  setup(_, { slots }) {
+    if (slots.divider)
+      provide("divider", slots.divider);
   }
 });
 </script>

package/dist/components/breadcrumbs/Breadcrumb.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         };
         default: () => void;
     };
-}, 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<{
+}, void, 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<{
     items: {
         type: {
             (arrayLength: number): BreadcrumbItems[];

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -5,21 +5,28 @@
     :class="classNames">
     <component
       :is="tagName"
-      :href="permalink">
+      :href="permalink"
+      :class="{ 'breadcrumbs__item__link' : permalink }">
       <slot />
     </component>
-    <IconChevron
+    <div
       v-if="!active"
-      data-testid="breadcrumbs-icon"
-      class="breadcrumbs__item__icon" />
+      data-testid="breadcrumbs-divider"
+      class="breadcrumbs__item__divider">
+      <component :is="divider" />
+    </div>
   </li>
 </template>
 
 <script>
-import { defineComponent, computed } from "vue-demi";
+import {
+  defineComponent,
+  computed,
+  inject,
+  h
+} from "vue-demi";
 import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 export default defineComponent({
-  components: { IconChevron },
   props: {
     href: {
       type: String,
@@ -48,10 +55,12 @@ export default defineComponent({
         return;
       return props.href;
     });
+    const divider = inject("divider", () => h(IconChevron));
     return {
       classNames,
       tagName,
-      permalink
+      permalink,
+      divider
     };
   }
 });
@@ -63,18 +72,18 @@ export default defineComponent({
     @apply inline-flex text-sm items-center capitalize;
 
     &:last-child {
-      & > .breadcrumbs__item__icon {
+      & > .breadcrumbs__item__divider {
         @apply hidden;
       }
     }
 
     &:not(:last-child) {
-      & > .breadcrumbs__item__icon {
+      & > .breadcrumbs__item__divider {
         @apply inline-flex ml-3;
       }
     }
 
-    & > a {
+    & > .breadcrumbs__item__link {
       @apply text-subtle cursor-pointer underline decoration-solid hover:no-underline;
       @apply dark:text-dark-subtle;
     }

package/dist/components/breadcrumbs/BreadcrumbItem.vue.d.ts

@@ -12,6 +12,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     classNames: import("vue-demi").ComputedRef<string[]>;
     tagName: import("vue-demi").ComputedRef<TagVariant>;
     permalink: import("vue-demi").ComputedRef<string | undefined>;
+    divider: () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
+        [key: string]: any;
+    }>;
 }, 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<{
     href: {
         type: StringConstructor;

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -9,19 +9,26 @@
       size="xs">
       <slot />
     </Dropdown>
-    <IconChevron
+    <div
       v-if="!active"
-      data-testid="breadcrumbs-icon"
-      class="breadcrumbs__item__icon" />
+      data-testid="breadcrumbs-divider"
+      class="breadcrumbs__item__divider">
+      <component :is="divider" />
+    </div>
   </li>
 </template>
 
 <script>
-import { defineComponent, computed } from "vue-demi";
+import {
+  defineComponent,
+  computed,
+  inject,
+  h
+} from "vue-demi";
 import Dropdown from "../dropdown/Dropdown.vue";
 import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 export default defineComponent({
-  components: { Dropdown, IconChevron },
+  components: { Dropdown },
   props: {
     text: {
       type: String,
@@ -39,7 +46,8 @@ export default defineComponent({
         result.push("breadcrumbs__item--active");
       return result;
     });
-    return { classNames };
+    const divider = inject("divider", () => h(IconChevron));
+    return { classNames, divider };
   }
 });
 </script>

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue.d.ts

@@ -9,6 +9,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
+    divider: () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
+        [key: string]: any;
+    }>;
 }, 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<{
     text: {
         type: StringConstructor;

package/dist/components/button/Button.vue

@@ -1,9 +1,8 @@
 <template>
   <component
     :is="tagName"
-    :href="tagName === 'a' ? href : undefined"
-    :to="tagName === 'a' ? undefined : href"
-    :type="tagName === 'a' ? undefined : type"
+    :href="href"
+    :type="type"
     data-testid="btn"
     :class="classNames">
     <slot />
@@ -14,8 +13,7 @@
 import {
   computed,
   defineComponent,
-  inject,
-  resolveComponent
+  inject
 } from "vue-demi";
 import { BUTTONGROUP_SETTING } from "../button-group";
 import { INPUTGROUP_SETTING } from "../input-group";
@@ -72,12 +70,7 @@ export default defineComponent({
       return result;
     });
     const tagName = computed(() => {
-      if (props.href) {
-        if (typeof props.href === "string" && (props.href.startsWith("http") || props.href.startsWith("#")))
-          return "a";
-        return resolveComponent("router-link");
-      }
-      return "button";
+      return props.href ? "nuxt-link" : "button";
     });
     return { classNames, tagName };
   }

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

@@ -1,7 +1,7 @@
-import { PropType, type DefineComponent } from 'vue-demi';
+import { PropType } from 'vue-demi';
 import type { RouteLocationRaw } from 'vue-router';
-import { ColorVariant, SizeVariant, StyleVariant, TagVariant, TypeVariant } from '.';
-declare const _default: DefineComponent<{
+import { ColorVariant, SizeVariant, StyleVariant, TypeVariant } from '.';
+declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
         default: string;
@@ -32,7 +32,7 @@ declare const _default: DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    tagName: import("vue-demi").ComputedRef<TagVariant | DefineComponent>;
+    tagName: import("vue-demi").ComputedRef<"button" | "nuxt-link">;
 }, 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<{
     variant: {
         type: PropType<StyleVariant>;
@@ -64,11 +64,11 @@ declare const _default: DefineComponent<{
     };
 }>>, {
     variant: StyleVariant;
-    size: SizeVariant;
     type: TypeVariant;
     icon: boolean;
-    color: ColorVariant;
-    pill: boolean;
+    size: SizeVariant;
     href: RouteLocationRaw;
+    pill: boolean;
+    color: ColorVariant;
 }, {}>;
 export default _default;

package/dist/components/caption/Caption.vue

@@ -44,8 +44,12 @@ export default defineComponent({
 
 <style lang="postcss">
 .caption {
-  @apply block text-muted text-xs tracking-wide;
-  @apply dark:text-dark-muted;
+  @apply block text-xs tracking-wide;
+
+  &:not([class^='text-'], [class*='text-']) {
+    @apply text-muted;
+    @apply dark:text-dark-muted;
+  }
 
   /**
   * Caption in tiny size
@@ -57,10 +61,26 @@ export default defineComponent({
   /**
   * Weight of caption
   */
+  &--thin {
+    @apply font-thin;
+  }
+
+  &--extralight {
+    @apply font-extralight;
+  }
+
+  &--light {
+    @apply font-light;
+  }
+
   &--normal {
     @apply font-normal;
   }
 
+  &--semibold {
+    @apply font-semibold;
+  }
+
   &--medium {
     @apply font-medium;
   }
@@ -69,6 +89,14 @@ export default defineComponent({
     @apply font-bold;
   }
 
+  &--extrabold {
+    @apply font-extrabold;
+  }
+
+  &--black {
+    @apply font-black;
+  }
+
   /**
   * Text transform
   * of caption

package/dist/components/card/Card.vue

@@ -139,9 +139,17 @@ export default defineComponent({
   --p-card-color: theme(textColor.default);
   --p-card-color-dark: theme(textColor.dark.default);
 
-  @apply border bg-[color:var(--p-card-bg)] border-[color:var(--p-card-border)] text-[color:var(--p-card-color)] rounded;
+  @apply border bg-[color:var(--p-card-bg)] border-[color:var(--p-card-border)] text-[color:var(--p-card-color)] rounded-md;
   @apply dark:bg-[color:var(--p-card-bg-dark)] dark:border-[color:var(--p-card-border-dark)] dark:text-[color:var(--p-card-color-dark)];
 
+  /**
+  * Card inside card
+  * has 8px rounded
+  */
+  .card {
+    @apply rounded;
+  }
+
   /*
   * Card Body & Card Header
   * by default have 24px (1.5rem) padding

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

package/dist/components/collapse/Collapse.vue

@@ -1,15 +1,11 @@
 <template>
-  <transition
-    name="collapse"
-    mode="out-in">
-    <div
-      v-show="model || isToggleable"
-      data-testid="collapse"
-      class="collapse"
-      :class="classNames">
-      <slot />
-    </div>
-  </transition>
+  <v-collapse
+    data-testid="collapse"
+    class="collapses"
+    :class="classNames"
+    :when="model || isToggleable">
+    <slot />
+  </v-collapse>
 </template>
 
 <script>
@@ -21,7 +17,9 @@ import {
 import { useVModel } from "../input";
 import { NAVBAR_SETTINGS } from "../navbar";
 import { useMediaQuery } from "@vueuse/core";
+import { Collapse } from "vue-collapsed";
 export default defineComponent({
+  components: { vCollapse: Collapse },
   props: {
     modelValue: {
       type: Boolean,
@@ -56,6 +54,8 @@ export default defineComponent({
       const result = [""];
       if (model.value)
         result.push("collapse--show");
+      else
+        result.push("collapse--hide");
       if (props.isNav)
         result.push("navbar--collapse");
       return result;
@@ -70,25 +70,7 @@ export default defineComponent({
 </script>
 
 <style lang="postcss">
-.collapse {
-  &&--show {
-    @apply block visible text-default;
-    @apply dark:text-dark-default;
-  }
-
-  &:not(&--show) {
-    @apply hidden;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    @apply transition-[transform,opacity] origin-top duration-150 ease-in-out;
-  }
-
-  &-enter,
-  &-enter-from,
-  &-leave-to {
-    @apply scale-y-0 opacity-0;
-  }
+.collapses {
+  @apply transition-[height] duration-300 ease-out block;
 }
 </style>

package/dist/components/contextual-bar/ContextualBar.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     close: (event: Event) => void;
     onEnter: (target: HTMLDivElement) => void;
     onLeave: (target: HTMLDivElement) => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("close" | "show" | "update:modelValue" | "hide")[], "close" | "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("show" | "close" | "update:modelValue" | "hide")[], "show" | "close" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<StyleVariant>;
         default: string;
@@ -67,8 +67,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;

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

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

package/dist/components/dropdown/Dropdown.vue

@@ -284,6 +284,7 @@ export default defineComponent({
 <style lang="postcss">
 .dropdown {
   --p-dropdown-z-index: theme(zIndex.dropdown);
+  --p-dropdown-size-xl: 36rem; /* 576px */
   --p-dropdown-size-lg: 30rem; /* 480px */
   --p-dropdown-size-md: 20rem; /* 320px */
   --p-dropdown-size-sm: 15rem; /* 240px */
@@ -309,6 +310,10 @@ export default defineComponent({
       }
     }
 
+    &--xl {
+      @apply w-[var(--p-dropdown-size-xl)];
+    }
+
     &--lg {
       @apply w-[var(--p-dropdown-size-lg)];
     }

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

@@ -48,11 +48,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     menuClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
     buttonClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
     menuSize: {
@@ -113,11 +113,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     menuClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
     buttonClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
     menuSize: {
@@ -130,16 +130,16 @@ declare const _default: import("vue-demi").DefineComponent<{
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
-    size: SizeVariant;
     icon: boolean;
-    color: ColorVariant;
-    pill: boolean;
+    size: SizeVariant;
+    divider: boolean;
     text: string;
+    pill: boolean;
+    color: ColorVariant;
     modelValue: boolean;
     disabled: boolean;
     placement: Placement;
     noCaret: boolean;
-    divider: boolean;
     menuClass: string | Record<string, any> | unknown[];
     buttonClass: string | Record<string, any> | unknown[];
     menuSize: MenuSizeVariant;

package/dist/components/dropdown/DropdownItem.vue

@@ -74,7 +74,7 @@ export default defineComponent({
   @apply dark:text-dark-default;
 
   &:is(a) {
-    @apply hover:text-default;
+    @apply no-underline hover:no-underline hover:text-default;
     @apply hover:dark:text-dark-default;
   }
 

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

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

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