diff --git a/preview/astro.config.mjs b/preview/astro.config.mjs
index 4f25053f1..de0324fa4 100644
--- a/preview/astro.config.mjs
+++ b/preview/astro.config.mjs
@@ -149,9 +149,7 @@ export default defineConfig({
         {
           // Beautify html fences before highlighting.
           preprocess(code) {
-            if (this.options.lang === 'html') {
-              return beautify.html(code, { indent_size: 2, wrap_line_length: 80 })
-            }
+            return this.options.lang === 'html' ? beautify.html(code, { indent_size: 2, wrap_line_length: 80 }) : code
           },
           // Keep shiki classes only (drop Astro's astro-code / data-language).
           pre(node) {
diff --git a/preview/js/demo.ts b/preview/js/demo.ts
index 4c8382936..2d1d1c76c 100644
--- a/preview/js/demo.ts
+++ b/preview/js/demo.ts
@@ -26,13 +26,12 @@ const parseUrl = (): void => {
   const search = window.location.search.substring(1)
   const params = search.split('&')
 
-  for (let i = 0; i < params.length; i++) {
-    const arr = params[i].split('=')
-    const key = arr[0]
-    const value = arr[1]
+  for (const param of params) {
+    const [key, value] = param.split('=')
+    const item = key !== undefined ? items[key] : undefined
 
-    if (!!items[key]) {
-      localStorage.setItem(items[key].localStorage, value)
+    if (item && key !== undefined && value !== undefined) {
+      localStorage.setItem(item.localStorage, value)
       config[key] = value
     }
   }
diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro
index f00eb7c58..0fd92858a 100644
--- a/preview/pages/all-elements.astro
+++ b/preview/pages/all-elements.astro
@@ -42,9 +42,12 @@ import ListGroup from '@ui/ListGroup.astro'
 import ListGroupItem from '@ui/ListGroupItem.astro'
 import payments from '@data/payments.json'
 
-const paymentNames = Object.fromEntries((payments as { name: string; logo: string }[]).map((p) => [p.logo, p.name]))
+const PAYMENT_IDS = ['visa', 'mastercard', 'paypal', 'americanexpress', 'applepay', 'google-pay', 'stripe', 'discover', 'jcb', 'maestro', 'dinersclub', 'bitcoin', 'ethereum', 'klarna', 'venmo', 'square'] as const
+type PaymentId = (typeof PAYMENT_IDS)[number]
 
-const countryNames: Record<string, string> = {
+const paymentNames = Object.fromEntries((payments as { name: string; logo: string }[]).map((p) => [p.logo, p.name])) as Record<PaymentId, string>
+
+const countryNames = {
   us: 'United States',
   gb: 'United Kingdom',
   de: 'Germany',
@@ -574,7 +577,7 @@ function greetUser(name) {
           <div class="mb-3">
             <div class="d-flex flex-wrap gap-2">
               {
-                (['visa', 'mastercard', 'paypal', 'americanexpress', 'applepay', 'google-pay', 'stripe', 'discover', 'jcb', 'maestro', 'dinersclub', 'bitcoin', 'ethereum', 'klarna', 'venmo', 'square'] as const).map((payment) => (
+                PAYMENT_IDS.map((payment) => (
                   <>
                     <Payment payment={payment} label={paymentNames[payment]} class="hide-theme-dark" />
                     <Payment payment={payment} label={paymentNames[payment]} dark class="hide-theme-light" />
diff --git a/preview/pages/card-actions.astro b/preview/pages/card-actions.astro
index d58bc8735..2d9d01008 100644
--- a/preview/pages/card-actions.astro
+++ b/preview/pages/card-actions.astro
@@ -10,9 +10,10 @@ import Button from '@ui/Button.astro'
 import Avatar from '@ui/Avatar.astro'
 import Icon from '@ui/Icon.astro'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
-const person0 = people[0]
-const person3 = people[3]
+const person0 = requireIndex(people, 0)
+const person3 = requireIndex(people, 3)
 ---
 
 <DefaultLayout title="Card actions" pageHeader="Card actions" pageMenu="base.cards.actions">
diff --git a/preview/pages/card-gradients.astro b/preview/pages/card-gradients.astro
index 0d9edc4b3..a7d393e7f 100644
--- a/preview/pages/card-gradients.astro
+++ b/preview/pages/card-gradients.astro
@@ -11,6 +11,7 @@ import Weather from '@shared/components/cards/Weather.astro'
 import ProfileContact from '@shared/components/cards/ProfileContact.astro'
 import SmallStats from '@shared/components/cards/SmallStats.astro'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 ---
 
 <DefaultLayout title="Card Gradients" pageHeader="Card Gradients" pageMenu="base.cards.gradients" pageLibs={['apexcharts']}>
@@ -74,7 +75,7 @@ import people from '@data/people.json'
           <Weather city="Dubai, AE" temperature="32" color="sun" icon="sun" description="Sunny day" />
         </div>
         <div class="col-12">
-          <ProfileContact person={people[6]} />
+          <ProfileContact person={requireIndex(people, 6)} />
         </div>
         <div class="col-12">
           <SmallStats chartType="line" chartData="11,16,13,20,17,24,19,23,16,20,13,17,11,19" color="primary" id="chart1" class="card-gradient card-gradient-end card-gradient-primary" />
diff --git a/preview/pages/datatables.astro b/preview/pages/datatables.astro
index fb0f03c64..10f3f3379 100644
--- a/preview/pages/datatables.astro
+++ b/preview/pages/datatables.astro
@@ -8,9 +8,16 @@ import Progress from '@ui/Progress.astro'
 import TablerList from '@shared/components/js/TablerList.astro'
 import rollercoasters from '@data/rollercoasters.json'
 
+interface Rollercoaster {
+  name: string
+  city: string
+  type: string
+  score: string
+}
+
 const id = 'default'
 
-const rows = (rollercoasters as Record<string, any>[]).map((rc, i) => {
+const rows = (rollercoasters as Rollercoaster[]).map((rc, i) => {
   const index = i + 1
   const progress = randomNumber(index, 0, 100)
   const date = randomDate(index)
diff --git a/preview/pages/form-elements.astro b/preview/pages/form-elements.astro
index 6fde2806d..3dcb61b6f 100644
--- a/preview/pages/form-elements.astro
+++ b/preview/pages/form-elements.astro
@@ -19,6 +19,7 @@ import CardFooter from '@ui/CardFooter.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import FormGroup from '@ui/FormGroup.astro'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
 const httpMethods = ['GET', 'POST', 'PUT', 'HEAD', 'DELETE', 'PATCH']
 const comparisons = [
@@ -142,7 +143,7 @@ const rows = [
             <CardBody>
               <div class="mb-3">
                 <div class="row">
-                  <div class="col-auto"><Avatar person={people[2]} size="md" /></div>
+                  <div class="col-auto"><Avatar person={requireIndex(people, 2)} size="md" /></div>
                   <div class="col">
                     <FormGroup label="Email-Address">
                       <input class="form-control" placeholder="your-email@domain.com" />
diff --git a/preview/pages/gallery.astro b/preview/pages/gallery.astro
index db21d3cdb..164ffcd9e 100644
--- a/preview/pages/gallery.astro
+++ b/preview/pages/gallery.astro
@@ -4,6 +4,7 @@ import GalleryPhoto from '@shared/components/cards/GalleryPhoto.astro'
 import Pagination from '@ui/Pagination.astro'
 import photos from '@data/photos.json'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
 // Horizontal photos, limit 15; person = people[loop index].
 const galleryPhotos = photos.filter((photo) => photo.horizontal).slice(0, 15)
@@ -14,7 +15,7 @@ const galleryPhotos = photos.filter((photo) => photo.horizontal).slice(0, 15)
     {
       galleryPhotos.map((photo, index) => (
         <div class="col-sm-6 col-lg-4">
-          <GalleryPhoto photo={photo} person={people[index]} index={index + 1} />
+          <GalleryPhoto photo={photo} person={requireIndex(people, index)} index={index + 1} />
         </div>
       ))
     }
diff --git a/preview/pages/illustrations.astro b/preview/pages/illustrations.astro
index 737dc938f..9770507c2 100644
--- a/preview/pages/illustrations.astro
+++ b/preview/pages/illustrations.astro
@@ -9,12 +9,13 @@ import CaptureScript from '@shared/components/CaptureScript.astro'
 import freeIllustrations from '@data/free-illustrations.json'
 import illustrationsList from '@data/illustrations.json'
 import siteData from '@data/site.json'
+import { requireIndex } from '@shared/lib/array'
 
 const autodark = (freeIllustrations as { autodark: Record<string, string> }).autodark
 const autodarkEntries = Object.entries(autodark)
 
 // Last autodark entry (loop overwrites each pass).
-const firstIllustration = autodarkEntries.length ? autodarkEntries[autodarkEntries.length - 1][1] : ''
+const firstIllustration = autodarkEntries.length ? requireIndex(autodarkEntries, autodarkEntries.length - 1)[1] : ''
 
 const withClass = (svg: string) => svg.replaceAll('<svg ', '<svg class="w-100 h-auto" ')
 
@@ -23,7 +24,7 @@ const skinColors = siteData.skinColors as Record<string, { hex: string; class: s
 const colorEntries = Object.values(colors)
 const skinEntries = Object.values(skinColors)
 
-const skinFirst = skinEntries[0]
+const skinFirst = requireIndex(skinEntries, 0)
 const buyLink = (siteData.illustrations as { buy_link: string }).buy_link
 
 const moreCount = illustrationsList.length - 4
diff --git a/preview/pages/photogrid.astro b/preview/pages/photogrid.astro
index d14513858..09061428a 100644
--- a/preview/pages/photogrid.astro
+++ b/preview/pages/photogrid.astro
@@ -1,9 +1,11 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Photo from '@ui/Photo.astro'
-import photos from '@data/photos.json'
+import photosData from '@data/photos.json'
+import { requireIndex } from '@shared/lib/array'
 
 // fslightbox loads as a page library (no custom init script on this page).
+const photoAt = (i: number) => requireIndex(photosData, i)
 ---
 
 <DefaultLayout title="Photogrid" pageHeader="Photogrid" pageMenu="extra.photogrid" pageLibs={['fslightbox']}>
@@ -11,42 +13,42 @@ import photos from '@data/photos.json'
     <div class="col-lg-6">
       <div class="row g-2 g-md-3">
         <div class="col-12">
-          <a data-fslightbox="gallery" href={`./static/photos/${photos[5].file}`}>
-            <Photo photo={photos[5]} class="rounded-3 border" ratio="3x1" />
+          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(5).file}`}>
+            <Photo photo={photoAt(5)} class="rounded-3 border" ratio="3x1" />
           </a>
         </div>
         <div class="col-6">
-          <a data-fslightbox="gallery" href={`./static/photos/${photos[6].file}`}>
-            <Photo photo={photos[6]} class="rounded-3 border" ratio="1x1" />
+          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(6).file}`}>
+            <Photo photo={photoAt(6)} class="rounded-3 border" ratio="1x1" />
           </a>
         </div>
         <div class="col-6">
           <div class="row g-2 g-md-3">
             <div class="col-6">
-              <a data-fslightbox="gallery" href={`./static/photos/${photos[7].file}`}>
-                <Photo photo={photos[7]} class="rounded-3 border" ratio="1x1" />
+              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(7).file}`}>
+                <Photo photo={photoAt(7)} class="rounded-3 border" ratio="1x1" />
               </a>
             </div>
             <div class="col-6">
-              <a data-fslightbox="gallery" href={`./static/photos/${photos[8].file}`}>
-                <Photo photo={photos[8]} class="rounded-3 border" ratio="1x1" />
+              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(8).file}`}>
+                <Photo photo={photoAt(8)} class="rounded-3 border" ratio="1x1" />
               </a>
             </div>
             <div class="col-6">
-              <a data-fslightbox="gallery" href={`./static/photos/${photos[9].file}`}>
-                <Photo photo={photos[9]} class="rounded-3 border" ratio="1x1" />
+              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(9).file}`}>
+                <Photo photo={photoAt(9)} class="rounded-3 border" ratio="1x1" />
               </a>
             </div>
             <div class="col-6">
-              <a data-fslightbox="gallery" href={`./static/photos/${photos[10].file}`}>
-                <Photo photo={photos[10]} class="rounded-3 border" ratio="1x1" />
+              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(10).file}`}>
+                <Photo photo={photoAt(10)} class="rounded-3 border" ratio="1x1" />
               </a>
             </div>
           </div>
         </div>
         <div class="col-12">
-          <a data-fslightbox="gallery" href={`./static/photos/${photos[16].file}`}>
-            <Photo photo={photos[16]} class="rounded-3 border" ratio="4x1" />
+          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(16).file}`}>
+            <Photo photo={photoAt(16)} class="rounded-3 border" ratio="4x1" />
           </a>
         </div>
       </div>
@@ -56,40 +58,40 @@ import photos from '@data/photos.json'
         <div class="col-6">
           <div class="row g-2 g-md-3">
             <div class="col-6">
-              <a data-fslightbox="gallery" href={`./static/photos/${photos[14].file}`}>
-                <Photo photo={photos[14]} class="rounded-3 border" ratio="1x1" />
+              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(14).file}`}>
+                <Photo photo={photoAt(14)} class="rounded-3 border" ratio="1x1" />
               </a>
             </div>
             <div class="col-6">
-              <a data-fslightbox="gallery" href={`./static/photos/${photos[15].file}`}>
-                <Photo photo={photos[15]} class="rounded-3 border" ratio="1x1" />
+              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(15).file}`}>
+                <Photo photo={photoAt(15)} class="rounded-3 border" ratio="1x1" />
               </a>
             </div>
             <div class="col-6">
-              <a data-fslightbox="gallery" href={`./static/photos/${photos[12].file}`}>
-                <Photo photo={photos[12]} class="rounded-3 border" ratio="1x1" />
+              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(12).file}`}>
+                <Photo photo={photoAt(12)} class="rounded-3 border" ratio="1x1" />
               </a>
             </div>
             <div class="col-6">
-              <a data-fslightbox="gallery" href={`./static/photos/${photos[13].file}`}>
-                <Photo photo={photos[13]} class="rounded-3 border" ratio="1x1" />
+              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(13).file}`}>
+                <Photo photo={photoAt(13)} class="rounded-3 border" ratio="1x1" />
               </a>
             </div>
           </div>
         </div>
         <div class="col-6">
-          <a data-fslightbox="gallery" href={`./static/photos/${photos[1].file}`}>
-            <Photo photo={photos[1]} class="rounded-3 border" ratio="1x1" />
+          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(1).file}`}>
+            <Photo photo={photoAt(1)} class="rounded-3 border" ratio="1x1" />
           </a>
         </div>
         <div class="col-12">
-          <a data-fslightbox="gallery" href={`./static/photos/${photos[4].file}`}>
-            <Photo photo={photos[4]} class="rounded-3 border" ratio="4x1" />
+          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(4).file}`}>
+            <Photo photo={photoAt(4)} class="rounded-3 border" ratio="4x1" />
           </a>
         </div>
         <div class="col-12">
-          <a data-fslightbox="gallery" href={`./static/photos/${photos[17].file}`}>
-            <Photo photo={photos[17]} class="rounded-3 border" ratio="3x1" />
+          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(17).file}`}>
+            <Photo photo={photoAt(17)} class="rounded-3 border" ratio="3x1" />
           </a>
         </div>
       </div>
diff --git a/preview/pages/search-results.astro b/preview/pages/search-results.astro
index b833593bb..2a5b68697 100644
--- a/preview/pages/search-results.astro
+++ b/preview/pages/search-results.astro
@@ -4,6 +4,7 @@ import NavAside from '@shared/components/parts/NavAside.astro'
 import GalleryPhoto from '@shared/components/cards/GalleryPhoto.astro'
 import photos from '@data/photos.json'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
 const resultPhotos = photos.filter((photo) => photo.horizontal).slice(0, 18)
 ---
@@ -18,7 +19,7 @@ const resultPhotos = photos.filter((photo) => photo.horizontal).slice(0, 18)
         {
           resultPhotos.map((photo, index) => (
             <div class="col-sm-6 col-lg-4">
-              <GalleryPhoto photo={photo} person={people[index]} index={index + 1} hideLikes />
+              <GalleryPhoto photo={photo} person={requireIndex(people, index)} index={index + 1} hideLikes />
             </div>
           ))
         }
diff --git a/preview/pages/settings.astro b/preview/pages/settings.astro
index a8bdcc244..8b86b3c25 100644
--- a/preview/pages/settings.astro
+++ b/preview/pages/settings.astro
@@ -8,8 +8,9 @@ import Check from '@ui/form/Check.astro'
 import FormGroup from '@ui/FormGroup.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
-const person = people[0]
+const person = requireIndex(people, 0)
 ---
 
 <SettingsLayout active="settings">
diff --git a/preview/pages/sign-in-cover.astro b/preview/pages/sign-in-cover.astro
index b1ebdeddb..7a0b4d715 100644
--- a/preview/pages/sign-in-cover.astro
+++ b/preview/pages/sign-in-cover.astro
@@ -5,6 +5,7 @@ import Logo from '@shared/components/navbar/Logo.astro'
 import SignInForm from '@shared/components/cards/SignInForm.astro'
 import Photo from '@ui/Photo.astro'
 import photos from '@data/photos.json'
+import { requireIndex } from '@shared/lib/array'
 ---
 
 <BaseLayout title="Sign in with cover" bodyClass="d-flex flex-column bg-white">
@@ -25,7 +26,7 @@ import photos from '@data/photos.json'
       </div>
     </div>
     <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
-      <Photo photo={photos[11]} class="bg-cover h-100 min-vh-100" background />
+      <Photo photo={requireIndex(photos, 11)} class="bg-cover h-100 min-vh-100" background />
     </div>
   </div>
 </BaseLayout>
diff --git a/preview/pages/tags.astro b/preview/pages/tags.astro
index 1e360b348..59da87efd 100644
--- a/preview/pages/tags.astro
+++ b/preview/pages/tags.astro
@@ -13,7 +13,7 @@ const tagIcons = ['bold', 'italic', 'underline', 'copy', 'scissors', 'file-plus'
 
 const range = (a: number, b: number) => Array.from({ length: b - a + 1 }, (_, i) => a + i)
 
-const flags9 = flags.slice(0, 9)
+const flags9 = flags.slice(0, 9) as { name: string; flag: string }[]
 const people8 = people.slice(0, 8)
 
 // site.colors yields value objects with .class / .title.
@@ -38,7 +38,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
         <CardBody>
           <CardTitle>Tags with flag</CardTitle>
           <TagsList>
-            {flags9.map((country) => <Tag text={country.name} flag={(country as { code?: string }).code} />)}
+            {flags9.map((country) => <Tag text={country.name} flag={country.flag} />)}
           </TagsList>
         </CardBody>
       </Card>
diff --git a/preview/pages/tasks-list.astro b/preview/pages/tasks-list.astro
index ae969031a..46e86b6b0 100644
--- a/preview/pages/tasks-list.astro
+++ b/preview/pages/tasks-list.astro
@@ -10,6 +10,7 @@ import CaptureModal from '@shared/components/CaptureModal.astro'
 import FormGroup from '@ui/FormGroup.astro'
 import tasks from '@data/tasks.json'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
 interface Person {
   id?: string
@@ -36,7 +37,7 @@ const columns = (tasks as { columns: Column[] }).columns
 const peopleList = people as Person[]
 
 // Assignable people for the add-task modal.
-const selectedPeople = [5, 6, 2, 3].map((id) => peopleList[id - 1])
+const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1))
 ---
 
 <DefaultLayout title="Task List" pageHeader="Task List" pageMenu="extra.tasks.list">
diff --git a/preview/tsconfig.json b/preview/tsconfig.json
index 49d930145..ea7772dfc 100644
--- a/preview/tsconfig.json
+++ b/preview/tsconfig.json
@@ -1,5 +1,5 @@
 {
-	"extends": "astro/tsconfigs/strict",
+	"extends": "astro/tsconfigs/strictest",
 	"include": [
 		".astro/types.d.ts",
 		"**/*"
diff --git a/shared/lib/array.test.ts b/shared/lib/array.test.ts
new file mode 100644
index 000000000..ce368cf0d
--- /dev/null
+++ b/shared/lib/array.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { requireIndex } from './array'
+
+describe('requireIndex', () => {
+  it('returns the entry at the given index', () => {
+    expect(requireIndex(['a', 'b', 'c'], 1)).toBe('b')
+  })
+
+  it('throws when the index is out of bounds', () => {
+    expect(() => requireIndex(['a'], 5)).toThrow('Expected an entry at index 5')
+  })
+})
diff --git a/shared/lib/array.ts b/shared/lib/array.ts
new file mode 100644
index 000000000..73268af1b
--- /dev/null
+++ b/shared/lib/array.ts
@@ -0,0 +1,11 @@
+// Indexes into demo-data arrays (people.json, photos.json, …) that pages trust to have
+// an entry at a given position. Throws instead of silently rendering `undefined` if that
+// assumption is ever violated (e.g. a seed file shrinks).
+
+export function requireIndex<T>(array: readonly T[], index: number): T {
+  const item = array[index]
+  if (item === undefined) {
+    throw new Error(`Expected an entry at index ${index}, got undefined (array has ${array.length} entries)`)
+  }
+  return item
+}
diff --git a/shared/ui/Avatar.astro b/shared/ui/Avatar.astro
index bb78084a2..f732ffa4d 100644
--- a/shared/ui/Avatar.astro
+++ b/shared/ui/Avatar.astro
@@ -11,7 +11,7 @@ interface Person {
 
 interface Props {
   src?: string
-  placeholder?: string
+  placeholder?: string | undefined
   personId?: number
   person?: Person
   link?: boolean
@@ -27,7 +27,7 @@ interface Props {
   statusIcon?: string
   statusLabel?: string
   brand?: string
-  icon?: string
+  icon?: string | undefined
   /** asset URL base — '.' for root-level pages, '..' for pages one level deep (e.g. marketing/) */
   base?: string
   /** remaining attributes (data-bs-toggle for tooltips, aria-*, …) are forwarded to the element */
diff --git a/shared/ui/Flag.astro b/shared/ui/Flag.astro
index 11a4725e9..65e5edebc 100644
--- a/shared/ui/Flag.astro
+++ b/shared/ui/Flag.astro
@@ -3,7 +3,7 @@ interface Props {
   flag?: string
   size?: string
   class?: string
-  label?: string
+  label?: string | undefined
 }
 
 const { flag = 'pl', size, class: className, label } = Astro.props
diff --git a/shared/ui/Payment.astro b/shared/ui/Payment.astro
index 073d2cd4d..d16b68cec 100644
--- a/shared/ui/Payment.astro
+++ b/shared/ui/Payment.astro
@@ -4,7 +4,7 @@ interface Props {
   dark?: boolean
   size?: string
   class?: string
-  label?: string
+  label?: string | undefined
 }
 
 const { payment = 'visa', dark, size, class: className, label } = Astro.props
diff --git a/shared/ui/Tag.astro b/shared/ui/Tag.astro
index 31f05eb1c..85ddb8038 100644
--- a/shared/ui/Tag.astro
+++ b/shared/ui/Tag.astro
@@ -13,7 +13,7 @@ interface Person {
 
 interface Props {
   text?: string
-  flag?: string
+  flag?: string | undefined
   icon?: string
   person?: Person
   personId?: number