@dargmuesli/nuxt-vio 2.0.1 → 3.0.0-beta.1

package/components/form/input/state/VioFormInputStateError.vue

@@ -0,0 +1,32 @@
+<template>
+  <VioFormInputState
+    v-if="
+      (!formInput && !validationProperty) ||
+      (formInput &&
+        formInput[isValidationLive ? '$invalid' : '$error'] &&
+        !formInput.$pending &&
+        validationProperty &&
+        validationProperty in formInput &&
+        formInput[validationProperty].$invalid)
+    "
+    class="text-red-600"
+  >
+    <IconExclamationCircle v-if="formInput && validationProperty" />
+    <slot />
+  </VioFormInputState>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+
+export interface Props {
+  formInput?: BaseValidation
+  isValidationLive?: boolean
+  validationProperty?: string
+}
+withDefaults(defineProps<Props>(), {
+  formInput: undefined,
+  isValidationLive: false,
+  validationProperty: undefined,
+})
+</script>

package/components/form/input/state/VioFormInputStateInfo.vue

@@ -0,0 +1,32 @@
+<template>
+  <VioFormInputState
+    v-if="
+      (!formInput && !validationProperty) ||
+      (formInput &&
+        formInput[isValidationLive ? '$invalid' : '$error'] &&
+        !formInput.$pending &&
+        validationProperty &&
+        validationProperty in formInput &&
+        formInput[validationProperty].$invalid)
+    "
+    class="text-gray-500 dark:text-gray-400"
+  >
+    <IconInformationCircle />
+    <slot />
+  </VioFormInputState>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+
+export interface Props {
+  formInput?: BaseValidation
+  isValidationLive?: boolean
+  validationProperty?: string
+}
+withDefaults(defineProps<Props>(), {
+  formInput: undefined,
+  isValidationLive: false,
+  validationProperty: undefined,
+})
+</script>

package/components/icon/IconArrowRight.vue

@@ -0,0 +1,31 @@
+<template>
+  <IconContainer
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+    :title="title || t('title')"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M14 5l7 7m0 0l-7 7m7-7H3"
+    />
+  </IconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Vor
+en:
+  title: Forward
+</i18n>

package/components/icon/IconCalendar.vue

@@ -0,0 +1,31 @@
+<template>
+  <IconContainer
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    :title="title || t('title')"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+    />
+  </IconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Kalender
+en:
+  title: Calendar
+</i18n>

package/components/icon/IconChatOutline.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="classes"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    classes: {
+      default: 'h-5 md:h-6 w-5 md:w-6',
+      type: String,
+    },
+  },
+})
+</script>

package/components/icon/IconChatSolid.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="classes"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"
+    />
+    <path
+      d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    classes: {
+      default: 'h-5 md:h-6 w-5 md:w-6',
+      type: String,
+    },
+  },
+})
+</script>

package/components/icon/IconCheckCircle.vue

@@ -0,0 +1,29 @@
+<template>
+  <IconContainer
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    :title="title || t('title')"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+      clip-rule="evenodd"
+    />
+  </IconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Akzeptieren
+en:
+  title: Accept
+</i18n>

package/components/icon/IconContainer.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :class="classes" :title="title">
+    <slot />
+  </svg>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  classes?: string
+  title: string
+}
+withDefaults(defineProps<Props>(), {
+  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
+})
+</script>

package/components/icon/IconDownload.vue

@@ -0,0 +1,31 @@
+<template>
+  <IconContainer
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    :title="title || t('title')"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+    />
+  </IconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Herunterladen
+en:
+  title: Download
+</i18n>

package/components/icon/IconExclamationCircle.vue

@@ -0,0 +1,29 @@
+<template>
+  <IconContainer
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    :title="title || t('title')"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+      clip-rule="evenodd"
+    />
+  </IconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Fehlerhaft
+en:
+  title: Erroneous
+</i18n>

package/components/icon/IconHome.vue

@@ -0,0 +1,31 @@
+<template>
+  <IconContainer
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    :title="title || t('title')"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+    />
+  </IconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Homepage
+en:
+  title: Homepage
+</i18n>

package/components/icon/IconHourglass.vue

@@ -0,0 +1,32 @@
+<template>
+  <IconContainer
+    aria-hidden="true"
+    focusable="false"
+    data-prefix="fas"
+    data-icon="hourglass"
+    role="img"
+    viewBox="0 0 384 512"
+    :title="title || t('title')"
+  >
+    <path
+      fill="currentColor"
+      d="M352 0C369.7 0 384 14.33 384 32C384 49.67 369.7 64 352 64V74.98C352 117.4 335.1 158.1 305.1 188.1L237.3 256L305.1 323.9C335.1 353.9 352 394.6 352 437V448C369.7 448 384 462.3 384 480C384 497.7 369.7 512 352 512H32C14.33 512 0 497.7 0 480C0 462.3 14.33 448 32 448V437C32 394.6 48.86 353.9 78.86 323.9L146.7 256L78.86 188.1C48.86 158.1 32 117.4 32 74.98V64C14.33 64 0 49.67 0 32C0 14.33 14.33 0 32 0H352zM111.1 128H272C282.4 112.4 288 93.98 288 74.98V64H96V74.98C96 93.98 101.6 112.4 111.1 128zM111.1 384H272C268.5 378.7 264.5 373.7 259.9 369.1L192 301.3L124.1 369.1C119.5 373.7 115.5 378.7 111.1 384V384z"
+    />
+  </IconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Dauer
+en:
+  title: Duration
+</i18n>

package/components/icon/IconLightbulb.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="classes"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    classes: {
+      default: 'h-5 md:h-6 w-5 md:w-6',
+      type: String,
+    },
+  },
+})
+</script>

package/components/icon/IconLogo.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1064pt"
+    height="1064pt"
+    version="1.1"
+    viewBox="0 0 1064 1064"
+  >
+    <g id="#9a9a9aff">
+      <path
+        fill="#ecc94b"
+        d="M 802.62 185.62 C 806.76 181.54 810.71 177.26 815.06 173.41 C 828.57 186.40 841.60 199.89 854.94 213.06 C 866.81 225.07 878.95 236.83 890.68 248.99 C 858.25 281.90 825.33 314.33 792.78 347.13 C 801.85 360.72 810.67 374.54 817.81 389.27 C 849.17 451.62 859.14 524.40 845.66 592.88 C 835.73 644.31 812.88 693.19 779.77 733.77 C 748.01 772.91 706.76 804.28 660.61 824.52 C 601.85 850.47 535.17 858.08 472.10 845.87 C 399.83 832.28 332.81 792.71 286.03 735.97 C 261.50 706.51 242.51 672.51 229.95 636.31 C 214.56 591.74 209.12 543.75 214.40 496.88 C 219.97 445.89 238.13 396.34 266.77 353.78 C 297.11 308.55 339.24 271.29 387.93 246.85 C 436.80 222.00 492.22 210.23 546.98 212.87 C 592.26 214.95 637.06 226.87 677.39 247.55 C 691.14 254.44 704.16 262.67 716.88 271.28 C 745.53 242.80 774.02 214.15 802.62 185.62 M 668.11 321.11 C 659.08 330.37 649.57 339.17 640.85 348.72 C 671.30 366.97 697.16 392.75 715.33 423.27 C 726.58 412.55 737.35 401.34 748.40 390.41 C 762.78 375.92 777.38 361.65 791.64 347.04 C 771.18 318.23 745.87 292.82 717.00 272.43 C 700.48 288.43 684.45 304.92 668.11 321.11 M 436.34 342.35 C 401.95 359.59 372.51 386.48 352.08 419.07 C 331.27 452.09 319.83 490.96 319.57 530.00 C 319.10 567.70 329.06 605.44 347.89 638.09 C 365.96 669.51 392.23 696.14 423.39 714.64 C 456.33 734.24 494.65 744.78 533.00 744.45 C 574.05 744.36 615.02 731.94 649.19 709.17 C 676.80 690.95 700.05 666.14 716.43 637.39 C 736.74 602.03 746.42 560.71 744.11 520.01 C 742.05 486.63 732.53 453.44 715.15 424.78 C 673.22 466.47 631.56 508.43 589.65 550.14 C 586.42 547.81 583.82 544.77 581.00 542.00 C 559.16 520.17 537.32 498.33 515.49 476.50 C 514.40 475.63 513.59 474.12 515.09 473.18 C 556.44 431.67 598.01 390.37 639.32 348.82 C 615.75 334.67 589.17 325.65 561.99 321.72 C 519.31 315.51 474.81 322.86 436.34 342.35 Z"
+        opacity="1"
+      />
+    </g>
+  </svg>
+</template>

package/components/icon/IconMixcloud.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 512"
+    :class="classes"
+  >
+    <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+    <path
+      d="M424.43 219.729C416.124 134.727 344.135 68 256.919 68c-72.266 0-136.224 46.516-159.205 114.074-54.545 8.029-96.63 54.822-96.63 111.582 0 62.298 50.668 112.966 113.243 112.966h289.614c52.329 0 94.969-42.362 94.969-94.693 0-45.131-32.118-83.063-74.48-92.2zm-20.489 144.53H114.327c-39.04 0-70.881-31.564-70.881-70.604s31.841-70.604 70.881-70.604c18.827 0 36.548 7.475 49.838 20.766 19.963 19.963 50.133-10.227 30.18-30.18-14.675-14.398-32.672-24.365-52.053-29.349 19.935-44.3 64.79-73.926 114.628-73.926 69.496 0 125.979 56.483 125.979 125.702 0 13.568-2.215 26.857-6.369 39.594-8.943 27.517 32.133 38.939 40.147 13.29 2.769-8.306 4.984-16.889 6.369-25.472 19.381 7.476 33.502 26.303 33.502 48.453 0 28.795-23.535 52.33-52.607 52.33zm235.069-52.33c0 44.024-12.737 86.386-37.102 122.657-4.153 6.092-10.798 9.414-17.72 9.414-16.317 0-27.127-18.826-17.443-32.949 19.381-29.349 29.903-63.682 29.903-99.122s-10.521-69.773-29.903-98.845c-15.655-22.831 19.361-47.24 35.163-23.534 24.366 35.993 37.102 78.356 37.102 122.379zm-70.88 0c0 31.565-9.137 62.021-26.857 88.325-4.153 6.091-10.798 9.136-17.72 9.136-17.201 0-27.022-18.979-17.443-32.948 13.013-19.104 19.658-41.255 19.658-64.513 0-22.981-6.645-45.408-19.658-64.512-15.761-22.986 19.008-47.095 35.163-23.535 17.719 26.026 26.857 56.483 26.857 88.047z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    classes: {
+      default: 'h-5 md:h-6 w-5 md:w-6',
+      type: String,
+    },
+  },
+})
+</script>

package/components/icon/IconMusic.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="classes"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    classes: {
+      default: 'h-5 md:h-6 w-5 md:w-6',
+      type: String,
+    },
+  },
+})
+</script>

package/components/icon/IconPlay.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="classes"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    classes: {
+      default: 'h-5 md:h-6 w-5 md:w-6',
+      type: String,
+    },
+  },
+})
+</script>

package/components/icon/IconShare.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="classes"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    classes: {
+      default: 'h-5 md:h-6 w-5 md:w-6',
+      type: String,
+    },
+  },
+})
+</script>

package/components/layout/VioLayoutBreadcrumbs.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="mb-4 flex items-center gap-2 overflow-auto p-1">
+    <VioLink
+      :aria-label="t('home')"
+      data-testid="breadcrumb-prefix-/"
+      :is-colored="false"
+      :to="localePath('/')"
+    >
+      <IconHome classes="h-6 w-6" />
+    </VioLink>
+    <ul v-if="prefixes" class="flex items-center gap-2">
+      <li
+        v-for="prefix in prefixes"
+        :key="prefix.name"
+        class="flex items-center gap-2"
+      >
+        <span>{{ t('separator') }}</span>
+        <VioLink
+          class="whitespace-nowrap text-2xl"
+          :data-testid="`breadcrumb-prefix-${prefix.to}`"
+          :is-colored="false"
+          :to="prefix.to"
+        >
+          {{ prefix.name }}
+        </VioLink>
+      </li>
+    </ul>
+    <span>{{ t('separator') }}</span>
+    <VioLink :is-colored="false" to="?">
+      <span
+        class="whitespace-nowrap text-2xl font-bold"
+        data-testid="breadcrumb"
+      >
+        <slot />
+      </span>
+    </VioLink>
+    <ul v-if="suffixes" class="flex items-center gap-2">
+      <li
+        v-for="suffix in suffixes"
+        :key="suffix.name"
+        class="flex items-center gap-2"
+      >
+        <span>{{ t('separator') }}</span>
+        <VioLink
+          class="whitespace-nowrap text-2xl"
+          :data-testid="`breadcrumb-suffix-${suffix.to}`"
+          :is-colored="false"
+          :to="suffix.to"
+        >
+          {{ suffix.name }}
+        </VioLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Breadcrumb {
+  name: string
+  to: string
+}
+
+export interface Props {
+  prefixes?: Array<Breadcrumb>
+  suffixes?: Array<Breadcrumb>
+}
+withDefaults(defineProps<Props>(), {
+  prefixes: undefined,
+  suffixes: undefined,
+})
+
+const localePath = useLocalePath()
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  home: Nach Hause
+  separator: /
+en:
+  home: Head home
+  separator: /
+</i18n>

package/components/layout/VioLayoutFooter.vue

@@ -0,0 +1,40 @@
+<template>
+  <footer class="text-sm leading-6">
+    <div class="flex flex-col gap-8">
+      <div class="flex items-center">
+        <VioLayoutHr />
+        <IconLogo class="mx-12 h-12 w-12 brightness-0 opacity-60 invert" />
+        <VioLayoutHr />
+      </div>
+      <!-- Justifying evenly, instead of "between", centers a single element. -->
+      <div class="flex flex-wrap justify-evenly">
+        <slot />
+      </div>
+      <p class="text-center text-gray-500 dark:text-gray-400">
+        {{
+          t('copyright', {
+            name: 'Jonas Thelemann',
+            year,
+          })
+        }}
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const config = useRuntimeConfig()
+
+// computations
+const year = computed(() =>
+  config.public.isTesting ? 1337 : new Date().getFullYear(),
+)
+</script>
+
+<i18n lang="yaml">
+de:
+  copyright: © {year} {name}. Alle Rechte vorbehalten.
+en:
+  copyright: © {year} {name}. All rights reserved.
+</i18n>

package/components/layout/VioLayoutFooterCategory.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="flex flex-1 flex-col items-start p-4 basis-1/2 md:flex-none md:basis-auto gap-2"
+  >
+    <span class="whitespace-nowrap text-lg font-medium leading-7">
+      {{ heading }}
+    </span>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  heading: string
+}
+withDefaults(defineProps<Props>(), {})
+</script>