cloudcommerce 0.33.0 → 0.33.2

package/ecomplus-stores/monocard/functions/ssr/src/components/Breadcrumbs.astro

@@ -10,7 +10,7 @@ const { breadcrumbs, inlineJSONLd } = await useBreadcrumbs(Astro.props);
 ---
 
 {breadcrumbs.length > 0 &&
-  <section class="ui-section-slim">
+  <section class={`ui-section-slim ${breadcrumbs.length > 1 ? '' : 'hidden lg:block'}`}>
     <nav aria-label="Breadcrumb" class="w-full overflow-hidden text-lg md:text-sm">
       <ol class="flex items-center gap-1 text-base-600">
         <li>

package/ecomplus-stores/monocard/functions/ssr/src/components/CartItem.vue

@@ -1,30 +1,30 @@
 <template>
   <article class="relative bg-white shadow-sm">
-    <ALink :href="link" class="flex items-center gap-5 p-4 group">
+    <ALink :href="link" class="group flex items-center gap-5 p-4">
       <AImg
         v-if="image"
         :picture="image"
         :alt="title"
-        class="w-20 h-20 object-cover"
+        class="h-20 w-20 object-cover"
       />
-      <p class="py-2 flex-auto text-sm text-base-700
-        group-hover:text-base-900 group-hover:underline">
+      <p class="text-base-700 group-hover:text-base-900 flex-auto py-2
+        text-sm group-hover:underline">
         {{ title }}
       </p>
     </ALink>
     <button
       v-if="cartItem._id"
       @click.stop="removeCartItem(cartItem._id)"
-      class="absolute top-0 right-0 p-2 opacity-70 hover:opacity-100"
+      class="absolute right-0 top-0 p-2 opacity-70 hover:opacity-100"
       :aria-label="$t.i19remove"
     >
-      <span class="w-5 h-5 text-sm leading-none flex flex-col justify-center
-        rounded-full border-3 text-danger-800 border-danger-700/30">
-        <i class="i-close my-0 mx-auto"></i>
+      <span class="border-3 text-danger-800 border-danger-700/30 flex h-5 w-5 flex-col
+        justify-center rounded-full text-sm leading-none">
+        <i class="i-close mx-auto my-0"></i>
       </span>
     </button>
-    <div class="flex justify-between items-center border-t-2 border-base-100">
-      <div class="border-r-2 border-base-100">
+    <div class="border-base-100 flex items-center justify-between border-t-2">
+      <div class="border-base-100 border-r-2">
         <QuantitySelector
           v-model="cartItem.quantity"
           :min="cartItem.min_quantity"
@@ -36,7 +36,7 @@
         :price="finalPrice"
         :has-cashback="false"
         :has-price-options="false"
-        class="px-4 py-2.5 text-[95%] text-right"
+        class="px-4 py-2.5 text-right text-[95%]"
       />
     </div>
   </article>

package/ecomplus-stores/monocard/functions/ssr/src/components/CartSidebar.vue

@@ -1,8 +1,8 @@
 <template>
-  <aside class="flex flex-col h-screen bg-white">
-    <header class="px-6 py-4 flex justify-end items-center gap-3
-      shadow ring-1 ring-black/5 z-10">
-      <span class="text-right text-base text-base-600 font-medium">
+  <aside class="flex h-screen flex-col bg-white">
+    <header class="z-10 flex items-center justify-end gap-3 px-6
+      py-4 shadow ring-1 ring-black/5">
+      <span class="text-base-600 text-right text-base font-medium">
         {{ $t.i19myShoppingCart }}
       </span>
       <span class="min-w-[3rem] text-right">
@@ -11,35 +11,38 @@
         </span>
       </span>
     </header>
-    <article class="grow overflow-y-auto bg-base-50">
-      <div v-if="freeShippingFromValue" class="text-sm text-center">
+    <article class="bg-base-50 grow overflow-y-auto">
+      <div v-if="freeShippingFromValue" class="text-center text-sm">
         <div
           v-if="freeShippingFromValue > shoppingCart.subtotal"
-          class="p-3 secondary-subtle"
+          class="secondary-subtle p-3"
         >
           {{ $t.i19add$1ToEarn.replace('$1',
             $money(freeShippingFromValue - shoppingCart.subtotal)) }}
           <strong class="lowercase">{{ $t.i19freeShipping }}</strong>
         </div>
-        <div v-else class="p-3 bg-success-50 text-success-800">
+        <div v-else class="bg-success-50 text-success-800 p-3">
           <i class="text-success-900 i-check mr-1"></i>
           {{ $t.i19freeShippingFrom }} {{ $money(freeShippingFromValue) }}
         </div>
       </div>
-      <ul class="px-4 pt-4 pb-2">
+      <ul class="px-4 pb-2 pt-4">
         <li v-for="(item, i) in shoppingCart.items" :key="i">
           <CartItem :item="item" class="mb-3" />
         </li>
       </ul>
     </article>
-    <footer class="px-5 pt-4 pb-3 ring-2 ring-black/5 z-10">
-      <div class="grid grid-cols-5 gap-3 items-center text-right">
+    <footer class="z-10 px-5 pb-3 pt-4 ring-2 ring-black/5">
+      <div class="grid grid-cols-5 items-center gap-3 text-right">
         <div class="col-span-2">
           {{ $t.i19subtotal }}
         </div>
         <Prices :price="shoppingCart.subtotal" class="col-span-3 text-lg" />
       </div>
-      <CheckoutLink class="ui-btn-lg ui-btn-primary w-full text-right my-2.5">
+      <CheckoutLink
+        to="checkout"
+        class="ui-btn-lg ui-btn-primary my-2.5 w-full text-right"
+      >
         <i class="i-check mr-2"></i>
         {{ $t.i19checkout }}
       </CheckoutLink>
@@ -48,7 +51,7 @@
         @click.prevent="emit('close')"
         class="ui-link text-base-500 hover:text-base-700 text-sm"
       >
-        <i class="i-arrow-left-line mr-1"></i>
+        <i class="i-arrow-right-line mr-1 rotate-180"></i>
         {{ $t.i19continueShopping }}
       </a>
     </footer>

package/ecomplus-stores/monocard/functions/ssr/src/components/CheckoutPage.vue

@@ -0,0 +1,33 @@
+<template>
+  <article class="flex min-h-screen flex-col justify-end">
+    <section class="grow">
+      <article id="storefront-app"></article>
+    </section>
+    <section class="bg-base-50 mt-4 lg:mt-8">
+      <nav class="ui-section-slim">
+        <ul class="mt-6 flex flex-wrap justify-center gap-6 lg:gap-8">
+          <li
+            v-for="({ title, href }, i) in $settings.serviceLinks"
+            :key="`s-${i}`"
+          >
+            <ALink :href="href" target="blank" class="ui-link text-base-700">
+              {{ title }}
+              <i class="bg-base-300 i-arrow-top-right-on-square ml-0.5"></i>
+            </ALink>
+          </li>
+        </ul>
+      </nav>
+      <FooterStamps :stamps="footerStamps" />
+    </section>
+  </article>
+</template>
+
+<script setup lang="ts">
+import FooterStamps from '~/components/FooterStamps.vue';
+
+export interface Props {
+  footerStamps: InstanceType<typeof FooterStamps>['$props']['stamps'];
+}
+
+defineProps<Props>();
+</script>

package/ecomplus-stores/monocard/functions/ssr/src/components/Collapse.vue

@@ -0,0 +1,19 @@
+<template>
+  <details class="[&_i]:open:rotate-180">
+    <summary role="button" class="text-base-700 hover:text-base-800
+      [&>i]:hover:text-primary my-4 list-none text-2xl
+      font-medium lowercase md:my-5">
+      <i class="i-chevron-down mr-1"></i>
+      <span>{{ title }}</span>
+    </summary>
+    <slot />
+  </details>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title: string;
+}
+
+defineProps<Props>();
+</script>

package/ecomplus-stores/monocard/functions/ssr/src/components/DemoVideo.vue

@@ -3,7 +3,7 @@
     loading="lazy"
     id="ytplayer"
     width="700"
-    class="shrink-0 max-w-full aspect-video"
+    class="aspect-video max-w-full shrink-0"
     src="https://www.youtube.com/embed/u_TLiNHvrLo?autoplay=0"
     frameborder="0"
   />

package/ecomplus-stores/monocard/functions/ssr/src/components/DocDescription.vue

@@ -1,14 +1,8 @@
 <template>
   <section v-if="html" class="ui-section">
-    <details class="[&_i]:open:rotate-180" open>
-      <summary role="button" class="text-base-700 hover:text-base-800
-        [&>i]:hover:text-primary my-4 list-none text-2xl
-        font-medium lowercase md:my-5">
-        <i class="i-chevron-down mr-1"></i>
-        <span>{{ title || $t.i19description }}</span>
-      </summary>
+    <Collapse :title="title || $t.i19description" open>
       <ContentClearfix :html="html" />
-    </details>
+    </Collapse>
   </section>
 </template>
 
@@ -20,6 +14,7 @@ import type {
   Collections,
 } from '@cloudcommerce/api/types';
 import ContentClearfix from '@@sf/components/ContentClearfix.vue';
+import Collapse from '~/components/Collapse.vue';
 
 export interface Props {
   apiDoc?: Partial<Products | Categories | Brands | Collections>;

package/ecomplus-stores/monocard/functions/ssr/src/components/FeatureTabs.vue

@@ -1,9 +1,9 @@
 <template>
-  <article class="container px-8 my-4 mx-auto text-center">
+  <article class="container mx-auto my-4 px-8 text-center">
     <h3
       ref="title"
-      class="text-xl md:text-2xl lg:text-3xl font-semibold text-base-700
-      inline-block lg:text-left"
+      class="text-base-700 inline-block text-xl font-semibold md:text-2xl
+      lg:text-left lg:text-3xl"
       :style="{ minWidth: titleMinWidth, minHeight: titleMinHeight }"
     >
       <span class="block lg:inline">
@@ -12,15 +12,15 @@
       <Fade speed="slow">
         <span
           v-if="copyKeyword"
-          class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-tr
-        from-secondary-600 to-secondary-900"
+          class="from-secondary-600 to-secondary-900 bg-gradient-to-tr bg-clip-text text-3xl
+        font-bold text-transparent"
         >
           {{ copyKeyword }}
         </span>
       </Fade>
     </h3>
-    <TabGroup as="div" class="max-w-3xl mx-auto mt-9">
-      <TabList class="flex space-x-1 rounded-md bg-base-100/70 p-1">
+    <TabGroup as="div" class="mx-auto mt-9 max-w-3xl">
+      <TabList class="bg-base-100/70 flex space-x-1 rounded-md p-1">
         <Tab
           as="template"
           v-for="(step, i) in [
@@ -31,43 +31,43 @@
           v-slot="{ selected }"
         >
           <button
-            class="w-full rounded-sm px-4 py-2.5 text-sm md:text-base
+            class="ring-primary-100/60 ring-offset-primary-400
+            relative block w-full rounded-sm px-4 py-2.5 text-sm
             font-medium leading-5 text-black
-            ring-primary-100 ring-opacity-60 ring-offset-2 ring-offset-primary-400
-            focus:outline-none focus:ring-2 block relative"
+            ring-offset-2 focus:outline-none focus:ring-2 md:text-base"
             :class="selected ? 'bg-primary-100/30 text-black' : null"
           >
-            <span class="z-10 relative">{{ step }}</span>
+            <span class="relative z-10">{{ step }}</span>
           </button>
         </Tab>
       </TabList>
-      <TabPanels class="text-left w-72 mx-auto sm:w-auto sm:px-5 mt-4
+      <TabPanels class="mx-auto mt-4 w-72 text-left sm:w-auto sm:px-5
         md:min-h-[870px] lg:min-h-[880px] xl:min-h-[915px]">
         <TabPanel v-motion-fade>
           <div class="prose mb-8">
-            <h4 class="text-2xl xl:text-3xl leading-snug mb-5">
+            <h4 class="mb-5 text-2xl leading-snug xl:text-3xl">
               Conecte instantaneamente
-              <small class="text-lg xl:text-xl leading-tight
-                text-base-500 font-normal block">
+              <small class="text-base-500 block text-lg
+                font-normal leading-tight xl:text-xl">
                 e compartilhe todos os seus contatos
               </small>
             </h4>
-            <div class="flex gap-4 items-center text-2xl mb-4 text-base-700">
+            <div class="text-base-700 mb-4 flex items-center gap-4 text-2xl">
               <div class="flex items-center">
-                <div class="bg-base-300 text-base-900 rounded-l text-lg
-                  h-8 flex gap-2 items-center pl-2 pr-0.5">
+                <div class="bg-base-300 text-base-900 flex h-8
+                  items-center gap-2 rounded-l pl-2 pr-0.5 text-lg">
                   <i class="i-loader-2-fill my-0"></i>
                   <i class="i-qr-code-line my-0"></i>
                   <i class="i-link-m my-0"></i>
                 </div>
-                <div class="relative w-6 h-8 overflow-hidden">
-                  <div class="absolute -top-0.5 w-6 overflow-hidden inline-block">
-                    <div class="h-9 bg-base-300
-                      rotate-45 transform origin-top-left"></div>
+                <div class="relative h-8 w-6 overflow-hidden">
+                  <div class="absolute -top-0.5 inline-block w-6 overflow-hidden">
+                    <div class="bg-base-300 h-9
+                      origin-top-left rotate-45"></div>
                   </div>
                 </div>
               </div>
-              <div class="grid grid-cols-4 md:grid-cols-8 gap-4">
+              <div class="grid grid-cols-4 gap-4 md:grid-cols-8">
                 <i class="i-pix my-0"></i>
                 <i class="i-whatsapp my-0"></i>
                 <i class="i-instagram my-0"></i>
@@ -75,16 +75,16 @@
                 <i class="i-linkedin my-0"></i>
                 <i class="i-facebook my-0"></i>
                 <i class="i-mail-send-line my-0"></i>
-                <i class="i-add-circle-fill my-0 text-secondary-700"></i>
+                <i class="i-add-circle-fill text-secondary-700 my-0"></i>
               </div>
             </div>
           </div>
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-10">
+          <div class="grid grid-cols-1 gap-x-10 sm:grid-cols-2">
             <div class="prose">
               <slot name="picture-nfc" />
-              <h4 class="flex gap-3 items-center">
-                <i class="i-loader-2-fill text-4xl my-0"></i>
-                <span class="font-normal font-brand lowercase">
+              <h4 class="flex items-center gap-3">
+                <i class="i-loader-2-fill my-0 text-4xl"></i>
+                <span class="font-brand font-normal lowercase">
                   Aproximação
                 </span>
               </h4>
@@ -96,9 +96,9 @@
             </div>
             <div class="prose mt-5 sm:mt-0">
               <slot name="picture-qrcode" />
-              <h4 class="flex gap-3 items-center">
-                <i class="i-qr-code-line text-4xl my-0"></i>
-                <span class="font-normal font-brand lowercase">
+              <h4 class="flex items-center gap-3">
+                <i class="i-qr-code-line my-0 text-4xl"></i>
+                <span class="font-brand font-normal lowercase">
                   QR Code
                 </span>
               </h4>
@@ -110,17 +110,17 @@
             </div>
             <div class="sm:col-span-2">
               <div class="prose">
-                <h4 class="flex flex-wrap gap-3 items-center">
-                  <i class="i-link-m text-4xl my-0"></i>
-                  <span class="font-normal font-brand lowercase">
+                <h4 class="flex flex-wrap items-center gap-3">
+                  <i class="i-link-m my-0 text-4xl"></i>
+                  <span class="font-brand font-normal lowercase">
                     Link
                   </span>
                   <ALink
                     class="text-base-700 decoration-base-300"
                     href="https://mono.direct/carlos"
                   >
-                    <small class="font-normal font-mono text-sm
-                      bg-base-200 px-2 py-1 rounded-sm">
+                    <small class="bg-base-200 rounded-sm px-2
+                      py-1 font-mono text-sm font-normal">
                       https://mono.direct/<b>seunome</b>
                     </small>
                   </ALink>
@@ -132,22 +132,22 @@
               </div>
             </div>
           </div>
-          <div class="mt-5 flex gap-3 lg:gap-4
-            text-xl lg:text-2xl font-brand lowercase">
+          <div class="font-brand mt-5 flex gap-3
+            text-xl lowercase lg:gap-4 lg:text-2xl">
             <a
               :href="$settings.metafields?.monocardSlug"
-              class="primary border-4 border-primary
-              hover:border-primary-bold active:primary-bold
-              rounded-full px-4 py-1.5 lg:px-7 lg:py-3"
+              class="primary border-primary hover:border-primary-bold
+              active:primary-bold rounded-full
+              border-4 px-4 py-1.5 lg:px-7 lg:py-3"
             >
               Monte seu Monocard
             </a>
             <a
               :href="$settings.metafields?.businessLpUrl"
-              class="hidden sm:block
-              bg-transparent text-black border-4 border-primary
-              hover:bg-primary-100 hover:border-primary-bold active:primary-bold
-              rounded-full px-4 py-2 lg:px-6 lg:py-3"
+              class="border-primary hover:bg-primary-100
+              hover:border-primary-bold active:primary-bold hidden rounded-full
+              border-4 bg-transparent px-4
+              py-2 text-black sm:block lg:px-6 lg:py-3"
             >
               Para empresas
             </a>
@@ -155,8 +155,8 @@
         </TabPanel>
         <TabPanel v-motion-fade>
           <slot name="picture-edit" />
-          <div class="flex flex-wrap md:flex-nowrap gap-x-10">
-            <div class="md:basis-1/2 prose">
+          <div class="flex flex-wrap gap-x-10 md:flex-nowrap">
+            <div class="prose md:basis-1/2">
               <h4 class="text-xl">
                 Editar o perfil é rápido e fácil
               </h4>
@@ -166,8 +166,8 @@
                 LinkedIn, Instagram, TikTok, Twitter, loja, website
                 e até Pix.
               </p>
-              <p class="grid grid-cols-4 max-w-[170px] lg:max-w-[200px] gap-5
-                text-2xl text-base-800">
+              <p class="text-base-800 grid max-w-[170px] grid-cols-4 gap-5
+                text-2xl lg:max-w-[200px]">
                 <i class="i-pix my-0"></i>
                 <i class="i-whatsapp my-0"></i>
                 <i class="i-instagram my-0"></i>
@@ -175,29 +175,29 @@
                 <i class="i-linkedin my-0"></i>
                 <i class="i-facebook my-0"></i>
                 <i class="i-mail-send-line my-0"></i>
-                <i class="i-add-circle-fill my-0 text-secondary-700"></i>
+                <i class="i-add-circle-fill text-secondary-700 my-0"></i>
               </p>
               <p class="font-medium">
                 Tudo em um único link apontado diretamente pelo
                 seu cartão de visitas inteligente.
               </p>
             </div>
-            <div class="md:basis-1/2 prose">
-              <h4 class="flex gap-3 items-center">
-                <i class="i-translate-2 text-4xl my-0"></i>
-                <span class="font-normal font-brand lowercase">
+            <div class="prose md:basis-1/2">
+              <h4 class="flex items-center gap-3">
+                <i class="i-translate-2 my-0 text-4xl"></i>
+                <span class="font-brand font-normal lowercase">
                   Multilingual
                 </span>
               </h4>
               <p>
                 Traduz automaticamente o perfil para inglês.
-                <small class="block text-base-500">
+                <small class="text-base-500 block">
                   Tradução para outras línguas em breve.
                 </small>
               </p>
-              <h4 class="flex gap-3 items-center md:mt-9">
-                <i class="i-menu-add-fill text-4xl my-0"></i>
-                <span class="font-normal font-brand lowercase">
+              <h4 class="flex items-center gap-3 md:mt-9">
+                <i class="i-menu-add-fill my-0 text-4xl"></i>
+                <span class="font-brand font-normal lowercase">
                   Ilimitado
                 </span>
               </h4>
@@ -207,33 +207,33 @@
               </p>
             </div>
           </div>
-          <div class="mt-5 flex flex-wrap gap-3 lg:gap-4
-            text-lg lg:text-xl font-brand lowercase">
+          <div class="font-brand mt-5 flex flex-wrap gap-3
+            text-lg lowercase lg:gap-4 lg:text-xl">
             <a
               href="#produtos"
-              class="grow sm:grow-0
-              primary border-4 border-primary
-              hover:border-primary-bold active:primary-bold
-              rounded-full px-6 py-1.5 lg:px-8 lg:py-3
-              flex items-center"
+              class="primary border-primary
+              hover:border-primary-bold active:primary-bold flex
+              grow items-center
+              rounded-full border-4 px-6 py-1.5 sm:grow-0
+              lg:px-8 lg:py-3"
             >
-              <span class="leading-tight block">
+              <span class="block leading-tight">
                 Compre agora
-                <small class="block text-sm text-base-700">
+                <small class="text-base-700 block text-sm">
                   Seu Monocard ou Monodot
                 </small>
               </span>
             </a>
             <a
               :href="$settings.metafields?.businessLpUrl"
-              class="grow sm:grow-0
-              bg-transparent text-black border-4 border-primary
-              hover:bg-primary-100 hover:border-primary-bold active:primary-bold
-              rounded-full px-6 py-1.5 lg:px-8 lg:py-3"
+              class="border-primary hover:bg-primary-100
+              hover:border-primary-bold active:primary-bold grow rounded-full
+              border-4 bg-transparent px-6
+              py-1.5 text-black sm:grow-0 lg:px-8 lg:py-3"
             >
-              <span class="leading-tight block">
+              <span class="block leading-tight">
                 Para grandes times
-                <small class="block text-sm text-base-700">
+                <small class="text-base-700 block text-sm">
                   Fale conosco
                 </small>
               </span>
@@ -246,12 +246,6 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  nextTick,
-  onMounted,
-  onBeforeUnmount,
-} from 'vue';
 import { useDebounceFn } from '@vueuse/core';
 import {
   TabGroup,

package/ecomplus-stores/monocard/functions/ssr/src/components/FooterStamps.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="ui-section">
+    <div class="flex flex-wrap items-start justify-between gap-5 lg:flex-nowrap">
+      <ul class="mx-auto flex items-center gap-x-6 gap-y-3
+        overflow-x-auto md:mx-0 md:flex-wrap md:overflow-hidden lg:gap-x-8">
+        <li v-for="(stamp, i) in stamps" :key="i">
+          <ALink :href="stamp.href?.replace('{domain}', $settings.domain || '')">
+            <slot :name="`picture-${i}`" />
+            <span v-if="!stamp.img" class="flex items-center">
+              <span
+                v-if="stamp.icon"
+                class="[&>*]:from-success-200 [&>*]:to-success-700
+                mr-2 text-4xl [&>*]:bg-gradient-to-br"
+              >
+                <i v-if="stamp.icon === 'lock'" class="i-lock-closed"></i>
+                <i v-else-if="stamp.icon === 'check'" class="i-check-badge"></i>
+                <i v-else class="i-arrow-path-rounded-square"></i>
+              </span>
+              <span class="text-base-300 max-w-[140px] text-sm font-medium">
+                {{ stamp.alt }}
+                <i
+                  v-if="stamp.href && stamp.href.charAt(0) !== '/'"
+                  class="bg-base-400 i-arrow-top-right-on-square ml-0.5"
+                ></i>
+              </span>
+            </span>
+          </ALink>
+        </li>
+      </ul>
+      <div class="mx-auto flex flex-wrap items-center justify-end
+        gap-4 overflow-x-auto text-2xl md:mx-0 md:flex-nowrap md:overflow-hidden">
+        <PaymentMethodFlag
+          v-for="paymentMethod in $settings.paymentMethods"
+          :key="paymentMethod"
+          :flag="paymentMethod"
+          class="!text-base-50"
+        />
+      </div>
+    </div>
+    <div class="mt-7 justify-between gap-4 text-center
+      text-xs md:flex md:text-left">
+      <div class="mb-3 md:mb-0">
+        @ {{ new Date().getFullYear() }} {{ $settings.corporateName }}
+        {{ $settings.address ? `/ ${$settings.address}` : '' }}
+        / {{ $settings.docNumber }}
+      </div>
+      <ALink href="https://www.ecomplus.io/" class="italic text-[rgb(239,235,240)]">
+        powered by <b>E-Com Plus</b>
+      </ALink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LayoutContent } from '@@sf/content';
+import PaymentMethodFlag from '@@sf/components/PaymentMethodFlag.vue';
+
+export interface Props {
+  stamps?: LayoutContent['footer']['stamps'];
+}
+
+defineProps<Props>();
+</script>