@privyid/persona 0.17.1 → 0.18.0

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 class="lds-spinner" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(30 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(60 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(90 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(120 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(150 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(180 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(210 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(240 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(270 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(300 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(330 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"/></rect></svg>`;
+  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>`;
 }
 export function getAlias(name) {
   return name.split(" ").slice(0, 2).map((c) => c.at(0)).join("").toUpperCase();

package/dist/components/banner/Banner.vue

@@ -27,9 +27,9 @@
 </template>
 
 <script>
-import IconInfo from "@carbon/icons-vue/lib/information--filled/20";
-import IconDanger from "@carbon/icons-vue/lib/warning--filled/20";
-import IconClose from "@carbon/icons-vue/lib/close/16";
+import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
+import IconDanger from "@privyid/persona-icon/vue/exclamation-circle-solid/20.vue";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 import {
   defineComponent,
   ref,

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -17,7 +17,7 @@
 
 <script>
 import { defineComponent, computed } from "vue-demi";
-import IconChevron from "@carbon/icons-vue/lib/chevron--right/16";
+import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 export default defineComponent({
   components: { IconChevron },
   props: {

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -19,7 +19,7 @@
 <script>
 import { defineComponent, computed } from "vue-demi";
 import Dropdown from "../dropdown/Dropdown.vue";
-import IconChevron from "@carbon/icons-vue/lib/chevron--right/16";
+import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 export default defineComponent({
   components: { Dropdown, IconChevron },
   props: {

package/dist/components/button/Button.vue

@@ -1,7 +1,9 @@
 <template>
   <component
     :is="tagName"
-    :href="href"
+    :href="tagName === 'a' ? href : undefined"
+    :to="tagName === 'a' ? undefined : href"
+    :type="tagName === 'a' ? undefined : type"
     data-testid="btn"
     :class="classNames">
     <slot />
@@ -12,7 +14,8 @@
 import {
   computed,
   defineComponent,
-  inject
+  inject,
+  resolveComponent
 } from "vue-demi";
 import { BUTTONGROUP_SETTING } from "../button-group";
 import { INPUTGROUP_SETTING } from "../input-group";
@@ -39,8 +42,12 @@ export default defineComponent({
       default: false
     },
     href: {
-      type: String,
+      type: [String, Object],
       default: void 0
+    },
+    type: {
+      type: String,
+      default: "button"
     }
   },
   setup(props) {
@@ -65,10 +72,12 @@ export default defineComponent({
       return result;
     });
     const tagName = computed(() => {
-      let tag = "button";
-      if (props.href)
-        tag = "a";
-      return tag;
+      if (props.href) {
+        if (typeof props.href === "string" && (props.href.startsWith("http") || props.href.startsWith("#")))
+          return "a";
+        return resolveComponent("router-link");
+      }
+      return "button";
     });
     return { classNames, tagName };
   }
@@ -103,6 +112,10 @@ export default defineComponent({
   --p-color-dark-danger-hover: darken(theme(backgroundColor.dark.danger.emphasis), 5%);
   --p-color-danger-focus: darken(theme(backgroundColor.danger.emphasis), 10%);
   --p-color-dark-danger-focus: darken(theme(backgroundColor.dark.danger.emphasis), 10%);
+  --p-button-xs-padding-x: theme(spacing.2);
+  --p-button-sm-padding-x: theme(spacing.4);
+  --p-button-md-padding-x: theme(spacing.5);
+  --p-button-lg-padding-x: theme(spacing.8);
 
   @apply inline-flex align-middle justify-center font-medium no-underline hover:no-underline disabled:opacity-50 disabled:pointer-events-none transition-all ease-in-out duration-200;
 
@@ -119,19 +132,19 @@ export default defineComponent({
   * eg: xs, sm, md, and lg
   */
   &&--xs {
-    @apply px-2 py-[2px] gap-1 text-sm rounded-xs;
+    @apply px-[var(--p-button-xs-padding-x)] py-[2px] gap-1 text-sm rounded-xs;
   }
 
   &&--sm {
-    @apply px-4 py-1 gap-2 text-base tracking-wider rounded-sm;
+    @apply px-[var(--p-button-sm-padding-x)] py-1 gap-2 text-base tracking-wider rounded-sm;
   }
 
   &&--md {
-    @apply px-5 py-[10px] gap-3 text-base tracking-wider rounded;
+    @apply px-[var(--p-button-md-padding-x)] py-[10px] gap-3 text-base tracking-wider rounded;
   }
 
   &&--lg {
-    @apply px-8 py-4 gap-4 text-base tracking-wider rounded;
+    @apply px-[var(--p-button-lg-padding-x)] py-4 gap-4 text-base tracking-wider rounded;
   }
 
   /*

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

@@ -1,6 +1,7 @@
-import { PropType } from 'vue-demi';
-import { ColorVariant, SizeVariant, StyleVariant, TagVariant } from '.';
-declare const _default: import("vue-demi").DefineComponent<{
+import { PropType, type DefineComponent } from 'vue-demi';
+import type { RouteLocationRaw } from 'vue-router';
+import { ColorVariant, SizeVariant, StyleVariant, TagVariant, TypeVariant } from '.';
+declare const _default: DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
         default: string;
@@ -22,12 +23,16 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     href: {
-        type: StringConstructor;
+        type: PropType<RouteLocationRaw>;
         default: undefined;
     };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    tagName: import("vue-demi").ComputedRef<TagVariant>;
+    tagName: import("vue-demi").ComputedRef<TagVariant | DefineComponent>;
 }, 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>;
@@ -50,15 +55,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     href: {
-        type: StringConstructor;
+        type: PropType<RouteLocationRaw>;
         default: undefined;
     };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
 }>>, {
     variant: StyleVariant;
     size: SizeVariant;
-    href: string;
-    pill: boolean;
-    color: ColorVariant;
+    type: TypeVariant;
     icon: boolean;
+    color: ColorVariant;
+    pill: boolean;
+    href: RouteLocationRaw;
 }, {}>;
 export default _default;

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

@@ -2,3 +2,4 @@ export type StyleVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'input';
 export type ColorVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
 export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
 export type TagVariant = 'a' | 'button';
+export type TypeVariant = 'button' | 'menu' | 'reset' | 'submit';

package/dist/components/calendar/Calendar.vue

@@ -10,6 +10,7 @@
         data-testid="calendar-prev"
         variant="solid"
         icon
+        type="button"
         :disabled="!canPrev"
         :readonly="disabled || readonly"
         @click="prev">
@@ -20,6 +21,7 @@
         data-testid="calendar-title"
         class="calendar__nav-title"
         variant="solid"
+        type="button"
         :readonly="disabled || readonly"
         @click="changeMode(1)">
         {{ title }}
@@ -29,6 +31,7 @@
         data-testid="calendar-next"
         variant="solid"
         icon
+        type="button"
         :readonly="disabled || readonly"
         :disabled="!canNext"
         @click="next">
@@ -49,6 +52,7 @@
           :key="i">
           <p-button
             variant="solid"
+            type="button"
             data-testid="calendar-item"
             :readonly="item.readonly || disabled || readonly"
             :active="item.active"
@@ -175,7 +179,7 @@ export default defineComponent({
     const localEnd = ref(Array.isArray(props.modelValue) ? props.modelValue[1] : props.end ?? props.modelValue);
     const vStart = computed({
       get() {
-        return Array.isArray(props.modelValue) ? props.modelValue[0] : props.start ?? props.modelValue;
+        return Array.isArray(props.modelValue) ? props.modelValue?.[0] : props.start ?? props.modelValue;
       },
       set(value) {
         emit("update:start", value);
@@ -183,7 +187,7 @@ export default defineComponent({
     });
     const vEnd = computed({
       get() {
-        return Array.isArray(props.modelValue) ? props.modelValue[1] : props.end ?? props.modelValue;
+        return Array.isArray(props.modelValue) ? props.modelValue?.[1] : props.end ?? props.modelValue;
       },
       set(value) {
         emit("update:end", value);
@@ -275,8 +279,8 @@ export default defineComponent({
       }
       return false;
     }
-    syncRef(localStart, vStart);
-    syncRef(localEnd, vEnd);
+    syncRef(localStart, vStart, { immediate: false });
+    syncRef(localEnd, vEnd, { immediate: false });
     watch([localStart, localEnd], ([startVal, endVal]) => {
       if (props.range) {
         if (startVal && endVal) {

package/dist/components/camera/Camera.vue

@@ -126,9 +126,9 @@ import {
   toRef
 } from "vue-demi";
 import pButton from "../button/Button.vue";
-import IconRotate from "@carbon/icons-vue/lib/renew/16";
-import IconCamera from "@carbon/icons-vue/lib/camera/24";
-import IconRetake from "@carbon/icons-vue/lib/reset/24";
+import IconRotate from "@privyid/persona-icon/vue/refresh/16.vue";
+import IconCamera from "@privyid/persona-icon/vue/camera/24.vue";
+import IconRetake from "@privyid/persona-icon/vue/reset/24.vue";
 import ShutterWav from "./assets/shutter.wav";
 import { useVModel } from "../input";
 import CaptureAdapter from "./adapter/capture";

package/dist/components/card/Card.vue

@@ -58,7 +58,7 @@ import {
   defineComponent,
   ref
 } from "vue-demi";
-import IconClose from "@carbon/icons-vue/lib/close/16";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 import Heading from "../heading/Heading.vue";
 export default defineComponent({
   components: { Heading, IconClose },
@@ -132,9 +132,15 @@ export default defineComponent({
 .card {
   --p-card-padding-x: theme(spacing.6);
   --p-card-padding-y: theme(spacing.6);
+  --p-card-bg: theme(backgroundColor.default.DEFAULT);
+  --p-card-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+  --p-card-border: theme(borderColor.default.DEFAULT);
+  --p-card-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-card-color: theme(textColor.default);
+  --p-card-color-dark: theme(textColor.dark.default);
 
-  @apply border bg-default border-default text-default rounded;
-  @apply dark:bg-dark-default dark:border-dark-default dark:text-dark-default;
+  @apply border bg-[color:var(--p-card-bg)] border-[color:var(--p-card-border)] text-[color:var(--p-card-color)] rounded;
+  @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 Body & Card Header

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

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

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.d.ts

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

package/dist/components/checkbox/index.mjs

@@ -32,6 +32,6 @@ export function useVModel(props) {
       emit("change", value);
     }
   });
-  syncRef(localValue, model);
+  syncRef(localValue, model, { immediate: false });
   return localValue;
 }

package/dist/components/collapse/Collapse.vue

@@ -1,6 +1,6 @@
 <template>
   <transition
-    name="fade"
+    name="collapse"
     mode="out-in">
     <div
       v-show="model || isToggleable"
@@ -79,5 +79,16 @@ export default defineComponent({
   &: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;
+  }
 }
 </style>

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

@@ -74,7 +74,7 @@ import {
 import { useVModel } from "../input";
 import pCaption from "../caption/Caption.vue";
 import pSubheading from "../subheading/Subheading.vue";
-import IconClose from "@carbon/icons-vue/lib/close/20";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 export default defineComponent({
   components: {
     IconClose,

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" | "update:modelValue" | "show" | "hide")[], "close" | "update:modelValue" | "show" | "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, ("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<{
     variant: {
         type: PropType<StyleVariant>;
         default: string;
@@ -72,9 +72,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
+    dismissable: boolean;
     modelValue: boolean;
     title: string;
-    dismissable: boolean;
     message: string;
     align: AlignVariant;
     backgroundUrl: string;

package/dist/components/cropper/Cropper.vue

@@ -122,10 +122,10 @@ import {
 import { usePinch } from "./utils/use-pinch";
 import pButton from "../button/Button.vue";
 import pInputRange from "../input-range/InputRange.vue";
-import IconRotateLeft from "@carbon/icons-vue/lib/rotate--counterclockwise/16";
-import IconRotateRight from "@carbon/icons-vue/lib/rotate--clockwise/16";
-import IconZoomIn from "@carbon/icons-vue/lib/zoom--in/16";
-import IconZoomOut from "@carbon/icons-vue/lib/zoom--out/16";
+import IconRotateLeft from "@privyid/persona-icon/vue/rotate-left/20.vue";
+import IconRotateRight from "@privyid/persona-icon/vue/rotate-right/20.vue";
+import IconZoomIn from "@privyid/persona-icon/vue/zoom-in/20.vue";
+import IconZoomOut from "@privyid/persona-icon/vue/zoom-out/20.vue";
 import { cropImage } from "./utils/crop-image";
 import { useVModel } from "../input";
 import { fromBase64 } from "../utils/base64";

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

@@ -15,6 +15,7 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :error="error"
+        :size="size"
         readonly
         @focus="onFocus">
         <template #append>
@@ -51,7 +52,8 @@ import { format as formatDate, isDate } from "date-fns";
 import {
   computed,
   defineComponent,
-  ref
+  ref,
+  watch
 } from "vue-demi";
 import { useVModel } from "../input";
 import IconCalendar from "@privyid/persona-icon/vue/calendar/16.vue";
@@ -67,6 +69,10 @@ export default defineComponent({
       type: [Date, Array],
       default: void 0
     },
+    size: {
+      type: String,
+      default: "md"
+    },
     start: {
       type: Date,
       default: void 0
@@ -134,9 +140,18 @@ export default defineComponent({
     const model = useVModel(props);
     const isOpen = ref(false);
     const value = computed(() => {
-      if (props.range && Array.isArray(model.value))
-        return `${formatDate(model.value[0], props.format)} - ${formatDate(model.value[1], props.format)}`;
-      return isDate(model.value) ? formatDate(model.value, props.format) : "";
+      const dates = Array.isArray(model.value) ? model.value : [model.value];
+      return dates.map((date) => {
+        return isDate(date) ? formatDate(date, props.format) : "";
+      }).filter(Boolean).join(" - ");
+    });
+    watch(() => props.start, (start) => {
+      if (Array.isArray(model.value))
+        model.value[0] = start;
+    });
+    watch(() => props.end, (end) => {
+      if (Array.isArray(model.value))
+        model.value[1] = end;
     });
     const classNames = computed(() => {
       const result = [];