@privyid/persona 0.21.0 → 0.23.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'
 
@@ -54,7 +57,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string],
+  'update:modelValue': [string],
 }>()
 
 const modelValue = useVModel(props, 'modelValue', emit, { passive: true })

package/dist/components/accordion/AccordionItem.vue

@@ -12,7 +12,7 @@
         class="accordion__item__activator"
         data-testid="accordion-item-activator"
         @click="toggle">
-        <Subheading>
+        <Subheading class="accordion__item__title">
           {{ title }}
         </Subheading>
         <slot
@@ -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'
@@ -74,11 +76,11 @@ const props = defineProps({
     default: false,
   },
 })
-const emit  = defineEmits([
-  'update:modelValue',
-  'expand',
-  'collapse',
-])
+const emit  = defineEmits<{
+  'update:modelValue': [boolean],
+  'expand': [],
+  'collapse': [],
+}>()
 
 const model = useVModel(props, 'modelValue', emit, { passive: true })
 

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

@@ -22,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
 }, {
@@ -51,7 +51,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
 }>> & {

package/dist/components/badge/Badge.vue

@@ -51,7 +51,17 @@ export default defineComponent({
   --p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
   --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
 
-  @apply inline-block font-bold text-xs px-2 py-0.5 text-state-emphasis dark:text-dark-state-emphasis rounded-full;
+  @apply inline-block font-bold text-xs px-2 py-0.5 rounded-full space-x-1 align-middle;
+
+  > .persona-icon,
+  > svg {
+    @apply inline-block;
+  }
+
+  &:not(&--variant-default&--default) {
+    @apply text-state-emphasis;
+    @apply dark:text-dark-state-emphasis
+  }
 
   /**
   * Provide colors variant
@@ -64,8 +74,16 @@ export default defineComponent({
       &--default {
         --p-bg-variant-default: theme(backgroundColor.inverse);
         --p-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
-        @apply bg-[color:var(--p-bg-variant-default)];
-        @apply dark:bg-[color:var(--p-bg-dark-variant-default)] dark:text-dark-on-emphasis;
+
+        &:not([class^='bg-'], [class*='bg-']) {
+          @apply bg-[color:var(--p-bg-variant-default)];
+          @apply dark:bg-[color:var(--p-bg-dark-variant-default)];
+        }
+
+        &:not([class^='text-'], [class*='text-']) {
+          @apply text-state-emphasis;
+          @apply dark:text-dark-state-emphasis dark:text-dark-on-emphasis;
+        }
       }
 
       &--primary {

package/dist/components/badge/Badge.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>>, {
-    color: ColorVariant;
     variant: StyleVariant;
+    color: ColorVariant;
 }, {}>;
 export default _default;

package/dist/components/banner/Banner.vue

@@ -4,6 +4,7 @@
     data-testid="banner"
     :class="classNames">
     <div
+      v-if="!noIcon"
       class="banner__icon"
       data-testid="banner-icon"
       :class="{ 'banner__icon--custom' : $slots.icon }">
@@ -53,6 +54,10 @@ export default defineComponent({
     dismissable: {
       type: Boolean,
       default: true
+    },
+    noIcon: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["dismissed"],

package/dist/components/banner/Banner.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    noIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
     show: import("vue-demi").Ref<boolean>;
@@ -23,10 +27,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    noIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
     dismissable: boolean;
+    noIcon: boolean;
 }, {}>;
 export default _default;

package/dist/components/button/Button.vue

@@ -116,10 +116,10 @@ const tagName = computed(() => {
 * Last Update   : Nov 21, 2022
 */
 .btn {
-  --p-color-primary-hover: darken(theme(colors.brand.accent), 5%);
-  --p-color-dark-primary-hover: darken(theme(colors.dark.brand.accent), 5%);
-  --p-color-primary-focus: darken(theme(colors.brand.accent), 10%);
-  --p-color-dark-primary-focus: darken(theme(colors.dark.brand.accent), 10%);
+  --p-color-primary-hover: darken(theme(colors.brand.action), 5%);
+  --p-color-dark-primary-hover: darken(theme(colors.dark.brand.action), 5%);
+  --p-color-primary-focus: darken(theme(colors.brand.action), 10%);
+  --p-color-dark-primary-focus: darken(theme(colors.dark.brand.action), 10%);
   --p-color-info-hover: darken(theme(backgroundColor.info.emphasis), 5%);
   --p-color-dark-info-hover: darken(theme(backgroundColor.dark.info.emphasis), 5%);
   --p-color-info-focus: darken(theme(backgroundColor.info.emphasis), 10%);
@@ -181,13 +181,13 @@ const tagName = computed(() => {
 
     &.btn {
       &--default {
-        @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha text-subtle hover:text-default focus:text-default;
-        @apply dark:bg-dark-default-alpha focus:dark:bg-dark-subtle-alpha active:dark:bg-dark-subtle-alpha dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default;
+        @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha hover:text-default focus:text-default;
+        @apply dark:bg-dark-default-alpha focus:dark:bg-dark-subtle-alpha active:dark:bg-dark-subtle-alpha hover:dark:text-dark-default focus:dark:text-dark-default;
       }
 
       &--primary {
-        @apply bg-brand-accent hover:bg-[color:var(--p-color-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] active:bg-[color:var(--p-color-primary-focus)];
-        @apply dark:bg-dark-brand-accent hover:dark:bg-[color:var(--p-color-dark-primary-hover)] focus:dark:bg-[color:var(--p-color-dark-primary-focus)] active:dark:bg-[color:var(--p-color-dark-primary-focus)];
+        @apply bg-brand-action hover:bg-[color:var(--p-color-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] active:bg-[color:var(--p-color-primary-focus)];
+        @apply dark:bg-dark-brand-action hover:dark:bg-[color:var(--p-color-dark-primary-hover)] focus:dark:bg-[color:var(--p-color-dark-primary-focus)] active:dark:bg-[color:var(--p-color-dark-primary-focus)];
       }
 
       &--info {
@@ -214,8 +214,8 @@ const tagName = computed(() => {
 
   &&--variant-outline,
   &&--variant-ghost {
-    @apply border border-solid text-subtle hover:text-default hover:shadow-lg focus:shadow-none active:shadow-none focus:text-default active:text-default;
-    @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
+    @apply border border-solid text-default hover:text-default hover:shadow-lg focus:shadow-none active:shadow-none focus:text-default active:text-default;
+    @apply dark:text-dark-default hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
   }
 
   /**
@@ -228,13 +228,13 @@ const tagName = computed(() => {
   &&--variant-outline {
     &.btn {
       &--default {
-        @apply border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
-        @apply dark:border-dark-default-alpha hover:dark:border-dark-subtle-alpha active:dark:border-dark-subtle-alpha focus:dark:border-dark-subtle-alpha;
+        @apply text-default border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
+        @apply dark:text-dark-default dark:border-dark-default-alpha hover:dark:border-dark-subtle-alpha active:dark:border-dark-subtle-alpha focus:dark:border-dark-subtle-alpha;
       }
 
       &--primary {
-        @apply border-brand-accent hover:border-[color:var(--p-color-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] active:border-[color:var(--p-color-primary-focus)];
-        @apply dark:border-dark-brand-accent hover:dark:border-[color:var(--p-color-dark-primary-hover)] focus:dark:border-[color:var(--p-color-dark-primary-focus)] active:dark:border-[color:var(--p-color-dark-primary-focus)];
+        @apply border-brand-action hover:border-[color:var(--p-color-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] active:border-[color:var(--p-color-primary-focus)];
+        @apply dark:border-dark-brand-action border-brand-action hover:dark:border-[color:var(--p-color-dark-primary-hover)] focus:dark:border-[color:var(--p-color-dark-primary-focus)] active:dark:border-[color:var(--p-color-dark-primary-focus)];
       }
 
       &--info {
@@ -276,13 +276,13 @@ const tagName = computed(() => {
 
     &.btn {
       &--default {
-        @apply text-subtle hover:text-default focus:text-default active:text-default ;
-        @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
+        @apply text-default hover:text-default focus:text-default active:text-default ;
+        @apply dark:text-dark-default hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
       }
 
       &--primary {
-        @apply text-brand-accent hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
-        @apply dark:text-dark-brand-accent hover:dark:text-[color:var(--p-color-dark-primary-hover)] focus:dark:text-[color:var(--p-color-dark-primary-focus)] active:dark:text-[color:var(--p-color-dark-primary-focus)];
+        @apply text-brand-action hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
+        @apply dark:text-dark-brand-action hover:dark:text-[color:var(--p-color-dark-primary-hover)] focus:dark:text-[color:var(--p-color-dark-primary-focus)] active:dark:text-[color:var(--p-color-dark-primary-focus)];
       }
 
       &--info {

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

@@ -1,5 +1,5 @@
 import { Ref } from 'vue-demi';
-import { Duration } from 'date-fns';
+import { type Duration } from 'date-fns';
 export interface CalendarItem {
     value: Date;
     text: string;
@@ -27,12 +27,5 @@ export interface CalendarAdapter {
 export declare const CalendarFormat: readonly ["date", "month", "year"];
 export type CalendarMode = typeof CalendarFormat[number];
 export declare function defineAdapter(adapter: CalendarAdapter): CalendarAdapter;
-/**
- * Format date using date-fns/format,
- * Automatically switch local following global lang setting.
- * @param date Date
- * @param formatStr date format
- */
-export declare function formatDate(date: Date, formatStr: string): string;
 export declare function validateDuration(duration?: string): boolean;
 export declare function parseDuration(duration?: string): Duration | undefined;

package/dist/components/calendar/adapter/adapter.mjs

@@ -1,11 +1,4 @@
-import {
-  format
-} from "date-fns";
-import id from "date-fns/locale/id/index";
-import en from "date-fns/locale/en-US/index";
-import { getLang } from "../../global/store.mjs";
 import { chunk } from "lodash-es";
-const localePacks = { en, id };
 export const CalendarFormat = [
   "date",
   "month",
@@ -14,9 +7,6 @@ export const CalendarFormat = [
 export function defineAdapter(adapter) {
   return adapter;
 }
-export function formatDate(date, formatStr) {
-  return format(date, formatStr, { locale: localePacks[getLang()] });
-}
 const DURATION_SUFFIX = {
   Y: "years",
   y: "years",

package/dist/components/calendar/adapter/date.mjs

@@ -13,9 +13,9 @@ import {
   isWithinInterval
 } from "date-fns";
 import {
-  defineAdapter,
-  formatDate
+  defineAdapter
 } from "./adapter.mjs";
+import { formatDate } from "../../utils/date.mjs";
 function getInterval(date) {
   const start = startOfWeek(startOfMonth(date), { weekStartsOn: 1 });
   const end = endOfWeek(endOfMonth(date), { weekStartsOn: 1 });

package/dist/components/calendar/adapter/month.mjs

@@ -10,9 +10,9 @@ import {
   subYears
 } from "date-fns";
 import {
-  defineAdapter,
-  formatDate
+  defineAdapter
 } from "./adapter.mjs";
+import { formatDate } from "../../utils/date.mjs";
 function getInterval(date) {
   const start = startOfYear(date);
   const end = endOfYear(date);

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

@@ -13,6 +13,7 @@
       v-else-if="title"
       class="card__header card__header--default">
       <Subheading
+        class="card__header__title"
         weight="medium"
         overline>
         {{ title }}

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

@@ -17,11 +17,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     width: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     height: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     loop: {
@@ -33,7 +33,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     autoplayInterval: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     splideOptions: {
@@ -66,11 +66,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     width: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     height: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     loop: {
@@ -82,7 +82,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     autoplayInterval: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     splideOptions: {
@@ -98,11 +98,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
-    direction: DirectionVariant;
     align: AlignmentVariant;
     width: string | number;
-    height: string | number;
     loop: boolean;
+    height: string | number;
+    direction: DirectionVariant;
     autoplay: boolean;
     autoplayInterval: string | number;
     splideOptions: Options;

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

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

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

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