@privyid/persona 0.22.0 → 0.24.0

package/dist/components/accordion/Accordion.vue

@@ -20,7 +20,10 @@
 import { useVModel } from '@vueuse/core'
 import { type AccordionItem, ACCORDION_CONTEXT } from '.'
 import {
-  PropType, computed, provide, readonly,
+  PropType,
+  computed,
+  provide,
+  readonly,
 } from 'vue-demi'
 import Item from './AccordionItem.vue'
 

package/dist/components/accordion/AccordionItem.vue

@@ -44,7 +44,9 @@
 import { useVModel } from '@vueuse/core'
 import { ACCORDION_CONTEXT, generateId } from '.'
 import {
-  computed, inject, watch,
+  computed,
+  inject,
+  watch,
 } from 'vue-demi'
 
 import Subheading from '../subheading/Subheading.vue'

package/dist/components/banner/Banner.vue

@@ -127,12 +127,12 @@ export default defineComponent({
   }
 
   &__body {
-    @apply flex-grow text-sm;
+    @apply grow text-sm;
   }
 
   &__icon,
   &__close {
-    @apply flex-shrink-0;
+    @apply shrink-0;
   }
 
   &__close {

package/dist/components/calendar/Calendar.vue

@@ -327,14 +327,18 @@ export default defineComponent({
 
 <style lang="postcss">
 .calendar {
-  @apply flex flex-col space-y-2 text-sm shadow-xl border-transparent;
-  @apply dark:border-transparent;
+  @apply flex flex-col space-y-2 text-sm shadow-xl;
+
+  &.card {
+    @apply border-transparent;
+    @apply dark:border-transparent;
+  }
 
   &__nav {
     @apply flex justify-between space-x-2 mb-2;
 
     &-title {
-      @apply flex-grow;
+      @apply grow;
     }
   }
 

package/dist/components/calendar/Calendar.vue.d.ts

@@ -179,14 +179,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:start"?: ((...args: any[]) => any) | undefined;
     "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: Date | [Date, Date];
     start: Date;
-    mode: "date" | "month" | "year";
     end: Date;
     min: Date;
     max: Date;
+    modelValue: Date | [Date, Date];
     disabled: boolean;
     readonly: boolean;
+    mode: "date" | "month" | "year";
     range: boolean;
     minRange: string;
     maxRange: string;

package/dist/components/camera/Camera.vue

@@ -332,7 +332,7 @@ export default defineComponent({
   @apply dark:bg-dark-inverse;
 
   &__video {
-    @apply flex-grow min-h-full max-w-full h-auto object-cover;
+    @apply grow min-h-full max-w-full h-auto object-cover;
   }
 
   &--mirror {
@@ -375,7 +375,7 @@ export default defineComponent({
   }
 
   &__controls {
-    @apply py-3 flex w-full flex-shrink-0 justify-center items-center absolute bottom-0 space-x-3;
+    @apply py-3 flex w-full shrink-0 justify-center items-center absolute bottom-0 space-x-3;
   }
 
   &__toast {

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

@@ -49,7 +49,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     toast: (text: string) => void;
     deviceId: ComputedRef<string | undefined>;
     constraints: ComputedRef<MediaStreamConstraints>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "result" | "start")[], "change" | "update:modelValue" | "result" | "start", 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, ("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[]>;
         default: string;
@@ -81,13 +81,13 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onResult?: ((...args: any[]) => any) | undefined;
     onStart?: ((...args: any[]) => any) | undefined;
+    onResult?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: string | string[] | File | File[];
     facingMode: ConstrainDOMString;
     mask: MaskVariant;
     mirror: boolean | "preview" | "all";
-    modelValue: string | string[] | File | File[];
     modelModifiers: ModelModifier;
     adapter: Adapter;
     silent: boolean;

package/dist/components/card/Card.vue.d.ts

@@ -67,8 +67,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
     dismissable: boolean;
-    title: string;
     disabled: boolean;
+    title: string;
     element: ElementVariant;
     sectioned: boolean;
     callout: boolean;

package/dist/components/card/CardSection.vue.d.ts

@@ -19,7 +19,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    title: string;
     disabled: boolean;
+    title: string;
 }, {}>;
 export default _default;

package/dist/components/carousel/Carousel.vue

@@ -167,7 +167,7 @@ export default defineComponent({
   @apply flex items-center justify-center w-full;
 
   &__progress {
-    @apply flex-shrink-0;
+    @apply shrink-0;
   }
 
   &--horizontal {

package/dist/components/carousel/Carousel.vue.d.ts

@@ -17,11 +17,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     width: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
     height: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
     loop: {
@@ -33,7 +33,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     autoplayInterval: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     splideOptions: {
@@ -66,11 +66,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     width: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
     height: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
     loop: {
@@ -82,7 +82,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     autoplayInterval: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     splideOptions: {

package/dist/components/chart/ChartSet.vue.d.ts

@@ -1,11 +1,11 @@
 declare const _default: import("vue-demi").DefineComponent<{
     name: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
 }, 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<{
     name: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
 }>>, {}, {}>;

package/dist/components/chart/ChartVal.vue.d.ts

@@ -1,10 +1,10 @@
 declare const _default: import("vue-demi").DefineComponent<{
     name: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     value: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     color: {
@@ -13,11 +13,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, 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<{
     name: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     value: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     color: {

package/dist/components/checkbox/Checkbox.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts" setup>
 import { useVModel } from '.'
-import { computed } from 'vue-demi'
+import { PropType, computed } from 'vue-demi'
 import IconCheckbox from './icon/IconCheckbox.vue'
 import IconInderteminate from './icon/IconInderteminate.vue'
 
@@ -40,36 +40,15 @@ const props = defineProps({
     default: undefined,
   },
   modelValue: {
-    type: [
-      String,
-      Number,
-      Boolean,
-      Array,
-      Object,
-      Date,
-    ],
+    type   : undefined as PropType<any>,
     default: false,
   },
   value: {
-    type: [
-      String,
-      Number,
-      Boolean,
-      Array,
-      Object,
-      Date,
-    ],
+    type   : undefined as PropType<any>,
     default: true,
   },
   uncheckedValue: {
-    type: [
-      String,
-      Number,
-      Boolean,
-      Array,
-      Object,
-      Date,
-    ],
+    type   : undefined as PropType<any>,
     default: false,
   },
   checked: {
@@ -138,7 +117,7 @@ function toggle () {
   * with custom icon
   */
   &__icon {
-    @apply w-5 h-5 inline-flex flex-shrink-0 border rounded-tn border-subtle items-center justify-center bg-default;
+    @apply w-5 h-5 inline-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/contextual-bar/ContextualBar.vue

@@ -256,7 +256,7 @@ export default defineComponent({
     }
 
     .contextual-bar__content {
-      @apply flex-grow-0;
+      @apply grow-0;
     }
   }
 
@@ -265,7 +265,7 @@ export default defineComponent({
   * content
   */
   &__content {
-    @apply flex-grow;
+    @apply grow;
 
     &__message {
       .caption {
@@ -280,11 +280,11 @@ export default defineComponent({
   }
 
   &__action {
-    @apply flex flex-shrink-0 ml-auto space-gap-3;
+    @apply flex shrink-0 ml-auto space-gap-3;
   }
 
   &__icon {
-    @apply relative mr-4 flex-shrink;
+    @apply relative mr-4 shrink;
 
     img {
       @apply max-w-[20px] w-auto;

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<{
     state: {
         type: PropType<StyleVariant>;
         default: string;
@@ -67,13 +67,13 @@ 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;
 }, {
     dismissable: boolean;
-    title: string;
     modelValue: boolean;
+    title: string;
     message: string;
     align: AlignVariant;
     state: StyleVariant;

package/dist/components/cropper/Cropper.vue

@@ -87,7 +87,7 @@
 
       <p-button
         data-testid="cropper-reset"
-        class="flex-shrink-0"
+        class="cropper__control__reset"
         size="xs"
         variant="link"
         @click="reset()">
@@ -389,12 +389,16 @@ export default defineComponent({
     @apply p-2 space-x-2 flex justify-between max-w-full overflow-hidden;
 
     &-bar {
-      @apply flex flex-grow max-w-md space-x-2;
+      @apply flex grow max-w-md space-x-2;
+    }
+
+    &__reset {
+      @apply shrink-0;
     }
   }
 
   &__slider {
-    @apply flex-grow w-full;
+    @apply grow w-full;
   }
 
   &--rounded {

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

@@ -24,19 +24,19 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
     width: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: undefined;
     };
     height: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: undefined;
     };
     imgWidth: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     imgHeight: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     imgClass: {
@@ -96,19 +96,19 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
     width: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: undefined;
     };
     height: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: undefined;
     };
     imgWidth: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     imgHeight: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     imgClass: {

package/dist/components/datepicker/Datepicker.vue.d.ts

@@ -137,14 +137,14 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     error: boolean;
     size: SizeVariant;
-    modelValue: Date | [Date, Date];
     start: Date;
-    mode: "date" | "month" | "year";
     end: Date;
     min: Date;
     max: Date;
+    modelValue: Date | [Date, Date];
     disabled: boolean;
     readonly: boolean;
+    mode: "date" | "month" | "year";
     range: boolean;
     minRange: string;
     maxRange: string;

package/dist/components/dialog/Dialog.vue

@@ -3,13 +3,22 @@
     v-if="context"
     :key="id"
     v-model="modal"
+    class="dialog"
     :title="context.title"
     :size="context.size"
     :centered="context.centered"
     :dismissable="context.dismissable"
     :no-close-on-backdrop="context.noCloseOnBackdrop"
-    :text="context.text"
     @close="onCancel">
+    <template #header>
+      <Heading
+        v-p-md.inline="context.title"
+        class="modal__title"
+        element="h6" />
+    </template>
+    <template #default>
+      <span v-p-md.inline="context.text" />
+    </template>
     <template #footer>
       <dialog-footer
         :align="context.footerAlign"
@@ -36,9 +45,16 @@ import {
   ref
 } from "vue-demi";
 import Modal from "../modal/Modal.vue";
+import Heading from "../heading/Heading.vue";
 import DialogFooter from "./DialogFooter.vue";
+import { pMd } from "../markdown";
 export default defineComponent({
-  components: { Modal, DialogFooter },
+  components: {
+    Modal,
+    DialogFooter,
+    Heading
+  },
+  directives: { pMd },
   setup() {
     const id = ref();
     const modal = ref(false);
@@ -77,3 +93,9 @@ export default defineComponent({
   }
 });
 </script>
+
+<style lang="postcss">
+.dialog {
+  --p-modal-z-index: theme(zIndex.dialog);
+}
+</style>

package/dist/components/dialog/DialogFooter.vue

@@ -101,13 +101,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .footer {
-  @apply flex items-center;
-
-  .btn {
-    + .btn {
-      @apply ml-6;
-    }
-  }
+  @apply flex items-center space-x-3;
 
   &--align {
     &-left,

package/dist/components/dot/Dot.vue

@@ -60,8 +60,11 @@ export default defineComponent({
   * warning & danger
   */
   &&--default {
-    @apply bg-inverse;
-    @apply dark:bg-dark-inverse;
+    --p-dot-bg-default: theme(backgroundColor.inverse);
+    --p-dot-bg-dark-default: theme(backgroundColor.dark.inverse);
+
+    @apply bg-[color:var(--p-dot-bg-default)];
+    @apply dark:bg-[color:var(--p-dot-bg-dark-default)];
   }
 
   &&--primary {

package/dist/components/dropdown/Dropdown.vue

@@ -370,7 +370,7 @@ defineExpose({
     }
 
     &__body {
-      @apply max-h-[var(--p-dropdown-max-height)] overflow-x-hidden overflow-y-auto flex-grow;
+      @apply max-h-[var(--p-dropdown-max-height)] overflow-x-hidden overflow-y-auto grow;
     }
 
     &:not(&--has-prepend) &__container {

package/dist/components/dropdown/DropdownItem.vue

@@ -70,8 +70,8 @@ export default defineComponent({
 
 <style lang="postcss">
 .dropdown__item {
-  @apply px-4 py-2 block cursor-pointer text-default w-full select-none text-left;
-  @apply dark:text-dark-default;
+  @apply px-4 py-2 block cursor-pointer text-subtle w-full select-none text-left;
+  @apply dark:text-dark-subtle;
 
   &:is(a) {
     @apply no-underline hover:no-underline hover:text-default;
@@ -80,18 +80,18 @@ export default defineComponent({
 
   &:hover,
   &:focus-visible {
-    @apply bg-default-alpha;
-    @apply dark:bg-dark-default-alpha;
+    @apply bg-default-alpha text-default;
+    @apply dark:bg-dark-default-alpha dark:text-dark-default;
   }
 
   &&--active {
-    @apply bg-default-alpha;
-    @apply dark:bg-dark-default-alpha cursor-default;
+    @apply bg-default-alpha text-default;
+    @apply dark:bg-dark-default-alpha cursor-default dark:text-dark-default;
   }
 
   &:disabled {
-    @apply bg-subtle border-subtle pointer-events-none text-muted;
-    @apply dark:bg-dark-subtle dark:border-dark-subtle  dark:text-dark-muted;
+    @apply bg-default/50 border-subtle pointer-events-none text-subtlest;
+    @apply dark:bg-dark-default/50 dark:border-dark-subtle  dark:text-dark-subtlest;
   }
 }
 </style>

package/dist/components/dropdown-subitem/DropdownSubitem.vue

@@ -152,17 +152,17 @@ export default defineComponent({
     @apply flex items-center space-x-1;
 
     &--back {
-      @apply flex-shrink-0;
+      @apply shrink-0;
     }
   }
 
   &__content {
-    @apply flex-grow;
+    @apply grow;
   }
 
   &__next,
   &__back {
-    @apply flex-shrink-0;
+    @apply shrink-0;
   }
 }
 </style>

package/dist/components/dropdown-subitem/DropdownSubitem.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     back: () => void;
     reset: () => void;
     canBack: import("vue-demi").ComputedRef<boolean>;
-    transition: import("vue-demi").Ref<"none" | "slide-left" | "slide-right">;
+    transition: import("vue-demi").Ref<"slide-left" | "slide-right" | "none">;
     handleOnClick: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "click"[], "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     text: {

package/dist/components/dropzone/Dropzone.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     maxlength: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: undefined;
     };
     accept: {
@@ -57,7 +57,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     maxlength: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: undefined;
     };
     accept: {
@@ -77,14 +77,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onCancel?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string | string[] | File | File[];
-    modelModifiers: ModelModifier;
     disabled: boolean;
     readonly: boolean;
+    modelModifiers: ModelModifier;
     multiple: boolean | MultipleType;
     maxlength: string | number;
     accept: string;

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

@@ -58,10 +58,10 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: Date;
-    mode: "date" | "month" | "year";
     min: Date;
     max: Date;
+    modelValue: Date;
+    mode: "date" | "month" | "year";
     format: string;
 }, {}>;
 export default _default;