@privyid/persona 0.9.0 → 0.11.0

package/dist/components/pdf-viewer/PdfError.vue

@@ -3,9 +3,9 @@
     v-p-aspect-ratio="1122/793"
     data-testid="pdf-error"
     class="pdf__error">
-    <h3 class="text-danger">
+    <Heading element="h3">
       Failed to load PDF
-    </h3>
+    </Heading>
     <dl class="mt-7">
       <dt>URL:</dt>
       <dd class="truncate">
@@ -30,8 +30,10 @@
 <script>
 import { pAspectRatio } from "../aspect-ratio";
 import { defineComponent } from "vue-demi";
+import Heading from "../heading/Heading.vue";
 export default defineComponent({
   directives: { pAspectRatio },
+  components: { Heading },
   props: {
     url: {
       type: String,
@@ -54,6 +56,21 @@ export default defineComponent({
 
 <style lang="postcss">
 .pdf__error {
-  @apply shadow-lg mb-4 p-6 bg-danger w-full h-full max-w-[793px] mx-auto;
+  @apply shadow-lg mb-4 p-6 bg-danger w-full h-full max-w-[var(--p-pdf-container-width)] mx-auto text-default;
+  @apply dark:bg-dark-danger-emphasis dark:text-dark-default;
+
+  a {
+    &,
+    &:hover {
+      > code {
+        @apply text-danger;
+      }
+    }
+  }
+
+  :not(pre) code {
+    @apply bg-subtle-alpha text-danger;
+    @apply dark:bg-dark-danger dark:text-dark-danger;
+  }
 }
 </style>

package/dist/components/pdf-viewer/PdfLoading.vue

@@ -21,7 +21,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .pdf__loading {
-  @apply shadow-lg mb-4 p-4 bg-base-white max-w-[793px] mx-auto;
+  @apply shadow-lg mb-4 p-4 bg-default max-w-[var(--p-pdf-container-width)] mx-auto;
 
   > img {
     @apply max-w-full object-contain h-auto;

package/dist/components/pdf-viewer/PdfNavigation.vue

@@ -119,26 +119,30 @@ export default defineComponent({
     @apply absolute bottom-4 inset-x-0 justify-center items-center flex w-80 mx-auto z-10;
 
     &-container {
-      @apply flex bg-gray-70 text-gray-30 rounded p-2 space-x-1 items-center;
+      @apply flex bg-inverse text-subtlest rounded p-2 space-x-1 items-center;
+      @apply dark:text-dark-default;
 
       > .btn {
-        @apply text-gray-30;
+        @apply text-subtlest hover:text-muted;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default;
       }
 
       > .select {
         @apply w-16;
 
         > .input {
-          @apply bg-emphasis-subtle;
+          @apply bg-default-alpha;
+          @apply dark:bg-dark-default-alpha;
 
           > .input__form {
-            @apply border-on-emphasis-subtle bg-emphasis-subtle;
+            @apply border-subtle-alpha bg-default-alpha text-state-emphasis;
+            @apply dark:border-dark-subtle-alpha dark:bg-dark-default-alpha dark:text-dark-state-emphasis;
           }
         }
       }
 
       > .divider {
-        @apply border-none bg-gray-50;
+        @apply border-none bg-dark-subtle-alpha;
       }
     }
 

package/dist/components/pdf-viewer/PdfViewer.vue

@@ -1,9 +1,11 @@
 <template>
   <div
     ref="root"
-    v-p-aspect-ratio="layout === 'fixed' ? ratio : 16/9"
+    v-p-aspect-ratio="layout === 'fixed' ? ratio : false"
     data-testid="pdf-viewer"
     class="pdf"
+    :data-page="pdfPage"
+    :data-scale="pdfScale"
     :class="classNames">
     <div
       class="pdf__header">
@@ -47,7 +49,7 @@
 
       <transition name="slide-up">
         <PdfNavigation
-          v-show="!idle" />
+          v-show="!idle && !loading" />
       </transition>
 
       <slot
@@ -216,7 +218,10 @@ export default defineComponent({
 
 <style lang="postcss">
 .pdf {
+  --p-pdf-container-width: 793px;
+
   @apply relative overflow-hidden w-full flex flex-col bg-subtle z-1;
+  @apply dark:bg-dark-subtle;
 
   &__wrapper {
     @apply relative h-full w-full flex-grow;
@@ -235,17 +240,20 @@ export default defineComponent({
       @apply shadow-lg mb-4 mt-0 border;
 
       &.hover {
-        @apply ring-accent ring;
+        @apply ring-info ring;
+        @apply dark:ring-dark-info;
       }
     }
   }
 
   &__header {
     @apply z-1 bg-default shadow-lg;
+    @apply dark:bg-dark-default;
   }
 
   &__footer {
     @apply z-1 bg-default shadow-lg-top;
+    @apply dark:bg-dark-default;
   }
 }
 </style>

package/dist/components/pdf-viewer/PdfViewer.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     password: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     layout: {
         type: PropType<LayoutVariant>;
@@ -34,13 +34,13 @@ declare const _default: import("vue-demi").DefineComponent<{
     pdfScale: import("vue-demi").Ref<number>;
     classNames: import("vue-demi").ComputedRef<string[]>;
     totalPage: import("vue-demi").ComputedRef<number>;
-    openDoc: (url: string, password?: string) => Promise<void>;
+    openDoc: (url: string, password?: string | undefined) => Promise<void>;
     closeDoc: () => Promise<void>;
-    pdfDoc: import("vue-demi").ShallowRef<import("pdfjs-dist/types/src/display/api").PDFDocumentProxy>;
-    pdfJS: import("vue-demi").ShallowRef<typeof import("pdfjs-dist")>;
+    pdfDoc: import("vue-demi").ShallowRef<import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined>;
+    pdfJS: import("vue-demi").ShallowRef<typeof import("pdfjs-dist") | undefined>;
     idle: import("vue-demi").Ref<boolean>;
     loading: import("vue-demi").WritableComputedRef<boolean>;
-    error: import("vue-demi").ShallowRef<Error>;
+    error: import("vue-demi").ShallowRef<Error | undefined>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("error" | "update:page" | "ready" | "loaded" | "error-password" | "update:scale")[], "error" | "update:page" | "ready" | "loaded" | "error-password" | "update:scale", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     src: {
         type: StringConstructor;
@@ -56,7 +56,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     password: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     layout: {
         type: PropType<LayoutVariant>;
@@ -71,12 +71,12 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
 }>> & {
-    onError?: (...args: any[]) => any;
-    "onUpdate:page"?: (...args: any[]) => any;
-    onReady?: (...args: any[]) => any;
-    onLoaded?: (...args: any[]) => any;
-    "onError-password"?: (...args: any[]) => any;
-    "onUpdate:scale"?: (...args: any[]) => any;
+    onError?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
+    onReady?: ((...args: any[]) => any) | undefined;
+    onLoaded?: ((...args: any[]) => any) | undefined;
+    "onError-password"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:scale"?: ((...args: any[]) => any) | undefined;
 }, {
     src: string;
     layout: LayoutVariant;

package/dist/components/pdf-viewer/assets/pdf-loading.svg

@@ -1,100 +1 @@
-<svg
-  role="img"
-  width="595"
-  height="842"
-  aria-labelledby="loading-aria"
-  viewBox="0 0 595 842"
-  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)"
-    style='fill: url("#fill");'
-  ></rect>
-  <defs>
-    <clipPath id="clip-path">
-      <rect x="44" y="64" width="191" height="14" rx="2.06766" />
-      <rect x="44" y="94" width="140" height="14" rx="2.06766" />
-      <rect x="44" y="152" width="507" height="14" rx="7" />
-      <rect x="44" y="182" width="507" height="14" rx="7" />
-      <rect x="44" y="212" width="507" height="14" rx="7" />
-      <rect x="44" y="242" width="507" height="14" rx="7" />
-      <rect x="44" y="272" width="507" height="14" rx="7" />
-      <rect x="44" y="302" width="507" height="14" rx="7" />
-      <rect x="44" y="332" width="349" height="14" rx="7" />
-      <rect x="44" y="390" width="507" height="14" rx="7" />
-      <rect x="44" y="420" width="507" height="14" rx="7" />
-      <rect x="44" y="450" width="507" height="14" rx="7" />
-      <rect x="44" y="480" width="507" height="14" rx="7" />
-      <rect x="44" y="510" width="507" height="14" rx="7" />
-      <rect x="44" y="540" width="507" height="14" rx="7" />
-      <rect x="44" y="570" width="183" height="14" rx="7" />
-      <rect x="360" y="628" width="191" height="14" rx="2.06766" />
-      <rect x="411" y="678" width="140" height="14" rx="2.06766" />
-      <rect x="44" y="64" width="191" height="14" rx="2.06766" />
-      <rect x="44" y="94" width="140" height="14" rx="2.06766" />
-      <rect x="44" y="152" width="507" height="14" rx="7" />
-      <rect x="44" y="182" width="507" height="14" rx="7" />
-      <rect x="44" y="212" width="507" height="14" rx="7" />
-      <rect x="44" y="242" width="507" height="14" rx="7" />
-      <rect x="44" y="272" width="507" height="14" rx="7" />
-      <rect x="44" y="302" width="507" height="14" rx="7" />
-      <rect x="44" y="332" width="349" height="14" rx="7" />
-      <rect x="44" y="390" width="507" height="14" rx="7" />
-      <rect x="44" y="420" width="507" height="14" rx="7" />
-      <rect x="44" y="450" width="507" height="14" rx="7" />
-      <rect x="44" y="480" width="507" height="14" rx="7" />
-      <rect x="44" y="510" width="507" height="14" rx="7" />
-      <rect x="44" y="540" width="507" height="14" rx="7" />
-      <rect x="44" y="570" width="183" height="14" rx="7" />
-      <rect x="360" y="628" width="191" height="14" rx="2.06766" />
-      <rect x="411" y="678" width="140" height="14" rx="2.06766" />
-    </clipPath>
-    <linearGradient id="fill">
-      <stop
-        offset="0.599964"
-        stop-color="#E7E7E8"
-        stop-opacity="1"
-      >
-        <animate
-          attributeName="offset"
-          values="-2; -2; 1"
-          keyTimes="0; 0.25; 1"
-          dur="2s"
-          repeatCount="indefinite"
-        ></animate>
-      </stop>
-      <stop
-        offset="1.59996"
-        stop-color="#CFCFD1"
-        stop-opacity="1"
-      >
-        <animate
-          attributeName="offset"
-          values="-1; -1; 2"
-          keyTimes="0; 0.25; 1"
-          dur="2s"
-          repeatCount="indefinite"
-        ></animate>
-      </stop>
-      <stop
-        offset="2.59996"
-        stop-color="#E7E7E8"
-        stop-opacity="1"
-      >
-        <animate
-          attributeName="offset"
-          values="0; 0; 3"
-          keyTimes="0; 0.25; 1"
-          dur="2s"
-          repeatCount="indefinite"
-        ></animate>
-      </stop>
-    </linearGradient>
-  </defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="595" height="842" aria-labelledby="loading-aria" preserveAspectRatio="none" role="img" viewBox="0 0 595 842"><title id="loading-aria">Loading...</title><rect width="100%" height="100%" x="0" y="0" clip-path="url(#clip-path)" style="fill:url(#fill)"/><defs><clipPath id="clip-path"><rect width="191" height="14" x="44" y="64" rx="2.068"/><rect width="140" height="14" x="44" y="94" rx="2.068"/><rect width="507" height="14" x="44" y="152" rx="7"/><rect width="507" height="14" x="44" y="182" rx="7"/><rect width="507" height="14" x="44" y="212" rx="7"/><rect width="507" height="14" x="44" y="242" rx="7"/><rect width="507" height="14" x="44" y="272" rx="7"/><rect width="507" height="14" x="44" y="302" rx="7"/><rect width="349" height="14" x="44" y="332" rx="7"/><rect width="507" height="14" x="44" y="390" rx="7"/><rect width="507" height="14" x="44" y="420" rx="7"/><rect width="507" height="14" x="44" y="450" rx="7"/><rect width="507" height="14" x="44" y="480" rx="7"/><rect width="507" height="14" x="44" y="510" rx="7"/><rect width="507" height="14" x="44" y="540" rx="7"/><rect width="183" height="14" x="44" y="570" rx="7"/><rect width="191" height="14" x="360" y="628" rx="2.068"/><rect width="140" height="14" x="411" y="678" rx="2.068"/><rect width="191" height="14" x="44" y="64" rx="2.068"/><rect width="140" height="14" x="44" y="94" rx="2.068"/><rect width="507" height="14" x="44" y="152" rx="7"/><rect width="507" height="14" x="44" y="182" rx="7"/><rect width="507" height="14" x="44" y="212" rx="7"/><rect width="507" height="14" x="44" y="242" rx="7"/><rect width="507" height="14" x="44" y="272" rx="7"/><rect width="507" height="14" x="44" y="302" rx="7"/><rect width="349" height="14" x="44" y="332" rx="7"/><rect width="507" height="14" x="44" y="390" rx="7"/><rect width="507" height="14" x="44" y="420" rx="7"/><rect width="507" height="14" x="44" y="450" rx="7"/><rect width="507" height="14" x="44" y="480" rx="7"/><rect width="507" height="14" x="44" y="510" rx="7"/><rect width="507" height="14" x="44" y="540" rx="7"/><rect width="183" height="14" x="44" y="570" rx="7"/><rect width="191" height="14" x="360" y="628" rx="2.068"/><rect width="140" height="14" x="411" y="678" rx="2.068"/></clipPath><linearGradient id="fill"><stop offset=".6" stop-color="#E7E7E8" stop-opacity="1"><animate attributeName="offset" dur="2s" keyTimes="0; 0.25; 1" repeatCount="indefinite" values="-2; -2; 1"/></stop><stop offset="1.6" stop-color="#CFCFD1" stop-opacity="1"><animate attributeName="offset" dur="2s" keyTimes="0; 0.25; 1" repeatCount="indefinite" values="-1; -1; 2"/></stop><stop offset="2.6" stop-color="#E7E7E8" stop-opacity="1"><animate attributeName="offset" dur="2s" keyTimes="0; 0.25; 1" repeatCount="indefinite" values="0; 0; 3"/></stop></linearGradient></defs></svg>

package/dist/components/pdf-viewer/index.d.ts

@@ -1,5 +1,5 @@
 import { InjectionKey, Ref } from 'vue-demi';
-export declare type LayoutVariant = 'fixed' | 'fit';
+export type LayoutVariant = 'fixed' | 'fit';
 export interface PdfViewerContext {
     page: Ref<number>;
     scale: Ref<number>;

package/dist/components/pdf-viewer/utils/use-viewer.d.ts

@@ -7,16 +7,16 @@ export declare function useViewer(container: Ref<HTMLDivElement>, viewer: Ref<HT
     scale: Ref<number>;
     totalPage: import("vue-demi").ComputedRef<number>;
     loading: import("vue-demi").WritableComputedRef<boolean>;
-    error: import("vue-demi").ShallowRef<Error>;
+    error: import("vue-demi").ShallowRef<Error | undefined>;
     ready: import("vue-demi").ShallowRef<boolean>;
     openDoc: (url: string, password?: string) => Promise<void>;
     closeDoc: () => Promise<void>;
-    pdfDoc: import("vue-demi").ShallowRef<import("pdfjs-dist/types/src/display/api").PDFDocumentProxy>;
-    pdfEventBus: import("vue-demi").ShallowRef<EventBus>;
-    pdfViewer: import("vue-demi").ShallowRef<PDFViewer>;
-    pdfLoadingTask: import("vue-demi").ShallowRef<import("pdfjs-dist/types/src/display/api").PDFDocumentLoadingTask>;
-    pdfLinkService: import("vue-demi").ShallowRef<PDFLinkService>;
-    pdfJS: import("vue-demi").ShallowRef<typeof PDFJS>;
+    pdfDoc: import("vue-demi").ShallowRef<import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined>;
+    pdfEventBus: import("vue-demi").ShallowRef<EventBus | undefined>;
+    pdfViewer: import("vue-demi").ShallowRef<PDFViewer | undefined>;
+    pdfLoadingTask: import("vue-demi").ShallowRef<import("pdfjs-dist/types/src/display/api").PDFDocumentLoadingTask | undefined>;
+    pdfLinkService: import("vue-demi").ShallowRef<PDFLinkService | undefined>;
+    pdfJS: import("vue-demi").ShallowRef<typeof PDFJS | undefined>;
     onLoaded: import("@vueuse/shared").EventHookOn<import("pdfjs-dist/types/src/display/api").PDFDocumentProxy>;
     onError: import("@vueuse/shared").EventHookOn<Error>;
     onReady: import("@vueuse/shared").EventHookOn<PDFViewer>;

package/dist/components/progress/Progress.vue

@@ -76,6 +76,11 @@ export default defineComponent({
 
 <style lang="postcss">
 .progress {
+  --p-bg-bar-active-state: theme(backgroundColor.info.emphasis);
+  --p-bg-bar-normal-state: theme(backgroundColor.subtle.DEFAULT);
+  --p-bg-dark-bar-active-state: theme(backgroundColor.dark.info.emphasis);
+  --p-bg-dark-bar-normal-state: theme(backgroundColor.dark.subtle.DEFAULT);
+
   &__items {
     @apply flex overflow-hidden;
   }
@@ -93,16 +98,19 @@ export default defineComponent({
   }
 
   &__point {
-    @apply w-7 h-7 rounded-full bg-muted flex items-center justify-center text-default;
+    @apply w-7 h-7 rounded-full bg-subtle flex items-center justify-center text-default;
+    @apply dark:bg-dark-subtle dark:text-dark-default;
   }
 
   &__bar {
     @apply absolute rounded-full transition-[background-position] ease-linear duration-150;
-    @apply from-[theme(backgroundColor.accent.emphasis)_50%] to-[theme(backgroundColor.muted)_50%];
+    @apply from-[var(--p-bg-bar-active-state)_50%] to-[var(--p-bg-bar-normal-state)_50%];
+    @apply dark:from-[var(--p-bg-dark-bar-active-state)_50%] dark:to-[var(--p-bg-dark-bar-normal-state)_50%];
   }
 
   &__title {
     @apply truncate text-sm text-center w-full text-default;
+    @apply dark:text-dark-default;
   }
 
   & > .progress__title {
@@ -111,7 +119,8 @@ export default defineComponent({
 
   &--active {
     .progress__point {
-      @apply bg-accent-emphasis text-on-emphasis;
+      @apply bg-info-emphasis text-state-emphasis;
+      @apply dark:bg-dark-info-emphasis dark:text-dark-state-emphasis;
     }
   }
 
@@ -127,8 +136,7 @@ export default defineComponent({
     }
 
     .progress__bar {
-      @apply w-[calc(100%_-_3rem)] h-1 top-5 right-[calc(50%_+_1.5rem)];
-      @apply bg-gradient-to-r bg-[length:210%_100%] bg-right;
+      @apply w-[calc(100%_-_3rem)] h-1 top-5 right-[calc(50%_+_1.5rem)] bg-gradient-to-r bg-[length:210%_100%] bg-right;
     }
 
     .progress--active + .progress--active {
@@ -154,8 +162,7 @@ export default defineComponent({
     }
 
     .progress__bar {
-      @apply h-[calc(100%_-_4.25rem)] w-1 bottom-[calc(50%_+_2.25rem)] left-1/2 -translate-x-1/2;
-      @apply bg-gradient-to-b bg-bottom bg-[length:100%_210%];
+      @apply h-[calc(100%_-_4.25rem)] w-1 bottom-[calc(50%_+_2.25rem)] left-1/2 -translate-x-1/2 bg-gradient-to-b bg-bottom bg-[length:100%_210%];
     }
 
     .progress--active + .progress--active {
@@ -168,6 +175,7 @@ export default defineComponent({
   &--dot {
     .progress__point-item {
       @apply w-3 h-3 rounded-full bg-default;
+      @apply dark:bg-dark-default;
     }
   }
 

package/dist/components/progress/Progress.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType, Slots } from 'vue-demi';
-export declare type IconVariant = 'dot' | 'counter';
-export declare type TitleVariant = 'specific' | 'general';
+export type IconVariant = 'dot' | 'counter';
+export type TitleVariant = 'specific' | 'general';
 interface ProgressLabel {
     title: string;
     slots: Slots;

package/dist/components/progress/ProgressItem.vue.d.ts

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

package/dist/components/radio/Radio.vue

@@ -146,9 +146,11 @@ export default defineComponent({
   */
   &__icon {
     @apply w-5 h-5 border rounded-full border-subtle inline-flex items-center justify-center bg-default;
+    @apply dark:border-dark-subtle dark:bg-dark-default;
 
     > svg {
       @apply w-3 fill-default;
+      @apply dark:fill-dark-default;
     }
   }
 
@@ -157,6 +159,7 @@ export default defineComponent({
   */
   &__label {
     @apply text-default;
+    @apply dark:text-dark-default;
   }
 
   /**
@@ -167,28 +170,32 @@ export default defineComponent({
 
     &:not(.radio--checked) {
       .radio__icon {
-        @apply bg-inactive border-subtle;
+        @apply bg-subtle border-subtle;
+        @apply dark:bg-dark-subtle dark:border-dark-subtle;
 
         > svg {
-          @apply fill-inactive;
+          @apply fill-subtle;
+          @apply dark:fill-dark-subtle;
         }
       }
     }
   }
 
   /**
-  * give accent background and
+  * give info background and
   * white checked icon
   */
   &&--checked {
     .radio__icon {
-      @apply bg-accent-emphasis border-accent-emphasis;
+      @apply bg-info-emphasis border-info-emphasis;
+      @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis;
     }
 
     &.radio--checkbox {
       .radio__icon {
         > svg {
           @apply fill-default;
+          @apply dark:fill-dark-inverse;
         }
       }
     }
@@ -227,10 +234,12 @@ export default defineComponent({
 
     &.radio--checked {
       .radio__icon {
-        @apply text-accent visible;
+        @apply text-info visible;
+        @apply dark:text-dark-info;
 
         > svg {
-          @apply fill-accent-emphasis;
+          @apply fill-info-emphasis;
+          @apply dark:fill-dark-info-emphasis;
         }
       }
     }
@@ -251,6 +260,7 @@ export default defineComponent({
     &.radio--disabled {
       .card {
         @apply bg-subtle hover:shadow-none hover:cursor-default;
+        @apply dark:bg-dark-subtle;
       }
     }
   }
@@ -279,6 +289,7 @@ export default defineComponent({
     &:hover,
     &:focus-visible {
       @apply bg-subtle;
+      @apply dark:bg-dark-subtle;
     }
   }
 }

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

@@ -3,18 +3,18 @@ export interface ChangedInteface {
     value: any;
     state: boolean;
 }
-declare type AppearanceType = 'radio' | 'checkbox' | 'option' | 'none';
+type AppearanceType = 'radio' | 'checkbox' | 'option' | 'none';
 declare const _default: import("vue-demi").DefineComponent<{
     name: {
         type: StringConstructor;
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -43,11 +43,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -67,13 +67,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    value: string | number | boolean | unknown[] | Record<string, any> | Date;
+    value: string | number | boolean | unknown[] | Date | Record<string, any>;
     name: string;
+    modelValue: string | number | boolean | unknown[] | Date | Record<string, any>;
     disabled: boolean;
-    modelValue: string | number | boolean | unknown[] | Record<string, any> | Date;
     readonly: boolean;
     checked: boolean;
     appearance: AppearanceType;

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

@@ -1,3 +1,3 @@
 import type { CheckboxProps } from '../checkbox';
-export declare type RadioProps = Omit<CheckboxProps, 'uncheckedValue'>;
+export type RadioProps = Omit<CheckboxProps, 'uncheckedValue'>;
 export declare function useVModel(props: RadioProps): import("vue-demi").WritableComputedRef<boolean>;

package/dist/components/select/Select.vue

@@ -253,10 +253,17 @@ export default defineComponent({
 .select {
   &__search {
     @apply pr-8 truncate hover:cursor-default focus:cursor-text;
+
+    .state--error &,
+    .select--error & {
+        @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
+        @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
+    }
   }
 
   &__caret {
     @apply absolute right-3 top-0 bottom-0 my-auto transition-transform duration-150 text-subtle pointer-events-none;
+    @apply dark:text-dark-subtle;
   }
 
   &__option {
@@ -267,7 +274,8 @@ export default defineComponent({
     }
 
     &-checked {
-      @apply flex-shrink-0 text-accent invisible;
+      @apply flex-shrink-0 text-info invisible;
+      @apply dark:text-dark-info;
 
       .selected & {
         @apply visible;
@@ -278,6 +286,7 @@ export default defineComponent({
   &__empty,
   &__loading {
     @apply px-3 py-2 text-default text-center;
+    @apply dark:text-dark-default;
   }
 
   &__loading {