telegram-ui-vue/dist/index.js

Vue UI kit for Telegram Mini Apps inspired by Telegram interface.

import { defineComponent, computed, useAttrs, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, resolveDynamicComponent, createElementBlock, Fragment, createTextVNode, toDisplayString, onBeforeMount, createCommentVNode, useSlots, normalizeClass, createElementVNode, createVNode, ref, inject, watch, useTemplateRef, provide, renderList, Teleport, toValue, normalizeStyle, isVNode, createStaticVNode, onMounted, createSlots, toRefs } from 'vue';
import { DrawerClose, DrawerOverlay, DrawerRootNested, DrawerRoot, DrawerTrigger, DrawerPortal, DrawerContent } from 'vaul-vue';
import { offset, flip, autoPlacement, shift, size, arrow, useFloating, autoUpdate } from '@floating-ui/vue';

const _sfc_main$1z = /* @__PURE__ */ defineComponent({
  __name: "Caption",
  props: {
    level: { default: "1" }
  },
  setup(__props) {
    const props = __props;
    const attrs = computed(() => ({
      weight: "3",
      is: "span",
      ...useAttrs()
    }));
    const classes = computed(() => ({
      caption: true,
      [`caption--${props.level}`]: true
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Typography), mergeProps(attrs.value, { class: classes.value }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16, ["class"]);
    };
  }
});

const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};

const Caption = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-3def8709"]]);

const _sfc_main$1y = /* @__PURE__ */ defineComponent({
  __name: "Headline",
  setup(__props) {
    const attrs = computed(() => ({
      weight: "3",
      is: "h5",
      ...useAttrs()
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Typography), mergeProps(attrs.value, { class: "headline" }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16);
    };
  }
});

const Headline = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__scopeId", "data-v-a666089a"]]);

const _sfc_main$1x = /* @__PURE__ */ defineComponent({
  __name: "LargeTitle",
  setup(__props) {
    const attrs = computed(() => ({
      weight: "3",
      is: "h1",
      ...useAttrs()
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Typography), mergeProps(attrs.value, { class: "large-title" }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16);
    };
  }
});

const LargeTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__scopeId", "data-v-19db2579"]]);

const _sfc_main$1w = /* @__PURE__ */ defineComponent({
  __name: "Subheadline",
  props: {
    level: { default: "1" }
  },
  setup(__props) {
    const props = __props;
    const attrs = computed(() => ({
      ...props,
      weight: "3",
      is: "h6",
      ...useAttrs()
    }));
    const classes = computed(() => ({
      subheadline: true,
      [`subheadline--${props.level}`]: true
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Typography), mergeProps(attrs.value, { class: classes.value }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16, ["class"]);
    };
  }
});

const Subheadline = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-603faecd"]]);

const _sfc_main$1v = /* @__PURE__ */ defineComponent({
  __name: "Text",
  setup(__props) {
    const attrs = computed(() => ({
      weight: "3",
      is: "span",
      ...useAttrs()
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Typography), mergeProps(attrs.value, { class: "text" }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16);
    };
  }
});

const Text = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["__scopeId", "data-v-a18c1162"]]);

const _sfc_main$1u = /* @__PURE__ */ defineComponent({
  __name: "Title",
  props: {
    level: { default: "2" }
  },
  setup(__props) {
    const props = __props;
    const levelTags = {
      "1": "h2",
      "2": "h3",
      "3": "h4"
    };
    const attrs = computed(() => ({
      ...props,
      weight: "3",
      is: levelTags[props.level],
      ...useAttrs()
    }));
    const classes = computed(() => ({
      title: true,
      [`title--${props.level}`]: true
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Typography), mergeProps(attrs.value, { class: classes.value }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16, ["class"]);
    };
  }
});

const Title = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["__scopeId", "data-v-4b71f97c"]]);

const _sfc_main$1t = /* @__PURE__ */ defineComponent({
  __name: "Typography",
  props: {
    weight: { default: "3" },
    caps: { type: Boolean },
    is: { default: "span" },
    plain: { type: Boolean }
  },
  setup(__props) {
    const props = __props;
    const classes = computed(() => ({
      typography: true,
      [`typography--weight-${props.weight}`]: true,
      ["typography--plain"]: props.plain,
      ["typography--caps"]: props.caps
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(props.is), mergeProps(props, { class: classes.value }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16, ["class"]);
    };
  }
});

const Typography = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-78d7edfe"]]);

const _sfc_main$1s = /* @__PURE__ */ defineComponent({
  __name: "AvatarAcronym",
  props: {
    size: { default: 40 }
  },
  setup(__props) {
    const props = __props;
    const attrs = useAttrs();
    return (_ctx, _cache) => {
      return !props.size ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [], 64)) : props.size <= 28 ? (openBlock(), createBlock(unref(Caption), mergeProps({ key: 1 }, unref(attrs), {
        level: props.size <= 24 ? "2" : "1",
        weight: "1",
        caps: ""
      }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 16, ["level"])) : props.size === 40 ? (openBlock(), createBlock(unref(Headline), mergeProps({ key: 2 }, unref(attrs), {
        weight: "2",
        caps: ""
      }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 16)) : props.size === 48 ? (openBlock(), createBlock(unref(Title), mergeProps({ key: 3 }, unref(attrs), {
        weight: "1",
        level: "3",
        caps: ""
      }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 16)) : (openBlock(), createBlock(unref(LargeTitle), mergeProps({ key: 4 }, unref(attrs), {
        weight: "1",
        caps: ""
      }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 16));
    };
  }
});

const _sfc_main$1r = /* @__PURE__ */ defineComponent({
  __name: "Avatar",
  props: {
    acronym: {}
  },
  setup(__props) {
    const props = __props;
    const attrs = useAttrs();
    const classes = computed(() => ({
      avatar: true,
      ["avatar--with-acronym"]: props.acronym
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Image), mergeProps({
        style: { "border-radius": "50%" },
        class: classes.value
      }, unref(attrs)), {
        "fallback-icon": withCtx(() => [
          props.acronym ? (openBlock(), createBlock(_sfc_main$1s, {
            key: 0,
            size: props.size
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(props.acronym), 1)
            ]),
            _: 1
          }, 8, ["size"])) : renderSlot(_ctx.$slots, "fallback-icon", { key: 1 }, void 0, true)
        ]),
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16, ["class"]);
    };
  }
});

const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__scopeId", "data-v-ebce2684"]]);

const _sfc_main$1q = /* @__PURE__ */ defineComponent({
  __name: "AvatarBadge",
  setup(__props) {
    const attrs = useAttrs();
    onBeforeMount(() => {
      if (attrs.type !== "number") {
        console.error('[AvatarBadge]: Component supports only type="number"');
      }
    });
    return (_ctx, _cache) => {
      return unref(attrs).type === "number" ? (openBlock(), createBlock(unref(Badge), mergeProps({ key: 0 }, unref(attrs), {
        type: "number",
        class: "avatar-badge"
      }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16)) : createCommentVNode("", true);
    };
  }
});

const AvatarBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["__scopeId", "data-v-3c0a317b"]]);

const _hoisted_1$12 = { class: "avatar-stack" };
const _sfc_main$1p = /* @__PURE__ */ defineComponent({
  __name: "AvatarStack",
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$12, [
        renderSlot(_ctx.$slots, "default", {}, void 0, true)
      ]);
    };
  }
});

const AvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-522e809a"]]);

const hasSlotContent = (slot) => slot?.()?.length ?? 0 > 0;
const isComponentPassedToSlot = (slot) => {
  const vnode = slot?.()?.at(0);
  return vnode && ["object", "function"].includes(typeof vnode.type);
};

const _sfc_main$1o = /* @__PURE__ */ defineComponent({
  __name: "Badge",
  props: {
    type: {},
    mode: { default: "primary" },
    large: { type: Boolean, default: false }
  },
  setup(__props) {
    const props = __props;
    const slots = useSlots();
    const isNumber = computed(() => props.type === "number");
    const classes = computed(() => ({
      badge: true,
      [`badge--${props.type}`]: true,
      [`badge--${props.mode}`]: true,
      ["badge--large"]: isNumber.value && props.large
    }));
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", {
        class: normalizeClass(classes.value)
      }, [
        unref(hasSlotContent)(slots.default) && isNumber.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
          props.large ? (openBlock(), createBlock(unref(Subheadline), {
            key: 0,
            is: "span",
            level: "2",
            weight: "2"
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ]),
            _: 3
          })) : createCommentVNode("", true),
          !props.large ? (openBlock(), createBlock(unref(Caption), {
            key: 1,
            weight: "2"
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ]),
            _: 3
          })) : createCommentVNode("", true)
        ], 64)) : createCommentVNode("", true)
      ], 2);
    };
  }
});

const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-3bcdcbaf"]]);

const _hoisted_1$11 = {
  xmlns: "http://www.w3.org/2000/svg",
  width: "12",
  height: "12",
  fill: "none"
};

function render$o(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$11, _cache[0] || (_cache[0] = [
    createElementVNode("path", {
      fill: "currentColor",
      d: "M3.07 7.7c.14-.36-.14-.74-.5-.93A2 2 0 1 1 5.5 5c0 1.55-.27 2.67-.57 3.43a5.3 5.3 0 0 1-.67 1.22 1 1 0 0 1-1.53-1.3h.01l.07-.1c.06-.1.16-.28.26-.54Zm5 0c.14-.36-.14-.74-.5-.93A2 2 0 1 1 10.5 5c0 1.55-.27 2.67-.57 3.43a5.3 5.3 0 0 1-.67 1.22 1 1 0 0 1-1.53-1.3h.01l.07-.1c.06-.1.16-.28.26-.54Zm1.19 1.95"
    }, null, -1)
  ])))
}
const Quote12Icon = { render: render$o };

const _hoisted_1$10 = { class: "blockquote" };
const _sfc_main$1n = /* @__PURE__ */ defineComponent({
  __name: "Blockquote",
  props: {
    type: { default: "text" }
  },
  setup(__props) {
    const props = __props;
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$10, [
        props.type === "text" ? (openBlock(), createBlock(unref(Subheadline), {
          key: 0,
          class: "text"
        }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ]),
          _: 3
        })) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true),
        createVNode(unref(IconContainer), { class: "top-right-icon" }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "top-right-icon", {}, () => [
              createVNode(unref(Quote12Icon))
            ], true)
          ]),
          _: 3
        })
      ]);
    };
  }
});

const Blockquote = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__scopeId", "data-v-0dd999ce"]]);

const _sfc_main$1m = {  };

const _hoisted_1$$ = { class: "icon-container" };

function _sfc_render$6(_ctx, _cache) {
  return (openBlock(), createElementBlock("div", _hoisted_1$$, [
    renderSlot(_ctx.$slots, "default", {}, undefined, true)
  ]))
}
const IconContainer = /*#__PURE__*/_export_sfc(_sfc_main$1m, [['render',_sfc_render$6],['__scopeId',"data-v-ba3fedea"]]);

const _hoisted_1$_ = ["alt", "crossOrigin", "decoding", "loading", "referrerPolicy", "sizes", "src", "srcSet", "useMap"];
const _hoisted_2$e = {
  key: 1,
  class: "fallback"
};
const _sfc_main$1l = /* @__PURE__ */ defineComponent({
  __name: "Image",
  props: {
    size: { default: 40 }
  },
  emits: ["load", "error"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const slots = useSlots();
    const loaded = ref(false);
    const failed = ref(false);
    const attrs = useAttrs();
    const styles = computed(() => ({
      width: `${props.size}px`,
      minWidth: `${props.size}px`,
      height: `${props.size}px`,
      borderRadius: `${getBorderRadius(props.size)}px`
    }));
    const classes = computed(() => ({
      wrapper: true,
      ["wrapper--loaded"]: loaded.value
    }));
    const hasSrc = computed(() => attrs.src || attrs.srcset);
    const shouldShowFallbackIcon = computed(
      () => (failed.value || !hasSrc.value) && slots["fallback-icon"]?.()?.length > 0
    );
    function onImageLoad(event) {
      if (loaded.value) {
        return;
      }
      loaded.value = true;
      failed.value = false;
      emit("load", event);
    }
    function onImageError(event) {
      loaded.value = false;
      failed.value = true;
      emit("error", event);
    }
    function getBorderRadius(size) {
      if (size < 40) {
        return 4;
      }
      if (size < 96) {
        return 8;
      }
      return 12;
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", mergeProps({
        style: styles.value,
        class: classes.value
      }, unref(attrs)), [
        hasSrc.value ? (openBlock(), createElementBlock("img", {
          key: 0,
          class: "image",
          alt: unref(attrs).alt,
          crossOrigin: unref(attrs).crossorigin,
          decoding: unref(attrs).decoding,
          loading: unref(attrs).loading,
          referrerPolicy: unref(attrs).referrerpolicy,
          sizes: unref(attrs).sizes,
          src: unref(attrs).src,
          srcSet: unref(attrs).srcset,
          useMap: unref(attrs).usemap,
          onLoad: onImageLoad,
          onError: onImageError
        }, null, 40, _hoisted_1$_)) : createCommentVNode("", true),
        shouldShowFallbackIcon.value ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
          renderSlot(_ctx.$slots, "fallback-icon", {}, void 0, true)
        ])) : createCommentVNode("", true),
        renderSlot(_ctx.$slots, "default", {}, void 0, true)
      ], 16);
    };
  }
});

const Image = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-99349445"]]);

const _sfc_main$1k = /* @__PURE__ */ defineComponent({
  __name: "ImageBadge",
  setup(__props) {
    const attrs = useAttrs();
    onBeforeMount(() => {
      if (attrs.type !== "number") {
        console.error('[ImageBadge]: Component supports only type="number"');
      }
    });
    return (_ctx, _cache) => {
      return unref(attrs).type === "number" ? (openBlock(), createBlock(unref(Badge), mergeProps({ key: 0 }, unref(attrs), {
        type: "number",
        class: "image-badge"
      }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 16)) : createCommentVNode("", true);
    };
  }
});

const ImageBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-cdd040b4"]]);

const appRootInjectionKey = Symbol();
const useAppRootInjection = () => {
  const injection = inject(appRootInjectionKey);
  if (!injection?.value?.isRendered) {
    throw new Error("[TGUI] Wrap your app with <AppRoot> component");
  }
  return injection;
};

const canUseDOM = (() => !!(typeof window !== "undefined" && window.document && window.document.createElement))();

const getTelegramData = () => {
  if (!canUseDOM) {
    return void 0;
  }
  return window.Telegram?.WebApp;
};

const getInitialPlatform = () => {
  const telegramData = getTelegramData();
  if (!telegramData) {
    return "base";
  }
  if (["ios", "macos"].includes(telegramData.platform)) {
    return "ios";
  }
  return "base";
};
const usePlatform$1 = (platform) => {
  if (platform !== void 0) {
    return platform;
  }
  return getInitialPlatform();
};

const getInitialAppearance = () => {
  if (canUseDOM && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
    return "dark";
  }
  return "light";
};
const getBrowserAppearanceSubscriber = (setAppearance) => {
  if (!canUseDOM || !window.matchMedia) {
    return () => {
    };
  }
  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
  const listener = () => {
    setAppearance(mediaQuery.matches ? "dark" : "light");
  };
  mediaQuery.addEventListener("change", listener);
  return () => mediaQuery.removeEventListener("change", listener);
};
const useAppearance = (appearanceProp) => {
  const appearance = ref(appearanceProp || getInitialAppearance());
  const handleThemeChange = () => {
    const telegramData = getTelegramData();
    if (!telegramData) {
      return;
    }
    appearance.value = telegramData.colorScheme;
  };
  watch(
    () => appearanceProp,
    () => {
      if (appearanceProp !== void 0) {
        appearance.value = appearanceProp;
        return () => {
        };
      }
      const telegramData = getTelegramData();
      if (telegramData) {
        telegramData.onEvent("themeChanged", handleThemeChange);
        return () => telegramData.offEvent("themeChanged", handleThemeChange);
      }
      return getBrowserAppearanceSubscriber(
        (value) => appearance.value = value
      );
    }
  );
  return appearance;
};

const _sfc_main$1j = /* @__PURE__ */ defineComponent({
  __name: "AppRoot",
  props: {
    platform: {},
    appearance: {},
    teleportContainer: {}
  },
  setup(__props) {
    const props = __props;
    const platform = usePlatform$1(props.platform);
    const appearance = useAppearance(props.appearance);
    const appRootRef = useTemplateRef("appRoot");
    const appRootInjection = computed(
      () => ({
        platform,
        isRendered: true,
        appearance: appearance.value,
        teleportContainer: props.teleportContainer ?? appRootRef.value
      })
    );
    provide(appRootInjectionKey, appRootInjection);
    const classes = computed(() => [
      "app-root",
      `app-root--${appRootInjection.value.platform}`,
      `app-root--${appRootInjection.value.appearance}`
    ]);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref: "appRoot",
        class: normalizeClass(classes.value)
      }, [
        renderSlot(_ctx.$slots, "default")
      ], 2);
    };
  }
});

const usePlatform = () => {
  const injection = useAppRootInjection();
  return injection.value.platform || "base";
};

const _sfc_main$1i = /* @__PURE__ */ defineComponent({
  __name: "List",
  props: {
    is: { default: "div" }
  },
  setup(__props) {
    const props = __props;
    const platform = usePlatform();
    const classes = computed(() => ({
      list: true,
      "list--ios": platform === "ios"
    }));
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(props.is), {
        class: normalizeClass(classes.value)
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 8, ["class"]);
    };
  }
});

const List = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-561c9022"]]);

const _hoisted_1$Z = { class: "placeholder" };
const _hoisted_2$d = {
  key: 1,
  class: "fields"
};
const _sfc_main$1h = /* @__PURE__ */ defineComponent({
  __name: "Placeholder",
  setup(__props) {
    const slots = useSlots();
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("section", _hoisted_1$Z, [
        unref(hasSlotContent)(slots.default) ? renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : createCommentVNode("", true),
        unref(hasSlotContent)(slots.header) || unref(hasSlotContent)(slots.description) ? (openBlock(), createElementBlock("dl", _hoisted_2$d, [
          unref(hasSlotContent)(slots.header) ? (openBlock(), createBlock(unref(Title), {
            key: 0,
            is: "dt",
            level: "3",
            weight: "2"
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "header", {}, void 0, true)
            ]),
            _: 3
          })) : createCommentVNode("", true),
          unref(hasSlotContent)(slots.description) ? (openBlock(), createBlock(unref(Text), {
            key: 1,
            is: "dd",
            class: "description"
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "description", {}, void 0, true)
            ]),
            _: 3
          })) : createCommentVNode("", true)
        ])) : createCommentVNode("", true),
        unref(hasSlotContent)(slots.action) ? renderSlot(_ctx.$slots, "action", { key: 2 }, void 0, true) : createCommentVNode("", true)
      ]);
    };
  }
});

const Placeholder = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["__scopeId", "data-v-01460ff7"]]);

const _sfc_main$1g = /* @__PURE__ */ defineComponent({
  __name: "SectionHeader",
  props: {
    large: { type: Boolean }
  },
  setup(__props) {
    const props = __props;
    const platform = usePlatform();
    const classes = computed(() => ({
      "section-header": true,
      "section-header--ios": platform === "ios",
      "section-header--large": props.large
    }));
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("header", mergeProps({ class: classes.value }, props), [
        props.large ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
          unref(platform) === "ios" ? (openBlock(), createBlock(unref(Subheadline), {
            key: 0,
            is: "h1",
            level: "1",
            weight: "2",
            class: "title"
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ]),
            _: 3
          })) : (openBlock(), createBlock(unref(Text), {
            key: 1,
            is: "h1",
            weight: "2",
            class: "title"
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ]),
            _: 3
          }))
        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
          unref(platform) === "ios" ? (openBlock(), createBlock(unref(Caption), {
            key: 0,
            is: "h1",
            caps: "",
            class: "title"
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ]),
            _: 3
          })) : (openBlock(), createBlock(unref(Subheadline), {
            key: 1,
            is: "h1",
            level: "2",
            weight: "2",
            class: "title"
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ]),
            _: 3
          }))
        ], 64))
      ], 16);
    };
  }
});

const SectionHeader = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["__scopeId", "data-v-47003f55"]]);

const _sfc_main$1f = /* @__PURE__ */ defineComponent({
  __name: "SectionFooter",
  props: {
    centered: { type: Boolean }
  },
  setup(__props) {
    const props = __props;
    const platform = usePlatform();
    const classes = computed(() => ({
      "section-footer": true,
      "section-footer--ios": platform === "ios",
      "section-footer--centered": props.centered
    }));
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("footer", {
        class: normalizeClass(classes.value)
      }, [
        unref(platform) === "ios" ? (openBlock(), createBlock(unref(Caption), {
          key: 0,
          class: "text"
        }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ]),
          _: 3
        })) : (openBlock(), createBlock(unref(Subheadline), {
          key: 1,
          level: "2",
          class: "text"
        }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ]),
          _: 3
        }))
      ], 2);
    };
  }
});

const SectionFooter = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["__scopeId", "data-v-a504c1e4"]]);

const _hoisted_1$Y = { class: "divider" };
const _sfc_main$1e = /* @__PURE__ */ defineComponent({
  __name: "Divider",
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("hr", _hoisted_1$Y);
    };
  }
});

const Divider = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-7cefa378"]]);

const _hoisted_1$X = { class: "body-with-header" };
const _hoisted_2$c = { class: "body" };
const _sfc_main$1d = /* @__PURE__ */ defineComponent({
  __name: "Section",
  setup(__props) {
    const slots = useSlots();
    const platform = usePlatform();
    const classes = computed(() => ({
      section: true,
      ["section--base"]: platform === "base",
      ["section--ios"]: platform === "ios"
    }));
    const defaultSlotContent = computed(() => slots.default?.() ?? []);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("section", {
        class: normalizeClass(classes.value)
      }, [
        createElementVNode("div", _hoisted_1$X, [
          unref(isComponentPassedToSlot)(slots.header) ? renderSlot(_ctx.$slots, "header", { key: 0 }, void 0, true) : unref(hasSlotContent)(slots.header) ? (openBlock(), createBlock(SectionHeader, { key: 1 }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "header", {}, void 0, true)
            ]),
            _: 3
          })) : createCommentVNode("", true),
          createElementVNode("div", _hoisted_2$c, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(defaultSlotContent.value, (vnode, index) => {
              return openBlock(), createElementBlock(Fragment, { key: index }, [
                (openBlock(), createBlock(resolveDynamicComponent(vnode))),
                index < defaultSlotContent.value.length - 1 ? (openBlock(), createBlock(unref(Divider), {
                  key: 0,
                  class: "divider"
                })) : createCommentVNode("", true)
              ], 64);
            }), 128))
          ])
        ]),
        unref(isComponentPassedToSlot)(slots.footer) ? renderSlot(_ctx.$slots, "footer", { key: 0 }, void 0, true) : unref(hasSlotContent)(slots.footer) ? (openBlock(), createBlock(SectionFooter, { key: 1 }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "footer", {}, void 0, true)
          ]),
          _: 3
        })) : createCommentVNode("", true)
      ], 2);
    };
  }
});

const Section = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-8fe875a2"]]);

const _hoisted_1$W = { class: "steps" };
const _sfc_main$1c = /* @__PURE__ */ defineComponent({
  __name: "Steps",
  props: {
    count: {},
    progress: {}
  },
  setup(__props) {
    const props = __props;
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$W, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(Array.from({ length: props.count }), (_, index) => {
          return openBlock(), createElementBlock("div", {
            key: index,
            class: normalizeClass({
              step: true,
              ["step--active"]: index < props.progress
            })
          }, null, 2);
        }), 128))
      ]);
    };
  }
});

const Steps = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__scopeId", "data-v-719f01ff"]]);

const _sfc_main$1b = /* @__PURE__ */ defineComponent({
  __name: "HorizontalScroll",
  props: {
    is: { default: "div" }
  },
  setup(__props) {
    const props = __props;
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(props.is), { class: "horizontal-scroll" }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      });
    };
  }
});

const HorizontalScroll = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-221e84fd"]]);

const _sfc_main$1a = /* @__PURE__ */ defineComponent({
  __name: "VisuallyHidden",
  props: {
    is: { default: "span" }
  },
  setup(__props) {
    const props = __props;
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(props.is), { class: "visually-hidden" }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      });
    };
  }
});

const VisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-668d3f25"]]);

const _sfc_main$19 = /* @__PURE__ */ defineComponent({
  __name: "RootRenderer",
  setup(__props) {
    const appRootInjection = useAppRootInjection();
    return (_ctx, _cache) => {
      return unref(appRootInjection).teleportContainer ? (openBlock(), createBlock(Teleport, {
        key: 0,
        to: unref(appRootInjection).teleportContainer
      }, [
        renderSlot(_ctx.$slots, "default")
      ], 8, ["to"])) : renderSlot(_ctx.$slots, "default", { key: 1 });
    };
  }
});

function useTimeout(cb, duration) {
  let timeout = null;
  function set() {
    clear();
    timeout = setTimeout(cb, toValue(duration));
  }
  function clear() {
    if (timeout) {
      clearTimeout(timeout);
    }
  }
  return { set, clear };
}

const RIPPLE_DELAY = 70;
const WAVE_LIVE = 225;
function useRipple() {
  const clicks = ref([]);
  const pointerDelayTimers = /* @__PURE__ */ new Map();
  const clearClicks = useTimeout(() => clicks.value = [], WAVE_LIVE);
  function addClick(x, y, pointerId) {
    const dateNow = Date.now();
    const filteredClicks = clicks.value.filter(
      (click) => click.date + WAVE_LIVE > dateNow
    );
    clicks.value = [
      ...filteredClicks,
      {
        x,
        y,
        date: dateNow,
        pointerId
      }
    ];
    clearClicks.set();
    pointerDelayTimers.delete(pointerId);
  }
  const onPointerDown = (e) => {
    const currentTarget = e.currentTarget;
    const { top, left } = currentTarget.getBoundingClientRect();
    const x = e.clientX - (left ?? 0);
    const y = e.clientY - (top ?? 0);
    pointerDelayTimers.set(
      e.pointerId,
      setTimeout(() => addClick(x, y, e.pointerId), RIPPLE_DELAY)
    );
  };
  const onPointerCancel = (e) => {
    const timer = pointerDelayTimers.get(e.pointerId);
    clearTimeout(timer);
    pointerDelayTimers.delete(e.pointerId);
  };
  return {
    clicks,
    onPointerDown,
    onPointerCancel
  };
}

const _hoisted_1$V = {
  "aria-hidden": "",
  class: "ripple"
};
const _sfc_main$18 = /* @__PURE__ */ defineComponent({
  __name: "Ripple",
  props: {
    clicks: {}
  },
  setup(__props) {
    const props = __props;
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", _hoisted_1$V, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(props.clicks, (wave) => {
          return openBlock(), createElementBlock("span", {
            key: wave.date,
            class: "wave",
            style: normalizeStyle({
              top: `${wave.y}px`,
              left: `${wave.x}px`
            })
          }, null, 4);
        }), 128))
      ]);
    };
  }
});

const Ripple = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-42fd89cd"]]);

const _sfc_main$17 = /* @__PURE__ */ defineComponent({
  __name: "Tappable",
  props: {
    is: { default: "div" },
    interactiveAnimation: { default: "background" }
  },
  setup(__props) {
    const props = __props;
    const platform = usePlatform();
    const { clicks, onPointerCancel, onPointerDown } = useRipple();
    const attrs = useAttrs();
    const classes = computed(() => ({
      tappable: true,
      ["tappable--ios"]: platform === "ios",
      ["tappable--opacity"]: props.interactiveAnimation === "opacity"
    }));
    const hasRippleEffect = computed(
      () => platform === "base" && props.interactiveAnimation === "background" && !attrs.readonly
    );
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(props.is), {
        class: normalizeClass(classes.value),
        readonly: unref(attrs).readonly,
        onPointercancel: unref(onPointerCancel),
        onPointerdown: unref(onPointerDown)
      }, {
        default: withCtx(() => [
          hasRippleEffect.value ? (openBlock(), createBlock(Ripple, {
            key: 0,
            clicks: unref(clicks)
          }, null, 8, ["clicks"])) : createCommentVNode("", true),
          renderSlot(_ctx.$slots, "default", {}, void 0, true)
        ]),
        _: 3
      }, 40, ["class", "readonly", "onPointercancel", "onPointerdown"]);
    };
  }
});

const Tappable = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-1acdf244"]]);

const _sfc_main$16 = /* @__PURE__ */ defineComponent({
  __name: "Timeline",
  props: {
    horizontal: { type: Boolean },
    active: {}
  },
  setup(__props) {
    const props = __props;
    const slots = useSlots();
    const classes = computed(() => ({
      timeline: true,
      ["timeline--horizontal"]: props.horizontal
    }));
    const defaultSlotContent = computed(() => slots.default?.() ?? []);
    function getChildMode(childNumber) {
      if (!props.active) {
        return void 0;
      }
      if (childNumber <= props.active) {
        return "active";
      }
      if (childNumber === props.active + 1) {
        return "pre-active";
      }
      return void 0;
    }
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(props.horizontal ? unref(HorizontalScroll) : "ul"), {
        class: normalizeClass(classes.value)
      }, {
        default: withCtx(() => [
          (openBlock(true), createElementBlock(Fragment, null, renderList(defaultSlotContent.value, (vnode, index) => {
            return openBlock(), createElementBlock(Fragment, { key: index }, [
              isVNode(vnode) ? (openBlock(), createBlock(resolveDynamicComponent(vnode), {
                key: 0,
                mode: getChildMode(index + 1),
                horizontal: props.horizontal
              }, null, 8, ["mode", "horizontal"])) : (openBlock(), createBlock(resolveDynamicComponent(vnode), { key: 1 }))
            ], 64);
          }), 128))
        ]),
        _: 1
      }, 8, ["class"]);
    };
  }
});

const Timeline = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-c1ef55e5"]]);

const _hoisted_1$U = { class: "fields" };
const _sfc_main$15 = /* @__PURE__ */ defineComponent({
  __name: "TimelineItem",
  props: {
    mode: {},
    horizontal: { type: Boolean },
    header: {}
  },
  setup(__props) {
    const props = __props;
    const platform = usePlatform();
    const classes = computed(() => ({
      ["timeline-item"]: true,
      [`timeline-item--${props.mode}`]: !!props.mode,
      ["timeline-item--ios"]: platform === "ios",
      ["timeline-item--horizontal"]: props.horizontal
    }));
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("li", {
        class: normalizeClass(classes.value)
      }, [
        _cache[0] || (_cache[0] = createElementVNode("div", { class: "side" }, [
          createElementVNode("div", { class: "line" }),
          createElementVNode("div", { class: "dot" })
        ], -1)),
        createElementVNode("div", _hoisted_1$U, [
          createVNode(unref(Text), {
            class: "title",
            weight: "2"
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(props.header), 1)
            ]),
            _: 1
          }),
          createVNode(unref(Subheadline), {
            class: "description",
            level: unref(platform) === "ios" ? "1" : "2"
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default", {}, void 0, true)
            ]),
            _: 3
          }, 8, ["level"])
        ])
      ], 2);
    };
  }
});

const TimelineItem = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-21a23104"]]);

const clamp = (value, min, max) => Math.max(min, Math.min(value, max));

const _hoisted_1$T = ["aria-valuenow", "title"];
const PROGRESS_MIN_VALUE = 0;
const PROGRESS_MAX_VALUE = 100;
const _sfc_main$14 = /* @__PURE__ */ defineComponent({
  __name: "Progress",
  props: {
    value: { default: 0 }
  },
  setup(__props) {
    const props = __props;
    const platform = usePlatform();
    const progress = computed(
      () => clamp(props.value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE)
    );
    const title = computed(
      () => `${progress.value} / ${PROGRESS_MAX_VALUE}`
    );
    const classes = computed(() => ["progress", `progress--${platform}`]);
    const progressLineStyle = computed(() => ({
      width: progress.value + "%"
    }));
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        role: "progressbar",
        "aria-valuenow": progress.value,
        "aria-valuemin": PROGRESS_MIN_VALUE,
        "aria-valuemax": PROGRESS_MAX_VALUE,
        class: normalizeClass(classes.value),
        title: title.value
      }, [
        createElementVNode("div", {
          "aria-hidden": "",
          style: normalizeStyle(progressLineStyle.value),
          class: "progress__line"
        }, null, 4)
      ], 10, _hoisted_1$T);
    };
  }
});

const Progress = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-606f70db"]]);

const _hoisted_1$S = ["width", "height"];
const _hoisted_2$b = ["cx", "cy", "r", "stroke-width"];
const _hoisted_3$7 = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
const _sfc_main$13 = /* @__PURE__ */ defineComponent({
  __name: "CircularProgress",
  props: {
    size: { default: "medium" },
    progress: { default: 0 }
  },
  setup(__props) {
    const props = __props;
    const circleAttributes = computed(() => getCircleAttributes(props.size));
    const circumference = computed(
      () => 2 * Math.PI * circleAttributes.value.radius
    );
    const circleSize = computed(() => circleAttributes.value.size / 2);
    function getCircleAttributes(size) {
      switch (size) {
        case "large":
          return {
            size: 56,
            "stroke-width": 4,
            radius: 18
          };
        case "medium":
          return {
            size: 36,
            "stroke-width": 3,
            radius: 14
          };
        case "small":
          return {
            size: 28,
            "stroke-width": 3,
            radius: 10
          };
        default:
          return {
            size: 36,
            "stroke-width": 3,
            radius: 14
          };
      }
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("svg", {
        class: "circular-progress",
        width: circleAttributes.value.size,
        height: circleAttributes.value.size,
        fill: "none",
        xmlns: "http://www.w3.org/2000/svg"
      }, [
        createElementVNode("circle", {
          cx: circleSize.value,
          cy: circleSize.value,
          r: circleAttributes.value.radius,
          "stroke-opacity": ".1",
          "stroke-width": circleAttributes.value["stroke-width"],
          fill: "none"
        }, null, 8, _hoisted_2$b),
        createElementVNode("circle", {
          fill: "none",
          cx: circleSize.value,
          cy: circleSize.value,
          r: circleAttributes.value.radius,
          "stroke-width": circleAttributes.value["stroke-width"],
          "stroke-linecap": "round",
          "stroke-dasharray": circumference.value,
          "stroke-dashoffset": circumference.value * ((100 - _ctx.progress) / 100)
        }, null, 8, _hoisted_3$7)
      ], 8, _hoisted_1$S);
    };
  }
});

const CircularProgress = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-148df100"]]);

const _sfc_main$12 = /* @__PURE__ */ defineComponent({
  __name: "Skeleton",
  props: {
    withoutAnimation: { type: Boolean },
    visible: { type: Boolean }
  },
  setup(__props) {
    const props = __props;
    const classes = computed(() => ({
      skeleton: true,
      ["skeleton--visible"]: props.visible,
      ["skeleton--no-animation"]: props.withoutAnimation
    }));
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(classes.value)
      }, [
        renderSlot(_ctx.$slots, "default", {}, void 0, true)
      ], 2);
    };
  }
});

const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-e8d7f0ec"]]);

const _sfc_main$11 = /* @__PURE__ */ defineComponent({
  __name: "Spoiler",
  props: {
    visible: { type: Boolean, default: false }
  },
  setup(__props) {
    const props = __props;
    const isVisible = ref(props.visible);
    watch(
      () => props.visible,
      (value) => {
        isVisible.value = value;
      }
    );
    const classes = computed(() => ({
      spoiler: true,
      ["spoiler--visible"]: isVisible.value
    }));
    function toggle() {
      isVisible.value = !isVisible.value;
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(classes.value),
        onClick: toggle,
        onKeydown: toggle
      }, [
        renderSlot(_ctx.$slots, "default", {}, void 0, true)
      ], 34);
    };
  }
});

const Spoiler = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-a5a203d9"]]);

const _sfc_main$10 = {  };

const _hoisted_1$R = {
  width: "24",
  height: "24",
  viewBox: "0 0 24 24",
  xmlns: "http://www.w3.org/2000/svg"
};

function _sfc_render$5(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$R, _cache[0] || (_cache[0] = [
    createStaticVNode("<defs><clipPath id=\"a\"><path d=\"M0 0h24v24H0z\" fill=\"#fff\"></path></clipPath></defs><g clip-path=\"url(#a)\"><path d=\"M4.933 19.073a1 1 0 0 1 0-1.414l3.536-3.535a1 1 0 1 1 1.414 1.414l-3.535 3.535a1 1 0 0 1-1.415 0\" fill=\"currentColor\" opacity=\".837\"></path><path d=\"M12 15a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1\" fill=\"currentColor\" opacity=\".467\"></path><path d=\"M14.117 14.124a1 1 0 0 1 1.415 0l3.535 3.535a1 1 0 1 1-1.414 1.414l-3.536-3.535a1 1 0 0 1 0-1.414\" fill=\"currentColor\" opacity=\".153\"></path><path d=\"M15 12a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1\" fill=\"currentColor\" opacity=\".049\"></path><g transform=\"translate(13.41 4.22)\"></g><g transform=\"translate(11 2)\"></g><g transform=\"rotate(-45.001 8.918 -2.274)\"></g><path d=\"M2 12a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1\" fill=\"currentColor\"></path></g><animate attributeName=\"opacity\" values=\"0.837;0;1;0.8366;0;0\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.75;0.87;1;1;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1\" fill=\"freeze\"></animate><animate attributeName=\"opacity\" values=\"0.467;0;1;0.4669;0;0\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.63;0.75;1;1;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1\" fill=\"freeze\"></animate><animate attributeName=\"opacity\" values=\"0.153;0.05;1;0.1534;0;0\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.5;0.63;1;1;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1\" fill=\"freeze\"></animate><animate attributeName=\"opacity\" values=\"0.049;0;1;0.0493;0;0\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.37;0.5;1;1;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1\" fill=\"freeze\"></animate><animate attributeName=\"opacity\" values=\"0;0;1;0\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.25;0.37;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1\" fill=\"freeze\"></animate><animate attributeName=\"opacity\" values=\"0;0;1;0\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.13;0.25;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1\" fill=\"freeze\"></animate><animate attributeName=\"opacity\" values=\"0;1;0;0\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.13;0.89;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1\" fill=\"freeze\"></animate><animate attributeName=\"opacity\" values=\"1;0;1\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.89;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1\" fill=\"freeze\"></animate>", 10)
  ])))
}
const SmallIcon$1 = /*#__PURE__*/_export_sfc(_sfc_main$10, [['render',_sfc_render$5]]);

const _sfc_main$$ = {  };

const _hoisted_1$Q = {
  xmlns: "http://www.w3.org/2000/svg",
  width: "32",
  height: "32",
  viewBox: "0 0 32 32"
};

function _sfc_render$4(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$Q, _cache[0] || (_cache[0] = [
    createStaticVNode("<defs><clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" fill=\"#fff\"></path></clipPath></defs><g clip-path=\"url(#a)\" fill=\"currentColor\"><path d=\"M5.682 26.252a1.5 1.5 0 0 1 0-2.121l5.078-5.079a1.5 1.5 0 0 1 2.122 2.122l-5.079 5.078a1.5 1.5 0 0 1-2.121 0\" opacity=\".837\"></path><path d=\"M16.045 21.09a1.5 1.5 0 0 1 1.5 1.5v6.455a1.5 1.5 0 0 1-3 0V22.59a1.5 1.5 0 0 1 1.5-1.5\" opacity=\".467\"></path></g><animate attributeName=\"opacity\" values=\"0.837;0;1;0.8366;0;0\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.75;0.87;1;1;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1\" additive=\"replace\" fill=\"freeze\"></animate><animate attributeName=\"opacity\" values=\"0.467;0;1;0.4669;0;0\" dur=\"0.8s\" repeatCount=\"indefinite\" calcMode=\"spline\" keyTimes=\"0;0.63;0.75;1;1;1\" keySplines=\"0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1;0.5 0.35 0.15 1\" additive=\"replace\" fill=\"freeze\"></animate>", 4)
  ])))
}
const MediumIcon$1 = /*#__PURE__*/_export_sfc(_sfc_main$$, [['render',_sfc_render$4]]);

const _sfc_main$_ = {  };

const _hoisted_1$P = {
  width: "44",
  height: "44",
  viewBox: "0 0 44 44",
  xmlns: "http://www.w3.org/2000/svg"
};

function _sfc_render$3(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$P, _cache[0] || (_cache[0] = [
    createStaticVNode("<defs><clipPath id=\"a\"><path d=\"M0 0h44v44H0z\"></path></clipPath></defs><g clip-path=\"url(#a)\"><path d=\"M7.857 36.142a2.006 2.006 0 0 1 0-2.828l7.071-7.071c.778-.778 2.05-.778 2.829 0s.778 2.05 0 2.828l-7.072 7.071a2.006 2.006 0 0 1-2.828 0\" fill=\"currentColor\" opacity=\".837\"></path><path d=\"M22 29c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2s-2-.9-2-2v-9c0-1.1.9-2 2-2\" fill=\"currentColor\" opacity=\".467\"></path><path d=\"M26.244 26.244a2.006 2.006 0 0 1 2.828 0l7.071 7.07c.778.778.778 2.051 0 2.83s-2.05.777-2.828 0l-7.071-7.072a2.006 2.006 0 0 1 0-2.828\" fill=\"currentColor\" opacity=\".153\"></path><path d=\"M29 22c0-1.1.9-2 2-2h9c1.1 0 2 .9 2 2s-.9 2-2 2h-9c-1.1 0-2-.9-2-2\" fill=\"currentColor\" opacity=\".049\"></path><path d=\"M26.245 17.757a2.006 2.006 0 0 1 0-2.829l7.071-7.07c.778-.778 2.05-.778 2.828 0s.778 2.05 0 2.828l-7.07 7.07a2.006 2.006 0 0 1-2.83 0\" fill=\"currentColor\" opacity=\".01\"></path><g transform=\"translate(20 2)\"></g><g transform=\"rotate(-45.001 14.416 -3.146)\"></g><path d=\"M2 22c0-1.1.9-2 2-2h9c1.1 0 2 .9 2 2s-.9 2-2 2H4c-1.1 0-2-.9-2-2\" fill=\"currentColor\"></path></g><animate attributeName=\"opacity\" values=\"0.837;0;1;0.8366;0;0\" dur=\"0.