@privyid/persona 0.17.1 → 0.19.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 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/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/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

@@ -8,18 +8,24 @@
       :href="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 IconChevron from "@carbon/icons-vue/lib/chevron--right/16";
+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 +54,12 @@ export default defineComponent({
         return;
       return props.href;
     });
+    const divider = inject("divider", () => h(IconChevron));
     return {
       classNames,
       tagName,
-      permalink
+      permalink,
+      divider
     };
   }
 });
@@ -63,13 +71,13 @@ 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;
       }
     }

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 "@carbon/icons-vue/lib/chevron--right/16";
+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

@@ -2,6 +2,7 @@
   <component
     :is="tagName"
     :href="href"
+    :type="type"
     data-testid="btn"
     :class="classNames">
     <slot />
@@ -39,8 +40,12 @@ export default defineComponent({
       default: false
     },
     href: {
-      type: String,
+      type: [String, Object],
       default: void 0
+    },
+    type: {
+      type: String,
+      default: "button"
     }
   },
   setup(props) {
@@ -65,10 +70,7 @@ export default defineComponent({
       return result;
     });
     const tagName = computed(() => {
-      let tag = "button";
-      if (props.href)
-        tag = "a";
-      return tag;
+      return props.href ? "nuxt-link" : "button";
     });
     return { classNames, tagName };
   }
@@ -103,6 +105,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 +125,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,5 +1,6 @@
 import { PropType } from 'vue-demi';
-import { ColorVariant, SizeVariant, StyleVariant, TagVariant } from '.';
+import type { RouteLocationRaw } from 'vue-router';
+import { ColorVariant, SizeVariant, StyleVariant, TypeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
@@ -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<"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>;
@@ -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;
+    type: TypeVariant;
     color: ColorVariant;
     icon: boolean;
+    href: RouteLocationRaw;
+    pill: boolean;
 }, {}>;
 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,15 +1,11 @@
 <template>
-  <transition
-    name="fade"
-    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,14 +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;
-  }
+.collapses {
+  @apply transition-[height] duration-300 ease-out block;
 }
 </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,