docus 1.0.6 → 3.0.0-beta.1

package/components/content/VideoPlayer.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+const props = defineProps({
+  poster: {
+    type: String,
+    default: '',
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+  sources: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const provider = ref(null)
+const loaded = ref(false)
+
+if (!props.src && !props.sources.length)
+  throw new Error('VideoPlayer: you need to provide either `src` or `sources` props')
+
+const src = props.src || props.sources[0].src
+
+if (src && src.includes('youtube.com/watch')) {
+  const match = src.match(/\?v=([^&]*)/)
+
+  provider.value = {
+    name: 'youtube',
+    src: `https://www.youtube-nocookie.com/embed/${match[1]}?autoplay=1`,
+    poster: props.poster || `https://i3.ytimg.com/vi/${match[1]}/hqdefault.jpg`,
+  }
+}
+</script>
+
+<template>
+  <div class="video-player relative my-4 bg-black bg-opacity-25 rounded-sm overflow-hidden" :class="{ loaded }">
+    <NuxtImg
+      v-if="provider ? provider.poster : poster"
+      class="video absolute top-0 left-0 w-full h-full object-cover"
+      :src="provider ? provider.poster : poster"
+      :width="670"
+      :height="377"
+    />
+    <div v-if="loaded" class="video absolute top-0 left-0 w-full h-full">
+      <!-- remote videos -->
+      <video v-if="!provider" :poster="poster" controls autoplay>
+        <source v-if="src" :src="src">
+        <source v-for="source in sources" :key="source.src || source" :src="source.src || source" :type="source.type">
+      </video>
+      <!-- youtube -->
+      <iframe
+        v-else-if="provider.name === 'youtube'"
+        width="560"
+        height="377"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen=""
+        class="w-full h-full"
+        :src="provider.src"
+      />
+    </div>
+    <div v-if="!loaded" class="overlay absolute top-0 left-0 w-full h-full cursor-pointer" @click="loaded = true">
+      <button class="play" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.video-player {
+  &:not(.loaded):before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    top: 0;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==');
+    background-position: top;
+    background-repeat: repeat-x;
+    height: 60px;
+    padding-bottom: 50px;
+    width: 100%;
+    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+    z-index: 1;
+  }
+  &:after {
+    content: ' ';
+    display: block;
+    padding-bottom: 56.25%;
+  }
+
+  .play {
+    width: 68px;
+    height: 48px;
+    position: absolute;
+    cursor: pointer;
+    transform: translate3d(-50%, -50%, 0);
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    background-color: transparent;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
+    filter: grayscale(100%);
+    transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
+    border: none;
+  }
+  &:hover .play {
+    filter: none;
+  }
+}
+
+video {
+  @apply w-full;
+}
+</style>

package/components/docs/DocsAside.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const { navigation } = useContent()
+
+const tree = computed(() => {
+  return navigation.value.filter(
+    (item) => {
+      if (item.slug === '/' || item.slug === '/templates')
+        return false
+      return true
+    },
+  )
+})
+</script>
+
+<template>
+  <nav>
+    <DocsAsideTree :tree="tree" />
+  </nav>
+</template>

package/components/docs/DocsAsideTree.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  tree: {
+    type: Array as PropType<any>,
+    default: () => [],
+  },
+  level: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: null,
+  },
+})
+const emit = defineEmits(['close', 'select'])
+
+const route = useRoute()
+const router = useRouter()
+
+const isChildOpen = reactive({})
+
+function isActive(link) {
+  return link.exact ? route.path === link.slug : route.path.startsWith(link.slug)
+}
+
+function onClick(link) {
+  if (link.children?.length) {
+    // Open dir when element is collapsible
+    openDir(link.slug)
+
+    // Select element for mobile nav
+    if (props.max !== null && props.level + 1 === props.max)
+      emit('select', link)
+  }
+  else {
+    router.push(link.slug)
+    emit('close')
+  }
+}
+
+function openDir(slug, force?) {
+  isChildOpen[slug] = force ? true : !isChildOpen[slug]
+}
+
+watch(
+  () => route.path,
+  () => {
+    const paths = route.path.split('/')
+    for (let i = paths.length - 1; i > 1; i--) {
+      paths.pop()
+      openDir(paths.join('/'), true)
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <ul :class="{ 'pl-4': level > 1 }">
+    <li
+      v-for="(link, index) in tree"
+      :key="link.slug"
+      :class="{
+        'border-l-2': level > 0,
+        'border-primary-600': isActive(link),
+        'border-primary-300 hover:border-primary-300': !isActive(link)
+      }"
+    >
+      <NuxtLink
+        class="block py-1.5 flex items-center justify-between focus:outline-none cursor-pointer font-semibold"
+        :exact="link.exact"
+        :class="{
+          'pl-4': level > 0,
+          'text-xl !text-primary': level === 0,
+          '!pt-0': level === 0 && index === 0,
+          'text-secondary-active': isActive(link),
+          'text-secondary text-secondary-hover': !isActive(link)
+        }"
+        @click.stop.prevent="onClick(link)"
+      >
+        <span>{{ link.title }}</span>
+
+        <Icon v-if="link.icon" :name="link.icon" class="w-5 h-5 u-text-gray-500" />
+      </NuxtLink>
+
+      <DocsAsideTree
+        v-if="link.children?.length && (max === null || ((level + 1) < max))"
+        v-show="isChildOpen[link.slug]"
+        :tree="link.children"
+        :level="level + 1"
+        :max="max"
+        class="py-2"
+        @select="link => $emit('select', link)"
+        @close="$emit('close')"
+      />
+    </li>
+  </ul>
+</template>

package/components/docs/DocsHero.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  buttons: {
+    type: Array as PropType<{ label?: string; variant?: string; to?: string; size?: string; icon?: string }[]>,
+    default: () => [],
+  },
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center pb-48 gap-y-8 pt-36 md:pt-44 lg:pb-56 lg:pt-36 ">
+    <div v-if="$slots.badge" class="flex gap-x-2">
+      <UBadge rounded label="Warning" />
+
+      <span class="u-text-gray-500">
+        <Markdown unwrap="p" :use="$slots.badge" />
+      </span>
+    </div>
+    <h1 v-if="$slots.title" class="font-bold text-7xl text-center mb-0 u-text-gray-900">
+      <Markdown unwrap="p" :use="$slots.title" />
+    </h1>
+    <p v-if="$slots.description" class="w-1/2 text-lg text-center u-text-gray-500">
+      <Markdown unwrap="p" :use="$slots.description" />
+    </p>
+    <div class="flex gap-x-8">
+      <UButton
+        v-for="button of buttons"
+        :key="button.label"
+        :size="button.size || 'xl'"
+        :variant="button.variant || 'transparent'"
+        :icon="button.icon || undefined"
+        :label="button.label || ''"
+        :to="button.to || '#'"
+      />
+    </div>
+  </div>
+</template>

package/components/docs/DocsPage.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="relative flex-1">
+    <slot name="header" />
+
+    <main class="relative pb-4 sm:pb-6 lg:py-8">
+      <Container padded>
+        <div class="grid grid-cols-10 gap-8 relative">
+          <aside
+            v-if="$slots.aside"
+            class="pb-8 overflow-x-hidden overflow-y-auto lg:pb-0 hidden lg:block lg:sticky lg:top-16 lg:pt-8 lg:-mt-8 lg:self-start col-span-2 lg:max-h-[calc(100vh-64px)]"
+          >
+            <slot name="aside" />
+          </aside>
+
+          <div class="relative" :class="{ 'col-span-10 lg:col-span-8': !!$slots.aside, 'col-span-10': !$slots.aside }">
+            <slot />
+          </div>
+        </div>
+      </Container>
+    </main>
+  </div>
+</template>

package/components/docs/DocsPageContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { page } = useContent()
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-col-reverse lg:grid lg:grid-cols-10 gap-8 relative">
+    <div
+      class="col-span-10 lg:col-span-8"
+    >
+      <slot />
+    </div>
+
+    <div
+      class="lg:col-span-2 lg:self-start overflow-x-hidden sticky top-16 -mx-4 sm:-mx-6 px-4 sm:px-6 lg:mx-0 lg:px-0 lg:pt-8 lg:-mt-8 backdrop-blur-md lg:max-h-[calc(100vh-64px)]"
+    >
+      <div class="py-4 lg:py-0">
+        <button class="flex lg:hidden items-center gap-3" @click="isOpen = !isOpen">
+          <span class="u-text-gray-900 font-semibold text-sm">Table of Contents</span>
+
+          <Icon name="heroicons-outline:chevron-right" class="w-4 h-4 u-text-gray-400 transition-transform duration-100 transform" :class="[isOpen ? 'rotate-90' : 'rotate-0']" />
+        </button>
+
+        <DocsToc class="mt-4 lg:mt-0" :class="[isOpen ? 'lg:block' : 'hidden lg:block']" />
+      </div>
+    </div>
+  </div>
+</template>

package/components/docs/DocsToc.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const { activeHeadings, updateHeadings } = useScrollspy()
+
+const { toc, prev, next } = useContent()
+
+watch(
+  () => route.path,
+  () => {
+    if (process.client) {
+      setTimeout(() => {
+        updateHeadings([
+          ...document.querySelectorAll('.prose h1'),
+          ...document.querySelectorAll('.prose h2'),
+          ...document.querySelectorAll('.prose h3'),
+        ])
+      }, 1000)
+    }
+  }, {
+    immediate: true,
+  })
+
+function scrollToHeading(id: string, scrollMarginCssVar: string) {
+  useScrollToHeading(id, scrollMarginCssVar)
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <NuxtLink v-if="prev" :to="prev.slug" class="flex lg:flex-row-reverse items-center text-primary font-semibold group gap-x-3">
+      <div class="flex-shrink-0 p-1 rounded-md text-secondary-group-hover transition-base">
+        <Icon name="heroicons-solid:chevron-double-left" class="w-6 h-6" />
+      </div>
+
+      <span>Previous page</span>
+    </NuxtLink>
+
+    <template v-if="toc.length">
+      <div class="flex lg:flex-row-reverse items-center font-semibold gap-x-3">
+        <div class="flex-shrink-0 p-1 rounded-md">
+          <Icon name="heroicons-outline:view-grid" class="w-6 h-6" />
+        </div>
+
+        <span>On this page</span>
+      </div>
+
+      <ul class="pl-3 lg:pr-3 mr-1">
+        <li v-for="link in toc" :key="link.text" class="group border-l-2 lg:border-r-2 lg:border-l-0 min-w-0 lg:text-right" :class="activeHeadings.includes(link.id) ? 'u-border-gray-900' : 'u-border-gray-300'">
+          <a
+            :href="`#${link.id}`"
+            class="text-secondary text-secondary-group-hover py-1 pl-3 lg:pr-3 block truncate"
+            :class="{
+              'text-primary-500 dark:text-primary-400': activeHeadings.includes(link.id),
+            }"
+            @click.prevent="scrollToHeading(link.id, '--docs-scroll-margin-block')"
+          >
+            {{ link.text }}
+          </a>
+        </li>
+      </ul>
+    </template>
+
+    <NuxtLink v-if="next" :to="next.slug" class="flex lg:flex-row-reverse items-center text-primary font-semibold group gap-x-3">
+      <div class="flex-shrink-0 p-1 rounded-md text-secondary-group-hover transition-base">
+        <Icon name="heroicons-solid:chevron-double-right" class="w-6 h-6" />
+      </div>
+
+      <span>Next page</span>
+    </NuxtLink>
+  </div>
+</template>

package/components/globals/Icon.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { Icon } from '@iconify/vue/dist/offline'
+import { loadIcon } from '@iconify/vue'
+
+const props = defineProps({
+  name: {
+    type: [String, Object],
+    required: true,
+  },
+})
+
+const icon = ref(null)
+
+icon.value = await loadIcon(props.name)
+
+watch(() => props.name, async() => {
+  icon.value = await loadIcon(props.name)
+})
+</script>
+
+<template>
+  <Icon :icon="icon" />
+</template>

package/components/globals/Logo.vue

@@ -0,0 +1,3 @@
+<template>
+  <IconNuxt />
+</template>

package/components/globals/NuxtImg.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+export interface NuxtImg {
+  light: string
+  dark: string
+}
+
+const props = defineProps({
+  src: {
+    type: [String, Object] as PropType<NuxtImg>,
+    default: null,
+  },
+})
+
+const colorMode = useColorMode()
+
+const src = computed(
+  () => {
+    let src = props.src
+
+    try {
+      src = JSON.parse(src as any)
+    }
+    catch (e) {
+      src = props.src
+    }
+
+    if (typeof src === 'string')
+      return props.src
+
+    if (colorMode.value === 'dark')
+      return props.src.dark || props.src.light
+
+    if (colorMode.value === 'light')
+      return props.src.light || props.src.light
+  },
+)
+</script>
+
+<template>
+  <img :src="src">
+</template>

package/components/globals/SocialIcons.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps({
+  size: {
+    type: String,
+    default: 'w-6 h-6',
+  },
+  padding: {
+    type: String,
+    default: 'p-0',
+  },
+})
+
+const theme = useTheme()
+</script>
+
+<template>
+  <div class="flex">
+    <a
+      v-if="theme.twitter"
+      :href="`https://twitter.com/${theme.twitter}`"
+      target="_blank"
+      rel="noopener noreferrer"
+      title="Twitter"
+      name="Twitter"
+      class="icon-base"
+      :class="[padding]"
+    >
+      <IconTwitter :class="size" />
+    </a>
+    <a
+      v-if="theme.github"
+      :href="`https://github.com/${theme.github}`"
+      target="_blank"
+      rel="noopener noreferrer"
+      title="GitHub"
+      name="GitHub"
+      class="icon-base"
+      :class="[padding]"
+    >
+      <IconGitHub :class="size" />
+    </a>
+  </div>
+</template>

package/components/globals/ThemeSelect.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+type ColorMode = 'light' | 'dark'
+
+const mode = computed<ColorMode>({
+  get() {
+    return colorMode.value as ColorMode
+  },
+  set(v: ColorMode) {
+    colorMode.preference = v
+  },
+})
+
+const onClick = () => {
+  mode.value === 'light' ? (mode.value = 'dark') : (mode.value = 'light')
+}
+</script>
+
+<template>
+  <button
+    class="icon-base w-6 h-6"
+    aria-label="Color Mode"
+    @click="onClick"
+  >
+    <ClientOnly>
+      <IconSun v-if="mode === 'dark'" />
+      <IconMoon v-else />
+
+      <template #placeholder>
+        ...
+      </template>
+    </ClientOnly>
+  </button>
+</template>

package/components/icons/IconAlgolia.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path
+      fill="currentColor"
+      d="M229.3 182.6c-49.3 0-89.2 39.9-89.2 89.2 0 49.3 39.9 89.2 89.2 89.2s89.2-39.9 89.2-89.2c0-49.3-40-89.2-89.2-89.2zm62.7 56.6l-58.9 30.6c-1.8.9-3.8-.4-3.8-2.3V201c0-1.5 1.3-2.7 2.7-2.6 26.2 1 48.9 15.7 61.1 37.1.7 1.3.2 3-1.1 3.7zM389.1 32H58.9C26.4 32 0 58.4 0 90.9V421c0 32.6 26.4 59 58.9 59H389c32.6 0 58.9-26.4 58.9-58.9V90.9C448 58.4 421.6 32 389.1 32zm-202.6 84.7c0-10.8 8.7-19.5 19.5-19.5h45.3c10.8 0 19.5 8.7 19.5 19.5v15.4c0 1.8-1.7 3-3.3 2.5-12.3-3.4-25.1-5.1-38.1-5.1-13.5 0-26.7 1.8-39.4 5.5-1.7.5-3.4-.8-3.4-2.5v-15.8zm-84.4 37l9.2-9.2c7.6-7.6 19.9-7.6 27.5 0l7.7 7.7c1.1 1.1 1 3-.3 4-6.2 4.5-12.1 9.4-17.6 14.9-5.4 5.4-10.4 11.3-14.8 17.4-1 1.3-2.9 1.5-4 .3l-7.7-7.7c-7.6-7.5-7.6-19.8 0-27.4zm127.2 244.8c-70 0-126.6-56.7-126.6-126.6s56.7-126.6 126.6-126.6c70 0 126.6 56.6 126.6 126.6 0 69.8-56.7 126.6-126.6 126.6z"
+    />
+  </svg>
+</template>

package/components/icons/IconArrowLeft.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/components/icons/IconArrowRight.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/components/icons/IconBadgeCheck.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+    />
+  </svg>
+</template>

package/components/icons/IconCheck.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/components/icons/IconCheckCircle.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/components/icons/IconChevronRight.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path d="M9 5l7 7-7 7" />
+  </svg>
+</template>

package/components/icons/IconClipboardCheck.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+    />
+  </svg>
+</template>

package/components/icons/IconClipboardCopy.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
+    />
+  </svg>
+</template>