From 2f376321367da9f23b74bfb4e807a1ad0d819d92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 9 Sep 2026 22:48:28 +0200
Subject: [PATCH] Drop playground pages from the preview build (#3024)

---
 .changeset/drop-playground-pages.md       |   5 +
 .gitignore                                |   4 +-
 preview/astro.config.mjs                  |  24 +-
 preview/pages/playground-categories.astro | 325 ----------------------
 preview/pages/playground-layout.astro     |  19 --
 preview/pages/playground.astro            | 239 ----------------
 6 files changed, 30 insertions(+), 586 deletions(-)
 create mode 100644 .changeset/drop-playground-pages.md
 delete mode 100644 preview/pages/playground-categories.astro
 delete mode 100644 preview/pages/playground-layout.astro
 delete mode 100644 preview/pages/playground.astro

diff --git a/.changeset/drop-playground-pages.md b/.changeset/drop-playground-pages.md
new file mode 100644
index 000000000..92d772ec5
--- /dev/null
+++ b/.changeset/drop-playground-pages.md
@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Removed the `playground` and `playground-*` scratch pages from the preview build and the repository.
diff --git a/.gitignore b/.gitignore
index 1f9af279b..2b8fc5e77 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,10 +20,10 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
-/preview/pages/playground.html
+/preview/pages/playground.astro
 /preview/pages/screenshot.html
 /preview/pages/screenshot-*.html
-/preview/pages/playground-*.html
+/preview/pages/playground-*.astro
 /preview/pages/features.html
 
 .pnp.loader.mjs
diff --git a/preview/astro.config.mjs b/preview/astro.config.mjs
index cf9422838..428d01c26 100644
--- a/preview/astro.config.mjs
+++ b/preview/astro.config.mjs
@@ -3,7 +3,7 @@ import { defineConfig } from 'astro/config'
 import mdx from '@astrojs/mdx'
 import { satteri } from '@astrojs/markdown-satteri'
 import beautify from 'js-beautify'
-import { globSync, statSync } from 'node:fs'
+import { globSync, rmSync, statSync } from 'node:fs'
 import { availableParallelism } from 'node:os'
 import { fileURLToPath } from 'node:url'
 import { Worker } from 'node:worker_threads'
@@ -71,6 +71,27 @@ function prettifyHtml() {
   }
 }
 
+/**
+ * Playground pages (playground.astro, playground-*.astro) are local scratch
+ * pages — gitignored, and dropped from the build so a local `astro build` or a
+ * stray tracked copy never ships them. Runs before prettify-html (integration
+ * order), so the pages are not formatted just to be deleted.
+ * @returns {import('astro').AstroIntegration}
+ */
+function dropPlaygrounds() {
+  return {
+    name: 'drop-playgrounds',
+    hooks: {
+      'astro:build:done': ({ dir, logger }) => {
+        const outDir = fileURLToPath(dir)
+        const files = globSync([`${outDir}playground.html`, `${outDir}playground-*.html`])
+        for (const file of files) rmSync(file)
+        if (files.length > 0) logger.info(`Dropped ${files.length} playground page(s) from the build`)
+      },
+    },
+  }
+}
+
 // https://astro.build/config
 export default defineConfig({
   // pages live at the package root (./pages) — all components/lib/data are
@@ -142,6 +163,7 @@ export default defineConfig({
       reloadDirs: [path('./public/preview')],
     }),
     mdx(),
+    dropPlaygrounds(),
     prettifyHtml(),
   ],
   markdown: {
diff --git a/preview/pages/playground-categories.astro b/preview/pages/playground-categories.astro
deleted file mode 100644
index b11f4a8ce..000000000
--- a/preview/pages/playground-categories.astro
+++ /dev/null
@@ -1,325 +0,0 @@
----
-import ButtonGroup from '@ui/ButtonGroup.astro'
-import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
-import Icon from '@ui/Icon.astro'
-import Button from '@ui/Button.astro'
-import Badge from '@ui/Badge.astro'
-import Avatar from '@ui/Avatar.astro'
-import AvatarList from '@ui/AvatarList.astro'
-import PeopleAvatarList from '@components/demo/PeopleAvatarList.astro'
-import Pagination from '@ui/Pagination.astro'
-import Card from '@ui/Card.astro'
-import CardBody from '@ui/CardBody.astro'
----
-
-<DefaultLayout title="Categories playground" pageHeader={false}>
-  <!-- Header -->
-  <div class="row align-items-center gy-3 mb-5">
-    <div class="col">
-      <nav aria-label="breadcrumb">
-        <ol class="breadcrumb mb-1">
-          <li class="breadcrumb-item">
-            <a class="text-secondary" href="#">
-              <Icon name="arrow-left" class="icon-inline me-1" />
-              Back
-            </a>
-          </li>
-        </ol>
-      </nav>
-      <h1 class="fs-3 mb-0">Categories</h1>
-    </div>
-    <div class="col-12 col-lg-auto order-last order-lg-0">
-      <div class="row align-items-center gx-3">
-        <div class="col col-lg-auto">
-          <div class="input-group input-group-flat rounded-pill">
-            <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="playground-categories-search" />
-            <span class="input-group-text" id="playground-categories-search">
-              <Icon name="search" />
-            </span>
-          </div>
-        </div>
-        <div class="col-auto">
-          <div class="dropdown">
-            <Button element="button" type="button" icon="filter" iconOnly text="Open filters" dropdown />
-            <div class="dropdown-menu demo-dropdown-menu-wide p-6">
-              <h3 class="mb-4">Filter</h3>
-              <form id="playgroundCategoriesFilterForm">
-                <div class="row align-items-center mb-3">
-                  <div class="col-3">
-                    <label class="form-label mb-0" for="playgroundFilterUser">User</label>
-                  </div>
-                  <div class="col-9">
-                    <select class="form-select" id="playgroundFilterUser" aria-label="User">
-                      <option value="Emily Thompson" selected>Emily Thompson</option>
-                      <option value="Michael Johnson">Michael Johnson</option>
-                      <option value="Robert Garcia">Robert Garcia</option>
-                      <option value="Jessica Miller">Jessica Miller</option>
-                    </select>
-                  </div>
-                </div>
-                <div class="row align-items-center mb-3">
-                  <div class="col-3">
-                    <label class="form-label mb-0" for="playgroundFilterCompany">Company</label>
-                  </div>
-                  <div class="col-9">
-                    <select class="form-select" id="playgroundFilterCompany" aria-label="Company">
-                      <option value="TechPinnacle Solutions" selected>TechPinnacle Solutions</option>
-                      <option value="Quantum Dynamics">Quantum Dynamics</option>
-                      <option value="Pinnacle Technologies">Pinnacle Technologies</option>
-                      <option value="Apex Innovations">Apex Innovations</option>
-                    </select>
-                  </div>
-                </div>
-                <div class="row align-items-center">
-                  <div class="col-3">
-                    <label class="form-label mb-0" for="playgroundFilterLocation">Location</label>
-                  </div>
-                  <div class="col-9">
-                    <select class="form-select" id="playgroundFilterLocation" aria-label="Location">
-                      <option value="San Francisco, CA" selected>San Francisco, CA</option>
-                      <option value="Austin, TX">Austin, TX</option>
-                      <option value="Miami, FL">Miami, FL</option>
-                      <option value="Seattle, WA">Seattle, WA</option>
-                    </select>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-        <div class="col-auto ms-n2">
-          <div class="dropdown">
-            <Button element="button" type="button" icon="sort-ascending-letters" iconOnly text="Open sort options" dropdown />
-            <div class="dropdown-menu demo-dropdown-menu-wide p-6">
-              <h3 class="mb-4">Sort</h3>
-              <form id="playgroundCategoriesSortForm">
-                <div class="row gx-3">
-                  <div class="col">
-                    <select class="form-select" id="playgroundSortField" aria-label="Sort by">
-                      <option value="user" selected>User</option>
-                      <option value="company">Company</option>
-                      <option value="phone">Phone</option>
-                      <option value="location">Location</option>
-                    </select>
-                  </div>
-                  <div class="col-auto">
-                    <ButtonGroup aria-label="Sort direction">
-                      <input type="radio" class="btn-check" name="playgroundSortDir" id="playgroundSortAsc" autocomplete="off" checked />
-                      <label class="btn btn-light px-0 btn-icon" for="playgroundSortAsc" aria-label="Ascending"><Icon name="arrow-up" /></label>
-                      <input type="radio" class="btn-check" name="playgroundSortDir" id="playgroundSortDesc" autocomplete="off" />
-                      <label class="btn btn-light px-0 btn-icon" for="playgroundSortDesc" aria-label="Descending"><Icon name="arrow-down" /></label>
-                    </ButtonGroup>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-auto">
-      <button class="btn btn-primary" type="button">New category</button>
-    </div>
-  </div>
-
-  <hr class="my-7" />
-
-  <div class="row row-cards">
-    <div class="col-12 col-lg-6">
-      <Card>
-        <CardBody>
-          <div class="row align-items-center mb-3">
-            <div class="col">
-              <Badge text="Featured" color="primary" />
-            </div>
-            <div class="col-auto">
-              <Icon name="confetti" class="icon-lg text-primary opacity-50" />
-            </div>
-          </div>
-          <h3 class="fs-5 mb-1 text-truncate"><a class="text-body" href="./empty.html">Announcements</a></h3>
-          <p class="text-secondary text-truncate">For company updates, system changes, or important notices that everyone should see.</p>
-          <p class="small text-secondary mb-0">Last post 2 days ago</p>
-          <hr />
-          <div class="d-flex align-items-center justify-content-between">
-            <AvatarList stacked={true}>
-              <Avatar src="static/avatars/001f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Emily Thompson" />
-              <Avatar src="static/avatars/002m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Michael Johnson" />
-              <Avatar src="static/avatars/003m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Robert Garcia" />
-            </AvatarList>
-            <div class="text-end">
-              <Badge text="20 posts" class="bg-light text-body" />
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12 col-lg-6">
-      <Card>
-        <CardBody>
-          <div class="row align-items-center mb-3">
-            <div class="col">
-              <Badge text="Featured" color="success" />
-            </div>
-            <div class="col-auto">
-              <Icon name="slideshow" class="icon-lg text-success opacity-50" />
-            </div>
-          </div>
-          <h3 class="fs-5 mb-1 text-truncate"><a class="text-body" href="./empty.html">Marketing campaigns</a></h3>
-          <p class="text-secondary text-truncate">Posts related to new campaigns, marketing strategies, and promotions.</p>
-          <p class="small text-secondary mb-0">Last post 1 day ago</p>
-          <hr />
-          <div class="d-flex align-items-center justify-content-between">
-            <PeopleAvatarList stacked={true} size="xs" offset={3} limit={3} />
-            <div class="text-end">
-              <Badge text="62 posts" class="bg-light text-body" />
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12 col-md-6 col-lg-4">
-      <Card class="position-relative overflow-hidden">
-        <Icon name="chart-pie" class="icon-lg text-danger opacity-25 position-absolute top-0 end-0 m-3" />
-        <CardBody>
-          <small class="text-secondary d-block mb-3">12 followers</small>
-          <h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Reports &amp; analytics</a></h3>
-          <p class="text-secondary text-truncate">Data-driven insights and performance reports across all departments.</p>
-          <p class="small text-secondary mb-0">Last post 5 days ago</p>
-          <hr />
-          <div class="d-flex align-items-center justify-content-between">
-            <AvatarList stacked={true}>
-              <Avatar src="static/avatars/001f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Emily Thompson" />
-              <Avatar src="static/avatars/003m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Robert Garcia" />
-            </AvatarList>
-            <div class="text-end">
-              <Badge text="28 posts" class="bg-light text-body" />
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12 col-md-6 col-lg-4">
-      <Card class="position-relative overflow-hidden">
-        <Icon name="id-badge" class="icon-lg text-warning opacity-25 position-absolute top-0 end-0 m-3" />
-        <CardBody>
-          <small class="text-secondary d-block mb-3">16 followers</small>
-          <h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Events &amp; webinars</a></h3>
-          <p class="text-secondary text-truncate">Upcoming events, webinar recordings, and community meetups.</p>
-          <p class="small text-secondary mb-0">Last post 3 days ago</p>
-          <hr />
-          <div class="d-flex align-items-center justify-content-between">
-            <AvatarList stacked={true}>
-              <Avatar src="static/avatars/005f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Olivia Davis" />
-              <Avatar src="static/avatars/002m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Michael Johnson" />
-            </AvatarList>
-            <div class="text-end">
-              <Badge text="34 posts" class="bg-light text-body" />
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12 col-md-6 col-lg-4">
-      <Card class="position-relative overflow-hidden">
-        <Icon name="user" class="icon-lg text-warning opacity-25 position-absolute top-0 end-0 m-3" />
-        <CardBody>
-          <small class="text-secondary d-block mb-3">9 followers</small>
-          <h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Client success stories</a></h3>
-          <p class="text-secondary text-truncate">Case studies and testimonials from our most satisfied customers.</p>
-          <p class="small text-secondary mb-0">Last post 1 week ago</p>
-          <hr />
-          <div class="d-flex align-items-center justify-content-between">
-            <AvatarList stacked={true}>
-              <Avatar src="static/avatars/006m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="James Wilson" />
-              <Avatar src="static/avatars/004f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Jessica Miller" />
-            </AvatarList>
-            <div class="text-end">
-              <Badge text="64 posts" class="bg-light text-body" />
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12 col-md-6 col-lg-4">
-      <Card class="position-relative overflow-hidden">
-        <Icon name="message" class="icon-lg text-primary opacity-25 position-absolute top-0 end-0 m-3" />
-        <CardBody>
-          <small class="text-secondary d-block mb-3">10 followers</small>
-          <h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Team highlights</a></h3>
-          <p class="text-secondary text-truncate">Spotlights, shoutouts, and stories from people across the team.</p>
-          <p class="small text-secondary mb-0">Last post 4 days ago</p>
-          <hr />
-          <div class="d-flex align-items-center justify-content-between">
-            <AvatarList stacked={true}>
-              <Avatar src="static/avatars/002m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Michael Johnson" />
-              <Avatar src="static/avatars/001f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Emily Thompson" />
-            </AvatarList>
-            <div class="text-end">
-              <Badge text="42 posts" class="bg-light text-body" />
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12 col-md-6 col-lg-4">
-      <Card class="position-relative overflow-hidden">
-        <Icon name="building-bank" class="icon-lg text-danger opacity-25 position-absolute top-0 end-0 m-3" />
-        <CardBody>
-          <small class="text-secondary d-block mb-3">26 followers</small>
-          <h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Training &amp; resources</a></h3>
-          <p class="text-secondary text-truncate">Access to learning materials, tutorials, or resources for users and staff.</p>
-          <p class="small text-secondary mb-0">Last post 6 days ago</p>
-          <hr />
-          <div class="d-flex align-items-center justify-content-between">
-            <AvatarList stacked={true}>
-              <Avatar src="static/avatars/003m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Robert Garcia" />
-              <Avatar src="static/avatars/005f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Olivia Davis" />
-            </AvatarList>
-            <div class="text-end">
-              <Badge text="38 posts" class="bg-light text-body" />
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12 col-md-6 col-lg-4">
-      <Card class="position-relative overflow-hidden">
-        <Icon name="brand-apple" class="icon-lg text-primary opacity-25 position-absolute top-0 end-0 m-3" />
-        <CardBody>
-          <small class="text-secondary d-block mb-3">6 followers</small>
-          <h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Industry news</a></h3>
-          <p class="text-secondary text-truncate">Trends, news, and commentary from around the industry landscape.</p>
-          <p class="small text-secondary mb-0">Last post 2 weeks ago</p>
-          <hr />
-          <div class="d-flex align-items-center justify-content-between">
-            <AvatarList stacked={true}>
-              <Avatar src="static/avatars/006m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="James Wilson" />
-              <Avatar src="static/avatars/004f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Jessica Miller" />
-            </AvatarList>
-            <div class="text-end">
-              <Badge text="59 posts" class="bg-light text-body" />
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-  </div>
-
-  <div class="row align-items-center mt-7">
-    <div class="col">
-      <p class="text-secondary mb-0">1 – 8 (8 total)</p>
-    </div>
-    <div class="col-auto">
-      <nav aria-label="Page navigation">
-        <Pagination count={3} offset={3} activeItem={1} class="mb-0" />
-      </nav>
-    </div>
-  </div>
-</DefaultLayout>
diff --git a/preview/pages/playground-layout.astro b/preview/pages/playground-layout.astro
deleted file mode 100644
index c6aab86b4..000000000
--- a/preview/pages/playground-layout.astro
+++ /dev/null
@@ -1,19 +0,0 @@
----
-import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
-import Card from '@ui/Card.astro'
-import CardBody from '@ui/CardBody.astro'
-import CardTitle from '@ui/CardTitle.astro'
----
-
-<DefaultLayout title="Layout playground" pretitle="Playground" navbarPosition="vertical">
-  <div class="row row-cards">
-    <div class="col-12">
-      <Card>
-        <CardBody>
-          <CardTitle>Sandbox</CardTitle>
-          <p class="text-secondary mb-0">Edit this page to try layout options, components, and styles.</p>
-        </CardBody>
-      </Card>
-    </div>
-  </div>
-</DefaultLayout>
diff --git a/preview/pages/playground.astro b/preview/pages/playground.astro
deleted file mode 100644
index 377e1d13d..000000000
--- a/preview/pages/playground.astro
+++ /dev/null
@@ -1,239 +0,0 @@
----
-import Subheader from '@ui/Subheader.astro'
-import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
-import ButtonList from '@ui/ButtonList.astro'
-import Card from '@ui/Card.astro'
-import CardHeader from '@ui/CardHeader.astro'
-import CardBody from '@ui/CardBody.astro'
-import ProgressSteps from '@ui/ProgressSteps.astro'
-import Datepicker from '@ui/Datepicker.astro'
-import FormGroup from '@ui/FormGroup.astro'
-import Trending from '@ui/Trending.astro'
-import CardTitle from '@ui/CardTitle.astro'
----
-
-<DefaultLayout title="Playground" pageHeader="Project settings" pageLibs={['litepicker']}>
-  <div class="row row-cards row-deck">
-    <div class="col-12">
-      <Card>
-        <CardBody>
-          <div class="d-flex flex-wrap gap-4">
-            <div class="bg-pattern-diagonal w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-diagonal-2 w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-dots w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-lines w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-rectangles w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-lines-vertical w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-grid w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-grid-diagonal w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-blueprint w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-cross-dots w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-diagonal-stripes w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-diagonal-stripes-2 w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-zigzag w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-vertical-stripes w-10 h-10 border rounded"></div>
-            <div class="bg-pattern-horizontal-stripes w-10 h-10 border rounded"></div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-    <div class="col-6">
-      <Card>
-        <CardBody>
-          <ButtonList>
-            <a href="" class="btn">Button</a>
-            <a href="" class="btn demo-btn-border-translucent">Button</a>
-            <a href="" class="btn demo-btn-border-dark">Button</a>
-            <a href="" class="btn demo-btn-border-dark-translucent">Button</a>
-            <a href="" class="btn btn-primary">Button</a>
-          </ButtonList>
-          <ButtonList class="mt-4">
-            <a href="" class="btn">Button</a>
-            <a href="" class="btn">Button</a>
-            <a href="" class="btn">Button</a>
-            <a href="" class="btn">Button</a>
-            <a href="" class="btn btn-primary">Button</a>
-          </ButtonList>
-        </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-3">
-      <Card>
-        <CardBody> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-6">
-      <Card>
-        <CardBody> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12">
-      <Card>
-        <CardBody> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur earum perferendis expedita suscipit quasi maiores quas sint harum dolor! Dolorem cumque autem error ea fuga. Ea excepturi temporibus officiis perspiciatis. </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12">
-      <Card>
-        <CardBody>
-          <div class="space-y">
-            <ProgressSteps labels={['Step A', 'Step B', 'Step C']} active={2} />
-            <ProgressSteps count={9} active={4} />
-            <ProgressSteps count={9} active={9} color="success" />
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-
-    <div class="col-12">
-      <Card>
-        <CardHeader title="Datepicker examples" />
-        <CardBody>
-          <div class="row g-4">
-            <div class="col-md-6">
-              <h4 class="mb-3">Basic datepicker</h4>
-              <FormGroup label="Default datepicker" for="datepicker-playground-default">
-                <Datepicker id="playground-default" value="2024-01-15" />
-              </FormGroup>
-              <FormGroup label="With icon" for="datepicker-playground-icon">
-                <Datepicker id="playground-icon" layout="icon" value="2024-01-15" />
-              </FormGroup>
-              <FormGroup label="Icon prepend" for="datepicker-playground-icon-prepend">
-                <Datepicker id="playground-icon-prepend" layout="icon-prepend" value="2024-01-15" />
-              </FormGroup>
-            </div>
-            <div class="col-md-6">
-              <h4 class="mb-3">Datepicker options</h4>
-              <FormGroup label="With date range (min/max)" for="datepicker-playground-range">
-                <Datepicker id="playground-range" value="2024-06-15" />
-              </FormGroup>
-              <FormGroup label="Multiple selection" for="datepicker-playground-multiple">
-                <Datepicker id="playground-multiple" value="2024-01-15" />
-              </FormGroup>
-              <FormGroup label="Date range selection" for="datepicker-playground-range-selection">
-                <Datepicker id="playground-range-selection" value="2024-01-15" />
-              </FormGroup>
-            </div>
-            <div class="col-md-6">
-              <h4 class="mb-3">Placement options</h4>
-              <FormGroup label="Left placement" for="datepicker-playground-placement-left">
-                <Datepicker id="playground-placement-left" value="2024-01-15" />
-              </FormGroup>
-              <FormGroup label="Center placement" for="datepicker-playground-placement-center">
-                <Datepicker id="playground-placement-center" value="2024-01-15" />
-              </FormGroup>
-              <FormGroup label="Right placement" for="datepicker-playground-placement-right">
-                <Datepicker id="playground-placement-right" value="2024-01-15" />
-              </FormGroup>
-            </div>
-            <div class="col-md-6">
-              <h4 class="mb-3">Advanced options</h4>
-              <FormGroup label="Multiple months" for="datepicker-playground-multiple-months">
-                <Datepicker id="playground-multiple-months" value="2024-01-15" />
-              </FormGroup>
-              <FormGroup label="Custom first weekday (Monday)" for="datepicker-playground-weekday">
-                <Datepicker id="playground-weekday" value="2024-01-15" />
-              </FormGroup>
-              <FormGroup label="With pre-selected dates" for="datepicker-playground-preselected">
-                <Datepicker id="playground-preselected" value="2020-06-20" />
-              </FormGroup>
-            </div>
-            <div class="col-12">
-              <h4 class="mb-3">Inline datepicker</h4>
-              {/* inline mode renders a calendar div with no backing text input — nothing to point `for` at */}
-              <FormGroup label="Inline calendar" associate={false}>
-                <Datepicker id="playground-inline" inline value="2024-01-15" />
-              </FormGroup>
-              <FormGroup label="Inline with multiple selection" associate={false}>
-                <Datepicker id="playground-inline-multiple" inline value="2024-01-15" />
-              </FormGroup>
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-    <div class="col-8">
-      <Card>
-        <CardBody>
-          <CardTitle class="mb-4">Cohort statistics</CardTitle>
-          <dl class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
-            <div class="col">
-              <Subheader as="dt">Total users</Subheader>
-              <dd class="mt-1 d-flex align-items-baseline">
-                <span class="h2 mb-0">25,784</span>
-                <Trending value={23} class="ms-2" />
-              </dd>
-            </div>
-
-            <div class="col">
-              <Subheader as="dt">Average CSAT Score</Subheader>
-              <dd class="mt-1 d-flex align-items-baseline">
-                <span class="h2 mb-0">86.9</span>
-                <Trending value={-4} class="ms-2" />
-              </dd>
-            </div>
-
-            <div class="col">
-              <Subheader as="dt">Average response time</Subheader>
-              <dd class="mt-1 d-flex align-items-baseline">
-                <span class="h2 mb-0">7.2m</span>
-                <Trending value={8} class="ms-2" />
-              </dd>
-            </div>
-
-            <div class="col">
-              <Subheader as="dt">Total tickets</Subheader>
-              <dd class="mt-1 d-flex align-items-baseline">
-                <span class="h2 mb-0">51,960</span>
-                <Trending value={-7} class="ms-2" />
-              </dd>
-            </div>
-
-            <div class="col">
-              <Subheader as="dt">Resolution rate</Subheader>
-              <dd class="mt-1 d-flex align-items-baseline">
-                <span class="h2 mb-0">90.0%</span>
-                <Trending value={0} class="ms-2" />
-              </dd>
-            </div>
-
-            <div class="col">
-              <Subheader as="dt">Total cohorts</Subheader>
-              <dd class="mt-1 d-flex align-items-baseline">
-                <span class="h2 mb-0">10</span>
-                <Trending value={15} class="ms-2" />
-              </dd>
-            </div>
-
-            <div class="col">
-              <Subheader as="dt">Avg. handling time</Subheader>
-              <dd class="mt-1 d-flex align-items-baseline">
-                <span class="h2 mb-0">14.1m</span>
-                <Trending value={-12} class="ms-2" />
-              </dd>
-            </div>
-
-            <div class="col">
-              <Subheader as="dt">First contact resolution</Subheader>
-              <dd class="mt-1 d-flex align-items-baseline">
-                <span class="h2 mb-0">80.0%</span>
-                <Trending value={6} class="ms-2" />
-              </dd>
-            </div>
-
-            <div class="col">
-              <Subheader as="dt">Retention rate</Subheader>
-              <dd class="mt-1 d-flex align-items-baseline">
-                <span class="h2 mb-0">28.0%</span>
-                <Trending value={-3} class="ms-2" />
-              </dd>
-            </div>
-          </dl>
-        </CardBody>
-      </Card>
-    </div>
-  </div>
-</DefaultLayout>