pxd 0.0.45 → 0.0.46

package/dist/components/_internal/fragment-container.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/_internal/fragment-container.js

@@ -0,0 +1,25 @@
+import { defineComponent, h, version } from "vue";
+export default defineComponent({
+  name: "FragmentContainer",
+  functional: true,
+  render: (() => {
+    if (version.startsWith("2")) {
+      return function(_, context) {
+        const slots = context.slots().default;
+        if (!slots || !slots.length) {
+          return null;
+        }
+        let renderAs = slots[0];
+        if (slots.length > 1) {
+          renderAs = h("div", { class: "pxd-fragment-container", ref: context.data?.ref }, slots);
+        } else if (context.data?.ref && !renderAs.data?.ref) {
+          renderAs.data.ref = context.data?.ref;
+        }
+        return renderAs;
+      };
+    }
+    return function() {
+      return this.$slots.default?.();
+    };
+  })()
+});

package/dist/components/badge/index.vue

@@ -68,7 +68,7 @@ const badgeAttrs = computed(() => {
 <template>
   <Component :is="as" :class="computedClass" v-bind="badgeAttrs">
     <slot />
-  </component>
+  </Component>
 </template>
 
 <style lang="postcss">

package/dist/components/button/index.vue

@@ -106,5 +106,5 @@ function onButtonDblClick(event) {
     </span>
 
     <slot name="suffix" />
-  </component>
+  </Component>
 </template>

package/dist/components/carousel-group/index.d.vue.ts

@@ -24,7 +24,6 @@ declare const __VLS_base: import("vue").DefineComponent<CarouselGroupProps, {},
     indicatorType: "dot" | "line";
     indicatorPosition: import("../../types/shared").BasePosition;
     pauseOnHover: boolean;
-    toggleOnWheel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -20,7 +20,7 @@ const props = defineProps({
   indicatorType: { type: String, required: false, default: "line" },
   indicatorPosition: { type: String, required: false, default: "bottom" },
   pauseOnHover: { type: Boolean, required: false, default: true },
-  toggleOnWheel: { type: Boolean, required: false, default: true }
+  toggleOnWheel: { type: Boolean, required: false }
 });
 const emits = defineEmits(["change"]);
 const THROTTLE_INTERVALS = 550;
@@ -71,12 +71,24 @@ function onWheelToggle(ev) {
   if (!props.toggleOnWheel) {
     return;
   }
+  const length = carousels.value.length;
+  if (length <= 1) {
+    return;
+  }
   const delta = ev.deltaY > 0 ? 1 : -1;
-  onToggleClick(delta);
-  const index = virtualIndex.value;
-  if (!props.loop && (index !== 0 && index !== carousels.value.length - 1)) {
+  const indexBefore = virtualIndex.value;
+  const lastIndex = length - 1;
+  if (!props.loop) {
+    const isAtFirstAndGoPrev = indexBefore <= 0 && delta < 0;
+    const isAtLastAndGoNext = indexBefore >= lastIndex && delta > 0;
+    if (isAtFirstAndGoPrev || isAtLastAndGoNext) {
+      return;
+    }
+  }
+  if (ev.cancelable) {
     ev.preventDefault();
   }
+  onToggleClick(delta);
 }
 function resetContainerPosition(resetIndex) {
   const containerClassList = sliderRef.value.classList;

package/dist/components/carousel-group/index.vue.d.ts

@@ -24,7 +24,6 @@ declare const __VLS_base: import("vue").DefineComponent<CarouselGroupProps, {},
     indicatorType: "dot" | "line";
     indicatorPosition: import("../../types/shared").BasePosition;
     pauseOnHover: boolean;
-    toggleOnWheel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/choicebox/index.vue

@@ -41,7 +41,7 @@ const computedAttrs = computed(() => {
         </slot>
       </span>
     </div>
-  </component>
+  </Component>
 </template>
 
 <style lang="postcss">

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

@@ -65,6 +65,6 @@ provideChoiceboxGroupModelValue(modelValue);
           v-bind="option"
         />
       </slot>
-    </component>
+    </Component>
   </div>
 </template>

package/dist/components/config-provider/index.vue

@@ -15,5 +15,5 @@ provideConfigProvider(props);
 <template>
   <Component :is="as" class="pxd-config-provider">
     <slot />
-  </component>
+  </Component>
 </template>

package/dist/components/error/index.d.vue.ts

@@ -1,8 +1,8 @@
 import type { ErrorType } from '../../types/components/error';
-import type { ComponentSizeWithXs } from '../../types/shared';
+import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared';
 interface Props {
     size?: ComponentSizeWithXs;
-    label?: string;
+    label?: ComponentLabel;
     error?: ErrorType;
 }
 declare var __VLS_6: {};

package/dist/components/error/index.vue

@@ -10,7 +10,7 @@ defineOptions({
 });
 const props = defineProps({
   size: { type: String, required: false, default: "md" },
-  label: { type: String, required: false },
+  label: { type: [String, Number, Array, null], required: false },
   error: { type: Object, required: false }
 });
 const SIZES = {

package/dist/components/error/index.vue.d.ts

@@ -1,8 +1,8 @@
 import type { ErrorType } from '../../types/components/error';
-import type { ComponentSizeWithXs } from '../../types/shared';
+import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared';
 interface Props {
     size?: ComponentSizeWithXs;
-    label?: string;
+    label?: ComponentLabel;
     error?: ErrorType;
 }
 declare var __VLS_6: {};

package/dist/components/fader/index.vue

@@ -76,8 +76,7 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="postcss">
-.pxd-fader--item::before,
-.pxd-fader--item::after {
+.pxd-fader--item::before {
   content: '';
   position: absolute;
   border-radius: inherit;
@@ -88,15 +87,12 @@ onBeforeUnmount(() => {
 }
 
 .pxd-fader--item.left::before,
-.pxd-fader--item.top::before,
-.pxd-fader--item.right::after,
-.pxd-fader--item.bottom::after {
+.pxd-fader--item.top::before {
   opacity: 1;
 }
 
 .pxd-fader--item.horizontal {
-  &::before,
-  &::after {
+  &::before {
     top: 0;
     width: var(--fader-size, 16px);
     height: 100%;
@@ -107,17 +103,10 @@ onBeforeUnmount(() => {
     --dir: to left;
     --dir-revert: to right;
   }
-
-  &::after {
-    right: 0;
-    --dir: to right;
-    --dir-revert: to left;
-  }
 }
 
 .pxd-fader--item.vertical {
-  &::before,
-  &::after {
+  &::before {
     left: 0;
     width: 100%;
     height: var(--fader-size, 16px);
@@ -128,11 +117,5 @@ onBeforeUnmount(() => {
     --dir: to top;
     --dir-revert: to bottom;
   }
-
-  &::after {
-    bottom: 0;
-    --dir: to bottom;
-    --dir-revert: to top;
-  }
 }
 </style>

package/dist/components/index.d.ts

@@ -33,7 +33,6 @@ export { default as HoldButton } from './hold-button/index.vue';
 export { default as Input } from './input/index.vue';
 export { default as IntersectionObserver } from './intersection-observer/index.vue';
 export { default as Kbd } from './kbd/index.vue';
-export { default as KeepAliveContainer } from './keep-alive-container/index.vue';
 export { default as LinkButton } from './link-button/index.vue';
 export { default as List } from './list/index.vue';
 export { default as ListItem } from './list-item/index.vue';
@@ -44,6 +43,7 @@ export { default as Menu } from './menu/index.vue';
 export { default as Message } from './message/index.vue';
 export { default as Modal } from './modal/index.vue';
 export { default as MoreButton } from './more-button/index.vue';
+export { default as NoiseBackground } from './noise-background/index.vue';
 export { default as Note } from './note/index.vue';
 export { default as NumberInput } from './number-input/index.vue';
 export { default as Overlay } from './overlay/index.vue';

package/dist/components/index.js

@@ -33,7 +33,6 @@ export { default as HoldButton } from "./hold-button/index.vue";
 export { default as Input } from "./input/index.vue";
 export { default as IntersectionObserver } from "./intersection-observer/index.vue";
 export { default as Kbd } from "./kbd/index.vue";
-export { default as KeepAliveContainer } from "./keep-alive-container/index.vue";
 export { default as LinkButton } from "./link-button/index.vue";
 export { default as List } from "./list/index.vue";
 export { default as ListItem } from "./list-item/index.vue";
@@ -44,6 +43,7 @@ export { default as Menu } from "./menu/index.vue";
 export { default as Message } from "./message/index.vue";
 export { default as Modal } from "./modal/index.vue";
 export { default as MoreButton } from "./more-button/index.vue";
+export { default as NoiseBackground } from "./noise-background/index.vue";
 export { default as Note } from "./note/index.vue";
 export { default as NumberInput } from "./number-input/index.vue";
 export { default as Overlay } from "./overlay/index.vue";

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

@@ -1,13 +1,11 @@
 import type { InputProps } from '../../types/components/input';
 declare function setNativeInputValue(value: any): void;
 declare function clearValue(): void;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_20: {};
+declare var __VLS_1: {}, __VLS_18: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
+    prefix?: (props: typeof __VLS_1) => any;
 } & {
-    prefix?: (props: typeof __VLS_3) => any;
-} & {
-    suffix?: (props: typeof __VLS_20) => any;
+    suffix?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<InputProps, {
     blur: () => void | undefined;
@@ -39,6 +37,7 @@ declare const __VLS_base: import("vue").DefineComponent<InputProps, {
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
     placeholder: string;
+    error: boolean | string;
     align: "left" | "center" | "right";
     modelValue: import("../../types/shared").ComponentLabel;
     prefixStyle: boolean;

package/dist/components/input/index.vue

@@ -8,7 +8,6 @@ import { useModelValue } from "../../composables/use-model-value";
 import { isTruthyProp } from "../../utils/format";
 import { getFallbackValue } from "../../utils/get";
 import { getUniqueId } from "../../utils/uid";
-import PError from "../error/index.vue";
 defineOptions({
   name: "PInput",
   model: {
@@ -18,7 +17,7 @@ defineOptions({
 });
 const props = defineProps({
   size: { type: String, required: false },
-  error: { type: String, required: false },
+  error: { type: [Boolean, String], required: false, default: false },
   min: { type: [Number, String], required: false },
   max: { type: [Number, String], required: false },
   align: { type: String, required: false, default: "left" },
@@ -42,10 +41,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["click", "input", "change", "focus", "blur", "keydown", "update:modelValue", "compositionstart", "compositionupdate", "compositionend"]);
 const SIZES = {
-  xs: "h-6 text-xs",
-  sm: "h-7.5 text-sm",
-  md: "h-9 text-sm",
-  lg: "h-10 text-base"
+  xs: "h-6 text-xs rounded-sm",
+  sm: "h-7.5 text-sm rounded-md",
+  md: "h-9 text-sm rounded-md",
+  lg: "h-10 text-base rounded-lg"
 };
 const ALIGN = {
   left: "text-left",
@@ -60,7 +59,7 @@ const isComposing = shallowRef(false);
 const isPasswordVisible = shallowRef(!props.password);
 const internalInputType = computed(() => props.inputType || isPasswordVisible.value ? "text" : "password");
 const computedClass = computed(() => {
-  const classes = ["pxd-input--border group relative flex items-center overflow-hidden rounded-md bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-all"];
+  const classes = [];
   classes.push(getFallbackValue(props.size, SIZES, config.size));
   if (isTruthyProp(props.disabled)) {
     classes.push("is-disabled");
@@ -162,77 +161,74 @@ defineExpose({
 </script>
 
 <template>
-  <label class="pxd-input block w-full max-w-full" :for="uniqueId" @click="onClick" @dragstart.prevent>
-    <div v-if="label || $slots.label" class="pxd-form--label">
-      <slot name="label">{{ label }}</slot>
+  <label
+    class="pxd-input pxd-input--border group relative flex w-full max-w-full items-center overflow-hidden bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-all"
+    :for="uniqueId"
+    :data-disabled="disabled"
+    :class="computedClass"
+    @click="onClick"
+    @dragstart.prevent
+  >
+    <div
+      v-if="$slots.prefix"
+      class="pxd-input--prefix text-sm pl-3 flex h-full items-center text-gray-700"
+      :class="{ 'pr-3 rounded-l-inherit border-r border-gray-300 bg-background-200': prefixStyle }"
+    >
+      <slot name="prefix" />
     </div>
 
-    <div :data-disabled="disabled" :class="computedClass" tabindex="-1">
-      <div
-        v-if="$slots.prefix"
-        class="pxd-input--prefix text-sm pl-3 flex h-full items-center text-gray-700"
-        :class="{ 'pr-3 rounded-l-inherit border-r border-gray-300 bg-background-200': prefixStyle }"
-      >
-        <slot name="prefix" />
-      </div>
-
-      <input
-        :id="uniqueId"
-        ref="inputRef"
-        class="px-3 py-0 size-full appearance-none rounded-inherit border-none bg-transparent font-inherit outline-none file:font-medium file:border-0 file:bg-transparent placeholder:text-gray-600 placeholder:select-none disabled:cursor-not-allowed disabled:text-gray-700 disabled:placeholder:text-gray-500"
-        :class="{ 'pr-9': password || allowClear, [ALIGN[align]]: true }"
-        :type="internalInputType"
-        :min="min"
-        :max="max"
-        autocorrect="off"
-        autocomplete="off"
-        autocapitalize="off"
-        :readonly="readonly"
-        :disabled="disabled"
-        :required="required"
-        :inputmode="inputmode"
-        :minlength="minlength"
-        :maxlength="maxlength"
-        :autofocus="autofocus"
-        :placeholder="placeholder"
-        :aria-disabled="disabled"
-        :data-value="computedModelValue"
-        @blur="onBlur"
-        @focus="onFocus"
-        @input="onInput"
-        @change="onChange"
-        @keydown="onKeydown"
-        @compositionstart="onCompositionStart"
-        @compositionupdate="onCompositionUpdate"
-        @compositionend="onCompositionEnd"
-      >
+    <input
+      :id="uniqueId"
+      ref="inputRef"
+      class="px-3 py-0 size-full appearance-none rounded-inherit border-none bg-transparent font-inherit outline-none file:font-medium file:border-0 file:bg-transparent placeholder:text-gray-600 placeholder:select-none disabled:cursor-not-allowed disabled:text-gray-700 disabled:placeholder:text-gray-500"
+      :class="{ 'pr-9': password || allowClear, [ALIGN[align]]: true }"
+      :type="internalInputType"
+      :min="min"
+      :max="max"
+      autocorrect="off"
+      autocomplete="off"
+      autocapitalize="off"
+      :readonly="readonly"
+      :disabled="disabled"
+      :required="required"
+      :inputmode="inputmode"
+      :minlength="minlength"
+      :maxlength="maxlength"
+      :autofocus="autofocus"
+      :placeholder="placeholder"
+      :aria-disabled="disabled"
+      :data-value="computedModelValue"
+      @blur="onBlur"
+      @focus="onFocus"
+      @input="onInput"
+      @change="onChange"
+      @keydown="onKeydown"
+      @compositionstart="onCompositionStart"
+      @compositionupdate="onCompositionUpdate"
+      @compositionend="onCompositionEnd"
+    >
 
-      <div
-        v-if="password || allowClear"
-        v-show="computedModelValue"
-        class="pxd-input--icon right-0 top-0 flex aspect-square h-full cursor-pointer items-center justify-center rounded-r-inherit text-gray-700"
-      >
-        <div v-if="password" class="p-1 rounded-sm hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors" @click.stop.prevent="toggleType">
-          <EyeOffIcon v-if="isPasswordVisible" class="size-3" />
-          <EyeIcon v-else class="size-3" />
-        </div>
-        <div v-if="allowClear" class="p-1 rounded-sm hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors" @click.stop.prevent="clearValue">
-          <CrossIcon class="size-3" />
-        </div>
+    <div
+      v-if="password || allowClear"
+      v-show="computedModelValue"
+      class="pxd-input--icon right-0 top-0 flex aspect-square h-full cursor-pointer items-center justify-center rounded-r-inherit text-gray-700"
+    >
+      <div v-if="password" class="p-1 rounded-sm hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors" @click.stop.prevent="toggleType">
+        <EyeOffIcon v-if="isPasswordVisible" class="size-3" />
+        <EyeIcon v-else class="size-3" />
       </div>
-
-      <div
-        v-if="$slots.suffix"
-        class="pxd-input--suffix text-sm pr-3 flex h-full items-center text-gray-700"
-        :class="{ 'pl-3 rounded-r-inherit border-l border-gray-300 bg-background-200': suffixStyle }"
-      >
-        <slot name="suffix" />
+      <div v-if="allowClear" class="p-1 rounded-sm hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors" @click.stop.prevent="clearValue">
+        <CrossIcon class="size-3" />
       </div>
     </div>
 
-    <PError v-if="error" class="mt-2" :size="size">
-      {{ error }}
-    </PError>
+    <div
+      v-if="$slots.suffix"
+      class="pxd-input--suffix text-sm pr-3 flex h-full items-center text-gray-700"
+      :class="{ 'pl-3 rounded-r-inherit border-l border-gray-300 bg-background-200': suffixStyle }"
+    >
+      <slot name="suffix" />
+    </div>
   </label>
 </template>
 

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

@@ -1,13 +1,11 @@
 import type { InputProps } from '../../types/components/input';
 declare function setNativeInputValue(value: any): void;
 declare function clearValue(): void;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_20: {};
+declare var __VLS_1: {}, __VLS_18: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
+    prefix?: (props: typeof __VLS_1) => any;
 } & {
-    prefix?: (props: typeof __VLS_3) => any;
-} & {
-    suffix?: (props: typeof __VLS_20) => any;
+    suffix?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<InputProps, {
     blur: () => void | undefined;
@@ -39,6 +37,7 @@ declare const __VLS_base: import("vue").DefineComponent<InputProps, {
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
     placeholder: string;
+    error: boolean | string;
     align: "left" | "center" | "right";
     modelValue: import("../../types/shared").ComponentLabel;
     prefixStyle: boolean;

package/dist/components/intersection-observer/index.vue

@@ -2,7 +2,7 @@
 import { nextTick, shallowRef } from "vue";
 import { useIntersectionObserver } from "../../composables/use-browser-observer";
 import { getCssUnitValue } from "../../utils/format";
-import PKeepAliveContainer from "../keep-alive-container/index.vue";
+import FragmentContainer from "../_internal/fragment-container";
 defineOptions({
   name: "PIntersectionObserver"
 });
@@ -53,9 +53,9 @@ useIntersectionObserver(containerRef, ([entry]) => {
 <template>
   <div ref="containerRef" class="pxd-intersection-observer" :style="containerSize">
     <KeepAlive v-if="keepAlive">
-      <PKeepAliveContainer v-if="isVisible">
+      <FragmentContainer v-if="isVisible">
         <slot />
-      </PKeepAliveContainer>
+      </FragmentContainer>
     </KeepAlive>
     <template v-else>
       <slot v-if="isVisible" />

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

@@ -19,7 +19,7 @@ const attrs = useAttrs();
 const computedClass = computed(() => {
   const classes = ["pxd-link-button"];
   if (props.type === "text") {
-    classes.push("font-medium hover:underline hover:opacity-60 active:opacity-80 motion-safe:transition-opacity");
+    classes.push("font-medium hover:underline hover:opacity-70 active:opacity-90 motion-safe:transition-opacity");
   }
   return classes.join(" ");
 });

package/dist/components/list-item/index.vue

@@ -71,5 +71,5 @@ onMounted(async () => {
       <span>{{ label }}</span>
       <span v-if="description" class="text-foreground-secondary">{{ description }}</span>
     </slot>
-  </component>
+  </Component>
 </template>

package/dist/components/menu/index.d.vue.ts

@@ -6,11 +6,11 @@ interface Props {
     position?: ComponentPosition;
     closeOnPressEscape?: boolean;
 }
-declare var __VLS_13: {}, __VLS_24: {};
+declare var __VLS_12: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_12) => any;
 } & {
-    items?: (props: typeof __VLS_24) => any;
+    items?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent, args_1: ListOptionSelected) => any;

package/dist/components/menu/index.vue

@@ -17,9 +17,6 @@ const popoverVisible = shallowRef(false);
 function onVisibleChange(visible) {
   popoverVisible.value = visible;
 }
-function showPopover() {
-  onVisibleChange(true);
-}
 function hidePopover() {
   onVisibleChange(false);
 }
@@ -32,20 +29,17 @@ function onOptionClick(ev, item) {
 <template>
   <PPopover
     enterable
-    close-on-scroll
     class="pxd-menu"
-    trigger="manual"
+    trigger="click"
     :show-delay="0"
     :hide-delay="100"
     :position="position"
-    :show-transition="false"
     :visible="popoverVisible"
     :close-on-press-escape="closeOnPressEscape"
     transition-name="pxd-transition--fade"
     v-bind="$attrs"
     @escape="hidePopover"
     @outside-click="hidePopover"
-    @trigger-click="showPopover"
     @visible-change="onVisibleChange"
   >
     <slot />

package/dist/components/menu/index.vue.d.ts

@@ -6,11 +6,11 @@ interface Props {
     position?: ComponentPosition;
     closeOnPressEscape?: boolean;
 }
-declare var __VLS_13: {}, __VLS_24: {};
+declare var __VLS_12: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_12) => any;
 } & {
-    items?: (props: typeof __VLS_24) => any;
+    items?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent, args_1: ListOptionSelected) => any;

package/dist/components/noise-background/index.d.vue.ts

@@ -0,0 +1,19 @@
+import type { ComponentAs } from '../../types/shared';
+interface Props {
+    as?: ComponentAs;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    as: ComponentAs;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/noise-background/index.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineOptions({
+  name: "PNoiseBackground"
+});
+defineProps({
+  as: { type: null, required: false, default: "div" }
+});
+</script>
+
+<template>
+  <Component :is="as" class="pxd-noise-background relative">
+    <slot />
+  </Component>
+</template>
+
+<style>
+.pxd-noise-background:after{background-image:url("data:image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////2wBDAf//////////////////////////////////////////////////////////////////////////////////////wAARCACAAIADASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEC/8QAJxAAAQIFBAIDAQEBAAAAAAAAAREhADFBUWFxgZHwobHB0eHxEkL/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AtWIVxypWrvitIpeoxpWfwNYXA3mFPbQOZIVZuXT+VeAMfKydfUyQiVgDjfXSuwiLZVXP1rTaxlGlFLBwo/cikBdyxo/3VWdjpCp+2dBb3KdTFkU1+MWoKPEfvxmqE7zgCjCWZh+GCNbG0ssKPkLD2mcz5sIvrpt3xAQ+uBLzb6aB2SSfFbWWJNXzVjcNptYGLr8sjztlMUYIovswGJ3mHYJFCkP6P549NF7qvhesIkmNd9aS0FbwBUU8V/MosjCU0FZo5/nSAYMZtWZaJ6ClXA9PrWAD35MmlyquphMKtNF1bl7RcMyVthBiUKXI80lr6gFTI9UEvw1Fg4coPmWRm14BA1UNM9TECTRP7wozfQwEWSU+KMSt+Jzg7AcioQ9XzQVltWUtTLHKQ1FKler/AGkBa/PG3FofGOHJ77iqJaVxpW8JSE9vnVEwFrAXa3zTF/cH88dP8SJOcxcXlrzAMnrYyyJPQcgqZVuB9Lf8hRv1VTFcha2hdPp0G62xW0oGGtAiXvzhkgLIJUD80o1qxKCiekqqVpS7xZu/NHRhyrJzCg2ndPCIp+TAQWrlb62dC4Ji13bqhcM03nC5LXUMn6yzkkRXSxNqSTqu0AcVQn2vmaLRBFo0xNv4NTIQQMQHwlZ9fEBo+nzq8zzAF3vKgGg11mIMZdCpbHRBn/Z678WSH6ge8ztQpbQAobnshe9II96K1HoicKDiBntRVrbHUm6ZvPh38GAhKB1WWZCUm+YuSeWTxpSdYN43XTcdEPjzL3o3Cgr1KocInXhqSM9CTwuaQabWJFLdO4htxpIogMtJUSAvui+dMRDSf8ex2RLQeTVVtDLT6nAWnd81ykBd/X1WR3jK5oPaZa7yi7qq+PrUPaCFcH6k/MsQB17qj38VnDmSsr7/AGHiBXE/HjVa0pFwh13219UgB13Jk70YU8JDRxa5G3FMVgOuSJ6b6QlZ80I0dwdYAk8NI4y8JXKVLhzqpPaw/XatlfflobhRw5+NnpKAEo5xj3L9SFjdt6KKwZdBhAMzdZpvEWkgBwB5WWEWsBVAJEi1ClHntA2ktmkZ1AunzCTfTHTA4FYMqJPAw3hfUAnygebqbOx9qYJ+ec5t+HpS+9inKQH4GBK1kbz1pAHS03bdXusV/nTHuukZZ7Pu3eAyCCCwHHV1lQwFml70WoTbeIg75HNgGaKvflG8KtBAbCn6JpppSAHepqMdfZ4SrgKWnPpxaCvKnkkBPE/yL2mvdbvAShUULprmSdeCI9pSZthtCdKf9PeqnfSIbPKWPsWVC1YCtVKJeSbI78PDjbeduvOCNW8hbM5/dTE1VnM9nQVtNIC/fS4+ZQrIrKj1co2MwGpUk5RLfXhIIi+JoKdErQAbfnz3WCHrU0FVpXaHxsrKGg4TZStBjejXaAasmUEyN9JQlK96DVJcIqvNPr8fcsRfLTp8DtIB7dPvyFpaJKeVsFc39u0Ga/kD+f14iI+1ZNVKCuywF9Nqq9X+xJIgNFDefk4ijgUQbnD9eFBIYTstpWgFddKDnP5Es6pQKZpyN6JeLPbVjdD7ptCTTfONnLzCLAD5szjca3gxFM8V8RfzVz47KJKlAKydk21eAcIr8aJUDSBZzKciyXQ7qZRDQ3Pw2SPNs6Mr6X/svcBJm3272/kpQsV+iot/WERAQric0u6r84zFMsNaxVaD7tAQBCBZFT3WbA8miXTE6fea5BhwCa8T/OYLJZpt9bwCvfM18bmSwX2KJNd03zBcern5UxAUwDdFk17VoIA5WWWI86fEWoRi7TKLXDre0MNJfQdG4gflf5V+SplAQKgqAm/CyrOTXi0VHa3CqaGbTvBj8LR5htNkWJZAqBDKbJWfVaApszzKYeyS6kRNp08sacl4vPL9ojyhQnVHrJn1+IA7AGj1+suN4JmmXT91tWGzlbT2/cwZJLVGn9+YA0iMOZyPv1tDCvdtEsrpD/WyyaplJk84g2F6/sDakAsu9u2+ICjlZUzvRoiNVEueEDs14rB38/3qwBTdfz3amtYPt62n/UzBKIdZW91CDxDkqofV/OIA11eTX74FoTF1/apdemI0gL3Z1F9kYxX2S59I2iaCAOVo9p7vX8g6hTTcn8bhYX6NZTFlfiG2XvxrLFIBWxShnzZ/iLOujOh74ESokvKJspUtPSJuWptmszJXgLS42XvXiy7fv7GU8E6kbGqrwsKFfktPXpk5gLvOR19ve86xRz9Pi/5ECpmdUn6xCkneWeglavSAmqGdHk9lUzuu0Wrovuvh+ViYIUgKwF5S/dYspDZrvLHu8BHBRQdf7bqmKDu86JcUHKJJJQlNy3i3nGkRih5COmjsuviA1d/y3WiKb+CzLj1BGu3hAnq03gW2pmdXN1FisAC4XAmnfM4UQLJuGdE/cQqfEn/hfeIxAF5lrLzXmABUkgBqLIZLvVItfn1XRfYiBA8wAxqzd+iALJkVedxXbiAfWQ+Hk5lzC2fCgy/CPLxRYTTi1WO3MVyEkt9lbe+NAUyKAptpp7ECiBZFq9pOBGxtdpTkUh974S7nCWgFSnqVd74lWDsjSE1bRU+Ybay18TnWUoSdN2XdDAf/2Q==");background-position:50%;background-size:96px 96px;border-radius:inherit;content:"";inset:0;opacity:.035;pointer-events:none;position:absolute}
+</style>