chore: mark banner package as private

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/dry-rice-march.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix overflow of `label` in a `floating-input`

.changeset/famous-items-tap.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Enable `scrollSpy` in `countup` module

.changeset/grumpy-flowers-act.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Add segmented control component

.changeset/large-walls-wave.md

@@ -1,5 +0,0 @@
----
-"preview": patch
----
-
-Fix timeline card layout and profile header styles

.changeset/metal-carrots-battle.md

@@ -1,4 +0,0 @@
----
----
-
-Refactor bundlewatch workflow to use Turbo 

.changeset/nice-jeans-tie.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix size of `apexcharts` tooltip marker

.changeset/red-pens-punch.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix negative margins in `.navbar-bordered` variant

.changeset/short-rocks-battle.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.

.changeset/short-wombats-rhyme.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Use the full license agreement for illustrations in docs

.changeset/silly-lobsters-move.md

@@ -1,5 +0,0 @@
----
-
----
-
-Improve documentation for buttons

.changeset/smart-fans-pump.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix vertical alignment in single page and error layouts

.changeset/stale-pianos-crash.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": "minor"
----
-
-Add documentation for segmented control component

.changeset/ten-houses-punch.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix `.avatar-upload` double borders 

.changeset/thin-clouds-glow.md

@@ -1,4 +0,0 @@
----
----
-
-Update `robots.txt` handling and improve sitemap URL generation

.github/workflows/argos.yml

@@ -0,0 +1,66 @@
+name: Argos Tests
+
+on:
+  push: 
+    branches:
+      - dev
+  pull_request: 
+    paths:
+      - 'preview/**/*.js'
+      - 'preview/**/*.html'
+      - 'preview/**/*.scss'
+      - 'core/**/*.js'
+      - 'core/**/*.scss'
+
+env:
+  NODE: 20
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.draft == false
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with: 
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "${{ env.NODE }}"
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v4
+
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@playwright/test'])")" >> $GITHUB_ENV
+
+      - name: Cache playwright binaries
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install pnpm dependencies
+        run: pnpm install
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      - name: Run Playwright tests
+        run: pnpm run playwright

.github/workflows/bundlewatch.yml

@@ -44,9 +44,6 @@ jobs:
       - name: Install pnpm dependencies
         run: pnpm install --no-frozen-lockfile
 
-      - name: Build
-        run: pnpm run build
-
       - name: Run bundlewatch
         run: pnpm run bundlewatch
         env:

CHANGELOG.md

@@ -16,8 +16,7 @@
 - be14607: Add new color picker component using `coloris.js` library
 - d046570: Update Tabler Icons to version 2.23 with 18 new icons added
 - 5488c50: New page with payment providers: `payment-providers.html`
-- 5488c50: Add support for new payment providers: 2c2p, Adyen, Affirm, Alipay Plus, Allegro Pay, Amazon Pay, Apple Pay, Autopay, Binance USD, Bkash, Cash App, Chime, EasyPaisa, Ethereum, Google Pay, HubSpot, iDeal, Litecoin, Mercado Pago,
-  MetaMask, MoneyGram, OpenSea, Payconiq, Payka, Payline, PayPo, Paysafe, Poli, Revolut Pay, Samsung Pay, Shop Pay, Solana, Spingo, Stax, Tether, True USD, Venmo, WeChat Pay, Wise, Zelle
+- 5488c50: Add support for new payment providers: 2c2p, Adyen, Affirm, Alipay Plus, Allegro Pay, Amazon Pay, Apple Pay, Autopay, Binance USD, Bkash, Cash App, Chime, EasyPaisa, Ethereum, Google Pay, HubSpot, iDeal, Litecoin, Mercado Pago, MetaMask, MoneyGram, OpenSea, Payconiq, Payka, Payline, PayPo, Paysafe, Poli, Revolut Pay, Samsung Pay, Shop Pay, Solana, Spingo, Stax, Tether, True USD, Venmo, WeChat Pay, Wise, Zelle
 
 ### Patch Changes
 

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
+<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/refs/heads/dev/preview/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
 A premium and open source dashboard template with a responsive and high-quality UI.
 </p>
 
@@ -18,9 +18,9 @@ A premium and open source dashboard template with a responsive and high-quality
 **If you want to support our project and help me grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)**
 
 <p align="center">
-  <a href="https://github.com/sponsors/codecalm">
-    <img src="https://cdn.jsdelivr.net/gh/tabler/sponsors@latest/sponsors.svg" alt="Tabler sponsors">
-  </a>
+	<a href="https://github.com/sponsors/codecalm">
+		<img src="https://cdn.jsdelivr.net/gh/tabler/sponsors@latest/sponsors.svg" alt="Tabler sponsors">
+	</a>
 </p>
 
 ## Testing
@@ -28,21 +28,24 @@ A premium and open source dashboard template with a responsive and high-quality
 <p align="center">Browser testing via:</p>
 
 <p align="center">
-  <a href="https://www.lambdatest.com/" target="_blank">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/14dd2a0a-bafe-436e-a6cb-29636278c781">
-      <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/d3dede5a-d702-47c3-bb66-4d887948ed83">
-      <img src="https://github.com/user-attachments/assets/d3dede5a-d702-47c3-bb66-4d887948ed83" alt="Tabler Icons preview" width="296">
-    </picture>
-  </a>
+	<a href="https://www.lambdatest.com/" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/14dd2a0a-bafe-436e-a6cb-29636278c781">
+			<source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/d3dede5a-d702-47c3-bb66-4d887948ed83">
+			<img src="https://github.com/user-attachments/assets/d3dede5a-d702-47c3-bb66-4d887948ed83" alt="Tabler Icons preview" width="296">
+		</picture>
+	</a>
 </p>
 
 ## 🔎 Preview
 
 Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! <a href="https://preview.tabler.io">Show me a demo</a>
 
-<a href="https://preview.tabler.io" target="_blank"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png" alt="Tabler preview"></a>
-
+<p align="center">
+	<a href="https://preview.tabler.io" target="_blank">
+			<img src="https://raw.githubusercontent.com/tabler/tabler/dev/preview/static/tabler-preview.png" alt="Tabler Preview">
+	</a>
+</p>
 
 ## 🚀 Features
 
@@ -67,8 +70,11 @@ To run the documentation site locally, follow instructions in the [Documentation
 
 ## 💕 Sponsor Tabler
 
-<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
-
+<p align="center">
+	<a href="https://github.com/sponsors/codecalm" target="_blank">
+			<img src="https://raw.githubusercontent.com/tabler/tabler/dev/preview/static/sponsor-banner-homepage.svg" alt="Sponsor Banner">
+	</a>
+</p>
 
 ### Sponsors
 
@@ -94,12 +100,15 @@ To use our build system and run our documentation locally, you'll need a copy of
 
 **OSX users**:
 
-```pnpm install```
+```sh
+pnpm install
+```
 
 and then 
 
-```npm run start```
-
+```sh
+npm run start
+```
 
 **Windows users**:
 
@@ -216,4 +225,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

build/reformat-mdx.mjs

@@ -6,33 +6,58 @@ import { readFileSync, writeFileSync } from 'node:fs';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url'
 import { sync } from 'glob';
-import beautify from 'js-beautify';
+import * as prettier from "prettier";
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
 const docs = sync(join(__dirname, '..', 'docs', '**', '*.mdx'))
 
-docs.forEach((file, i) => {
+async function formatHTML(htmlString) {
+	try {
+		const formattedHtml = await prettier.format(htmlString, {
+			parser: "html",
+			printWidth: 100,
+		});
+		return formattedHtml;
+	} catch (error) {
+		console.error("Error formatting HTML:", error);
+		return htmlString; // Return original in case of an error
+	}
+}
+
+async function replaceAsync(str, regex, asyncFn) {
+	const matches = [...str.matchAll(regex)];
+
+	const replacements = await Promise.all(
+		matches.map(async (match) => asyncFn(...match))
+	);
+
+	let result = str;
+	matches.forEach((match, i) => {
+		result = result.replace(match[0], replacements[i]);
+	});
+
+	return result;
+}
+
+for (const file of docs) {
 	const oldContent = readFileSync(file, 'utf8')
 
 	// get codeblocks from markdown
-	const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
+	const content = await replaceAsync(oldContent, /(```([a-z0-9]+).*?\n)(.*?)(```)/gs, async (m, m1, m2, m3, m4) => {
 		if (m2 === 'html') {
-			// m3 = beautify.default.html(m3, {
-			// 	"indent_size": 2,
-			// 	"indent_char": " ",
-			// }).trim();
+			m3 = await formatHTML(m3);
 
 			// remove empty lines
 			m3 = m3.replace(/^\s*[\r\n]/gm, '');
 
-			return m1 + m3 + "\n" + m4;
+			return m1 + m3.trim() + "\n" + m4;
 		}
-		return m
+		return m.trim();
 	})
 
 	if (content !== oldContent) {
 		writeFileSync(file, content, 'utf8')
 		console.log(`Reformatted ${file}`)
 	}
-})
+}

core/CHANGELOG.md

@@ -0,0 +1,33 @@
+# @tabler/core
+
+## 1.1.0
+
+### Minor Changes
+
+- a2640e2: Add Playwright configuration and visual regression tests
+- d3ae77c: Enable `scrollSpy` in `countup` module
+- bd3d959: Refactor SCSS files to replace divide function with calc
+- cb278c7: Add Segmented Control component
+- b47725d: Add new text features page with mentions: user, color and app.
+- b4b4d1a: Add Scroll Spy page
+- 9cd5327: Update border radius variables for consistency across components
+- 4376968: Add Signature Pad feature and signatures page
+- f95f250: Update color utility classes and replace background colors in pricing table
+- eaa7f81: Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.
+- ea14462: Add documentation for segmented control component
+- 1edaff4: Add new payment provider (Troy)
+- edbaa1e: Add selectable table functionality with active background color
+- 378fba8: Refactor badge styles, remove Bootstrap styles
+- f3c409f: Refactor alert component styles and markup, remove Bootstrap styles
+- c240b5a: Refactor accordion component styles and markup, remove Bootstrap styles
+
+### Patch Changes
+
+- 687267d: Fix overflow of `label` in a `floating-input`
+- 06b1dec: Fix size of `apexcharts` tooltip marker
+- afd0700: Fix apexcharts heatmap example in docs
+- 78383ef: Fix negative margins in `.navbar-bordered` variant
+- 11f4487: Use the full license agreement for illustrations in docs
+- b28ce9f: Fix vertical alignment in single page and error layouts
+- 24b944c: Fix `.avatar-upload` double borders
+- ca4ba14: Fixes navbar styles with new hover effects and color variables

core/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
     "dev": "pnpm run watch",
     "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy",
-    "clean": "rimraf dist/* demo",
+    "clean": "shx rm -rf dist demo",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
     "css-compile": "sass scss/:dist/css/ --no-source-map --load-path=node_modules",
     "css-banner": "node build/add-banner.mjs",
-    "css-prefix": "postcss --config build/postcss.config.mjs --replace 'dist/css/*.css' '!dist/css/*.rtl*.css' '!dist/css/*.min.css'",
-    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir 'dist/css' --ext '.rtl.css' 'dist/css/*.css' '!dist/css/*.min.css' '!dist/css/*.rtl.css'",
+    "css-prefix": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
-    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix '.min' 'dist/css/*.css' '!dist/css/*.min.css' '!dist/css/*rtl*.css'",
-    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix '.min' 'dist/css/*rtl.css' '!dist/css/*.min.css'",
+    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
+    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
     "js": "pnpm run js-compile && pnpm run js-minify",
     "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm",
     "js-compile-standalone": "rollup --config build/rollup.config.mjs --sourcemap",
     "js-compile-standalone-esm": "rollup --environment ESM:true --config build/rollup.config.mjs --sourcemap",
     "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm",
-    "js-minify-standalone": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map' --output dist/js/tabler.min.js dist/js/tabler.js",
-    "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map' --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
+    "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
+    "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
     "copy": "pnpm run copy-img",
-    "copy-img": "cp -r img dist/img",
-    "watch": "pnpm run watch-css & pnpm run watch-js",
-    "watch-css": "nodemon --watch scss/ --ext scss --exec 'pnpm run css-compile && pnpm run css-prefix'",
-    "watch-js": "nodemon --watch js/ --ext js --exec 'pnpm run js-compile'",
+    "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
+    "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
+    "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
+    "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
     "bundlewatch": "bundlewatch",
     "format:check": "prettier --check src/**/*.{js,scss} --cache",
     "format:write": "prettier --write src/**/*.{js,scss} --cache"
@@ -89,7 +89,7 @@
       },
       {
         "path": "./dist/css/tabler-flags.css",
-        "maxSize": "2 kB"
+        "maxSize": "2.5 kB"
       },
       {
         "path": "./dist/css/tabler-flags.min.css",
@@ -97,7 +97,7 @@
       },
       {
         "path": "./dist/css/tabler-payments.css",
-        "maxSize": "2 kB"
+        "maxSize": "2.2 kB"
       },
       {
         "path": "./dist/css/tabler-payments.min.css",

core/scss/_bootstrap-components.scss

@@ -14,11 +14,9 @@
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/navbar";
 @import "bootstrap/scss/card";
-@import "bootstrap/scss/accordion";
+// @import "bootstrap/scss/accordion";
 @import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";
-@import "bootstrap/scss/badge";
-@import "bootstrap/scss/alert";
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/close";

core/scss/_config.scss

@@ -1,9 +1,9 @@
 @import "bootstrap/scss/functions";
 
+@import "mixins";
 @import "variables";
 @import "variables-dark";
 @import "utilities";
-@import "mixins";
 
 @import "bootstrap-config";
 @import "bootstrap-override";

core/scss/_core.scss

@@ -63,6 +63,7 @@
 @import "ui/charts";
 @import "ui/offcanvas";
 @import "ui/chat";
+@import "ui/signature";
 
 @import "utils/background";
 @import "utils/colors";

core/scss/_utilities.scss

@@ -43,8 +43,9 @@ $utilities: (
       v-text: vertical-text,
       grab: grab,
       grabbing: grabbing,
+      crosshair: crosshair,
     ),
-  ),
+  ), 
   "border": (
     property: border,
     values: $border-values,
@@ -93,4 +94,13 @@ $utilities: (
     responsive: true,
     values: 2 3 4,
   ),
+  "bg-pattern": (
+    property: background,
+    class: bg-pattern,
+    values: (
+      transparent: #{url-svg(
+        '<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>'
+      )} repeat center/16px 16px,
+    )
+  )
 ) !default;

core/scss/_variables.scss

@@ -97,7 +97,9 @@ $h5-line-height: 1rem !default;
 $h6-font-size: 0.625rem !default;
 $h6-line-height: 1rem !default;
 
-$small-font-size: 85.714285% !default;
+$font-size-reative-xs: .71428571em !default;
+$font-size-reative-sm: .85714285em !default;
+$font-size-reative-md: 1em !default;
 
 $font-sizes: (
   1: $h1-font-size,
@@ -293,8 +295,8 @@ $theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors)
 $border-width: 1px !default;
 $border-width-wide: 2px !default;
 
-$border-radius-sm: 2px !default;
-$border-radius: 4px !default;
+$border-radius-sm: 4px !default;
+$border-radius: 6px !default;
 $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
@@ -309,7 +311,7 @@ $icon-color: var(--#{$prefix}gray-400) !default;
 
 // Code
 $code-color: var(--#{$prefix}gray-600) !default;
-$code-font-size: $small-font-size !default;
+$code-font-size: $font-size-reative-sm !default;
 $code-line-height: 1.25rem !default;
 $code-bg: var(--#{$prefix}bg-surface-secondary) !default;
 
@@ -553,13 +555,15 @@ $breadcrumb-variants: (
 ) !default;
 
 // Badges
-$badge-font-size: $code-font-size !default;
+$badge-font-size: $font-size-reative-sm !default;
+$badge-font-size-sm: $font-size-reative-xs !default;
+$badge-font-size-lg: $font-size-reative-md !default;
 $badge-line-height: $code-line-height !default;
 $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $badge-padding-y: 0.25em !default;
 $badge-padding-x: 0.5em !default;
-$badge-empty-size: 0.5rem !default;
-$badge-color: var(--#{$prefix}gray-500) !default;
+$badge-empty-size: 10px !default;
+$badge-color: var(--#{$prefix}secondary) !default;
 $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 
 // Buttons
@@ -605,8 +609,8 @@ $btn-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 // Cards
 $card-title-spacer-y: 1.25rem !default;
-$card-box-shadow: var(--#{$prefix}shadow-card) !default;
-$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
+$card-box-shadow: var(--#{$prefix}box-shadow-card) !default;
+$card-hover-box-shadow: var(--#{$prefix}box-shadow-card-hover) !default;
 
 $card-bg: var(--#{$prefix}bg-surface) !default;
 $card-bg-hover: $white !default;
@@ -614,7 +618,7 @@ $card-color: inherit !default;
 
 $card-border-width: var(--#{$prefix}border-width) !default;
 $card-border-color: var(--#{$prefix}border-color-translucent) !default;
-$card-border-radius: var(--#{$prefix}border-radius) !default;
+$card-border-radius: var(--#{$prefix}border-radius-lg) !default;
 
 $card-spacer-x: 1.25rem !default;
 $card-spacer-y: 1rem !default;
@@ -681,7 +685,7 @@ $dropdown-divider-margin-y: var(--#{$prefix}spacer-2) !default;
 // Tooltip
 $tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
 $tooltip-color: var(--#{$prefix}light) !default;
-$tooltip-padding-y: var(--#{$prefix}spacer-2) !default;
+$tooltip-padding-y: var(--#{$prefix}spacer-1) !default;
 $tooltip-padding-x: var(--#{$prefix}spacer-2) !default;
 
 // Loader
@@ -729,9 +733,10 @@ $modal-sm: 380px !default;
 $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
 $nav-link-color: var(--#{$prefix}gray-500) !default;
+$nav-link-active-color: var(--#{$prefix}body-color) !default;
 $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $nav-link-icon-size: $icon-size !default;
-$nav-link-icon-color: var(--#{$prefix}icon-color) !default;
+$nav-link-icon-color: inherit !default;
 
 $nav-pills-link-active-color: var(--#{$prefix}primary) !default;
 $nav-pills-link-active-bg: var(--#{$prefix}active-bg) !default;
@@ -753,7 +758,7 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 // Navbar
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
-$navbar-light-color: var(--#{$prefix}muted) !default;
+$navbar-light-color: var(--#{$prefix}secondary) !default;
 
 $navbar-hover-color: $white !default;
 
@@ -762,8 +767,8 @@ $navbar-border-color: var(--#{$prefix}border-color) !default;
 
 $navbar-light-color: var(--#{$prefix}body-color) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
-$navbar-light-active-color: var(--#{$prefix}body-color) color !default;
-$navbar-light-hover-color: var(--#{$prefix}body-color) color !default;
+$navbar-light-active-color: var(--#{$prefix}body-color) !default;
+$navbar-light-hover-color: var(--#{$prefix}body-color) !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
 $navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
 
@@ -787,6 +792,7 @@ $navbar-toggler-focus-width: 0 !default;
 $navbar-overlap-height: 9rem !default;
 
 $navbar-nav-link-padding-x: $nav-link-padding-x !default;
+$navbar-nav-link-hover-bg: rgba(0, 0, 0, .04) !default;
 
 $navbar-active-border-color: var(--#{$prefix}primary) !default;
 
@@ -803,6 +809,9 @@ $popover-bg: var(--#{$prefix}bg-surface) !default;
 $popover-header-bg: transparent !default;
 $popover-border-color: var(--#{$prefix}border-color) !default;
 $popover-body-color: inherit !default;
+$popover-body-padding-x: .5rem !default;
+$popover-body-padding-y: .5rem !default;
+$popover-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
 
 // Footer
 $footer-padding-y: 2rem !default;
@@ -855,6 +864,7 @@ $table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
+$table-active-bg: var(--#{$prefix}active-bg) !default;
 
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
 $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;

core/scss/layout/_navbar.scss

@@ -107,8 +107,8 @@ Navbar
 
     .nav-link {
       position: relative;
-      min-width: 2rem;
-      min-height: 2rem;
+      min-width: 2.5rem;
+      min-height: 2.5rem;
       justify-content: center;
       border-radius: var(--#{$prefix}border-radius);
 
@@ -122,11 +122,6 @@ Navbar
   }
 }
 
-.navbar-nav {
-  margin: 0;
-  padding: 0;
-}
-
 .navbar-expand {
   @each $breakpoint in map-keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -146,6 +141,10 @@ Navbar
         .nav-item.active {
           position: relative;
 
+          .nav-link {
+            color: var(--#{$prefix}navbar-active-color);
+          }
+
           &:after {
             content: "";
             position: absolute;
@@ -276,6 +275,9 @@ Navbar transparent
 Navbar nav
  */
 .navbar-nav {
+  --#{$prefix}nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
+  margin: 0;
+  padding: 0;
   align-items: stretch;
 
   .nav-item {

core/scss/marketing/_browser.scss

@@ -53,7 +53,7 @@
   justify-content: center;
   text-decoration: none;
   padding: .25rem;
-  color: var(--#{$prefix}muted);
+  color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h5);
   border-radius: var(--#{$prefix}border-radius);
   line-height: 1;

core/scss/marketing/_hero.scss

@@ -18,7 +18,7 @@
 }
 
 .hero-description {
-  color: var(--#{$prefix}muted);
+  color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h2);
   line-height: 1.5;
   margin: 0 auto;

core/scss/marketing/_sections.scss

@@ -81,7 +81,7 @@
 }
 
 .section-description {
-  color: var(--#{$prefix}muted);
+  color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h3);
   line-height: var(--#{$prefix}line-height-h3);
   margin-top: 1rem;

core/scss/mixins/_functions.scss

@@ -6,6 +6,9 @@
   @return shade-color($color, 10%);
 }
 
+//
+// Replace all occurrences of a substring within a string.
+//
 @function str-replace($string, $search, $replace: "") {
   $index: str-index($string, $search);
 
@@ -42,3 +45,52 @@
   @return if($n > 1, nth($breakpoint-names, $n - 1), null);
 }
 
+//
+// Escape SVG strings.
+//
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if str-index($string, "url(") == 1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+/**
+ * Converts a given value to a percentage string.
+ *
+ * @param {Number} $value - The value to be converted to a percentage.
+ * @return {String} - The percentage representation of the value.
+ */
+@function to-percentage($value) {
+  @return if(unitless($value), percentage($value), $value);
+}
+
+/**
+ * Generates a transparent version of the given color.
+ *
+ * @param {Color} $color - The base color to be made transparent.
+ * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
+ * @return {Color} - The resulting color with the specified transparency.
+ */
+@function color-transparent($color, $alpha: 1, $background: transparent) {
+  @if $alpha == 1 {
+    @return $color;
+  } @else {
+    @return color-mix(in srgb, #{$color} #{to-percentage($alpha)}, $background);
+  }
+}
+
+@function url-svg($svg) {
+  $svg: str-replace($svg, '#', '%23');
+  $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+
+  @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
+}

core/scss/ui/_accordion.scss

@@ -1,24 +1,172 @@
 .accordion {
- --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-color: var(--#{$prefix}body-color);
+  --#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-btn-color: var(--#{$prefix}accordion-color);
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-toggle-width: 1.25rem;
+  --#{$prefix}accordion-padding-x: #{$accordion-body-padding-x};
+  --#{$prefix}accordion-btn-padding-x: var(--#{$prefix}accordion-padding-x);
+  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-body-padding-x: var(--#{$prefix}accordion-padding-x);
+  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+  --#{$prefix}accordion-gap: 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}accordion-gap);
 }
 
-.accordion-button {
-  &:focus:not(:focus-visible) {
-    outline: none;
-    box-shadow: none;
-  }
-
-  &:after {
-    opacity: $text-secondary-opacity;
-  }
+.accordion-header {
+  position: relative;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-padding-x);
+  color: var(--#{$prefix}accordion-btn-color);
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+  overflow-anchor: none;
+  transition: transform $transition-time;
 
   &:not(.collapsed) {
-    font-weight: var(--#{$prefix}font-weight-bold);
     border-bottom-color: transparent;
     box-shadow: none;
+    color: var(--#{$prefix}accordion-active-color);
+  }
 
-    &:after {
-      opacity: 1;
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: 0;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+
+    &:not(:focus-visible) {
+      outline: none;
+      box-shadow: none;
     }
   }
-}
+}
+
+.accordion-header-icon {
+  color: var(--#{$prefix}secondary);
+}
+
+.accordion-header-toggle {
+  display: flex;
+  line-height: 1;
+  transition: $transition-time transform;
+  margin-left: auto;
+  margin-right: 0;
+  color: var(--#{$prefix}secondary);
+  width: var(--#{$prefix}accordion-btn-toggle-width);
+  height: var(--#{$prefix}accordion-btn-toggle-width);
+
+  .accordion-header:not(.collapsed) & {
+    transform: rotate(-180deg);
+    color: var(--#{$prefix}accordion-active-color);
+  }
+
+  path {
+    transition: $transition-time opacity;
+  }
+}
+
+.accordion-header-toggle-plus {
+  .accordion-header:not(.collapsed) & {
+    path:first-child {
+      opacity: 0;
+    }
+  } 
+}
+
+.accordion-header-text {
+  margin-bottom: 0;
+
+  h1, h2, h3, h4, h5, h6,
+  .h1, .h2, .h3, .h4, .h5, .h6 {
+    margin-bottom: 0;
+  }
+}
+
+.accordion-item {
+  color: var(--#{$prefix}accordion-color);
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
+
+  &:first-of-type {
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+    > .accordion-header {
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  &:last-of-type {
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+    > .accordion-header {
+      &.collapsed {
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+      }
+    }
+
+    > .accordion-collapse {
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+    }
+  }
+}
+
+.accordion-body {
+  color: var(--#{$prefix}secondary);
+  padding: 0 var(--#{$prefix}accordion-body-padding-x) var(--#{$prefix}accordion-body-padding-y);
+}
+
+.accordion-flush {
+  > .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+
+    &:first-child {
+      border-top: 0;
+    }
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    // stylelint-disable selector-max-class
+    > .accordion-collapse,
+    > .accordion-header .accordion-button,
+    > .accordion-header .accordion-button.collapsed {
+      @include border-radius(0);
+    }
+    // stylelint-enable selector-max-class
+  }
+}
+
+.accordion-tabs {
+  --#{$prefix}accordion-gap: 0.75rem;
+
+  > .accordion-item {
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
+    border-radius: var(--#{$prefix}accordion-border-radius);
+  }
+}
+
+.accordion-inverted {
+  .accordion-header-toggle {
+    order: -1;
+    margin-left: 0;
+  }
+}

core/scss/ui/_alerts.scss

@@ -1,40 +1,86 @@
 .alert {
-  --#{$prefix}alert-color: #{var(--#{$prefix}secondary)};
-  --#{$prefix}alert-bg: #{var(--#{$prefix}bg-surface)};
-  border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
-  border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
-  box-shadow: $alert-shadow;
+  --#{$prefix}alert-bg: transparent;
+  --#{$prefix}alert-padding-x: #{$alert-padding-x};
+  --#{$prefix}alert-padding-y: #{$alert-padding-y};
+  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+  --#{$prefix}alert-color: inherit;
+  --#{$prefix}alert-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
+  --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
+  --#{$prefix}alert-link-color: inherit;
+  --#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
 
-  >:last-child {
-    margin-bottom: 0;
+  position: relative;
+  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+  margin-bottom: var(--#{$prefix}alert-margin-bottom);
+  background-color: var(--#{$prefix}alert-bg);
+  border-radius: var(--#{$prefix}alert-border-radius);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.alert-heading {
+  color: inherit;
+  margin-bottom: .25rem; // todo: use variable
+  font-weight: var(--#{$prefix}alert-heading-font-weight);
+}
+
+.alert-description {
+  color: var(--#{$prefix}secondary);
+}
+
+.alert-icon {
+  color: var(--#{$prefix}alert-color);
+  width: 1.25rem !important; // todo: use variable
+  height: 1.25rem !important;
+}
+
+.alert-action {
+  color: var(--#{$prefix}alert-color);
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.alert-list {
+  margin: 0;
+}
+
+.alert-link {
+  font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
+
+  &,
+  &:hover {
+    color: var(--#{$prefix}alert-color);
+  }
+}
+
+
+.alert-dismissible {
+  padding-right: 3rem; //todo: use variable
+
+  .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
   }
 }
 
 .alert-important {
-  border-color: transparent;
-  background: var(--#{$prefix}alert-color);
-  color: #fff;
+  border-color: var(--#{$prefix}alert-color);
+  color: var(--#{$prefix}alert-color);
 
-  .alert-icon,
-  .alert-link,
-  .alert-title {
+  .btn-close,
+  .alert-description {
     color: inherit;
   }
-
-  .alert-link:hover {
-    color: inherit;
-  }
-
-  .btn-close {
-    filter: var(--#{$prefix}btn-close-white-filter);
-  }
-}
-
-.alert-link, {
-  &,
-  &:hover {
-    color: var(--#{$prefix}alert-color);
-  }
 }
 
 @each $name, $color in $theme-colors {
@@ -42,18 +88,3 @@
     --#{$prefix}alert-color: var(--#{$prefix}#{$name});
   }
 }
-
-.alert-icon {
-  color: var(--#{$prefix}alert-color);
-  width: 1.5rem !important;
-  height: 1.5rem !important;
-  margin: -.125rem $alert-padding-x -.125rem 0;
-}
-
-.alert-title {
-  font-size: $h4-font-size;
-  line-height: $h4-line-height;
-  font-weight: var(--#{$prefix}font-weight-bold);
-  margin-bottom: .25rem;
-  color: var(--#{$prefix}alert-color);
-}

core/scss/ui/_badges.scss

@@ -1,36 +1,46 @@
 .badge {
+  --#{$prefix}badge-padding-x: #{$badge-padding-x};
+  --#{$prefix}badge-padding-y: #{$badge-padding-y};
+  --#{$prefix}badge-font-size: #{$badge-font-size};
+  --#{$prefix}badge-font-weight: #{$badge-font-weight};
+  --#{$prefix}badge-color: #{$badge-color};
+  --#{$prefix}badge-border-radius: #{$badge-border-radius};
+  --#{$prefix}badge-icon-size: 1em;
+  --#{$prefix}badge-line-height: 1;
+  display: inline-flex;
+  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+  font-weight: var(--#{$prefix}badge-font-weight);
+  font-size: var(--#{$prefix}badge-font-size);
+  color: var(--#{$prefix}badge-color);
+  text-align: center;
+  white-space: nowrap;
   justify-content: center;
   align-items: center;
+  gap: .25rem;
   background: $badge-bg-color;
   overflow: hidden;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
-  min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
-  font-weight: $headings-font-weight;
-  letter-spacing: .04em;
+  border-radius: var(--#{$prefix}badge-border-radius);
+  min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
+  letter-spacing: 0.04em;
   vertical-align: bottom;
+  line-height: var(--#{$prefix}badge-line-height);
 
   @at-root a#{&} {
     color: $card-bg;
   }
 
-  .avatar {
-    box-sizing: content-box;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin: 0 .5rem 0 -.5rem;
-  }
-
   .icon {
     width: 1em;
     height: 1em;
-    font-size: 1rem;
+    font-size: var(--#{$prefix}badge-icon-size);
     stroke-width: 2;
   }
 }
 
- .badge:empty,
- .badge-empty {
+.badge:empty,
+.badge-dot {
   display: inline-block;
   width: $badge-empty-size;
   height: $badge-empty-size;
@@ -76,4 +86,28 @@
 
 .badge-blink {
   animation: blink 2s infinite;
+}
+
+//
+// Badge sizes
+//
+.badge-sm {
+  --#{$prefix}badge-font-size: #{$badge-font-size-sm};
+  --#{$prefix}badge-icon-size: 1em;
+  --#{$prefix}badge-padding-y: 2px;
+  --#{$prefix}badge-padding-x: 0.25rem;
+}
+
+.badge-lg {
+  --#{$prefix}badge-font-size: #{$badge-font-size-lg};
+  --#{$prefix}badge-icon-size: 1em;
+  --#{$prefix}badge-padding-y: 0.25rem;
+  --#{$prefix}badge-padding-x: 0.5rem;
+}
+
+//
+// Badge with only icon
+//
+.badge-icononly {
+  --#{$prefix}badge-padding-x: 0;
 }

core/scss/ui/_buttons.scss

@@ -20,6 +20,7 @@
   justify-content: center;
   white-space: nowrap;
   box-shadow: var(--#{$prefix}btn-box-shadow);
+  position: relative;
 
   .icon {
     width: var(--#{$prefix}btn-icon-size);
@@ -224,6 +225,7 @@
 // Action button
 //
 .btn-action {
+  --#{$prefix}border-color: transparent;
   padding: 0;
   border: 0;
   color: var(--#{$prefix}secondary);
@@ -234,6 +236,7 @@
   justify-content: center;
   border-radius: var(--#{$prefix}border-radius);
   background: transparent;
+  box-shadow: none;
 
   &:after {
     content: none;
@@ -253,14 +256,6 @@
   &.show {
     color: var(--#{$prefix}primary);
   }
-
-  .icon {
-    margin: 0;
-    width: 1.25rem;
-    height: 1.25rem;
-    font-size: 1.25rem;
-    stroke-width: 1;
-  }
 }
 
 .btn-actions {

core/scss/ui/_calendars.scss

@@ -28,8 +28,8 @@
 }
 
 .calendar-date {
-  flex: 0 0 divide(100%, 7);
-  max-width: divide(100%, 7);
+  flex: 0 0 calc(100% / 7);
+  max-width: calc(100% / 7);
   padding: .2rem;
   text-align: center;
   border: 0;

core/scss/ui/_dropdowns.scss

@@ -19,6 +19,7 @@
   align-items: center;
   margin: 0;
   line-height: $line-height-base;
+  gap: .5rem;
 }
 
 .dropdown-item-icon {

core/scss/ui/_markdown.scss

@@ -36,7 +36,8 @@ Markdown
     padding: .5rem 1.5rem;
   }
 
-  > img {
+  > img,
+  > p > img {
     border-radius: var(--#{$prefix}border-radius);
   }
 }

core/scss/ui/_nav.scss

@@ -13,7 +13,7 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    font-weight: var(--#{$prefix}font-weight-bold);
+    font-weight: var(--#{$prefix}font-weight-medium);
   }
 
   &.nav-pills {
@@ -51,8 +51,13 @@
 
 .nav-link {
   display: flex;
-  @include transition(color $transition-time);
+  @include transition(color $transition-time, background-color $transition-time);
   align-items: center;
+
+  &:hover,
+  &:focus {
+    background-color: var(--#{$prefix}nav-link-hover-bg);
+  }
 }
 
 .nav-link-toggle {

core/scss/ui/_payments.scss

@@ -1,4 +1,4 @@
-$payment-icons: ("2c2p", "2checkout", "adyen", "affirm", "alipay-plus", "alipay", "allegro-pay", "amazon-pay", "amazon", "americanexpress", "applepay", "authorize", "autopay", "bancontact", "binance-usd", "bitcoin", "bitpay", "bkash", "blik", "braintree", "cash-app", "chime", "cirrus", "clickandbuy", "coinkite", "dinersclub", "directdebit", "discover", "dotpay", "dwolla", "easypaisa", "ebay", "elo", "epayco", "esewa", "ethereum", "eway", "fonepay", "giropay", "google-pay", "googlewallet", "hubspot", "ingenico", "ideal", "imepay", "jcb", "khalti", "klarna", "laser", "litecoin", "maestro", "mastercard", "mercado-pago", "metamask", "mir", "monero", "moneygram", "neteller", "ogone", "okpay", "opensea", "paybox", "payconiq", "payka", "payline", "paymill", "payone", "payoneer", "paypal", "paypo", "paysafe", "paysafecard", "payu", "payza", "poli", "przelewy24", "revolut-pay", "ripple", "sage", "samsung-pay", "sepa", "shop-pay", "shopify", "skrill", "solana", "solo", "spingo", "square", "stax", "stripe", "switch", "tether", "tpay", "true-usd", "ukash", "unionpay", "venmo", "verifone", "verisign", "visa", "we-chat-pay", "webmoney", "westernunion", "wise", "worldpay", "zelle");
+$payment-icons: ("2c2p", "2checkout", "adyen", "affirm", "alipay-plus", "alipay", "allegro-pay", "amazon-pay", "amazon", "americanexpress", "applepay", "authorize", "autopay", "bancontact", "binance-usd", "bitcoin", "bitpay", "bkash", "blik", "braintree", "cash-app", "chime", "cirrus", "clickandbuy", "coinkite", "dinersclub", "directdebit", "discover", "dotpay", "dwolla", "easypaisa", "ebay", "elo", "epayco", "esewa", "ethereum", "eway", "fonepay", "giropay", "google-pay", "googlewallet", "hubspot", "ingenico", "ideal", "imepay", "jcb", "khalti", "klarna", "laser", "litecoin", "maestro", "mastercard", "mercado-pago", "metamask", "mir", "monero", "moneygram", "neteller", "ogone", "okpay", "opensea", "paybox", "payconiq", "payka", "payline", "paymill", "payone", "payoneer", "paypal", "paypo", "paysafe", "paysafecard", "payu", "payza", "poli", "przelewy24", "revolut-pay", "ripple", "sage", "samsung-pay", "sepa", "shop-pay", "shopify", "skrill", "solana", "solo", "spingo", "square", "stax", "stripe", "switch", "tether", "tpay", "troy", "true-usd", "ukash", "unionpay", "venmo", "verifone", "verisign", "visa", "we-chat-pay", "webmoney", "westernunion", "wise", "worldpay", "zelle");
 
 .payment {
   height: $avatar-size;

core/scss/ui/_signature.scss

@@ -0,0 +1,13 @@
+.signature {
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  padding: var(--#{$prefix}spacer-1);
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+.signature-canvas {
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
+  border-radius: var(--#{$prefix}border-radius-sm);
+  display: block;
+  cursor: crosshair;
+  width: 100%;
+}

core/scss/ui/_tables.scss

@@ -148,3 +148,14 @@ Table sort
     background: transparent;
   }
 }
+
+//
+// Table selectable
+//
+.table-selectable {
+  tbody tr {
+    &:has(.table-selectable-check:checked) {
+      background-color: $table-active-bg;
+    }
+  }
+}

core/scss/ui/_type.scss

@@ -72,7 +72,7 @@ b {
 }
 
 blockquote {
-  padding-left: 1rem;
+  padding: 1rem 1rem 1rem;
   border-left: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 
   p {
@@ -89,7 +89,8 @@ blockquote {
   }
 }
 
-ul, ol {
+ul,
+ol {
   padding-left: 1.5rem;
 }
 
@@ -123,6 +124,12 @@ code {
   border-radius: var(--#{$prefix}border-radius);
 }
 
+abbr {
+  text-decoration: underline dotted;
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
 kbd,
 .kbd {
   border: $kbd-border;
@@ -145,18 +152,23 @@ img {
   margin-left: 0;
 }
 
-
 /**
 Selection
  */
-::selection {
-  background-color: rgba(var(--#{$prefix}primary-rgb), .16);
+::selection,
+.text-selected {
+  background-color: color-transparent(var(--#{$prefix}primary), .1);
+}
+
+.text-selected {
+  display: inline-block;
 }
 
 /**
 Links
  */
-[class^="link-"], [class*=" link-"] {
+[class^="link-"],
+[class*=" link-"] {
   &.disabled {
     color: $nav-link-disabled-color !important;
     pointer-events: none;
@@ -173,3 +185,68 @@ Subheader
 .subheader {
   @include subheader;
 }
+
+/**
+Mentions
+ */
+.mention {
+  display: inline-block;
+  box-shadow: var(--tblr-box-shadow-border);
+  border-radius: var(--#{$prefix}border-radius-pill);
+  line-height: calc(16em / 12);
+  font-size: calc(12em / 14);
+  color: var(--#{$prefix}body-color);
+  background: var(--#{$prefix}bg-surface-tertiary);
+  padding: calc(2em / 12) calc(8em / 12);
+  font-weight: var(--#{$prefix}font-weight-medium);
+  
+  @at-root a#{&} {
+    cursor: pointer;
+
+    &:hover, 
+    &.hover {
+      background: var(--#{$prefix}bg-surface-secondary);
+      text-decoration: underline;
+    }
+  }
+}
+
+.mention-avatar,
+.mention-app,
+.mention-color {
+  width: calc(14em / 12);
+  height: calc(14em / 12);
+  border-radius: var(--#{$prefix}border-radius-pill);
+  margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
+  display: inline-flex;
+  background: no-repeat center center/cover;
+  box-shadow: var(--#{$prefix}box-shadow-border);
+  vertical-align: middle;
+  text-align: center;
+}
+
+.mention-app {
+  box-shadow: none;
+  background: none;
+  border-radius: 0;
+}
+
+.mention-count {
+  color: var(--#{$prefix}secondary);
+  margin-left: calc(8em / 12);
+}
+
+$text-variants: (
+  incorrect: var(--#{$prefix}red),
+  correct: var(--#{$prefix}green),
+);
+
+@each $variant, $color in $text-variants {
+  .text-#{$variant} {
+    background: color-transparent($color, .04);
+    background: color-transparent($color, 4%);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-decoration-color: $color;
+  }
+}

core/scss/utils/_colors.scss

@@ -31,7 +31,7 @@
 
 @each $color, $value in $gray-colors {
   .bg-#{"" + $color} {
-    --#{$prefix}bg-opacity: .1;
+    --#{$prefix}bg-opacity: 1;
     background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 
@@ -39,3 +39,15 @@
     color: $value !important;
   }
 }
+
+.bg-surface {
+  background-color: var(--#{$prefix}bg-surface) !important;
+}
+
+.bg-surface-secondary {
+  background-color: var(--#{$prefix}bg-surface-secondary) !important;
+}
+
+.bg-surface-tertiary {
+  background-color: var(--#{$prefix}bg-surface-tertiary) !important;
+}

core/scss/utils/_opacity.scss

@@ -2,6 +2,6 @@
 
 @for $i from 0 through 20 {
   .opacity-#{$i * 5} {
-    opacity: divide($i * 5, 100) !important;
+    opacity: calc(#{$i * 5} / 100) !important;
   }
 }

core/scss/vendor/_apexcharts.scss

@@ -40,4 +40,9 @@
 
 .apexcharts-radialbar-track .apexcharts-radialbar-area {
   stroke: var(--#{$prefix}border-color) !important;
+}
+
+.apexcharts-svg,
+.apexcharts-canvas {
+  border-radius: inherit;
 }

docs/.gitignore

@@ -1 +0,0 @@
-_site

docs/_e11ty/includes/example.html

@@ -1,5 +0,0 @@
-<div class="p-6 border rounded mb-4 d-flex align-items-center justify-content-center">
-	<div>
-		{{ include.html }}
-	</div>
-</div>

docs/_e11ty/includes/logo.html

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
-	<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)"></path>
-	<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"></path>
-</svg>

docs/_e11ty/includes/menu.html

@@ -1,7 +0,0 @@
-<div class="p-6">
-	{% for collection in collections.all %}
-		<div>
-			<a href="{{ collection.url }}">{{ collection.data.title }} {{ collection.url }}</a>
-		</div>
-	{% endfor %}
-</div>

docs/_e11ty/includes/ui

@@ -1 +0,0 @@
-../../../preview/pages/_includes/ui

docs/_e11ty/layouts/default.html

@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>{{ title }}</title>
-
-	<link rel="stylesheet" href="/core/css/tabler.min.css" />
-</head> 
-<body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
-	<div class="navbar navbar-expand-md">
-		<div class="container-fluid">
-			<div class="navbar-brand">
-				{% include "logo.html" %}
-			</div>
-			<div class="navbar-nav flex-row order-md-last">
-				<a href="/ui">UI</a>
-				<a href="/illustrations">Illustrations</a>
-				<!-- <a href="/emails">Emails</a> -->
-				<a href="/icons">Icons</a>
-			</div>
-		</div>
-	</div>
-	<div class="flex-fill">
-		<div class="row g-0 h-full">
-			<div class="col-2">{% include "menu.html" %}</div>
-			<div class="col border-start" style="background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tblr-primary) 4%, transparent), transparent 80%) no-repeat 0 0 / 800px 800px !important;">
-				<div class="container-md">
-					<div class="p-6">
-						<div class="markdown fs-3">
-							<h1>
-								{{ title }}
-							</h1>
-
-							<p>{{ summary }}</p>
-
-							{{ content }}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<script src="/core/js/tabler.esm.js"></script>
-</body>
-</html>

docs/eleventy.config.mjs

@@ -1,79 +0,0 @@
-
-import { appConfig } from "@repo/e11ty"
-import { createHash } from 'crypto';
-import flatCache from 'flat-cache';
-import { resolve } from 'node:path';
-
-/** @type {import('@11ty/eleventy').LocalConfig} */
-export default function (eleventyConfig) {
-	appConfig(eleventyConfig);
-
-	eleventyConfig.addPassthroughCopy({
-		"node_modules/@tabler/core/dist": "core",
-		"pages/favicon.ico": "favicon.ico",
-	});
-
-	eleventyConfig.setIncludesDirectory("_e11ty/includes");
-	eleventyConfig.setDataDirectory("_e11ty/data");
-	eleventyConfig.setOutputDirectory("dist");
-	eleventyConfig.setLayoutsDirectory("_e11ty/layouts");
-
-	eleventyConfig.addPairedLiquidShortcode("example", function (content, ...params) {
-		return '<div class="example p-5 border mb-6 rounded">' + params + content + '</div>';
-	})
-
-	eleventyConfig.amendLibrary('md', () => { });
-
-	eleventyConfig.on('eleventy.before', async () => {
-
-		const shiki = await import('shiki');
-		const highlighter = await shiki.createHighlighter({
-			themes: ['github-dark', 'github-light'],
-			langs: [
-				'html',
-				'svelte',
-				'blade',
-				'php',
-				'yaml',
-				'js',
-				'jsx',
-				'ts',
-				'shell',
-				'diff',
-				'vue',
-				'scss',
-				'css'
-			],
-		});
-
-		eleventyConfig.amendLibrary('md', function (mdLib) {
-			return mdLib.set({
-				highlight: function (code, lang) {
-					// const hash = createHash('md5').update(code).digest('hex');
-					// const cache = flatCache.load(hash, resolve('./.cache/shiki'));
-					// const cachedValue = cache.getKey(hash);
-
-					// if (cachedValue) {
-					// 	return cachedValue;
-					// }
-
-					let highlightedCode = highlighter.codeToHtml(code.trim(), {
-						lang: lang,
-						themes: {
-							light: 'github-light',
-							dark: 'github-dark',
-						}
-					});
-
-					// cache.setKey(hash, highlightedCode);
-					// cache.save();
-
-					return highlightedCode;
-				},
-			});
-		}
-		);
-	});
-
-	return {}
-};

docs/icons/index.mdx

@@ -1,9 +1,8 @@
 ---
 title: Tabler Icons
-summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
+summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
 order: 2
 description: Over 5000 pixel-perfect icons for web design and development
-layout: default
 ---
 
 ## Browse icons

docs/icons/libraries/index.mdx

@@ -2,5 +2,4 @@
 title: Libraries
 description: Explore Tabler Icons libraries.
 summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
-layout: default
 ---

docs/icons/libraries/preact.mdx

@@ -2,7 +2,6 @@
 title: Preact
 description: Tabler Icons library for Preact framework.
 summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
-layout: default
 ---
 
 ![](/docs/icons/package-preact.png)
@@ -15,7 +14,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
 
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
+It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
 
 ```js
 import { IconArrowDown } from '@tabler/icons-preact';

docs/icons/libraries/react.mdx

@@ -2,7 +2,6 @@
 title: React
 description: Tabler Icons library for React framework.
 summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
-layout: default
 ---
 
 ![](/docs/icons/package-react.png)
@@ -15,7 +14,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
 
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
+It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
 
 ```jsx
 import { IconArrowLeft } from '@tabler/icons-react';

docs/icons/libraries/solidjs.mdx

@@ -2,7 +2,6 @@
 title: SolidJS
 description: Tabler Icons library for SolidJS framework.
 summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
-layout: default
 ---
 
 ![](/docs/icons/package-solidjs.png)
@@ -16,7 +15,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
 
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
+It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
 
 ```js
 import { IconArrowRight } from '@tabler/icons-solidjs';

docs/icons/libraries/svelte.mdx

@@ -2,7 +2,6 @@
 title: Svelte
 description: Tabler Icons library for Svelte framework.
 summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
-layout: default
 ---
 
 ![](/docs/icons/package-svelte.png)
@@ -16,9 +15,9 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
 
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
+It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
 
-```jsx
+```sveltehtml
 <script lang="ts">
 import { IconHeart } from '@tabler/icons-svelte';
 </script>
@@ -30,7 +29,7 @@ import { IconHeart } from '@tabler/icons-svelte';
 
 You can pass additional props to adjust the icon.
 
-```html
+```sveltehtml
 <IconHeart size={48} stroke={1} />
 ```
 

docs/icons/libraries/vue.mdx

@@ -2,7 +2,6 @@
 title: Vue
 description: Tabler Icons library for Vue framework.
 summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
-layout: default
 ---
 
 ![](/docs/icons/package-vue.png)
@@ -16,9 +15,9 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
 
 ## How to use
 
-All icons are Vue components that contain SVG elements. So any icon can be imported and used as a component. It also helps to use threeshaking, so you only import the icons you use.
+All icons are Vue components that contain SVG elements, so any icon can be imported and used as a component. It also helps to use treeshaking, so you only import the icons you use.
 
-```html
+```vue
 <template>
   <IconHome />
 </template>

docs/icons/libraries/webfont.mdx

@@ -2,7 +2,6 @@
 title: Webfont
 description: Tabler Icons as a webfont.
 summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
-layout: default
 ---
 
 ![](/docs/icons/package-webfont.png)
@@ -31,9 +30,14 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
 ### CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@$ICONS_VERSION/dist/tabler-icons.min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@$ICONS_VERSION/dist/tabler-icons.min.css"
+/>
 ```
 
+Instead of a specific version, you can use `latest` to always get the newest icons.
+
 ## Usage
 
 ### HTML

docs/icons/plugins/figma.mdx

@@ -2,7 +2,6 @@
 title: Figma plugin
 description: Use Tabler Icons directly in Figma.
 summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
-layout: default
 ---
 
 ![Tabler Figma Plugin](/docs/icons/figma-plugin.png)

docs/icons/plugins/index.mdx

@@ -1,5 +1,4 @@
 ---
 title: Plugins
 description: Icon plugins for seamless integration.
-layout: default
 ---

docs/icons/static-files/eps.mdx

@@ -1,7 +1,6 @@
 ---
 title: EPS version
 description: Download Tabler Icons in EPS format.	
-layout: default
 ---
 
 ![](/docs/icons/package-eps.png)

docs/icons/static-files/index.mdx

@@ -2,5 +2,4 @@
 title: Static files
 description: Download static file formats of icons.
 summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
-layout: default
 ---

docs/icons/static-files/pdf.mdx

@@ -1,7 +1,6 @@
 ---
 title: PDF version
 description: Download Tabler Icons in PDF format.
-layout: default
 ---
 
 ![](/docs/icons/package-pdf.png)

docs/icons/static-files/png.mdx

@@ -1,7 +1,6 @@
 ---
 title: PNG version
 description: Download Tabler Icons in PNG format.
-layout: default
 ---
 
 ![](/docs/icons/package-png.png)
@@ -17,8 +16,6 @@ All PNG files are stored in `icons` subdirectory.
 
 ## CDN
 
-Replace `$ICONS_VERSION` with `latest` or any specific version you need.
-
 #### Outline version
 
 ```html
@@ -30,3 +27,5 @@ Replace `$ICONS_VERSION` with `latest` or any specific version you need.
 ```html
 <img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/filled/home.png" />
 ```
+
+Instead of a specific version, you can use `latest` to always get the newest icons.

docs/icons/static-files/svg.mdx

@@ -1,7 +1,6 @@
 ---
 title: SVG version
 description: Download Tabler Icons in SVG format.
-layout: default
 ---
 
 ![](/docs/icons/package-svg.png)
@@ -30,7 +29,18 @@ You can paste the content of the icon file into your HTML code to display it on
 
 ```html
 <a href="">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-disabled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-disabled"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="1.25"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
     ...
   </svg>
   Click me
@@ -60,8 +70,6 @@ Add an icon to be displayed on your page with the following markup (`activity` i
 
 ## CDN
 
-Replace `$ICONS_VERSION` with `latest` or any specific version you need.
-
 #### Outline version
 
 ```html
@@ -73,3 +81,5 @@ Replace `$ICONS_VERSION` with `latest` or any specific version you need.
 ```html
 <img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/filled/home.svg" />
 ```
+
+Instead of a specific version, you can use `latest` to always get the newest icons.

docs/illustrations/index.mdx

@@ -3,7 +3,6 @@ title: Tabler Illustrations
 order: 3
 description: Customizable illustrations for modern web and mobile designs.
 summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
-layout: default
 ---
 
-! [ ] (/docs/cover-illustrations.png) 
+![](/docs/cover-illustrations.png) 

docs/illustrations/introduction/contents.mdx

@@ -2,7 +2,6 @@
 title: Contents
 description: Explore Tabler Illustrations folder structure
 summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
-layout: default
 ---
 
 The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.

docs/illustrations/introduction/customization.md

@@ -1,432 +0,0 @@
----
-title: Customization
-description: Customize the illustrations to match your brand.
-summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, and formats. This section provides insights into seamlessly integrating illustrations to align with your design and branding.
-layout: default
----
-
-```html example columns={1} centered vertical height="25rem"
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
-  <path d="M165.042 305.17C165.042 347.031 209.306 377.394 228.857 411.189C249.036 446.056 253.885 499.359 288.752 519.524C322.562 539.075 370.673 517.207 412.534 517.207C454.395 517.207 502.506 539.075 536.301 519.524C571.168 499.359 576.017 446.056 596.196 411.189C615.747 377.394 660.011 347.031 660.011 305.17C660.011 263.309 615.747 232.961 596.196 199.166C576.017 164.298 571.168 110.996 536.301 90.8302C502.506 71.2798 454.381 93.1471 412.534 93.1471C370.687 93.1471 322.562 71.2798 288.752 90.8302C253.885 110.996 249.036 164.298 228.857 199.166C209.306 232.961 165.042 263.323 165.042 305.17Z" fill="#F7F8FC" class="tblr-illustrations-computer-fix-a" />
-  <path d="M375.492 479.923C470.481 479.923 547.485 476.824 547.485 473.001C547.485 469.178 470.481 466.079 375.492 466.079C280.503 466.079 203.5 469.178 203.5 473.001C203.5 476.824 280.503 479.923 375.492 479.923Z" fill="#A6A9B3" class="tblr-illustrations-computer-fix-b" />
-  <path d="M511.988 174.667C493.855 167.122 474.216 163.9 454.624 165.256L456.64 177.084L511.988 174.667Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-  <path d="M518.452 301.638L572.584 329.197L591.949 299.006L602.918 281.844C608.639 272.891 617.062 260.034 627.674 244.159C626.096 241.199 624.176 238.434 621.954 235.921C616.989 230.419 610.739 226.233 603.762 223.736H603.633C599.858 222.306 595.996 221.019 592.192 219.674C585.755 217.369 579.457 214.695 573.328 211.665C568.623 209.377 563.545 206.66 558.154 203.428C555.15 210.807 552.161 218.187 549.187 225.567C543.466 239.868 537.697 254.132 531.881 268.357C527.419 279.465 522.943 290.558 518.452 301.638Z" fill="#DADBE0" />
-  <path d="M573.328 211.665L580.908 225.338L581.866 225.567C589.204 227.065 596.817 226.429 603.805 223.736H603.676C599.9 222.306 596.039 221.019 592.235 219.674C585.784 217.371 579.471 214.697 573.328 211.665Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M627.674 244.216C617.062 260.091 608.696 272.948 602.918 281.901C601.087 284.762 599.757 286.807 594.509 295.016L591.949 299.006L582.738 313.308L572.584 329.14L518.466 301.623C522.928 290.563 527.405 279.494 531.896 268.415L549.186 225.638C549.286 225.409 549.372 225.181 549.472 224.966C551.379 220.132 553.329 215.303 555.322 210.478C556.275 208.152 557.229 205.816 558.182 203.471C561.171 205.287 564.089 206.917 566.878 208.405C569.109 209.606 571.268 210.707 573.356 211.737C579.485 214.732 585.778 217.377 592.206 219.66C596.01 221.004 599.872 222.234 603.647 223.722H603.776C604.648 224.079 605.521 224.423 606.365 224.823C612.359 227.307 617.709 231.121 622.011 235.978C624.209 238.497 626.11 241.261 627.674 244.216Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-  <path d="M600.816 220.246C592.321 224.537 585.441 224.852 580.507 224.165C580.221 224.165 579.95 224.094 579.678 224.036L572.069 212.595C578.204 212.59 584.3 213.555 590.132 215.455C593.844 216.693 597.423 218.298 600.816 220.246Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M191.729 429.895L559.226 429.895C571.011 429.895 580.564 420.342 580.564 408.557V198.408C580.564 186.623 571.011 177.07 559.226 177.07L191.729 177.07C179.945 177.07 170.391 186.623 170.391 198.408V408.557C170.391 420.342 179.945 429.895 191.729 429.895Z" fill="white" class="tblr-illustrations-computer-fix-c" />
-  <path d="M585.585 197.736C585.395 190.871 582.538 184.35 577.619 179.557C572.701 174.764 566.108 172.076 559.241 172.064H191.687C184.702 172.072 178.006 174.849 173.067 179.788C168.128 184.727 165.35 191.423 165.343 198.408V408.643C165.35 415.628 168.128 422.324 173.067 427.263C178.006 432.201 184.702 434.979 191.687 434.987H326.008V443.94C324.578 453.679 318.042 456.425 313.466 457.126H262.537C261.503 457.13 260.512 457.542 259.781 458.274C259.049 459.005 258.637 459.996 258.633 461.03V465.55C258.637 466.584 259.049 467.575 259.781 468.306C260.512 469.038 261.503 469.45 262.537 469.454H488.504C489.017 469.454 489.525 469.353 489.999 469.157C490.472 468.961 490.903 468.673 491.265 468.31C491.628 467.948 491.915 467.517 492.112 467.044C492.308 466.57 492.409 466.062 492.409 465.55V461.03C492.409 460.517 492.308 460.01 492.112 459.536C491.915 459.062 491.628 458.632 491.265 458.269C490.903 457.907 490.472 457.619 489.999 457.423C489.525 457.227 489.017 457.126 488.504 457.126H437.476C432.899 456.425 426.306 453.665 424.933 443.868V434.915H559.241C566.226 434.908 572.924 432.13 577.865 427.192C582.806 422.254 585.587 415.557 585.599 408.571V198.336C585.599 198.179 585.599 197.964 585.585 197.736ZM575.573 408.571C575.57 412.898 573.849 417.047 570.79 420.106C567.73 423.166 563.582 424.886 559.255 424.89H191.701C187.374 424.886 183.226 423.166 180.166 420.106C177.107 417.047 175.386 412.898 175.383 408.571V198.336C175.386 194.01 177.107 189.861 180.166 186.802C183.226 183.742 187.374 182.022 191.701 182.018H559.255C561.484 182.012 563.691 182.469 565.734 183.362C568.656 184.626 571.144 186.717 572.892 189.378C574.641 192.039 575.573 195.153 575.573 198.336V408.571Z" fill="#232B41" class="tblr-illustrations-computer-fix-d" />
-  <path d="M211.108 222.706L443.454 222.706C444.497 222.706 445.342 221.861 445.342 220.819V214.798C445.342 213.755 444.497 212.91 443.454 212.91L211.108 212.91C210.066 212.91 209.22 213.755 209.22 214.798V220.819C209.22 221.861 210.066 222.706 211.108 222.706Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-  <path d="M211.094 314.981H252.111C253.146 314.981 253.985 314.142 253.985 313.108V307.058C253.985 306.023 253.146 305.184 252.111 305.184H211.094C210.059 305.184 209.22 306.023 209.22 307.058V313.108C209.22 314.142 210.059 314.981 211.094 314.981Z" fill="#DADBE0" />
-  <path d="M211.809 279.856H368.97C370.4 279.856 371.559 278.697 371.559 277.267V250.595C371.559 249.165 370.4 248.006 368.97 248.006L211.809 248.006C210.379 248.006 209.22 249.165 209.22 250.595V277.267C209.22 278.697 210.379 279.856 211.809 279.856Z" fill="#A7AAB3" />
-  <path d="M389.479 335.733L382.271 326.78L363.822 341.611L346.56 320.144L331.586 332.2L348.848 353.667L330.399 368.498L337.593 377.465L356.042 362.62L373.304 384.087L388.292 372.031L371.03 350.564L389.479 335.733Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-  <path d="M591.934 268.701C593.522 258.689 602.961 233.776 606.393 224.895C605.55 224.494 604.677 224.151 603.805 223.793H603.676C597.784 223.936 594.695 223.45 594.451 222.363C594.266 221.548 595.567 220.418 598.356 218.945C595.969 217.727 593.498 216.68 590.962 215.813C589.216 215.204 587.44 214.684 585.642 214.254L585.413 309.389C587.615 305.957 589.818 302.539 592.006 299.106L594.566 295.116C592.635 286.034 590.919 275.094 591.934 268.701ZM485.401 254.857C484.8 254.942 484.114 259.376 486.288 262.208C486.835 262.909 487.534 263.476 488.333 263.867C487.189 258.861 486.002 254.785 485.401 254.857ZM507.354 307.487C505.774 306.55 504.119 305.747 502.406 305.084C503.966 306.056 505.625 306.862 507.354 307.487ZM469.283 332.115L465.765 355.569L469.583 349.491C469.14 343.71 469.039 337.908 469.283 332.115ZM514.004 331.385C514.763 329.722 515.32 327.975 515.663 326.179C506.08 322.786 496.693 318.861 487.546 314.423C485.44 321.176 482.706 327.717 479.38 333.959L469.583 349.534C469.755 351.293 469.984 353.038 470.298 354.711C472.043 364.122 476.219 370.586 479.408 375.535C485.661 385.147 494.013 393.215 503.836 399.132C530.306 400.116 556.093 390.607 575.588 372.674V364.994L514.004 331.385Z" fill="black" opacity="0.1" />
-  <path d="M514.376 314.638C512.764 311.667 510.325 309.227 507.354 307.616C505.625 306.99 503.966 306.185 502.406 305.213L502.148 305.084C502.148 305.084 502.248 305.084 502.406 305.213C504.119 305.875 505.774 306.679 507.354 307.616C507.997 307.787 508.527 307.802 508.784 307.53C510.1 306.243 503.478 300.451 502.005 290.783C501.633 288.251 500.761 282.502 504.05 277.182C508.169 270.517 515.935 269.244 517.422 269.015C511.358 267.019 505.07 265.785 498.701 265.34C494.411 265.039 490.835 265.182 488.318 263.91C489.348 268.372 490.349 273.549 490.864 277.153C492.515 289.684 491.377 302.426 487.532 314.466C496.679 318.904 506.065 322.829 515.649 326.222C516.477 322.324 516.031 318.263 514.376 314.638ZM585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397C565.562 223.564 557.567 213.668 557.567 202.069C557.567 190.47 565.562 180.616 576.789 176.741C579.63 175.787 582.59 175.233 585.584 175.096Z" fill="black" opacity="0.1" />
-  <path d="M585.57 222.935L609.483 216.128L613.501 223.278L588.974 239.868C587.816 237.194 586.643 234.505 585.484 231.817C585.556 228.827 585.556 225.967 585.57 222.935Z" fill="#DADBE0" />
-  <path d="M585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397L575.559 226.954V198.351C575.558 195.167 574.626 192.053 572.878 189.392C571.13 186.732 568.641 184.641 565.719 183.377C568.431 180.786 571.61 178.733 575.087 177.327C575.645 177.098 576.217 176.884 576.789 176.683C579.633 175.749 582.593 175.215 585.584 175.096Z" fill="black" opacity="0.3" />
-  <path d="M610.198 137.454C611.056 141.973 612.186 148.609 613.358 156.818C613.587 158.62 613.816 160.194 613.902 160.737C614.881 169.779 614.722 178.908 613.43 187.91C613.144 189.698 612.843 191.4 612.429 193.073C611.299 197.707 600.287 205.258 587.072 209.706C582.519 211.261 577.817 212.34 573.042 212.924C558.182 214.712 548.414 204.586 548.343 195.762C548.293 193.608 548.896 191.488 550.073 189.684C552.13 186.006 553.496 181.983 554.106 177.813C555.126 172.287 555.748 166.695 555.966 161.08C556.166 157.877 556.151 155.789 556.151 155.789L567.593 140.214L601.845 132.348C602.761 138.197 605.178 141.844 607.066 141.787C608.953 141.73 609.955 138.212 610.198 137.454Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M610.198 137.454C611.041 141.973 612.185 148.609 613.373 156.818C613.587 158.62 613.816 160.208 613.887 160.737C614.877 169.778 614.728 178.907 613.444 187.91C611.07 187.716 608.754 187.071 606.622 186.008C604.293 184.813 602.223 183.171 600.53 181.174C598.789 179.022 597.399 176.608 596.411 174.023C595.671 172.382 595.036 170.696 594.509 168.975C582.401 176.336 568.178 179.433 554.106 177.77C555.126 172.244 555.747 166.652 555.965 161.037C556.166 157.834 556.151 155.731 556.151 155.731L567.593 140.171L601.845 132.348C602.761 138.197 605.178 141.844 607.065 141.773C608.953 141.701 610.026 138.212 610.269 137.482" fill="black" opacity="0.1" />
-  <path d="M616.147 143.804C617.621 150.946 616.333 158.382 612.543 164.613C611.699 165.705 610.934 166.857 610.255 168.059C608.586 171.497 607.8 175.297 607.967 179.115C605.963 177.555 604.47 175.434 603.676 173.022C602.575 169.318 602.618 161.996 602.475 161.009V160.408C602.475 160.079 602.389 159.636 602.275 158.778C601.977 156.941 601.562 155.126 601.03 153.343C601.023 153.249 600.988 153.16 600.93 153.086C593.479 160.322 571.769 178.829 552.304 169.962C549.27 168.595 546.452 166.793 543.938 164.613C543.696 164.444 543.479 164.242 543.294 164.012C542.682 163.466 542.104 162.884 541.564 162.267L541.406 162.11C540.013 160.506 538.892 158.685 538.088 156.718L537.488 155.889C537.211 155.006 537.005 154.102 536.873 153.186C536.555 149.566 537.5 145.948 539.547 142.946C543.251 137.068 549.701 132.62 553.105 130.303C566.291 121.136 588.001 114.728 603.505 124.983C607.42 127.703 610.643 131.303 612.915 135.494C614.324 138.117 615.359 140.923 615.99 143.832" fill="#232B41" class="tblr-illustrations-computer-fix-d" />
-  <path d="M600.744 153.028C593.293 160.265 571.583 178.771 552.118 169.904C549.084 168.538 546.266 166.736 543.752 164.556C543.51 164.387 543.293 164.185 543.108 163.955C542.496 163.409 541.918 162.827 541.378 162.21L541.22 162.053C539.83 160.447 538.709 158.626 537.902 156.661C542.634 159.548 547.809 161.635 553.219 162.839C580.007 168.674 602.146 148.724 605.678 145.534L605.95 145.291C604.428 148.012 602.707 150.618 600.801 153.086" fill="black" opacity="0.5" />
-  <path d="M483.942 177.727C483.944 179.167 483.81 180.604 483.542 182.018H457.484C457.216 180.604 457.082 179.167 457.083 177.727C457.072 175.8 457.298 173.879 457.756 172.007H483.284C483.729 173.881 483.95 175.801 483.942 177.727Z" fill="black" opacity="0.3" />
-  <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C472.744 179.386 472.315 185.679 468.053 189.169C462.618 193.559 453.165 191.729 446.872 185.064C446.186 184.326 445.55 183.543 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C469.011 173.98 468.468 174.338 467.881 174.695C460.144 179.344 455.167 178.385 446.114 182.161C445.722 182.324 445.34 182.51 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="black" opacity="0.1" />
-  <path d="M585.599 343.37V364.122L575.587 372.703V346.831L585.384 342.212L585.599 343.37Z" fill="black" opacity="0.15" />
-  <path d="M520.025 263.695C518.559 268.03 515.781 271.802 512.076 274.488C508.37 277.173 503.921 278.64 499.345 278.683L483.141 326.766L476.205 347.274L473.273 355.927C476.717 358.617 479.284 362.269 480.65 366.42C482.016 370.571 482.119 375.034 480.946 379.243C479.772 383.452 477.376 387.219 474.059 390.064C470.743 392.91 466.657 394.707 462.318 395.228L469.04 375.377C469.299 374.598 469.24 373.747 468.876 373.011C468.512 372.274 467.872 371.711 467.095 371.444L454.967 367.34C454.187 367.08 453.337 367.139 452.6 367.503C451.864 367.867 451.301 368.508 451.034 369.285L444.326 389.135C441.191 386.09 439.031 382.181 438.122 377.905C437.212 373.629 437.594 369.179 439.219 365.121C440.843 361.063 443.637 357.579 447.246 355.112C450.855 352.644 455.115 351.305 459.486 351.265L462.347 342.941L469.412 322.046L485.573 274.021C482.129 271.331 479.561 267.679 478.195 263.528C476.829 259.377 476.726 254.914 477.9 250.705C479.073 246.495 481.47 242.729 484.786 239.883C488.102 237.038 492.189 235.24 496.528 234.72L489.806 254.571C489.673 254.956 489.619 255.365 489.645 255.772C489.671 256.179 489.778 256.577 489.959 256.942C490.14 257.308 490.391 257.634 490.699 257.902C491.006 258.17 491.364 258.375 491.751 258.504L503.864 262.608C504.644 262.868 505.494 262.809 506.231 262.445C506.967 262.08 507.53 261.44 507.797 260.663L514.519 240.812C517.507 243.715 519.611 247.406 520.585 251.457C521.56 255.507 521.366 259.751 520.025 263.695Z" fill="#A7AAB3" />
-  <path d="M483.141 326.766L476.205 347.274C473.637 346.92 471.106 346.341 468.639 345.544C466.472 344.831 464.359 343.961 462.318 342.941L469.383 322.046C471.541 322.405 473.668 322.926 475.747 323.605C478.306 324.422 480.782 325.48 483.141 326.766Z" fill="black" opacity="0.1" />
-  <path d="M477.421 302.581C474.667 302.666 471.941 303.148 469.326 304.012C459.915 306.872 453.765 314.023 454.638 322.175C455.782 332.544 467.738 340.524 481.396 340.052C482.907 339.986 484.412 339.823 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.421 302.581Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M477.42 302.581C474.667 302.666 471.941 303.148 469.326 304.012C469.555 305.07 469.755 306.014 470.012 307.001C473.344 320.058 479.623 324.263 485.244 337.764C485.499 338.35 485.719 338.952 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.42 302.581Z" fill="black" opacity="0.1" />
-  <path d="M640.36 287.951C638.93 310.59 624.628 332.93 601.002 350.178C579.177 366.095 549.387 377.694 514.391 381.184C508.167 370.155 502.23 358.967 496.585 347.632C494.726 343.928 492.909 340.181 491.079 336.362C483.928 321.46 477.664 307.044 472.129 293.271C487.689 298.377 551.975 318.442 589.932 302.152C596.811 299.206 610.541 293.4 612.486 282.13C613.048 278.08 612.317 273.956 610.398 270.345C608.798 267.347 607.829 264.053 607.55 260.666C607.271 257.279 607.688 253.871 608.776 250.652C609.864 247.432 611.599 244.469 613.876 241.946C616.152 239.422 618.92 237.392 622.011 235.978C640.46 260.177 640.861 279.87 640.36 287.951Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-  <path d="M601.002 350.178C579.177 366.095 549.387 377.694 514.39 381.184C511.347 375.792 508.372 370.361 505.466 364.894C501.376 357.2 497.519 349.634 493.896 342.197C505.942 349.292 519.121 354.256 532.854 356.871C555.749 361.042 579.355 358.723 601.002 350.178Z" fill="black" opacity="0.1" />
-</svg>
-```
-
-## Color of the illustration
-
-You can change the color of the illustration by setting the `--tblr-illustrations-primary` CSS variable to the desired color. This will change the color of the primary elements in the illustration.
-
-```html
-<div style="--tblr-illustrations-primary: #CC0000">
-  <svg>...</svg>
-</div>
-```
-
-You can customize it globally by setting the variable on the `body` element or locally by setting it on a parent element.
-
-```css
-body {
---tblr-illustrations-primary: #CC0000;
-}
-```
-
-```html example columns={1} centered vertical height="25rem"
-<div style="--tblr-illustrations-primary: #CC0000">
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
-    <path d="M165.042 305.17C165.042 347.031 209.306 377.394 228.857 411.189C249.036 446.056 253.885 499.359 288.752 519.524C322.562 539.075 370.673 517.207 412.534 517.207C454.395 517.207 502.506 539.075 536.301 519.524C571.168 499.359 576.017 446.056 596.196 411.189C615.747 377.394 660.011 347.031 660.011 305.17C660.011 263.309 615.747 232.961 596.196 199.166C576.017 164.298 571.168 110.996 536.301 90.8302C502.506 71.2798 454.381 93.1471 412.534 93.1471C370.687 93.1471 322.562 71.2798 288.752 90.8302C253.885 110.996 249.036 164.298 228.857 199.166C209.306 232.961 165.042 263.323 165.042 305.17Z" fill="#F7F8FC" class="tblr-illustrations-computer-fix-a" />
-    <path d="M375.492 479.923C470.481 479.923 547.485 476.824 547.485 473.001C547.485 469.178 470.481 466.079 375.492 466.079C280.503 466.079 203.5 469.178 203.5 473.001C203.5 476.824 280.503 479.923 375.492 479.923Z" fill="#A6A9B3" class="tblr-illustrations-computer-fix-b" />
-    <path d="M511.988 174.667C493.855 167.122 474.216 163.9 454.624 165.256L456.64 177.084L511.988 174.667Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M518.452 301.638L572.584 329.197L591.949 299.006L602.918 281.844C608.639 272.891 617.062 260.034 627.674 244.159C626.096 241.199 624.176 238.434 621.954 235.921C616.989 230.419 610.739 226.233 603.762 223.736H603.633C599.858 222.306 595.996 221.019 592.192 219.674C585.755 217.369 579.457 214.695 573.328 211.665C568.623 209.377 563.545 206.66 558.154 203.428C555.15 210.807 552.161 218.187 549.187 225.567C543.466 239.868 537.697 254.132 531.881 268.357C527.419 279.465 522.943 290.558 518.452 301.638Z" fill="#DADBE0" />
-    <path d="M573.328 211.665L580.908 225.338L581.866 225.567C589.204 227.065 596.817 226.429 603.805 223.736H603.676C599.9 222.306 596.039 221.019 592.235 219.674C585.784 217.371 579.471 214.697 573.328 211.665Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M627.674 244.216C617.062 260.091 608.696 272.948 602.918 281.901C601.087 284.762 599.757 286.807 594.509 295.016L591.949 299.006L582.738 313.308L572.584 329.14L518.466 301.623C522.928 290.563 527.405 279.494 531.896 268.415L549.186 225.638C549.286 225.409 549.372 225.181 549.472 224.966C551.379 220.132 553.329 215.303 555.322 210.478C556.275 208.152 557.229 205.816 558.182 203.471C561.171 205.287 564.089 206.917 566.878 208.405C569.109 209.606 571.268 210.707 573.356 211.737C579.485 214.732 585.778 217.377 592.206 219.66C596.01 221.004 599.872 222.234 603.647 223.722H603.776C604.648 224.079 605.521 224.423 606.365 224.823C612.359 227.307 617.709 231.121 622.011 235.978C624.209 238.497 626.11 241.261 627.674 244.216Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M600.816 220.246C592.321 224.537 585.441 224.852 580.507 224.165C580.221 224.165 579.95 224.094 579.678 224.036L572.069 212.595C578.204 212.59 584.3 213.555 590.132 215.455C593.844 216.693 597.423 218.298 600.816 220.246Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M191.729 429.895L559.226 429.895C571.011 429.895 580.564 420.342 580.564 408.557V198.408C580.564 186.623 571.011 177.07 559.226 177.07L191.729 177.07C179.945 177.07 170.391 186.623 170.391 198.408V408.557C170.391 420.342 179.945 429.895 191.729 429.895Z" fill="white" class="tblr-illustrations-computer-fix-c" />
-    <path d="M585.585 197.736C585.395 190.871 582.538 184.35 577.619 179.557C572.701 174.764 566.108 172.076 559.241 172.064H191.687C184.702 172.072 178.006 174.849 173.067 179.788C168.128 184.727 165.35 191.423 165.343 198.408V408.643C165.35 415.628 168.128 422.324 173.067 427.263C178.006 432.201 184.702 434.979 191.687 434.987H326.008V443.94C324.578 453.679 318.042 456.425 313.466 457.126H262.537C261.503 457.13 260.512 457.542 259.781 458.274C259.049 459.005 258.637 459.996 258.633 461.03V465.55C258.637 466.584 259.049 467.575 259.781 468.306C260.512 469.038 261.503 469.45 262.537 469.454H488.504C489.017 469.454 489.525 469.353 489.999 469.157C490.472 468.961 490.903 468.673 491.265 468.31C491.628 467.948 491.915 467.517 492.112 467.044C492.308 466.57 492.409 466.062 492.409 465.55V461.03C492.409 460.517 492.308 460.01 492.112 459.536C491.915 459.062 491.628 458.632 491.265 458.269C490.903 457.907 490.472 457.619 489.999 457.423C489.525 457.227 489.017 457.126 488.504 457.126H437.476C432.899 456.425 426.306 453.665 424.933 443.868V434.915H559.241C566.226 434.908 572.924 432.13 577.865 427.192C582.806 422.254 585.587 415.557 585.599 408.571V198.336C585.599 198.179 585.599 197.964 585.585 197.736ZM575.573 408.571C575.57 412.898 573.849 417.047 570.79 420.106C567.73 423.166 563.582 424.886 559.255 424.89H191.701C187.374 424.886 183.226 423.166 180.166 420.106C177.107 417.047 175.386 412.898 175.383 408.571V198.336C175.386 194.01 177.107 189.861 180.166 186.802C183.226 183.742 187.374 182.022 191.701 182.018H559.255C561.484 182.012 563.691 182.469 565.734 183.362C568.656 184.626 571.144 186.717 572.892 189.378C574.641 192.039 575.573 195.153 575.573 198.336V408.571Z" fill="#232B41" class="tblr-illustrations-computer-fix-d" />
-    <path d="M211.108 222.706L443.454 222.706C444.497 222.706 445.342 221.861 445.342 220.819V214.798C445.342 213.755 444.497 212.91 443.454 212.91L211.108 212.91C210.066 212.91 209.22 213.755 209.22 214.798V220.819C209.22 221.861 210.066 222.706 211.108 222.706Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M211.094 314.981H252.111C253.146 314.981 253.985 314.142 253.985 313.108V307.058C253.985 306.023 253.146 305.184 252.111 305.184H211.094C210.059 305.184 209.22 306.023 209.22 307.058V313.108C209.22 314.142 210.059 314.981 211.094 314.981Z" fill="#DADBE0" />
-    <path d="M211.809 279.856H368.97C370.4 279.856 371.559 278.697 371.559 277.267V250.595C371.559 249.165 370.4 248.006 368.97 248.006L211.809 248.006C210.379 248.006 209.22 249.165 209.22 250.595V277.267C209.22 278.697 210.379 279.856 211.809 279.856Z" fill="#A7AAB3" />
-    <path d="M389.479 335.733L382.271 326.78L363.822 341.611L346.56 320.144L331.586 332.2L348.848 353.667L330.399 368.498L337.593 377.465L356.042 362.62L373.304 384.087L388.292 372.031L371.03 350.564L389.479 335.733Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M591.934 268.701C593.522 258.689 602.961 233.776 606.393 224.895C605.55 224.494 604.677 224.151 603.805 223.793H603.676C597.784 223.936 594.695 223.45 594.451 222.363C594.266 221.548 595.567 220.418 598.356 218.945C595.969 217.727 593.498 216.68 590.962 215.813C589.216 215.204 587.44 214.684 585.642 214.254L585.413 309.389C587.615 305.957 589.818 302.539 592.006 299.106L594.566 295.116C592.635 286.034 590.919 275.094 591.934 268.701ZM485.401 254.857C484.8 254.942 484.114 259.376 486.288 262.208C486.835 262.909 487.534 263.476 488.333 263.867C487.189 258.861 486.002 254.785 485.401 254.857ZM507.354 307.487C505.774 306.55 504.119 305.747 502.406 305.084C503.966 306.056 505.625 306.862 507.354 307.487ZM469.283 332.115L465.765 355.569L469.583 349.491C469.14 343.71 469.039 337.908 469.283 332.115ZM514.004 331.385C514.763 329.722 515.32 327.975 515.663 326.179C506.08 322.786 496.693 318.861 487.546 314.423C485.44 321.176 482.706 327.717 479.38 333.959L469.583 349.534C469.755 351.293 469.984 353.038 470.298 354.711C472.043 364.122 476.219 370.586 479.408 375.535C485.661 385.147 494.013 393.215 503.836 399.132C530.306 400.116 556.093 390.607 575.588 372.674V364.994L514.004 331.385Z" fill="black" opacity="0.1" />
-    <path d="M514.376 314.638C512.764 311.667 510.325 309.227 507.354 307.616C505.625 306.99 503.966 306.185 502.406 305.213L502.148 305.084C502.148 305.084 502.248 305.084 502.406 305.213C504.119 305.875 505.774 306.679 507.354 307.616C507.997 307.787 508.527 307.802 508.784 307.53C510.1 306.243 503.478 300.451 502.005 290.783C501.633 288.251 500.761 282.502 504.05 277.182C508.169 270.517 515.935 269.244 517.422 269.015C511.358 267.019 505.07 265.785 498.701 265.34C494.411 265.039 490.835 265.182 488.318 263.91C489.348 268.372 490.349 273.549 490.864 277.153C492.515 289.684 491.377 302.426 487.532 314.466C496.679 318.904 506.065 322.829 515.649 326.222C516.477 322.324 516.031 318.263 514.376 314.638ZM585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397C565.562 223.564 557.567 213.668 557.567 202.069C557.567 190.47 565.562 180.616 576.789 176.741C579.63 175.787 582.59 175.233 585.584 175.096Z" fill="black" opacity="0.1" />
-    <path d="M585.57 222.935L609.483 216.128L613.501 223.278L588.974 239.868C587.816 237.194 586.643 234.505 585.484 231.817C585.556 228.827 585.556 225.967 585.57 222.935Z" fill="#DADBE0" />
-    <path d="M585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397L575.559 226.954V198.351C575.558 195.167 574.626 192.053 572.878 189.392C571.13 186.732 568.641 184.641 565.719 183.377C568.431 180.786 571.61 178.733 575.087 177.327C575.645 177.098 576.217 176.884 576.789 176.683C579.633 175.749 582.593 175.215 585.584 175.096Z" fill="black" opacity="0.3" />
-    <path d="M610.198 137.454C611.056 141.973 612.186 148.609 613.358 156.818C613.587 158.62 613.816 160.194 613.902 160.737C614.881 169.779 614.722 178.908 613.43 187.91C613.144 189.698 612.843 191.4 612.429 193.073C611.299 197.707 600.287 205.258 587.072 209.706C582.519 211.261 577.817 212.34 573.042 212.924C558.182 214.712 548.414 204.586 548.343 195.762C548.293 193.608 548.896 191.488 550.073 189.684C552.13 186.006 553.496 181.983 554.106 177.813C555.126 172.287 555.748 166.695 555.966 161.08C556.166 157.877 556.151 155.789 556.151 155.789L567.593 140.214L601.845 132.348C602.761 138.197 605.178 141.844 607.066 141.787C608.953 141.73 609.955 138.212 610.198 137.454Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M610.198 137.454C611.041 141.973 612.185 148.609 613.373 156.818C613.587 158.62 613.816 160.208 613.887 160.737C614.877 169.778 614.728 178.907 613.444 187.91C611.07 187.716 608.754 187.071 606.622 186.008C604.293 184.813 602.223 183.171 600.53 181.174C598.789 179.022 597.399 176.608 596.411 174.023C595.671 172.382 595.036 170.696 594.509 168.975C582.401 176.336 568.178 179.433 554.106 177.77C555.126 172.244 555.747 166.652 555.965 161.037C556.166 157.834 556.151 155.731 556.151 155.731L567.593 140.171L601.845 132.348C602.761 138.197 605.178 141.844 607.065 141.773C608.953 141.701 610.026 138.212 610.269 137.482" fill="black" opacity="0.1" />
-    <path d="M616.147 143.804C617.621 150.946 616.333 158.382 612.543 164.613C611.699 165.705 610.934 166.857 610.255 168.059C608.586 171.497 607.8 175.297 607.967 179.115C605.963 177.555 604.47 175.434 603.676 173.022C602.575 169.318 602.618 161.996 602.475 161.009V160.408C602.475 160.079 602.389 159.636 602.275 158.778C601.977 156.941 601.562 155.126 601.03 153.343C601.023 153.249 600.988 153.16 600.93 153.086C593.479 160.322 571.769 178.829 552.304 169.962C549.27 168.595 546.452 166.793 543.938 164.613C543.696 164.444 543.479 164.242 543.294 164.012C542.682 163.466 542.104 162.884 541.564 162.267L541.406 162.11C540.013 160.506 538.892 158.685 538.088 156.718L537.488 155.889C537.211 155.006 537.005 154.102 536.873 153.186C536.555 149.566 537.5 145.948 539.547 142.946C543.251 137.068 549.701 132.62 553.105 130.303C566.291 121.136 588.001 114.728 603.505 124.983C607.42 127.703 610.643 131.303 612.915 135.494C614.324 138.117 615.359 140.923 615.99 143.832" fill="#232B41" class="tblr-illustrations-computer-fix-d" />
-    <path d="M600.744 153.028C593.293 160.265 571.583 178.771 552.118 169.904C549.084 168.538 546.266 166.736 543.752 164.556C543.51 164.387 543.293 164.185 543.108 163.955C542.496 163.409 541.918 162.827 541.378 162.21L541.22 162.053C539.83 160.447 538.709 158.626 537.902 156.661C542.634 159.548 547.809 161.635 553.219 162.839C580.007 168.674 602.146 148.724 605.678 145.534L605.95 145.291C604.428 148.012 602.707 150.618 600.801 153.086" fill="black" opacity="0.5" />
-    <path d="M483.942 177.727C483.944 179.167 483.81 180.604 483.542 182.018H457.484C457.216 180.604 457.082 179.167 457.083 177.727C457.072 175.8 457.298 173.879 457.756 172.007H483.284C483.729 173.881 483.95 175.801 483.942 177.727Z" fill="black" opacity="0.3" />
-    <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C472.744 179.386 472.315 185.679 468.053 189.169C462.618 193.559 453.165 191.729 446.872 185.064C446.186 184.326 445.55 183.543 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C469.011 173.98 468.468 174.338 467.881 174.695C460.144 179.344 455.167 178.385 446.114 182.161C445.722 182.324 445.34 182.51 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="black" opacity="0.1" />
-    <path d="M585.599 343.37V364.122L575.587 372.703V346.831L585.384 342.212L585.599 343.37Z" fill="black" opacity="0.15" />
-    <path d="M520.025 263.695C518.559 268.03 515.781 271.802 512.076 274.488C508.37 277.173 503.921 278.64 499.345 278.683L483.141 326.766L476.205 347.274L473.273 355.927C476.717 358.617 479.284 362.269 480.65 366.42C482.016 370.571 482.119 375.034 480.946 379.243C479.772 383.452 477.376 387.219 474.059 390.064C470.743 392.91 466.657 394.707 462.318 395.228L469.04 375.377C469.299 374.598 469.24 373.747 468.876 373.011C468.512 372.274 467.872 371.711 467.095 371.444L454.967 367.34C454.187 367.08 453.337 367.139 452.6 367.503C451.864 367.867 451.301 368.508 451.034 369.285L444.326 389.135C441.191 386.09 439.031 382.181 438.122 377.905C437.212 373.629 437.594 369.179 439.219 365.121C440.843 361.063 443.637 357.579 447.246 355.112C450.855 352.644 455.115 351.305 459.486 351.265L462.347 342.941L469.412 322.046L485.573 274.021C482.129 271.331 479.561 267.679 478.195 263.528C476.829 259.377 476.726 254.914 477.9 250.705C479.073 246.495 481.47 242.729 484.786 239.883C488.102 237.038 492.189 235.24 496.528 234.72L489.806 254.571C489.673 254.956 489.619 255.365 489.645 255.772C489.671 256.179 489.778 256.577 489.959 256.942C490.14 257.308 490.391 257.634 490.699 257.902C491.006 258.17 491.364 258.375 491.751 258.504L503.864 262.608C504.644 262.868 505.494 262.809 506.231 262.445C506.967 262.08 507.53 261.44 507.797 260.663L514.519 240.812C517.507 243.715 519.611 247.406 520.585 251.457C521.56 255.507 521.366 259.751 520.025 263.695Z" fill="#A7AAB3" />
-    <path d="M483.141 326.766L476.205 347.274C473.637 346.92 471.106 346.341 468.639 345.544C466.472 344.831 464.359 343.961 462.318 342.941L469.383 322.046C471.541 322.405 473.668 322.926 475.747 323.605C478.306 324.422 480.782 325.48 483.141 326.766Z" fill="black" opacity="0.1" />
-    <path d="M477.421 302.581C474.667 302.666 471.941 303.148 469.326 304.012C459.915 306.872 453.765 314.023 454.638 322.175C455.782 332.544 467.738 340.524 481.396 340.052C482.907 339.986 484.412 339.823 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.421 302.581Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M477.42 302.581C474.667 302.666 471.941 303.148 469.326 304.012C469.555 305.07 469.755 306.014 470.012 307.001C473.344 320.058 479.623 324.263 485.244 337.764C485.499 338.35 485.719 338.952 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.42 302.581Z" fill="black" opacity="0.1" />
-    <path d="M640.36 287.951C638.93 310.59 624.628 332.93 601.002 350.178C579.177 366.095 549.387 377.694 514.391 381.184C508.167 370.155 502.23 358.967 496.585 347.632C494.726 343.928 492.909 340.181 491.079 336.362C483.928 321.46 477.664 307.044 472.129 293.271C487.689 298.377 551.975 318.442 589.932 302.152C596.811 299.206 610.541 293.4 612.486 282.13C613.048 278.08 612.317 273.956 610.398 270.345C608.798 267.347 607.829 264.053 607.55 260.666C607.271 257.279 607.688 253.871 608.776 250.652C609.864 247.432 611.599 244.469 613.876 241.946C616.152 239.422 618.92 237.392 622.011 235.978C640.46 260.177 640.861 279.87 640.36 287.951Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M601.002 350.178C579.177 366.095 549.387 377.694 514.39 381.184C511.347 375.792 508.372 370.361 505.466 364.894C501.376 357.2 497.519 349.634 493.896 342.197C505.942 349.292 519.121 354.256 532.854 356.871C555.749 361.042 579.355 358.723 601.002 350.178Z" fill="black" opacity="0.1" />
-  </svg>
-</div>
-```
-
-## Color of the skin
-
-To change the color of the skin, use the `--tblr-illustrations-skin` CSS variable.
-
-```html
-<div style="--tblr-illustrations-skin: #5A433C">
-  <svg>...</svg>
-</div>
-```
-
-Look at the example below to see how you can change the color of the skin.
-
-```html example columns={1} centered vertical height="25rem"
-<div style="--tblr-illustrations-skin: #5A433C">
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
-    <path d="M165.042 305.17C165.042 347.031 209.306 377.394 228.857 411.189C249.036 446.056 253.885 499.359 288.752 519.524C322.562 539.075 370.673 517.207 412.534 517.207C454.395 517.207 502.506 539.075 536.301 519.524C571.168 499.359 576.017 446.056 596.196 411.189C615.747 377.394 660.011 347.031 660.011 305.17C660.011 263.309 615.747 232.961 596.196 199.166C576.017 164.298 571.168 110.996 536.301 90.8302C502.506 71.2798 454.381 93.1471 412.534 93.1471C370.687 93.1471 322.562 71.2798 288.752 90.8302C253.885 110.996 249.036 164.298 228.857 199.166C209.306 232.961 165.042 263.323 165.042 305.17Z" fill="#F7F8FC" class="tblr-illustrations-computer-fix-a" />
-    <path d="M375.492 479.923C470.481 479.923 547.485 476.824 547.485 473.001C547.485 469.178 470.481 466.079 375.492 466.079C280.503 466.079 203.5 469.178 203.5 473.001C203.5 476.824 280.503 479.923 375.492 479.923Z" fill="#A6A9B3" class="tblr-illustrations-computer-fix-b" />
-    <path d="M511.988 174.667C493.855 167.122 474.216 163.9 454.624 165.256L456.64 177.084L511.988 174.667Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M518.452 301.638L572.584 329.197L591.949 299.006L602.918 281.844C608.639 272.891 617.062 260.034 627.674 244.159C626.096 241.199 624.176 238.434 621.954 235.921C616.989 230.419 610.739 226.233 603.762 223.736H603.633C599.858 222.306 595.996 221.019 592.192 219.674C585.755 217.369 579.457 214.695 573.328 211.665C568.623 209.377 563.545 206.66 558.154 203.428C555.15 210.807 552.161 218.187 549.187 225.567C543.466 239.868 537.697 254.132 531.881 268.357C527.419 279.465 522.943 290.558 518.452 301.638Z" fill="#DADBE0" />
-    <path d="M573.328 211.665L580.908 225.338L581.866 225.567C589.204 227.065 596.817 226.429 603.805 223.736H603.676C599.9 222.306 596.039 221.019 592.235 219.674C585.784 217.371 579.471 214.697 573.328 211.665Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M627.674 244.216C617.062 260.091 608.696 272.948 602.918 281.901C601.087 284.762 599.757 286.807 594.509 295.016L591.949 299.006L582.738 313.308L572.584 329.14L518.466 301.623C522.928 290.563 527.405 279.494 531.896 268.415L549.186 225.638C549.286 225.409 549.372 225.181 549.472 224.966C551.379 220.132 553.329 215.303 555.322 210.478C556.275 208.152 557.229 205.816 558.182 203.471C561.171 205.287 564.089 206.917 566.878 208.405C569.109 209.606 571.268 210.707 573.356 211.737C579.485 214.732 585.778 217.377 592.206 219.66C596.01 221.004 599.872 222.234 603.647 223.722H603.776C604.648 224.079 605.521 224.423 606.365 224.823C612.359 227.307 617.709 231.121 622.011 235.978C624.209 238.497 626.11 241.261 627.674 244.216Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M600.816 220.246C592.321 224.537 585.441 224.852 580.507 224.165C580.221 224.165 579.95 224.094 579.678 224.036L572.069 212.595C578.204 212.59 584.3 213.555 590.132 215.455C593.844 216.693 597.423 218.298 600.816 220.246Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M191.729 429.895L559.226 429.895C571.011 429.895 580.564 420.342 580.564 408.557V198.408C580.564 186.623 571.011 177.07 559.226 177.07L191.729 177.07C179.945 177.07 170.391 186.623 170.391 198.408V408.557C170.391 420.342 179.945 429.895 191.729 429.895Z" fill="white" class="tblr-illustrations-computer-fix-c" />
-    <path d="M585.585 197.736C585.395 190.871 582.538 184.35 577.619 179.557C572.701 174.764 566.108 172.076 559.241 172.064H191.687C184.702 172.072 178.006 174.849 173.067 179.788C168.128 184.727 165.35 191.423 165.343 198.408V408.643C165.35 415.628 168.128 422.324 173.067 427.263C178.006 432.201 184.702 434.979 191.687 434.987H326.008V443.94C324.578 453.679 318.042 456.425 313.466 457.126H262.537C261.503 457.13 260.512 457.542 259.781 458.274C259.049 459.005 258.637 459.996 258.633 461.03V465.55C258.637 466.584 259.049 467.575 259.781 468.306C260.512 469.038 261.503 469.45 262.537 469.454H488.504C489.017 469.454 489.525 469.353 489.999 469.157C490.472 468.961 490.903 468.673 491.265 468.31C491.628 467.948 491.915 467.517 492.112 467.044C492.308 466.57 492.409 466.062 492.409 465.55V461.03C492.409 460.517 492.308 460.01 492.112 459.536C491.915 459.062 491.628 458.632 491.265 458.269C490.903 457.907 490.472 457.619 489.999 457.423C489.525 457.227 489.017 457.126 488.504 457.126H437.476C432.899 456.425 426.306 453.665 424.933 443.868V434.915H559.241C566.226 434.908 572.924 432.13 577.865 427.192C582.806 422.254 585.587 415.557 585.599 408.571V198.336C585.599 198.179 585.599 197.964 585.585 197.736ZM575.573 408.571C575.57 412.898 573.849 417.047 570.79 420.106C567.73 423.166 563.582 424.886 559.255 424.89H191.701C187.374 424.886 183.226 423.166 180.166 420.106C177.107 417.047 175.386 412.898 175.383 408.571V198.336C175.386 194.01 177.107 189.861 180.166 186.802C183.226 183.742 187.374 182.022 191.701 182.018H559.255C561.484 182.012 563.691 182.469 565.734 183.362C568.656 184.626 571.144 186.717 572.892 189.378C574.641 192.039 575.573 195.153 575.573 198.336V408.571Z" fill="#232B41" class="tblr-illustrations-computer-fix-d" />
-    <path d="M211.108 222.706L443.454 222.706C444.497 222.706 445.342 221.861 445.342 220.819V214.798C445.342 213.755 444.497 212.91 443.454 212.91L211.108 212.91C210.066 212.91 209.22 213.755 209.22 214.798V220.819C209.22 221.861 210.066 222.706 211.108 222.706Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M211.094 314.981H252.111C253.146 314.981 253.985 314.142 253.985 313.108V307.058C253.985 306.023 253.146 305.184 252.111 305.184H211.094C210.059 305.184 209.22 306.023 209.22 307.058V313.108C209.22 314.142 210.059 314.981 211.094 314.981Z" fill="#DADBE0" />
-    <path d="M211.809 279.856H368.97C370.4 279.856 371.559 278.697 371.559 277.267V250.595C371.559 249.165 370.4 248.006 368.97 248.006L211.809 248.006C210.379 248.006 209.22 249.165 209.22 250.595V277.267C209.22 278.697 210.379 279.856 211.809 279.856Z" fill="#A7AAB3" />
-    <path d="M389.479 335.733L382.271 326.78L363.822 341.611L346.56 320.144L331.586 332.2L348.848 353.667L330.399 368.498L337.593 377.465L356.042 362.62L373.304 384.087L388.292 372.031L371.03 350.564L389.479 335.733Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M591.934 268.701C593.522 258.689 602.961 233.776 606.393 224.895C605.55 224.494 604.677 224.151 603.805 223.793H603.676C597.784 223.936 594.695 223.45 594.451 222.363C594.266 221.548 595.567 220.418 598.356 218.945C595.969 217.727 593.498 216.68 590.962 215.813C589.216 215.204 587.44 214.684 585.642 214.254L585.413 309.389C587.615 305.957 589.818 302.539 592.006 299.106L594.566 295.116C592.635 286.034 590.919 275.094 591.934 268.701ZM485.401 254.857C484.8 254.942 484.114 259.376 486.288 262.208C486.835 262.909 487.534 263.476 488.333 263.867C487.189 258.861 486.002 254.785 485.401 254.857ZM507.354 307.487C505.774 306.55 504.119 305.747 502.406 305.084C503.966 306.056 505.625 306.862 507.354 307.487ZM469.283 332.115L465.765 355.569L469.583 349.491C469.14 343.71 469.039 337.908 469.283 332.115ZM514.004 331.385C514.763 329.722 515.32 327.975 515.663 326.179C506.08 322.786 496.693 318.861 487.546 314.423C485.44 321.176 482.706 327.717 479.38 333.959L469.583 349.534C469.755 351.293 469.984 353.038 470.298 354.711C472.043 364.122 476.219 370.586 479.408 375.535C485.661 385.147 494.013 393.215 503.836 399.132C530.306 400.116 556.093 390.607 575.588 372.674V364.994L514.004 331.385Z" fill="black" opacity="0.1" />
-    <path d="M514.376 314.638C512.764 311.667 510.325 309.227 507.354 307.616C505.625 306.99 503.966 306.185 502.406 305.213L502.148 305.084C502.148 305.084 502.248 305.084 502.406 305.213C504.119 305.875 505.774 306.679 507.354 307.616C507.997 307.787 508.527 307.802 508.784 307.53C510.1 306.243 503.478 300.451 502.005 290.783C501.633 288.251 500.761 282.502 504.05 277.182C508.169 270.517 515.935 269.244 517.422 269.015C511.358 267.019 505.07 265.785 498.701 265.34C494.411 265.039 490.835 265.182 488.318 263.91C489.348 268.372 490.349 273.549 490.864 277.153C492.515 289.684 491.377 302.426 487.532 314.466C496.679 318.904 506.065 322.829 515.649 326.222C516.477 322.324 516.031 318.263 514.376 314.638ZM585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397C565.562 223.564 557.567 213.668 557.567 202.069C557.567 190.47 565.562 180.616 576.789 176.741C579.63 175.787 582.59 175.233 585.584 175.096Z" fill="black" opacity="0.1" />
-    <path d="M585.57 222.935L609.483 216.128L613.501 223.278L588.974 239.868C587.816 237.194 586.643 234.505 585.484 231.817C585.556 228.827 585.556 225.967 585.57 222.935Z" fill="#DADBE0" />
-    <path d="M585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397L575.559 226.954V198.351C575.558 195.167 574.626 192.053 572.878 189.392C571.13 186.732 568.641 184.641 565.719 183.377C568.431 180.786 571.61 178.733 575.087 177.327C575.645 177.098 576.217 176.884 576.789 176.683C579.633 175.749 582.593 175.215 585.584 175.096Z" fill="black" opacity="0.3" />
-    <path d="M610.198 137.454C611.056 141.973 612.186 148.609 613.358 156.818C613.587 158.62 613.816 160.194 613.902 160.737C614.881 169.779 614.722 178.908 613.43 187.91C613.144 189.698 612.843 191.4 612.429 193.073C611.299 197.707 600.287 205.258 587.072 209.706C582.519 211.261 577.817 212.34 573.042 212.924C558.182 214.712 548.414 204.586 548.343 195.762C548.293 193.608 548.896 191.488 550.073 189.684C552.13 186.006 553.496 181.983 554.106 177.813C555.126 172.287 555.748 166.695 555.966 161.08C556.166 157.877 556.151 155.789 556.151 155.789L567.593 140.214L601.845 132.348C602.761 138.197 605.178 141.844 607.066 141.787C608.953 141.73 609.955 138.212 610.198 137.454Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M610.198 137.454C611.041 141.973 612.185 148.609 613.373 156.818C613.587 158.62 613.816 160.208 613.887 160.737C614.877 169.778 614.728 178.907 613.444 187.91C611.07 187.716 608.754 187.071 606.622 186.008C604.293 184.813 602.223 183.171 600.53 181.174C598.789 179.022 597.399 176.608 596.411 174.023C595.671 172.382 595.036 170.696 594.509 168.975C582.401 176.336 568.178 179.433 554.106 177.77C555.126 172.244 555.747 166.652 555.965 161.037C556.166 157.834 556.151 155.731 556.151 155.731L567.593 140.171L601.845 132.348C602.761 138.197 605.178 141.844 607.065 141.773C608.953 141.701 610.026 138.212 610.269 137.482" fill="black" opacity="0.1" />
-    <path d="M616.147 143.804C617.621 150.946 616.333 158.382 612.543 164.613C611.699 165.705 610.934 166.857 610.255 168.059C608.586 171.497 607.8 175.297 607.967 179.115C605.963 177.555 604.47 175.434 603.676 173.022C602.575 169.318 602.618 161.996 602.475 161.009V160.408C602.475 160.079 602.389 159.636 602.275 158.778C601.977 156.941 601.562 155.126 601.03 153.343C601.023 153.249 600.988 153.16 600.93 153.086C593.479 160.322 571.769 178.829 552.304 169.962C549.27 168.595 546.452 166.793 543.938 164.613C543.696 164.444 543.479 164.242 543.294 164.012C542.682 163.466 542.104 162.884 541.564 162.267L541.406 162.11C540.013 160.506 538.892 158.685 538.088 156.718L537.488 155.889C537.211 155.006 537.005 154.102 536.873 153.186C536.555 149.566 537.5 145.948 539.547 142.946C543.251 137.068 549.701 132.62 553.105 130.303C566.291 121.136 588.001 114.728 603.505 124.983C607.42 127.703 610.643 131.303 612.915 135.494C614.324 138.117 615.359 140.923 615.99 143.832" fill="#232B41" class="tblr-illustrations-computer-fix-d" />
-    <path d="M600.744 153.028C593.293 160.265 571.583 178.771 552.118 169.904C549.084 168.538 546.266 166.736 543.752 164.556C543.51 164.387 543.293 164.185 543.108 163.955C542.496 163.409 541.918 162.827 541.378 162.21L541.22 162.053C539.83 160.447 538.709 158.626 537.902 156.661C542.634 159.548 547.809 161.635 553.219 162.839C580.007 168.674 602.146 148.724 605.678 145.534L605.95 145.291C604.428 148.012 602.707 150.618 600.801 153.086" fill="black" opacity="0.5" />
-    <path d="M483.942 177.727C483.944 179.167 483.81 180.604 483.542 182.018H457.484C457.216 180.604 457.082 179.167 457.083 177.727C457.072 175.8 457.298 173.879 457.756 172.007H483.284C483.729 173.881 483.95 175.801 483.942 177.727Z" fill="black" opacity="0.3" />
-    <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C472.744 179.386 472.315 185.679 468.053 189.169C462.618 193.559 453.165 191.729 446.872 185.064C446.186 184.326 445.55 183.543 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C469.011 173.98 468.468 174.338 467.881 174.695C460.144 179.344 455.167 178.385 446.114 182.161C445.722 182.324 445.34 182.51 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="black" opacity="0.1" />
-    <path d="M585.599 343.37V364.122L575.587 372.703V346.831L585.384 342.212L585.599 343.37Z" fill="black" opacity="0.15" />
-    <path d="M520.025 263.695C518.559 268.03 515.781 271.802 512.076 274.488C508.37 277.173 503.921 278.64 499.345 278.683L483.141 326.766L476.205 347.274L473.273 355.927C476.717 358.617 479.284 362.269 480.65 366.42C482.016 370.571 482.119 375.034 480.946 379.243C479.772 383.452 477.376 387.219 474.059 390.064C470.743 392.91 466.657 394.707 462.318 395.228L469.04 375.377C469.299 374.598 469.24 373.747 468.876 373.011C468.512 372.274 467.872 371.711 467.095 371.444L454.967 367.34C454.187 367.08 453.337 367.139 452.6 367.503C451.864 367.867 451.301 368.508 451.034 369.285L444.326 389.135C441.191 386.09 439.031 382.181 438.122 377.905C437.212 373.629 437.594 369.179 439.219 365.121C440.843 361.063 443.637 357.579 447.246 355.112C450.855 352.644 455.115 351.305 459.486 351.265L462.347 342.941L469.412 322.046L485.573 274.021C482.129 271.331 479.561 267.679 478.195 263.528C476.829 259.377 476.726 254.914 477.9 250.705C479.073 246.495 481.47 242.729 484.786 239.883C488.102 237.038 492.189 235.24 496.528 234.72L489.806 254.571C489.673 254.956 489.619 255.365 489.645 255.772C489.671 256.179 489.778 256.577 489.959 256.942C490.14 257.308 490.391 257.634 490.699 257.902C491.006 258.17 491.364 258.375 491.751 258.504L503.864 262.608C504.644 262.868 505.494 262.809 506.231 262.445C506.967 262.08 507.53 261.44 507.797 260.663L514.519 240.812C517.507 243.715 519.611 247.406 520.585 251.457C521.56 255.507 521.366 259.751 520.025 263.695Z" fill="#A7AAB3" />
-    <path d="M483.141 326.766L476.205 347.274C473.637 346.92 471.106 346.341 468.639 345.544C466.472 344.831 464.359 343.961 462.318 342.941L469.383 322.046C471.541 322.405 473.668 322.926 475.747 323.605C478.306 324.422 480.782 325.48 483.141 326.766Z" fill="black" opacity="0.1" />
-    <path d="M477.421 302.581C474.667 302.666 471.941 303.148 469.326 304.012C459.915 306.872 453.765 314.023 454.638 322.175C455.782 332.544 467.738 340.524 481.396 340.052C482.907 339.986 484.412 339.823 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.421 302.581Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M477.42 302.581C474.667 302.666 471.941 303.148 469.326 304.012C469.555 305.07 469.755 306.014 470.012 307.001C473.344 320.058 479.623 324.263 485.244 337.764C485.499 338.35 485.719 338.952 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.42 302.581Z" fill="black" opacity="0.1" />
-    <path d="M640.36 287.951C638.93 310.59 624.628 332.93 601.002 350.178C579.177 366.095 549.387 377.694 514.391 381.184C508.167 370.155 502.23 358.967 496.585 347.632C494.726 343.928 492.909 340.181 491.079 336.362C483.928 321.46 477.664 307.044 472.129 293.271C487.689 298.377 551.975 318.442 589.932 302.152C596.811 299.206 610.541 293.4 612.486 282.13C613.048 278.08 612.317 273.956 610.398 270.345C608.798 267.347 607.829 264.053 607.55 260.666C607.271 257.279 607.688 253.871 608.776 250.652C609.864 247.432 611.599 244.469 613.876 241.946C616.152 239.422 618.92 237.392 622.011 235.978C640.46 260.177 640.861 279.87 640.36 287.951Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-    <path d="M601.002 350.178C579.177 366.095 549.387 377.694 514.39 381.184C511.347 375.792 508.372 370.361 505.466 364.894C501.376 357.2 497.519 349.634 493.896 342.197C505.942 349.292 519.121 354.256 532.854 356.871C555.749 361.042 579.355 358.723 601.002 350.178Z" fill="black" opacity="0.1" />
-  </svg>
-</div>
-```
-
-
-## Application Brand Color
-
-Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illustrations-primary` is not set, so if you have a primary color set in your design system, you can use that to ensure consistency across your project.
-
-```html example columns={1} centered vertical separated height="30rem"
-<div class="card">
-  <div class="card-body">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
-        <path d="M165.042 305.17C165.042 347.031 209.306 377.394 228.857 411.189C249.036 446.056 253.885 499.359 288.752 519.524C322.562 539.075 370.673 517.207 412.534 517.207C454.395 517.207 502.506 539.075 536.301 519.524C571.168 499.359 576.017 446.056 596.196 411.189C615.747 377.394 660.011 347.031 660.011 305.17C660.011 263.309 615.747 232.961 596.196 199.166C576.017 164.298 571.168 110.996 536.301 90.8302C502.506 71.2798 454.381 93.1471 412.534 93.1471C370.687 93.1471 322.562 71.2798 288.752 90.8302C253.885 110.996 249.036 164.298 228.857 199.166C209.306 232.961 165.042 263.323 165.042 305.17Z" fill="#F7F8FC" class="tblr-illustrations-computer-fix-a" />
-        <path d="M375.492 479.923C470.481 479.923 547.485 476.824 547.485 473.001C547.485 469.178 470.481 466.079 375.492 466.079C280.503 466.079 203.5 469.178 203.5 473.001C203.5 476.824 280.503 479.923 375.492 479.923Z" fill="#A6A9B3" class="tblr-illustrations-computer-fix-b" />
-        <path d="M511.988 174.667C493.855 167.122 474.216 163.9 454.624 165.256L456.64 177.084L511.988 174.667Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-        <path d="M518.452 301.638L572.584 329.197L591.949 299.006L602.918 281.844C608.639 272.891 617.062 260.034 627.674 244.159C626.096 241.199 624.176 238.434 621.954 235.921C616.989 230.419 610.739 226.233 603.762 223.736H603.633C599.858 222.306 595.996 221.019 592.192 219.674C585.755 217.369 579.457 214.695 573.328 211.665C568.623 209.377 563.545 206.66 558.154 203.428C555.15 210.807 552.161 218.187 549.187 225.567C543.466 239.868 537.697 254.132 531.881 268.357C527.419 279.465 522.943 290.558 518.452 301.638Z" fill="#DADBE0" />
-        <path d="M573.328 211.665L580.908 225.338L581.866 225.567C589.204 227.065 596.817 226.429 603.805 223.736H603.676C599.9 222.306 596.039 221.019 592.235 219.674C585.784 217.371 579.471 214.697 573.328 211.665Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-        <path d="M627.674 244.216C617.062 260.091 608.696 272.948 602.918 281.901C601.087 284.762 599.757 286.807 594.509 295.016L591.949 299.006L582.738 313.308L572.584 329.14L518.466 301.623C522.928 290.563 527.405 279.494 531.896 268.415L549.186 225.638C549.286 225.409 549.372 225.181 549.472 224.966C551.379 220.132 553.329 215.303 555.322 210.478C556.275 208.152 557.229 205.816 558.182 203.471C561.171 205.287 564.089 206.917 566.878 208.405C569.109 209.606 571.268 210.707 573.356 211.737C579.485 214.732 585.778 217.377 592.206 219.66C596.01 221.004 599.872 222.234 603.647 223.722H603.776C604.648 224.079 605.521 224.423 606.365 224.823C612.359 227.307 617.709 231.121 622.011 235.978C624.209 238.497 626.11 241.261 627.674 244.216Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-        <path d="M600.816 220.246C592.321 224.537 585.441 224.852 580.507 224.165C580.221 224.165 579.95 224.094 579.678 224.036L572.069 212.595C578.204 212.59 584.3 213.555 590.132 215.455C593.844 216.693 597.423 218.298 600.816 220.246Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-        <path d="M191.729 429.895L559.226 429.895C571.011 429.895 580.564 420.342 580.564 408.557V198.408C580.564 186.623 571.011 177.07 559.226 177.07L191.729 177.07C179.945 177.07 170.391 186.623 170.391 198.408V408.557C170.391 420.342 179.945 429.895 191.729 429.895Z" fill="white" class="tblr-illustrations-computer-fix-c" />
-        <path d="M585.585 197.736C585.395 190.871 582.538 184.35 577.619 179.557C572.701 174.764 566.108 172.076 559.241 172.064H191.687C184.702 172.072 178.006 174.849 173.067 179.788C168.128 184.727 165.35 191.423 165.343 198.408V408.643C165.35 415.628 168.128 422.324 173.067 427.263C178.006 432.201 184.702 434.979 191.687 434.987H326.008V443.94C324.578 453.679 318.042 456.425 313.466 457.126H262.537C261.503 457.13 260.512 457.542 259.781 458.274C259.049 459.005 258.637 459.996 258.633 461.03V465.55C258.637 466.584 259.049 467.575 259.781 468.306C260.512 469.038 261.503 469.45 262.537 469.454H488.504C489.017 469.454 489.525 469.353 489.999 469.157C490.472 468.961 490.903 468.673 491.265 468.31C491.628 467.948 491.915 467.517 492.112 467.044C492.308 466.57 492.409 466.062 492.409 465.55V461.03C492.409 460.517 492.308 460.01 492.112 459.536C491.915 459.062 491.628 458.632 491.265 458.269C490.903 457.907 490.472 457.619 489.999 457.423C489.525 457.227 489.017 457.126 488.504 457.126H437.476C432.899 456.425 426.306 453.665 424.933 443.868V434.915H559.241C566.226 434.908 572.924 432.13 577.865 427.192C582.806 422.254 585.587 415.557 585.599 408.571V198.336C585.599 198.179 585.599 197.964 585.585 197.736ZM575.573 408.571C575.57 412.898 573.849 417.047 570.79 420.106C567.73 423.166 563.582 424.886 559.255 424.89H191.701C187.374 424.886 183.226 423.166 180.166 420.106C177.107 417.047 175.386 412.898 175.383 408.571V198.336C175.386 194.01 177.107 189.861 180.166 186.802C183.226 183.742 187.374 182.022 191.701 182.018H559.255C561.484 182.012 563.691 182.469 565.734 183.362C568.656 184.626 571.144 186.717 572.892 189.378C574.641 192.039 575.573 195.153 575.573 198.336V408.571Z" fill="#232B41" class="tblr-illustrations-computer-fix-d" />
-        <path d="M211.108 222.706L443.454 222.706C444.497 222.706 445.342 221.861 445.342 220.819V214.798C445.342 213.755 444.497 212.91 443.454 212.91L211.108 212.91C210.066 212.91 209.22 213.755 209.22 214.798V220.819C209.22 221.861 210.066 222.706 211.108 222.706Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-        <path d="M211.094 314.981H252.111C253.146 314.981 253.985 314.142 253.985 313.108V307.058C253.985 306.023 253.146 305.184 252.111 305.184H211.094C210.059 305.184 209.22 306.023 209.22 307.058V313.108C209.22 314.142 210.059 314.981 211.094 314.981Z" fill="#DADBE0" />
-        <path d="M211.809 279.856H368.97C370.4 279.856 371.559 278.697 371.559 277.267V250.595C371.559 249.165 370.4 248.006 368.97 248.006L211.809 248.006C210.379 248.006 209.22 249.165 209.22 250.595V277.267C209.22 278.697 210.379 279.856 211.809 279.856Z" fill="#A7AAB3" />
-        <path d="M389.479 335.733L382.271 326.78L363.822 341.611L346.56 320.144L331.586 332.2L348.848 353.667L330.399 368.498L337.593 377.465L356.042 362.62L373.304 384.087L388.292 372.031L371.03 350.564L389.479 335.733Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-        <path d="M591.934 268.701C593.522 258.689 602.961 233.776 606.393 224.895C605.55 224.494 604.677 224.151 603.805 223.793H603.676C597.784 223.936 594.695 223.45 594.451 222.363C594.266 221.548 595.567 220.418 598.356 218.945C595.969 217.727 593.498 216.68 590.962 215.813C589.216 215.204 587.44 214.684 585.642 214.254L585.413 309.389C587.615 305.957 589.818 302.539 592.006 299.106L594.566 295.116C592.635 286.034 590.919 275.094 591.934 268.701ZM485.401 254.857C484.8 254.942 484.114 259.376 486.288 262.208C486.835 262.909 487.534 263.476 488.333 263.867C487.189 258.861 486.002 254.785 485.401 254.857ZM507.354 307.487C505.774 306.55 504.119 305.747 502.406 305.084C503.966 306.056 505.625 306.862 507.354 307.487ZM469.283 332.115L465.765 355.569L469.583 349.491C469.14 343.71 469.039 337.908 469.283 332.115ZM514.004 331.385C514.763 329.722 515.32 327.975 515.663 326.179C506.08 322.786 496.693 318.861 487.546 314.423C485.44 321.176 482.706 327.717 479.38 333.959L469.583 349.534C469.755 351.293 469.984 353.038 470.298 354.711C472.043 364.122 476.219 370.586 479.408 375.535C485.661 385.147 494.013 393.215 503.836 399.132C530.306 400.116 556.093 390.607 575.588 372.674V364.994L514.004 331.385Z" fill="black" opacity="0.1" />
-        <path d="M514.376 314.638C512.764 311.667 510.325 309.227 507.354 307.616C505.625 306.99 503.966 306.185 502.406 305.213L502.148 305.084C502.148 305.084 502.248 305.084 502.406 305.213C504.119 305.875 505.774 306.679 507.354 307.616C507.997 307.787 508.527 307.802 508.784 307.53C510.1 306.243 503.478 300.451 502.005 290.783C501.633 288.251 500.761 282.502 504.05 277.182C508.169 270.517 515.935 269.244 517.422 269.015C511.358 267.019 505.07 265.785 498.701 265.34C494.411 265.039 490.835 265.182 488.318 263.91C489.348 268.372 490.349 273.549 490.864 277.153C492.515 289.684 491.377 302.426 487.532 314.466C496.679 318.904 506.065 322.829 515.649 326.222C516.477 322.324 516.031 318.263 514.376 314.638ZM585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397C565.562 223.564 557.567 213.668 557.567 202.069C557.567 190.47 565.562 180.616 576.789 176.741C579.63 175.787 582.59 175.233 585.584 175.096Z" fill="black" opacity="0.1" />
-        <path d="M585.57 222.935L609.483 216.128L613.501 223.278L588.974 239.868C587.816 237.194 586.643 234.505 585.484 231.817C585.556 228.827 585.556 225.967 585.57 222.935Z" fill="#DADBE0" />
-        <path d="M585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397L575.559 226.954V198.351C575.558 195.167 574.626 192.053 572.878 189.392C571.13 186.732 568.641 184.641 565.719 183.377C568.431 180.786 571.61 178.733 575.087 177.327C575.645 177.098 576.217 176.884 576.789 176.683C579.633 175.749 582.593 175.215 585.584 175.096Z" fill="black" opacity="0.3" />
-        <path d="M610.198 137.454C611.056 141.973 612.186 148.609 613.358 156.818C613.587 158.62 613.816 160.194 613.902 160.737C614.881 169.779 614.722 178.908 613.43 187.91C613.144 189.698 612.843 191.4 612.429 193.073C611.299 197.707 600.287 205.258 587.072 209.706C582.519 211.261 577.817 212.34 573.042 212.924C558.182 214.712 548.414 204.586 548.343 195.762C548.293 193.608 548.896 191.488 550.073 189.684C552.13 186.006 553.496 181.983 554.106 177.813C555.126 172.287 555.748 166.695 555.966 161.08C556.166 157.877 556.151 155.789 556.151 155.789L567.593 140.214L601.845 132.348C602.761 138.197 605.178 141.844 607.066 141.787C608.953 141.73 609.955 138.212 610.198 137.454Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-        <path d="M610.198 137.454C611.041 141.973 612.185 148.609 613.373 156.818C613.587 158.62 613.816 160.208 613.887 160.737C614.877 169.778 614.728 178.907 613.444 187.91C611.07 187.716 608.754 187.071 606.622 186.008C604.293 184.813 602.223 183.171 600.53 181.174C598.789 179.022 597.399 176.608 596.411 174.023C595.671 172.382 595.036 170.696 594.509 168.975C582.401 176.336 568.178 179.433 554.106 177.77C555.126 172.244 555.747 166.652 555.965 161.037C556.166 157.834 556.151 155.731 556.151 155.731L567.593 140.171L601.845 132.348C602.761 138.197 605.178 141.844 607.065 141.773C608.953 141.701 610.026 138.212 610.269 137.482" fill="black" opacity="0.1" />
-        <path d="M616.147 143.804C617.621 150.946 616.333 158.382 612.543 164.613C611.699 165.705 610.934 166.857 610.255 168.059C608.586 171.497 607.8 175.297 607.967 179.115C605.963 177.555 604.47 175.434 603.676 173.022C602.575 169.318 602.618 161.996 602.475 161.009V160.408C602.475 160.079 602.389 159.636 602.275 158.778C601.977 156.941 601.562 155.126 601.03 153.343C601.023 153.249 600.988 153.16 600.93 153.086C593.479 160.322 571.769 178.829 552.304 169.962C549.27 168.595 546.452 166.793 543.938 164.613C543.696 164.444 543.479 164.242 543.294 164.012C542.682 163.466 542.104 162.884 541.564 162.267L541.406 162.11C540.013 160.506 538.892 158.685 538.088 156.718L537.488 155.889C537.211 155.006 537.005 154.102 536.873 153.186C536.555 149.566 537.5 145.948 539.547 142.946C543.251 137.068 549.701 132.62 553.105 130.303C566.291 121.136 588.001 114.728 603.505 124.983C607.42 127.703 610.643 131.303 612.915 135.494C614.324 138.117 615.359 140.923 615.99 143.832" fill="#232B41" class="tblr-illustrations-computer-fix-d" />
-        <path d="M600.744 153.028C593.293 160.265 571.583 178.771 552.118 169.904C549.084 168.538 546.266 166.736 543.752 164.556C543.51 164.387 543.293 164.185 543.108 163.955C542.496 163.409 541.918 162.827 541.378 162.21L541.22 162.053C539.83 160.447 538.709 158.626 537.902 156.661C542.634 159.548 547.809 161.635 553.219 162.839C580.007 168.674 602.146 148.724 605.678 145.534L605.95 145.291C604.428 148.012 602.707 150.618 600.801 153.086" fill="black" opacity="0.5" />
-        <path d="M483.942 177.727C483.944 179.167 483.81 180.604 483.542 182.018H457.484C457.216 180.604 457.082 179.167 457.083 177.727C457.072 175.8 457.298 173.879 457.756 172.007H483.284C483.729 173.881 483.95 175.801 483.942 177.727Z" fill="black" opacity="0.3" />
-        <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C472.744 179.386 472.315 185.679 468.053 189.169C462.618 193.559 453.165 191.729 446.872 185.064C446.186 184.326 445.55 183.543 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-        <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C469.011 173.98 468.468 174.338 467.881 174.695C460.144 179.344 455.167 178.385 446.114 182.161C445.722 182.324 445.34 182.51 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="black" opacity="0.1" />
-        <path d="M585.599 343.37V364.122L575.587 372.703V346.831L585.384 342.212L585.599 343.37Z" fill="black" opacity="0.15" />
-        <path d="M520.025 263.695C518.559 268.03 515.781 271.802 512.076 274.488C508.37 277.173 503.921 278.64 499.345 278.683L483.141 326.766L476.205 347.274L473.273 355.927C476.717 358.617 479.284 362.269 480.65 366.42C482.016 370.571 482.119 375.034 480.946 379.243C479.772 383.452 477.376 387.219 474.059 390.064C470.743 392.91 466.657 394.707 462.318 395.228L469.04 375.377C469.299 374.598 469.24 373.747 468.876 373.011C468.512 372.274 467.872 371.711 467.095 371.444L454.967 367.34C454.187 367.08 453.337 367.139 452.6 367.503C451.864 367.867 451.301 368.508 451.034 369.285L444.326 389.135C441.191 386.09 439.031 382.181 438.122 377.905C437.212 373.629 437.594 369.179 439.219 365.121C440.843 361.063 443.637 357.579 447.246 355.112C450.855 352.644 455.115 351.305 459.486 351.265L462.347 342.941L469.412 322.046L485.573 274.021C482.129 271.331 479.561 267.679 478.195 263.528C476.829 259.377 476.726 254.914 477.9 250.705C479.073 246.495 481.47 242.729 484.786 239.883C488.102 237.038 492.189 235.24 496.528 234.72L489.806 254.571C489.673 254.956 489.619 255.365 489.645 255.772C489.671 256.179 489.778 256.577 489.959 256.942C490.14 257.308 490.391 257.634 490.699 257.902C491.006 258.17 491.364 258.375 491.751 258.504L503.864 262.608C504.644 262.868 505.494 262.809 506.231 262.445C506.967 262.08 507.53 261.44 507.797 260.663L514.519 240.812C517.507 243.715 519.611 247.406 520.585 251.457C521.56 255.507 521.366 259.751 520.025 263.695Z" fill="#A7AAB3" />
-        <path d="M483.141 326.766L476.205 347.274C473.637 346.92 471.106 346.341 468.639 345.544C466.472 344.831 464.359 343.961 462.318 342.941L469.383 322.046C471.541 322.405 473.668 322.926 475.747 323.605C478.306 324.422 480.782 325.48 483.141 326.766Z" fill="black" opacity="0.1" />
-        <path d="M477.421 302.581C474.667 302.666 471.941 303.148 469.326 304.012C459.915 306.872 453.765 314.023 454.638 322.175C455.782 332.544 467.738 340.524 481.396 340.052C482.907 339.986 484.412 339.823 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.421 302.581Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-        <path d="M477.42 302.581C474.667 302.666 471.941 303.148 469.326 304.012C469.555 305.07 469.755 306.014 470.012 307.001C473.344 320.058 479.623 324.263 485.244 337.764C485.499 338.35 485.719 338.952 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.42 302.581Z" fill="black" opacity="0.1" />
-        <path d="M640.36 287.951C638.93 310.59 624.628 332.93 601.002 350.178C579.177 366.095 549.387 377.694 514.391 381.184C508.167 370.155 502.23 358.967 496.585 347.632C494.726 343.928 492.909 340.181 491.079 336.362C483.928 321.46 477.664 307.044 472.129 293.271C487.689 298.377 551.975 318.442 589.932 302.152C596.811 299.206 610.541 293.4 612.486 282.13C613.048 278.08 612.317 273.956 610.398 270.345C608.798 267.347 607.829 264.053 607.55 260.666C607.271 257.279 607.688 253.871 608.776 250.652C609.864 247.432 611.599 244.469 613.876 241.946C616.152 239.422 618.92 237.392 622.011 235.978C640.46 260.177 640.861 279.87 640.36 287.951Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-        <path d="M601.002 350.178C579.177 366.095 549.387 377.694 514.39 381.184C511.347 375.792 508.372 370.361 505.466 364.894C501.376 357.2 497.519 349.634 493.896 342.197C505.942 349.292 519.121 354.256 532.854 356.871C555.749 361.042 579.355 358.723 601.002 350.178Z" fill="black" opacity="0.1" />
-      </svg>
-    </div>
-    <div class="mt-4">
-      <button class="btn btn-primary w-100">Primary Button</button>
-    </div>
-    <div class="mt-4">
-      <label class="form-check">
-        <input class="form-check-input" type="checkbox" checked />
-        <span class="form-check-label">Checked checkbox input</span>
-      </label>
-    </div>
-  </div>
-  <div class="ribbon">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-star">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
-    </svg>
-  </div>
-</div>
-<div class="row g-2">
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="blue" class="form-colorinput-input" checked />
-      <span class="form-colorinput-color bg-blue"></span>
-    </label>
-  </div>
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="azure" class="form-colorinput-input" />
-      <span class="form-colorinput-color bg-azure"></span>
-    </label>
-  </div>
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
-      <span class="form-colorinput-color bg-indigo"></span>
-    </label>
-  </div>
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="purple" class="form-colorinput-input" />
-      <span class="form-colorinput-color bg-purple"></span>
-    </label>
-  </div>
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="pink" class="form-colorinput-input" />
-      <span class="form-colorinput-color bg-pink"></span>
-    </label>
-  </div>
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="red" class="form-colorinput-input" />
-      <span class="form-colorinput-color bg-red"></span>
-    </label>
-  </div>
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="orange" class="form-colorinput-input" />
-      <span class="form-colorinput-color bg-orange"></span>
-    </label>
-  </div>
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
-      <span class="form-colorinput-color bg-yellow"></span>
-    </label>
-  </div>
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="lime" class="form-colorinput-input" />
-      <span class="form-colorinput-color bg-lime"></span>
-    </label>
-  </div>
-  <div class="col-auto">
-    <label class="form-colorinput">
-      <input name="color" type="radio" value="green" class="form-colorinput-input" />
-      <span class="form-colorinput-color bg-green"></span>
-    </label>
-  </div>
-</div>
-<script>
-  document.querySelectorAll('.form-colorinput-input').forEach((input) => {
-    input.addEventListener('change', (event) => {
-      document.documentElement.style.setProperty('--tblr-primary', `var(--tblr-${event.target.value})`);
-    });
-  });
-</script>
-```
-
-
-## Dark version of the illustration
-
-Each illustration has a dark mode variant. To use it, copy the dark mode SVG code and paste it into your project. The dark mode variant is available for all illustrations.
-
-```html example columns={1} centered vertical separated height="25rem" background="dark"
-<div>
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
-    <path d="M165.042 305.17C165.042 347.031 209.306 377.394 228.857 411.189C249.036 446.056 253.885 499.359 288.752 519.524C322.561 539.075 370.672 517.207 412.534 517.207C454.395 517.207 502.506 539.075 536.301 519.524C571.168 499.359 576.017 446.056 596.196 411.189C615.747 377.394 660.011 347.031 660.011 305.17C660.011 263.309 615.747 232.961 596.196 199.166C576.017 164.298 571.168 110.996 536.301 90.8302C502.506 71.2798 454.38 93.1471 412.534 93.1471C370.687 93.1471 322.561 71.2798 288.752 90.8302C253.885 110.996 249.036 164.298 228.857 199.166C209.306 232.961 165.042 263.323 165.042 305.17Z" fill="black" opacity="0.07" />
-    <path d="M375.492 479.923C470.481 479.923 547.485 476.824 547.485 473.001C547.485 469.178 470.481 466.079 375.492 466.079C280.503 466.079 203.5 469.178 203.5 473.001C203.5 476.824 280.503 479.923 375.492 479.923Z" fill="black" opacity="0.26" />
-    <path d="M511.988 174.667C493.855 167.122 474.216 163.9 454.624 165.256L456.64 177.084L511.988 174.667Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));" />
-    <path d="M518.452 301.638L572.584 329.197L591.949 299.006L602.918 281.844C608.639 272.891 617.062 260.034 627.674 244.159C626.096 241.199 624.176 238.434 621.954 235.921C616.989 230.419 610.739 226.233 603.762 223.736H603.633C599.858 222.306 595.996 221.019 592.192 219.674C585.755 217.369 579.457 214.695 573.328 211.665C568.623 209.377 563.545 206.66 558.154 203.428C555.15 210.807 552.161 218.187 549.187 225.567C543.466 239.868 537.697 254.132 531.881 268.357C527.419 279.465 522.943 290.558 518.452 301.638Z" fill="#DADCE0" />
-    <path d="M573.328 211.665L580.908 225.338L581.866 225.567C589.204 227.065 596.817 226.429 603.805 223.736H603.676C599.9 222.306 596.039 221.019 592.235 219.674C585.784 217.371 579.471 214.697 573.328 211.665Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M627.674 244.216C617.062 260.091 608.696 272.948 602.918 281.901C601.087 284.762 599.757 286.807 594.509 295.016L591.949 299.006L582.738 313.308L572.584 329.14L518.466 301.623C522.929 290.563 527.405 279.494 531.896 268.415L549.186 225.638C549.287 225.409 549.372 225.181 549.473 224.966C551.379 220.132 553.329 215.303 555.322 210.478C556.275 208.152 557.229 205.816 558.182 203.471C561.171 205.287 564.089 206.917 566.878 208.405C569.109 209.606 571.268 210.707 573.356 211.737C579.485 214.732 585.778 217.377 592.206 219.66C596.01 221.004 599.872 222.234 603.647 223.722H603.776C604.649 224.079 605.521 224.423 606.365 224.823C612.359 227.307 617.709 231.121 622.011 235.978C624.21 238.497 626.11 241.261 627.674 244.216Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));" />
-    <path d="M600.816 220.246C592.32 224.537 585.441 224.852 580.507 224.165C580.221 224.165 579.949 224.094 579.678 224.036L572.069 212.595C578.203 212.59 584.3 213.555 590.132 215.455C593.844 216.693 597.423 218.298 600.816 220.246Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M191.729 429.895L559.226 429.895C571.011 429.895 580.564 420.342 580.564 408.557V198.408C580.564 186.623 571.011 177.07 559.226 177.07L191.729 177.07C179.945 177.07 170.391 186.623 170.391 198.408V408.557C170.391 420.342 179.945 429.895 191.729 429.895Z" fill="#232B41" />
-    <path d="M585.584 197.736C585.395 190.871 582.537 184.35 577.619 179.557C572.701 174.764 566.108 172.076 559.241 172.064H191.686C184.702 172.072 178.006 174.849 173.067 179.788C168.128 184.727 165.35 191.423 165.343 198.408V408.643C165.35 415.628 168.128 422.324 173.067 427.262C178.006 432.201 184.702 434.979 191.686 434.987H326.008V443.94C324.578 453.679 318.042 456.425 313.466 457.126H262.537C261.503 457.13 260.512 457.542 259.78 458.274C259.049 459.005 258.637 459.996 258.633 461.03V465.55C258.637 466.584 259.049 467.575 259.78 468.306C260.512 469.038 261.503 469.45 262.537 469.454H488.504C489.017 469.454 489.525 469.353 489.998 469.157C490.472 468.961 490.903 468.673 491.265 468.31C491.628 467.948 491.915 467.517 492.111 467.044C492.308 466.57 492.409 466.062 492.409 465.55V461.03C492.409 460.517 492.308 460.01 492.111 459.536C491.915 459.062 491.628 458.632 491.265 458.269C490.903 457.907 490.472 457.619 489.998 457.423C489.525 457.227 489.017 457.126 488.504 457.126H437.476C432.899 456.425 426.306 453.665 424.933 443.868V434.915H559.241C566.226 434.908 572.924 432.13 577.865 427.192C582.806 422.254 585.587 415.557 585.599 408.572V198.336C585.599 198.179 585.599 197.964 585.584 197.736ZM575.573 408.572C575.569 412.898 573.849 417.047 570.789 420.106C567.73 423.166 563.582 424.886 559.255 424.89H191.701C187.374 424.886 183.226 423.166 180.166 420.106C177.107 417.047 175.386 412.898 175.382 408.572V198.336C175.386 194.01 177.107 189.861 180.166 186.802C183.226 183.742 187.374 182.022 191.701 182.018H559.255C561.484 182.012 563.691 182.469 565.734 183.362C568.656 184.626 571.144 186.717 572.892 189.378C574.641 192.039 575.573 195.153 575.573 198.336V408.572Z" fill="#444B5E" />
-    <path d="M211.108 222.706L443.454 222.706C444.497 222.706 445.342 221.861 445.342 220.819V214.798C445.342 213.755 444.497 212.91 443.454 212.91L211.108 212.91C210.066 212.91 209.22 213.755 209.22 214.798V220.819C209.22 221.861 210.066 222.706 211.108 222.706Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));" />
-    <path d="M211.094 314.981H252.111C253.146 314.981 253.985 314.142 253.985 313.108V307.058C253.985 306.023 253.146 305.184 252.111 305.184H211.094C210.059 305.184 209.22 306.023 209.22 307.058V313.108C209.22 314.142 210.059 314.981 211.094 314.981Z" fill="#DADCE0" />
-    <path d="M211.809 279.856H368.971C370.4 279.856 371.559 278.697 371.559 277.267V250.595C371.559 249.165 370.4 248.006 368.971 248.006L211.809 248.006C210.379 248.006 209.22 249.165 209.22 250.595V277.267C209.22 278.697 210.379 279.856 211.809 279.856Z" fill="#A7AAB3" />
-    <path d="M389.479 335.733L382.271 326.78L363.822 341.611L346.56 320.144L331.586 332.2L348.848 353.667L330.399 368.498L337.593 377.465L356.042 362.62L373.304 384.087L388.292 372.031L371.03 350.564L389.479 335.733Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));" />
-    <path d="M591.934 268.701C593.522 258.689 602.961 233.776 606.393 224.895C605.55 224.494 604.677 224.151 603.805 223.793H603.676C597.784 223.936 594.695 223.45 594.451 222.363C594.266 221.548 595.567 220.418 598.356 218.945C595.969 217.727 593.498 216.68 590.962 215.813C589.216 215.204 587.44 214.684 585.642 214.254L585.413 309.389C587.615 305.957 589.818 302.539 592.006 299.106L594.566 295.116C592.635 286.034 590.919 275.094 591.934 268.701ZM485.401 254.857C484.8 254.942 484.114 259.376 486.288 262.208C486.835 262.909 487.534 263.476 488.333 263.867C487.189 258.861 486.002 254.785 485.401 254.857ZM507.354 307.487C505.774 306.55 504.119 305.747 502.406 305.084C503.966 306.056 505.625 306.862 507.354 307.487ZM469.283 332.115L465.765 355.569L469.583 349.491C469.14 343.71 469.039 337.908 469.283 332.115ZM514.004 331.385C514.763 329.722 515.32 327.975 515.663 326.179C506.08 322.786 496.693 318.861 487.546 314.423C485.44 321.176 482.706 327.717 479.38 333.959L469.583 349.534C469.755 351.293 469.984 353.038 470.298 354.711C472.043 364.122 476.219 370.586 479.408 375.535C485.661 385.147 494.013 393.215 503.836 399.132C530.306 400.116 556.093 390.607 575.588 372.674V364.994L514.004 331.385Z" fill="black" opacity="0.1" />
-    <path d="M514.376 314.638C512.764 311.667 510.325 309.227 507.354 307.616C505.625 306.99 503.966 306.185 502.406 305.213L502.148 305.084C502.148 305.084 502.248 305.084 502.406 305.213C504.119 305.875 505.774 306.679 507.354 307.616C507.997 307.787 508.527 307.802 508.784 307.53C510.1 306.243 503.478 300.451 502.005 290.783C501.633 288.251 500.761 282.502 504.05 277.182C508.169 270.517 515.935 269.244 517.422 269.015C511.358 267.019 505.07 265.785 498.701 265.34C494.411 265.039 490.835 265.182 488.318 263.91C489.348 268.372 490.349 273.549 490.864 277.153C492.515 289.684 491.377 302.426 487.532 314.466C496.679 318.904 506.065 322.829 515.649 326.222C516.477 322.324 516.031 318.263 514.376 314.638ZM585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397C565.562 223.564 557.567 213.668 557.567 202.069C557.567 190.47 565.562 180.616 576.789 176.741C579.63 175.787 582.59 175.233 585.584 175.096Z" fill="black" opacity="0.1" />
-    <path d="M585.57 222.935L609.483 216.128L613.501 223.278L588.974 239.868C587.815 237.194 586.643 234.505 585.484 231.817C585.556 228.827 585.556 225.967 585.57 222.935Z" fill="#DADCE0" />
-    <path d="M585.584 175.096V229.042C582.59 228.905 579.63 228.351 576.789 227.397L575.559 226.954V198.351C575.558 195.167 574.626 192.053 572.878 189.392C571.13 186.732 568.641 184.641 565.719 183.377C568.431 180.786 571.61 178.733 575.087 177.327C575.645 177.098 576.217 176.884 576.789 176.683C579.633 175.749 582.593 175.215 585.584 175.096Z" fill="black" opacity="0.15" />
-    <path d="M610.198 137.454C611.056 141.973 612.186 148.609 613.358 156.818C613.587 158.62 613.816 160.194 613.902 160.737C614.881 169.779 614.722 178.908 613.43 187.91C613.144 189.698 612.843 191.4 612.429 193.073C611.299 197.707 600.287 205.258 587.072 209.706C582.519 211.261 577.817 212.34 573.042 212.924C558.182 214.712 548.414 204.586 548.343 195.762C548.293 193.608 548.896 191.488 550.073 189.684C552.13 186.006 553.496 181.983 554.106 177.813C555.126 172.287 555.748 166.695 555.966 161.08C556.166 157.877 556.151 155.789 556.151 155.789L567.593 140.214L601.845 132.348C602.761 138.197 605.178 141.844 607.066 141.787C608.953 141.73 609.955 138.212 610.198 137.454Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M610.198 137.454C611.041 141.973 612.185 148.609 613.373 156.818C613.587 158.62 613.816 160.208 613.887 160.737C614.877 169.778 614.728 178.907 613.444 187.91C611.07 187.716 608.754 187.071 606.622 186.008C604.293 184.813 602.223 183.171 600.53 181.174C598.789 179.022 597.399 176.608 596.411 174.023C595.671 172.382 595.036 170.696 594.509 168.975C582.401 176.336 568.178 179.433 554.106 177.77C555.126 172.244 555.747 166.652 555.965 161.037C556.166 157.834 556.151 155.731 556.151 155.731L567.593 140.171L601.845 132.348C602.761 138.197 605.178 141.844 607.065 141.773C608.953 141.701 610.026 138.212 610.269 137.482" fill="black" opacity="0.1" />
-    <path d="M616.147 143.804C617.621 150.946 616.333 158.382 612.543 164.613C611.699 165.705 610.934 166.857 610.255 168.059C608.586 171.497 607.8 175.297 607.967 179.115C605.963 177.555 604.47 175.434 603.676 173.022C602.575 169.318 602.618 161.996 602.475 161.009V160.408C602.475 160.079 602.389 159.636 602.275 158.778C601.977 156.941 601.562 155.126 601.03 153.343C601.023 153.249 600.988 153.16 600.93 153.086C593.479 160.322 571.769 178.829 552.304 169.962C549.27 168.595 546.452 166.793 543.938 164.613C543.696 164.444 543.479 164.242 543.294 164.012C542.682 163.466 542.104 162.884 541.564 162.267L541.406 162.11C540.013 160.506 538.892 158.685 538.088 156.718L537.488 155.889C537.211 155.006 537.005 154.102 536.873 153.186C536.555 149.566 537.5 145.948 539.547 142.946C543.251 137.068 549.701 132.62 553.105 130.303C566.291 121.136 588.001 114.728 603.505 124.983C607.42 127.703 610.643 131.303 612.915 135.494C614.324 138.117 615.359 140.923 615.99 143.832" fill="#444B5E" />
-    <path d="M600.744 153.028C593.293 160.265 571.583 178.771 552.118 169.904C549.084 168.538 546.266 166.736 543.752 164.556C543.51 164.387 543.293 164.185 543.108 163.955C542.496 163.409 541.918 162.827 541.378 162.21L541.22 162.053C539.83 160.447 538.71 158.626 537.902 156.661C542.634 159.548 547.809 161.635 553.22 162.839C580.007 168.674 602.146 148.724 605.678 145.534L605.95 145.291C604.428 148.012 602.707 150.618 600.801 153.086" fill="black" opacity="0.3" />
-    <path d="M483.942 177.727C483.944 179.167 483.81 180.604 483.542 182.018H457.484C457.216 180.604 457.082 179.167 457.083 177.727C457.072 175.8 457.298 173.879 457.756 172.007H483.284C483.729 173.881 483.95 175.801 483.942 177.727Z" fill="black" opacity="0.15" />
-    <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C472.744 179.386 472.315 185.679 468.053 189.169C462.618 193.559 453.165 191.729 446.872 185.064C446.186 184.326 445.55 183.543 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M466.422 169.089C467.695 170.426 468.769 171.938 469.612 173.58C469.011 173.98 468.468 174.338 467.881 174.695C460.144 179.344 455.167 178.385 446.114 182.161C445.722 182.324 445.34 182.51 444.97 182.719C440.493 176.412 440.451 168.875 445.256 164.999C450.633 160.594 460.144 162.425 466.422 169.089Z" fill="black" opacity="0.1" />
-    <path d="M585.599 343.356V364.107L575.588 372.688V346.817L585.384 342.197L585.599 343.356Z" fill="black" opacity="0.15" />
-    <path d="M520.025 263.695C518.559 268.03 515.781 271.802 512.076 274.488C508.37 277.173 503.921 278.64 499.345 278.683L483.141 326.766L476.205 347.274L473.273 355.927C476.717 358.617 479.284 362.269 480.65 366.42C482.016 370.571 482.119 375.034 480.946 379.243C479.772 383.452 477.376 387.219 474.059 390.064C470.743 392.91 466.657 394.707 462.318 395.228L469.04 375.377C469.299 374.598 469.24 373.747 468.876 373.011C468.512 372.274 467.872 371.711 467.095 371.444L454.967 367.34C454.187 367.08 453.337 367.139 452.6 367.503C451.864 367.867 451.301 368.508 451.034 369.285L444.326 389.135C441.191 386.09 439.031 382.181 438.122 377.905C437.212 373.629 437.594 369.179 439.219 365.121C440.843 361.063 443.637 357.579 447.246 355.112C450.855 352.644 455.115 351.305 459.486 351.265L462.347 342.941L469.412 322.046L485.573 274.021C482.129 271.331 479.561 267.679 478.195 263.528C476.829 259.377 476.726 254.914 477.9 250.705C479.073 246.495 481.47 242.729 484.786 239.883C488.102 237.038 492.189 235.24 496.528 234.72L489.806 254.571C489.673 254.956 489.619 255.365 489.645 255.772C489.671 256.179 489.778 256.577 489.959 256.942C490.14 257.308 490.391 257.634 490.699 257.902C491.006 258.17 491.364 258.375 491.751 258.504L503.864 262.608C504.644 262.868 505.494 262.809 506.231 262.445C506.967 262.08 507.53 261.44 507.797 260.663L514.519 240.812C517.507 243.715 519.611 247.406 520.585 251.457C521.56 255.507 521.366 259.751 520.025 263.695Z" fill="#A7AAB3" />
-    <path d="M483.141 326.766L476.205 347.274C473.637 346.92 471.106 346.341 468.639 345.544C466.472 344.831 464.359 343.961 462.318 342.941L469.383 322.046C471.541 322.405 473.668 322.926 475.747 323.605C478.306 324.422 480.782 325.48 483.141 326.766Z" fill="black" opacity="0.1" />
-    <path d="M477.421 302.581C474.667 302.666 471.941 303.148 469.326 304.012C459.915 306.872 453.765 314.023 454.638 322.175C455.782 332.544 467.738 340.524 481.396 340.052C482.907 339.986 484.412 339.823 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.421 302.581Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-    <path d="M477.42 302.581C474.667 302.666 471.941 303.148 469.326 304.012C469.555 305.07 469.755 306.014 470.012 307.001C473.344 320.058 479.623 324.263 485.244 337.764C485.499 338.35 485.719 338.952 485.901 339.566C497.257 337.549 505.209 329.555 504.179 320.459C503.063 310.147 491.05 302.11 477.42 302.581Z" fill="black" opacity="0.1" />
-    <path d="M640.36 287.951C638.93 310.59 624.628 332.93 601.002 350.178C579.177 366.095 549.387 377.694 514.39 381.184C508.167 370.155 502.23 358.967 496.585 347.632C494.726 343.928 492.909 340.181 491.079 336.362C483.928 321.46 477.664 307.044 472.129 293.271C487.689 298.377 551.975 318.442 589.932 302.152C596.811 299.206 610.541 293.4 612.486 282.13C613.048 278.08 612.317 273.956 610.398 270.345C608.798 267.347 607.829 264.053 607.55 260.666C607.271 257.279 607.688 253.871 608.776 250.652C609.864 247.432 611.599 244.469 613.875 241.946C616.152 239.422 618.92 237.392 622.011 235.978C640.46 260.177 640.86 279.87 640.36 287.951Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-primary, var(--tblr-illustrations-primary, #0455A4));" />
-    <path d="M601.002 350.178C579.177 366.095 549.387 377.694 514.39 381.184C511.347 375.792 508.372 370.361 505.466 364.894C501.376 357.2 497.519 349.634 493.896 342.197C505.942 349.292 519.121 354.256 532.854 356.871C555.749 361.042 579.355 358.723 601.002 350.178Z" fill="black" opacity="0.1" />
-  </svg>
-```
-
-## Autodark mode
-
-Tabler Illustrations supports autodark mode, which automatically switches the color scheme of the illustrations based on the user's system preferences. To enable autodark mode, copy illustration code from the `svg-css-autodark` folder.
-
-Illustration change theme based on the user's system preferences or `data-bs-theme` attribute or `theme` class.
-
-```html
-<html data-bs-theme="dark">
-<body>
-  <svg>...</svg>
-</body>
-</html>
-```
-
-Look at the example below to see how the illustration changes based on the user's system preferences.
-
-```html example columns={1} centered vertical separated height="25rem"
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
-  <style>
-    :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-a {
-      fill: black;
-      opacity: 0.07;
-    }
-    :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b {
-      fill: #1A2030;
-    }
-    :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c {
-      fill: #454C5E;
-    }
-    @media (prefers-color-scheme: dark) {
-      .tblr-illustrations-boy-girl-a {
-        fill: black;
-        opacity: 0.07;
-      }
-      .tblr-illustrations-boy-girl-b {
-        fill: #1A2030;
-      }
-      .tblr-illustrations-boy-girl-c {
-        fill: #454C5E;
-      }
-    }
-  </style>
-  <path d="M658.744 282.266C658.744 325.973 612.535 357.656 592.114 392.937C571.053 429.346 565.991 484.976 529.581 506.037C494.299 526.458 444.065 503.618 400.367 503.618C356.669 503.618 306.435 526.458 271.153 506.037C234.753 484.976 229.681 429.346 208.62 392.937C188.209 357.656 142 325.953 142 282.266C142 238.579 188.209 206.865 208.62 171.584C229.681 135.185 234.753 79.5143 271.153 58.4839C306.435 38.0736 356.669 60.9031 400.367 60.9031C444.065 60.9031 494.299 38.0736 529.581 58.4839C565.991 79.5448 571.053 135.185 592.114 171.584C612.535 206.865 658.744 238.568 658.744 282.266Z" fill="#F7F8FC" class="tblr-illustrations-boy-girl-a" />
-  <path d="M397.248 550C534.459 550 645.689 545.836 645.689 540.7C645.689 535.564 534.459 531.401 397.248 531.401C260.038 531.401 148.808 535.564 148.808 540.7C148.808 545.836 260.038 550 397.248 550Z" fill="#A6A9B3" class="tblr-illustrations-boy-girl-b" />
-  <path d="M479.179 238.829C475.497 244.691 456.146 274.402 421.211 280.161C408.559 282.198 395.593 280.84 383.637 276.225C376.963 273.704 370.647 270.322 364.85 266.164L373.304 245.592C374.244 246.41 375.7 247.659 377.607 249.049C384.182 253.84 395.868 260.321 407.863 256.273C414.608 254.009 419.323 249.697 428.36 240.849C436.25 233.084 443.39 224.592 449.683 215.486C455.319 205.153 466.977 202.626 474.943 209.512C482.598 215.974 484.609 229.097 479.179 238.829Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M383.666 276.159C376.992 273.638 370.676 270.256 364.879 266.098L373.333 245.526C374.272 246.344 375.728 247.593 377.635 248.983C377.119 253.445 376.818 260.697 379.035 266.568C380.328 269.88 381.876 273.087 383.666 276.159Z" fill="black" opacity="0.15" />
-  <path d="M324.054 160.289C332.183 175.733 345.737 187.624 362.107 193.674L307.502 198.718C313.026 185.906 318.543 173.096 324.054 160.289Z" fill="#232B41" class="tblr-illustrations-boy-girl-c" />
-  <path d="M302.083 425.902L299.434 457.398L295.601 503.211H291.872L282.206 455.679L278.073 435.333L302.083 425.902ZM355.701 425.902L353.221 455.548L349.229 503.211H345.5L336.153 457.314L331.682 435.333L355.701 425.902Z" fill="#DADBE0" />
-  <path d="M278.063 435.333L302.083 425.939L299.434 457.436C293.46 457.051 287.692 456.496 282.206 455.717L278.063 435.333ZM355.701 425.902L353.212 455.548C347.782 456.318 342.071 456.91 336.153 457.314L331.682 435.333L355.701 425.902Z" fill="black" opacity="0.15" />
-  <path d="M318.108 202.692C302.571 204.392 285.231 199.874 278.063 195.017C276.833 194.294 275.8 193.278 275.057 192.058C274.278 190.508 273.592 188.902 272.916 187.202C271.976 184.872 271.169 182.449 270.445 180.025C268.518 173.72 267.17 167.252 266.415 160.703C266.415 160.167 266.218 158.57 266.021 156.72C265.345 148.425 265.006 141.69 264.809 137.069C265.204 137.745 267.139 140.901 268.886 140.61C270.765 140.225 272.333 136.092 271.901 130.174H307.136L321.847 142.893C321.847 142.893 322.279 144.931 323.199 148.031C324.69 153.477 326.558 158.813 328.789 164C330.667 168.321 332.912 172.304 335.364 174.727C343.49 182.468 336.745 200.747 318.108 202.692Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M328.788 164C315.373 168.775 300.746 168.931 287.231 164.441C283.781 164.927 280.531 166.354 277.838 168.565C273.855 171.919 273.958 175.018 270.755 179.584L270.464 180.025C268.537 173.72 267.188 167.252 266.434 160.703C266.434 160.167 266.237 158.57 266.039 156.72C265.363 148.425 265.025 141.69 264.828 137.069C265.222 137.745 267.157 140.901 268.904 140.61C270.783 140.225 272.352 136.092 271.92 130.174H307.155L321.865 142.893C321.865 142.893 322.297 144.931 323.218 148.031C324.703 153.476 326.564 158.812 328.788 164Z" fill="black" opacity="0.1" />
-  <path d="M353.502 268.466C356.893 286.755 359.298 300.197 360.951 309.666C361.045 310.192 361.13 310.718 361.224 311.244C363.196 322.244 365.225 333.253 367.198 344.272C330.2 344.935 293.193 345.649 256.176 346.413C256.232 343.868 256.27 341.238 256.335 338.673V338.542C255.228 310.418 255.658 282.255 257.622 254.178C257.763 252.102 257.913 250.045 258.083 247.978L252.54 260.923L230.334 247.772C231.132 244.258 233.922 233.681 242.132 226.448C242.132 226.448 249.581 219.967 257.895 218.792C258.667 218.721 259.432 218.596 260.187 218.417C260.319 218.382 260.454 218.357 260.591 218.342C265.334 217.665 269.928 217.055 274.249 216.726C284.754 215.813 295.312 215.656 305.839 216.256C315.93 216.869 325.952 218.314 335.805 220.577C338.285 221.169 340.868 221.845 343.32 222.653L345.405 223.358C345.668 223.442 345.922 223.517 346.166 223.611L347.537 224.109C349.097 224.71 364.606 229.229 368.006 230.271C371.821 231.512 375.321 233.566 378.264 236.293L364.089 275.464L353.502 268.466Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-  <path d="M271.554 222.127C271.554 233.832 285.644 243.3 303.069 243.3C320.494 243.3 334.519 233.832 334.519 222.127C334.52 221.496 334.457 220.867 334.331 220.249C324.476 217.949 314.441 216.504 304.337 215.927C293.815 215.329 283.263 215.495 272.765 216.425C271.953 218.216 271.539 220.161 271.554 222.127Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M337.524 142.451C335.044 147.89 329.361 151.845 328.591 152.361C312.133 163.511 287.334 150.849 280.684 147.063C279.03 151.572 274.756 154.973 274.221 157.744C274.08 158.57 273.939 159.397 273.836 160.167C273.671 161.504 273.593 162.85 273.601 164.197C273.65 166.483 273.908 168.759 274.371 170.998C275.188 174.887 278.664 185.22 284.347 198.681C276.388 199.207 268.422 199.742 260.45 200.287L241.108 201.583C238.404 192.37 237.788 182.669 239.305 173.187C239.446 172.341 239.671 171.101 240.009 169.551C240.72 166.396 241.662 163.297 242.827 160.28C243.034 159.754 243.26 159.209 243.485 158.664C245.146 154.767 247.194 151.047 249.6 147.561C255.842 138.551 264.069 131.095 273.648 125.768C276.945 124.04 298.071 113.19 319.563 120.808C324.908 122.687 337.618 127.262 338.689 136.148C338.907 138.317 338.503 140.503 337.524 142.451ZM291.204 514.539C285.803 516.324 285.718 525.182 285.718 525.182L284.253 534.219L294.68 536.68L297.658 529.578L316.905 536.68C312.885 527.38 296.615 512.764 291.204 514.539ZM368.72 536.68C364.69 527.38 348.42 512.764 343.019 514.539C337.618 516.315 337.524 525.182 337.524 525.182L336.068 534.219L346.476 536.68L349.454 529.578L368.72 536.68Z" fill="#232B41" class="tblr-illustrations-boy-girl-c" />
-  <path d="M337.524 142.451C335.044 147.89 329.371 151.845 328.591 152.352C312.133 163.521 287.335 150.849 280.684 147.063C278.366 144.912 276.281 142.523 274.465 139.934C283.982 145.468 294.71 148.587 305.711 149.018C316.712 149.448 327.651 147.178 337.571 142.404L337.524 142.451Z" fill="black" opacity="0.3" />
-  <path d="M373.051 435.333H258.947L256.956 371.738L256.176 346.423L367.199 344.262L371.942 418.002L373.051 435.333Z" fill="#A6A9B3" />
-  <path d="M373.05 435.333H258.947L257.632 345.615L313.392 345.249C292.67 386.214 286.602 401.469 288.274 402.85C290.566 404.729 306.121 379.122 314.003 383.527C316.868 385.134 317.168 389.849 317.985 393.005C320.531 402.756 332.226 413.455 371.942 418.002L373.05 435.333Z" fill="black" opacity="0.1" />
-  <path d="M346.241 223.63H346.194L345.433 223.386C342.371 236.997 324.552 247.48 303.087 247.48C279.425 247.48 260.177 234.799 260.177 219.225V218.436C259.454 218.548 258.693 218.67 257.904 218.821C257.895 218.955 257.895 219.09 257.904 219.225C257.904 236.283 278.166 250.223 303.087 250.223C325.51 250.223 344.156 238.951 347.603 224.194L346.241 223.63Z" fill="#E1E1E1" />
-  <path d="M307.502 263.853C309.411 263.853 310.959 262.011 310.959 259.739C310.959 257.467 309.411 255.625 307.502 255.625C305.593 255.625 304.045 257.467 304.045 259.739C304.045 262.011 305.593 263.853 307.502 263.853Z" fill="#E1E1E1" />
-  <path d="M260.404 200.315L241.063 201.612C238.358 192.398 237.742 182.697 239.259 173.215C239.4 172.37 239.625 171.13 239.964 169.58L242.782 160.308C242.988 159.782 243.214 159.237 243.439 158.693C245.1 154.796 247.148 151.076 249.554 147.589C248.615 159.989 248.474 177.273 253.744 188.263C255.706 192.418 257.931 196.443 260.404 200.315Z" fill="black" opacity="0.3" />
-  <path d="M367.199 344.272C330.201 344.935 293.193 345.649 256.176 346.413C256.233 343.868 256.27 341.238 256.336 338.673V338.542C315.929 341.501 350.957 319.557 361.224 311.244C363.197 322.244 365.264 333.253 367.199 344.272Z" fill="black" opacity="0.1" />
-  <path d="M280.017 380.052C274.531 389.041 263.503 391.437 255.35 384.965C250.399 380.597 225.45 357.564 220.594 316.006C218.13 294.148 221.708 272.032 230.936 252.064C231.509 250.843 232.007 249.829 232.429 249.002L249.723 259.119C249.103 260.124 248.173 261.674 247.13 263.637C243.063 271.34 237.267 285.609 240.743 300.272C242.621 308.276 246.266 313.912 253.706 324.695C259.993 333.807 267.133 342.299 275.029 350.058C283.671 356.662 285.804 370.564 280.017 380.052Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M249.723 259.119C249.103 260.124 248.173 261.674 247.13 263.637C242.33 260.274 234.862 255.005 230.926 252.064C231.499 250.843 231.997 249.829 232.42 249.002L249.723 259.119Z" fill="black" opacity="0.15" />
-  <path d="M304.337 215.899C293.815 215.301 283.264 215.467 272.766 216.397C271.949 218.196 271.536 220.152 271.554 222.127C271.554 233.832 285.644 243.3 303.069 243.3C320.494 243.3 334.519 233.832 334.519 222.127C334.52 221.496 334.457 220.867 334.331 220.248C324.477 217.94 314.442 216.485 304.337 215.899Z" fill="black" opacity="0.07" />
-  <path d="M445.325 188.01C446.283 199.188 447.25 210.351 448.227 221.498L453.863 286.182C455.329 302.909 456.785 319.645 458.231 336.39H543.713C545.372 319.639 547.038 302.902 548.71 286.182C549.668 276.701 550.608 267.223 551.528 257.748C553.852 234.489 556.162 211.243 558.461 188.01H445.325Z" fill="#DADBE0" />
-  <path d="M555.464 217.844C547.072 224.328 539.267 231.538 532.14 239.393C515.429 257.766 513.109 267.62 505.171 271.03C495.956 274.994 479.809 269.997 449.542 228.045L453.995 288.474H454.042C455.445 304.443 456.835 320.412 458.213 336.381H543.694C545.354 319.642 547.019 302.909 548.692 286.182H549.058L555.464 217.844Z" fill="black" opacity="0.1" />
-  <path d="M420.385 276.76C422.47 282.504 425.273 287.961 428.727 293.002C429.744 294.46 430.829 295.871 431.977 297.229C436.998 303.248 443.375 307.99 450.585 311.065C454.275 312.632 458.128 313.779 462.074 314.485C467.561 315.468 473.147 315.784 478.71 315.424C479.17 315.424 479.649 315.377 480.072 315.34C480.247 315.35 480.423 315.35 480.598 315.34L481.631 315.255L482.12 315.208H482.458C486.709 314.762 490.926 314.037 495.083 313.038H495.148C498.827 312.155 502.453 311.064 506.007 309.769C507.604 309.215 509.145 308.604 510.62 307.956C512.674 307.067 514.615 306.128 516.444 305.138C519.749 303.381 522.934 301.407 525.978 299.23C527.35 298.243 528.608 297.294 529.736 296.411C522.502 293.161 515.26 289.892 508.018 286.661C503.784 284.782 499.557 282.882 495.336 280.959C493.604 282.328 491.712 283.479 489.7 284.388C488.168 285.069 486.55 285.537 484.891 285.778C483.818 285.965 482.727 286.028 481.64 285.966C478.4 285.778 475.347 284.181 472.51 281.617C472.363 281.502 472.225 281.376 472.097 281.241C470.798 280.007 469.592 278.679 468.489 277.267C456.841 262.407 449.702 233.681 449.702 233.681C452.924 222.879 453.119 211.399 450.266 200.494C449.097 196.178 447.436 192.011 445.316 188.076C440.947 188.898 436.792 190.601 433.104 193.082C431.175 194.4 429.398 195.928 427.806 197.638C412.607 213.861 410.268 249.528 420.385 276.76Z" fill="#DADBE0" />
-  <path d="M445.325 188.01C438.625 189.246 432.498 192.598 427.844 197.572C412.607 213.861 410.268 249.528 420.385 276.76C422.47 282.504 425.273 287.961 428.727 293.002C429.744 294.46 430.828 295.871 431.977 297.229C436.998 303.248 443.375 307.99 450.585 311.065C452.425 311.844 454.306 312.518 456.221 313.085L458.26 336.39H543.741C545.401 319.639 547.067 302.902 548.739 286.182C549.697 276.694 550.636 267.216 551.557 257.748C553.861 234.489 556.163 211.243 558.461 188.01H445.325Z" fill="black" opacity="0.05" />
-  <path d="M540.181 104.661C540.002 109.282 539.636 116.055 538.95 124.387C538.762 126.266 538.621 127.816 538.584 128.37C537.518 137.473 535.309 146.404 532.008 154.954C531.322 156.654 530.637 158.251 529.857 159.81C526.973 165.578 505.434 172.529 486.703 170.472C467.972 168.415 461.256 150.201 469.353 142.413C471.824 139.99 474.116 136.007 475.994 131.667C478.228 126.463 480.092 121.108 481.574 115.642C482.513 112.533 482.946 110.475 482.946 110.475L497.712 97.7471H533.041C532.628 103.703 534.187 107.817 536.057 108.183C537.926 108.55 539.767 105.346 540.181 104.661Z" fill="#FFCB9D" style="fill: #FFCB9D; fill: var(--tblr-illustrations-skin, #FFCB9D);" />
-  <path d="M540.181 104.661C540.002 109.282 539.636 116.055 538.95 124.387C538.762 126.266 538.621 127.816 538.584 128.37C537.519 137.473 535.309 146.404 532.008 154.954C529.719 154.235 527.589 153.083 525.734 151.563C523.719 149.859 522.057 147.779 520.839 145.438C519.612 142.93 518.785 140.246 518.388 137.482C518.04 135.703 517.795 133.906 517.655 132.099C504.109 136.607 489.444 136.455 475.995 131.667C478.228 126.463 480.092 121.108 481.574 115.642C482.514 112.533 482.946 110.475 482.946 110.475L497.713 97.7471H533.042C532.628 103.703 534.188 107.817 536.057 108.183C537.926 108.55 539.768 105.346 540.181 104.661Z" fill="black" opacity="0.1" />
-  <path d="M544.53 112.213C544.324 119.897 540.998 127.365 536.32 131.846C535.242 132.734 534.228 133.698 533.286 134.73C530.89 137.732 529.277 141.283 528.589 145.062C526.945 143.089 525.93 140.668 525.677 138.111C525.433 134.213 527.105 127.027 527.19 126.022C527.19 126.022 527.19 125.749 527.274 125.43C527.274 124.876 527.359 124.65 527.434 123.786C527.564 121.91 527.564 120.026 527.434 118.15C527.455 118.06 527.455 117.967 527.434 117.877C518.491 123.326 493.007 136.599 475.854 123.514C473.188 121.482 470.828 119.078 468.846 116.375C468.641 116.159 468.473 115.912 468.349 115.642C467.865 114.969 467.426 114.267 467.033 113.538C466.996 113.476 466.955 113.416 466.911 113.359V113.312C465.865 111.449 465.141 109.423 464.77 107.319L464.638 106.492C464.561 105.555 464.561 104.612 464.638 103.674C465.122 100.035 466.851 96.6762 469.532 94.1681C474.501 89.2271 481.838 86.2963 485.698 84.7746C500.728 78.7345 523.489 77.2597 536.424 90.8616C539.662 94.4155 542.023 98.678 543.319 103.308C544.136 106.205 544.544 109.203 544.53 112.213Z" fill="#232B41" class="tblr-illustrations-boy-girl-c" />
-  <path d="M527.378 117.887C518.435 123.335 492.95 136.608 475.798 123.523C473.131 121.492 470.771 119.087 468.79 116.384C468.585 116.169 468.417 115.921 468.292 115.651C467.809 114.979 467.37 114.276 466.977 113.547C466.94 113.485 466.899 113.426 466.855 113.369V113.322C465.828 111.452 465.123 109.423 464.77 107.319C468.771 111.224 473.388 114.442 478.437 116.844C503.452 128.586 529.679 113.951 533.859 111.621L534.179 111.433C532.074 113.75 529.801 115.907 527.378 117.887Z" fill="black" opacity="0.3" />
-  <path d="M543.657 336.39L536.311 514.22H521.873L501.893 376.83L488.178 514.22H477.479L458.213 336.39H543.657Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-  <path d="M505.697 538.906L537.926 535.318C537.926 535.318 539.091 526.967 534.037 524.046C528.984 521.124 510.967 531.081 505.697 538.906ZM458.26 538.906L490.479 535.318C490.479 535.318 491.644 526.967 486.6 524.046C481.556 521.124 463.473 531.081 458.26 538.906ZM420.385 276.76C422.47 282.504 425.272 287.961 428.726 293.002C434.133 300.991 441.72 307.26 450.585 311.065C451.487 303.348 449.862 295.547 445.954 288.831C439.472 277.634 428.754 272.852 420.385 276.76Z" fill="#232B41" class="tblr-illustrations-boy-girl-c" />
-  <path d="M513.447 185.699C505.434 193.674 497.788 196.624 491.964 197.694L491.024 197.864L478.165 187.756L513.447 185.699Z" fill="#E1E1E1" />
-  <path d="M450.867 241.44C454.744 254.128 458.629 266.812 462.525 279.494C469.157 287.839 476.911 295.226 485.567 301.446C499.357 311.235 521.995 322.187 542.238 321.474C552.74 321.126 562.594 317.632 570.231 309.262C576.534 302.32 579.559 294.054 582.555 282.518C583.298 279.653 584.049 276.6 584.838 273.303C586.999 264.379 593.424 236.546 584.575 211.588C581.353 202.523 577.69 198.211 575.651 196.154C573.275 193.74 570.476 191.782 567.394 190.377C564.57 189.104 561.548 188.323 558.461 188.066C558.301 188.93 558.085 190.18 557.841 191.683C557.08 196.379 556.592 200.362 556.282 203.105C556.188 203.979 556.037 205.35 555.887 207.013C555.53 210.77 555.27 214.393 555.107 217.881C555.029 225.279 553.997 232.635 552.036 239.768C550.243 246.356 547.577 252.675 544.108 258.555C535.992 262.148 527.347 264.4 518.51 265.225C486.168 268.165 461.285 250.148 450.867 241.44Z" fill="#DADBE0" />
-  <path d="M542.238 321.492C552.74 321.145 562.594 317.65 570.231 309.281C576.534 302.339 579.558 294.073 582.555 282.537C575.547 283.683 567.469 287.741 559.898 294.458C550.861 302.433 544.586 312.475 542.238 321.492Z" fill="#232B41" class="tblr-illustrations-boy-girl-c" />
-  <path d="M488.178 514.22L501.893 376.83L495.778 336.39H458.213L477.479 514.22H488.178Z" fill="black" opacity="0.22" />
-  <path d="M494.801 195.468L473.956 180.495L469.194 185.539L483.359 206.694L494.801 195.468ZM495.778 195.318L527.368 175.629L534.582 182.261L513.118 210.075L495.778 195.318Z" fill="#0455A4" style="fill: #0455A4; fill: var(--tblr-illustrations-primary, var(--tblr-primary, #0455A4));" />
-  <path d="M494.801 195.468L473.956 180.495L469.194 185.539L483.359 206.694L494.801 195.468Z" fill="black" opacity="0.22" />
-</svg>
-</div>
-<div>
-  <div class="text-center">
-    <label class="form-check form-check-inline">
-      <input class="form-check-input" type="radio" name="theme" value="light" checked />
-      <span class="form-check-label">Light</span>
-    </label>
-    <label class="form-check form-check-inline">
-      <input class="form-check-input" type="radio" name="theme" value="dark" />
-      <span class="form-check-label">Dark</span>
-    </label>
-  </div>
-</div>
-<script>
-  const toggleTheme = (theme) => {
-    if (theme === 'dark') {
-      document.documentElement.setAttribute('data-bs-theme', 'dark');
-    } else {
-      document.documentElement.setAttribute('data-bs-theme', 'light');
-    }
-  }
-  document.querySelectorAll('.form-check-input').forEach((input) => {
-    input.addEventListener('change', (e) => {
-      console.log(e.target.value);
-      toggleTheme(e.target.value);
-    });
-  });
-</script>
-```

docs/illustrations/introduction/index.mdx

@@ -2,5 +2,4 @@
 title: Introduction
 description: Introduction to Tabler Illustrations and their key features.
 summary: Tabler Illustrations is a collection of high-quality, customizable illustrations designed to enhance the visual appeal of your projects. These illustrations align seamlessly with the Tabler design system, making it easy to create engaging and cohesive designs for websites, apps, and presentations
-layout: default
 ---

docs/illustrations/introduction/license.mdx

@@ -1,6 +1,5 @@
 ---
 title: Tabler Illustrations License
-layout: default
 ---
 
 ### Personal License
@@ -27,9 +26,7 @@ You **cannot**:
 
 #### Example usage
 
-Examples of usage **allowed** by the license:
-
-* Creating a personal website by yourself.
+Examples of usage **allowed** by the license:* Creating a personal website by yourself.
 * Creating a website or web application for a client that will be owned by that client.
 * Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
 * Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
@@ -88,7 +85,6 @@ Examples of use **not allowed** by the license:
 * Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you.
 * Selling access to your team account to people who don't work for you company.
 
-layout: default
 ---
 
 In case of differences between above license agreements and the license agreements provided with the product, the license agreement provided with the product shall prevail.

docs/index.mdx

@@ -1,7 +1,6 @@
 ---
 title: Welcome to Tabler Documentation
 summary: Tabler Docs provides a comprehensive guide to help you get started with the Tabler ecosystem, including its UI components, plugins, and icons. Explore detailed documentation to understand and leverage the full potential of Tabler in your projects.
-layout: default
 ---
 
 <ResponsiveImage src="/docs/tabler.png" src-dark="/docs/tabler-dark.png" alt="Tabler" width="816" height="620" className="mb-4" />
@@ -12,6 +11,6 @@ Find all the guides and resources you need to develop with Tabler and our other
    <Card title="UI Components" href="/docs/ui" icon="paint">Free and open source web application UI kit based on Bootstrap</Card>
    <Card title="Icons" href="/docs/icons" icon="ghost"><IconsCount /> pixel-perfect icons for web design and development</Card>
    <Card title="Illustrations" href="/docs/illustrations" icon="brand-figma"><IllustrationsCount /> customizable SVG illustrations for your web project</Card>
-   <Card title="Email Templates" icon="mail" disabled badge="Comming soon"><EmailsCount /> responsive email templates ready to use in your marketing campaigns</Card>
-   <Card title="Avatars" icon="user-circle" disabled badge="Comming soon">Package of over 100 avatars for your next web project</Card>
-</Cards>
+   <Card title="Email Templates" icon="mail" disabled badge="Coming soon"><EmailsCount /> responsive email templates ready to use in your marketing campaigns</Card>
+   <Card title="Avatars" icon="user-circle" disabled badge="Coming soon">Package of over 100 avatars for your next web project</Card>
+</Cards>

docs/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "docs",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "dev": "eleventy --serve --port=3010"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@tabler/core": "workspace:*"
-  },
-  "devDependencies": {
-    "@11ty/eleventy": "^3.0.0",
-    "@repo/e11ty": "workspace:*",
-    "flat-cache": "^6.1.6",
-    "shiki": "^2.3.2"
-  }
-}

docs/test.md

@@ -1,16 +0,0 @@
----
-title: Test
-layout: default
----
-
-test
-
-{% capture html %}
-{% include "ui/avatar.html" icon="heart" color="red" placeholder="as" %}
-{% include "ui/avatar.html" %}
-{% endcapture %}
-{% include "example.html" html=html %}
-
-```html
-{% include "ui/avatar.html" icon="heart" color="red" placeholder="as" %}
-```

docs/ui/base/colors.mdx

@@ -1,9 +1,8 @@
 ---
 title: Colors
-summary: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
+summary: The choice of colors for a website or app interface has a big influence on how users interact with the product and what decisions they make. Harmonious colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
 bootstrapLink: utilities/colors/
 description: Impact of colors on user interface design.
-layout: default
 ---
 
 ## Base colors
@@ -81,4 +80,4 @@ Use the colors of popular social networks to create a recognizable design and ma
   { name: "flickr", value: "#0063dc" },
   { name: "bitbucket", value: "#0052cc" },
   { name: "tabler", value: "#066fd1" }
-]} />
+]} />

docs/ui/base/index.mdx

@@ -3,5 +3,4 @@ title: Base
 order: 2
 description: Foundational elements for UI design.
 summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
-layout: default
 ---

docs/ui/base/typography.mdx

@@ -3,12 +3,11 @@ title: Typography
 summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
 bootstrapLink: content/typography/
 description: Role of typography in interface design.
-layout: default
 ---
 
 ## Headings
 
-Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings. 
+Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings.
 The `h1` tag is the highest level and the `h6` tag is the lowest level.
 
 ```html
@@ -20,7 +19,7 @@ The `h1` tag is the highest level and the `h6` tag is the lowest level.
 <h6>H6 Heading</h6>
 ```
 
-There is example of headings with different levels:
+Below are examples of headings with different levels:
 
 ```html example vertical columns={1}
 <h1>H1 Heading</h1>
@@ -33,17 +32,20 @@ There is example of headings with different levels:
 
 ## Paragraphs
 
-Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content. 
+Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content.
 
 ```html
 <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
 ```
 
-If you use second paragraph, it will be separated from the first one by a blank line.
+If you use a second paragraph, it will be separated from the first one by a blank line.
 
 ```html example vertical centered columns={2}
 <div>
-  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+    ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  </p>
   <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
 </div>
 ```
@@ -51,7 +53,7 @@ If you use second paragraph, it will be separated from the first one by a blank
 
 ## Semantic text elements
 
-Use a variety of semantic text elements, depending of how you want to display particular fragments of content. 
+Use a variety of semantic text elements, depending on how you want to display particular fragments of content.
 
 ```html
 <abbr title="Internationalization">I18N</abbr>
@@ -66,18 +68,17 @@ Use a variety of semantic text elements, depending of how you want to display pa
 <mark>Highlighted</mark>
 <s>Strikethrough</s>
 <samp>Sample</samp>
-Text <sub>Subscripted</sub>
-Text <sup>Superscripted</sup>
+Text <sub>Subscripted</sub> Text <sup>Superscripted</sup>
 <time>20:00</time>
 <u>Underline</u>
 <var>x</var> = <var>y</var> + 2
 ```
 
-Here is an example of semantic text elements:
+Here are examples of semantic text elements:
 
 ```html example vertical separated columns={1}
 <div>
-  <abbr title="Internationalization">I1f8N</abbr>
+  <abbr title="Internationalization">I18N</abbr>
 </div>
 <div><strong>Bold</strong></div>
 <div>
@@ -110,19 +111,15 @@ Here is an example of semantic text elements:
 <div>
   <samp>Sample</samp>
 </div>
-<div>Text <sub>Subscripted</sub>
-</div>
-<div>Text <sup>Superscripted</sup>
-</div>
+<div>Text <sub>Subscripted</sub></div>
+<div>Text <sup>Superscripted</sup></div>
 <div>
   <time>20:00</time>
 </div>
 <div>
   <u>Underline</u>
 </div>
-<div>
-  <var>x</var> = <var>y</var> + 2
-</div>
+<div><var>x</var> = <var>y</var> + 2</div>
 ```
 
 
@@ -133,9 +130,17 @@ Use the `hr` tag to represent a thematic break between paragraphs within one sec
 
 ```html example vertical centered columns={2}
 <div>
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita quibusdam veniam?</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam
+    reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita
+    quibusdam veniam?
+  </p>
   <hr />
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita quibusdam veniam?</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam
+    reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita
+    quibusdam veniam?
+  </p>
 </div>
 ```
 
@@ -149,25 +154,29 @@ You can also add a label to a horizontal rule and align it as you see fit.
 
 ```html example vertical centered columns={2}
 <p>
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+  labore et dolore magna aliquyam erat, sed diam voluptua.
 </p>
 <div class="hr-text">
   <span>Rule text</span>
 </div>
 <p>
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+  takimata sanctus est Lorem ipsum dolor sit amet.
 </p>
 <div class="hr-text hr-text-center">
   <span>Rule text</span>
 </div>
 <p>
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+  labore et dolore magna aliquyam erat, sed diam voluptua.
 </p>
 <div class="hr-text hr-text-end">
   <span>Rule text</span>
 </div>
 <p>
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+  takimata sanctus est Lorem ipsum dolor sit amet.
 </p>
 ```
 
@@ -263,9 +272,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
 Use the `<kbd>` to indicate input that is typically entered via keyboard.
 
 ```html example vertical centered
-<div>
-  To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
-</div>
+<div>To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.</div>
 ```
 
 ```html
@@ -274,14 +281,26 @@ To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd
 
 ## Markdown elements
 
-If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It will apply the default styles for markdown elements. 
+If you can't use the CSS classes you want, or you just want to use HTML tags, use the `.markdown` class in a container. It will apply the default styles for markdown elements.
 
 ```html example centered background="white" columns={2} height="30rem"
 <div class="markdown">
   <h1>Hello World</h1>
-  <p>Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
+  <p>
+    Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus
+    ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut
+    vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub
+      >script</sub
+    >
+    works as well!
+  </p>
   <h2>Second level</h2>
-  <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+  <p>
+    Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum
+    maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis.
+    Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui.
+    Ut et neque nisl.
+  </p>
   <ul>
     <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
     <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>

docs/ui/components/alerts.mdx

@@ -3,7 +3,6 @@ title: Alerts
 summary: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
 bootstrapLink: components/alerts/
 description: Alert messages for user notifications.
-layout: default
 ---
 
 ## Default markup
@@ -38,12 +37,14 @@ Alert classes affect the color of all the text inside an alert. Use another clas
 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use `alert-link` class to style the link and match the text color.
 
 ```html example vertical background="surface" columns={2} centered height="120px"
-<div class="alert alert-danger m-0">This is a danger alert — <a href="#" class="alert-link">check it out</a>!</div>
+<div class="alert alert-danger m-0">
+  This is a danger alert — <a href="#" class="alert-link">check it out</a>!
+</div>
 ```
 
 ## Dismissible alerts
 
-Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
+Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only when the user closes it.
 
 ```html
 <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
@@ -84,7 +85,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 
 Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
 
-Use `alert-icon` class for `<svg>` or `<i>`, when using webfont, to provide the proper styling.
+Use the `alert-icon` class on an `<svg>` (or on an `<i>` when using the webfont) to provide the proper styling.
 
 ```html example vertical background="surface" columns={2} centered separated height="420px"
 <div class="alert alert-success" role="alert">
@@ -156,7 +157,9 @@ Use `alert-icon` class for `<svg>` or `<i>`, when using webfont, to provide the
       >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <path d="M12 9v2m0 4v.01" />
-        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
+        <path
+          d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"
+        />
       </svg>
     </div>
     <div>
@@ -202,10 +205,14 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/039m.jpg)"></span>
+      <span
+        class="avatar me-3"
+        style="background-image: url(/static/samples/avatars/039m.jpg)"
+      ></span>
     </div>
     <div>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet,
+      consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     </div>
   </div>
 </div>
@@ -215,27 +222,36 @@ Add an avatar to your alert modal to make it more personalized.
       <span class="avatar me-3">JL</span>
     </div>
     <div>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet,
+      consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     </div>
   </div>
 </div>
 <div class="alert alert-warning" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/035f.jpg)"></span>
+      <span
+        class="avatar me-3"
+        style="background-image: url(/static/samples/avatars/035f.jpg)"
+      ></span>
     </div>
     <div>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet,
+      consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     </div>
   </div>
 </div>
 <div class="alert alert-danger" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/056f.jpg)"></span>
+      <span
+        class="avatar me-3"
+        style="background-image: url(/static/samples/avatars/056f.jpg)"
+      ></span>
     </div>
     <div>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet,
+      consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     </div>
   </div>
 </div>
@@ -296,7 +312,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
 
 ## Important alerts
 
-If you want your alert to be really eye-catching, you can add a `alert-important` class. It will use the selected color as a background for the alert.
+If you want your alert to be really eye-catching, you can add an `alert-important` class. It will use the selected color as a background for the alert.
 
 ```html
 <div class="alert alert-important alert-success alert-dismissible" role="alert">...</div>
@@ -355,9 +371,9 @@ You can also use other elements, like icons and dismissible buttons, with this t
 </div>
 ```
 
-## Custom alert's color
+## Custom alert color
 
-You're not limited to the 4 default alert's colors. You can use any [base or social color](../base/colors) you want.
+You're not limited to the 4 default alert colors. You can use any [base or social color](../base/colors) you want.
 
 ```html example vertical background="surface" columns={2} centered separated height="420px"
 <div class="alert alert-lime" role="alert">
@@ -375,7 +391,10 @@ You're not limited to the 4 default alert's colors. You can use any [base or soc
 <div class="alert alert-instagram alert-dismissible alert-important" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/035f.jpg)"></span>
+      <span
+        class="avatar me-3"
+        style="background-image: url(/static/samples/avatars/035f.jpg)"
+      ></span>
     </div>
     <div>
       <h4 class="alert-title">Sophia just added a new post on Instagram</h4>

docs/ui/components/autosize.mdx

@@ -3,7 +3,6 @@ title: Autosize
 summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
 libs: autosize
 description: Auto-adjusting textarea for better usability.
-layout: default
 ---
 
 To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.

docs/ui/components/avatars.mdx

@@ -1,13 +1,12 @@
 ---
 title: Avatars
-summary: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
+summary: Avatars help customize various elements of a user interface and make the product experience more personalized. They are often used in communication apps, collaboration tools and social media.
 description: Personalize UI with user avatars.
-layout: default
 ---
 
 ## Default markup
 
-Use the `avatar` class to add an avatar to your interface design for greater customisation.
+Use the `avatar` class to add an avatar to your interface design for greater customization.
 
 ```html example centered separated code
 <span class="avatar" style="background-image: url(/samples/avatars/002f.jpg)"></span>
@@ -17,7 +16,7 @@ Use the `avatar` class to add an avatar to your interface design for greater cus
 
 ## Avatar image
 
-Set an image as the background to make users easy to indentify and create a personalised experience.
+Set an image as the background to make users easy to indentify and create a personalized experience.
 
 ```html example centered separated code
 <span class="avatar" style="background-image: url(/samples/avatars/016f.jpg)"></span>
@@ -39,25 +38,58 @@ You can also use initials instead of pictures.
 
 ## Avatar icons
 
-Apart from pictures and initials, you can also use icons to make the avatars more universal.
+Besides pictures and initials, you can also use icons to make the avatars more universal.
 
 ```html example centered separated
 <span class="avatar">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon avatar-icon"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="12" cy="7" r="4" />
     <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
   </svg>
 </span>
 <span class="avatar">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon avatar-icon"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <line x1="12" y1="5" x2="12" y2="19" />
     <line x1="5" y1="12" x2="19" y2="12" />
   </svg>
 </span>
 <span class="avatar">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon avatar-icon"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="9" cy="7" r="4" />
     <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
@@ -100,7 +132,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar o
 
 ## Avatar status
 
-Add a status indicator to your avatar to show, for instance, if a users is online or offline or indicate the number of messages they have received.
+Add a status indicator to your avatar to show, for instance, if a user is online or offline or indicate the number of messages they have received.
 
 ```html example centered separated code
 <span class="avatar" style="background-image: url(/samples/avatars/018m.jpg)"></span>
@@ -110,9 +142,7 @@ Add a status indicator to your avatar to show, for instance, if a users is onlin
 <span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
   <span class="badge bg-success"></span>
 </span>
-<span class="avatar">
-  <span class="badge bg-warning"></span>SA
-</span>
+<span class="avatar"> <span class="badge bg-warning"></span>SA </span>
 <span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
   <span class="badge bg-info"></span>
 </span>
@@ -164,13 +194,34 @@ Make the list stack once a certain number of avatars is reached to make it look
 
 ```html example centered separated code
 <div class="avatar-list avatar-list-stacked">
-  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/035m.jpg)"></span>
-  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/027f.jpg)"></span>
-  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/036f.jpg)"></span>
+  <span
+    class="avatar avatar-sm rounded-circle"
+    style="background-image: url(/samples/avatars/035m.jpg)"
+  ></span>
+  <span
+    class="avatar avatar-sm rounded-circle"
+    style="background-image: url(/samples/avatars/027f.jpg)"
+  ></span>
+  <span
+    class="avatar avatar-sm rounded-circle"
+    style="background-image: url(/samples/avatars/036f.jpg)"
+  ></span>
   <span class="avatar avatar-sm rounded-circle">SA</span>
-  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/034f.jpg)"></span>
-  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/043f.jpg)"></span>
-  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/039f.jpg)"></span>
-  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/020m.jpg)"></span>
+  <span
+    class="avatar avatar-sm rounded-circle"
+    style="background-image: url(/samples/avatars/034f.jpg)"
+  ></span>
+  <span
+    class="avatar avatar-sm rounded-circle"
+    style="background-image: url(/samples/avatars/043f.jpg)"
+  ></span>
+  <span
+    class="avatar avatar-sm rounded-circle"
+    style="background-image: url(/samples/avatars/039f.jpg)"
+  ></span>
+  <span
+    class="avatar avatar-sm rounded-circle"
+    style="background-image: url(/samples/avatars/020m.jpg)"
+  ></span>
 </div>
 ```

docs/ui/components/badges.mdx

@@ -3,7 +3,6 @@ title: Badges
 summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
 description: Add extra information with badges.
 bootstrapLink: components/badge/
-layout: default
 ---
 
 ## Default markup
@@ -28,18 +27,12 @@ The default badges are square and come in the basic set of colors.
 ## Headings
 
 ```html example columns={1} height="20rem" centered
-<h1>Example heading <span class="badge">New</span>
-</h1>
-<h2>Example heading <span class="badge">New</span>
-</h2>
-<h3>Example heading <span class="badge">New</span>
-</h3>
-<h4>Example heading <span class="badge">New</span>
-</h4>
-<h5>Example heading <span class="badge">New</span>
-</h5>
-<h6>Example heading <span class="badge">New</span>
-</h6>
+<h1>Example heading <span class="badge">New</span></h1>
+<h2>Example heading <span class="badge">New</span></h2>
+<h3>Example heading <span class="badge">New</span></h3>
+<h4>Example heading <span class="badge">New</span></h4>
+<h5>Example heading <span class="badge">New</span></h5>
+<h6>Example heading <span class="badge">New</span></h6>
 ```
 
 ## Outline badges
@@ -112,8 +105,8 @@ Badges can be used as part of links or buttons to provide a counter.
 The results can be seen in the example below.
 
 ```html example centered separated
-<button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span>
-</button>
-<button type="button" class="btn">Notifications <span class="badge bg-green-lt ms-2">4</span>
+<button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span></button>
+<button type="button" class="btn">
+  Notifications <span class="badge bg-green-lt ms-2">4</span>
 </button>
 ```

docs/ui/components/breadcrumb.mdx

@@ -3,7 +3,6 @@ title: Breadcrumb
 summary: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
 bootstrapLink: components/breadcrumb/
 description: Navigation aid for better structure.
-layout: default
 ---
 
 ## Default markup
@@ -93,7 +92,18 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp
 <ol class="breadcrumb">
   <li class="breadcrumb-item">
     <a href="#">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <polyline points="5 12 3 12 12 3 21 12 19 12" />
         <path d="M5 12v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-8" />
@@ -152,18 +162,33 @@ You can use breadcrumbs in headers to show the current page location and provide
         </ol>
       </div>
       <h2 class="page-title">
-        <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
+        <span class="text-truncate"
+          >Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these
+          woods.</span
+        >
       </h2>
     </div>
     <div class="col-auto">
       <div class="btn-list">
         <a href="#" class="btn d-none d-md-inline-flex">
-          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
             <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
             <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
             <path d="M16 5l3 3" />
-          </svg> Edit
+          </svg>
+          Edit
         </a>
         <a href="#" class="btn btn-primary">Publish</a>
       </div>

docs/ui/components/cards.mdx

@@ -3,7 +3,6 @@ title: Cards
 summary: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
 bootstrapLink: components/card/
 description: Organize content with flexible cards.
-layout: default
 ---
 
 ## Default card
@@ -26,24 +25,16 @@ Cards with the `.card-sm` class are well suited for small items such as widgets,
 
 ```html example vertical centered separated height={500} background="base"
 <div class="card card-sm">
-  <div class="card-body">
-    This is some text within a card body.
-  </div>
+  <div class="card-body">This is some text within a card body.</div>
 </div>
 <div class="card">
-  <div class="card-body">
-    This is some text within a card body.
-  </div>
+  <div class="card-body">This is some text within a card body.</div>
 </div>
 <div class="card card-md">
-  <div class="card-body">
-    This is some text within a card body.
-  </div>
+  <div class="card-body">This is some text within a card body.</div>
 </div>
 <div class="card card-lg">
-  <div class="card-body">
-    This is some text within a card body.
-  </div>
+  <div class="card-body">This is some text within a card body.</div>
 </div>
 ```
 
@@ -82,18 +73,23 @@ To create a more visually appealing card, add a title and an image. Thanks to th
 ```html example centered columns={1} height={500} background="base"
 <div class="card">
   <!-- Photo -->
-  <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(/samples/photos/cup-of-coffee-and-an-open-book.jpg)"></div>
+  <div
+    class="img-responsive img-responsive-21x9 card-img-top"
+    style="background-image: url(/samples/photos/cup-of-coffee-and-an-open-book.jpg)"
+  ></div>
   <div class="card-body">
     <h3 class="card-title">Card with title and image</h3>
-    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+    <p class="text-secondary">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
+      iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
+    </p>
   </div>
 </div>
 ```
 
 ## Blog post card
 
-Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the `.card-img-top` class. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
+Add an image to your blog post card to make it eye-catching. You can do it by adding the image, with a `.card-img-top` class, inside the `.card` element. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
 
 ```html example centered columns={1} height={600} background="base"
 <div class="card d-flex flex-column">
@@ -104,7 +100,10 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
     <h3 class="card-title">
       <a href="#">How do you know she is a witch?</a>
     </h3>
-    <div class="text-secondary">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
+    <div class="text-secondary">
+      Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart.
+      You ...
+    </div>
     <div class="d-flex align-items-center pt-4 mt-auto">
       <span class="avatar" style="background-image: url(/samples/avatars/023m.jpg)"></span>
       <div class="ms-3">
@@ -113,8 +112,21 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
       </div>
       <div class="ms-auto">
         <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
-          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon icon-tabler icon-tabler-heart"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
+            ></path>
           </svg>
         </a>
       </div>
@@ -136,7 +148,9 @@ Add the `.row-deck` class to `.row`, if you want to display several cards next t
   </div>
   <div class="col-md-4">
     <div class="card">
-      <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
+      <div class="card-body">
+        Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+      </div>
     </div>
   </div>
   <div class="col-md-4">
@@ -156,7 +170,11 @@ You can also add an image on the left side of the card. To do it, add the `.card
   <div class="row row-0 flex-fill">
     <div class="col-md-3">
       <a href="#">
-        <img src="/samples/photos/a-woman-works-on-a-laptop-at-home.jpg" class="w-100 h-100 object-cover" alt="Card side image" />
+        <img
+          src="/samples/photos/a-woman-works-on-a-laptop-at-home.jpg"
+          class="w-100 h-100 object-cover"
+          alt="Card side image"
+        />
       </a>
     </div>
     <div class="col">
@@ -164,7 +182,10 @@ You can also add an image on the left side of the card. To do it, add the `.card
         <h3 class="card-title">
           <a href="#">Shut up!</a>
         </h3>
-        <div class="text-secondary">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
+        <div class="text-secondary">
+          Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and
+          boil yo...
+        </div>
         <div class="d-flex align-items-center pt-4 mt-auto">
           <span class="avatar" style="background-image: url(/samples/avatars/029m.jpg)"></span>
           <div class="ms-3">
@@ -173,8 +194,21 @@ You can also add an image on the left side of the card. To do it, add the `.card
           </div>
           <div class="ms-auto">
             <a href="#" class="icon d-none d-md-inline-block ms-3 text-red">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon icon-tabler icon-tabler-heart"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
+                ></path>
               </svg>
             </a>
           </div>
@@ -187,7 +221,7 @@ You can also add an image on the left side of the card. To do it, add the `.card
 
 ## Color variations
 
-Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching.
+Add a status color to your card, either at the top or on the side of the card, to customize it and make it more eye-catching.
 
 ```html example columns={2} centered height={400} background="base"
 <div class="row row-deck">
@@ -196,8 +230,10 @@ Add a status color to your card, either at the top or on the side of the card, t
       <div class="card-status-top bg-danger"></div>
       <div class="card-body">
         <h3 class="card-title">Card with top status</h3>
-        <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-          neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
+          iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
+        </p>
       </div>
     </div>
   </div>
@@ -206,8 +242,10 @@ Add a status color to your card, either at the top or on the side of the card, t
       <div class="card-status-start bg-green"></div>
       <div class="card-body">
         <h3 class="card-title">Card with side status</h3>
-        <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-          neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+        <p class="text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
+          iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
+        </p>
       </div>
     </div>
   </div>
@@ -219,16 +257,20 @@ Add a status color to your card, either at the top or on the side of the card, t
   <div class="card-status-top bg-danger"></div>
   <div class="card-body">
     <h3 class="card-title">Card with top status</h3>
-    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+    <p class="text-secondary">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
+      iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
+    </p>
   </div>
 </div>
 <div class="card">
   <div class="card-status-start bg-green"></div>
   <div class="card-body">
     <h3 class="card-title">Card with side status</h3>
-    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+    <p class="text-secondary">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
+      iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
+    </p>
   </div>
 </div>
 ```
@@ -241,8 +283,10 @@ Use the `card-stacked` class to stack up multiple cards, if you want to save scr
 <div class="card card-stacked">
   <div class="card-body">
     <h3 class="card-title">Stacked card</h3>
-    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+    <p class="text-secondary">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
+      iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
+    </p>
   </div>
 </div>
 ```
@@ -272,7 +316,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
       <div class="card-body">
         <div class="card-title">Content of tab #1</div>
         <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
+          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
     </div>
@@ -280,7 +325,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
       <div class="card-body">
         <div class="card-title">Content of tab #2</div>
         <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
+          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
     </div>
@@ -288,7 +334,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
       <div class="card-body">
         <div class="card-title">Content of tab #3</div>
         <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
+          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
     </div>
@@ -296,7 +343,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
       <div class="card-body">
         <div class="card-title">Content of tab #4</div>
         <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
+          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
     </div>
@@ -328,7 +376,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
       <div class="card-body">
         <div class="card-title">Content of tab #1</div>
         <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
+          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
     </div>
@@ -337,7 +386,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
       <div class="card-body">
         <div class="card-title">Content of tab #2</div>
         <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
+          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
     </div>
@@ -346,7 +396,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
       <div class="card-body">
         <div class="card-title">Content of tab #3</div>
         <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
+          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
     </div>
@@ -355,7 +406,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
       <div class="card-body">
         <div class="card-title">Content of tab #4</div>
         <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
+          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
       </div>
     </div>

docs/ui/components/carousel.md

@@ -1,237 +0,0 @@
----
-title: Carousel
-summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
-bootstrapLink: components/carousel/
-description: Display visual content with carousels.
-layout: default
----
-
-## Default markup
-
-Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
-
-```html example centered columns={2} height="35rem"
-<div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
-  <div class="carousel-indicators">
-    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="0" class="active"></button>
-    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="1"></button>
-    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="2"></button>
-    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="3"></button>
-    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="4"></button>
-  </div>
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img class="d-block w-100" alt="" src="/samples/photos/city-lights-reflected-in-the-water-at-night.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/tropical-palm-leaves-floral-pattern-background.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/young-woman-working-in-a-cafe.jpg" />
-    </div>
-  </div>
-  <a class="carousel-control-prev" data-bs-target="#carousel-sample" role="button" data-bs-slide="prev">
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Previous</span>
-  </a>
-  <a class="carousel-control-next" data-bs-target="#carousel-sample" role="button" data-bs-slide="next">
-    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Next</span>
-  </a>
-</div>
-```
-
-## Dots indicators
-
-You can replace the standard indicators with dots. Just add the `carousel-indicators-dot` class to your carousel:
-
-```html example centered columns={2} height="35rem"
-<div id="carousel-indicators-dot" class="carousel slide carousel-fade" data-bs-ride="carousel">
-  <div class="carousel-indicators carousel-indicators-dot">
-    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="0" class="active"></button>
-    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="1"></button>
-    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="2"></button>
-    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="3"></button>
-    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="4"></button>
-  </div>
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img class="d-block w-100" alt="" src="/samples/photos/stylish-workspace-with-macbook-pro.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/coffee-on-a-table-with-other-items.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/book-on-the-grass.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/a-woman-works-at-a-desk-with-a-laptop-and-a-cup-of-coffee.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/people-by-a-banquet-table-full-with-food.jpg" />
-    </div>
-  </div>
-</div>
-```
-
-## Thumb indicators
-
-The syntax is similar with thumbnails. Add class `carousel-indicators-thumb` and add `background-image` to element `[data-bs-target]`. Default thumbnails have an aspect ratio of 1:1. To change this use `ratio` utils.
-
-```html example centered columns={2} height="35rem"
-<div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel">
-  <div class="carousel-indicators carousel-indicators-thumb">
-    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="0" class="ratio ratio-4x3 active" style="background-image: url(/samples/photos/group-of-people-sightseeing-in-the-city.jpg)"></button>
-    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="1" class="ratio ratio-4x3" style="background-image: url(/samples/photos/young-woman-working-in-a-cafe.jpg)"></button>
-    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="2" class="ratio ratio-4x3" style="background-image: url(/samples/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg)"></button>
-    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="3" class="ratio ratio-4x3" style="background-image: url(/samples/photos/stylish-workplace-with-computer-at-home.jpg)"></button>
-    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="4" class="ratio ratio-4x3" style="background-image: url(/samples/photos/stylish-workspace-with-macbook-pro.jpg)"></button>
-  </div>
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img class="d-block w-100" alt="" src="/samples/photos/group-of-people-sightseeing-in-the-city.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/young-woman-working-in-a-cafe.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/stylish-workplace-with-computer-at-home.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/stylish-workspace-with-macbook-pro.jpg" />
-    </div>
-  </div>
-</div>
-```
-
-## Vertical indicators
-
-To make the indicators go to the right side, add the `carousel-indicators-vertical` class. You can combine it with other classes that are responsible for dots or thumbnails.
-
-```html example centered columns={2} height="35rem"
-<div id="carousel-indicators-dot-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
-  <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-dot">
-    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="0" class="active"></button>
-    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="1"></button>
-    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="2"></button>
-    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="3"></button>
-    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="4"></button>
-  </div>
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img class="d-block w-100" alt="" src="/samples/photos/man-looking-out-to-sea.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/making-magic-with-fairy-lights.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money-5.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/cup-of-coffee-on-table-in-cafe-2.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-2.jpg" />
-    </div>
-  </div>
-</div>
-```
-
-Likewise, you can add thumbnails on the right side:
-
-```html example centered columns={2} height="35rem"
-<div id="carousel-indicators-thumb-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
-  <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-thumb">
-    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="0" class="ratio ratio-4x3 active" style="background-image: url(/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg)"></button>
-    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="1" class="ratio ratio-4x3" style="background-image: url(/samples/photos/businesswoman-working-at-her-laptop.jpg)"></button>
-    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="2" class="ratio ratio-4x3" style="background-image: url(/samples/photos/color-palette-guide-sample-colors-catalog-.jpg)"></button>
-    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="3" class="ratio ratio-4x3" style="background-image: url(/samples/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg)"></button>
-    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="4" class="ratio ratio-4x3" style="background-image: url(/samples/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg)"></button>
-  </div>
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img class="d-block w-100" alt="" src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/businesswoman-working-at-her-laptop.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg" />
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg" />
-    </div>
-  </div>
-</div>
-```
-
-## Carousel with captions
-
-Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. To make the text more readable on the image you can add `carousel-caption-background` which will add a black overlay over the image.
-
-```html example centered columns={2} height="35rem"
-<div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img class="d-block w-100" alt="" src="/samples/photos/workplace-with-laptop-on-table-at-home-4.jpg" />
-      <div class="carousel-caption-background d-none d-md-block"></div>
-      <div class="carousel-caption d-none d-md-block">
-        <h3>Slide label</h3>
-        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-      </div>
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/people-watching-a-presentation-in-a-room.jpg" />
-      <div class="carousel-caption-background d-none d-md-block"></div>
-      <div class="carousel-caption d-none d-md-block">
-        <h3>Slide label</h3>
-        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-      </div>
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/people-by-a-banquet-table-full-with-food.jpg" />
-      <div class="carousel-caption-background d-none d-md-block"></div>
-      <div class="carousel-caption d-none d-md-block">
-        <h3>Slide label</h3>
-        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-      </div>
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/books-and-purple-flowers-on-a-wooden-stool-by-the-bed.jpg" />
-      <div class="carousel-caption-background d-none d-md-block"></div>
-      <div class="carousel-caption d-none d-md-block">
-        <h3>Slide label</h3>
-        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-      </div>
-    </div>
-    <div class="carousel-item">
-      <img class="d-block w-100" alt="" src="/samples/photos/cup-of-coffee-and-an-open-book.jpg" />
-      <div class="carousel-caption-background d-none d-md-block"></div>
-      <div class="carousel-caption d-none d-md-block">
-        <h3>Slide label</h3>
-        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-      </div>
-    </div>
-  </div>
-  <a class="carousel-control-prev" data-bs-target="#carousel-captions" role="button" data-bs-slide="prev">
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Previous</span>
-  </a>
-  <a class="carousel-control-next" data-bs-target="#carousel-captions" role="button" data-bs-slide="next">
-    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Next</span>
-  </a>
-</div>
-```

docs/ui/components/carousel.mdx

@@ -0,0 +1,459 @@
+---
+title: Carousel
+summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
+bootstrapLink: components/carousel/
+description: Display visual content with carousels.
+---
+
+## Default markup
+
+Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
+
+```html example centered columns={2} height="35rem"
+<div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
+  <div class="carousel-indicators">
+    <button
+      type="button"
+      data-bs-target="#carousel-sample"
+      data-bs-slide-to="0"
+      class="active"
+    ></button>
+    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="1"></button>
+    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="2"></button>
+    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="3"></button>
+    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="4"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/city-lights-reflected-in-the-water-at-night.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/tropical-palm-leaves-floral-pattern-background.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/young-woman-working-in-a-cafe.jpg" />
+    </div>
+  </div>
+  <a
+    class="carousel-control-prev"
+    data-bs-target="#carousel-sample"
+    role="button"
+    data-bs-slide="prev"
+  >
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </a>
+  <a
+    class="carousel-control-next"
+    data-bs-target="#carousel-sample"
+    role="button"
+    data-bs-slide="next"
+  >
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </a>
+</div>
+```
+
+## Dots indicators
+
+You can replace the standard indicators with dots. Just add the `carousel-indicators-dot` class to your carousel:
+
+```html example centered columns={2} height="35rem"
+<div id="carousel-indicators-dot" class="carousel slide carousel-fade" data-bs-ride="carousel">
+  <div class="carousel-indicators carousel-indicators-dot">
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-dot"
+      data-bs-slide-to="0"
+      class="active"
+    ></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="1"></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="2"></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="3"></button>
+    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="4"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/stylish-workspace-with-macbook-pro.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/coffee-on-a-table-with-other-items.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/book-on-the-grass.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/a-woman-works-at-a-desk-with-a-laptop-and-a-cup-of-coffee.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/people-by-a-banquet-table-full-with-food.jpg"
+      />
+    </div>
+  </div>
+</div>
+```
+
+## Thumb indicators
+
+The syntax is similar for thumbnails. Add class `carousel-indicators-thumb` and add `background-image` to element `[data-bs-target]`. Default thumbnails have an aspect ratio of 1:1. To change this use `ratio` utils.
+
+```html example centered columns={2} height="35rem"
+<div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel">
+  <div class="carousel-indicators carousel-indicators-thumb">
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb"
+      data-bs-slide-to="0"
+      class="ratio ratio-4x3 active"
+      style="background-image: url(/samples/photos/group-of-people-sightseeing-in-the-city.jpg)"
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb"
+      data-bs-slide-to="1"
+      class="ratio ratio-4x3"
+      style="background-image: url(/samples/photos/young-woman-working-in-a-cafe.jpg)"
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb"
+      data-bs-slide-to="2"
+      class="ratio ratio-4x3"
+      style="
+        background-image: url(/samples/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg);
+      "
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb"
+      data-bs-slide-to="3"
+      class="ratio ratio-4x3"
+      style="background-image: url(/samples/photos/stylish-workplace-with-computer-at-home.jpg)"
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb"
+      data-bs-slide-to="4"
+      class="ratio ratio-4x3"
+      style="background-image: url(/samples/photos/stylish-workspace-with-macbook-pro.jpg)"
+    ></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/group-of-people-sightseeing-in-the-city.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/young-woman-working-in-a-cafe.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/stylish-workplace-with-computer-at-home.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/stylish-workspace-with-macbook-pro.jpg"
+      />
+    </div>
+  </div>
+</div>
+```
+
+## Vertical indicators
+
+To make the indicators go to the right side, add the `carousel-indicators-vertical` class. You can combine it with other classes that are responsible for dots or thumbnails.
+
+```html example centered columns={2} height="35rem"
+<div
+  id="carousel-indicators-dot-vertical"
+  class="carousel slide carousel-fade"
+  data-bs-ride="carousel"
+>
+  <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-dot">
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-dot-vertical"
+      data-bs-slide-to="0"
+      class="active"
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-dot-vertical"
+      data-bs-slide-to="1"
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-dot-vertical"
+      data-bs-slide-to="2"
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-dot-vertical"
+      data-bs-slide-to="3"
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-dot-vertical"
+      data-bs-slide-to="4"
+    ></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" alt="" src="/samples/photos/man-looking-out-to-sea.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/making-magic-with-fairy-lights.jpg" />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money-5.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/cup-of-coffee-on-table-in-cafe-2.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-2.jpg"
+      />
+    </div>
+  </div>
+</div>
+```
+
+An example of adding thumbnails on the right side:
+
+```html example centered columns={2} height="35rem"
+<div
+  id="carousel-indicators-thumb-vertical"
+  class="carousel slide carousel-fade"
+  data-bs-ride="carousel"
+>
+  <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-thumb">
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb-vertical"
+      data-bs-slide-to="0"
+      class="ratio ratio-4x3 active"
+      style="
+        background-image: url(/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg);
+      "
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb-vertical"
+      data-bs-slide-to="1"
+      class="ratio ratio-4x3"
+      style="background-image: url(/samples/photos/businesswoman-working-at-her-laptop.jpg)"
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb-vertical"
+      data-bs-slide-to="2"
+      class="ratio ratio-4x3"
+      style="background-image: url(/samples/photos/color-palette-guide-sample-colors-catalog-.jpg)"
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb-vertical"
+      data-bs-slide-to="3"
+      class="ratio ratio-4x3"
+      style="
+        background-image: url(/samples/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg);
+      "
+    ></button>
+    <button
+      type="button"
+      data-bs-target="#carousel-indicators-thumb-vertical"
+      data-bs-slide-to="4"
+      class="ratio ratio-4x3"
+      style="
+        background-image: url(/samples/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg);
+      "
+    ></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/businesswoman-working-at-her-laptop.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg"
+      />
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg"
+      />
+    </div>
+  </div>
+</div>
+```
+
+## Carousel with captions
+
+Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. To make the text more readable on the image you can add `carousel-caption-background` which will add a black overlay over the image.
+
+```html example centered columns={2} height="35rem"
+<div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/workplace-with-laptop-on-table-at-home-4.jpg"
+      />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/people-watching-a-presentation-in-a-room.jpg"
+      />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/people-by-a-banquet-table-full-with-food.jpg"
+      />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img
+        class="d-block w-100"
+        alt=""
+        src="/samples/photos/books-and-purple-flowers-on-a-wooden-stool-by-the-bed.jpg"
+      />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" alt="" src="/samples/photos/cup-of-coffee-and-an-open-book.jpg" />
+      <div class="carousel-caption-background d-none d-md-block"></div>
+      <div class="carousel-caption d-none d-md-block">
+        <h3>Slide label</h3>
+        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+      </div>
+    </div>
+  </div>
+  <a
+    class="carousel-control-prev"
+    data-bs-target="#carousel-captions"
+    role="button"
+    data-bs-slide="prev"
+  >
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </a>
+  <a
+    class="carousel-control-next"
+    data-bs-target="#carousel-captions"
+    role="button"
+    data-bs-slide="next"
+  >
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </a>
+</div>
+```

docs/ui/components/charts.md

@@ -1,518 +0,0 @@
----
-title: Charts
-libs: apexcharts
-summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
-description: Interactive data visualizations with ApexCharts.
-layout: default
----
-
-To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
-
-See also the [ApexCharts](https://apexcharts.com/) documentation.
-
-## Line Chart
-
-Line charts are an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
-
-```html example centered columns={2} height="25rem" libs="apexcharts"
-<div class="card">
-  <div class="card-body">
-    <div id="chart-demo-line" class="chart-lg"></div>
-  </div>
-</div>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-line'), {
-      chart: {
-        type: "line",
-        fontFamily: 'inherit',
-        height: 240,
-        parentHeightOffset: 0,
-        toolbar: {
-          show: false,
-        },
-        animations: {
-          enabled: false
-        },
-      },
-      fill: {
-        opacity: 1,
-      },
-      stroke: {
-        width: 2,
-        lineCap: "round",
-        curve: "straight",
-      },
-      series: [{
-        name: "Session Duration",
-        data: [117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95]
-      }, {
-        name: "Page Views",
-        data: [59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67]
-      }, {
-        name: "Total Visits",
-        data: [53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59]
-      }],
-      tooltip: {
-        theme: 'dark'
-      },
-      grid: {
-        padding: {
-          top: -20,
-          right: 0,
-          left: -4,
-          bottom: -4
-        },
-        strokeDashArray: 4,
-      },
-      xaxis: {
-        labels: {
-          padding: 0,
-        },
-        tooltip: {
-          enabled: false
-        },
-        type: 'datetime',
-      },
-      yaxis: {
-        labels: {
-          padding: 4
-        },
-      },
-      labels: [
-        '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02'
-      ],
-      colors: [tabler.getColor("yellow"), tabler.getColor("green"), tabler.getColor("primary")],
-      legend: {
-        show: true,
-        position: 'bottom',
-        offsetY: 12,
-        markers: {
-          width: 10,
-          height: 10,
-          radius: 100,
-        },
-        itemMargin: {
-          horizontal: 8,
-          vertical: 8
-        },
-      },
-    })).render();
-  });
-</script>
-```
-
-## Area Chart
-
-Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
-
-```html example centered columns={2} height="25rem" libs="apexcharts"
-<div class="card">
-  <div class="card-body">
-    <div id="chart-demo-area" class="chart-lg"></div>
-  </div>
-</div>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-area'), {
-      chart: {
-        type: "area",
-        fontFamily: 'inherit',
-        height: 240,
-        parentHeightOffset: 0,
-        toolbar: {
-          show: false,
-        },
-        animations: {
-          enabled: false
-        },
-      },
-      dataLabels: {
-        enabled: false,
-      },
-      fill: {
-        opacity: .16,
-        type: 'solid'
-      },
-      stroke: {
-        width: 2,
-        lineCap: "round",
-        curve: "smooth",
-      },
-      series: [{
-        name: "series1",
-        data: [56, 40, 39, 47, 34, 48, 44]
-      }, {
-        name: "series2",
-        data: [45, 43, 30, 23, 38, 39, 54]
-      }],
-      tooltip: {
-        theme: 'dark'
-      },
-      grid: {
-        padding: {
-          top: -20,
-          right: 0,
-          left: -4,
-          bottom: -4
-        },
-        strokeDashArray: 4,
-      },
-      xaxis: {
-        labels: {
-          padding: 0,
-        },
-        tooltip: {
-          enabled: false
-        },
-        axisBorder: {
-          show: false,
-        },
-        type: 'datetime',
-      },
-      yaxis: {
-        labels: {
-          padding: 4
-        },
-      },
-      labels: [
-        '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27'
-      ],
-      colors: [tabler.getColor("primary"), tabler.getColor("purple")],
-      legend: {
-        show: true,
-        position: 'bottom',
-        offsetY: 12,
-        markers: {
-          width: 10,
-          height: 10,
-          radius: 100,
-        },
-        itemMargin: {
-          horizontal: 8,
-          vertical: 8
-        },
-      },
-    })).render();
-  });
-</script>
-```
-
-## Bar Chart
-
-Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
-
-```html example centered columns={2} height="25rem" libs="apexcharts"
-<div class="card">
-  <div class="card-body">
-    <div id="chart-demo-bar" class="chart-lg"></div>
-  </div>
-</div>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-bar'), {
-      chart: {
-        type: "bar",
-        fontFamily: 'inherit',
-        height: 240,
-        parentHeightOffset: 0,
-        toolbar: {
-          show: false,
-        },
-        animations: {
-          enabled: false
-        },
-        stacked: true,
-      },
-      plotOptions: {
-        bar: {
-          barHeight: '50%',
-          horizontal: true,
-        }
-      },
-      dataLabels: {
-        enabled: false,
-      },
-      fill: {
-        opacity: 1,
-      },
-      series: [{
-        name: "Container for a Fanta",
-        data: [44, 55, 41, 37, 22, 43, 21]
-      }, {
-        name: "Strange sunglasses",
-        data: [53, 32, 33, 52, 13, 43, 32]
-      }, {
-        name: "Pen Pineapple Apple Pen",
-        data: [12, 17, 11, 9, 15, 11, 20]
-      }, {
-        name: "Binoculars",
-        data: [9, 7, 5, 8, 6, 9, 4]
-      }, {
-        name: "Magical notebook",
-        data: [25, 12, 19, 32, 25, 24, 10]
-      }],
-      tooltip: {
-        theme: 'dark'
-      },
-      grid: {
-        padding: {
-          top: -20,
-          right: 0,
-          left: -4,
-          bottom: -4
-        },
-        strokeDashArray: 4,
-      },
-      xaxis: {
-        labels: {
-          padding: 0,
-          formatter: function(val) {
-            return val + "K"
-          },
-        },
-        tooltip: {
-          enabled: false
-        },
-        axisBorder: {
-          show: false,
-        },
-        categories: ['2008', '2009', '2010', '2011', '2012', '2013', '2014'],
-      },
-      yaxis: {
-        labels: {
-          padding: 4
-        },
-      },
-      colors: [tabler.getColor("purple"), tabler.getColor("green"), tabler.getColor("yellow"), tabler.getColor("red"), tabler.getColor("primary")],
-      legend: {
-        show: true,
-        position: 'bottom',
-        offsetY: 12,
-        markers: {
-          width: 10,
-          height: 10,
-          radius: 100,
-        },
-        itemMargin: {
-          horizontal: 8,
-          vertical: 8
-        },
-      },
-    })).render();
-  });
-</script>
-```
-
-## Pie Chart
-
-Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
-
-```html example centered columns={2} height="25rem" libs="apexcharts"
-<div class="card">
-  <div class="card-body">
-    <div id="chart-demo-pie" class="chart-lg"></div>
-  </div>
-</div>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
-      chart: {
-        type: "donut",
-        fontFamily: 'inherit',
-        height: 240,
-        sparkline: {
-          enabled: true
-        },
-        animations: {
-          enabled: false
-        },
-      },
-      fill: {
-        opacity: 1,
-      },
-      series: [44, 55, 12, 2],
-      labels: ["Direct", "Affilliate", "E-mail", "Other"],
-      tooltip: {
-        theme: 'dark'
-      },
-      grid: {
-        strokeDashArray: 4,
-      },
-      colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("primary", 0.6), tabler.getColor("gray-300")],
-      legend: {
-        show: true,
-        position: 'bottom',
-        offsetY: 12,
-        markers: {
-          width: 10,
-          height: 10,
-          radius: 100,
-        },
-        itemMargin: {
-          horizontal: 8,
-          vertical: 8
-        },
-      },
-      tooltip: {
-        fillSeriesColor: false
-      },
-    })).render();
-  });
-</script>
-```
-
-## Heatmap Chart
-
-Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
-
-```html example centered columns={2} height="25rem" libs="apexcharts"
-<div class="card">
-  <div class="card-body">
-    <div id="chart-demo-pie" class="chart-lg"></div>
-  </div>
-</div>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
-      chart: {
-        type: "donut",
-        fontFamily: 'inherit',
-        height: 240,
-        sparkline: {
-          enabled: true
-        },
-        animations: {
-          enabled: false
-        },
-      },
-      fill: {
-        opacity: 1,
-      },
-      series: [44, 55, 12, 2],
-      labels: ["Direct", "Affilliate", "E-mail", "Other"],
-      tooltip: {
-        theme: 'dark'
-      },
-      grid: {
-        strokeDashArray: 4,
-      },
-      colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("primary", 0.6), tabler.getColor("gray-300")],
-      legend: {
-        show: true,
-        position: 'bottom',
-        offsetY: 12,
-        markers: {
-          width: 10,
-          height: 10,
-          radius: 100,
-        },
-        itemMargin: {
-          horizontal: 8,
-          vertical: 8
-        },
-      },
-      tooltip: {
-        fillSeriesColor: false
-      },
-    })).render();
-  });
-</script>
-```
-
-## Advanced example
-
-For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
-
-```html example centered columns={2} height="25rem" libs="apexcharts"
-<div class="card">
-  <div class="card-body">
-    <div id="chart-social-referrals" class="chart-lg"></div>
-  </div>
-</div>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    window.ApexCharts && (new ApexCharts(document.getElementById('chart-social-referrals'), {
-      chart: {
-        type: "line",
-        fontFamily: 'inherit',
-        height: 240,
-        parentHeightOffset: 0,
-        toolbar: {
-          show: false,
-        },
-        animations: {
-          enabled: false
-        },
-      },
-      fill: {
-        opacity: 1,
-      },
-      stroke: {
-        width: 2,
-        lineCap: "round",
-        curve: "smooth",
-      },
-      series: [{
-        name: "Facebook",
-        data: [13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836, 12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508, 13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142, 8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749]
-      }, {
-        name: "Twitter",
-        data: [3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893, 3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954, 3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954, 5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734]
-      }, {
-        name: "Dribbble",
-        data: [722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621, 1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924, 1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150, 654, 1695, 1662, 1285, 1787]
-      }],
-      tooltip: {
-        theme: 'dark'
-      },
-      grid: {
-        padding: {
-          top: -20,
-          right: 0,
-          left: -4,
-          bottom: -4
-        },
-        strokeDashArray: 4,
-        xaxis: {
-          lines: {
-            show: true
-          }
-        },
-      },
-      xaxis: {
-        labels: {
-          padding: 0,
-        },
-        tooltip: {
-          enabled: false
-        },
-        type: 'datetime',
-      },
-      yaxis: {
-        labels: {
-          padding: 4
-        },
-      },
-      labels: [
-        '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26', '2020-07-27', '2020-07-28', '2020-07-29', '2020-07-30', '2020-07-31', '2020-08-01', '2020-08-02', '2020-08-03', '2020-08-04', '2020-08-05', '2020-08-06', '2020-08-07', '2020-08-08', '2020-08-09', '2020-08-10'
-      ],
-      colors: [tabler.getColor("facebook"), tabler.getColor("twitter"), tabler.getColor("dribbble")],
-      legend: {
-        show: true,
-        position: 'bottom',
-        offsetY: 12,
-        markers: {
-          width: 10,
-          height: 10,
-          radius: 100,
-        },
-        itemMargin: {
-          horizontal: 8,
-          vertical: 8
-        },
-      },
-    })).render();
-  });
-</script>
-```

docs/ui/components/charts.mdx

@@ -0,0 +1,697 @@
+---
+title: Charts
+libs: apexcharts
+summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
+description: Interactive data visualizations with ApexCharts.
+---
+
+To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
+
+See also the [ApexCharts](https://apexcharts.com/) documentation.
+
+## Line Chart
+
+Line charts are an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
+
+```html example centered columns={2} height="25rem" libs="apexcharts"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-line" class="chart-lg"></div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    window.ApexCharts &&
+      new ApexCharts(document.getElementById("chart-demo-line"), {
+        chart: {
+          type: "line",
+          fontFamily: "inherit",
+          height: 240,
+          parentHeightOffset: 0,
+          toolbar: {
+            show: false,
+          },
+          animations: {
+            enabled: false,
+          },
+        },
+        fill: {
+          opacity: 1,
+        },
+        stroke: {
+          width: 2,
+          lineCap: "round",
+          curve: "straight",
+        },
+        series: [
+          {
+            name: "Session Duration",
+            data: [117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95],
+          },
+          {
+            name: "Page Views",
+            data: [59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67],
+          },
+          {
+            name: "Total Visits",
+            data: [53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59],
+          },
+        ],
+        tooltip: {
+          theme: "dark",
+        },
+        grid: {
+          padding: {
+            top: -20,
+            right: 0,
+            left: -4,
+            bottom: -4,
+          },
+          strokeDashArray: 4,
+        },
+        xaxis: {
+          labels: {
+            padding: 0,
+          },
+          tooltip: {
+            enabled: false,
+          },
+          type: "datetime",
+        },
+        yaxis: {
+          labels: {
+            padding: 4,
+          },
+        },
+        labels: [
+          "2020-06-21",
+          "2020-06-22",
+          "2020-06-23",
+          "2020-06-24",
+          "2020-06-25",
+          "2020-06-26",
+          "2020-06-27",
+          "2020-06-28",
+          "2020-06-29",
+          "2020-06-30",
+          "2020-07-01",
+          "2020-07-02",
+        ],
+        colors: [tabler.getColor("yellow"), tabler.getColor("green"), tabler.getColor("primary")],
+        legend: {
+          show: true,
+          position: "bottom",
+          offsetY: 12,
+          markers: {
+            width: 10,
+            height: 10,
+            radius: 100,
+          },
+          itemMargin: {
+            horizontal: 8,
+            vertical: 8,
+          },
+        },
+      }).render();
+  });
+</script>
+```
+
+## Area Chart
+
+Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
+
+```html example centered columns={2} height="25rem" libs="apexcharts"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-area" class="chart-lg"></div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    window.ApexCharts &&
+      new ApexCharts(document.getElementById("chart-demo-area"), {
+        chart: {
+          type: "area",
+          fontFamily: "inherit",
+          height: 240,
+          parentHeightOffset: 0,
+          toolbar: {
+            show: false,
+          },
+          animations: {
+            enabled: false,
+          },
+        },
+        dataLabels: {
+          enabled: false,
+        },
+        fill: {
+          opacity: 0.16,
+          type: "solid",
+        },
+        stroke: {
+          width: 2,
+          lineCap: "round",
+          curve: "smooth",
+        },
+        series: [
+          {
+            name: "series1",
+            data: [56, 40, 39, 47, 34, 48, 44],
+          },
+          {
+            name: "series2",
+            data: [45, 43, 30, 23, 38, 39, 54],
+          },
+        ],
+        tooltip: {
+          theme: "dark",
+        },
+        grid: {
+          padding: {
+            top: -20,
+            right: 0,
+            left: -4,
+            bottom: -4,
+          },
+          strokeDashArray: 4,
+        },
+        xaxis: {
+          labels: {
+            padding: 0,
+          },
+          tooltip: {
+            enabled: false,
+          },
+          axisBorder: {
+            show: false,
+          },
+          type: "datetime",
+        },
+        yaxis: {
+          labels: {
+            padding: 4,
+          },
+        },
+        labels: [
+          "2020-06-21",
+          "2020-06-22",
+          "2020-06-23",
+          "2020-06-24",
+          "2020-06-25",
+          "2020-06-26",
+          "2020-06-27",
+        ],
+        colors: [tabler.getColor("primary"), tabler.getColor("purple")],
+        legend: {
+          show: true,
+          position: "bottom",
+          offsetY: 12,
+          markers: {
+            width: 10,
+            height: 10,
+            radius: 100,
+          },
+          itemMargin: {
+            horizontal: 8,
+            vertical: 8,
+          },
+        },
+      }).render();
+  });
+</script>
+```
+
+## Bar Chart
+
+Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
+
+```html example centered columns={2} height="25rem" libs="apexcharts"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-bar" class="chart-lg"></div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    window.ApexCharts &&
+      new ApexCharts(document.getElementById("chart-demo-bar"), {
+        chart: {
+          type: "bar",
+          fontFamily: "inherit",
+          height: 240,
+          parentHeightOffset: 0,
+          toolbar: {
+            show: false,
+          },
+          animations: {
+            enabled: false,
+          },
+          stacked: true,
+        },
+        plotOptions: {
+          bar: {
+            barHeight: "50%",
+            horizontal: true,
+          },
+        },
+        dataLabels: {
+          enabled: false,
+        },
+        fill: {
+          opacity: 1,
+        },
+        series: [
+          {
+            name: "Container for a Fanta",
+            data: [44, 55, 41, 37, 22, 43, 21],
+          },
+          {
+            name: "Strange sunglasses",
+            data: [53, 32, 33, 52, 13, 43, 32],
+          },
+          {
+            name: "Pen Pineapple Apple Pen",
+            data: [12, 17, 11, 9, 15, 11, 20],
+          },
+          {
+            name: "Binoculars",
+            data: [9, 7, 5, 8, 6, 9, 4],
+          },
+          {
+            name: "Magical notebook",
+            data: [25, 12, 19, 32, 25, 24, 10],
+          },
+        ],
+        tooltip: {
+          theme: "dark",
+        },
+        grid: {
+          padding: {
+            top: -20,
+            right: 0,
+            left: -4,
+            bottom: -4,
+          },
+          strokeDashArray: 4,
+        },
+        xaxis: {
+          labels: {
+            padding: 0,
+            formatter: function (val) {
+              return val + "K";
+            },
+          },
+          tooltip: {
+            enabled: false,
+          },
+          axisBorder: {
+            show: false,
+          },
+          categories: ["2008", "2009", "2010", "2011", "2012", "2013", "2014"],
+        },
+        yaxis: {
+          labels: {
+            padding: 4,
+          },
+        },
+        colors: [
+          tabler.getColor("purple"),
+          tabler.getColor("green"),
+          tabler.getColor("yellow"),
+          tabler.getColor("red"),
+          tabler.getColor("primary"),
+        ],
+        legend: {
+          show: true,
+          position: "bottom",
+          offsetY: 12,
+          markers: {
+            width: 10,
+            height: 10,
+            radius: 100,
+          },
+          itemMargin: {
+            horizontal: 8,
+            vertical: 8,
+          },
+        },
+      }).render();
+  });
+</script>
+```
+
+## Pie Chart
+
+Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
+
+```html example centered columns={2} height="25rem" libs="apexcharts"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-pie" class="chart-lg"></div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    window.ApexCharts &&
+      new ApexCharts(document.getElementById("chart-demo-pie"), {
+        chart: {
+          type: "donut",
+          fontFamily: "inherit",
+          height: 240,
+          sparkline: {
+            enabled: true,
+          },
+          animations: {
+            enabled: false,
+          },
+        },
+        fill: {
+          opacity: 1,
+        },
+        series: [44, 55, 12, 2],
+        labels: ["Direct", "Affilliate", "E-mail", "Other"],
+        tooltip: {
+          theme: "dark",
+        },
+        grid: {
+          strokeDashArray: 4,
+        },
+        colors: [
+          tabler.getColor("primary"),
+          tabler.getColor("primary", 0.8),
+          tabler.getColor("primary", 0.6),
+          tabler.getColor("gray-300"),
+        ],
+        legend: {
+          show: true,
+          position: "bottom",
+          offsetY: 12,
+          markers: {
+            width: 10,
+            height: 10,
+            radius: 100,
+          },
+          itemMargin: {
+            horizontal: 8,
+            vertical: 8,
+          },
+        },
+      }).render();
+  });
+</script>
+```
+
+## Heatmap Chart
+
+Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
+
+```html example centered columns={2} height="25rem" libs="apexcharts"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-heatmap" class="chart-lg"></div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    window.ApexCharts &&
+      new ApexCharts(document.getElementById("chart-demo-heatmap"), {
+        chart: {
+          type: "heatmap",
+          fontFamily: "inherit",
+          height: 240,
+          animations: {
+            enabled: false,
+          },
+          toolbar: {
+            show: false,
+          },
+        },
+        tooltip: {
+          theme: "dark",
+        },
+        fill: {
+          opacity: 1,
+        },
+        series: [
+          {
+            name: "New York",
+            data: [
+              { x: "Monday", y: 22 },
+              { x: "Tuesday", y: 24 },
+              { x: "Wednesday", y: 19 },
+              { x: "Thursday", y: 23 },
+              { x: "Friday", y: 25 },
+              { x: "Saturday", y: 27 },
+              { x: "Sunday", y: 26 },
+            ],
+          },
+          {
+            name: "Los Angeles",
+            data: [
+              { x: "Monday", y: 28 },
+              { x: "Tuesday", y: 30 },
+              { x: "Wednesday", y: 27 },
+              { x: "Thursday", y: 29 },
+              { x: "Friday", y: 31 },
+              { x: "Saturday", y: 32 },
+              { x: "Sunday", y: 33 },
+            ],
+          },
+          {
+            name: "Chicago",
+            data: [
+              { x: "Monday", y: 18 },
+              { x: "Tuesday", y: 20 },
+              { x: "Wednesday", y: 17 },
+              { x: "Thursday", y: 19 },
+              { x: "Friday", y: 21 },
+              { x: "Saturday", y: 22 },
+              { x: "Sunday", y: 23 },
+            ],
+          },
+          {
+            name: "Houston",
+            data: [
+              { x: "Monday", y: 25 },
+              { x: "Tuesday", y: 27 },
+              { x: "Wednesday", y: 24 },
+              { x: "Thursday", y: 26 },
+              { x: "Friday", y: 28 },
+              { x: "Saturday", y: 29 },
+              { x: "Sunday", y: 30 },
+            ],
+          },
+          {
+            name: "Phoenix",
+            data: [
+              { x: "Monday", y: 33 },
+              { x: "Tuesday", y: 35 },
+              { x: "Wednesday", y: 32 },
+              { x: "Thursday", y: 34 },
+              { x: "Friday", y: 36 },
+              { x: "Saturday", y: 37 },
+              { x: "Sunday", y: 38 },
+            ],
+          },
+          {
+            name: "Philadelphia",
+            data: [
+              { x: "Monday", y: 20 },
+              { x: "Tuesday", y: 22 },
+              { x: "Wednesday", y: 19 },
+              { x: "Thursday", y: 21 },
+              { x: "Friday", y: 23 },
+              { x: "Saturday", y: 24 },
+              { x: "Sunday", y: 25 },
+            ],
+          },
+        ],
+        colors: [tabler.getColor("primary")],
+        dataLabels: {
+          enabled: false,
+        },
+        xaxis: {
+          tooltip: {
+            enabled: false,
+          },
+        },
+        title: {
+          text: "Average Temperature by Day and City",
+        },
+      }).render();
+  });
+</script>
+```
+
+## Advanced example
+
+For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
+
+```html example centered columns={2} height="25rem" libs="apexcharts"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-social-referrals" class="chart-lg"></div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    window.ApexCharts &&
+      new ApexCharts(document.getElementById("chart-social-referrals"), {
+        chart: {
+          type: "line",
+          fontFamily: "inherit",
+          height: 240,
+          parentHeightOffset: 0,
+          toolbar: {
+            show: false,
+          },
+          animations: {
+            enabled: false,
+          },
+        },
+        fill: {
+          opacity: 1,
+        },
+        stroke: {
+          width: 2,
+          lineCap: "round",
+          curve: "smooth",
+        },
+        series: [
+          {
+            name: "Facebook",
+            data: [
+              13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836,
+              12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508,
+              13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142,
+              8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749,
+            ],
+          },
+          {
+            name: "Twitter",
+            data: [
+              3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893,
+              3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954,
+              3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954,
+              5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734,
+            ],
+          },
+          {
+            name: "Dribbble",
+            data: [
+              722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621,
+              1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924,
+              1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150,
+              654, 1695, 1662, 1285, 1787,
+            ],
+          },
+        ],
+        tooltip: {
+          theme: "dark",
+        },
+        grid: {
+          padding: {
+            top: -20,
+            right: 0,
+            left: -4,
+            bottom: -4,
+          },
+          strokeDashArray: 4,
+          xaxis: {
+            lines: {
+              show: true,
+            },
+          },
+        },
+        xaxis: {
+          labels: {
+            padding: 0,
+          },
+          tooltip: {
+            enabled: false,
+          },
+          type: "datetime",
+        },
+        yaxis: {
+          labels: {
+            padding: 4,
+          },
+        },
+        labels: [
+          "2020-06-21",
+          "2020-06-22",
+          "2020-06-23",
+          "2020-06-24",
+          "2020-06-25",
+          "2020-06-26",
+          "2020-06-27",
+          "2020-06-28",
+          "2020-06-29",
+          "2020-06-30",
+          "2020-07-01",
+          "2020-07-02",
+          "2020-07-03",
+          "2020-07-04",
+          "2020-07-05",
+          "2020-07-06",
+          "2020-07-07",
+          "2020-07-08",
+          "2020-07-09",
+          "2020-07-10",
+          "2020-07-11",
+          "2020-07-12",
+          "2020-07-13",
+          "2020-07-14",
+          "2020-07-15",
+          "2020-07-16",
+          "2020-07-17",
+          "2020-07-18",
+          "2020-07-19",
+          "2020-07-20",
+          "2020-07-21",
+          "2020-07-22",
+          "2020-07-23",
+          "2020-07-24",
+          "2020-07-25",
+          "2020-07-26",
+          "2020-07-27",
+          "2020-07-28",
+          "2020-07-29",
+          "2020-07-30",
+          "2020-07-31",
+          "2020-08-01",
+          "2020-08-02",
+          "2020-08-03",
+          "2020-08-04",
+          "2020-08-05",
+          "2020-08-06",
+          "2020-08-07",
+          "2020-08-08",
+          "2020-08-09",
+          "2020-08-10",
+        ],
+        colors: [
+          tabler.getColor("facebook"),
+          tabler.getColor("twitter"),
+          tabler.getColor("dribbble"),
+        ],
+        legend: {
+          show: true,
+          position: "bottom",
+          offsetY: 12,
+          markers: {
+            width: 10,
+            height: 10,
+            radius: 100,
+          },
+          itemMargin: {
+            horizontal: 8,
+            vertical: 8,
+          },
+        },
+      }).render();
+  });
+</script>
+```

docs/ui/components/countup.mdx

@@ -3,7 +3,6 @@ title: Countup
 summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
 libs: countup
 description: Display numbers dynamically with countups.
-layout: default
 ---
 
 The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.

docs/ui/components/datagrid.mdx

@@ -2,7 +2,6 @@
 title: Data grid
 summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
 description: Detailed product information in grids.
-layout: default
 ---
 
 ```html example vcentered height="460px"
@@ -27,7 +26,10 @@ layout: default
     <div class="datagrid-title">Creator</div>
     <div class="datagrid-content">
       <div class="d-flex align-items-center">
-        <span class="avatar avatar-xs me-2 rounded" style="background-image: url(/samples/avatars/027m.jpg)"></span>
+        <span
+          class="avatar avatar-xs me-2 rounded"
+          style="background-image: url(/samples/avatars/027m.jpg)"
+        ></span>
         Paweł Kuna
       </div>
     </div>
@@ -39,20 +41,30 @@ layout: default
   <div class="datagrid-item">
     <div class="datagrid-title">Edge network</div>
     <div class="datagrid-content">
-      <span class="status status-green">
-        Active
-      </span>
+      <span class="status status-green"> Active </span>
     </div>
   </div>
   <div class="datagrid-item">
     <div class="datagrid-title">Avatars list</div>
     <div class="datagrid-content">
       <div class="avatar-list avatar-list-stacked">
-        <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/029f.jpg)"></span>
+        <span
+          class="avatar avatar-xs rounded"
+          style="background-image: url(/samples/avatars/029f.jpg)"
+        ></span>
         <span class="avatar avatar-xs rounded">JL</span>
-        <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/015f.jpg)"></span>
-        <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/004m.jpg)"></span>
-        <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/037m.jpg)"></span>
+        <span
+          class="avatar avatar-xs rounded"
+          style="background-image: url(/samples/avatars/015f.jpg)"
+        ></span>
+        <span
+          class="avatar avatar-xs rounded"
+          style="background-image: url(/samples/avatars/004m.jpg)"
+        ></span>
+        <span
+          class="avatar avatar-xs rounded"
+          style="background-image: url(/samples/avatars/037m.jpg)"
+        ></span>
         <span class="avatar avatar-xs rounded">+3</span>
       </div>
     </div>
@@ -69,7 +81,18 @@ layout: default
   <div class="datagrid-item">
     <div class="datagrid-title">Icon</div>
     <div class="datagrid-content">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon text-green"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <path d="M5 12l5 5l10 -10" />
       </svg>
@@ -84,14 +107,12 @@ layout: default
   </div>
   <div class="datagrid-item">
     <div class="datagrid-title">Longer description</div>
-    <div class="datagrid-content">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </div>
+    <div class="datagrid-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   </div>
 </div>
 ```
 
-You can adjust the datagrid to your needs setting the values of variables:
+You can adjust the datagrid to your needs by setting the values of variables:
 
 | Variable | Description | Default |
 |----------|-------------|---------|

docs/ui/components/divider.mdx

@@ -2,7 +2,6 @@
 title: Divider
 summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
 description: Separate content with clear dividers.
-layout: default
 ---
 
 ## Default markup
@@ -15,7 +14,8 @@ Use dividers to visually separate content into parts. You can use a line only or
 </p>
 <div class="hr-text">See also</div>
 <p>
-  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
 </p>
 ```
 
@@ -29,7 +29,8 @@ You can modify the position of the text which is to be included in a separator a
 </p>
 <div class="hr-text hr-text-start">Start divider</div>
 <p>
-  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
 </p>
 <div class="hr-text">Centered divider</div>
 <p>
@@ -37,7 +38,8 @@ You can modify the position of the text which is to be included in a separator a
 </p>
 <div class="hr-text hr-text-end">End divider</div>
 <p>
-  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
 </p>
 ```
 
@@ -51,7 +53,8 @@ Customize the color of dividers to make them go well with your design. Click [he
 </p>
 <div class="hr-text text-green">Green divider</div>
 <p>
-  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
 </p>
 <div class="hr-text text-red">Red divider</div>
 <p>
@@ -59,6 +62,7 @@ Customize the color of dividers to make them go well with your design. Click [he
 </p>
 <div class="hr-text text-primary">Primary divider</div>
 <p>
-  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
+  rerum, saepe sed, sit!
 </p>
 ```

docs/ui/components/dropdowns.mdx

@@ -1,9 +1,8 @@
 ---
 title: Dropdowns
-summary: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
+summary: Use dropdowns to display lists of options or include more items in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
 bootstrapLink: components/dropdowns
 description: Organize options with dropdown menus.
-layout: default
 ---
 
 ## Default dropdown
@@ -29,12 +28,8 @@ Use dropdown dividers to separate groups of dropdown items for greater clarity.
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
     <div class="dropdown-divider"></div>
     <a class="dropdown-item" href="#">Separated link</a>
   </div>
@@ -49,12 +44,8 @@ Make a dropdown item look active, so that it highlights when a user hovers over
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
     <a class="dropdown-item active" href="#">Active action</a>
   </div>
 </div>
@@ -68,12 +59,8 @@ Make a dropdown item look disabled to display options which are currently not av
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
     <a class="dropdown-item disabled" href="#">Disabled action</a>
   </div>
 </div>
@@ -88,12 +75,8 @@ Add a dropdown header to group dropdown items into sections and name them accord
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
     <span class="dropdown-header">Dropdown header</span>
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
   </div>
 </div>
 ```
@@ -108,15 +91,39 @@ Use icons in your dropdowns to add more visual content and make the options easy
   <div class="dropdown-menu">
     <span class="dropdown-header">Dropdown header</span>
     <a class="dropdown-item" href="#">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon dropdown-item-icon icon-tabler icon-tabler-settings"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
+        <path
+          d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+        ></path>
         <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
       </svg>
       Action
     </a>
     <a class="dropdown-item" href="#">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-pencil" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon dropdown-item-icon icon-tabler icon-tabler-pencil"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
         <path d="M13.5 6.5l4 4"></path>
@@ -135,12 +142,8 @@ Add an arrow that points at the dropdown button.
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu dropdown-menu-arrow">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
+    <a class="dropdown-item" href="#"> Action </a>
+    <a class="dropdown-item" href="#"> Another action </a>
   </div>
 </div>
 ```
@@ -196,15 +199,39 @@ Make your dropdown suit the dark mode of your website or software.
   <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
     <span class="dropdown-header">Dropdown header</span>
     <a class="dropdown-item" href="#">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon dropdown-item-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
+        <path
+          d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+        />
         <circle cx="12" cy="12" r="3" />
       </svg>
       Action
     </a>
     <a class="dropdown-item" href="#">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon dropdown-item-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
         <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
@@ -223,16 +250,23 @@ Use a dropdown with card content to make it easy for users to get more informati
 ```html example height="35rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
-  <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem;">
+  <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem">
     <div class="card d-flex flex-column">
       <a href="#">
-        <img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" />
+        <img
+          class="card-img-top"
+          src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg"
+          alt="How do you know she is a witch?"
+        />
       </a>
       <div class="card-body d-flex flex-column">
         <h3 class="card-title">
           <a href="#">How do you know she is a witch?</a>
         </h3>
-        <div class="text-secondary">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
+        <div class="text-secondary">
+          Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a
+          wart. You ...
+        </div>
         <div class="d-flex align-items-center pt-4 mt-auto">
           <span class="avatar" style="background-image: url(/samples/avatars/013m.jpg)"></span>
           <div class="ms-3">
@@ -241,9 +275,22 @@ Use a dropdown with card content to make it easy for users to get more informati
           </div>
           <div class="ms-auto">
             <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
                 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
+                <path
+                  d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
+                />
               </svg>
             </a>
           </div>

docs/ui/components/dropzone.mdx

@@ -1,8 +1,7 @@
 ---
 title: Dropzone
-summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
+summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop libraries on the web and is used by millions of people.
 description: Drag-and-drop file upload tool.
-layout: default
 ---
 
 ## Basic usage
@@ -21,9 +20,9 @@ To initialize the Dropzone form, you need to create a new instance of the Dropzo
 
 ```html
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
-    new Dropzone("#dropzone-default")
-  })
+  document.addEventListener("DOMContentLoaded", function () {
+    new Dropzone("#dropzone-default");
+  });
 </script>
 ```
 
@@ -36,9 +35,9 @@ The Dropzone form will now be active and ready to accept file uploads. When a us
   </div>
 </form>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
-    new Dropzone("#dropzone-default")
-  })
+  document.addEventListener("DOMContentLoaded", function () {
+    new Dropzone("#dropzone-default");
+  });
 </script>
 ```
 
@@ -59,9 +58,9 @@ By adding the `multiple` attribute to the input field, users can select multiple
   </div>
 </form>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
-    new Dropzone("#dropzone-mulitple")
-  })
+  document.addEventListener("DOMContentLoaded", function () {
+    new Dropzone("#dropzone-mulitple");
+  });
 </script>
 ```
 
@@ -80,9 +79,9 @@ You can further enhance the user experience by customizing the Dropzone interfac
   </div>
 </form>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
-    new Dropzone("#dropzone-custom")
-  })
+  document.addEventListener("DOMContentLoaded", function () {
+    new Dropzone("#dropzone-custom");
+  });
 </script>
 ```
 

docs/ui/components/empty.mdx

@@ -2,7 +2,6 @@
 title: Empty states
 summary: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
 description: Engage users in empty or error screens.
-layout: default
 ---
 
 ## Default markup
@@ -12,7 +11,18 @@ Use the default empty state to engage users in the critical moments of their exp
 ```html example height="300px"
 <div class="empty">
   <div class="empty-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <circle cx="12" cy="12" r="9" />
       <line x1="9" y1="10" x2="9.01" y2="10" />
@@ -26,7 +36,18 @@ Use the default empty state to engage users in the critical moments of their exp
   </p>
   <div class="empty-action">
     <a href="#" class="btn btn-primary">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <circle cx="10" cy="10" r="7" />
         <line x1="21" y1="21" x2="15" y2="15" />
@@ -52,7 +73,18 @@ Make your empty state screen more attractive and engaging by adding an illustrat
   </p>
   <div class="empty-action">
     <a href="#" class="btn btn-primary">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <line x1="12" y1="5" x2="12" y2="19" />
         <line x1="5" y1="12" x2="19" y2="12" />
@@ -76,7 +108,18 @@ Instead of adding an icon or illustration you can simply give the text:
   </p>
   <div class="empty-action">
     <a href="#" class="btn btn-primary">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <line x1="5" y1="12" x2="19" y2="12" />
         <line x1="5" y1="12" x2="11" y2="18" />

docs/ui/components/icons.md

@@ -1,160 +0,0 @@
----
-title: Icons
-summary: Use one of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
-banner: icons
-description: Enhance dashboards with custom icons.
-layout: default
----
-
-If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
-
-## Base icon
-
-To add icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file.
-
-```html
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
-</svg>
-```
-
-Results can be seen in the example below.
-
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ghost-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M10 9h.01"></path>
-  <path d="M14 9h.01"></path>
-  <path d="M12 3a7 7 0 0 1 7 7v1l1 0a2 2 0 1 1 0 4l-1 0v3l2 3h-10a6 6 0 0 1 -6 -5.775l0 -.226l-1 0a2 2 0 0 1 0 -4l1 0v-1a7 7 0 0 1 7 -7z"></path>
-  <path d="M11 14h2a1 1 0 0 0 -2 0z"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-lego" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M9.5 11l.01 0"></path>
-  <path d="M14.5 11l.01 0"></path>
-  <path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
-  <path d="M7 5h1v-2h8v2h1a3 3 0 0 1 3 3v9a3 3 0 0 1 -3 3v1h-10v-1a3 3 0 0 1 -3 -3v-9a3 3 0 0 1 3 -3"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-building-carousel" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12 12m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0"></path>
-  <path d="M5 8m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
-  <path d="M12 4m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
-  <path d="M19 8m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
-  <path d="M5 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
-  <path d="M19 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
-  <path d="M8 22l4 -10l4 10"></path>
-</svg>
-```
-
-## Filled icons
-
-To use filled icons, you need to copy the SVG code from the Tabler Icons website and paste it into your HTML file. 
-
-```html
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
-</svg>
-```
-
-Look at the example below to see the filled icons.
-
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell-ringing-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M17.451 2.344a1 1 0 0 1 1.41 -.099a12.05 12.05 0 0 1 3.048 4.064a1 1 0 1 1 -1.818 .836a10.05 10.05 0 0 0 -2.54 -3.39a1 1 0 0 1 -.1 -1.41z" stroke-width="0" fill="currentColor"></path>
-  <path d="M5.136 2.245a1 1 0 0 1 1.312 1.51a10.05 10.05 0 0 0 -2.54 3.39a1 1 0 1 1 -1.817 -.835a12.05 12.05 0 0 1 3.045 -4.065z" stroke-width="0" fill="currentColor"></path>
-  <path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
-  <path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cherry-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M16.588 5.191l.058 .045l.078 .074l.072 .084l.013 .018a.998 .998 0 0 1 .182 .727l-.022 .111l-.03 .092c-.99 2.725 -.666 5.158 .679 7.706a4 4 0 1 1 -4.613 4.152l-.005 -.2l.005 -.2a4.002 4.002 0 0 1 2.5 -3.511c-.947 -2.03 -1.342 -4.065 -1.052 -6.207c-.166 .077 -.332 .15 -.499 .218l.094 -.064c-2.243 1.47 -3.552 3.004 -3.98 4.57a4.5 4.5 0 1 1 -7.064 3.906l-.004 -.212l.005 -.212a4.5 4.5 0 0 1 5.2 -4.233c.332 -1.073 .945 -2.096 1.83 -3.069c-1.794 -.096 -3.586 -.759 -5.355 -1.986l-.268 -.19l-.051 -.04l-.046 -.04l-.044 -.044l-.04 -.046l-.04 -.05l-.032 -.047l-.035 -.06l-.053 -.11l-.038 -.116l-.023 -.117l-.005 -.042l-.005 -.118l.01 -.118l.023 -.117l.038 -.115l.03 -.066l.023 -.045l.035 -.06l.032 -.046l.04 -.051l.04 -.046l.044 -.044l.046 -.04l.05 -.04c4.018 -2.922 8.16 -2.922 12.177 0z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-key-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -20 0c0 -5.523 4.477 -10 10 -10zm2 5a3 3 0 0 0 -2.98 2.65l-.015 .174l-.005 .176l.005 .176c.019 .319 .087 .624 .197 .908l.09 .209l-3.5 3.5l-.082 .094a1 1 0 0 0 0 1.226l.083 .094l1.5 1.5l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l.083 -.094a1 1 0 0 0 0 -1.226l-.083 -.094l-.792 -.793l.585 -.585l.793 .792l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-.792 -.793l.792 -.792a3 3 0 1 0 1.293 -5.708zm0 2a1 1 0 1 1 0 2a1 1 0 0 1 0 -2z" stroke-width="0" fill="currentColor"></path>
-</svg>
-```
-
-## Icon colors
-
-To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/docs/ui/colors). Color classes can be used with any HTML element.
-
-```html
-<span class="text-red">
-  <!-- SVG icon from http://tabler.io/icons/icon/heart -->
-  <svg>...</svg>
-</span>
-```
-
-Look at the example below to see how the color of the icon changes.
-
-```html example centered separated
-<span class="text-red">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
-  </svg>
-</span>
-<span class="text-yellow">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" stroke-width="0" fill="currentColor"></path>
-  </svg>
-</span>
-<span class="text-blue">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
-  </svg>
-</span>
-<span class="text-green">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
-  </svg>
-</span>
-```
-
-## Icon animations
-
-To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element. 
-
-```html
-<!-- SVG icon from http://tabler.io/icons/icon/heart -->
-<svg class="icon-pulse" ...>...</svg>
-<!-- SVG icon from http://tabler.io/icons/icon/bell -->
-<svg class="icon-tada" ...>...</svg>
-<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
-<svg class="icon-rotate" ...>...</svg>
-```
-
-Look at the example below to see the animated icons.
-
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tada" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-rotate" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-  <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
-</svg>
-```
-