pxd 0.0.31 → 0.0.32

package/dist/components/active-graph/index.vue

@@ -325,7 +325,7 @@ onBeforeUnmount(() => {
     <Transition name="pxd-transition--fade">
       <div
         v-if="showTooltip"
-        class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 pointer-events-none absolute z-10 w-max rounded-sm bg-gray-1000 text-[13px] text-gray-100 duration-50 will-change-transform motion-safe:transition-transform"
+        class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 pointer-events-none absolute z-1 w-max rounded-sm bg-gray-1000 text-[13px] text-gray-100 duration-50 will-change-transform motion-safe:transition-transform"
         :style="`transform: translate(${tooltipInfo.left}px, ${tooltipInfo.top}px);`"
       >
         <slot name="tooltip" :data="tooltipInfo">

package/dist/components/avatar/index.vue

@@ -64,7 +64,7 @@ defineExpose({
 
     <div
       v-if="$slots.icon"
-      class="-bottom-1 -left-1 absolute z-10 flex size-1/2 items-center overflow-hidden rounded-full border border-background-100 bg-background-100"
+      class="-bottom-1 -left-1 absolute z-1 flex size-1/2 items-center overflow-hidden rounded-full border border-background-100 bg-background-100"
     >
       <slot name="icon" />
     </div>

package/dist/components/avatar-group/index.vue

@@ -27,7 +27,7 @@ provideAvatarGroupContext(props);
       :src="option.src"
       :alt="option.alt"
       :loading="option.loading"
-      class="[&:nth-child(n+2)]:-ml-3 hover:z-10"
+      class="[&:nth-child(n+2)]:-ml-2.5 hover:z-1"
     />
 
     <PAvatar v-if="slicedOptions.length < options.length" class="text-xs -ml-3 bg-gray-1000 text-gray-100">

package/dist/components/browser/index.vue

@@ -1,5 +1,7 @@
 <script setup>
 import ArrowLeftIcon from "@gdsicon/vue/arrow-left";
+import CheckIcon from "@gdsicon/vue/check";
+import CopyIcon from "@gdsicon/vue/copy";
 import LockClosedIcon from "@gdsicon/vue/lock-closed";
 import RefreshClockwiseIcon from "@gdsicon/vue/refresh-clockwise";
 import { useCopyClick } from "../../composables/use-copy-click";
@@ -10,7 +12,7 @@ defineOptions({
 defineProps({
   address: { type: String, required: false }
 });
-const { renderAs, onCopyClick } = useCopyClick();
+const { isCopied, copyText } = useCopyClick();
 </script>
 
 <template>
@@ -38,9 +40,9 @@ const { renderAs, onCopyClick } = useCopyClick();
             {{ address }}
           </div>
 
-          <PButton variant="ghost" size="xs" shape="rounded" class="size-6" icon @click="onCopyClick(address)">
+          <PButton variant="ghost" size="xs" shape="rounded" class="size-6" icon @click="copyText(address)">
             <Transition name="pxd-transition--fade-scale" mode="out-in">
-              <component :is="renderAs" class="text-sm text-foreground-secondary" />
+              <component :is="isCopied ? CheckIcon : CopyIcon" class="text-sm text-foreground-secondary" />
             </Transition>
           </PButton>
         </div>

package/dist/components/countdown/index.vue

@@ -1,11 +1,15 @@
 <script setup>
-import { computed } from "vue";
+import dayjs from "dayjs";
+import dayjsDuration from "dayjs/plugin/duration";
+import { computed, onBeforeUnmount } from "vue";
 import { useCountdown } from "../../composables/use-countdown";
+import millisecondTokenPlugin from "../../utils/dayjs-millisecond-token";
 defineOptions({
   name: "PCountDown"
 });
 const props = defineProps({
-  format: { type: String, required: false, default: "hh:mm:ss.ms" },
+  format: { type: String, required: false, default: "HH:mm:ss" },
+  invert: { type: Boolean, required: false },
   active: { type: Boolean, required: false, default: false },
   endTime: { type: Number, required: false, default: 0 },
   autoReset: { type: Boolean, required: false, default: true },
@@ -14,15 +18,29 @@ const props = defineProps({
   millisecond: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["change", "reset", "finish"]);
+dayjs.extend(dayjsDuration);
+dayjs.extend(millisecondTokenPlugin);
 const {
+  clean,
   reset,
-  times
+  timestamp
 } = useCountdown(props, emits);
+const times = computed(() => {
+  const t = dayjs.duration(timestamp.value);
+  return {
+    dd: t.format("DD"),
+    hh: t.format("HH"),
+    mm: t.format("mm"),
+    ss: t.format("ss"),
+    ms: t.format("SSS")
+  };
+});
 const displayTimes = computed(() => {
-  const { format, precision } = props;
-  let result = format;
-  result = result.replace(/\.ms/, precision ? `.${times.value.ms}` : "");
-  return result.replace(/dd/, times.value.dd).replace(/hh/, times.value.hh).replace(/mm/, times.value.mm).replace(/ss/, times.value.ss);
+  const time = dayjs.duration(timestamp.value).format(props.format);
+  return time;
+});
+onBeforeUnmount(() => {
+  clean();
 });
 defineExpose({
   reset,

package/dist/components/drawer/index.vue

@@ -101,16 +101,16 @@ watch(() => isVisible.value, (visible) => {
         :style="computedStyle"
       >
         <header
-          class="pxd-drawer--header px-6 py-4 sm:py-6 relative shrink-0 empty:py-3"
+          class="pxd-drawer--header p-6 sm:py-4 relative shrink-0 empty:py-3"
           :class="{ 'border-b bg-background-200 dark:bg-background-100': headerStyle }"
         >
-          <h3 v-if="$slots.title || title" class="text-base sm:text-2xl font-semibold tracking-tight">
+          <h3 v-if="$slots.title || title" class="text-xl font-semibold tracking-tight">
             <slot name="title">
               {{ title }}
             </slot>
           </h3>
 
-          <div v-if="$slots.subtitle || subtitle" class="mt-4 text-sm text-muted-foreground">
+          <div v-if="$slots.subtitle || subtitle" class="mt-3 text-sm text-muted-foreground">
             <slot name="subtitle">
               {{ subtitle }}
             </slot>
@@ -121,7 +121,7 @@ watch(() => isVisible.value, (visible) => {
           v-if="$slots.default"
           :data-header="headerStyle"
           class="pxd-drawer--content group flex-1"
-          content-class="group-data-[header=true]:pt-6 px-6 pb-6"
+          content-class="group-data-[header=true]:pt-5 px-6 pb-5"
         >
           <slot />
         </PScrollable>

package/dist/components/error/index.vue

@@ -28,7 +28,7 @@ const computedClass = computed(() => {
 
 <template>
   <div :class="computedClass">
-    <StopIcon class="size-4 min-w-4 mr-2 mt-(--mt)" />
+    <StopIcon class="size-4 mr-2 mt-(--mt) shrink-0" />
 
     <div class="flex-1">
       <b v-if="label || error?.label" class="font-medium whitespace-nowrap">{{ label || error?.label }}:</b>

package/dist/components/message/index.vue

@@ -80,14 +80,14 @@ function onPointerOut(e) {
 <template>
   <PTeleport to="body">
     <div
-      class="pxd-message p-4 pointer-events-none fixed z-10 w-full"
+      class="pxd-message p-4 fixed z-10 w-full empty:pointer-events-none"
       :style="{ zIndex }"
       :data-position="position"
     >
       <TransitionGroup
         name="pxd-transition--fade-scale"
         tag="div"
-        class="pxd-message--group gap-3 sm:pointer-events-auto relative flex"
+        class="pxd-message--group gap-3 relative flex"
         appear
         @pointerover="onPointerOver"
         @pointerout="onPointerOut"
@@ -99,10 +99,10 @@ function onPointerOut(e) {
           aria-live="polite"
           :data-key="item.key"
           :data-type="item.type"
-          :class="item.class"
-          class="pxd-message--item group py-2 pl-3 pr-2 text-sm flex w-max max-w-full items-center rounded-lg bg-background-100 shadow-border-modal"
+          :class="[item.class, { 'pr-9': item.closeable }]"
+          class="pxd-message--item py-2 px-3 text-sm relative flex w-max max-w-full rounded-lg bg-background-100 break-all shadow-border-modal"
         >
-          <component :is="TYPE_ICONS[item.type]" v-if="item.type" class="pxd-message--icon mr-2 shrink-0" :class="item.type" />
+          <component :is="TYPE_ICONS[item.type]" v-if="item.type" class="pxd-message--icon size-4 mr-2 mt-0.5 shrink-0" :class="item.type" />
 
           <span v-if="typeof item.message === 'string'">
             {{ item.message }}
@@ -114,7 +114,7 @@ function onPointerOut(e) {
             icon
             size="xs"
             variant="ghost"
-            class="ml-1 touch-none text-foreground-secondary"
+            class="right-1.5 top-1.5 absolute z-1 touch-none text-foreground-secondary"
             @click="closeMessage(item.key)"
           >
             <CloseIcon />

package/dist/components/modal/index.vue

@@ -68,16 +68,16 @@ watch(() => isVisible.value, (visible) => {
         :style="{ '--w': width }"
       >
         <header
-          class="pxd-modal--header px-6 py-4 sm:py-6 relative shrink-0 empty:py-3"
+          class="pxd-modal--header p-6 sm:py-4 relative shrink-0 empty:py-3"
           :class="{ 'border-b bg-background-200 dark:bg-background-100': headerStyle }"
         >
-          <h3 v-if="$slots.title || title" class="text-base sm:text-2xl font-semibold tracking-tight">
+          <h3 v-if="$slots.title || title" class="text-xl font-semibold tracking-tight">
             <slot name="title">
               {{ title }}
             </slot>
           </h3>
 
-          <div v-if="$slots.subtitle || subtitle" class="mt-4 text-sm text-muted-foreground">
+          <div v-if="$slots.subtitle || subtitle" class="mt-3 text-sm text-muted-foreground">
             <slot name="subtitle">
               {{ subtitle }}
             </slot>
@@ -88,7 +88,7 @@ watch(() => isVisible.value, (visible) => {
           v-if="$slots.default"
           :data-header="headerStyle"
           class="pxd-modal--content group flex-1"
-          content-class="group-data-[header=true]:pt-6 px-6 pb-6 empty:hidden"
+          content-class="group-data-[header=true]:pt-5 px-6 pb-5"
         >
           <slot />
         </PScrollable>

package/dist/components/more-button/index.vue

@@ -37,7 +37,7 @@ function onToggleExpand() {
 
 <template>
   <div class="pxd-more-button px-4 mt-4 flex w-full items-center">
-    <PButton class="relative z-10" v-bind="buttonProps" @click="onToggleExpand">
+    <PButton class="relative z-1" v-bind="buttonProps" @click="onToggleExpand">
       {{ isExpanded ? lessText : moreText }}
 
       <template #suffix>

package/dist/components/popover/index.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 import { useDelayDestroy } from "../../composables/use-delay-destroy";
-import { PRESET_MEDIA_QUERIES, useMediaQuery } from "../../composables/use-media-query";
 import {
   getElementRectFromContainer,
   getScrollContainer,
@@ -67,7 +66,6 @@ const {
   default: props.visible,
   delay: props.destroyDelay
 });
-const isSmUp = useMediaQuery(PRESET_MEDIA_QUERIES.SM_UP);
 const triggerMethods = computed(() => toArray(props.trigger));
 let cachedScrollTop = 0;
 let cachedBasePosition = null;
@@ -309,46 +307,35 @@ function updateContentPosition() {
       left = `${scrollLeft + width}px`;
       translateX = "-100%";
     }
-    if (!isSmUp.value) {
-      left = "";
-      translateX = "0";
-    }
   } else if (isHorizontal) {
-    if (isSmUp.value) {
-      if (position === "left") {
-        top = `${scrollTop + height / 2}px`;
-        left = `${scrollLeft}px`;
-        translateX = "-100%";
-        translateY = "-50%";
-      } else if (position === "right") {
-        top = `${scrollTop + height / 2}px`;
-        left = `${scrollLeft + width}px`;
-        translateX = "0";
-        translateY = "-50%";
-      } else if (position === "left-start") {
-        top = `${scrollTop}px`;
-        left = `${scrollLeft}px`;
-        translateX = "-100%";
-        translateY = "0";
-      } else if (position === "left-end") {
-        top = `${scrollTop + height}px`;
-        left = `${scrollLeft}px`;
-        translateX = "-100%";
-        translateY = "-100%";
-      } else if (position === "right-start") {
-        top = `${scrollTop}px`;
-        left = `${scrollLeft + width}px`;
-      } else if (position === "right-end") {
-        top = `${scrollTop + height}px`;
-        left = `${scrollLeft + width}px`;
-        translateX = "0";
-        translateY = "-100%";
-      }
-    } else {
+    if (position === "left") {
+      top = `${scrollTop + height / 2}px`;
+      left = `${scrollLeft}px`;
+      translateX = "-100%";
+      translateY = "-50%";
+    } else if (position === "right") {
+      top = `${scrollTop + height / 2}px`;
+      left = `${scrollLeft + width}px`;
+      translateX = "0";
+      translateY = "-50%";
+    } else if (position === "left-start") {
       top = `${scrollTop}px`;
-      left = "";
+      left = `${scrollLeft}px`;
+      translateX = "-100%";
+      translateY = "0";
+    } else if (position === "left-end") {
+      top = `${scrollTop + height}px`;
+      left = `${scrollLeft}px`;
+      translateX = "-100%";
+      translateY = "-100%";
+    } else if (position === "right-start") {
+      top = `${scrollTop}px`;
+      left = `${scrollLeft + width}px`;
+    } else if (position === "right-end") {
+      top = `${scrollTop + height}px`;
+      left = `${scrollLeft + width}px`;
+      translateX = "0";
       translateY = "-100%";
-      localPosition.value = "top-start";
     }
   }
   wrapperStyle.value = {
@@ -591,22 +578,22 @@ defineExpose({
 
   &[data-position='left-start'] .pxd-popover--arrow,
   &[data-position='right-start'] .pxd-popover--arrow {
-    top: 15px;
+    top: 16px;
   }
 
   &[data-position='left-end'] .pxd-popover--arrow,
   &[data-position='right-end'] .pxd-popover--arrow {
-    bottom: 15px;
+    bottom: 16px;
   }
 
   &[data-position='top-start'] .pxd-popover--arrow,
   &[data-position='bottom-start'] .pxd-popover--arrow {
-    left: 15px;
+    left: 16px;
   }
 
   &[data-position='top-end'] .pxd-popover--arrow,
   &[data-position='bottom-end'] .pxd-popover--arrow {
-    right: 15px;
+    right: 16px;
   }
 }
 

package/dist/components/slider/index.vue

@@ -214,14 +214,14 @@ onBeforeUnmount(() => {
 
     <div
       v-if="props.range"
-      class="pxd-slider--thumb rounded-xs absolute -translate-x-1/2 touch-none bg-background-100 hover:scale-130 active:z-10 active:scale-130 motion-safe:transition-transform"
+      class="pxd-slider--thumb rounded-xs absolute -translate-x-1/2 touch-none bg-background-100 hover:scale-130 active:z-1 active:scale-130 motion-safe:transition-transform"
       :class="[{ 'scale-130': activeThumb === 'start', 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${startPercentage}%` }"
       @pointerdown.prevent.stop="startDragging($event, 'start')"
     />
 
     <div
-      class="pxd-slider--thumb rounded-xs absolute -translate-x-1/2 touch-none bg-background-100 hover:scale-130 active:z-10 active:scale-130 motion-safe:transition-transform"
+      class="pxd-slider--thumb rounded-xs absolute -translate-x-1/2 touch-none bg-background-100 hover:scale-130 active:z-1 active:scale-130 motion-safe:transition-transform"
       :class="[{ 'scale-130': activeThumb === 'end', 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${endPercentage}%` }"
       @pointerdown.prevent.stop="startDragging($event, 'end')"

package/dist/components/snippet/index.vue

@@ -1,5 +1,7 @@
 <script setup>
-import { computed, ref } from "vue";
+import CheckIcon from "@gdsicon/vue/check";
+import CopyIcon from "@gdsicon/vue/copy";
+import { computed } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useCopyClick } from "../../composables/use-copy-click";
 import { getCssUnitValue, toArray } from "../../utils/format";
@@ -15,7 +17,6 @@ const props = defineProps({
   variant: { type: String, required: false, default: "default" }
 });
 const emits = defineEmits(["copy"]);
-const isCopied = ref(false);
 const SIZES = {
   sm: "min-h-7.5 pl-3.5 pr-1.5 py-2 text-sm",
   md: "min-h-9 pl-3.5 pr-2.5 py-2.5 text-sm",
@@ -31,7 +32,7 @@ const VARIANTS = {
 const config = useConfigProvider();
 const computedClass = computed(() => {
   const classes = [
-    "pxd-snippet pr-14 relative flex w-max items-center rounded-lg border motion-safe:transition-all",
+    "pxd-snippet pr-12 relative flex items-center rounded-lg border motion-safe:transition-all",
     getFallbackValue(props.variant, VARIANTS),
     getFallbackValue(props.size, SIZES, config.size)
   ];
@@ -41,10 +42,10 @@ const computedClass = computed(() => {
   return classes.join(" ");
 });
 const computedTextArray = computed(() => toArray(props.text));
-const { renderAs, onCopyClick } = useCopyClick();
+const { isCopied, copyText } = useCopyClick();
 async function onCopyButtonClick() {
   const text = computedTextArray.value.join("\n");
-  await onCopyClick(text);
+  await copyText(text);
   emits("copy", text);
 }
 </script>
@@ -56,12 +57,12 @@ async function onCopyButtonClick() {
     </div>
 
     <div
-      class="right-1 p-2 absolute top-1/2 -translate-y-1/2 cursor-pointer rounded-md hover:bg-background-hover active:bg-background-active"
+      class="right-1 p-2 absolute top-1/2 -translate-y-1/2 cursor-pointer touch-none rounded-md select-none hover:bg-background-hover active:bg-background-active"
       :class="{ copied: isCopied }"
       @click="onCopyButtonClick"
     >
       <Transition name="pxd-transition--fade-scale" mode="out-in">
-        <component :is="renderAs" class="text-sm" />
+        <component :is="isCopied ? CheckIcon : CopyIcon" class="text-sm" />
       </Transition>
     </div>
   </div>

package/dist/components/stack/index.vue

@@ -90,7 +90,7 @@ const computedClass = computed(() => {
 </script>
 
 <template>
-  <component :is="props.as" :class="computedClass" v-bind="$attrs" :style="formattedGap">
+  <component :is="props.as" :class="computedClass" :data-direction="direction" v-bind="$attrs" :style="formattedGap">
     <slot />
   </component>
 </template>

package/dist/components/tooltip/index.vue

@@ -21,17 +21,33 @@ const props = defineProps({
   popoverStyle: { type: [Object, String], required: false, default: "" }
 });
 const VARIANTS = {
-  primary: "var(--color-primary)",
-  error: "var(--color-red-700)",
-  warning: "var(--color-amber-700)",
-  success: "var(--color-green-700)"
+  primary: {
+    bg: "var(--color-primary)",
+    text: "text-gray-100"
+  },
+  error: {
+    bg: "var(--color-red-700)",
+    text: "text-gray-100 dark:text-gray-1000"
+  },
+  warning: {
+    bg: "var(--color-amber-700)",
+    text: "text-gray-1000 dark:text-gray-100"
+  },
+  success: {
+    bg: "var(--color-green-700)",
+    text: "text-gray-100 dark:text-gray-1000"
+  }
 };
 const computedVariant = computed(() => getFallbackValue(props.variant, VARIANTS, "primary"));
 const computedDisabled = computed(() => {
   return props.disabled || props.desktopOnly && isTouchDevice();
 });
 const computedPopoverClass = computed(() => {
-  return ["px-3 py-2 text-gray-100 rounded-md text-[13px] break-words whitespace-pre-line shadow-border-tooltip bg-(--color)", props.popoverClass].join(" ");
+  return [
+    "px-3 py-2 rounded-md text-[13px] break-words whitespace-pre-line shadow-border-tooltip bg-(--color)",
+    computedVariant.value.text,
+    props.popoverClass
+  ].join(" ");
 });
 </script>
 
@@ -41,7 +57,7 @@ const computedPopoverClass = computed(() => {
     show-arrow
     :position="position"
     :disabled="computedDisabled"
-    :arrow-color="computedVariant"
+    :arrow-color="computedVariant.bg"
     :trigger-class="triggerClass"
     :trigger-style="triggerStyle"
     :popover-class="computedPopoverClass"

package/dist/composables/use-copy-click.d.ts

@@ -1,5 +1,4 @@
 export declare function useCopyClick(): {
-    isCopied: import("vue").Ref<boolean, boolean>;
-    renderAs: import("vue").ComputedRef<any>;
-    onCopyClick: (text: string | undefined) => Promise<void>;
+    isCopied: import("vue").ShallowRef<boolean, boolean>;
+    copyText: (text?: string | undefined) => Promise<void>;
 };

package/dist/composables/use-copy-click.js

@@ -1,31 +1,34 @@
-import CheckIcon from "@gdsicon/vue/check";
-import CopyIcon from "@gdsicon/vue/copy";
-import { computed, markRaw, ref } from "vue";
+import { shallowRef } from "vue";
 export function useCopyClick() {
   let copiedTimer;
-  const isCopied = ref(false);
-  const render = computed(() => {
-    return markRaw(isCopied.value ? CheckIcon : CopyIcon);
-  });
-  async function onCopyClick(text) {
-    clearTimeout(copiedTimer);
-    if (typeof navigator.clipboard !== "undefined") {
-      await navigator.clipboard.writeText(text || "");
-    } else {
-      hackCopy(text || "");
+  let copyPromise = null;
+  const isCopied = shallowRef(false);
+  async function copyText(text = "") {
+    if (copyPromise) {
+      return copyPromise;
     }
-    isCopied.value = true;
-    copiedTimer = setTimeout(() => {
-      isCopied.value = false;
-    }, 1500);
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      legacyCopyText(text);
+    }
+    copyPromise = new Promise((resolve) => {
+      isCopied.value = true;
+      resolve();
+      clearTimeout(copiedTimer);
+      copiedTimer = setTimeout(() => {
+        isCopied.value = false;
+        copyPromise = null;
+      }, 1500);
+    });
+    return copyPromise;
   }
   return {
     isCopied,
-    renderAs: render,
-    onCopyClick
+    copyText
   };
 }
-function hackCopy(text) {
+function legacyCopyText(text) {
   const textarea = document.createElement("textarea");
   textarea.value = text;
   document.body.appendChild(textarea);

package/dist/composables/use-countdown.d.ts

@@ -1,5 +1,11 @@
 import type { EmitFn } from 'vue';
 export interface Options {
+    /**
+     * 是否启用正计时
+     * Whether to enable count up mode.
+     * @default false
+     */
+    invert?: boolean;
     /**
      * 是否激活
      * Whether the countdown is active.
@@ -37,12 +43,7 @@ export interface Options {
     millisecond?: boolean;
 }
 export declare function useCountdown<T extends Record<string, any>>(props: Options, emits: EmitFn<T>): {
+    clean: () => void;
     reset: () => void;
-    times: import("vue").ComputedRef<{
-        dd: string;
-        hh: string;
-        mm: string;
-        ss: string;
-        ms: string;
-    }>;
+    timestamp: import("vue").ShallowRef<number, number>;
 };

package/dist/composables/use-countdown.js

@@ -1,130 +1,133 @@
-import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
+import { computed, shallowRef, watch } from "vue";
+const UPDATE_INTERVAL = 34;
+const MILLISECOND_LENGTH = 13;
+function normalizeEndTime(endTime) {
+  return String(endTime).length >= MILLISECOND_LENGTH ? endTime : endTime * 1e3;
+}
+function normalizeDuration(duration, millisecond = true) {
+  return millisecond ? Math.round(duration) : Math.round(duration * 1e3);
+}
 export function useCountdown(props, emits) {
-  let pnow = -1;
-  let finished = false;
-  let isPaused = false;
-  const UPDATE_INTERVAL = 34;
-  const TIME_CONSTANTS = {
-    DAY: 864e5,
-    HOUR: 36e5,
-    MINUTE: 6e4,
-    SECOND: 1e3
+  const state = {
+    startTime: -1,
+    isFinished: false,
+    isPaused: false
   };
   const distanceRef = shallowRef(0);
-  const durations = computed(() => {
-    const { endTime, durations: durations2 = 0, millisecond } = props;
+  const durationRef = computed(() => {
+    const { endTime, durations = 0, millisecond, invert } = props;
     if (endTime) {
-      const end = (String(endTime).length >= 13 ? endTime : endTime * 1e3) - Date.now();
-      return Math.max(0, end);
+      const end = normalizeEndTime(endTime) - Date.now();
+      return invert ? Math.max(0, -end) : Math.max(0, end);
     }
-    const time = millisecond ? Math.round(durations2) : Math.round(durations2 * 1e3);
+    const time = normalizeDuration(durations, millisecond);
     return Math.max(0, time);
   });
-  const times = computed(() => {
-    const { dd, hh, mm, ss, ms } = getTimeInfo(distanceRef.value);
-    const formatMs = props.precision === 0 ? 0 : Math.floor(
-      ms / (props.precision === 1 ? 100 : props.precision === 2 ? 10 : 1)
-    );
-    return {
-      dd: String(dd).padStart(2, "0"),
-      hh: String(hh).padStart(2, "0"),
-      mm: String(mm).padStart(2, "0"),
-      ss: String(ss).padStart(2, "0"),
-      ms: formatMs.toString().padStart(props.precision || 0, "0")
-    };
-  });
-  function getTimeInfo(time) {
-    const dd = Math.floor(time / TIME_CONSTANTS.DAY);
-    const hh = Math.floor(time % TIME_CONSTANTS.DAY / TIME_CONSTANTS.HOUR);
-    const mm = Math.floor(time % TIME_CONSTANTS.HOUR / TIME_CONSTANTS.MINUTE);
-    const ss = Math.floor(time % TIME_CONSTANTS.MINUTE / TIME_CONSTANTS.SECOND);
-    const ms = Math.floor(time % TIME_CONSTANTS.SECOND);
-    return { dd, hh, mm, ss, ms };
-  }
-  function getDistance(time) {
-    return durations.value + pnow - time;
+  function getCurrentDistance(currentTime) {
+    if (props.invert) {
+      return currentTime - state.startTime;
+    }
+    return durationRef.value + state.startTime - currentTime;
   }
-  function setDistance() {
-    distanceRef.value = durations.value;
+  function setInitialDistance() {
+    distanceRef.value = props.invert ? 0 : durationRef.value;
   }
-  function finish() {
-    distanceRef.value = 0;
-    finished = true;
-    emits("finish");
+  function checkFinish(distance) {
+    const { durations, invert } = props;
+    if (invert) {
+      return durations !== void 0 && durations > 0 && distance >= durations;
+    }
+    return distance <= 0;
   }
   function reset() {
-    pnow = performance.now();
-    finished = false;
-    isPaused = false;
-    setDistance();
+    state.startTime = performance.now();
+    state.isFinished = false;
+    state.isPaused = false;
+    setInitialDistance();
     emits("reset");
     if (props.active) {
-      frame();
+      startFrameLoop();
     }
   }
   let previousFrameTime = 0;
-  function frame(timestamp) {
-    const distance = getDistance(performance.now());
+  function startFrameLoop(timestamp) {
+    const currentTime = performance.now();
+    const distance = getCurrentDistance(currentTime);
     let isLastFrame = false;
-    if (isPaused) {
+    if (state.isPaused) {
       if (distance < UPDATE_INTERVAL) {
         isLastFrame = true;
       } else {
         return;
       }
     }
-    if (performance.now() - previousFrameTime < UPDATE_INTERVAL && !isLastFrame) {
-      requestAnimationFrame(frame);
+    if (currentTime - previousFrameTime < UPDATE_INTERVAL && !isLastFrame) {
+      requestAnimationFrame(startFrameLoop);
       return;
     }
-    previousFrameTime = timestamp;
-    if (distance <= 0) {
-      finish();
+    previousFrameTime = timestamp || currentTime;
+    if (checkFinish(distance)) {
+      onFinish();
       return;
     }
     distanceRef.value = Math.max(0, distance);
-    requestAnimationFrame(frame);
+    requestAnimationFrame(startFrameLoop);
   }
-  const unwatchActive = watch(
-    () => props.active,
-    (isActive) => {
-      emits("change", isActive);
-      if (isActive) {
-        if (isPaused) {
-          pnow = performance.now() - durations.value + distanceRef.value;
-        } else {
-          pnow = performance.now();
-        }
-        isPaused = false;
-        if (finished && props.autoReset) {
-          reset();
-        } else if (finished) {
-          return;
-        }
-        frame();
+  function onFinish() {
+    const { durations, invert } = props;
+    if (invert && durations !== void 0 && durations > 0) {
+      distanceRef.value = durations;
+    } else if (!invert) {
+      distanceRef.value = 0;
+    }
+    state.isFinished = true;
+    emits("finish");
+  }
+  function onActiveChange(isActive) {
+    emits("change", isActive);
+    if (isActive) {
+      if (state.isPaused) {
+        state.startTime = performance.now() - distanceRef.value;
       } else {
-        isPaused = true;
+        state.startTime = performance.now();
+        if (props.invert) {
+          distanceRef.value = 0;
+        }
       }
-    },
-    { immediate: true }
+      state.isPaused = false;
+      if (state.isFinished && props.autoReset) {
+        reset();
+      } else if (state.isFinished) {
+        return;
+      }
+      startFrameLoop();
+    } else {
+      state.isPaused = true;
+    }
+  }
+  function onTimeChange() {
+    setInitialDistance();
+    state.isFinished = false;
+    if (props.active) {
+      reset();
+    }
+  }
+  const unwatchActive = watch(
+    () => props.active,
+    (isActive) => onActiveChange(isActive || false)
   );
   const unwatchTimes = watch(
     () => [props.durations, props.endTime],
-    () => {
-      setDistance();
-      finished = false;
-      if (props.active) {
-        reset();
-      }
-    },
-    { immediate: true }
+    () => onTimeChange()
   );
-  onBeforeUnmount(() => {
+  function clean() {
     unwatchTimes();
     unwatchActive();
-  });
+  }
+  setInitialDistance();
   return {
+    clean,
     reset,
-    times
+    timestamp: distanceRef
   };
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue';
 export * from './components/index.js';
 export * from './composables/index.js';
-export declare const version = "0.0.31";
+export declare const version = "0.0.32";
 export default function install(app: App, prefix?: string): void;

package/dist/index.js

@@ -1,7 +1,7 @@
 import * as components from "./components/index.js";
 export * from "./components/index.js";
 export * from "./composables/index.js";
-export const version = "0.0.31";
+export const version = "0.0.32";
 export default function install(app, prefix = "P") {
   Object.entries(components).forEach(([key, component]) => {
     app.component(`${prefix}${key}`, component);

package/dist/styles/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-700:hsl(var(--color-red-700-value));--color-red-800:hsl(var(--color-red-800-value));--color-red-900:hsl(var(--color-red-900-value));--color-amber-600:hsl(var(--color-amber-600-value));--color-amber-700:hsl(var(--color-amber-700-value));--color-amber-800:hsl(var(--color-amber-800-value));--color-yellow-500:oklch(79.5% .184 86.047);--color-green-300:hsl(var(--color-green-300-value));--color-green-500:hsl(var(--color-green-500-value));--color-green-700:hsl(var(--color-green-700-value));--color-green-900:hsl(var(--color-green-900-value));--color-violet-100:oklch(94.3% .029 294.588);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-400:oklch(70.2% .183 293.541);--color-violet-900:oklch(38% .189 293.745);--color-gray-100:hsl(var(--color-gray-100-value));--color-gray-200:hsl(var(--color-gray-200-value));--color-gray-300:hsl(var(--color-gray-300-value));--color-gray-500:hsl(var(--color-gray-500-value));--color-gray-600:hsl(var(--color-gray-600-value));--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-xs:.125rem;--animate-spin:spin 1s linear infinite;--blur-xs:4px;--default-transition-duration:.2s;--default-transition-timing-function:ease-in-out;--color-primary:hsl(var(--primary));--color-border:hsl(var(--color-gray-300-value));--color-foreground:hsl(var(--color-gray-1000-value));--color-foreground-secondary:hsl(var(--color-gray-900-value));--color-background-100:hsl(var(--background-100-value));--color-gray-alpha-100:var(--color-gray-alpha-100-value);--color-gray-alpha-200:var(--color-gray-alpha-200-value);--color-gray-alpha-300:var(--color-gray-alpha-300-value);--color-gray-alpha-400:var(--color-gray-alpha-400-value);--color-gray-alpha-500:var(--color-gray-alpha-500-value);--color-gray-alpha-600:var(--color-gray-alpha-600-value);--shadow-border-default:var(--shadow-border-default-value);--shadow-border-small:var(--shadow-border-small-value);--shadow-border-medium:var(--shadow-border-medium-value);--shadow-border-large:var(--shadow-border-large-value);--shadow-border-tooltip:var(--shadow-border-tooltip-value);--shadow-border-menu:var(--shadow-border-menu-value);--shadow-border-modal:var(--shadow-border-modal-value);--shadow-border-fullscreen:var(--shadow-border-fullscreen-value)}}@layer base{*{border-color:hsl(var(--color-gray-300-value))}}@layer components{.pxd-input--border{border:1px solid var(--border-color,var(--color-gray-alpha-300))}.pxd-input--border:not(.is-disabled,.is-readonly):hover,.pxd-input--border:not(.is-disabled,.is-readonly):focus-within{--border-color:var(--color-primary)}.pxd-input--border:not(.is-disabled,.is-readonly):focus-within{box-shadow:0 0 0 3px hsla(var(--primary),.2)}.pxd-input--border.is-error:not(:focus)::placeholder{color:var(--color-red-900)!important}.pxd-input--border.is-error,.pxd-input--border.is-error:focus-within{--border-color:hsl(var(--color-red-900-value));box-shadow:0 0 0 3px hsl(var(--color-red-300-value))}.pxd-input--border.is-error:focus-within,.pxd-input--border.is-error:not(.is-disabled,.is-readonly):hover{--border-color:hsl(var(--color-red-900-value));box-shadow:0 0 0 3px hsl(var(--color-red-500-value))}.pxd-form--label{max-width:100%;margin-bottom:calc(var(--spacing)*1.5);font-size:var(--text-sm);color:var(--color-foreground-secondary)}}@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.smallest{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.-inset-px{inset:-1px}.inset-0{inset:calc(var(--spacing)*0)}.-top-1{top:calc(var(--spacing)*-1)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.-right-5{right:calc(var(--spacing)*-5)}.right-0{right:calc(var(--spacing)*0)}.right-1{right:calc(var(--spacing)*1)}.-bottom-1{bottom:calc(var(--spacing)*-1)}.bottom-0{bottom:calc(var(--spacing)*0)}.-left-1{left:calc(var(--spacing)*-1)}.-left-5{left:calc(var(--spacing)*-5)}.left-0{left:calc(var(--spacing)*0)}.left-px{left:1px}.isolate{isolation:isolate}.z-\(--z\,10\){z-index:var(--z,10)}.z-0{z-index:0}.z-1{z-index:1}.z-10{z-index:10}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.container\!{width:100%!important}@media (min-width:40rem){.container\!{max-width:40rem!important}}@media (min-width:48rem){.container\!{max-width:48rem!important}}@media (min-width:64rem){.container\!{max-width:64rem!important}}@media (min-width:80rem){.container\!{max-width:80rem!important}}@media (min-width:96rem){.container\!{max-width:96rem!important}}.m-0{margin:calc(var(--spacing)*0)}.mx-auto{margin-inline:auto}.mx-px{margin-inline:1px}.mt-\(--mt\){margin-top:var(--mt)}.mt-1\.5{margin-top:calc(var(--spacing)*1.5)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-1\.5{margin-right:calc(var(--spacing)*1.5)}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-3{margin-right:calc(var(--spacing)*3)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.-ml-0\.5{margin-left:calc(var(--spacing)*-.5)}.-ml-3{margin-left:calc(var(--spacing)*-3)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-1\.5{margin-left:calc(var(--spacing)*1.5)}.ml-3{margin-left:calc(var(--spacing)*3)}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.scrollbar-hidden::-webkit-scrollbar{display:none}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.size-\(--size\){width:var(--size);height:var(--size)}.size-1\/2{width:50%;height:50%}.size-3{width:calc(var(--spacing)*3);height:calc(var(--spacing)*3)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-15{width:calc(var(--spacing)*15);height:calc(var(--spacing)*15)}.size-\[calc\(1em\/4\)\]{width:.25em;height:.25em}.size-em{width:1em;height:1em}.size-full{width:100%;height:100%}.size-max{width:max-content;height:max-content}.h-\(--h\){height:var(--h)}.h-\(--scrollbar-size\){height:var(--scrollbar-size)}.h-0\.5{height:calc(var(--spacing)*.5)}.h-2{height:calc(var(--spacing)*2)}.h-2\.5{height:calc(var(--spacing)*2.5)}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-4\.5{height:calc(var(--spacing)*4.5)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7\.5{height:calc(var(--spacing)*7.5)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-full{height:100%}.h-max{height:max-content}.max-h-68{max-height:calc(var(--spacing)*68)}.max-h-full{max-height:100%}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-3\.5{min-height:calc(var(--spacing)*3.5)}.min-h-7\.5{min-height:calc(var(--spacing)*7.5)}.min-h-9{min-height:calc(var(--spacing)*9)}.min-h-10{min-height:calc(var(--spacing)*10)}.min-h-13{min-height:calc(var(--spacing)*13)}.min-h-\[inherit\]{min-height:inherit}.w-\(--scrollbar-size\){width:var(--scrollbar-size)}.w-\(--w\){width:var(--w)}.w-1\.5{width:calc(var(--spacing)*1.5)}.w-2{width:calc(var(--spacing)*2)}.w-2\.5{width:calc(var(--spacing)*2.5)}.w-3{width:calc(var(--spacing)*3)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-7\.5{width:calc(var(--spacing)*7.5)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-11{width:calc(var(--spacing)*11)}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.max-w-full{max-width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-3{min-width:calc(var(--spacing)*3)}.min-w-4{min-width:calc(var(--spacing)*4)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-separate{border-collapse:separate}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-\(--tx\){--tw-translate-x:var(--tx);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-1\/2{--tw-translate-x:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/3{--tw-translate-y:calc(calc(1/3*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-z-0{--tw-translate-z:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)var(--tw-translate-z)}.scale-125{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-130{--tw-scale-x:130%;--tw-scale-y:130%;--tw-scale-z:130%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-y-90{--tw-scale-y:90%;scale:var(--tw-scale-x)var(--tw-scale-y)}.-rotate-\[85deg\]{rotate:-85deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.transform-gpu{transform:translateZ(0)var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-manipulation{touch-action:manipulation}.touch-none{touch-action:none}.resize{resize:both}.resize-none{resize:none}.list-none{list-style-type:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-evenly{justify-content:space-evenly}.justify-start{justify-content:flex-start}.justify-stretch{justify-content:stretch}.gap-\(--gap-xs\){gap:var(--gap-xs)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-visible{overflow:visible}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-inherit{border-radius:inherit}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.rounded-xs{border-radius:var(--radius-xs)}.rounded-t-lg{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.rounded-l-inherit{border-top-left-radius:inherit;border-bottom-left-radius:inherit}.rounded-r-inherit{border-top-right-radius:inherit;border-bottom-right-radius:inherit}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-amber-100{border-color:hsl(var(--color-amber-100-value))}.border-amber-500{border-color:hsl(var(--color-amber-500-value))}.border-background-100{border-color:hsl(var(--background-100-value))}.border-blue-100{border-color:hsl(var(--color-blue-100-value))}.border-blue-500{border-color:hsl(var(--color-blue-500-value))}.border-gray-100{border-color:hsl(var(--color-gray-100-value))}.border-gray-300{border-color:hsl(var(--color-gray-300-value))}.border-gray-400{border-color:hsl(var(--color-gray-400-value))}.border-gray-500{border-color:hsl(var(--color-gray-500-value))}.border-gray-600{border-color:hsl(var(--color-gray-600-value))}.border-gray-alpha-300{border-color:var(--color-gray-alpha-300-value)}.border-gray-alpha-400{border-color:var(--color-gray-alpha-400-value)}.border-input{border-color:var(--color-gray-alpha-300)}.border-primary{border-color:hsl(var(--primary))}.border-red-100{border-color:hsl(var(--color-red-100-value))}.border-red-500{border-color:hsl(var(--color-red-500-value))}.border-teal-100{border-color:hsl(var(--color-teal-100-value))}.border-teal-400{border-color:hsl(var(--color-teal-400-value))}.border-transparent{border-color:#0000}.border-violet-100{border-color:var(--color-violet-100)}.border-violet-400{border-color:var(--color-violet-400)}.\!bg-primary{background-color:hsl(var(--primary))!important}.bg-\(--color\){background-color:var(--color)}.bg-\(--ibc\){background-color:var(--ibc)}.bg-\(--mc\){background-color:var(--mc)}.bg-\(--scrollbar-color\){background-color:var(--scrollbar-color)}.bg-\[\#26C941\]{background-color:#26c941}.bg-\[\#FE5F57\]{background-color:#fe5f57}.bg-\[\#FEBB2E\]{background-color:#febb2e}.bg-amber-200{background-color:hsl(var(--color-amber-200-value))}.bg-amber-700{background-color:hsl(var(--color-amber-700-value))}.bg-amber-800{background-color:hsl(var(--color-amber-800-value))}.bg-background-100{background-color:hsl(var(--background-100-value))}.bg-background-200{background-color:hsl(var(--background-200-value))}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-blue-200{background-color:hsl(var(--color-blue-200-value))}.bg-blue-700{background-color:hsl(var(--color-blue-700-value))}.bg-border{background-color:hsl(var(--color-gray-300-value))}.bg-current{background-color:currentColor}.bg-gray-100{background-color:hsl(var(--color-gray-100-value))}.bg-gray-200{background-color:hsl(var(--color-gray-200-value))}.bg-gray-600{background-color:hsl(var(--color-gray-600-value))}.bg-gray-700{background-color:hsl(var(--color-gray-700-value))}.bg-gray-900{background-color:hsl(var(--color-gray-900-value))}.bg-gray-1000{background-color:hsl(var(--color-gray-1000-value))}.bg-gray-alpha-100{background-color:var(--color-gray-alpha-100-value)}.bg-gray-alpha-200{background-color:var(--color-gray-alpha-200-value)}.bg-gray-alpha-400{background-color:var(--color-gray-alpha-400-value)}.bg-green-200{background-color:hsl(var(--color-green-200-value))}.bg-green-600{background-color:hsl(var(--color-green-600-value))}.bg-green-700{background-color:hsl(var(--color-green-700-value))}.bg-green-800{background-color:hsl(var(--color-green-800-value))}.bg-pink-200{background-color:hsl(var(--color-pink-200-value))}.bg-pink-700{background-color:hsl(var(--color-pink-700-value))}.bg-primary{background-color:hsl(var(--primary))}.bg-purple-200{background-color:hsl(var(--color-purple-200-value))}.bg-purple-700{background-color:hsl(var(--color-purple-700-value))}.bg-red-200{background-color:hsl(var(--color-red-200-value))}.bg-red-600{background-color:hsl(var(--color-red-600-value))}.bg-red-700{background-color:hsl(var(--color-red-700-value))}.bg-red-800{background-color:hsl(var(--color-red-800-value))}.bg-teal-200{background-color:hsl(var(--color-teal-200-value))}.bg-teal-700{background-color:hsl(var(--color-teal-700-value))}.bg-transparent{background-color:#0000}.bg-violet-200{background-color:var(--color-violet-200)}.bg-yellow-500{background-color:var(--color-yellow-500)}.bg-cover{background-size:cover}.object-cover{object-fit:cover}.\!p-0{padding:calc(var(--spacing)*0)!important}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-2{padding:calc(var(--spacing)*2)}.p-2\.5{padding:calc(var(--spacing)*2.5)}.p-3{padding:calc(var(--spacing)*3)}.p-3\.5{padding:calc(var(--spacing)*3.5)}.p-4{padding:calc(var(--spacing)*4)}.p-px{padding:1px}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-3\.5{padding-inline:calc(var(--spacing)*3.5)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-18{padding-inline:calc(var(--spacing)*18)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-12{padding-block:calc(var(--spacing)*12)}.py-\[3px\]{padding-block:3px}.pr-0{padding-right:calc(var(--spacing)*0)}.pr-0\.5{padding-right:calc(var(--spacing)*.5)}.pr-1{padding-right:calc(var(--spacing)*1)}.pr-1\.5{padding-right:calc(var(--spacing)*1.5)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-2\.5{padding-right:calc(var(--spacing)*2.5)}.pr-3\.5{padding-right:calc(var(--spacing)*3.5)}.pr-5{padding-right:calc(var(--spacing)*5)}.pr-6{padding-right:calc(var(--spacing)*6)}.pr-9{padding-right:calc(var(--spacing)*9)}.pr-14{padding-right:calc(var(--spacing)*14)}.pr-\[3px\]{padding-right:3px}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pl-0\.5{padding-left:calc(var(--spacing)*.5)}.pl-1\.5{padding-left:calc(var(--spacing)*1.5)}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-2\.5{padding-left:calc(var(--spacing)*2.5)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-3\.5{padding-left:calc(var(--spacing)*3.5)}.pl-6{padding-left:calc(var(--spacing)*6)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[13px\]{font-size:13px}.leading-4{--tw-leading:calc(var(--spacing)*4);line-height:calc(var(--spacing)*4)}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-balance{text-wrap:balance}.text-nowrap{text-wrap:nowrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-amber-900{color:hsl(var(--color-amber-900-value))}.text-background-100{color:hsl(var(--background-100-value))}.text-black{color:var(--color-black)}.text-blue-900{color:hsl(var(--color-blue-900-value))}.text-foreground{color:hsl(var(--color-gray-1000-value))}.text-foreground-secondary{color:hsl(var(--color-gray-900-value))}.text-gray-100{color:hsl(var(--color-gray-100-value))}.text-gray-500{color:hsl(var(--color-gray-500-value))}.text-gray-700{color:hsl(var(--color-gray-700-value))}.text-gray-900{color:hsl(var(--color-gray-900-value))}.text-gray-1000{color:hsl(var(--color-gray-1000-value))}.text-green-900{color:hsl(var(--color-green-900-value))}.text-pink-900{color:hsl(var(--color-pink-900-value))}.text-primary{color:hsl(var(--primary))}.text-purple-900{color:hsl(var(--color-purple-900-value))}.text-red-900{color:hsl(var(--color-red-900-value))}.text-teal-900{color:hsl(var(--color-teal-900-value))}.text-violet-900{color:var(--color-violet-900)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.\!no-underline{text-decoration-line:none!important}.underline{text-decoration-line:underline}.opacity-\(--sv\){opacity:var(--sv)}.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-50{opacity:.5}.opacity-100{opacity:1}.mix-blend-overlay{mix-blend-mode:overlay}.shadow-border-menu{--tw-shadow:var(--shadow-border-menu-value);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-border-modal{--tw-shadow:var(--shadow-border-modal-value);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-border-small{--tw-shadow:var(--shadow-border-small-value);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-border-tooltip{--tw-shadow:var(--shadow-border-tooltip-value);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.peer:focus-visible~.peer-focus-ring,.self-focus-ring:focus-visible{box-shadow:0 0 0 2px var(--color-background-100),0 0 0 4px hsl(var(--ring))}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-xs{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.duration-50{--tw-duration:50ms;transition-duration:50ms}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.will-change-transform{will-change:transform}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[--book-width\:var\(--width-xs\)\]{--book-width:var(--width-xs)}.\[--mt\:2px\]{--mt:2px}.\[--mt\:4px\]{--mt:4px}.\[--tx\:0\]{--tx:0}.transform-3d{transform-style:preserve-3d}@media (hover:hover){.group-hover\:text-foreground:is(:where(.group):hover *){color:hsl(var(--color-gray-1000-value))}.group-hover\/checkbox\:bg-gray-200:is(:where(.group\/checkbox):hover *){background-color:hsl(var(--color-gray-200-value))}.group-hover\/collapse\:will-change-\[height\]:is(:where(.group\/collapse):hover *){will-change:height}.group-hover\/radio\:bg-gray-200:is(:where(.group\/radio):hover *){background-color:hsl(var(--color-gray-200-value))}.group-hover\/toggle\:will-change-transform:is(:where(.group\/toggle):hover *){will-change:transform}}.group-data-\[direction\=horizontal\]\:flex:is(:where(.group)[data-direction=horizontal] *){display:flex}.group-data-\[direction\=vertical\]\:rotate-90:is(:where(.group)[data-direction=vertical] *){rotate:90deg}.group-data-\[header\=true\]\:pt-6:is(:where(.group)[data-header=true] *){padding-top:calc(var(--spacing)*6)}.group-data-\[indicator-position\=left\]\:flex-col:is(:where(.group)[data-indicator-position=left] *),.group-data-\[indicator-position\=right\]\:flex-col:is(:where(.group)[data-indicator-position=right] *){flex-direction:column}.group-data-\[state\=open\]\/collapse\:-rotate-180:is(:where(.group\/collapse)[data-state=open] *){rotate:-180deg}.peer-checked\:bg-\(--abc\):is(:where(.peer):checked~*){background-color:var(--abc)}.peer-checked\:bg-gray-100:is(:where(.peer):checked~*){background-color:hsl(var(--color-gray-100-value))}.peer-checked\:text-foreground:is(:where(.peer):checked~*){color:hsl(var(--color-gray-1000-value))}.peer-checked\:opacity-50:is(:where(.peer):checked~*){opacity:.5}.peer-checked\:opacity-100:is(:where(.peer):checked~*){opacity:1}.peer-checked\:\[--tx\:100\%\]:is(:where(.peer):checked~*){--tx:100%}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:text-gray-800:is(:where(.peer):disabled~*){color:hsl(var(--color-gray-800-value))}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.placeholder\:text-gray-600::placeholder{color:hsl(var(--color-gray-600-value))}.placeholder\:select-none::placeholder{-webkit-user-select:none;user-select:none}.before\:content-\[attr\(data-prompt\)\]:before{content:var(--tw-content);--tw-content:attr(data-prompt);content:var(--tw-content)}.before\:select-none:before{content:var(--tw-content);-webkit-user-select:none;user-select:none}.after\:size-2:after{content:var(--tw-content);width:calc(var(--spacing)*2);height:calc(var(--spacing)*2)}.after\:scale-40:after{content:var(--tw-content);--tw-scale-x:40%;--tw-scale-y:40%;--tw-scale-z:40%;scale:var(--tw-scale-x)var(--tw-scale-y)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:bg-gray-500:after{content:var(--tw-content);background-color:hsl(var(--color-gray-500-value))}.after\:bg-primary:after{content:var(--tw-content);background-color:hsl(var(--primary))}.after\:opacity-0:after{content:var(--tw-content);opacity:0}.after\:content-\[attr\(aria-label\)\]:after{content:var(--tw-content);--tw-content:attr(aria-label);content:var(--tw-content)}.peer-checked\:after\:scale-100:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.peer-checked\:after\:opacity-100:is(:where(.peer):checked~*):after{content:var(--tw-content);opacity:1}.first\:justify-start:first-child{justify-content:flex-start}.last\:justify-end:last-child{justify-content:flex-end}.empty\:hidden:empty{display:none}.empty\:py-3:empty{padding-block:calc(var(--spacing)*3)}@media (hover:hover){.hover\:z-1:hover{z-index:1}.hover\:z-10:hover{z-index:10}.hover\:scale-130:hover{--tw-scale-x:130%;--tw-scale-y:130%;--tw-scale-z:130%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:border-gray-500:hover{border-color:hsl(var(--color-gray-500-value))}.hover\:bg-\(--scrollbar-hover-color\):hover{background-color:var(--scrollbar-hover-color)}.hover\:bg-amber-700:hover{background-color:hsl(var(--color-amber-700-value))}.hover\:bg-background-hover:hover{background-color:var(--color-gray-alpha-200-value)}.hover\:bg-gray-100:hover{background-color:hsl(var(--color-gray-100-value))}.hover\:bg-gray-alpha-400:hover{background-color:var(--color-gray-alpha-400-value)}.hover\:bg-green-700:hover{background-color:hsl(var(--color-green-700-value))}.hover\:bg-primary\/80:hover{background-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab,hsl(var(--primary))80%,transparent)}}.hover\:bg-red-700:hover{background-color:hsl(var(--color-red-700-value))}.hover\:text-foreground:hover{color:hsl(var(--color-gray-1000-value))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-60:hover{opacity:.6}.hover\:will-change-transform:hover{will-change:transform}.hover\:\[--sv\:1\]:hover{--sv:1}.hover\:after\:bg-primary\/20:hover:after{content:var(--tw-content);background-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.hover\:after\:bg-primary\/20:hover:after{background-color:color-mix(in oklab,hsl(var(--primary))20%,transparent)}}}.focus\:placeholder\:opacity-0:focus::placeholder{opacity:0}.active\:z-10:active{z-index:10}.active\:scale-130:active{--tw-scale-x:130%;--tw-scale-y:130%;--tw-scale-z:130%;scale:var(--tw-scale-x)var(--tw-scale-y)}.active\:bg-\(--scrollbar-hover-color\):active{background-color:var(--scrollbar-hover-color)}.active\:bg-amber-900:active{background-color:hsl(var(--color-amber-900-value))}.active\:bg-background-active:active{background-color:var(--color-gray-alpha-300-value)}.active\:bg-gray-100:active{background-color:hsl(var(--color-gray-100-value))}.active\:bg-gray-900:active{background-color:hsl(var(--color-gray-900-value))}.active\:bg-green-900:active{background-color:hsl(var(--color-green-900-value))}.active\:bg-red-900:active{background-color:hsl(var(--color-red-900-value))}.active\:opacity-80:active{opacity:.8}.active\:opacity-100:active{opacity:1}.active\:select-none:active{-webkit-user-select:none;user-select:none}.active\:after\:bg-primary\/30:active:after{content:var(--tw-content);background-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.active\:after\:bg-primary\/30:active:after{background-color:color-mix(in oklab,hsl(var(--primary))30%,transparent)}}@media (hover:hover){.enabled\:hover\:bg-background-hover:enabled:hover{background-color:var(--color-gray-alpha-200-value)}.enabled\:hover\:text-gray-1000:enabled:hover{color:hsl(var(--color-gray-1000-value))}}.enabled\:active\:bg-background-active:enabled:active{background-color:var(--color-gray-alpha-300-value)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-100:disabled{background-color:hsl(var(--color-gray-100-value))}.disabled\:text-gray-700:disabled{color:hsl(var(--color-gray-700-value))}.disabled\:placeholder\:text-gray-400:disabled::placeholder{color:hsl(var(--color-gray-400-value))}.data-\[blur\=true\]\:backdrop-blur-xs[data-blur=true]{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.data-\[direction\=vertical\]\:flex-col[data-direction=vertical]{flex-direction:column}.data-\[enterable\=false\]\:pointer-events-none[data-enterable=false]{pointer-events:none}.data-\[selected\=true\]\:bg-gray-alpha-100[data-selected=true]{background-color:var(--color-gray-alpha-100-value)}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-spin{animation:var(--animate-spin)}.motion-safe\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:duration-200{--tw-duration:.2s;transition-duration:.2s}}.after\:motion-safe\:transition-colors:after{content:var(--tw-content)}@media (prefers-reduced-motion:no-preference){.after\:motion-safe\:transition-colors:after{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}}@media (prefers-reduced-motion:reduce){.motion-reduce\:opacity-20{opacity:.2}.motion-reduce\:opacity-50{opacity:.5}.motion-reduce\:opacity-80{opacity:.8}}@media not all and (min-width:64rem){.max-lg\:hidden{display:none}}@media not all and (min-width:48rem){.max-md\:hidden{display:none}.max-md\:first\:flex-none:first-child{flex:none}}@media (min-width:40rem){.sm\:pointer-events-auto{pointer-events:auto}.sm\:top-1\/2{top:50%}.sm\:left-1\/2{left:50%}.sm\:w-\[calc\(var\(--w\,540\)\*1px\)\]{width:calc(var(--w,540)*1px)}.sm\:max-w-\(--max-width\){max-width:var(--max-width)}.sm\:-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.sm\:-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.sm\:flex-col{flex-direction:column}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-\(--gap-sm\){gap:var(--gap-sm)}.sm\:rounded-xl{border-radius:calc(var(--radius) + 4px)}.sm\:bg-background-100\/80{background-color:hsl(var(--background-100-value))}@supports (color:color-mix(in lab, red, red)){.sm\:bg-background-100\/80{background-color:color-mix(in oklab,hsl(var(--background-100-value))80%,transparent)}}.sm\:p-0{padding:calc(var(--spacing)*0)}.sm\:py-6{padding-block:calc(var(--spacing)*6)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:\[--book-width\:var\(--width-sm\)\]{--book-width:var(--width-sm)}.sm\:\[--o\:0\]{--o:0}.sm\:\[--sv\:0\]{--sv:0}.sm\:\[--t\:scale\(0\.98\)\]{--t:scale(.98)}}@media (min-width:48rem){.md\:flex-col{flex-direction:column}.md\:flex-row{flex-direction:row}.md\:gap-\(--gap-md\){gap:var(--gap-md)}.md\:gap-6{gap:calc(var(--spacing)*6)}.md\:\[--book-width\:var\(--width-md\)\]{--book-width:var(--width-md)}.md\:first\:max-w-\[140px\]:first-child,.md\:last\:max-w-\[140px\]:last-child{max-width:140px}}@media (min-width:64rem){.lg\:max-w-xs{max-width:var(--container-xs)}.lg\:flex-col{flex-direction:column}.lg\:flex-row{flex-direction:row}.lg\:gap-\(--gap-lg\){gap:var(--gap-lg)}.lg\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.lg\:\[--book-width\:var\(--width-lg\)\]{--book-width:var(--width-lg)}}@media (min-width:80rem){.xl\:flex-col{flex-direction:column}.xl\:flex-row{flex-direction:row}.xl\:gap-\(--gap-xl\){gap:var(--gap-xl)}.xl\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.xl\:\[--book-width\:var\(--width-xl\)\]{--book-width:var(--width-xl)}}.dark\:bg-background-100:is(.dark *){background-color:hsl(var(--background-100-value))}.dark\:bg-background-200:is(.dark *){background-color:hsl(var(--background-200-value))}.dark\:text-gray-100:is(.dark *){color:hsl(var(--color-gray-100-value))}.dark\:text-gray-1000:is(.dark *){color:hsl(var(--color-gray-1000-value))}.\[\&\:nth-child\(n\+2\)\]\:-ml-3:nth-child(n+2){margin-left:calc(var(--spacing)*-3)}}:root{--radius:.5rem;--background-100-value:0,0%,100%;--background-200-value:0,0%,97%;--ring:var(--color-blue-900-value);--primary:var(--color-gray-1000-value);--color-gray-alpha-100-value:#0000000d;--color-gray-alpha-200-value:#00000014;--color-gray-alpha-300-value:#0000001f;--color-gray-alpha-400-value:#0000002b;--color-gray-alpha-500-value:#00000036;--color-gray-alpha-600-value:#00000057;--color-gray-alpha-700-value:#00000070;--color-gray-alpha-800-value:#00000082;--color-gray-alpha-900-value:#0000009c;--color-gray-alpha-1000-value:#000000e8;--color-gray-100-value:0,0%,95%;--color-gray-200-value:0,0%,93%;--color-gray-300-value:0,0%,90%;--color-gray-400-value:0,0%,85%;--color-gray-500-value:0,0%,79%;--color-gray-600-value:0,0%,66%;--color-gray-700-value:0,0%,56%;--color-gray-800-value:0,0%,49%;--color-gray-900-value:0,0%,40%;--color-gray-1000-value:0,0%,9%;--color-blue-100-value:212,100%,97%;--color-blue-200-value:210,100%,96%;--color-blue-300-value:210,100%,94%;--color-blue-400-value:209,100%,90%;--color-blue-500-value:209,100%,80%;--color-blue-600-value:208,100%,66%;--color-blue-700-value:212,100%,48%;--color-blue-800-value:212,100%,41%;--color-blue-900-value:211,100%,42%;--color-blue-1000-value:211,100%,15%;--color-red-100-value:0,100%,97%;--color-red-200-value:0,100%,96%;--color-red-300-value:0,100%,95%;--color-red-400-value:0,90%,92%;--color-red-500-value:0,82%,85%;--color-red-600-value:359,90%,71%;--color-red-700-value:358,75%,59%;--color-red-800-value:358,70%,52%;--color-red-900-value:358,66%,48%;--color-red-1000-value:355,49%,15%;--color-amber-100-value:39,100%,95%;--color-amber-200-value:44,100%,92%;--color-amber-300-value:43,96%,90%;--color-amber-400-value:42,100%,78%;--color-amber-500-value:38,100%,71%;--color-amber-600-value:36,90%,62%;--color-amber-700-value:39,100%,57%;--color-amber-800-value:35,100%,52%;--color-amber-900-value:30,100%,32%;--color-amber-1000-value:20,79%,17%;--color-green-100-value:120,60%,96%;--color-green-200-value:120,60%,95%;--color-green-300-value:120,60%,91%;--color-green-400-value:122,60%,86%;--color-green-500-value:124,60%,75%;--color-green-600-value:125,60%,64%;--color-green-700-value:131,41%,46%;--color-green-800-value:132,43%,39%;--color-green-900-value:133,50%,32%;--color-green-1000-value:128,29%,15%;--color-teal-100-value:169,70%,96%;--color-teal-200-value:167,70%,94%;--color-teal-300-value:168,70%,90%;--color-teal-400-value:170,70%,85%;--color-teal-500-value:170,70%,72%;--color-teal-600-value:170,70%,57%;--color-teal-700-value:173,80%,36%;--color-teal-800-value:173,83%,30%;--color-teal-900-value:174,91%,25%;--color-teal-1000-value:171,80%,13%;--color-purple-100-value:276,100%,97%;--color-purple-200-value:277,87%,97%;--color-purple-300-value:274,78%,95%;--color-purple-400-value:276,71%,92%;--color-purple-500-value:274,70%,82%;--color-purple-600-value:273,72%,73%;--color-purple-700-value:272,51%,54%;--color-purple-800-value:272,47%,45%;--color-purple-900-value:274,71%,43%;--color-purple-1000-value:276,100%,15%;--color-pink-100-value:330,100%,96%;--color-pink-200-value:340,90%,96%;--color-pink-300-value:340,82%,94%;--color-pink-400-value:341,76%,91%;--color-pink-500-value:340,75%,84%;--color-pink-600-value:341,75%,73%;--color-pink-700-value:336,80%,58%;--color-pink-800-value:336,74%,51%;--color-pink-900-value:336,65%,45%;--color-pink-1000-value:333,74%,15%;--shadow-border-default-value:0 0 0 1px #00000014;--shadow-border-small-value:0 0 0 1px #00000014,0 1px 2px 0 #0000000a;--shadow-border-medium-value:0 0 0 1px #00000014,0px 2px 2px #0000000a,0px 8px 8px -8px #0000000a;--shadow-border-large-value:0 0 0 1px #00000014,0px 2px 2px #0000000a,0px 8px 16px -4px #0000000a;--shadow-border-tooltip-value:0 0 0 1px #00000014,0px 1px 1px #00000005,0px 4px 8px #0000000a;--shadow-border-menu-value:0 0 0 1px #00000014,0px 1px 1px #00000005,0px 4px 8px -4px #0000000a,0px 16px 24px -8px #0000000f;--shadow-border-modal-value:0 0 0 1px #00000014,0px 1px 1px #00000005,0px 8px 16px -4px #0000000a,0px 24px 32px -8px #0000000f;--shadow-border-fullscreen-value:0 0 0 1px #00000014,0px 1px 1px #00000005,0px 8px 16px -4px #0000000a,0px 24px 32px -8px #0000000f;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;text-autospace:auto;font-synthesis:none;color-scheme:light;background-color:var(--color-background-100);color:var(--color-foreground)}:root.dark{--background-100-value:0,0%,5%;--background-200-value:0,0%,0%;--color-gray-alpha-100-value:#ffffff0f;--color-gray-alpha-200-value:#ffffff17;--color-gray-alpha-300-value:#ffffff21;--color-gray-alpha-400-value:#ffffff24;--color-gray-alpha-500-value:#ffffff3d;--color-gray-alpha-600-value:#ffffff82;--color-gray-alpha-700-value:#ffffff8a;--color-gray-alpha-800-value:#ffffff78;--color-gray-alpha-900-value:#ffffff9c;--color-gray-alpha-1000-value:#ffffffeb;--color-gray-100-value:0,0%,10%;--color-gray-200-value:0,0%,12%;--color-gray-300-value:0,0%,16%;--color-gray-400-value:0,0%,18%;--color-gray-500-value:0,0%,27%;--color-gray-600-value:0,0%,53%;--color-gray-700-value:0,0%,56%;--color-gray-800-value:0,0%,49%;--color-gray-900-value:0,0%,63%;--color-gray-1000-value:0,0%,93%;--color-blue-100-value:216,50%,12%;--color-blue-200-value:214,59%,15%;--color-blue-300-value:213,71%,20%;--color-blue-400-value:212,78%,23%;--color-blue-500-value:211,86%,27%;--color-blue-600-value:206,100%,50%;--color-blue-700-value:212,100%,48%;--color-blue-800-value:212,100%,41%;--color-blue-900-value:210,100%,66%;--color-blue-1000-value:206,100%,96%;--color-red-100-value:357,37%,12%;--color-red-200-value:357,46%,16%;--color-red-300-value:356,54%,22%;--color-red-400-value:357,55%,26%;--color-red-500-value:357,60%,32%;--color-red-600-value:358,75%,59%;--color-red-700-value:358,75%,59%;--color-red-800-value:358,69%,52%;--color-red-900-value:358,100%,69%;--color-red-1000-value:353,90%,96%;--color-amber-100-value:35,100%,8%;--color-amber-200-value:32,100%,10%;--color-amber-300-value:33,100%,15%;--color-amber-400-value:35,100%,17%;--color-amber-500-value:35,91%,22%;--color-amber-600-value:39,85%,49%;--color-amber-700-value:39,100%,57%;--color-amber-800-value:35,100%,52%;--color-amber-900-value:39,90%,50%;--color-amber-1000-value:40,94%,93%;--color-green-100-value:136,50%,9%;--color-green-200-value:137,50%,12%;--color-green-300-value:136,50%,14%;--color-green-400-value:135,70%,16%;--color-green-500-value:135,70%,23%;--color-green-600-value:135,70%,34%;--color-green-700-value:131,41%,46%;--color-green-800-value:132,43%,39%;--color-green-900-value:131,43%,57%;--color-green-1000-value:136,73%,94%;--color-teal-100-value:169,78%,7%;--color-teal-200-value:170,74%,9%;--color-teal-300-value:171,75%,13%;--color-teal-400-value:171,85%,13%;--color-teal-500-value:172,85%,20%;--color-teal-600-value:172,85%,32%;--color-teal-700-value:173,80%,36%;--color-teal-800-value:173,83%,30%;--color-teal-900-value:174,90%,41%;--color-teal-1000-value:166,71%,93%;--color-purple-100-value:283,30%,12%;--color-purple-200-value:281,38%,16%;--color-purple-300-value:279,44%,23%;--color-purple-400-value:277,46%,28%;--color-purple-500-value:274,49%,35%;--color-purple-600-value:272,51%,54%;--color-purple-700-value:272,51%,54%;--color-purple-800-value:272,47%,45%;--color-purple-900-value:275,80%,71%;--color-purple-1000-value:281,73%,96%;--color-pink-100-value:335,32%,12%;--color-pink-200-value:335,43%,16%;--color-pink-300-value:335,47%,21%;--color-pink-400-value:335,51%,22%;--color-pink-500-value:335,57%,27%;--color-pink-600-value:336,75%,40%;--color-pink-700-value:336,80%,58%;--color-pink-800-value:336,74%,51%;--color-pink-900-value:341,90%,67%;--color-pink-1000-value:333,90%,96%;--shadow-border-default-value:0 0 0 1px #ffffff25;--shadow-border-small-value:0 0 0 1px #ffffff25,0 1px 2px 0 #0000000a;--shadow-border-medium-value:0 0 0 1px #ffffff25,0px 2px 2px #00000052,0px 8px 8px -8px #00000029;--shadow-border-large-value:0 0 0 1px #ffffff25,0px 2px 2px #0000000a,0px 8px 16px -4px #0000000a;--shadow-border-tooltip-value:0 0 0 1px #ffffff25,0px 1px 1px #00000005,0px 4px 8px #0000000a;--shadow-border-menu-value:0 0 0 1px #ffffff25,0px 1px 1px #00000005,0px 4px 8px -4px #0000000a,0px 16px 24px -8px #0000000f;--shadow-border-modal-value:0 0 0 1px #ffffff25,0px 1px 1px #00000005,0px 8px 16px -4px #0000000a,0px 24px 32px -8px #0000000f;--shadow-border-fullscreen-value:0 0 0 1px #ffffff25,0px 1px 1px #00000005,0px 8px 16px -4px #0000000a,0px 24px 32px -8px #0000000f;color-scheme:dark}@media (prefers-reduced-motion:reduce){:root{--default-transition-duration:0!important}}.pxd-transition--fade-enter-active,.pxd-transition--fade-leave-active{transition:opacity var(--default-transition-duration)var(--default-transition-timing-function)}.pxd-transition--fade-enter-from,.pxd-transition--fade-leave-to{opacity:0;will-change:opacity}.pxd-transition--fade-scale-move,.pxd-transition--fade-scale-enter-active,.pxd-transition--fade-scale-leave-active{transition:var(--default-transition-duration)var(--default-transition-timing-function);will-change:opacity,transform;transition-property:opacity,transform}.pxd-transition--fade-scale-enter-from,.pxd-transition--fade-scale-leave-to{opacity:0;transform:scale(var(--scale,.8))translateZ(0)}.line-clamp{text-overflow:ellipsis;-webkit-line-clamp:var(--line-clamp,1);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.scroll-disabled{scrollbar-gutter:stable!important;overflow:clip!important}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-700:hsl(var(--color-red-700-value));--color-red-800:hsl(var(--color-red-800-value));--color-red-900:hsl(var(--color-red-900-value));--color-amber-600:hsl(var(--color-amber-600-value));--color-amber-700:hsl(var(--color-amber-700-value));--color-amber-800:hsl(var(--color-amber-800-value));--color-yellow-500:oklch(79.5% .184 86.047);--color-green-300:hsl(var(--color-green-300-value));--color-green-500:hsl(var(--color-green-500-value));--color-green-700:hsl(var(--color-green-700-value));--color-green-900:hsl(var(--color-green-900-value));--color-violet-100:oklch(94.3% .029 294.588);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-400:oklch(70.2% .183 293.541);--color-violet-900:oklch(38% .189 293.745);--color-gray-100:hsl(var(--color-gray-100-value));--color-gray-200:hsl(var(--color-gray-200-value));--color-gray-300:hsl(var(--color-gray-300-value));--color-gray-500:hsl(var(--color-gray-500-value));--color-gray-600:hsl(var(--color-gray-600-value));--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-xs:.125rem;--animate-spin:spin 1s linear infinite;--blur-xs:4px;--default-transition-duration:.2s;--default-transition-timing-function:ease-in-out;--color-primary:hsl(var(--primary));--color-border:hsl(var(--color-gray-300-value));--color-foreground:hsl(var(--color-gray-1000-value));--color-foreground-secondary:hsl(var(--color-gray-900-value));--color-background-100:hsl(var(--background-100-value));--color-gray-alpha-100:var(--color-gray-alpha-100-value);--color-gray-alpha-200:var(--color-gray-alpha-200-value);--color-gray-alpha-300:var(--color-gray-alpha-300-value);--color-gray-alpha-400:var(--color-gray-alpha-400-value);--color-gray-alpha-500:var(--color-gray-alpha-500-value);--color-gray-alpha-600:var(--color-gray-alpha-600-value);--shadow-border-default:var(--shadow-border-default-value);--shadow-border-small:var(--shadow-border-small-value);--shadow-border-medium:var(--shadow-border-medium-value);--shadow-border-large:var(--shadow-border-large-value);--shadow-border-tooltip:var(--shadow-border-tooltip-value);--shadow-border-menu:var(--shadow-border-menu-value);--shadow-border-modal:var(--shadow-border-modal-value);--shadow-border-fullscreen:var(--shadow-border-fullscreen-value)}}@layer base{*{border-color:hsl(var(--color-gray-300-value))}}@layer components{.pxd-input--border{border:1px solid var(--border-color,var(--color-gray-alpha-300))}.pxd-input--border:not(.is-disabled,.is-readonly):hover,.pxd-input--border:not(.is-disabled,.is-readonly):focus-within{--border-color:var(--color-primary)}.pxd-input--border:not(.is-disabled,.is-readonly):focus-within{box-shadow:0 0 0 3px hsla(var(--primary),.2)}.pxd-input--border.is-error:not(:focus)::placeholder{color:var(--color-red-900)!important}.pxd-input--border.is-error,.pxd-input--border.is-error:focus-within{--border-color:hsl(var(--color-red-900-value));box-shadow:0 0 0 3px hsl(var(--color-red-300-value))}.pxd-input--border.is-error:focus-within,.pxd-input--border.is-error:not(.is-disabled,.is-readonly):hover{--border-color:hsl(var(--color-red-900-value));box-shadow:0 0 0 3px hsl(var(--color-red-500-value))}.pxd-form--label{max-width:100%;margin-bottom:calc(var(--spacing)*1.5);font-size:var(--text-sm);color:var(--color-foreground-secondary)}}@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.smallest{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.-inset-px{inset:-1px}.inset-0{inset:calc(var(--spacing)*0)}.-top-1{top:calc(var(--spacing)*-1)}.top-0{top:calc(var(--spacing)*0)}.top-1\.5{top:calc(var(--spacing)*1.5)}.top-1\/2{top:50%}.-right-5{right:calc(var(--spacing)*-5)}.right-0{right:calc(var(--spacing)*0)}.right-1{right:calc(var(--spacing)*1)}.right-1\.5{right:calc(var(--spacing)*1.5)}.-bottom-1{bottom:calc(var(--spacing)*-1)}.bottom-0{bottom:calc(var(--spacing)*0)}.-left-1{left:calc(var(--spacing)*-1)}.-left-5{left:calc(var(--spacing)*-5)}.left-0{left:calc(var(--spacing)*0)}.left-px{left:1px}.isolate{isolation:isolate}.z-\(--z\,10\){z-index:var(--z,10)}.z-0{z-index:0}.z-1{z-index:1}.z-10{z-index:10}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.container\!{width:100%!important}@media (min-width:40rem){.container\!{max-width:40rem!important}}@media (min-width:48rem){.container\!{max-width:48rem!important}}@media (min-width:64rem){.container\!{max-width:64rem!important}}@media (min-width:80rem){.container\!{max-width:80rem!important}}@media (min-width:96rem){.container\!{max-width:96rem!important}}.m-0{margin:calc(var(--spacing)*0)}.mx-auto{margin-inline:auto}.mx-px{margin-inline:1px}.mt-\(--mt\){margin-top:var(--mt)}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1\.5{margin-top:calc(var(--spacing)*1.5)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-1\.5{margin-right:calc(var(--spacing)*1.5)}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-3{margin-right:calc(var(--spacing)*3)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.-ml-0\.5{margin-left:calc(var(--spacing)*-.5)}.-ml-3{margin-left:calc(var(--spacing)*-3)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-1\.5{margin-left:calc(var(--spacing)*1.5)}.ml-3{margin-left:calc(var(--spacing)*3)}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.scrollbar-hidden::-webkit-scrollbar{display:none}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.size-\(--size\){width:var(--size);height:var(--size)}.size-1\/2{width:50%;height:50%}.size-3{width:calc(var(--spacing)*3);height:calc(var(--spacing)*3)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-15{width:calc(var(--spacing)*15);height:calc(var(--spacing)*15)}.size-\[calc\(1em\/4\)\]{width:.25em;height:.25em}.size-em{width:1em;height:1em}.size-full{width:100%;height:100%}.size-max{width:max-content;height:max-content}.h-\(--h\){height:var(--h)}.h-\(--scrollbar-size\){height:var(--scrollbar-size)}.h-0\.5{height:calc(var(--spacing)*.5)}.h-2{height:calc(var(--spacing)*2)}.h-2\.5{height:calc(var(--spacing)*2.5)}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-4\.5{height:calc(var(--spacing)*4.5)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7\.5{height:calc(var(--spacing)*7.5)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-full{height:100%}.h-max{height:max-content}.max-h-68{max-height:calc(var(--spacing)*68)}.max-h-full{max-height:100%}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-3\.5{min-height:calc(var(--spacing)*3.5)}.min-h-7\.5{min-height:calc(var(--spacing)*7.5)}.min-h-9{min-height:calc(var(--spacing)*9)}.min-h-10{min-height:calc(var(--spacing)*10)}.min-h-13{min-height:calc(var(--spacing)*13)}.min-h-\[inherit\]{min-height:inherit}.w-\(--scrollbar-size\){width:var(--scrollbar-size)}.w-\(--w\){width:var(--w)}.w-1\.5{width:calc(var(--spacing)*1.5)}.w-2{width:calc(var(--spacing)*2)}.w-2\.5{width:calc(var(--spacing)*2.5)}.w-3{width:calc(var(--spacing)*3)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-7\.5{width:calc(var(--spacing)*7.5)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-11{width:calc(var(--spacing)*11)}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.max-w-full{max-width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-3{min-width:calc(var(--spacing)*3)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-separate{border-collapse:separate}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-\(--tx\){--tw-translate-x:var(--tx);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-1\/2{--tw-translate-x:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/3{--tw-translate-y:calc(calc(1/3*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-z-0{--tw-translate-z:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)var(--tw-translate-z)}.scale-125{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-130{--tw-scale-x:130%;--tw-scale-y:130%;--tw-scale-z:130%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-y-90{--tw-scale-y:90%;scale:var(--tw-scale-x)var(--tw-scale-y)}.-rotate-\[85deg\]{rotate:-85deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.transform-gpu{transform:translateZ(0)var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-manipulation{touch-action:manipulation}.touch-none{touch-action:none}.resize{resize:both}.resize-none{resize:none}.list-none{list-style-type:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-evenly{justify-content:space-evenly}.justify-start{justify-content:flex-start}.justify-stretch{justify-content:stretch}.gap-\(--gap-xs\){gap:var(--gap-xs)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-visible{overflow:visible}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-inherit{border-radius:inherit}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.rounded-xs{border-radius:var(--radius-xs)}.rounded-t-lg{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.rounded-l-inherit{border-top-left-radius:inherit;border-bottom-left-radius:inherit}.rounded-r-inherit{border-top-right-radius:inherit;border-bottom-right-radius:inherit}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-amber-100{border-color:hsl(var(--color-amber-100-value))}.border-amber-500{border-color:hsl(var(--color-amber-500-value))}.border-background-100{border-color:hsl(var(--background-100-value))}.border-blue-100{border-color:hsl(var(--color-blue-100-value))}.border-blue-500{border-color:hsl(var(--color-blue-500-value))}.border-gray-100{border-color:hsl(var(--color-gray-100-value))}.border-gray-300{border-color:hsl(var(--color-gray-300-value))}.border-gray-400{border-color:hsl(var(--color-gray-400-value))}.border-gray-500{border-color:hsl(var(--color-gray-500-value))}.border-gray-600{border-color:hsl(var(--color-gray-600-value))}.border-gray-alpha-300{border-color:var(--color-gray-alpha-300-value)}.border-gray-alpha-400{border-color:var(--color-gray-alpha-400-value)}.border-input{border-color:var(--color-gray-alpha-300)}.border-primary{border-color:hsl(var(--primary))}.border-red-100{border-color:hsl(var(--color-red-100-value))}.border-red-500{border-color:hsl(var(--color-red-500-value))}.border-teal-100{border-color:hsl(var(--color-teal-100-value))}.border-teal-400{border-color:hsl(var(--color-teal-400-value))}.border-transparent{border-color:#0000}.border-violet-100{border-color:var(--color-violet-100)}.border-violet-400{border-color:var(--color-violet-400)}.\!bg-primary{background-color:hsl(var(--primary))!important}.bg-\(--color\){background-color:var(--color)}.bg-\(--ibc\){background-color:var(--ibc)}.bg-\(--mc\){background-color:var(--mc)}.bg-\(--scrollbar-color\){background-color:var(--scrollbar-color)}.bg-\[\#26C941\]{background-color:#26c941}.bg-\[\#FE5F57\]{background-color:#fe5f57}.bg-\[\#FEBB2E\]{background-color:#febb2e}.bg-amber-200{background-color:hsl(var(--color-amber-200-value))}.bg-amber-700{background-color:hsl(var(--color-amber-700-value))}.bg-amber-800{background-color:hsl(var(--color-amber-800-value))}.bg-background-100{background-color:hsl(var(--background-100-value))}.bg-background-200{background-color:hsl(var(--background-200-value))}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-blue-200{background-color:hsl(var(--color-blue-200-value))}.bg-blue-700{background-color:hsl(var(--color-blue-700-value))}.bg-border{background-color:hsl(var(--color-gray-300-value))}.bg-current{background-color:currentColor}.bg-gray-100{background-color:hsl(var(--color-gray-100-value))}.bg-gray-200{background-color:hsl(var(--color-gray-200-value))}.bg-gray-600{background-color:hsl(var(--color-gray-600-value))}.bg-gray-700{background-color:hsl(var(--color-gray-700-value))}.bg-gray-900{background-color:hsl(var(--color-gray-900-value))}.bg-gray-1000{background-color:hsl(var(--color-gray-1000-value))}.bg-gray-alpha-100{background-color:var(--color-gray-alpha-100-value)}.bg-gray-alpha-200{background-color:var(--color-gray-alpha-200-value)}.bg-gray-alpha-400{background-color:var(--color-gray-alpha-400-value)}.bg-green-200{background-color:hsl(var(--color-green-200-value))}.bg-green-600{background-color:hsl(var(--color-green-600-value))}.bg-green-700{background-color:hsl(var(--color-green-700-value))}.bg-green-800{background-color:hsl(var(--color-green-800-value))}.bg-pink-200{background-color:hsl(var(--color-pink-200-value))}.bg-pink-700{background-color:hsl(var(--color-pink-700-value))}.bg-primary{background-color:hsl(var(--primary))}.bg-purple-200{background-color:hsl(var(--color-purple-200-value))}.bg-purple-700{background-color:hsl(var(--color-purple-700-value))}.bg-red-200{background-color:hsl(var(--color-red-200-value))}.bg-red-600{background-color:hsl(var(--color-red-600-value))}.bg-red-700{background-color:hsl(var(--color-red-700-value))}.bg-red-800{background-color:hsl(var(--color-red-800-value))}.bg-teal-200{background-color:hsl(var(--color-teal-200-value))}.bg-teal-700{background-color:hsl(var(--color-teal-700-value))}.bg-transparent{background-color:#0000}.bg-violet-200{background-color:var(--color-violet-200)}.bg-yellow-500{background-color:var(--color-yellow-500)}.bg-cover{background-size:cover}.object-cover{object-fit:cover}.\!p-0{padding:calc(var(--spacing)*0)!important}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-2{padding:calc(var(--spacing)*2)}.p-2\.5{padding:calc(var(--spacing)*2.5)}.p-3{padding:calc(var(--spacing)*3)}.p-3\.5{padding:calc(var(--spacing)*3.5)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-px{padding:1px}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-3\.5{padding-inline:calc(var(--spacing)*3.5)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-18{padding-inline:calc(var(--spacing)*18)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-12{padding-block:calc(var(--spacing)*12)}.py-\[3px\]{padding-block:3px}.pr-0{padding-right:calc(var(--spacing)*0)}.pr-0\.5{padding-right:calc(var(--spacing)*.5)}.pr-1{padding-right:calc(var(--spacing)*1)}.pr-1\.5{padding-right:calc(var(--spacing)*1.5)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-2\.5{padding-right:calc(var(--spacing)*2.5)}.pr-3\.5{padding-right:calc(var(--spacing)*3.5)}.pr-5{padding-right:calc(var(--spacing)*5)}.pr-6{padding-right:calc(var(--spacing)*6)}.pr-9{padding-right:calc(var(--spacing)*9)}.pr-12{padding-right:calc(var(--spacing)*12)}.pr-\[3px\]{padding-right:3px}.pb-5{padding-bottom:calc(var(--spacing)*5)}.pl-0\.5{padding-left:calc(var(--spacing)*.5)}.pl-1\.5{padding-left:calc(var(--spacing)*1.5)}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-2\.5{padding-left:calc(var(--spacing)*2.5)}.pl-3\.5{padding-left:calc(var(--spacing)*3.5)}.pl-6{padding-left:calc(var(--spacing)*6)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[13px\]{font-size:13px}.leading-4{--tw-leading:calc(var(--spacing)*4);line-height:calc(var(--spacing)*4)}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-balance{text-wrap:balance}.text-nowrap{text-wrap:nowrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-amber-900{color:hsl(var(--color-amber-900-value))}.text-background-100{color:hsl(var(--background-100-value))}.text-black{color:var(--color-black)}.text-blue-900{color:hsl(var(--color-blue-900-value))}.text-foreground{color:hsl(var(--color-gray-1000-value))}.text-foreground-secondary{color:hsl(var(--color-gray-900-value))}.text-gray-100{color:hsl(var(--color-gray-100-value))}.text-gray-500{color:hsl(var(--color-gray-500-value))}.text-gray-700{color:hsl(var(--color-gray-700-value))}.text-gray-900{color:hsl(var(--color-gray-900-value))}.text-gray-1000{color:hsl(var(--color-gray-1000-value))}.text-green-900{color:hsl(var(--color-green-900-value))}.text-pink-900{color:hsl(var(--color-pink-900-value))}.text-primary{color:hsl(var(--primary))}.text-purple-900{color:hsl(var(--color-purple-900-value))}.text-red-900{color:hsl(var(--color-red-900-value))}.text-teal-900{color:hsl(var(--color-teal-900-value))}.text-violet-900{color:var(--color-violet-900)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.\!no-underline{text-decoration-line:none!important}.underline{text-decoration-line:underline}.opacity-\(--sv\){opacity:var(--sv)}.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-50{opacity:.5}.opacity-100{opacity:1}.mix-blend-overlay{mix-blend-mode:overlay}.shadow-border-menu{--tw-shadow:var(--shadow-border-menu-value);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-border-modal{--tw-shadow:var(--shadow-border-modal-value);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-border-small{--tw-shadow:var(--shadow-border-small-value);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-border-tooltip{--tw-shadow:var(--shadow-border-tooltip-value);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.peer:focus-visible~.peer-focus-ring,.self-focus-ring:focus-visible{box-shadow:0 0 0 2px var(--color-background-100),0 0 0 4px hsl(var(--ring))}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-xs{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.duration-50{--tw-duration:50ms;transition-duration:50ms}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.will-change-transform{will-change:transform}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[--book-width\:var\(--width-xs\)\]{--book-width:var(--width-xs)}.\[--mt\:2px\]{--mt:2px}.\[--mt\:4px\]{--mt:4px}.\[--tx\:0\]{--tx:0}.transform-3d{transform-style:preserve-3d}@media (hover:hover){.group-hover\:text-foreground:is(:where(.group):hover *){color:hsl(var(--color-gray-1000-value))}.group-hover\/checkbox\:bg-gray-200:is(:where(.group\/checkbox):hover *){background-color:hsl(var(--color-gray-200-value))}.group-hover\/collapse\:will-change-\[height\]:is(:where(.group\/collapse):hover *){will-change:height}.group-hover\/radio\:bg-gray-200:is(:where(.group\/radio):hover *){background-color:hsl(var(--color-gray-200-value))}.group-hover\/toggle\:will-change-transform:is(:where(.group\/toggle):hover *){will-change:transform}}.group-data-\[direction\=horizontal\]\:flex:is(:where(.group)[data-direction=horizontal] *){display:flex}.group-data-\[direction\=vertical\]\:rotate-90:is(:where(.group)[data-direction=vertical] *){rotate:90deg}.group-data-\[header\=true\]\:pt-5:is(:where(.group)[data-header=true] *){padding-top:calc(var(--spacing)*5)}.group-data-\[indicator-position\=left\]\:flex-col:is(:where(.group)[data-indicator-position=left] *),.group-data-\[indicator-position\=right\]\:flex-col:is(:where(.group)[data-indicator-position=right] *){flex-direction:column}.group-data-\[state\=open\]\/collapse\:-rotate-180:is(:where(.group\/collapse)[data-state=open] *){rotate:-180deg}.peer-checked\:bg-\(--abc\):is(:where(.peer):checked~*){background-color:var(--abc)}.peer-checked\:bg-gray-100:is(:where(.peer):checked~*){background-color:hsl(var(--color-gray-100-value))}.peer-checked\:text-foreground:is(:where(.peer):checked~*){color:hsl(var(--color-gray-1000-value))}.peer-checked\:opacity-50:is(:where(.peer):checked~*){opacity:.5}.peer-checked\:opacity-100:is(:where(.peer):checked~*){opacity:1}.peer-checked\:\[--tx\:100\%\]:is(:where(.peer):checked~*){--tx:100%}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:text-gray-800:is(:where(.peer):disabled~*){color:hsl(var(--color-gray-800-value))}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.placeholder\:text-gray-600::placeholder{color:hsl(var(--color-gray-600-value))}.placeholder\:select-none::placeholder{-webkit-user-select:none;user-select:none}.before\:content-\[attr\(data-prompt\)\]:before{content:var(--tw-content);--tw-content:attr(data-prompt);content:var(--tw-content)}.before\:select-none:before{content:var(--tw-content);-webkit-user-select:none;user-select:none}.after\:size-2:after{content:var(--tw-content);width:calc(var(--spacing)*2);height:calc(var(--spacing)*2)}.after\:scale-40:after{content:var(--tw-content);--tw-scale-x:40%;--tw-scale-y:40%;--tw-scale-z:40%;scale:var(--tw-scale-x)var(--tw-scale-y)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:bg-gray-500:after{content:var(--tw-content);background-color:hsl(var(--color-gray-500-value))}.after\:bg-primary:after{content:var(--tw-content);background-color:hsl(var(--primary))}.after\:opacity-0:after{content:var(--tw-content);opacity:0}.after\:content-\[attr\(aria-label\)\]:after{content:var(--tw-content);--tw-content:attr(aria-label);content:var(--tw-content)}.peer-checked\:after\:scale-100:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.peer-checked\:after\:opacity-100:is(:where(.peer):checked~*):after{content:var(--tw-content);opacity:1}.first\:justify-start:first-child{justify-content:flex-start}.last\:justify-end:last-child{justify-content:flex-end}.empty\:pointer-events-none:empty{pointer-events:none}.empty\:hidden:empty{display:none}.empty\:py-3:empty{padding-block:calc(var(--spacing)*3)}@media (hover:hover){.hover\:z-1:hover{z-index:1}.hover\:scale-130:hover{--tw-scale-x:130%;--tw-scale-y:130%;--tw-scale-z:130%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:border-gray-500:hover{border-color:hsl(var(--color-gray-500-value))}.hover\:bg-\(--scrollbar-hover-color\):hover{background-color:var(--scrollbar-hover-color)}.hover\:bg-amber-700:hover{background-color:hsl(var(--color-amber-700-value))}.hover\:bg-background-hover:hover{background-color:var(--color-gray-alpha-200-value)}.hover\:bg-gray-100:hover{background-color:hsl(var(--color-gray-100-value))}.hover\:bg-gray-alpha-400:hover{background-color:var(--color-gray-alpha-400-value)}.hover\:bg-green-700:hover{background-color:hsl(var(--color-green-700-value))}.hover\:bg-primary\/80:hover{background-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab,hsl(var(--primary))80%,transparent)}}.hover\:bg-red-700:hover{background-color:hsl(var(--color-red-700-value))}.hover\:text-foreground:hover{color:hsl(var(--color-gray-1000-value))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-60:hover{opacity:.6}.hover\:will-change-transform:hover{will-change:transform}.hover\:\[--sv\:1\]:hover{--sv:1}.hover\:after\:bg-primary\/20:hover:after{content:var(--tw-content);background-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.hover\:after\:bg-primary\/20:hover:after{background-color:color-mix(in oklab,hsl(var(--primary))20%,transparent)}}}.focus\:placeholder\:opacity-0:focus::placeholder{opacity:0}.active\:z-1:active{z-index:1}.active\:scale-130:active{--tw-scale-x:130%;--tw-scale-y:130%;--tw-scale-z:130%;scale:var(--tw-scale-x)var(--tw-scale-y)}.active\:bg-\(--scrollbar-hover-color\):active{background-color:var(--scrollbar-hover-color)}.active\:bg-amber-900:active{background-color:hsl(var(--color-amber-900-value))}.active\:bg-background-active:active{background-color:var(--color-gray-alpha-300-value)}.active\:bg-gray-100:active{background-color:hsl(var(--color-gray-100-value))}.active\:bg-gray-900:active{background-color:hsl(var(--color-gray-900-value))}.active\:bg-green-900:active{background-color:hsl(var(--color-green-900-value))}.active\:bg-red-900:active{background-color:hsl(var(--color-red-900-value))}.active\:opacity-80:active{opacity:.8}.active\:opacity-100:active{opacity:1}.active\:select-none:active{-webkit-user-select:none;user-select:none}.active\:after\:bg-primary\/30:active:after{content:var(--tw-content);background-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.active\:after\:bg-primary\/30:active:after{background-color:color-mix(in oklab,hsl(var(--primary))30%,transparent)}}@media (hover:hover){.enabled\:hover\:bg-background-hover:enabled:hover{background-color:var(--color-gray-alpha-200-value)}.enabled\:hover\:text-gray-1000:enabled:hover{color:hsl(var(--color-gray-1000-value))}}.enabled\:active\:bg-background-active:enabled:active{background-color:var(--color-gray-alpha-300-value)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-100:disabled{background-color:hsl(var(--color-gray-100-value))}.disabled\:text-gray-700:disabled{color:hsl(var(--color-gray-700-value))}.disabled\:placeholder\:text-gray-400:disabled::placeholder{color:hsl(var(--color-gray-400-value))}.data-\[blur\=true\]\:backdrop-blur-xs[data-blur=true]{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.data-\[direction\=vertical\]\:flex-col[data-direction=vertical]{flex-direction:column}.data-\[enterable\=false\]\:pointer-events-none[data-enterable=false]{pointer-events:none}.data-\[selected\=true\]\:bg-gray-alpha-100[data-selected=true]{background-color:var(--color-gray-alpha-100-value)}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-spin{animation:var(--animate-spin)}.motion-safe\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:duration-200{--tw-duration:.2s;transition-duration:.2s}}.after\:motion-safe\:transition-colors:after{content:var(--tw-content)}@media (prefers-reduced-motion:no-preference){.after\:motion-safe\:transition-colors:after{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}.motion-safe\:after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:var(--tw-ease,ease-in-out);transition-duration:var(--tw-duration,.2s)}}@media (prefers-reduced-motion:reduce){.motion-reduce\:opacity-20{opacity:.2}.motion-reduce\:opacity-50{opacity:.5}.motion-reduce\:opacity-80{opacity:.8}}@media not all and (min-width:64rem){.max-lg\:hidden{display:none}}@media not all and (min-width:48rem){.max-md\:hidden{display:none}.max-md\:first\:flex-none:first-child{flex:none}}@media (min-width:40rem){.sm\:top-1\/2{top:50%}.sm\:left-1\/2{left:50%}.sm\:w-\[calc\(var\(--w\,540\)\*1px\)\]{width:calc(var(--w,540)*1px)}.sm\:max-w-\(--max-width\){max-width:var(--max-width)}.sm\:-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.sm\:-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.sm\:flex-col{flex-direction:column}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-\(--gap-sm\){gap:var(--gap-sm)}.sm\:rounded-xl{border-radius:calc(var(--radius) + 4px)}.sm\:bg-background-100\/80{background-color:hsl(var(--background-100-value))}@supports (color:color-mix(in lab, red, red)){.sm\:bg-background-100\/80{background-color:color-mix(in oklab,hsl(var(--background-100-value))80%,transparent)}}.sm\:p-0{padding:calc(var(--spacing)*0)}.sm\:py-4{padding-block:calc(var(--spacing)*4)}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:\[--book-width\:var\(--width-sm\)\]{--book-width:var(--width-sm)}.sm\:\[--o\:0\]{--o:0}.sm\:\[--sv\:0\]{--sv:0}.sm\:\[--t\:scale\(0\.98\)\]{--t:scale(.98)}}@media (min-width:48rem){.md\:flex-col{flex-direction:column}.md\:flex-row{flex-direction:row}.md\:gap-\(--gap-md\){gap:var(--gap-md)}.md\:gap-6{gap:calc(var(--spacing)*6)}.md\:\[--book-width\:var\(--width-md\)\]{--book-width:var(--width-md)}.md\:first\:max-w-\[140px\]:first-child,.md\:last\:max-w-\[140px\]:last-child{max-width:140px}}@media (min-width:64rem){.lg\:max-w-xs{max-width:var(--container-xs)}.lg\:flex-col{flex-direction:column}.lg\:flex-row{flex-direction:row}.lg\:gap-\(--gap-lg\){gap:var(--gap-lg)}.lg\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.lg\:\[--book-width\:var\(--width-lg\)\]{--book-width:var(--width-lg)}}@media (min-width:80rem){.xl\:flex-col{flex-direction:column}.xl\:flex-row{flex-direction:row}.xl\:gap-\(--gap-xl\){gap:var(--gap-xl)}.xl\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.xl\:\[--book-width\:var\(--width-xl\)\]{--book-width:var(--width-xl)}}.dark\:bg-background-100:is(.dark *){background-color:hsl(var(--background-100-value))}.dark\:bg-background-200:is(.dark *){background-color:hsl(var(--background-200-value))}.dark\:text-gray-100:is(.dark *){color:hsl(var(--color-gray-100-value))}.dark\:text-gray-1000:is(.dark *){color:hsl(var(--color-gray-1000-value))}.\[\&\:nth-child\(n\+2\)\]\:-ml-2\.5:nth-child(n+2){margin-left:calc(var(--spacing)*-2.5)}}:root{--radius:.5rem;--background-100-value:0,0%,100%;--background-200-value:0,0%,97%;--ring:var(--color-blue-900-value);--primary:var(--color-gray-1000-value);--color-gray-alpha-100-value:#0000000d;--color-gray-alpha-200-value:#00000014;--color-gray-alpha-300-value:#0000001f;--color-gray-alpha-400-value:#0000002b;--color-gray-alpha-500-value:#00000036;--color-gray-alpha-600-value:#00000057;--color-gray-alpha-700-value:#00000070;--color-gray-alpha-800-value:#00000082;--color-gray-alpha-900-value:#0000009c;--color-gray-alpha-1000-value:#000000e8;--color-gray-100-value:0,0%,95%;--color-gray-200-value:0,0%,93%;--color-gray-300-value:0,0%,90%;--color-gray-400-value:0,0%,85%;--color-gray-500-value:0,0%,79%;--color-gray-600-value:0,0%,66%;--color-gray-700-value:0,0%,56%;--color-gray-800-value:0,0%,49%;--color-gray-900-value:0,0%,40%;--color-gray-1000-value:0,0%,9%;--color-blue-100-value:212,100%,97%;--color-blue-200-value:210,100%,96%;--color-blue-300-value:210,100%,94%;--color-blue-400-value:209,100%,90%;--color-blue-500-value:209,100%,80%;--color-blue-600-value:208,100%,66%;--color-blue-700-value:212,100%,48%;--color-blue-800-value:212,100%,41%;--color-blue-900-value:211,100%,42%;--color-blue-1000-value:211,100%,15%;--color-red-100-value:0,100%,97%;--color-red-200-value:0,100%,96%;--color-red-300-value:0,100%,95%;--color-red-400-value:0,90%,92%;--color-red-500-value:0,82%,85%;--color-red-600-value:359,90%,71%;--color-red-700-value:358,75%,59%;--color-red-800-value:358,70%,52%;--color-red-900-value:358,66%,48%;--color-red-1000-value:355,49%,15%;--color-amber-100-value:39,100%,95%;--color-amber-200-value:44,100%,92%;--color-amber-300-value:43,96%,90%;--color-amber-400-value:42,100%,78%;--color-amber-500-value:38,100%,71%;--color-amber-600-value:36,90%,62%;--color-amber-700-value:39,100%,57%;--color-amber-800-value:35,100%,52%;--color-amber-900-value:30,100%,32%;--color-amber-1000-value:20,79%,17%;--color-green-100-value:120,60%,96%;--color-green-200-value:120,60%,95%;--color-green-300-value:120,60%,91%;--color-green-400-value:122,60%,86%;--color-green-500-value:124,60%,75%;--color-green-600-value:125,60%,64%;--color-green-700-value:131,41%,46%;--color-green-800-value:132,43%,39%;--color-green-900-value:133,50%,32%;--color-green-1000-value:128,29%,15%;--color-teal-100-value:169,70%,96%;--color-teal-200-value:167,70%,94%;--color-teal-300-value:168,70%,90%;--color-teal-400-value:170,70%,85%;--color-teal-500-value:170,70%,72%;--color-teal-600-value:170,70%,57%;--color-teal-700-value:173,80%,36%;--color-teal-800-value:173,83%,30%;--color-teal-900-value:174,91%,25%;--color-teal-1000-value:171,80%,13%;--color-purple-100-value:276,100%,97%;--color-purple-200-value:277,87%,97%;--color-purple-300-value:274,78%,95%;--color-purple-400-value:276,71%,92%;--color-purple-500-value:274,70%,82%;--color-purple-600-value:273,72%,73%;--color-purple-700-value:272,51%,54%;--color-purple-800-value:272,47%,45%;--color-purple-900-value:274,71%,43%;--color-purple-1000-value:276,100%,15%;--color-pink-100-value:330,100%,96%;--color-pink-200-value:340,90%,96%;--color-pink-300-value:340,82%,94%;--color-pink-400-value:341,76%,91%;--color-pink-500-value:340,75%,84%;--color-pink-600-value:341,75%,73%;--color-pink-700-value:336,80%,58%;--color-pink-800-value:336,74%,51%;--color-pink-900-value:336,65%,45%;--color-pink-1000-value:333,74%,15%;--shadow-border-default-value:0 0 0 1px #00000014;--shadow-border-small-value:0 0 0 1px #00000014,0 1px 2px 0 #0000000a;--shadow-border-medium-value:0 0 0 1px #00000014,0px 2px 2px #0000000a,0px 8px 8px -8px #0000000a;--shadow-border-large-value:0 0 0 1px #00000014,0px 2px 2px #0000000a,0px 8px 16px -4px #0000000a;--shadow-border-tooltip-value:0 0 0 1px #00000014,0px 1px 1px #00000005,0px 4px 8px #0000000a;--shadow-border-menu-value:0 0 0 1px #00000014,0px 1px 1px #00000005,0px 4px 8px -4px #0000000a,0px 16px 24px -8px #0000000f;--shadow-border-modal-value:0 0 0 1px #00000014,0px 1px 1px #00000005,0px 8px 16px -4px #0000000a,0px 24px 32px -8px #0000000f;--shadow-border-fullscreen-value:0 0 0 1px #00000014,0px 1px 1px #00000005,0px 8px 16px -4px #0000000a,0px 24px 32px -8px #0000000f;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;text-autospace:auto;font-synthesis:none;color-scheme:light;background-color:var(--color-background-100);color:var(--color-foreground)}:root.dark{--background-100-value:0,0%,5%;--background-200-value:0,0%,0%;--color-gray-alpha-100-value:#ffffff0f;--color-gray-alpha-200-value:#ffffff17;--color-gray-alpha-300-value:#ffffff21;--color-gray-alpha-400-value:#ffffff24;--color-gray-alpha-500-value:#ffffff3d;--color-gray-alpha-600-value:#ffffff82;--color-gray-alpha-700-value:#ffffff8a;--color-gray-alpha-800-value:#ffffff78;--color-gray-alpha-900-value:#ffffff9c;--color-gray-alpha-1000-value:#ffffffeb;--color-gray-100-value:0,0%,10%;--color-gray-200-value:0,0%,12%;--color-gray-300-value:0,0%,16%;--color-gray-400-value:0,0%,18%;--color-gray-500-value:0,0%,27%;--color-gray-600-value:0,0%,53%;--color-gray-700-value:0,0%,56%;--color-gray-800-value:0,0%,49%;--color-gray-900-value:0,0%,63%;--color-gray-1000-value:0,0%,93%;--color-blue-100-value:216,50%,12%;--color-blue-200-value:214,59%,15%;--color-blue-300-value:213,71%,20%;--color-blue-400-value:212,78%,23%;--color-blue-500-value:211,86%,27%;--color-blue-600-value:206,100%,50%;--color-blue-700-value:212,100%,48%;--color-blue-800-value:212,100%,41%;--color-blue-900-value:210,100%,66%;--color-blue-1000-value:206,100%,96%;--color-red-100-value:357,37%,12%;--color-red-200-value:357,46%,16%;--color-red-300-value:356,54%,22%;--color-red-400-value:357,55%,26%;--color-red-500-value:357,60%,32%;--color-red-600-value:358,75%,59%;--color-red-700-value:358,75%,59%;--color-red-800-value:358,69%,52%;--color-red-900-value:358,100%,69%;--color-red-1000-value:353,90%,96%;--color-amber-100-value:35,100%,8%;--color-amber-200-value:32,100%,10%;--color-amber-300-value:33,100%,15%;--color-amber-400-value:35,100%,17%;--color-amber-500-value:35,91%,22%;--color-amber-600-value:39,85%,49%;--color-amber-700-value:39,100%,57%;--color-amber-800-value:35,100%,52%;--color-amber-900-value:39,90%,50%;--color-amber-1000-value:40,94%,93%;--color-green-100-value:136,50%,9%;--color-green-200-value:137,50%,12%;--color-green-300-value:136,50%,14%;--color-green-400-value:135,70%,16%;--color-green-500-value:135,70%,23%;--color-green-600-value:135,70%,34%;--color-green-700-value:131,41%,46%;--color-green-800-value:132,43%,39%;--color-green-900-value:131,43%,57%;--color-green-1000-value:136,73%,94%;--color-teal-100-value:169,78%,7%;--color-teal-200-value:170,74%,9%;--color-teal-300-value:171,75%,13%;--color-teal-400-value:171,85%,13%;--color-teal-500-value:172,85%,20%;--color-teal-600-value:172,85%,32%;--color-teal-700-value:173,80%,36%;--color-teal-800-value:173,83%,30%;--color-teal-900-value:174,90%,41%;--color-teal-1000-value:166,71%,93%;--color-purple-100-value:283,30%,12%;--color-purple-200-value:281,38%,16%;--color-purple-300-value:279,44%,23%;--color-purple-400-value:277,46%,28%;--color-purple-500-value:274,49%,35%;--color-purple-600-value:272,51%,54%;--color-purple-700-value:272,51%,54%;--color-purple-800-value:272,47%,45%;--color-purple-900-value:275,80%,71%;--color-purple-1000-value:281,73%,96%;--color-pink-100-value:335,32%,12%;--color-pink-200-value:335,43%,16%;--color-pink-300-value:335,47%,21%;--color-pink-400-value:335,51%,22%;--color-pink-500-value:335,57%,27%;--color-pink-600-value:336,75%,40%;--color-pink-700-value:336,80%,58%;--color-pink-800-value:336,74%,51%;--color-pink-900-value:341,90%,67%;--color-pink-1000-value:333,90%,96%;--shadow-border-default-value:0 0 0 1px #ffffff25;--shadow-border-small-value:0 0 0 1px #ffffff25,0 1px 2px 0 #0000000a;--shadow-border-medium-value:0 0 0 1px #ffffff25,0px 2px 2px #00000052,0px 8px 8px -8px #00000029;--shadow-border-large-value:0 0 0 1px #ffffff25,0px 2px 2px #0000000a,0px 8px 16px -4px #0000000a;--shadow-border-tooltip-value:0 0 0 1px #ffffff25,0px 1px 1px #00000005,0px 4px 8px #0000000a;--shadow-border-menu-value:0 0 0 1px #ffffff25,0px 1px 1px #00000005,0px 4px 8px -4px #0000000a,0px 16px 24px -8px #0000000f;--shadow-border-modal-value:0 0 0 1px #ffffff25,0px 1px 1px #00000005,0px 8px 16px -4px #0000000a,0px 24px 32px -8px #0000000f;--shadow-border-fullscreen-value:0 0 0 1px #ffffff25,0px 1px 1px #00000005,0px 8px 16px -4px #0000000a,0px 24px 32px -8px #0000000f;color-scheme:dark}@media (prefers-reduced-motion:reduce){:root{--default-transition-duration:0!important}}.pxd-transition--fade-enter-active,.pxd-transition--fade-leave-active{transition:opacity var(--default-transition-duration)var(--default-transition-timing-function)}.pxd-transition--fade-enter-from,.pxd-transition--fade-leave-to{opacity:0;will-change:opacity}.pxd-transition--fade-scale-move,.pxd-transition--fade-scale-enter-active,.pxd-transition--fade-scale-leave-active{transition:var(--default-transition-duration)var(--default-transition-timing-function);will-change:opacity,transform;transition-property:opacity,transform}.pxd-transition--fade-scale-enter-from,.pxd-transition--fade-scale-leave-to{opacity:0;transform:scale(var(--scale,.8))translateZ(0)}.line-clamp{text-overflow:ellipsis;-webkit-line-clamp:var(--line-clamp,1);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.scroll-disabled{scrollbar-gutter:stable!important;overflow:clip!important}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}

package/dist/utils/dates.d.ts

@@ -17,7 +17,7 @@ export declare function getAllDatesBetween(startDate: Date | string, endDate: Da
  */
 export declare function getMonthDays(year: number, month: number): {
     days: number;
-    firstDay: number;
-    lastDay: number;
+    firstDay: 0 | 2 | 1 | 3 | 4 | 5 | 6;
+    lastDay: 0 | 2 | 1 | 3 | 4 | 5 | 6;
 };
 export {};

package/dist/utils/dates.js

@@ -1,35 +1,27 @@
-function getYMDDateString(date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
+import dayjs from "dayjs";
 export function getAllDatesBetween(startDate, endDate, format = "string") {
-  let start = startDate instanceof Date ? startDate : new Date(startDate);
-  let end = endDate instanceof Date ? endDate : new Date(endDate);
-  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+  let start = dayjs(startDate);
+  let end = dayjs(endDate);
+  if (!start.isValid() || !end.isValid()) {
     throw new TypeError("\u65E0\u6548\u7684\u65E5\u671F\u8F93\u5165");
   }
-  if (start > end) {
+  if (start.isAfter(end)) {
     [start, end] = [end, start];
   }
   const years = /* @__PURE__ */ new Set();
   const months = /* @__PURE__ */ new Set();
   const weeks = /* @__PURE__ */ new Set();
   const dates = [];
-  const currentDate = new Date(start);
-  currentDate.setHours(0, 0, 0, 0);
-  const endDateTime = new Date(end);
-  endDateTime.setHours(0, 0, 0, 0);
-  while (currentDate <= endDateTime) {
-    years.add(currentDate.getFullYear());
-    months.add(currentDate.getMonth() + 1);
-    weeks.add(currentDate.getDay());
+  let currentDate = start.startOf("day");
+  const endDateTime = end.startOf("day");
+  while (!currentDate.isAfter(endDateTime)) {
+    years.add(currentDate.year());
+    months.add(currentDate.month() + 1);
+    weeks.add(currentDate.day());
     dates.push(
-      format === "object" ? new Date(currentDate) : getYMDDateString(currentDate)
-      // YYYY-MM-DD
+      format === "object" ? currentDate.toDate() : currentDate.format("YYYY-MM-DD")
     );
-    currentDate.setDate(currentDate.getDate() + 1);
+    currentDate = currentDate.add(1, "day");
   }
   return {
     years: Array.from(years),
@@ -39,11 +31,11 @@ export function getAllDatesBetween(startDate, endDate, format = "string") {
   };
 }
 export function getMonthDays(year, month) {
-  const firstDay = new Date(year, month - 1, 1);
-  const lastDay = new Date(year, month, 0);
+  const firstDay = dayjs().year(year).month(month - 1).date(1);
+  const lastDay = firstDay.endOf("month");
   return {
-    days: lastDay.getDate(),
-    firstDay: firstDay.getDay(),
-    lastDay: lastDay.getDay()
+    days: lastDay.date(),
+    firstDay: firstDay.day(),
+    lastDay: lastDay.day()
   };
 }

package/dist/utils/dayjs-millisecond-token.d.ts

@@ -0,0 +1,3 @@
+import type { PluginFunc } from 'dayjs';
+declare const millisecondTokenPlugin: PluginFunc;
+export default millisecondTokenPlugin;

package/dist/utils/dayjs-millisecond-token.js

@@ -0,0 +1,41 @@
+function replaceMillisecondToken(formatStr, matcher, replacer) {
+  return formatStr.replace(matcher, replacer);
+}
+function padToThreeDigits(value) {
+  const normalized = Math.max(0, Math.min(999, Math.trunc(value)));
+  return String(normalized).padStart(3, "0");
+}
+const millisecondTokenPlugin = (_opts, DayjsClass, dayjsFactory) => {
+  const processFormat = (ms, formatStr) => {
+    const ms3 = padToThreeDigits(ms);
+    return replaceMillisecondToken(formatStr, /S+/g, (match) => {
+      const len = Math.min(match.length, 3);
+      return ms3.slice(0, len);
+    });
+  };
+  const originalFormat = DayjsClass.prototype.format;
+  DayjsClass.prototype.format = function(formatStr) {
+    if (!formatStr || typeof formatStr !== "string") {
+      return originalFormat.call(this, formatStr);
+    }
+    return originalFormat.call(this, processFormat(this.millisecond(), formatStr));
+  };
+  try {
+    const isDurationInjected = typeof dayjsFactory.duration === "function";
+    if (!isDurationInjected) {
+      return;
+    }
+    const durationProto = Object.getPrototypeOf(dayjsFactory.duration(0));
+    if (durationProto?.format) {
+      const originalDurationFormat = durationProto.format;
+      durationProto.format = function(formatStr) {
+        if (!formatStr || typeof formatStr !== "string") {
+          return originalDurationFormat.call(this, formatStr);
+        }
+        return originalDurationFormat.call(this, processFormat(this.milliseconds(), formatStr));
+      };
+    }
+  } catch {
+  }
+};
+export default millisecondTokenPlugin;

package/dist/utils/format.d.ts

@@ -1,7 +1,12 @@
 import type { Nullable } from '../types/shared';
+/** string -> String */
 export declare function capitalize(text: string): string;
+/** kabab-case -> kababCase */
 export declare function camelize(str: string): string;
+/** kabab-case -> KababCase */
 export declare function pascalize(text: string): string;
+/** KababCase -> kabab-case */
+export declare function uncapitalize(text: string): string;
 export declare function isTruthyProp(value: unknown): unknown;
 export declare function isExternalLink(href: string): boolean;
 export declare function toArray(value: unknown | unknown[]): any[];

package/dist/utils/format.js

@@ -8,6 +8,9 @@ export function camelize(str) {
 export function pascalize(text) {
   return text.charAt(0).toUpperCase() + text.slice(1).replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
 }
+export function uncapitalize(text) {
+  return text.charAt(0).toLowerCase() + text.slice(1).replace(/([A-Z])/g, "-$1").toLowerCase();
+}
 export function isTruthyProp(value) {
   return value || value === "";
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pxd",
   "type": "module",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "A universal UI component library for Vue2&3.",
   "author": "libondev <bon.li@outlook.com>",
   "license": "MIT",
@@ -90,7 +90,8 @@
     "vue": ">=2.7.0 || >=3.2.0"
   },
   "dependencies": {
-    "@gdsicon/vue": "^1.0.4"
+    "@gdsicon/vue": "^1.0.4",
+    "dayjs": "^1.11.13"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.19.0",
@@ -123,9 +124,10 @@
     "dev": "run-s dev:lib dev:docs",
     "dev:lib": "unbuild --stub",
     "dev:docs": "pnpm --filter docs dev",
-    "build": "run-s update-exports build:lib build:docs",
-    "build:lib": "unbuild",
-    "build:only": "run-s build:lib build:docs",
+    "build": "run-s update-exports build:core build:docs",
+    "build:lib": "run-s update-exports build:core build:style build:types",
+    "build:core": "unbuild",
+    "build:only": "run-s build:core build:docs",
     "build:docs": "pnpm --filter docs build",
     "build:style": "run-s gen-styles-file gen-tw-css-file",
     "build:types": "vue-tsc -p tsconfig.type.json",