@privyid/persona 0.23.0 → 0.25.0

package/dist/components/accordion/Accordion.vue

@@ -19,8 +19,8 @@
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import { type AccordionItem, ACCORDION_CONTEXT } from '.'
+import type { PropType } from 'vue-demi'
 import {
-  PropType,
   computed,
   provide,
   readonly,

package/dist/components/aspect-ratio/index.d.ts

@@ -1,3 +1,3 @@
-import { Directive } from 'vue-demi';
+import type { Directive } from 'vue-demi';
 export declare const pAspectRatio: Directive<HTMLElement, number>;
 export declare const vPAspectRatio: import("vue-demi").ObjectDirective<HTMLElement, number>;

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

@@ -1,5 +1,5 @@
-import { PropType } from 'vue-demi';
-import { TypeVariant, SizeVariant } from '.';
+import type { PropType } from 'vue-demi';
+import type { TypeVariant, SizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<TypeVariant>;
@@ -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/badge/Badge.vue.d.ts

@@ -1,6 +1,6 @@
-import { PropType } from 'vue-demi';
-import { StyleVariant } from '.';
-import { ColorVariant } from '../button';
+import type { PropType } from 'vue-demi';
+import type { StyleVariant } from '.';
+import type { ColorVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     color: {
         type: PropType<ColorVariant>;
@@ -22,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>>, {
-    variant: StyleVariant;
     color: ColorVariant;
+    variant: StyleVariant;
 }, {}>;
 export default _default;

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/banner/Banner.vue.d.ts

@@ -1,5 +1,5 @@
-import { PropType } from 'vue-demi';
-import { StyleVariant } from '.';
+import type { PropType } from 'vue-demi';
+import type { StyleVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;

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

@@ -1,4 +1,4 @@
-import { BreadcrumbItems } from '.';
+import type { BreadcrumbItems } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     items: {
         type: {

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

@@ -1,4 +1,4 @@
-import { TagVariant } from '.';
+import type { TagVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     href: {
         type: StringConstructor;

package/dist/components/button/Button.vue

@@ -6,19 +6,26 @@
     data-testid="btn"
     :class="classNames"
     :disabled="loading || disabled">
-    <spinner v-if="loading" />
+    <slot
+      v-if="loading"
+      name="loading">
+      <spinner />
+    </slot>
     <slot v-else />
   </component>
 </template>
 
 <script lang="ts" setup>
+import type {
+  PropType,
+  VNode,
+} from 'vue-demi'
 import {
   computed,
-  PropType,
   inject,
 } from 'vue-demi'
 import type { RouteLocationRaw } from 'vue-router'
-import {
+import type {
   ColorVariant,
   SizeVariant,
   StyleVariant,
@@ -106,6 +113,11 @@ const tagName = computed(() => {
     ? 'nuxt-link'
     : 'button'
 })
+
+defineSlots<{
+  loading(): VNode[],
+  default(): VNode[],
+}>()
 </script>
 
 <style lang="postcss">

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue-demi';
+import type { PropType } from 'vue-demi';
 import type { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     size: {

package/dist/components/button-group/index.d.ts

@@ -1,5 +1,5 @@
-import { InjectionKey, Ref } from 'vue-demi';
-import { SizeVariant } from '../button';
+import type { InjectionKey, Ref } from 'vue-demi';
+import type { SizeVariant } from '../button';
 export interface ButtonGroupSetting {
     size?: Ref<SizeVariant>;
 }

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

@@ -1,5 +1,5 @@
-import { PropType } from 'vue-demi';
-import { CalendarItem } from './adapter/adapter';
+import type { PropType } from 'vue-demi';
+import type { CalendarItem } from './adapter/adapter';
 type TransitionMode = 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {

package/dist/components/calendar/adapter/adapter.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue-demi';
+import type { Ref } from 'vue-demi';
 import { type Duration } from 'date-fns';
 export interface CalendarItem {
     value: Date;

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

@@ -1,5 +1,5 @@
-import { ComputedRef, PropType } from 'vue-demi';
-import { Adapter, MaskVariant, ModelModifier } from './adapter/adapter';
+import type { ComputedRef, PropType } from 'vue-demi';
+import type { Adapter, MaskVariant, ModelModifier } from './adapter/adapter';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<string | string[] | File | File[]>;

package/dist/components/camera/adapter/adapter.d.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref } from 'vue-demi';
+import type { ComputedRef, Ref } from 'vue-demi';
 export type MaskVariant = 'square' | 'round' | 'card' | 'none';
 export type MirrorMode = boolean | 'preview' | 'all';
 export interface ModelModifier {

package/dist/components/camera/utils/motion.mjs

@@ -77,10 +77,10 @@ export function motionDetection(imageData, template) {
   }
   const distX = bestHitX - template.xPos;
   const distY = bestHitY - template.yPos;
-  const movementDiff = Math.sqrt(distX * distX + distY * distY);
+  const movementDiff = Math.hypot(distX, distY);
   const maxDistX = searchWidth - template.width / 2;
   const maxDistY = searchHeight - template.height / 2;
-  const maximumMovement = Math.sqrt(maxDistX * maxDistX + maxDistY * maxDistY);
+  const maximumMovement = Math.hypot(maxDistX, maxDistY);
   let movementPercentage = movementDiff / maximumMovement * 100;
   if (movementPercentage > 100)
     movementPercentage = 100;

package/dist/components/caption/Caption.vue.d.ts

@@ -1,6 +1,6 @@
-import { PropType } from 'vue-demi';
-import { WeightVariant, TransformVariant } from '../heading';
-import { SizeVariant } from '.';
+import type { PropType } from 'vue-demi';
+import type { WeightVariant, TransformVariant } from '../heading';
+import type { SizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     weight: {
         type: PropType<WeightVariant>;

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

@@ -1,5 +1,5 @@
-import { PropType } from 'vue-demi';
-import { ElementVariant } from '.';
+import type { PropType } from 'vue-demi';
+import type { ElementVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     element: {
         type: PropType<ElementVariant>;

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

@@ -1,7 +1,7 @@
-import { PropType } from 'vue-demi';
-import { DirectionVariant } from '../steps';
+import type { PropType } from 'vue-demi';
+import type { DirectionVariant } from '../steps';
 import '@splidejs/splide/css/core';
-import { AlignmentVariant } from '.';
+import type { AlignmentVariant } from '.';
 import type { Options } from '@splidejs/splide';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
@@ -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/carousel/index.d.ts

@@ -1,4 +1,4 @@
 import type { Splide } from '@splidejs/splide';
-import { InjectionKey, Ref } from 'vue-demi';
+import type { InjectionKey, Ref } from 'vue-demi';
 export type AlignmentVariant = 'start' | 'end';
 export declare const CAROUSEL_INSTANCE: InjectionKey<Ref<Splide>>;

package/dist/components/chart/Chart.vue

@@ -55,6 +55,25 @@ export default defineComponent({
     const data = computed(() => {
       return getAdapter(variant.value).getDatasets(slots.default());
     });
+    const options = computed(() => {
+      return {
+        plugins: {
+          legend: {
+            display: legend.value !== "none",
+            position: legend.value === "none" ? void 0 : legend.value,
+            labels: {
+              color: "#9CA3AF",
+              font: {
+                family: "DM Sans",
+                size: 12,
+                weight: "600"
+              }
+            }
+          }
+        },
+        ...getAdapter(variant.value).getStyle()
+      };
+    });
     async function initChart() {
       if (instance.value)
         instance.value.destroy();
@@ -62,23 +81,7 @@ export default defineComponent({
         canvas.value,
         variant.value,
         data.value,
-        {
-          plugins: {
-            legend: {
-              display: legend.value !== "none",
-              position: legend.value === "none" ? void 0 : legend.value,
-              labels: {
-                color: "#9CA3AF",
-                font: {
-                  family: "DM Sans",
-                  size: 12,
-                  weight: "600"
-                }
-              }
-            }
-          },
-          ...getAdapter(variant.value).getStyle()
-        }
+        options.value
       );
     }
     const dataWatcher = watchPausable(data, (newData) => {

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

@@ -1,6 +1,6 @@
-import { PropType } from 'vue-demi';
-import { ChartType } from './adapter/index';
-import { LegendPosition } from '.';
+import type { PropType } from 'vue-demi';
+import type { ChartType } from './adapter/index';
+import type { LegendPosition } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<ChartType>;

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/chart/adapter/adapter.d.ts

@@ -1,5 +1,5 @@
 import type { ChartData, ChartOptions } from 'chart.js/auto';
-import { VNode } from 'vue-demi';
+import type { VNode } from 'vue-demi';
 export interface ChartAdapter {
     getStyle: () => ChartOptions;
     getDatasets: (vnodes: VNode[]) => ChartData;

package/dist/components/chart/adapter/index.d.ts

@@ -1,3 +1,3 @@
-import { ChartAdapter } from './adapter';
+import type { ChartAdapter } from './adapter';
 export type ChartType = 'line' | 'bar' | 'pie';
 export default function getAdapter(type: ChartType): ChartAdapter;

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

@@ -1,2 +1,2 @@
-import { LayoutPosition } from 'chart.js';
+import type { LayoutPosition } from 'chart.js';
 export type LegendPosition = 'none' | LayoutPosition;

package/dist/components/checkbox/Checkbox.vue

@@ -23,6 +23,7 @@
 
 <script lang="ts" setup>
 import { useVModel } from '.'
+import type { PropType } from 'vue-demi'
 import { computed } from 'vue-demi'
 import IconCheckbox from './icon/IconCheckbox.vue'
 import IconInderteminate from './icon/IconInderteminate.vue'
@@ -40,36 +41,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 +118,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-4 h-4 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/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import { InputProps } from '../input';
+import type { InputProps } from '../input';
 export interface CheckboxProps extends InputProps<unknown> {
     checked: boolean;
     value: unknown;

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

@@ -1,6 +1,6 @@
-import { PropType } from 'vue-demi';
-import { AlignVariant } from '../nav';
-import { StyleVariant } from '.';
+import type { PropType } from 'vue-demi';
+import type { AlignVariant } from '../nav';
+import type { StyleVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     state: {
         type: PropType<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 {