@privyid/persona 1.2.0 → 1.2.1

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

@@ -1,91 +0,0 @@
-import type { PropType } from 'vue-demi';
-import type { TypeVariant, SizeVariant } from '.';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    variant: {
-        type: PropType<TypeVariant>;
-        default: undefined;
-    };
-    src: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    fallbackSrc: {
-        type: StringConstructor;
-        default: string;
-    };
-    name: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    square: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    imgloaded: (args_0: string) => void;
-    imgerror: (args_0: Error) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    variant: {
-        type: PropType<TypeVariant>;
-        default: undefined;
-    };
-    src: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    fallbackSrc: {
-        type: StringConstructor;
-        default: string;
-    };
-    name: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    imgClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    square: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    onImgloaded?: ((args_0: string) => any) | undefined;
-    onImgerror?: ((args_0: Error) => any) | undefined;
-}>, {
-    size: SizeVariant;
-    name: string;
-    src: string;
-    variant: TypeVariant;
-    fallbackSrc: string;
-    imgClass: string | unknown[] | Record<string, any>;
-    square: boolean;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/avatar/AvatarGroup.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/avatar/AvatarGroup.spec.mjs

@@ -1,65 +0,0 @@
-import { render } from "@testing-library/vue";
-import Avatar from "./Avatar.vue";
-import AvatarGroup from "./AvatarGroup.vue";
-import { expect } from "vitest";
-it("should render properly", () => {
-  const screen = render({
-    components: { AvatarGroup },
-    template: `
-      <AvatarGroup />
-    `
-  });
-  const avatar = screen.queryByTestId("avatar-group");
-  expect(avatar).toBeInTheDocument();
-  expect(avatar).toHaveClass("avatar-group");
-});
-it("should render properly", () => {
-  const screen = render({
-    components: { AvatarGroup, Avatar },
-    template: `
-      <AvatarGroup>
-        <Avatar />
-      </AvatarGroup>
-    `
-  });
-  const avatarGroup = screen.queryByTestId("avatar-group");
-  const avatar = screen.queryByTestId("avatar");
-  expect(avatarGroup).toBeInTheDocument();
-  expect(avatar).toBeInTheDocument();
-  expect(avatar).toHaveClass("avatar--xs");
-});
-it("should render all items if less or equal the `length`", () => {
-  const screen = render({
-    components: { AvatarGroup, Avatar },
-    template: `
-      <AvatarGroup>
-        <Avatar />
-        <Avatar />
-        <Avatar />
-        <Avatar />
-      </AvatarGroup>
-    `
-  });
-  const avatarGroup = screen.queryByTestId("avatar-group");
-  const avatars = screen.queryAllByTestId("avatar");
-  expect(avatarGroup).toBeInTheDocument();
-  expect(avatars).toHaveLength(4);
-});
-it("should truncate the items if more than `length`", () => {
-  const screen = render({
-    components: { AvatarGroup, Avatar },
-    template: `
-      <AvatarGroup length="3">
-        <Avatar />
-        <Avatar />
-        <Avatar />
-        <Avatar />
-        <Avatar />
-      </AvatarGroup>
-    `
-  });
-  const avatarGroup = screen.queryByTestId("avatar-group");
-  const avatars = screen.queryAllByTestId("avatar");
-  expect(avatarGroup).toBeInTheDocument();
-  expect(avatars).toHaveLength(3);
-});

package/dist/components/avatar/AvatarGroup.vue

@@ -1,39 +0,0 @@
-<template>
-  <div
-    data-testid="avatar-group"
-    class="avatar-group">
-    <pAvatarTruncate
-      :size="size"
-      :length="length">
-      <slot />
-    </pAvatarTruncate>
-  </div>
-</template>
-
-<script setup>
-import pAvatarTruncate from "./AvatarTruncate.vue";
-defineProps({
-  size: {
-    type: String,
-    default: "xs"
-  },
-  length: {
-    type: [Number, String],
-    default: 5
-  }
-});
-</script>
-
-<style lang="postcss">
-.avatar-group {
-  --p-avatar-outline-color: theme(backgroundColor.default.DEFAULT);
-  --p-avatar-outline-color-dark: theme(backgroundColor.dark.default.DEFAULT);
-
-  @apply items-center flex -space-x-1;
-
-  .avatar {
-    @apply outline outline-2 outline-offset-0 outline-[color:var(--p-avatar-outline-color)];
-    @apply dark:outline-[color:var(--p-avatar-outline-color-dark)];
-  }
-}
-</style>

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

@@ -1,40 +0,0 @@
-import type { PropType } from 'vue-demi';
-import type { SizeVariant } from '.';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    length: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    length: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    size: SizeVariant;
-    length: string | number;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/avatar/AvatarTruncate.vue

@@ -1,33 +0,0 @@
-<script>
-import {
-  h,
-  defineComponent
-} from "vue-demi";
-import { findAllChildren } from "../utils/vnode";
-import pAvatar from "./Avatar.vue";
-export default defineComponent({
-  props: {
-    size: {
-      type: String,
-      default: "xs"
-    },
-    length: {
-      type: [Number, String],
-      default: 0
-    }
-  },
-  setup(props, { slots }) {
-    return () => {
-      const maxlength = Number(props.length);
-      const items = findAllChildren(slots.default(), "Avatar");
-      const shownItems = items.length > maxlength ? items.slice(0, maxlength - 1) : items;
-      const result = shownItems.map((avatar) => {
-        return h(avatar, { size: props.size });
-      });
-      if (items.length > maxlength)
-        result.push(h(pAvatar, { size: props.size }, () => `+${items.length + 1 - maxlength}`));
-      return result;
-    };
-  }
-});
-</script>

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

@@ -1,31 +0,0 @@
-/**
- * TODO: Migrate this component to script setup after defineRender has been release
- * https://github.com/vuejs/rfcs/discussions/585
- */
-import type { PropType } from 'vue-demi';
-import type { SizeVariant } from '.';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    length: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-}>, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
-    [key: string]: any;
-}>[], {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    length: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    size: SizeVariant;
-    length: string | number;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/avatar/__mocks__/image.d.ts

@@ -1 +0,0 @@
-export default function MockImage(): EventTarget;

package/dist/components/avatar/__mocks__/image.mjs

@@ -1,17 +0,0 @@
-export default function MockImage() {
-  const et = new EventTarget();
-  let src = "";
-  Object.defineProperty(et, "src", {
-    get() {
-      return src;
-    },
-    set(value) {
-      src = value;
-      if (value !== "" && value !== "/broken-link.jpg")
-        et.dispatchEvent(new Event("load"));
-      else
-        et.dispatchEvent(new Event("error"));
-    }
-  });
-  return et;
-}

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

@@ -1,2 +0,0 @@
-export type TypeVariant = 'image' | 'alias';
-export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/avatar/index.md

@@ -1,244 +0,0 @@
----
-title: Avatar · Components
-description: Show user's avatar, using name or image
----
-
-<script setup>
-  import pAvatar from './Avatar.vue'
-  import pAvatarGroup from './AvatarGroup.vue'
-  import IconUser from '@privyid/persona-icon/vue/profile/20.vue'
-  import IconGroup from '@privyid/persona-icon/vue/chat/24.vue'
-  import pBanner from '../banner/Banner.vue'
-</script>
-
-# Avatar
-
-> Show user's avatar, using name or image
-
-## Usage
-
-### Using image
-
-<preview>
-  <p-avatar src="https://picsum.photos/id/50/50" />
-</preview>
-
-```vue
-<template>
-  <p-avatar src="https://picsum.photos/id/50/50" />
-</template>
-```
-
-### Using alias
-
-<preview>
-  <p-avatar variant="alias" name="Tarjono Smith" />
-</preview>
-
-```vue
-<template>
-  <p-avatar variant="alias" name="Tarjono Smith" />
-</template>
-```
-
-### Using icon
-
-<preview>
-  <p-avatar>
-    <IconUser />
-  </p-avatar>
-</preview>
-
-```vue
-<template>
-  <p-avatar>
-    <IconUser />
-  </p-avatar>
-</template>
-
-<script setup>
-  import IconUser from '@privyid/persona-icon/vue/profile/20.vue'
-</script>
-```
-
-## Square round
-Avatar also comes in square-round type variant. Just using `square` prop
-to enable this type variant.
-
-<p-banner :dismissable="false">
-  Use square-round type variant of avatars only to represent an entity, e.g. group chat avatar. 
-  Avatar square-round can't be used to represent a user.
-</p-banner>
-
-<preview>
-  <p-avatar square>
-    <IconGroup />
-  </p-avatar>
-</preview>
-
-```vue
-<template>
-  <p-avatar square>
-    <IconChatGroup />
-  </p-avatar>
-</template>
-```
-
-## Sizing
-
-There are 5 available size variant: `xs`, `sm`, `md`, `lg`, `xl`. The default is `md`.
-
-<preview class="flex-col space-y-4">
-  <div class="flex flex-col items-center space-gap-3 lg:flex-row">
-    <p-avatar src="https://picsum.photos/id/24/24" size="xs" />
-    <p-avatar src="https://picsum.photos/id/32/32" size="sm" />
-    <p-avatar src="https://picsum.photos/id/40/40" size="md" />
-    <p-avatar src="https://picsum.photos/id/56/56" size="lg" />
-    <p-avatar src="https://picsum.photos/id/96/96" size="xl" />
-  </div>
-  <div class="flex flex-col items-center space-gap-3 lg:flex-row">
-    <p-avatar src="https://picsum.photos/id/96/96" size="xl" square />
-    <p-avatar src="https://picsum.photos/id/56/56" size="lg" square />
-    <p-avatar src="https://picsum.photos/id/40/40" size="md" square />
-    <p-avatar src="https://picsum.photos/id/32/32" size="sm" square />
-    <p-avatar src="https://picsum.photos/id/24/24" size="xs" square />
-  </div>
-</preview>
-
-```vue
-<template>
-  <p-avatar src="https://picsum.photos/id/24/24" size="xs" />
-  <p-avatar src="https://picsum.photos/id/32/32" size="sm" />
-  <p-avatar src="https://picsum.photos/id/40/40" size="md" />
-  <p-avatar src="https://picsum.photos/id/56/56" size="lg" />
-  <p-avatar src="https://picsum.photos/id/96/96" size="xl" />
-
-  <p-avatar src="https://picsum.photos/id/96/96" size="xl" square />
-  <p-avatar src="https://picsum.photos/id/56/56" size="lg" square />
-  <p-avatar src="https://picsum.photos/id/40/40" size="md" square />
-  <p-avatar src="https://picsum.photos/id/32/32" size="sm" square />
-  <p-avatar src="https://picsum.photos/id/24/24" size="xs" square />
-</template>
-```
-
-## Avatar Group
-
-Avatar can be grouped using `<p-avatar-group>`. Group sets used to display
-a collection of avatars with size xsmall only.
-
-<preview>
-  <p-avatar-group>
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-  </p-avatar-group>
-</preview>
-
-```vue
-<template>
-  <p-avatar-group>
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-  </p-avatar-group>
-</template>
-```
-
-### Limiting items
-
-Set maximum avatar inside avatar group using prop `length`, if items more than the length, it truncated automatically.
-default is `5`
-
-<preview>
-  <p-avatar-group length="3">
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-  </p-avatar-group>
-</preview>
-
-```vue
-<template>
-  <p-avatar-group length="3">
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-    <p-avatar />
-  </p-avatar-group>
-</template>
-```
-
-## Variant
-
-Avatar has 2 style variant: `image` and `alias`
-
-<preview class="space-x-3">
-  <p-avatar variant="image" src="https://picsum.photos/id/40/40" />
-  <p-avatar variant="alias" name="Tarjono Smith" />
-</preview>
-
-```vue
-<template>
-  <p-avatar variant="image" src="https://picsum.photos/id/40/40" />
-  <p-avatar variant="alias" name="Tarjono Smith" />
-</template>
-```
-
-### Auto-detect variant
-
-If prop `variant` not set, it will detect the variant with some caveats:
-  - if `src` is provided, it will use `image`
-  - if `name` is provided, it will use `alias`
-  - Otherwise, it will use `image`
-
-```vue
-<template>
-  <!-- This will use `image` -->
-  <p-avatar src="https://picsum.photos/id/40/40" />
-  <!-- This will use `alias` -->
-  <p-avatar name="Tarjono Smith" />
-  <!-- This will use `image` -->
-  <p-avatar />
-</template>
-```
-
-**Result**:
-
-<preview class="space-x-3">
-  <p-avatar variant="image" src="https://picsum.photos/id/40/40" />
-  <p-avatar variant="alias" name="Tarjono Smith" />
-  <p-avatar />
-</preview>
-
-## API
-
-### Props
-
-| Props         |   Type   | Default | Description                                                                                                                       |
-|---------------|:--------:|:-------:|-----------------------------------------------------------------------------------------------------------------------------------|
-| `variant`     | `String` | `image` | Avatar type variant, valid value: `avatar`, `alias`. default value is determined by some caveats, see [this](#auto-detect-variant) |
-| `src`         | `String` |    -    | Image URL, **required if using variant `image`**                                                                                  |
-| `fallbackSrc` | `String` |    -    | Fallback image url for broken link                                                                                                |
-| `name`        | `String` |    -    | Avatar name which would be generated into alias, **required if using variant `alias`**                                             |
-| `size`        | `String` |  `md`   | Avatar size, valid value: `xs`, `sm`, `md`, `lg`, `xl`                                                                            |
-| `imgClass`    | `String` |    -    | Additional class for image element                                                                                                |
-
-### Slots
-
-| Name      | Description                                     |
-|-----------|-------------------------------------------------|
-| `default` | Content to replace default avatar image element |
-
-### Events
-
-| Name        | Arguments | Description                     |
-|-------------|-----------|---------------------------------|
-| `imgloaded` | Image URL | Event when image loaded         |
-| `imgerror`  | Error     | Event when image failed to load |

package/dist/components/avatar/utils/color-hash.d.ts

@@ -1,2 +0,0 @@
-export declare function colorHash(text: string): [string, string];
-export declare function colorRandom(): [string, string];

package/dist/components/avatar/utils/color-hash.mjs

@@ -1,22 +0,0 @@
-const COLOR_SEED = [
-  ["#F2F7FD", "#0065D1"],
-  ["#F8F8F8", "#737373"],
-  ["#F4FBF6", "#23B242"],
-  ["#F2FBFC", "#02AEC5"],
-  ["#FFFBF4", "#F5A623"],
-  ["#FEF5F4", "#E42E2C"],
-  ["#FBFAF2", "#B79A00"],
-  ["#FEFDF4", "#EFD52C"],
-  ["#FAFEF5", "#A3E635"],
-  ["#F3FBFA", "#12B89C"],
-  ["#F7F2FD", "#5E00D1"]
-];
-export function colorHash(text) {
-  let hash = 0;
-  for (let index = 0; index < text.length; ++index)
-    hash = (hash << 5) - hash + text.charCodeAt(index) | 0;
-  return COLOR_SEED.at(Math.abs(hash) % COLOR_SEED.length);
-}
-export function colorRandom() {
-  return COLOR_SEED.at(Math.floor(Math.random() * COLOR_SEED.length));
-}

package/dist/components/avatar/utils/color-hash.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/avatar/utils/color-hash.spec.mjs

@@ -1,29 +0,0 @@
-import { vi } from "vitest";
-import { colorHash, colorRandom } from "./color-hash.mjs";
-describe("colorHash", () => {
-  it("should pick one of color randomly by hashing some text", () => {
-    const a = colorHash("Tarjono");
-    const b = colorHash("Waluyo");
-    const c = colorHash("Susilo Ahmad dimejo");
-    expect(a).not.toEqual(b);
-    expect(a).not.toEqual(c);
-    expect(b).not.toEqual(c);
-  });
-  it("should pick same color if text is same", () => {
-    const a = colorHash("Tarjono");
-    const b = colorHash("Tarjono");
-    expect(a).toEqual(b);
-  });
-});
-describe("colorRandom", () => {
-  it("should randomly pick one of color", () => {
-    const mock = vi.spyOn(Math, "random");
-    mock.mockReturnValueOnce(0.1).mockReturnValueOnce(0.4).mockReturnValueOnce(0.6);
-    const a = colorRandom();
-    const b = colorRandom();
-    const c = colorRandom();
-    expect(a).not.toEqual(b);
-    expect(a).not.toEqual(c);
-    expect(b).not.toEqual(c);
-  });
-});

package/dist/components/avatar/utils/create-image.d.ts

@@ -1,5 +0,0 @@
-export declare function createText(text: string, size: number, bgColor: string, textColor: string): string;
-export declare function createSpinner(width?: number, height?: number): string;
-export declare function getAlias(name: string): string;
-export declare function createAlias(name?: string, size?: number): string;
-export declare function dummyAvatar(): string;

package/dist/components/avatar/utils/create-image.mjs

@@ -1,19 +0,0 @@
-import avatarImg from "../assets/avatar.png";
-import { colorHash, colorRandom } from "./color-hash.mjs";
-export function createText(text, size, bgColor, textColor) {
-  return `data:image/svg+xml,<svg height="${size}" width="${size}" xmlns="http://www.w3.org/2000/svg"><rect fill="${encodeURIComponent(bgColor)}" x="0" y="0" height="${size}" width="${size}"></rect><text fill="${encodeURIComponent(textColor)}" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="sans-serif" font-weight="600">${encodeURIComponent(text)}</text></svg>`;
-}
-export function createSpinner(width = 50, height = width) {
-  return `data:image/svg+xml,<svg class="spinner spinner-basic" width="${width}" height="${height}" viewBox="0 0 19 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g transform="translate(4.75 4.75) scale(.5)"><rect class="spinner-basic__bar" x="8.125" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="15.1202" y="1.86199" width="2.5" height="6.25" rx="1.25" transform="rotate(45 15.1202 1.86199)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.125s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="18.75" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 18.75 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.250s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="16.888" y="15.1202" width="2.5" height="6.25" rx="1.25" transform="rotate(135 16.888 15.1202)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.375s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.125" y="12.5" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.500s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.2814" y="10.7008" width="2.5" height="6.25" rx="1.25" transform="rotate(45 6.2814 10.7008)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.625s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.25" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 6.25 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.750s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.04917" y="6.2814" width="2.5" height="6.25" rx="1.25" transform="rotate(135 8.04917 6.2814)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.875s" repeatCount="indefinite" /></rect></g></svg>`;
-}
-export function getAlias(name) {
-  return name.split(" ").slice(0, 2).map((c) => c.at(0)).join("").toUpperCase();
-}
-export function createAlias(name, size = 50) {
-  const alias = name ? getAlias(name) : "\uFF65\u1D17\uFF65";
-  const [bgColor, textColor] = name ? colorHash(name) : colorRandom();
-  return createText(alias, size, bgColor, textColor);
-}
-export function dummyAvatar() {
-  return avatarImg;
-}