@privyid/persona 0.26.0 → 0.27.0

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

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

package/dist/components/camera/Camera.vue.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" | "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<{
+}, 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<{
     modelValue: {
         type: PropType<string | string[] | File | File[]>;
         default: string;
@@ -79,15 +79,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onStart?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onResult?: ((...args: any[]) => any) | undefined;
+    onStart?: ((...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;
-    disabled: boolean;
     title: string;
+    disabled: boolean;
     element: ElementVariant;
     sectioned: boolean;
     callout: boolean;

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

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

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

@@ -94,15 +94,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
     direction: DirectionVariant;
     align: AlignmentVariant;
     width: string | number;
-    height: string | number;
     loop: boolean;
+    height: string | number;
     autoplay: boolean;
     autoplayInterval: string | number;
     splideOptions: Options;

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

@@ -72,8 +72,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
     dismissable: boolean;
-    modelValue: boolean;
     title: string;
+    modelValue: boolean;
     message: string;
     align: AlignVariant;
     state: StyleVariant;

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

@@ -128,8 +128,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onResult?: ((...args: any[]) => any) | undefined;
     onLoad?: ((...args: any[]) => any) | undefined;
 }, {

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

@@ -130,25 +130,25 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:start"?: ((...args: any[]) => any) | undefined;
     "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     size: SizeVariant;
+    placeholder: string;
+    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;
-    placeholder: string;
     format: string;
 }, {}>;
 export default _default;

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

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

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

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

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

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

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

@@ -36,7 +36,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    options: string[] | SelectItem[];
     modelValue: unknown[];
+    options: string[] | SelectItem[];
 }, {}>;
 export default _default;

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

@@ -36,7 +36,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    options: string[] | SelectItem[];
     modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
+    options: string[] | SelectItem[];
 }, {}>;
 export default _default;

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

@@ -46,8 +46,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     value: string | number | boolean | Record<string, any> | unknown[] | Date;
     modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;

package/dist/components/heading/Heading.vue.d.ts

@@ -30,8 +30,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>>, {
-    weight: WeightVariant;
     element: ElementVariant;
+    weight: WeightVariant;
     transform: TransformVariant;
 }, {}>;
 export default _default;

package/dist/components/input/Input.vue.d.ts

@@ -80,11 +80,11 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     error: boolean;
     size: SizeVariant;
+    clearable: boolean;
+    accept: AcceptVariant;
     modelValue: string | number;
     disabled: boolean;
     readonly: boolean;
-    clearable: boolean;
-    accept: AcceptVariant;
     containerClass: string | Record<string, any> | unknown[];
 }, {}>;
 export default _default;

package/dist/components/input-color/index.d.ts

@@ -0,0 +1 @@
+export type StyleVariant = 'default' | 'circle';

package/dist/components/input-color/inputColor.vue

@@ -0,0 +1,257 @@
+<template>
+  <div
+    class="input-color"
+    :class="[containerClass, inputClass]"
+    data-testid="input-color"
+    :style="`--p-input-color-bg:${model}`">
+    <span class="input-color__body">
+      <span class="input-color__face">
+        <IconAddPlus24
+          v-if="!model"
+          data-testid="input-color-add"
+          class="input-color__icon" />
+        <template v-else>
+          <IconCheckmarkCircleSolid20
+            v-if="variant === 'circle'"
+            data-testid="input-color-check-circle"
+            class="input-color__icon" />
+          <IconCheckmarkCircleSolid24
+            v-else
+            class="input-color__icon"
+            data-testid="input-color-check" />
+        </template>
+      </span>
+      <input
+        v-model="model"
+        :disabled="disabled"
+        type="color"
+        data-testid="input-color-form"
+        :class="[classNames, 'input-color__form']">
+    </span>
+    <slot
+      name="clearable"
+      :clear="clear">
+      <IconClear
+        v-if="model && clearable"
+        data-testid="input-color-clear"
+        class="input-color__clear"
+        @click="clear" />
+    </slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue-demi'
+import { computed } from 'vue-demi'
+import { useVModel } from '../input'
+import IconCheckmarkCircleSolid20 from '@privyid/persona-icon/vue/checkmark-circle-solid/20.vue'
+import IconCheckmarkCircleSolid24 from '@privyid/persona-icon/vue/checkmark-circle-solid/24.vue'
+import IconAddPlus24 from '@privyid/persona-icon/vue/add-plus/24.vue'
+import IconClear from '@privyid/persona-icon/vue/close-circle-solid/20.vue'
+import type { StyleVariant } from '.'
+
+const props = defineProps({
+  modelValue: {
+    type   : String,
+    default: '',
+  },
+  variant: {
+    type   : String as PropType<StyleVariant>,
+    default: 'default',
+  },
+  clearable: {
+    type   : Boolean,
+    default: false,
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+  error: {
+    type   : Boolean,
+    default: false,
+  },
+  containerClass: {
+    type   : [String, Object],
+    default: undefined,
+  },
+})
+
+const emit  = defineEmits(['update:modelValue', 'clear'])
+const model = useVModel(props)
+
+const classNames = computed(() => {
+  const result: string[] = ['']
+
+  if (props.clearable)
+    result.push('input-color__form--clearable')
+
+  if (props.error)
+    result.push('input-color__form--error', 'state--error')
+
+  return result
+})
+
+const inputClass = computed(() => {
+  const result: string[] = ['']
+
+  if (props.variant)
+    result.push(`input-color--${props.variant}`)
+
+  if (props.disabled)
+    result.push('input-color--disabled')
+
+  if (model.value)
+    result.push('input-color--selected')
+
+  if (props.error)
+    result.push('input-color--error')
+
+  return result
+})
+
+function clear () {
+  emit('clear')
+  model.value = ''
+}
+</script>
+<style lang="postcss">
+.input-color {
+  /**
+  * define color-bg variable
+  * for change
+  */
+  --p-input-color-bg: theme(backgroundColor.base.DEFAULT);
+
+  @apply flex items-center space-x-3 relative;
+
+  /**
+  * default variant's
+  * size and shape
+  */
+  &--default {
+    .input-color__body {
+      @apply w-14 h-14 rounded;
+    }
+  }
+
+  /**
+  * set sizing of
+  * circle variant
+  */
+  &--circle {
+    .input-color__body {
+      @apply rounded-full w-10 h-10;
+    }
+  }
+
+  /**
+  * make icon in white
+  * when color is selected
+  */
+  &:where(&--selected) {
+    .input-color__icon {
+      @apply text-state-emphasis;
+      @apply dark:text-dark-state-emphasis;
+    }
+  }
+
+  /**
+  * selected state
+  */
+  &--selected {
+    /**
+    * coloring body of
+    * input-color via
+    * color-bg variable
+    * */
+    .input-color__body {
+      @apply border-[color:var(--p-input-color-bg)] bg-[color:var(--p-input-color-bg)];
+      @apply dark:border-[color:var(--p-input-color-bg)] dark:bg-[color:var(--p-input-color-bg)];
+    }
+
+    /**
+    * make circle has
+    * an outline when
+    * selected
+    */
+    &.input-color--circle {
+      .input-color__body {
+        @apply outline outline-4 outline-default;
+        @apply dark:outline-dark-default;
+      }
+    }
+  }
+
+  /**
+  * default style of
+  * body of input-color
+  */
+  &__body {
+    @apply relative border-2 border-dashed border-default bg-base text-subtle;
+    @apply dark:bg-dark-base dark:border-dark-default dark:text-dark-subtle;
+  }
+
+  /**
+  * wrapper of checked
+  * and add icon
+  */
+  &__face {
+    @apply h-full w-full flex justify-center items-center;
+  }
+
+  /**
+  * hide input-color
+  * form visually
+  */
+  &__form {
+    @apply w-full h-full absolute left-0 top-0 opacity-0;
+
+    /**
+    * cursor pointer
+    * when form is not
+    * disabled
+    */
+    &:not(&:disabled, &[disabled="true"], &--disabled) {
+      @apply hover:cursor-pointer;
+    }
+  }
+
+  /**
+  * clear button
+  */
+  &__clear {
+    @apply z-[10] text-default/30 cursor-pointer hover:text-danger absolute -right-2.5 -top-2.5;
+    @apply dark:text-base-black/30 dark:hover:text-dark-danger;
+  }
+
+  /**
+  * make input-color
+  * looks vague when
+  * disabled
+  */
+  &--disabled {
+    .input-color__body {
+      @apply opacity-50;
+    }
+  }
+
+  /**
+  * adding red border
+  * when input error
+  */
+  &--error {
+    .input-color__body {
+      @apply ring-1 ring-danger-emphasis ring-offset-2;
+      @apply dark:ring-dark-danger-emphasis;
+    }
+  }
+
+  /**
+  * make icon subtle
+  * by default */
+  &__icon {
+    @apply text-subtle;
+    @apply dark:text-dark-subtle;
+  }
+}
+</style>

package/dist/components/input-file/InputFile.vue.d.ts

@@ -113,20 +113,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     size: SizeVariant;
-    modelValue: string | string[] | File | File[];
-    disabled: boolean;
-    readonly: boolean;
     placeholder: string;
     clearable: boolean;
     accept: string;
+    modelValue: string | string[] | File | File[];
     modelModifiers: ModelModifier;
+    disabled: boolean;
+    readonly: boolean;
     multiple: boolean | MultipleType;
     maxlength: string | number;
     clearOnCancel: boolean;

package/dist/components/input-pin/InputPin.vue.d.ts

@@ -69,15 +69,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     length: string | number;
     size: SizeVariant;
+    accept: AcceptVariant;
     modelValue: string;
     disabled: boolean;
     readonly: boolean;
-    accept: AcceptVariant;
 }, {}>;
 export default _default;

package/dist/components/input-range/InputRange.vue.d.ts

@@ -89,17 +89,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:start"?: ((...args: any[]) => any) | undefined;
     "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
+    modelValue: number | [number, number];
     start: number;
     end: number;
     min: string | number;
     max: string | number;
-    modelValue: number | [number, number];
     disabled: boolean;
     readonly: boolean;
     step: string | number;

package/dist/components/list-group/ListGroup.vue.d.ts

@@ -35,8 +35,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    horizontal: boolean;
     flush: boolean;
+    horizontal: boolean;
     rounded: boolean;
     borderless: boolean;
 }, {}>;

package/dist/components/meta.json

@@ -1,8 +1,8 @@
 {
   "PAccordion": "components/accordion/Accordion.vue",
   "PAccordionItem": "components/accordion/AccordionItem.vue",
-  "PBadge": "components/badge/Badge.vue",
   "PAvatar": "components/avatar/Avatar.vue",
+  "PBadge": "components/badge/Badge.vue",
   "PBanner": "components/banner/Banner.vue",
   "PBreadcrumb": "components/breadcrumbs/Breadcrumb.vue",
   "PBreadcrumbItem": "components/breadcrumbs/BreadcrumbItem.vue",
@@ -32,16 +32,17 @@
   "PDropdown": "components/dropdown/Dropdown.vue",
   "PDropdownHeader": "components/dropdown/DropdownHeader.vue",
   "PDropdownItem": "components/dropdown/DropdownItem.vue",
-  "PDropdownSubitem": "components/dropdown-subitem/DropdownSubitem.vue",
   "PDropzone": "components/dropzone/Dropzone.vue",
-  "PFormGroup": "components/form-group/FormGroup.vue",
+  "PDropdownSubitem": "components/dropdown-subitem/DropdownSubitem.vue",
   "PFilterbar": "components/filterbar/Filterbar.vue",
+  "PFormGroup": "components/form-group/FormGroup.vue",
   "PHeading": "components/heading/Heading.vue",
   "PInput": "components/input/Input.vue",
+  "PinputColor": "components/input-color/inputColor.vue",
   "PInputFile": "components/input-file/InputFile.vue",
-  "PInputPassword": "components/input-password/InputPassword.vue",
   "PInputGroup": "components/input-group/InputGroup.vue",
   "PInputGroupAddon": "components/input-group/InputGroupAddon.vue",
+  "PInputPassword": "components/input-password/InputPassword.vue",
   "PInputPin": "components/input-pin/InputPin.vue",
   "PInputRange": "components/input-range/InputRange.vue",
   "PLabel": "components/label/Label.vue",
@@ -61,43 +62,44 @@
   "PNavbarNav": "components/navbar/NavbarNav.vue",
   "PNavbarToggle": "components/navbar/NavbarToggle.vue",
   "PNavbarNavMenu": "components/navbar-menu/NavbarNavMenu.vue",
-  "PPage": "components/page/Page.vue",
   "POverlay": "components/overlay/Overlay.vue",
-  "PPdfHelipad": "components/pdf-helipad/PdfHelipad.vue",
+  "PPage": "components/page/Page.vue",
   "PPagination": "components/pagination/Pagination.vue",
-  "PPdfText": "components/pdf-text/PdfText.vue",
+  "PPdfHelipad": "components/pdf-helipad/PdfHelipad.vue",
   "PPdfObject": "components/pdf-object/PdfObject.vue",
   "PPdfObjectAddon": "components/pdf-object/PdfObjectAddon.vue",
   "PPdfObjectDebugger": "components/pdf-object/PdfObjectDebugger.vue",
   "PPdfObjects": "components/pdf-object/PdfObjects.vue",
-  "PPopover": "components/popover/Popover.vue",
+  "PPdfText": "components/pdf-text/PdfText.vue",
   "PPdfError": "components/pdf-viewer/PdfError.vue",
   "PPdfLoading": "components/pdf-viewer/PdfLoading.vue",
   "PPdfNavigation": "components/pdf-viewer/PdfNavigation.vue",
   "PPdfViewer": "components/pdf-viewer/PdfViewer.vue",
-  "PProgressIndicator": "components/progress-indicator/ProgressIndicator.vue",
-  "PProgressbar": "components/progressbar/Progressbar.vue",
+  "PPopover": "components/popover/Popover.vue",
   "PProgress": "components/progress/Progress.vue",
   "PProgressItem": "components/progress/ProgressItem.vue",
+  "PProgressIndicator": "components/progress-indicator/ProgressIndicator.vue",
+  "PProgressbar": "components/progressbar/Progressbar.vue",
   "PRadio": "components/radio/Radio.vue",
-  "PSheet": "components/sheet/Sheet.vue",
   "PRingbar": "components/ringbar/Ringbar.vue",
   "PSelect": "components/select/Select.vue",
   "PSelectInput": "components/select/SelectInput.vue",
   "PSelectTags": "components/select/SelectTags.vue",
+  "PSheet": "components/sheet/Sheet.vue",
+  "PShimmer": "components/shimmer/Shimmer.vue",
   "PSidebar": "components/sidebar/Sidebar.vue",
   "PSidebarBrand": "components/sidebar/SidebarBrand.vue",
   "PSidebarContent": "components/sidebar/SidebarContent.vue",
   "PSidebarNav": "components/sidebar/SidebarNav.vue",
   "PSidebarMenu": "components/sidebar-menu/SidebarMenu.vue",
   "PSidebarMenuItem": "components/sidebar-menu/SidebarMenuItem.vue",
-  "PSignatureText": "components/signature-text/SignatureText.vue",
   "PSignatureDraw": "components/signature-draw/SignatureDraw.vue",
   "PSignatureDrawDesktop": "components/signature-draw/SignatureDrawDesktop.vue",
   "PSignatureDrawMobile": "components/signature-draw/SignatureDrawMobile.vue",
   "PSpinner": "components/spinner/Spinner.vue",
   "PSpinnerRing": "components/spinner/SpinnerRing.vue",
   "PSpinnerRinggo": "components/spinner/SpinnerRinggo.vue",
+  "PSignatureText": "components/signature-text/SignatureText.vue",
   "PSpread": "components/spread/Spread.vue",
   "PStep": "components/steps/Step.vue",
   "PStepSlider": "components/steps/StepSlider.vue",
@@ -119,10 +121,10 @@
   "PToggle": "components/toggle/Toggle.vue",
   "PTooltip": "components/tooltip/Tooltip.vue",
   "PTooltipContainer": "components/tooltip/TooltipContainer.vue",
-  "PTruncate": "components/truncate/Truncate.vue",
   "PTour": "components/tour/Tour.vue",
   "PTourDialog": "components/tour/TourDialog.vue",
   "PTourHighlight": "components/tour/TourHighlight.vue",
+  "PTruncate": "components/truncate/Truncate.vue",
   "PWizard": "components/wizard/Wizard.vue",
   "PWizardBody": "components/wizard/WizardBody.vue",
   "PWizardHeader": "components/wizard/WizardHeader.vue",

package/dist/components/modal/Modal.vue.d.ts

@@ -143,10 +143,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     dismissable: boolean;
     banner: boolean;
     text: string;
-    modelValue: boolean;
     title: string;
     centered: boolean;
     noCloseOnBackdrop: boolean;
+    modelValue: boolean;
     bodyClass: string | Record<string, any> | unknown[];
     noCloseOnEsc: boolean;
     modalBodyScrollable: boolean;

package/dist/components/nav/Nav.vue.d.ts

@@ -81,8 +81,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     fill: boolean;
     variant: StyleVariant;
     title: string;
-    vertical: boolean;
     align: AlignVariant;
+    vertical: boolean;
     condensed: boolean;
     justified: boolean;
     titleActionLabel: RouteLocationRaw;

package/dist/components/pagination/Pagination.vue.d.ts

@@ -197,8 +197,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:perPage"?: ((...args: any[]) => any) | undefined;
 }, {
     variant: NavigationVariant;

package/dist/components/pdf-object/PdfObject.vue.d.ts

@@ -116,9 +116,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:height"?: ((...args: any[]) => any) | undefined;
 }, {
     y: number;
+    x: number;
     width: number;
     height: number;
-    x: number;
     autofocus: boolean;
     maxHeight: number;
     maxWidth: number;

package/dist/components/pdf-text/PdfText.vue.d.ts

@@ -151,14 +151,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     size: number;
     color: string;
     text: string;
-    modelValue: string | File;
     label: string;
+    modelValue: string | File;
     modelModifiers: ModelModifier;
-    width: number;
-    height: number;
     font: string;
     padding: number;
     lineHeight: number;
+    width: number;
+    height: number;
     labelColor: string;
     minSize: number;
     maxSize: number;

package/dist/components/progress-indicator/ProgressIndicator.vue.d.ts

@@ -32,8 +32,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     length: string | number;
     modelValue: number;

package/dist/components/radio/Radio.vue.d.ts

@@ -67,8 +67,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     value: any;
     name: string;

package/dist/components/shimmer/Shimmer.vue

@@ -0,0 +1,125 @@
+<template>
+  <svg
+    role="img"
+    class="shimmer"
+    :class="{ 'shimmer--responsive': responsive }"
+    data-testid="shimmer"
+    :width="width"
+    :height="height"
+    aria-labelledby="Loading..."
+    :viewBox="`0 0 ${width} ${height}`"
+    preserveAspectRatio="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <title id="loading-aria">Loading...</title>
+    <rect
+      x="0"
+      y="0"
+      width="100%"
+      height="100%"
+      :clip-path="`url(#clip-path-${uid})`"
+      :style="{ fill: `url('#fill-${uid}')` }" />
+    <defs>
+      <clipPath :id="`clip-path-${uid}`">
+        <slot>
+          <rect
+            x="0"
+            y="0"
+            rx="4"
+            ry="4"
+            width="100%"
+            height="100%" />
+        </slot>
+      </clipPath>
+      <linearGradient :id="`fill-${uid}`">
+        <stop
+          offset=".6"
+          class="shimmer__fg"
+          stop-opacity="1">
+          <animate
+            attributeName="offset"
+            dur="1s"
+            keyTimes="0; 0.25; 1"
+            repeatCount="indefinite"
+            values="-2; -2; 1" />
+        </stop>
+        <stop
+          offset="1.6"
+          class="shimmer__bg"
+          stop-opacity="1">
+          <animate
+            attributeName="offset"
+            dur="1s"
+            keyTimes="0; 0.25; 1"
+            repeatCount="indefinite"
+            values="-1; -1; 2" />
+        </stop>
+        <stop
+          offset="2.6"
+          class="shimmer__fg"
+          stop-opacity="1">
+          <animate
+            attributeName="offset"
+            dur="1s"
+            keyTimes="0; 0.25; 1"
+            repeatCount="indefinite"
+            values="0; 0; 3" />
+        </stop>
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  getCurrentInstance,
+  defineProps,
+} from 'vue-demi'
+
+defineProps({
+  width: {
+    type   : [Number, String],
+    default: 100,
+  },
+  height: {
+    type   : [Number, String],
+    default: 16,
+  },
+  responsive: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const instance = getCurrentInstance()
+const uid      = computed(() => instance?.uid)
+</script>
+
+<style lang="postcss">
+.shimmer {
+  --p-shimmer-fg: theme('backgroundColor.subtle.DEFAULT');
+  --p-shimmer-bg: theme('backgroundColor.base.DEFAULT');
+  --p-shimmer-dark-bg: theme('backgroundColor.dark.subtle.DEFAULT');
+  --p-shimmer-dark-fg: theme('backgroundColor.dark.base');
+
+  &--responsive {
+    @apply w-full h-auto;
+  }
+}
+
+.shimmer__fg {
+  stop-color: var(--p-shimmer-fg);
+}
+
+.shimmer__bg {
+  stop-color: var(--p-shimmer-bg);
+}
+
+:is(.dark .shimmer__fg) {
+  stop-color: var(--p-shimmer-dark-fg);
+}
+
+:is(.dark .shimmer__bg) {
+  stop-color: var(--p-shimmer-dark-bg);
+}
+</style>

package/dist/components/signature-draw/SignatureDraw.vue.d.ts

@@ -89,8 +89,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     color: string;
-    modelValue: string | File;
     placeholder: string;
+    modelValue: string | File;
     modelModifiers: ModelModifier;
     width: number;
     height: number;

package/dist/components/signature-draw/SignatureDrawDesktop.vue.d.ts

@@ -73,8 +73,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     color: string;
-    modelValue: string | File;
     placeholder: string;
+    modelValue: string | File;
     modelModifiers: ModelModifier;
     width: number;
     height: number;

package/dist/components/signature-draw/SignatureDrawMobile.vue.d.ts

@@ -94,8 +94,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     color: string;
-    modelValue: string | File;
     placeholder: string;
+    modelValue: string | File;
     modelModifiers: ModelModifier;
     width: number;
     height: number;

package/dist/components/signature-text/SignatureText.vue.d.ts

@@ -89,9 +89,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     text: string;
     modelValue: string | File;
     modelModifiers: ModelModifier;
+    font: string;
     width: number;
     height: number;
-    font: string;
     maxlength: string | number;
     maxwords: string | number;
 }, {}>;

package/dist/components/steps/Steps.vue.d.ts

@@ -74,8 +74,8 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     modelValue: number;
     direction: DirectionVariant;
-    loop: boolean;
     animation: AnimationVariant;
+    loop: boolean;
     onBeforePrev: TravelHook;
     onBeforeNext: TravelHook;
     keepAlive: boolean;

package/dist/components/text/Text.vue.d.ts

@@ -50,8 +50,8 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>>, {
     variant: StyleVariant;
     href: RouteLocationRaw;
-    weight: WeightVariant;
     element: ElementVariant;
+    weight: WeightVariant;
     transform: TransformVariant;
 }, {}>;
 export default _default;

package/dist/components/textarea/Textarea.vue.d.ts

@@ -104,11 +104,11 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     error: boolean;
     resize: boolean;
+    placeholder: string;
+    accept: AcceptVariant;
     modelValue: string;
     disabled: boolean;
     readonly: boolean;
-    placeholder: string;
-    accept: AcceptVariant;
     maxlength: string | number;
     showCounter: boolean;
     rows: string | number;

package/dist/components/toggle/Toggle.vue.d.ts

@@ -95,8 +95,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     value: any;
     variant: StyleVariant;

package/dist/components/utils/date.d.ts

@@ -17,6 +17,6 @@ export declare function installLocale(name: string, locale: Locale): void;
  * Get locale pack
  * @param name language name, ex: 'fr'
  */
-export declare function getLocale(name?: "id" | "en" | (string & {
+export declare function getLocale(name?: (string & {
     _?: undefined;
-})): any;
+}) | "id" | "en"): any;

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.26.0"
+  "version": "0.27.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -64,7 +64,7 @@
     "@splidejs/splide": "4.1.4",
     "@testing-library/dom": "9.3.3",
     "@testing-library/user-event": "14.5.1",
-    "@vueuse/core": "10.5.0",
+    "@vueuse/core": "10.7.0",
     "@vueuse/math": "10.3.0",
     "@zxing/browser": "0.1.4",
     "@zxing/library": "0.20.0",
@@ -74,7 +74,7 @@
     "defu": "6.1.3",
     "fast-equals": "^5.0.0",
     "fuse.js": "7.0.0",
-    "interactjs": "1.10.21",
+    "interactjs": "1.10.26",
     "lodash-es": "4.17.21",
     "marked": "5.1.2",
     "nanodelay": "2.0.2",
@@ -92,8 +92,8 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/browserslist-config": "^0.26.0",
-    "@privyid/tailwind-preset": "^0.26.0",
+    "@privyid/browserslist-config": "^0.27.0",
+    "@privyid/tailwind-preset": "^0.27.0",
     "postcss-custom-properties": "^12.1.11 || ^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -104,8 +104,8 @@
     "@nuxt/module-builder": "^0.5.0",
     "@nuxt/schema": "3.8.2",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.26.0",
-    "@privyid/tailwind-preset": "^0.26.0",
+    "@privyid/browserslist-config": "^0.27.0",
+    "@privyid/tailwind-preset": "^0.27.0",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^1.2.0",
     "nuxt": "3.8.2",