Release 1.0.0-beta20

Co-authored-by: Matt Smith <quaffapint@gmail.com>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>

.all-contributorsrc

@@ -0,0 +1,89 @@
+{
+  "projectName": "tabler",
+  "projectOwner": "tabler",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "CONTRIBUTORS.md"
+  ],
+  "imageSize": 100,
+  "commit": true,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "codecalm",
+      "name": "Paweł Kuna",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1282324?v=4",
+      "profile": "https://tabler.io/",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
+    {
+      "login": "martynaaj",
+      "name": "Martyna",
+      "avatar_url": "https://avatars.githubusercontent.com/u/60158888?v=4",
+      "profile": "https://github.com/martynaaj",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "deralaxo",
+      "name": "Dawid Harat",
+      "avatar_url": "https://avatars.githubusercontent.com/u/40028795?v=4",
+      "profile": "https://github.com/deralaxo",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "rjd22",
+      "name": "Robert-Jan de Dreu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/160743?v=4",
+      "profile": "https://codersopinion.com/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "FreexD",
+      "name": "Michał Wolny",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7117869?v=4",
+      "profile": "https://github.com/FreexD",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "wangkanai",
+      "name": "Sarin Na Wangkanai",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10666633?v=4",
+      "profile": "https://www.wangkanai.com/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "WinterSilence",
+      "name": "Anton",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3521094?v=4",
+      "profile": "https://ensostudio.ru/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "dheineman",
+      "name": "Dave Heineman",
+      "avatar_url": "https://avatars.githubusercontent.com/u/516028?v=4",
+      "profile": "https://github.com/dheineman",
+      "contributions": [
+        "code"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "linkToUsage": false
+}

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/beige-hats-prove.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated link to icons documentation

.changeset/clean-carrots-sort.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add new `Tag` component

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/curvy-fishes-lie.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add customizable Star Ratings component using `star-rating.js` library

.changeset/dull-kiwis-notice.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix text color in dark version of navbar

.changeset/eight-pumas-fry.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.21 with 18 new icons added

.changeset/flags.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add `flags.html` page with list of all flags

.changeset/fluffy-insects-lay.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Adding Two-Step Verification Pages

.changeset/gorgeous-windows-study.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Update CSS class from `text-muted` to `text-secondary` for better Bootstrap compatibility

.changeset/healthy-bikes-cry.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+`Dockerfile` fix 

.changeset/heavy-chicken-cover.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.20 with 37 new icons added

.changeset/hip-jobs-double.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Adding `alerts.html` page with example of alerts.

.changeset/itchy-bottles-cheat.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Unify size of avatar, flag and payment components

.changeset/khaki-wasps-provide.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Bootstrap to v5.3.0

.changeset/late-zoos-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix `rgba` color values in `_variables.scss`

.changeset/odd-terms-tap.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix form controls bugs in dark mode

.changeset/olive-cars-admire.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Change primary color value to new Tabler branding

.changeset/orange-donuts-cough.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Unified Box Shadows with Bootstrap Compatibility

.changeset/rare-pumpkins-pull.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Unify dark mode with latest Bootstrap API and improve dark mode elements

.changeset/red-vans-doubt.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.22 with 18 new icons added

.changeset/rich-dingos-promise.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add All Contributions package to project for easy contribution tracking

.changeset/sharp-colts-grab.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Resolved light dropdown issue on dark theme

.changeset/shiny-dolls-shop.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+New Chat component 

.changeset/shy-rockets-deliver.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.19 with 18 new icons added

.changeset/silver-drinks-yell.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Adjusting form element sizes for enhanced mobile devices compatibility

.changeset/slow-buses-breathe.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Switch from `npm` to `pnpm` for faster package installation

.changeset/soft-mangos-tie.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add variable to configure `avatar-list` spacing

.changeset/sour-teachers-collect.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update required Node.js version to 18 and add `.nvmrc` file

.changeset/spotty-avocados-doubt.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix table default background color

.changeset/stupid-dingos-train.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Avoid SCSS color dependency on `:focus`

.changeset/tasty-boats-work.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.18 with 18 new icons added

.changeset/thick-apples-punch.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add Prettier to project for consistent code formatting

.changeset/thick-poems-battle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to version 2.25 with 48 new icons added

.changeset/thin-eagles-mix.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add new color picker component using `coloris.js` library

.changeset/thirty-tomatoes-end.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix responsiveness issue in Settings menu

.changeset/twenty-tables-judge.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add new Filled section to Icons page

.changeset/unlucky-eels-vanish.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update `bootstrap` to v5.3.1

.changeset/violet-moles-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Update Tabler Icons to version 2.23 with 18 new icons added

.changeset/wet-games-float.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add support for changeset tool for more efficient and organized code changes

.github/workflows/add_to_project.yml

@@ -0,0 +1,19 @@
+name: Add new issues and pr to project
+
+on:
+  pull_request:
+    types:
+      - opened
+  issues:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add new issue and pr to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v0.5.0
+        with:
+          project-url: https://github.com/orgs/tabler/projects/9/views/1
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/bundlewatch.yml

@@ -1,15 +1,15 @@
 name: Bundlewatch
 
 on:
+  pull_request: null
   push:
-    branches-ignore:
-      - "dependabot/**"
-  pull_request:
-  workflow_dispatch:
+    branches:
+      - main
+      - dev
 
 env:
   FORCE_COLOR: 2
-  NODE: 16
+  NODE: 18
 
 jobs:
   bundlewatch:
@@ -23,7 +23,11 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "${{ env.NODE }}"
-          cache: npm
+     
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
 
       - name: Set up Bundler
         uses: ruby/setup-ruby@v1
@@ -31,14 +35,14 @@ jobs:
           ruby-version: 2.6
           bundler-cache: true
 
-      - name: Install npm dependencies
-        run: npm ci
+      - name: Install pnpm dependencies
+        run: pnpm install --no-frozen-lockfile
 
       - name: Run build
-        run: npm run build
+        run: pnpm run build
 
       - name: Run bundlewatch
-        run: npm run bundlewatch
+        run: pnpm run bundlewatch
         env:
           BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
-          CI_BRANCH_BASE: main
+          CI_BRANCH_BASE: dev

.github/workflows/calibreapp-image-actions.yml

@@ -0,0 +1,26 @@
+name: Compress Images
+
+on:
+  pull_request:
+    paths:
+      - '**.jpg'
+      - '**.jpeg'
+      - '**.png'
+      - '**.webp'
+
+jobs:
+  build:
+    # Only run on Pull Requests within the same repository, and not from forks.
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    name: calibreapp/image-actions
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Compress Images
+        uses: calibreapp/image-actions@main
+        with:
+          githubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/close_inactive.yml

@@ -0,0 +1,26 @@
+name: Close inactive issues and pr
+
+on:
+  schedule:
+    - cron: "00 11 * * *"
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      issues: write
+    steps:
+      - uses: actions/stale@v8
+        with:
+          days-before-issue-stale: 360
+          days-before-issue-close: 14
+          stale-issue-label: "stale"
+          stale-issue-message: "This issue is stale because it has been open for 360 days with no activity."
+          close-issue-message: "This issue was closed because it has been inactive for 14 days since being marked as stale."
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-pr-stale: 360
+          days-before-pr-close: 14
+          stale-pr-label: "stale"
+          stale-pr-message: "This pr is stale because it has been open for 360 days with no activity."
+          close-pr-message: "This pr was closed because it has been inactive for 14 days since being marked as stale."    

.github/workflows/lockfiles.yaml

@@ -1,26 +1,25 @@
 name: Changed lock files
 on:
-    pull_request: null
-    push:
-        branches:
-            - main
-            - dev
+  pull_request: null
+  push:
+    branches:
+      - main
+      - dev
 
 permissions:
-    pull-requests: read
+  pull-requests: read
 
 jobs:
-    lockfiles:
-        runs-on: ubuntu-latest
-        name: Verify lock file integrity
-        steps:
+  lockfiles:
+    runs-on: ubuntu-latest
+    name: Verify lock file integrity
+    steps:
+      - name: Clone Tabler
+        uses: actions/checkout@v2
 
-            - name: Clone Tabler
-              uses: actions/checkout@v2
-
-            - name: Prevent lock file change
-              uses: xalvarez/prevent-file-change-action@v1
-              with:
-                  githubToken: ${{ secrets.GITHUB_TOKEN }}
-                  pattern: Gemfile.lock|package-lock.json
-                  trustedAuthors: codecalm, dependabot
+      - name: Prevent lock file change
+        uses: xalvarez/prevent-file-change-action@v1
+        with:
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          pattern: Gemfile.lock|pnpm-lock.json
+          trustedAuthors: codecalm, dependabot

.github/workflows/release.yml

@@ -0,0 +1,45 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - dev
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Creating .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        with:
+          publish: pnpm release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -5,7 +5,7 @@ on:
     types: [ opened, reopened ]
 
 env:
-  NODE: 16
+  NODE: 18
 
 permissions:
   contents: read
@@ -21,7 +21,12 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "${{ env.NODE }}"
-          cache: npm
+          cache: pnpm
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
@@ -32,8 +37,8 @@ jobs:
       - run: ruby --version
       - run: node --version
 
-      - name: Install npm dependencies
-        run: npm ci
+      - name: Install pnpm dependencies
+        run: pnpm install
 
       - name: Build
-        run: npm run build
+        run: pnpm run build

.gitignore

@@ -23,4 +23,11 @@ node_modules/
 /percy.sh
 /src/pages/playground.html
 /src/pages/playground-*.html
-/src/pages/features.html
+/src/pages/features.html
+
+.pnp.loader.mjs
+.pnp.cjs
+.yarn
+.next
+.vercel
+package-lock.json

.gitpod.yml

@@ -1,3 +1,3 @@
 tasks:
-  - init: npm install && npm run build
-    command: npm run start
+  - init: pnpm install && pnpm run build
+    command: pnpm run start

.nvmrc

@@ -0,0 +1 @@
+18

.prettierignore

@@ -0,0 +1,5 @@
+dist
+.tmp
+.vscode
+.cache
+node_modules

.prettierrc

@@ -0,0 +1,10 @@
+{
+	"bracketSpacing": true,
+	"jsxSingleQuote": false,
+	"printWidth": 240,
+	"proseWrap": "always",
+	"semi": false,
+	"singleQuote": false,
+	"tabWidth": 2,
+	"trailingComma": "all"
+}

CHANGELOG.md

@@ -3,165 +3,126 @@
 All notable changes to this project will be documented in this file.
 
 
-## `1.0.0-beta` - 2021-02-17
+## `1.0.0-beta20` - 2023-08-24
 
-**Initial beta release of Tabler v1.0! Lots more coming soon though 😁**
-
-- update Bootstrap to 5.0.0-beta2
-- update other dependencies.
+- Update `bootstrap` to v5.3.1
+- Add new `Chat` component
+- Add new `Tag` component
+- Add customizable Star Ratings component using `star-rating.js` library
+- Add new color picker component using `coloris.js` library
+- Add `alerts.html` page with example of alerts.
+- Add `flags.html` page with list of all flags
+- Add Two-Step Verification Pages
+- Add variable to configure `avatar-list` spacing
+- Unify dark mode with latest Bootstrap API and improve dark mode elements
+- Unify Box Shadows with Bootstrap Compatibility
+- Avoid SCSS color dependency on `:focus`
+- Update CSS class from `text-muted` to `text-secondary` for better Bootstrap compatibility
+- Fix text color in dark version of navbar
+- Adjusting form element sizes for enhanced mobile devices compatibility
+- Resolved light dropdown issue on dark theme
+- Update Tabler Icons to version 2.32 with 48 new icons added
+- Fix table default background color
+- Fix responsiveness issue in Settings menu
+- Update required Node.js version to 18 and add `.nvmrc` file
+- Add support for changeset tool for more efficient and organized code changes
+- `Dockerfile` fix
+- Switch from `npm` to `pnpm` for faster package installation
 
 
-## `1.0.0-beta2` - 2021-03-29
+## `1.0.0-beta19` - 2023-05-15
 
-- update dependencies
-- `li` marker fix
-- page wrapper, nav fixes
-- scripts optimize, remove `capture_once`
-- `page-body` fixes
-- layout navbar fix
-- typography fix
-- ribbon fix
-- charts label fixes
-- charts docs
+- Add customizable Star Ratings component using `star-rating.js` library (#1571)
+- Add new "Filled" section to Icons page (#1574)
+- Fix form controls bugs in dark mode (#1573)
+- Fix text color in dark version of navbar (#1569)
+- Changelog update
 
 
-## `1.0.0-beta3` - 2021-05-08
+## `1.0.0-beta18` - 2023-05-14
 
-- upgrade Bootstrap to 5.0
-- upgrade dependencies
-- change `$border-radius-pill` variable
-- badge vertical align fix
+- new page: Cookie banner
+- Unify dark mode with latest Bootstrap API and improve dark mode elements (#1561)
+- Update Tabler Icons to version 2.18 with 18 new icons added (#1560)
+- Switch from `npm` to `pnpm` for faster package installation (#1559)
+- Add Prettier to project for consistent code formatting (#1558)
+- Update required Node.js version to 18 and add `.nvmrc` file (#1555)
+- Add All Contributions package to project for easy contribution tracking (#1556)
+- Add support for changeset tool for more efficient and organized code changes (#1553)
+- Fix bug where `border-1`, `border-2`, etc don't work (#1526)
+- Fix indeterminate input background color (#1536)
+- Update Bootstrap to `5.3.0-alpha3` (#1543)
+- `tom-select` dark mode styling fixes
+- Advanced udage of `tom-select` (#1480)
+- Fix Dropdown menu in rtl mode (#801)
+- Fix `tom-select` dropdown will be shaded in table-responsive (#1409)
+- Remove overflow scroll from body
+- Fix avatars overlap transparently (#1464)
+- Fix TinyMCE dropdown icon list transparent (#1426)
+- Dark mode lite colors improvement
+- Fix non full width selects (#1392)
 
 
-## `1.0.0-beta4` - 2021-10-24
+## `1.0.0-beta17` - 2023-01-28
 
-- upgrade required node.js version to 14
-- upgrade Bootstrap to 5.1
-- upgrade dependencies
-- fix #775 - litepicker not initializing
-- fix `nouislider` import in dev
+- update `bootstrap` to v5.3.0
+- update icons to v2.1.2
+- add 72 new brands, browsers logos update
+- new `Trial ended` page
+- new `Page loader` page
+- new `Profile` page
+- headings fix
+- dropdown background color fix
+- fix rgba conversion bug
+- fix autofill text color, not matching in dark mode
+- update license
+- header html5 tags
+- add input with appended `<kbd>`
+- `bootstrap` import fix
+- font improvements
+- change `$body-color` to CSS variable
+- scrollbars improvements
+- move `@tabler/icons` to `dev-dependencies`
+- fix #1370: avatar stacked list is not stacked anymore
 
 
-## `1.0.0-beta5` - 2021-12-07
+## `1.0.0-beta16` - 2022-11-12
 
-**Tabler has finally lived to see dark mode! 🌝🌚**
-
-- **Dark mode enabled!**
-- add more cursors (#947)
-- fix #892 - media queries need to be nested when negating
-- update `@tabler/icons` to newest version
-- move optional dependencies to peerDependencies (#924)
-- move deployment to Github Actions (#934)
-- table border fixes
-- antialiased fix
-- update `@tabler/icons` to version 1.42
-- change default font to 'Inter'
-- colors unify
-- add `tom-select` and remove `choices.js`
+- new `Photogrid` page
+- `Steps` component improvements
+- fix #1348: Make job listing responsive for smaller devices
+- fix #1357: buttons group not active
+- fix #1352: fix deprecation warning
+- fix #1180: number input with `form-control-sm` looks weird
+- fix #1328: color input should show different color for inner check symbol on white ellipse
+- fix #1355 - missing font sizes
+- update icons to v1.111.0
+- homepage navbar fix
+- fix #1262 - `.bg-opacity-xx` class is not functioning properly
 
 
-## `1.0.0-beta6` - 2022-01-18
+## `1.0.0-beta15` - 2022-11-01
 
-- pricing cards fix
-- fix bug `fw-...`, `.fs-...` is missed (#987)
-- avatar class fix
-- fix bug #903 `litepicker` with date range not having correct border
-- page wrapper fix
-- fix #900 `is-invalid-lite` class is not working under `was-validated` form class
-- update `@tabler/icons` to version 1.48
-- fix #960 - Badges not honoring font sizes
-- fix #959 - `node-sass` does not properly compile nested media queries
-- update package dependencies to newest version
+- new `badges` page
+- `<kbd>` styling
+- update icons to v1.109.0
+- `tom-select` border fix
+- exclude `playgrounds` from build
+- update jekyll to v4.3.1
+- fix: facebook color update
+- navbar aria atributes fixes
+- fix #808 - `navbar-menu` and `sidebar-menu` has the same `id`
+- fix #1335 - missing color variables usage in `alert` and `btn-ghost-*`
+- move border style to CSS variables
+- add missing forms
+- `btn-actions` fixes
+- replace `$text-muted` to css variable
 
 
-## `1.0.0-beta7` - 2022-02-05
+## `1.0.0-beta14` - 2022-10-21
 
-- fix: #1019 - project-overview.html link not working
-- fix: #1010 - card with bottom tabs has incorrect border radius
-- uptime monitor mobile fixes
-- navbar dark button fix
-- `tabler-icons` link
-- autoloading webfonts
-- cards fixes, new cards demos
-- ruby dependencies update
-- RTL stylesheet fixes
-- new card action demos
-
-
-## `1.0.0-beta8` - 2022-02-05
-
-- update dependencies
-- new vector maps demos
-- fixes update map on resize
-- docs improvement
-- replace `badge` with `status-dot` in `navbar-notifications.html`
-- map tooltip fixes
-
-
-## `1.0.0-beta9` - 2022-02-26
-
-- fix: #1061 - list group item colors in light and dark modes
-- new `tasks` dashboard
-- fix: #1059 - upload button in form element in dark view has problem
-- fix: #1052 - card background icon is practically invisible
-- remove Inter font and use default font system stack
-- fix: #1018 - vector map not working
-- fix: #1035 - wrong background color of hovered list group items in dark mode
-- dependencies update
-- add `font-display: swap;` to improve font loading
-- new `Boxed` layout
-
-
-## `1.0.0-beta10` - 2022-04-29
-
-- new `datatable` component
-- update Tabler Icons to v1.67
-- fix: #1024 - fix Tom-select in dark mode
-- new carousel indicators: dots, vertical, thumbs (#1101)
-- replace !important modifier with more specific selectors (#1100)
-- new `FAQ` page
-
-
-## `1.0.0-beta11` - 2022-07-05
-
-- new `Dropzone` component
-- new `Lightbox` component
-- new `TinyMCS` component
-- new `Inline Player` component
-- new `Pricing table` component
-- new `Datagrid` component
-- new optgroup form examples
-- new settings page
-- update Tabler Icons to v1.78
-- added popover docs page
-- fix: #1125 incorrect chart display in the mobile version
-- update Bootstrap to 5.2.0
-
-
-## `1.0.0-beta12` - 2022-09-19
-
-- new "Job listing" page
-- new "Sign in with cover" page
-- new "Logs" page
-- new `progressbg` component
-- add a lot of CSS variables
-- add Dockerfile with alpine base
-- add icon pulse/tada/rotate animations
-- use `:host` in selectors to support Web Components
-- use dark table variant colors in dark mode (#1200)
-- update Tabler Icons to v1.96
-- change `space-y` component
-- headings, shadows and borders unify
-- toggle TinyMCE dark mode and skin based on the set Tabler theme
-- fix `card-footer` background
-- fix headers weight
-- fix transparent hover background in pagination
-- fix dark mode card text color
-- fix `--#{$prefix}card-bg` is undefined
-- fix global variable for `.card` and `.btn`
-- fix code sample in the customize tabler docs
-- fix form elements demo page radio buttons
-- replace `gulp-minify` with `gulp-terser`
+- fix active items in dark mode
+- update Jekyll to newest version
 
 
 ## `1.0.0-beta13` - 2022-10-18
@@ -195,40 +156,162 @@ All notable changes to this project will be documented in this file.
 - fix #1261 - broken offcanvas bg
 
 
-## `1.0.0-beta14` - 2022-10-21
+## `1.0.0-beta12` - 2022-09-19
 
-- fix active items in dark mode
-- update Jekyll to newest version
+- new "Job listing" page
+- new "Sign in with cover" page
+- new "Logs" page
+- new `progressbg` component
+- add a lot of CSS variables
+- add Dockerfile with alpine base
+- add icon pulse/tada/rotate animations
+- use `:host` in selectors to support Web Components
+- use dark table variant colors in dark mode (#1200)
+- update Tabler Icons to v1.96
+- change `space-y` component
+- headings, shadows and borders unify
+- toggle TinyMCE dark mode and skin based on the set Tabler theme
+- fix `card-footer` background
+- fix headers weight
+- fix transparent hover background in pagination
+- fix dark mode card text color
+- fix `--#{$prefix}card-bg` is undefined
+- fix global variable for `.card` and `.btn`
+- fix code sample in the customize tabler docs
+- fix form elements demo page radio buttons
+- replace `gulp-minify` with `gulp-terser`
 
 
-## `1.0.0-beta15` - 2022-11-01
+## `1.0.0-beta11` - 2022-07-05
 
-- new `badges` page
-- `<kbd>` styling
-- update icons to v1.109.0
-- `tom-select` border fix
-- exclude `playgrounds` from build
-- update jekyll to v4.3.1
-- fix: facebook color update
-- navbar aria atributes fixes
-- fix #808 - `navbar-menu` and `sidebar-menu` has the same `id`
-- fix #1335 - missing color variables usage in `alert` and `btn-ghost-*`
-- move border style to CSS variables
-- add missing forms
-- `btn-actions` fixes
-- replace `$text-muted` to css variable
+- new `Dropzone` component
+- new `Lightbox` component
+- new `TinyMCS` component
+- new `Inline Player` component
+- new `Pricing table` component
+- new `Datagrid` component
+- new optgroup form examples
+- new settings page
+- update Tabler Icons to v1.78
+- added popover docs page
+- fix: #1125 incorrect chart display in the mobile version
+- update Bootstrap to 5.2.0
 
 
-## `1.0.0-beta16` - 2022-11
+## `1.0.0-beta10` - 2022-04-29
 
-- new `Photogrid` page
-- `Steps` component improvements
-- fix #1348: Make job listing responsive for smaller devices
-- fix #1357: buttons group not active
-- fix #1352: fix deprecation warning
-- fix #1180: number input with `form-control-sm` looks weird
-- fix #1328: color input should show different color for inner check symbol on white ellipse
-- fix #1355 - missing font sizes
-- update icons to v1.111.0
-- homepage navbar fix
-- fix #1262 - `.bg-opacity-xx` class is not functioning properly
+- new `datatable` component
+- update Tabler Icons to v1.67
+- fix: #1024 - fix Tom-select in dark mode
+- new carousel indicators: dots, vertical, thumbs (#1101)
+- replace !important modifier with more specific selectors (#1100)
+- new `FAQ` page
+
+
+## `1.0.0-beta9` - 2022-02-26
+
+- fix: #1061 - list group item colors in light and dark modes
+- new `tasks` dashboard
+- fix: #1059 - upload button in form element in dark view has problem
+- fix: #1052 - card background icon is practically invisible
+- remove Inter font and use default font system stack
+- fix: #1018 - vector map not working
+- fix: #1035 - wrong background color of hovered list group items in dark mode
+- dependencies update
+- add `font-display: swap;` to improve font loading
+- new `Boxed` layout
+
+
+## `1.0.0-beta8` - 2022-02-05
+
+- update dependencies
+- new vector maps demos
+- fixes update map on resize
+- docs improvement
+- replace `badge` with `status-dot` in `navbar-notifications.html`
+- map tooltip fixes
+
+
+## `1.0.0-beta7` - 2022-02-05
+
+- fix: #1019 - project-overview.html link not working
+- fix: #1010 - card with bottom tabs has incorrect border radius
+- uptime monitor mobile fixes
+- navbar dark button fix
+- `tabler-icons` link
+- autoloading webfonts
+- cards fixes, new cards demos
+- ruby dependencies update
+- RTL stylesheet fixes
+- new card action demos
+
+
+## `1.0.0-beta6` - 2022-01-18
+
+- pricing cards fix
+- fix bug `fw-...`, `.fs-...` is missed (#987)
+- avatar class fix
+- fix bug #903 `litepicker` with date range not having correct border
+- page wrapper fix
+- fix #900 `is-invalid-lite` class is not working under `was-validated` form class
+- update `@tabler/icons` to version 1.48
+- fix #960 - Badges not honoring font sizes
+- fix #959 - `node-sass` does not properly compile nested media queries
+- update package dependencies to newest version
+
+
+## `1.0.0-beta5` - 2021-12-07
+
+**Tabler has finally lived to see dark mode! 🌝🌚**
+
+- **Dark mode enabled!**
+- add more cursors (#947)
+- fix #892 - media queries need to be nested when negating
+- update `@tabler/icons` to newest version
+- move optional dependencies to peerDependencies (#924)
+- move deployment to Github Actions (#934)
+- table border fixes
+- antialiased fix
+- update `@tabler/icons` to version 1.42
+- change default font to 'Inter'
+- colors unify
+- add `tom-select` and remove `choices.js`
+
+
+## `1.0.0-beta4` - 2021-10-24
+
+- upgrade required node.js version to 14
+- upgrade Bootstrap to 5.1
+- upgrade dependencies
+- fix #775 - litepicker not initializing
+- fix `nouislider` import in dev
+
+
+## `1.0.0-beta3` - 2021-05-08
+
+- upgrade Bootstrap to 5.0
+- upgrade dependencies
+- change `$border-radius-pill` variable
+- badge vertical align fix
+
+
+## `1.0.0-beta2` - 2021-03-29
+
+- update dependencies
+- `li` marker fix
+- page wrapper, nav fixes
+- scripts optimize, remove `capture_once`
+- `page-body` fixes
+- layout navbar fix
+- typography fix
+- ribbon fix
+- charts label fixes
+- charts docs
+
+
+## `1.0.0-beta` - 2021-02-17
+
+**Initial beta release of Tabler v1.0! Lots more coming soon though 😁**
+
+- update Bootstrap to 5.0.0-beta2
+- update other dependencies.

CONTRIBUTORS.md

@@ -0,0 +1,28 @@
+## Contributors
+
+Thanks goes to these wonderful people
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://tabler.io/"><img src="https://avatars.githubusercontent.com/u/1282324?v=4?s=100" width="100px;" alt="Paweł Kuna"/><br /><sub><b>Paweł Kuna</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=codecalm" title="Code">💻</a> <a href="https://github.com/tabler/tabler/commits?author=codecalm" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/martynaaj"><img src="https://avatars.githubusercontent.com/u/60158888?v=4?s=100" width="100px;" alt="Martyna"/><br /><sub><b>Martyna</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=martynaaj" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/deralaxo"><img src="https://avatars.githubusercontent.com/u/40028795?v=4?s=100" width="100px;" alt="Dawid Harat"/><br /><sub><b>Dawid Harat</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=deralaxo" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://codersopinion.com/"><img src="https://avatars.githubusercontent.com/u/160743?v=4?s=100" width="100px;" alt="Robert-Jan de Dreu"/><br /><sub><b>Robert-Jan de Dreu</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=rjd22" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/FreexD"><img src="https://avatars.githubusercontent.com/u/7117869?v=4?s=100" width="100px;" alt="Michał Wolny"/><br /><sub><b>Michał Wolny</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=FreexD" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.wangkanai.com/"><img src="https://avatars.githubusercontent.com/u/10666633?v=4?s=100" width="100px;" alt="Sarin Na Wangkanai"/><br /><sub><b>Sarin Na Wangkanai</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=wangkanai" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://ensostudio.ru/"><img src="https://avatars.githubusercontent.com/u/3521094?v=4?s=100" width="100px;" alt="Anton"/><br /><sub><b>Anton</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=WinterSilence" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/dheineman"><img src="https://avatars.githubusercontent.com/u/516028?v=4?s=100" width="100px;" alt="Dave Heineman"/><br /><sub><b>Dave Heineman</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=dheineman" title="Code">💻</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->

Dockerfile

@@ -1,27 +1,23 @@
-FROM ruby:2.7-alpine
-
-RUN apk add --no-cache nodejs npm && \
-    apk add --no-cache --virtual build-dependencies build-base
-
-WORKDIR /app
-
-ADD package.json /app/
-ADD package-lock.json /app/
-ADD package.json /app/
-ADD Gemfile /app/
-ADD Gemfile.lock /app/
-ADD _config.yml /app/
-ADD gulpfile.js /app/
-
-# RUN apk update && apk add --virtual build-dependencies build-base
-RUN npm install
-RUN bundle config --global silence_root_warning 1 && bundler install --verbose
-
-# website
-EXPOSE 3000
-
-# website management (browser auto reload)
-EXPOSE 3001
-
-# run tabler
-ENTRYPOINT [ "npm", "run", "start-plugins" ]
+FROM ruby:2.7-alpine
+
+WORKDIR /app
+ADD _config.yml /app/
+ADD _config_prod.yml /app/
+ADD Gemfile /app/
+ADD Gemfile.lock /app/
+ADD package.json /app/
+ADD pnpm-lock.yaml /app/
+ADD gulpfile.js /app/
+
+RUN apk add --virtual build-dependencies build-base
+RUN apk add npm --repository=http://dl-cdn.alpinelinux.org/alpine/edge/community/
+RUN npm i -g pnpm
+RUN pnpm install
+RUN bundle config --global silence_root_warning 1 && bundler install --verbose
+
+# website
+EXPOSE 3000
+# website management (browser auto reload)
+EXPOSE 3001
+# run tabler
+ENTRYPOINT [ "pnpm", "run", "start-plugins" ]

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2021 The Tabler Authors
+Copyright (c) 2018-2023 The Tabler Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -22,7 +22,7 @@ A premium and open source dashboard template with a responsive and high-quality
 
 ## 🔎 Preview
 
-Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, 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 demo</a>
+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>
 
@@ -32,7 +32,7 @@ Tabler is fully responsive and compatible with all modern browsers. Thanks to it
 We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge — as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
 
 * **Responsive:** With the support for mobile, tablet and desktop displays, it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
-* **Cross Browser:** Our theme works perfectly with the latest Chrome, Firefox+, latest Safari, Opera, Edge and mobile browsers. We work hard to to provide continuous support for them.
+* **Cross Browser:** Our theme works perfectly with the latest Chrome, Firefox+, Safari, Opera, Edge and mobile browsers. We work hard to provide continuous support for them.
 * **HTML5 & CSS3:** We use only modern web technologies, such as HTML5 and CSS3. Our theme includes some subtle CSS3 animations, which will help you attract attention.
 * **Clean Code:** We followed Bootstrap’s guidelines carefully to make your integration as easy as possible. All code is handwritten and W3C valid.
 * **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
@@ -40,7 +40,7 @@ We've created this admin panel for everyone who wants to create templates based
 
 ## 📖 Documentation
 
-Documentation is available as a part of Tabler preview: https://preview.tabler.io/docs/
+Documentation is available as a part of Tabler preview: https://tabler.io/docs/
 
 ## 🪴 Project Activity
 
@@ -72,13 +72,13 @@ Support this project by becoming a sponsor. Your logo will show up in this READM
 To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
 
 1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
+2. Navigate to the root `/tabler` directory and run `pnpm install` to install our local dependencies listed in `package.json`.
 3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.7.6](https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.6.tar.gz).
 4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
 
 **OSX users**:
 
-1. NPM ```npm install```
+1. NPM ```pnpm install```
 2. install Ruby (2.5.* recommended)
 	```brew install ruby @2.5```
 3. install bundler
@@ -105,17 +105,17 @@ Once you complete the setup, you'll be able to run the various commands provided
 
 ## Build locally
 
-You need to have `npm` and `bundler` installed.
+You need to have `pnpm` and `bundler` installed.
 
 1. From the root `/tabler` directory, run installation in the command line:
-  - `npm install` 
+  - `pnpm install` 
   - `bundler install` 
-2. Then execute `npm run start-plugins` to start up the application stack.
+2. Then execute `pnpm run start-plugins` to start up the application stack.
 3. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
 4. Any change in the `/src` directory will build the application and refresh the page.
 
 **Note**:
-Run `npm run build` for reforms a one off build application without refresh.
+Run `pnpm run build` for reforms a one off build application without refresh.
 Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
 
 ## Installation
@@ -202,3 +202,16 @@ Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testi
 ## License
 
 See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<!-- markdownlint-restore -->
+<!-- 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!

_config.yml

@@ -14,12 +14,16 @@ rtl: false
 
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
+theme-color: "#0054a6"
+
+email: support@tabler.io
 homepage: https://tabler.io
 github-url: https://github.com/tabler/tabler
 github-sponsors-url: https://github.com/sponsors/codecalm
 changelog-url: https://github.com/tabler/tabler/releases
 sponsor-url: https://github.com/sponsors/codecalm
-preview-url: https://preview.tabler.io
+preview-url: https://tabler.io/demo
+docs-url: https://tabler.io/docs
 
 mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
 google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
@@ -57,10 +61,6 @@ jekyll_tidy:
   compress_html: false
   ignore_env: development
 
-collections:
-  docs:
-    output: true
-
 defaults:
   - scope:
       type: "pages"
@@ -71,15 +71,11 @@ defaults:
       type: "pages"
     values:
       layout: default
-  - scope:
-      type: "docs"
-    values:
-      layout: docs
 
 colors:
   blue:
     class: blue
-    hex: '#206bc4'
+    hex: '#0054a6'
     title: Blue
   azure:
     class: azure
@@ -227,3 +223,11 @@ socials:
 
 months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 months-long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+icons:
+  link: https://tabler-icons.io
+
+emails:
+  price: "$29"
+  count: 54
+  buy_link: https://tabler.io/buy-emails

demo/2-step-verification-code.html

@@ -0,0 +1,129 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>2-Step Verification - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body  class=" d-flex flex-column">
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page page-center">
+      <div class="container container-tight py-4">
+        <div class="text-center mb-4">
+          <a href="." class="navbar-brand navbar-brand-autodark">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
+        </div>
+        <form
+	class="card card-md"
+	action="./"
+	method="get"
+	autocomplete="off"
+	novalidate
+>
+          <div class="card-body">
+            <h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
+            <p class="my-4 text-center">Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.</p>
+            <div class="my-5">
+              <div class="row g-4">
+                <div class="col">
+                  <div class="row g-2">
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="row g-2">
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                    <div class="col">
+                      <input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="my-4">
+              <label class="form-check">
+                <input type="checkbox" class="form-check-input" />
+                Dont't ask for codes again on this device
+              </label>
+            </div>
+            <div class="form-footer">
+              <div class="btn-list flex-nowrap">
+                <a href="./2-step-verification.html" class="btn w-100">
+                  Cancel
+                </a>
+                <a href="#" class="btn btn-primary w-100">
+                  Verify
+                </a>
+              </div>
+            </div>
+          </div>
+        </form>
+        <div class="text-center text-secondary mt-3">
+          It may take a minute to receive your code. Haven't received it? <a href="./">Resend a new code.</a>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+      	var inputs = document.querySelectorAll('[data-code-input]');
+      	// Attach an event listener to each input element
+      	for(let i = 0; i < inputs.length; i++) {
+      		inputs[i].addEventListener('input', function(e) {
+      			// If the input field has a character, and there is a next input field, focus it
+      			if(e.target.value.length === e.target.maxLength && i + 1 < inputs.length) {
+      				inputs[i + 1].focus();
+      			}
+      		});
+      		inputs[i].addEventListener('keydown', function(e) {
+      			// If the input field is empty and the keyCode for Backspace (8) is detected, and there is a previous input field, focus it
+      			if(e.target.value.length === 0 && e.keyCode === 8 && i > 0) {
+      				inputs[i - 1].focus();
+      			}
+      		});
+      	}
+      });
+    </script>
+  </body>
+</html>

demo/2-step-verification.html

@@ -0,0 +1,331 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>2-Step Verification - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
+    <style>
+      @import url('https://rsms.me/inter/inter.css');
+      :root {
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
+      }
+    </style>
+  </head>
+  <body  class=" d-flex flex-column">
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
+    <div class="page page-center">
+      <div class="container container-tight py-4">
+        <div class="text-center mb-4">
+          <a href="." class="navbar-brand navbar-brand-autodark">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
+        </div>
+        <form
+	class="card card-md"
+	action="./2-step-verification-code.html"
+	method="get"
+	autocomplete="off"
+	novalidate
+>
+          <div class="card-body">
+            <h2 class="card-title text-center mb-4">2-Step Verification</h2>
+            <div class="mb-3">
+              <label class="form-label">Country</label>
+              <select class="form-select">
+                <option value="">Andorra</option>
+                <option value="">United Arab Emirates</option>
+                <option value="">Afghanistan</option>
+                <option value="">Antigua</option>
+                <option value="">Anguilla</option>
+                <option value="">Armenia</option>
+                <option value="">Angolan</option>
+                <option value="">Antarctica</option>
+                <option value="">Argentina</option>
+                <option value="">American Samoa</option>
+                <option value="">Austria</option>
+                <option value="">Australia</option>
+                <option value="">Aruba</option>
+                <option value="">Aslan Islands</option>
+                <option value="">Azerbaijan</option>
+                <option value="">Bosnian</option>
+                <option value="">Barbados</option>
+                <option value="">Belgium</option>
+                <option value="">Burkina Faso</option>
+                <option value="">Bulgaria</option>
+                <option value="">Bahrain</option>
+                <option value="">Burundi</option>
+                <option value="">Benin</option>
+                <option value="">Saint-Barthélemy</option>
+                <option value="">Bermuda</option>
+                <option value="">Bruneian</option>
+                <option value="">Bolivia</option>
+                <option value="">Bonaire</option>
+                <option value="">Brazil</option>
+                <option value="">Bahamas</option>
+                <option value="">Bhutan</option>
+                <option value="">Bouvet Island</option>
+                <option value="">Batswana</option>
+                <option value="">Belarus</option>
+                <option value="">Belize</option>
+                <option value="">Canada</option>
+                <option value="">Cocos Island</option>
+                <option value="">Democratic Republic of Congo</option>
+                <option value="">Central African Republic</option>
+                <option value="">Republic of the Congo</option>
+                <option value="">Switzerland</option>
+                <option value="">Ivory Coast</option>
+                <option value="">Cook Island</option>
+                <option value="">Chile</option>
+                <option value="">Cameroon</option>
+                <option value="">China</option>
+                <option value="">Colombia</option>
+                <option value="">Costa Rica</option>
+                <option value="">Cuba</option>
+                <option value="">Cape Verde</option>
+                <option value="">Curacao</option>
+                <option value="">Christmas Island</option>
+                <option value="">Cyprus</option>
+                <option value="">Czech Republic</option>
+                <option value="">Germany</option>
+                <option value="">Djibouti</option>
+                <option value="">Denmark</option>
+                <option value="">Dominica</option>
+                <option value="">Dominican Republic</option>
+                <option value="">Algeria</option>
+                <option value="">Ecuador</option>
+                <option value="">Estonia</option>
+                <option value="">Egypt</option>
+                <option value="">Sahrawi</option>
+                <option value="">Eritrea</option>
+                <option value="">Spain</option>
+                <option value="">Catalonia</option>
+                <option value="">Ethiopia</option>
+                <option value="">European Union</option>
+                <option value="">Finland</option>
+                <option value="">Fiji</option>
+                <option value="">Falkland Islands</option>
+                <option value="">Federate States of Micronesia</option>
+                <option value="">Faroe Islands</option>
+                <option value="">France</option>
+                <option value="">Gabon</option>
+                <option value="">Great Britain</option>
+                <option value="">England</option>
+                <option value="">Nothern Ireland</option>
+                <option value="">Scotland</option>
+                <option value="">Wales</option>
+                <option value="">Grenada</option>
+                <option value="">Georgia</option>
+                <option value="">Guyana</option>
+                <option value="">Guernsey</option>
+                <option value="">Ghana</option>
+                <option value="">Gibraltar</option>
+                <option value="">Greenland</option>
+                <option value="">Gambia</option>
+                <option value="">Guinea</option>
+                <option value="">Guadeloupe</option>
+                <option value="">Equatorial Guinea</option>
+                <option value="">Greece</option>
+                <option value="">South Georgia</option>
+                <option value="">Guatemala</option>
+                <option value="">Guam</option>
+                <option value="">Guinea-Bissau</option>
+                <option value="">Guyana</option>
+                <option value="">Hong Kong</option>
+                <option value="">Heard and McDonald Islands</option>
+                <option value="">Honduras</option>
+                <option value="">Croatia</option>
+                <option value="">Haiti</option>
+                <option value="">Hungary</option>
+                <option value="">Indonesia</option>
+                <option value="">Ireland</option>
+                <option value="">Israel</option>
+                <option value="">Isle of Man</option>
+                <option value="">India</option>
+                <option value="">British Indian Ocean Territory</option>
+                <option value="">Iraq</option>
+                <option value="">Iran</option>
+                <option value="">Iceland</option>
+                <option value="">Italy</option>
+                <option value="">Jersey</option>
+                <option value="">Jamaica</option>
+                <option value="">Jordan</option>
+                <option value="">Japan</option>
+                <option value="">Kenya</option>
+                <option value="">Kyrgyzstan</option>
+                <option value="">Cambodia</option>
+                <option value="">Kiribati</option>
+                <option value="">Comoros</option>
+                <option value="">Saint Kitts and Nevis</option>
+                <option value="">North Korea</option>
+                <option value="">South Korea</option>
+                <option value="">Kuwait</option>
+                <option value="">Cayman Islands</option>
+                <option value="">Kazakhstan</option>
+                <option value="">Laos</option>
+                <option value="">Lebanese</option>
+                <option value="">Saint Lucia</option>
+                <option value="">Liechtenstein</option>
+                <option value="">Sri Lanka</option>
+                <option value="">Liberia</option>
+                <option value="">Lesotho</option>
+                <option value="">Lithuania</option>
+                <option value="">Luxembourg</option>
+                <option value="">Latvia</option>
+                <option value="">Libya</option>
+                <option value="">Morocco</option>
+                <option value="">Monaco</option>
+                <option value="">Moldova</option>
+                <option value="">Montenegro</option>
+                <option value="">Saint Martin</option>
+                <option value="">Madagascar</option>
+                <option value="">Marshall Islands</option>
+                <option value="">Macedonia</option>
+                <option value="">Mali</option>
+                <option value="">Myanmar</option>
+                <option value="">Mongolia</option>
+                <option value="">Macao</option>
+                <option value="">Nothern Mariana Islands</option>
+                <option value="">Martinique</option>
+                <option value="">Mauritania</option>
+                <option value="">Montserrat</option>
+                <option value="">Malta</option>
+                <option value="">Mauritius</option>
+                <option value="">Maldives</option>
+                <option value="">Malawi</option>
+                <option value="">Mexico</option>
+                <option value="">Malaysia</option>
+                <option value="">Mozambique</option>
+                <option value="">Namibia</option>
+                <option value="">New Caledonia</option>
+                <option value="">Niger</option>
+                <option value="">Norfolk Island</option>
+                <option value="">Nigeria</option>
+                <option value="">Nicaragua</option>
+                <option value="">Norway</option>
+                <option value="">Nepal</option>
+                <option value="">Nauruan</option>
+                <option value="">Niger</option>
+                <option value="">New Zealand</option>
+                <option value="">Oman</option>
+                <option value="">Panama</option>
+                <option value="">Peru</option>
+                <option value="">French Polynesia</option>
+                <option value="">Papua New Guinea</option>
+                <option value="">Philippines</option>
+                <option value="">Pakistan</option>
+                <option value="">Poland</option>
+                <option value="">Saint Pierre</option>
+                <option value="">Pitcairn Islands</option>
+                <option value="">Puerto Rico</option>
+                <option value="">Palestine</option>
+                <option value="">Portugal</option>
+                <option value="">Palau</option>
+                <option value="">Paraguay</option>
+                <option value="">Qatar</option>
+                <option value="">Reunion Island</option>
+                <option value="">Romania</option>
+                <option value="">Serbia</option>
+                <option value="">Russia</option>
+                <option value="">Rwanda</option>
+                <option value="">Saudi Arabia</option>
+                <option value="">Solomon Islands</option>
+                <option value="">Seychelles</option>
+                <option value="">Sudan</option>
+                <option value="">Sweden</option>
+                <option value="">Singapore</option>
+                <option value="">Saint Helena</option>
+                <option value="">Slovenia</option>
+                <option value="">Svalbard Island</option>
+                <option value="">Slovakia</option>
+                <option value="">Sierra Leone</option>
+                <option value="">San Marino</option>
+                <option value="">Senegal</option>
+                <option value="">Somalia</option>
+                <option value="">Suriname</option>
+                <option value="">South Sudan</option>
+                <option value="">Sao Tome</option>
+                <option value="">El Salvador</option>
+                <option value="">Sint Maarten</option>
+                <option value="">Syria</option>
+                <option value="">Swaziland</option>
+                <option value="">Turks and Caicos</option>
+                <option value="">Chad</option>
+                <option value="">French Southern and Antarctic Lands</option>
+                <option value="">Togo</option>
+                <option value="">Thailand</option>
+                <option value="">Tajikistan</option>
+                <option value="">Tokelau</option>
+                <option value="">Timor Leste</option>
+                <option value="">Turkmenistan</option>
+                <option value="">Tunisia</option>
+                <option value="">Tonga</option>
+                <option value="">Turkey</option>
+                <option value="">Trinidad and Tobago</option>
+                <option value="">Tuvalu</option>
+                <option value="">Tanzania</option>
+                <option value="">Ukraine</option>
+                <option value="">Uganda</option>
+                <option value="">United States Minor Islands</option>
+                <option value="">United Nations</option>
+                <option value="">United States of America</option>
+                <option value="">Uruguay</option>
+                <option value="">Uzbekistan</option>
+                <option value="">Vatican City</option>
+                <option value="">Saint Vincent</option>
+                <option value="">Venezuela</option>
+                <option value="">British Virgin Islands</option>
+                <option value="">Virgiin Islands</option>
+                <option value="">Vietnam</option>
+                <option value="">Vanuatu</option>
+                <option value="">Wallis and Futuna</option>
+                <option value="">Samoa</option>
+                <option value="">Yemen</option>
+                <option value="">South Africa</option>
+                <option value="">Zambia</option>
+                <option value="">Zimbabwe</option>
+              </select>
+            </div>
+            <div class="mb-4">
+              <label class="form-label">Your Phone Number</label>
+              <div class="input-group">
+                <span class="input-group-text">+1</span>
+                <input type="text" class="form-control" placeholder="Enter phone number" />
+              </div>
+            </div>
+            <div class="text-secondary">
+              Security is critical in Tabler. to help keep your account safe, we'll
+              text you a verification code when you sign in on a new device
+            </div>
+            <div class="form-footer">
+              <button type="submit" class="btn btn-primary w-100">
+                Send code
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
+  </body>
+</html>

demo/accordion.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Accordion - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item active" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -641,13 +695,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -656,13 +710,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -674,7 +728,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/activity.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Activity - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item active" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -594,7 +648,7 @@
                             <div class="text-truncate">
                               <strong>Jeffie Lewzey</strong> commented on your <strong>"I'm not a witch."</strong> post.
                             </div>
-                            <div class="text-muted">yesterday</div>
+                            <div class="text-secondary">yesterday</div>
                           </div>
                           <div class="col-auto align-self-center">
                             <div class="badge bg-primary"></div>
@@ -610,7 +664,7 @@
                             <div class="text-truncate">
                               It's <strong>Mallory Hulme</strong>'s birthday. Wish him well!
                             </div>
-                            <div class="text-muted">2 days ago</div>
+                            <div class="text-secondary">2 days ago</div>
                           </div>
                           <div class="col-auto align-self-center">
                             <div class="badge bg-primary"></div>
@@ -626,7 +680,7 @@
                             <div class="text-truncate">
                               <strong>Dunn Slane</strong> posted <strong>"Well, what do you want?"</strong>.
                             </div>
-                            <div class="text-muted">today</div>
+                            <div class="text-secondary">today</div>
                           </div>
                           <div class="col-auto align-self-center">
                             <div class="badge bg-primary"></div>
@@ -642,7 +696,7 @@
                             <div class="text-truncate">
                               <strong>Emmy Levet</strong> created a new project <strong>Morning alarm clock</strong>.
                             </div>
-                            <div class="text-muted">4 days ago</div>
+                            <div class="text-secondary">4 days ago</div>
                           </div>
                           <div class="col-auto align-self-center">
                             <div class="badge bg-primary"></div>
@@ -658,7 +712,7 @@
                             <div class="text-truncate">
                               <strong>Maryjo Lebarree</strong> liked your photo.
                             </div>
-                            <div class="text-muted">2 days ago</div>
+                            <div class="text-secondary">2 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -671,7 +725,7 @@
                             <div class="text-truncate">
                               <strong>Egan Poetz</strong> registered new client as <strong>Trilia</strong>.
                             </div>
-                            <div class="text-muted">yesterday</div>
+                            <div class="text-secondary">yesterday</div>
                           </div>
                         </div>
                       </div>
@@ -684,7 +738,7 @@
                             <div class="text-truncate">
                               <strong>Kellie Skingley</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>.
                             </div>
-                            <div class="text-muted">2 days ago</div>
+                            <div class="text-secondary">2 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -697,7 +751,7 @@
                             <div class="text-truncate">
                               <strong>Christabel Charlwood</strong> created a new project for <strong>Wikibox</strong>.
                             </div>
-                            <div class="text-muted">4 days ago</div>
+                            <div class="text-secondary">4 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -710,7 +764,7 @@
                             <div class="text-truncate">
                               <strong>Haskel Shelper</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>.
                             </div>
-                            <div class="text-muted">today</div>
+                            <div class="text-secondary">today</div>
                           </div>
                         </div>
                       </div>
@@ -723,7 +777,7 @@
                             <div class="text-truncate">
                               <strong>Lorry Mion</strong> liked <strong>Tabler UI Kit</strong>.
                             </div>
-                            <div class="text-muted">yesterday</div>
+                            <div class="text-secondary">yesterday</div>
                           </div>
                         </div>
                       </div>
@@ -736,7 +790,7 @@
                             <div class="text-truncate">
                               <strong>Leesa Beaty</strong> posted new video.
                             </div>
-                            <div class="text-muted">2 days ago</div>
+                            <div class="text-secondary">2 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -749,7 +803,7 @@
                             <div class="text-truncate">
                               <strong>Perren Keemar</strong> and 3 others followed you.
                             </div>
-                            <div class="text-muted">2 days ago</div>
+                            <div class="text-secondary">2 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -762,7 +816,7 @@
                             <div class="text-truncate">
                               <strong>Sunny Airey</strong> upload 3 new photos to category <strong>Inspirations</strong>.
                             </div>
-                            <div class="text-muted">2 days ago</div>
+                            <div class="text-secondary">2 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -775,7 +829,7 @@
                             <div class="text-truncate">
                               <strong>Geoffry Flaunders</strong> made a <strong>$10</strong> donation.
                             </div>
-                            <div class="text-muted">2 days ago</div>
+                            <div class="text-secondary">2 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -788,7 +842,7 @@
                             <div class="text-truncate">
                               <strong>Thatcher Keel</strong> created a profile.
                             </div>
-                            <div class="text-muted">3 days ago</div>
+                            <div class="text-secondary">3 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -801,7 +855,7 @@
                             <div class="text-truncate">
                               <strong>Dyann Escala</strong> hosted the event <strong>Tabler UI Birthday</strong>.
                             </div>
-                            <div class="text-muted">4 days ago</div>
+                            <div class="text-secondary">4 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -814,7 +868,7 @@
                             <div class="text-truncate">
                               <strong>Avivah Mugleston</strong> mentioned you on <strong>Best of 2020</strong>.
                             </div>
-                            <div class="text-muted">2 days ago</div>
+                            <div class="text-secondary">2 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -827,7 +881,7 @@
                             <div class="text-truncate">
                               <strong>Arlie Armstead</strong> sent a Review Request to <strong>Amanda Blake</strong>.
                             </div>
-                            <div class="text-muted">2 days ago</div>
+                            <div class="text-secondary">2 days ago</div>
                           </div>
                         </div>
                       </div>
@@ -843,13 +897,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -858,13 +912,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -876,7 +930,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/auth-lock.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,30 +14,35 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Forgot password - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
-  <body  class=" border-top-wide border-primary d-flex flex-column">
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+  <body  class=" d-flex flex-column">
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page page-center">
       <div class="container container-tight py-4">
         <div class="text-center mb-4">
-          <a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo.svg" height="36" alt=""></a>
+          <a href="." class="navbar-brand navbar-brand-autodark">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
         </div>
         <form class="card card-md" action="./" method="get" autocomplete="off" novalidate>
           <div class="card-body text-center">
             <div class="mb-4">
               <h2 class="card-title">Account Locked</h2>
-              <p class="text-muted">Please enter your password to unlock your account</p>
+              <p class="text-secondary">Please enter your password to unlock your account</p>
             </div>
             <div class="mb-4">
               <span class="avatar avatar-xl mb-3" style="background-image: url(./static/avatars/000m.jpg)"></span>
@@ -49,7 +54,7 @@
             <div>
               <a href="#" class="btn btn-primary w-100">
                 <!-- Download SVG icon from http://tabler-icons.io/i/lock-open -->
-                <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"/><rect x="5" y="11" width="14" height="10" rx="2" /><circle cx="12" cy="16" r="1" /><path d="M8 11v-5a4 4 0 0 1 8 0" /></svg>
+                <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="M5 11m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M8 11v-5a4 4 0 0 1 8 0" /></svg>
                 Unlock
               </a>
             </div>
@@ -59,7 +64,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/badges.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Badges - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -599,18 +653,18 @@
                     <div class="card">
                       <div class="card-body">
                         <div class="badges-list">
-                          <span class="badge bg-blue">Blue</span>
-                          <span class="badge bg-azure">Azure</span>
-                          <span class="badge bg-indigo">Indigo</span>
-                          <span class="badge bg-purple">Purple</span>
-                          <span class="badge bg-pink">Pink</span>
-                          <span class="badge bg-red">Red</span>
-                          <span class="badge bg-orange">Orange</span>
-                          <span class="badge bg-yellow">Yellow</span>
-                          <span class="badge bg-lime">Lime</span>
-                          <span class="badge bg-green">Green</span>
-                          <span class="badge bg-teal">Teal</span>
-                          <span class="badge bg-cyan">Cyan</span>
+                          <span class="badge bg-blue text-blue-fg">Blue</span>
+                          <span class="badge bg-azure text-azure-fg">Azure</span>
+                          <span class="badge bg-indigo text-indigo-fg">Indigo</span>
+                          <span class="badge bg-purple text-purple-fg">Purple</span>
+                          <span class="badge bg-pink text-pink-fg">Pink</span>
+                          <span class="badge bg-red text-red-fg">Red</span>
+                          <span class="badge bg-orange text-orange-fg">Orange</span>
+                          <span class="badge bg-yellow text-yellow-fg">Yellow</span>
+                          <span class="badge bg-lime text-lime-fg">Lime</span>
+                          <span class="badge bg-green text-green-fg">Green</span>
+                          <span class="badge bg-teal text-teal-fg">Teal</span>
+                          <span class="badge bg-cyan text-cyan-fg">Cyan</span>
                         </div>
                       </div>
                     </div>
@@ -661,7 +715,7 @@
                 <div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow">
                   <a class="dropdown-item" href="#">
                     Action
-                    <span class="badge bg-primary ms-auto">12</span>
+                    <span class="badge bg-primary text-primary-fg ms-auto">12</span>
                   </a>
                   <a class="dropdown-item" href="#">
                     Another action
@@ -675,18 +729,18 @@
                     <div class="card">
                       <div class="card-body">
                         <div class="btn-list">
-                          <button class="btn">Blue badge <span class="badge bg-blue ms-2">1</span></button>
-                          <button class="btn">Azure badge <span class="badge bg-azure ms-2">2</span></button>
-                          <button class="btn">Indigo badge <span class="badge bg-indigo ms-2">3</span></button>
-                          <button class="btn">Purple badge <span class="badge bg-purple ms-2">4</span></button>
-                          <button class="btn">Pink badge <span class="badge bg-pink ms-2">5</span></button>
-                          <button class="btn">Red badge <span class="badge bg-red ms-2">6</span></button>
-                          <button class="btn">Orange badge <span class="badge bg-orange ms-2">7</span></button>
-                          <button class="btn">Yellow badge <span class="badge bg-yellow ms-2">8</span></button>
-                          <button class="btn">Lime badge <span class="badge bg-lime ms-2">9</span></button>
-                          <button class="btn">Green badge <span class="badge bg-green ms-2">10</span></button>
-                          <button class="btn">Teal badge <span class="badge bg-teal ms-2">11</span></button>
-                          <button class="btn">Cyan badge <span class="badge bg-cyan ms-2">12</span></button>
+                          <button class="btn">Blue badge <span class="badge bg-blue text-blue-fg ms-2">1</span></button>
+                          <button class="btn">Azure badge <span class="badge bg-azure text-azure-fg ms-2">2</span></button>
+                          <button class="btn">Indigo badge <span class="badge bg-indigo text-indigo-fg ms-2">3</span></button>
+                          <button class="btn">Purple badge <span class="badge bg-purple text-purple-fg ms-2">4</span></button>
+                          <button class="btn">Pink badge <span class="badge bg-pink text-pink-fg ms-2">5</span></button>
+                          <button class="btn">Red badge <span class="badge bg-red text-red-fg ms-2">6</span></button>
+                          <button class="btn">Orange badge <span class="badge bg-orange text-orange-fg ms-2">7</span></button>
+                          <button class="btn">Yellow badge <span class="badge bg-yellow text-yellow-fg ms-2">8</span></button>
+                          <button class="btn">Lime badge <span class="badge bg-lime text-lime-fg ms-2">9</span></button>
+                          <button class="btn">Green badge <span class="badge bg-green text-green-fg ms-2">10</span></button>
+                          <button class="btn">Teal badge <span class="badge bg-teal text-teal-fg ms-2">11</span></button>
+                          <button class="btn">Cyan badge <span class="badge bg-cyan text-cyan-fg ms-2">12</span></button>
                         </div>
                       </div>
                     </div>
@@ -695,18 +749,18 @@
                     <div class="card">
                       <div class="card-body">
                         <div class="btn-list">
-                          <button class="btn position-relative">Blue badge <span class="badge bg-blue badge-notification badge-pill">1</span></button>
-                          <button class="btn position-relative">Azure badge <span class="badge bg-azure badge-notification badge-pill">2</span></button>
-                          <button class="btn position-relative">Indigo badge <span class="badge bg-indigo badge-notification badge-pill">3</span></button>
-                          <button class="btn position-relative">Purple badge <span class="badge bg-purple badge-notification badge-pill">4</span></button>
-                          <button class="btn position-relative">Pink badge <span class="badge bg-pink badge-notification badge-pill">5</span></button>
-                          <button class="btn position-relative">Red badge <span class="badge bg-red badge-notification badge-pill">6</span></button>
-                          <button class="btn position-relative">Orange badge <span class="badge bg-orange badge-notification badge-pill">7</span></button>
-                          <button class="btn position-relative">Yellow badge <span class="badge bg-yellow badge-notification badge-pill">8</span></button>
-                          <button class="btn position-relative">Lime badge <span class="badge bg-lime badge-notification badge-pill">9</span></button>
-                          <button class="btn position-relative">Green badge <span class="badge bg-green badge-notification badge-pill">10</span></button>
-                          <button class="btn position-relative">Teal badge <span class="badge bg-teal badge-notification badge-pill">11</span></button>
-                          <button class="btn position-relative">Cyan badge <span class="badge bg-cyan badge-notification badge-pill">12</span></button>
+                          <button class="btn position-relative">Blue badge <span class="badge bg-blue text-blue-fg badge-notification badge-pill">1</span></button>
+                          <button class="btn position-relative">Azure badge <span class="badge bg-azure text-azure-fg badge-notification badge-pill">2</span></button>
+                          <button class="btn position-relative">Indigo badge <span class="badge bg-indigo text-indigo-fg badge-notification badge-pill">3</span></button>
+                          <button class="btn position-relative">Purple badge <span class="badge bg-purple text-purple-fg badge-notification badge-pill">4</span></button>
+                          <button class="btn position-relative">Pink badge <span class="badge bg-pink text-pink-fg badge-notification badge-pill">5</span></button>
+                          <button class="btn position-relative">Red badge <span class="badge bg-red text-red-fg badge-notification badge-pill">6</span></button>
+                          <button class="btn position-relative">Orange badge <span class="badge bg-orange text-orange-fg badge-notification badge-pill">7</span></button>
+                          <button class="btn position-relative">Yellow badge <span class="badge bg-yellow text-yellow-fg badge-notification badge-pill">8</span></button>
+                          <button class="btn position-relative">Lime badge <span class="badge bg-lime text-lime-fg badge-notification badge-pill">9</span></button>
+                          <button class="btn position-relative">Green badge <span class="badge bg-green text-green-fg badge-notification badge-pill">10</span></button>
+                          <button class="btn position-relative">Teal badge <span class="badge bg-teal text-teal-fg badge-notification badge-pill">11</span></button>
+                          <button class="btn position-relative">Cyan badge <span class="badge bg-cyan text-cyan-fg badge-notification badge-pill">12</span></button>
                         </div>
                       </div>
                     </div>
@@ -741,13 +795,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -756,13 +810,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -774,7 +828,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/blank.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item active" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page body -->
         <div class="page-body">
@@ -572,13 +626,13 @@
               <div class="empty-img"><img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128" alt="">
               </div>
               <p class="empty-title">No results found</p>
-              <p class="empty-subtitle text-muted">
+              <p class="empty-subtitle text-secondary">
                 Try adjusting your search or filter to find what you're looking for.
               </p>
               <div class="empty-action">
                 <a href="./." class="btn btn-primary">
                   <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
-                  <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" /></svg>
+                  <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="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                   Add your first client
                 </a>
               </div>
@@ -590,13 +644,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -605,13 +659,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -623,7 +677,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/buttons.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -1194,7 +1248,7 @@
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-twitter w-100 btn-icon" aria-label="Twitter">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
-                          <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
+                          <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
@@ -1206,19 +1260,19 @@
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-youtube w-100 btn-icon" aria-label="Youtube">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-youtube -->
-                          <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"/><rect x="3" y="5" width="18" height="14" rx="4" /><path d="M10 9l5 3l-5 3z" /></svg>
+                          <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="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" /><path d="M10 9l5 3l-5 3z" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-vimeo w-100 btn-icon" aria-label="Vimeo">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-vimeo -->
-                          <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="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" /></svg>
+                          <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="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1 1.5 3c-1.052 2 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-dribbble w-100 btn-icon" aria-label="Dribbble">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-dribbble -->
-                          <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" /><path d="M9 3.6c5 6 7 10.5 7.5 16.2" /><path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" /><path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" /></svg>
+                          <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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 3.6c5 6 7 10.5 7.5 16.2" /><path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" /><path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
@@ -1230,43 +1284,43 @@
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-instagram w-100 btn-icon" aria-label="Instagram">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-instagram -->
-                          <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"/><rect x="4" y="4" width="16" height="16" rx="4" /><circle cx="12" cy="12" r="3" /><line x1="16.5" y1="7.5" x2="16.5" y2="7.501" /></svg>
+                          <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="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M16.5 7.5l0 .01" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-pinterest w-100 btn-icon" aria-label="Pinterest">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-pinterest -->
-                          <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="8" y1="20" x2="12" y2="11" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><circle cx="12" cy="12" r="9" /></svg>
+                          <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="M8 20l4 -9" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-vk w-100 btn-icon" aria-label="VK">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-vk -->
-                          <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="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" /></svg>
+                          <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="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 0a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-rss w-100 btn-icon" aria-label="RSS">
                           <!-- Download SVG icon from http://tabler-icons.io/i/rss -->
-                          <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="5" cy="19" r="1" /><path d="M4 4a16 16 0 0 1 16 16" /><path d="M4 11a9 9 0 0 1 9 9" /></svg>
+                          <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="M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M4 4a16 16 0 0 1 16 16" /><path d="M4 11a9 9 0 0 1 9 9" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-flickr w-100 btn-icon" aria-label="Flickr">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-flickr -->
-                          <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="7" cy="12" r="3" /><circle cx="17" cy="12" r="3" /></svg>
+                          <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 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M17 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-bitbucket w-100 btn-icon" aria-label="Bitbucket">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
-                          <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="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /><path d="M14 15h-4l-1 -6h6z" /></svg>
+                          <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="M3.648 4a.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a.644 .644 0 0 0 .642 -.539l3.35 -14.71a.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /><path d="M14 15h-4l-1 -6h6z" /></svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-tabler w-100 btn-icon" aria-label="Tabler">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-tabler -->
-                          <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="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
+                          <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="M8 9l3 3l-3 3" /><path d="M13 15l3 0" /><path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /></svg>
                         </a>
                       </div>
                     </div>
@@ -1290,7 +1344,7 @@
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-twitter w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
-                          <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
+                          <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
                           Twitter
                         </a>
                       </div>
@@ -1304,21 +1358,21 @@
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-youtube w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-youtube -->
-                          <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"/><rect x="3" y="5" width="18" height="14" rx="4" /><path d="M10 9l5 3l-5 3z" /></svg>
+                          <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="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" /><path d="M10 9l5 3l-5 3z" /></svg>
                           Youtube
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-vimeo w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-vimeo -->
-                          <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="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" /></svg>
+                          <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="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1 1.5 3c-1.052 2 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" /></svg>
                           Vimeo
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-dribbble w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-dribbble -->
-                          <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" /><path d="M9 3.6c5 6 7 10.5 7.5 16.2" /><path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" /><path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" /></svg>
+                          <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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 3.6c5 6 7 10.5 7.5 16.2" /><path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" /><path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" /></svg>
                           Dribbble
                         </a>
                       </div>
@@ -1332,49 +1386,49 @@
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-instagram w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-instagram -->
-                          <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"/><rect x="4" y="4" width="16" height="16" rx="4" /><circle cx="12" cy="12" r="3" /><line x1="16.5" y1="7.5" x2="16.5" y2="7.501" /></svg>
+                          <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="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M16.5 7.5l0 .01" /></svg>
                           Instagram
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-pinterest w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-pinterest -->
-                          <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="8" y1="20" x2="12" y2="11" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><circle cx="12" cy="12" r="9" /></svg>
+                          <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="M8 20l4 -9" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>
                           Pinterest
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-vk w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-vk -->
-                          <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="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" /></svg>
+                          <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="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 0a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" /></svg>
                           VK
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-rss w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/rss -->
-                          <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="5" cy="19" r="1" /><path d="M4 4a16 16 0 0 1 16 16" /><path d="M4 11a9 9 0 0 1 9 9" /></svg>
+                          <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="M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M4 4a16 16 0 0 1 16 16" /><path d="M4 11a9 9 0 0 1 9 9" /></svg>
                           RSS
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-flickr w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-flickr -->
-                          <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="7" cy="12" r="3" /><circle cx="17" cy="12" r="3" /></svg>
+                          <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 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M17 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /></svg>
                           Flickr
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-bitbucket w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
-                          <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="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /><path d="M14 15h-4l-1 -6h6z" /></svg>
+                          <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="M3.648 4a.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a.644 .644 0 0 0 .642 -.539l3.35 -14.71a.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /><path d="M14 15h-4l-1 -6h6z" /></svg>
                           Bitbucket
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                         <a href="#" class="btn btn-tabler w-100">
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-tabler -->
-                          <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="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
+                          <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="M8 9l3 3l-3 3" /><path d="M13 15l3 0" /><path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /></svg>
                           Tabler
                         </a>
                       </div>
@@ -1390,13 +1444,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -1405,13 +1459,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -1423,7 +1477,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/card-actions.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Card actions - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -601,7 +655,7 @@
                     <div class="card-actions">
                       <a href="#" class="btn btn-primary">
                         <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
-                        <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" /></svg>
+                        <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="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                         Add new
                       </a>
                     </div>
@@ -626,7 +680,7 @@
                       </a>
                       <a href="#" class="btn">
                         <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
-                        <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"/><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></svg>
+                        <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="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
                         Email
                       </a>
                     </div>
@@ -661,7 +715,7 @@
                       </a>
                       <a href="#" class="btn">
                         <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
-                        <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"/><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></svg>
+                        <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="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
                         Email
                       </a>
                     </div>
@@ -736,7 +790,7 @@
                     <div class="card-actions">
                       <div class="dropdown">
                         <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
-                          <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="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
+                          <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="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
                         </a>
                         <div class="dropdown-menu dropdown-menu-end">
                           <a class="dropdown-item" href="#">Edit user</a>
@@ -763,13 +817,13 @@
                         <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="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
                       </a>
                       <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/chevron-up -->
-                        <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="6 15 12 9 18 15" /></svg>
+                        <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="M6 15l6 -6l6 6" /></svg>
                       </a>
                       <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
-                        <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="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
+                        <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="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
                       </a>
                       <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/x -->
-                        <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="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+                        <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="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
                       </a>
                     </div>
                   </div>
@@ -789,13 +843,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -804,13 +858,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -822,7 +876,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/cards-masonry.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Cards Masonry - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -729,13 +783,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -744,13 +798,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -763,7 +817,7 @@
     <!-- Libs JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" defer></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/cards.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Cards - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -659,12 +713,12 @@
                   <div class="card-stamp">
                     <div class="card-stamp-icon bg-yellow">
                       <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                      <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="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" 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 1 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>
                     </div>
                   </div>
                   <div class="card-body">
                     <h3 class="card-title">Card with icon bg</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
                   </div>
                 </div>
               </div>
@@ -672,7 +726,7 @@
                 <div class="card bg-primary-lt">
                   <div class="card-body">
                     <h3 class="card-title">Card with primary light background</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
                   </div>
                 </div>
               </div>
@@ -695,7 +749,7 @@
                   <div class="card-status-top bg-danger"></div>
                   <div class="card-body">
                     <h3 class="card-title">Card with top status</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
@@ -705,7 +759,7 @@
                   <div class="card-status-bottom bg-success"></div>
                   <div class="card-body">
                     <h3 class="card-title">Card with bottom status</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
@@ -715,7 +769,7 @@
                   <div class="card-status-start bg-primary"></div>
                   <div class="card-body">
                     <h3 class="card-title">Card with side status</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
@@ -727,7 +781,7 @@
                   </div>
                   <div class="card-body">
                     <h3 class="card-title">Card with top ribbon</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
                   </div>
                 </div>
               </div>
@@ -736,7 +790,7 @@
                   <div class="ribbon bg-red">NEW</div>
                   <div class="card-body">
                     <h3 class="card-title">Card with text ribbon</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
                   </div>
                 </div>
               </div>
@@ -744,7 +798,7 @@
                 <div class="card">
                   <div class="card-body">
                     <h3 class="card-title">Card with progress bar</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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 class="progress progress-sm card-progress">
@@ -758,7 +812,7 @@
                 <div class="card card-stacked">
                   <div class="card-body">
                     <h3 class="card-title">Stacked card</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
@@ -773,7 +827,7 @@
                     <div class="col">
                       <div class="card-body">
                         <h3 class="card-title">Card with left side image</h3>
-                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit
+                        <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>
@@ -791,7 +845,7 @@
                     <div class="col">
                       <div class="card-body">
                         <h3 class="card-title">Card with right side image</h3>
-                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit
+                        <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>
@@ -805,7 +859,7 @@
                   <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(./static/photos/home-office-desk-with-macbook-iphone-calendar-watch-and-organizer.jpg)"></div>
                   <div class="card-body">
                     <h3 class="card-title">Card with top image</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
@@ -814,7 +868,7 @@
                 <div class="card">
                   <div class="card-body">
                     <h3 class="card-title">Card with bottom image</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
                   <!-- Photo -->
@@ -825,7 +879,7 @@
                 <div class="card">
                   <div class="card-body">
                     <h3 class="card-title">Card with footer</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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 class="card-footer">
@@ -837,7 +891,7 @@
                 <div class="card">
                   <div class="card-body">
                     <h3 class="card-title">Card with transparent footer</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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 class="card-footer card-footer-transparent">
@@ -849,7 +903,7 @@
                 <div class="card">
                   <div class="card-body">
                     <h3 class="card-title">Card with footer button</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
                   <!-- Card footer -->
@@ -862,7 +916,7 @@
                 <div class="card">
                   <div class="card-body">
                     <h3 class="card-title">Card with footer buttons</h3>
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
                   <!-- Card footer -->
@@ -877,7 +931,7 @@
               <div class="col-md-6 col-lg-3">
                 <div class="card">
                   <div class="card-body">
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
                   <!-- Card footer -->
@@ -898,7 +952,7 @@
               <div class="col-md-6 col-lg-3">
                 <div class="card">
                   <div class="card-body">
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
                   <!-- Card footer -->
@@ -906,12 +960,12 @@
                     <div class="row align-items-center">
                       <div class="col-auto ms-auto">
                         <div class="avatar-list avatar-list-stacked">
-                          <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                          <span class="avatar avatar-sm avatar-rounded">JL</span>
-                          <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                          <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                          <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
-                          <span class="avatar avatar-sm avatar-rounded">+3</span>
+                          <span class="avatar avatar-sm rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                          <span class="avatar avatar-sm rounded">JL</span>
+                          <span class="avatar avatar-sm rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                          <span class="avatar avatar-sm rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                          <span class="avatar avatar-sm rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                          <span class="avatar avatar-sm rounded">+3</span>
                         </div>
                       </div>
                     </div>
@@ -942,13 +996,13 @@
                       <li class="nav-item ms-auto">
                         <a class="nav-link" href="#">
                           <!-- Download SVG icon from http://tabler-icons.io/i/settings -->
-                          <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="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>
+                          <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="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="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>
                         </a>
                       </li>
                     </ul>
                   </div>
                   <div class="card-body">
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
@@ -977,13 +1031,13 @@
                       <li class="nav-item ms-auto">
                         <a class="nav-link" href="#">
                           <!-- Download SVG icon from http://tabler-icons.io/i/settings -->
-                          <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="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>
+                          <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="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="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>
                         </a>
                       </li>
                     </ul>
                   </div>
                   <div class="card-body">
-                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    <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>
@@ -1003,7 +1057,7 @@
                     <div id="tab-top-1" class="card tab-pane active show">
                       <div class="card-body">
                         <div class="card-title">Content of tab #1</div>
-                        <p class="text-muted">
+                        <p class="text-secondary">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                         </p>
                       </div>
@@ -1012,7 +1066,7 @@
                     <div id="tab-top-2" class="card tab-pane">
                       <div class="card-body">
                         <div class="card-title">Content of tab #2</div>
-                        <p class="text-muted">
+                        <p class="text-secondary">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                         </p>
                       </div>
@@ -1021,7 +1075,7 @@
                     <div id="tab-top-3" class="card tab-pane">
                       <div class="card-body">
                         <div class="card-title">Content of tab #3</div>
-                        <p class="text-muted">
+                        <p class="text-secondary">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                         </p>
                       </div>
@@ -1030,7 +1084,7 @@
                     <div id="tab-top-4" class="card tab-pane">
                       <div class="card-body">
                         <div class="card-title">Content of tab #4</div>
-                        <p class="text-muted">
+                        <p class="text-secondary">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                         </p>
                       </div>
@@ -1046,7 +1100,7 @@
                     <div id="tab-bottom-1" class="card tab-pane active show">
                       <div class="card-body">
                         <div class="card-title">Content of tab #1</div>
-                        <p class="text-muted">
+                        <p class="text-secondary">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                         </p>
                       </div>
@@ -1055,7 +1109,7 @@
                     <div id="tab-bottom-2" class="card tab-pane">
                       <div class="card-body">
                         <div class="card-title">Content of tab #2</div>
-                        <p class="text-muted">
+                        <p class="text-secondary">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                         </p>
                       </div>
@@ -1064,7 +1118,7 @@
                     <div id="tab-bottom-3" class="card tab-pane">
                       <div class="card-body">
                         <div class="card-title">Content of tab #3</div>
-                        <p class="text-muted">
+                        <p class="text-secondary">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                         </p>
                       </div>
@@ -1073,7 +1127,7 @@
                     <div id="tab-bottom-4" class="card tab-pane">
                       <div class="card-body">
                         <div class="card-title">Content of tab #4</div>
-                        <p class="text-muted">
+                        <p class="text-secondary">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                         </p>
                       </div>
@@ -1221,13 +1275,13 @@
                     <div class="empty-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" alt="">
                     </div>
                     <p class="empty-title">No results found</p>
-                    <p class="empty-subtitle text-muted">
+                    <p class="empty-subtitle text-secondary">
                       Try adjusting your search or filter to find what you're looking for.
                     </p>
                     <div class="empty-action">
                       <a href="./." class="btn btn-primary">
                         <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                        <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" /></svg>
+                        <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                         Search again
                       </a>
                     </div>
@@ -1307,13 +1361,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -1322,13 +1376,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -1340,7 +1394,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/carousel.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item active" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item active" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -889,13 +943,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -904,13 +958,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -922,7 +976,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/charts.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item active" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item active" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -588,7 +642,7 @@
                       <h3 class="card-title">Active users</h3>
                       <div class="ms-auto">
                         <div class="dropdown">
-                          <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a>
+                          <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a>
                           <div class="dropdown-menu dropdown-menu-end">
                             <a class="dropdown-item active" href="#">Last 7 days</a>
                             <a class="dropdown-item" href="#">Last 30 days</a>
@@ -604,19 +658,19 @@
                       <div class="col-md-auto">
                         <div class="divide-y divide-y-fill">
                           <div class="px-3">
-                            <div class="text-muted">
+                            <div class="text-secondary">
                               <span class="status-dot bg-primary"></span> Mobile
                             </div>
                             <div class="h2">11,425</div>
                           </div>
                           <div class="px-3">
-                            <div class="text-muted">
+                            <div class="text-secondary">
                               <span class="status-dot bg-azure"></span> Desktop
                             </div>
                             <div class="h2">6,458</div>
                           </div>
                           <div class="px-3">
-                            <div class="text-muted">
+                            <div class="text-secondary">
                               <span class="status-dot bg-green"></span> Tablet
                             </div>
                             <div class="h2">3,985</div>
@@ -636,7 +690,7 @@
                       <h3 class="card-title">Social referrals</h3>
                       <div class="ms-auto">
                         <div class="dropdown">
-                          <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a>
+                          <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a>
                           <div class="dropdown-menu dropdown-menu-end">
                             <a class="dropdown-item active" href="#">Last 7 days</a>
                             <a class="dropdown-item" href="#">Last 30 days</a>
@@ -818,13 +872,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -833,13 +887,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -850,10 +904,10 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1668287865" defer></script>
+    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1692870487" defer></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
     <script>
       // @formatter:off
       document.addEventListener("DOMContentLoaded", function () {

demo/colors.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Colors - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item active" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -887,13 +941,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -902,13 +956,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -920,7 +974,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/datagrid.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Data grid - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item active" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -606,7 +660,7 @@
                     <div class="datagrid-title">Creator</div>
                     <div class="datagrid-content">
                       <div class="d-flex align-items-center">
-                        <span class="avatar avatar-xs me-2 avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                        <span class="avatar avatar-xs me-2 rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
                         Paweł Kuna
                       </div>
                     </div>
@@ -627,12 +681,12 @@
                     <div class="datagrid-title">Avatars list</div>
                     <div class="datagrid-content">
                       <div class="avatar-list avatar-list-stacked">
-                        <span class="avatar avatar-xs avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                        <span class="avatar avatar-xs avatar-rounded">JL</span>
-                        <span class="avatar avatar-xs avatar-rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                        <span class="avatar avatar-xs avatar-rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                        <span class="avatar avatar-xs avatar-rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
-                        <span class="avatar avatar-xs avatar-rounded">+3</span>
+                        <span class="avatar avatar-xs rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                        <span class="avatar avatar-xs rounded">JL</span>
+                        <span class="avatar avatar-xs rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                        <span class="avatar avatar-xs rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        <span class="avatar avatar-xs rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                        <span class="avatar avatar-xs rounded">+3</span>
                       </div>
                     </div>
                   </div>
@@ -675,13 +729,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -690,13 +744,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -708,7 +762,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
   </body>
 </html>

demo/datatables.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta16
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,23 +14,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Datatables - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css?1668287865" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css?1668287865" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
     <style>
       @import url('https://rsms.me/inter/inter.css');
       :root {
-      	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+      }
+      body {
+      	font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="./dist/js/demo-theme.min.js?1668287865"></script>
+    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
     <div class="page">
       <!-- Navbar -->
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
+      <header class="navbar navbar-expand-md d-print-none" >
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -50,7 +53,7 @@
                 </a>
                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 text-pink" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                   Sponsor
                 </a>
               </div>
@@ -64,12 +67,12 @@
               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
 		   data-bs-placement="bottom">
                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
-                <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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+                <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
               </a>
               <div class="nav-item dropdown d-none d-md-flex me-3">
                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                  <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="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" 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 1 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>
                   <span class="badge bg-red"></span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
@@ -83,7 +86,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 1</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Change deprecated html tags to text decoration classes (#29604)
                             </div>
                           </div>
@@ -100,7 +103,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 2</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               justify-content:between ⇒ justify-content:space-between (#29734)
                             </div>
                           </div>
@@ -117,7 +120,7 @@
                           <div class="col-auto"><span class="status-dot d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 3</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Update change-version.js (#29736)
                             </div>
                           </div>
@@ -134,7 +137,7 @@
                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                           <div class="col text-truncate">
                             <a href="#" class="text-body d-block">Example 4</a>
-                            <div class="d-block text-muted text-truncate mt-n1">
+                            <div class="d-block text-secondary text-truncate mt-n1">
                               Regenerate package-lock.json (#29730)
                             </div>
                           </div>
@@ -156,12 +159,12 @@
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
+                  <div class="mt-1 small text-secondary">UI Designer</div>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                 <a href="#" class="dropdown-item">Status</a>
-                <a href="#" class="dropdown-item">Profile</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a>
@@ -171,15 +174,15 @@
           </div>
         </div>
       </header>
-      <div class="navbar-expand-md">
+      <header class="navbar-expand-md">
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
+          <div class="navbar">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
-                      <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 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                      <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="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -189,7 +192,7 @@
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
-                      <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="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                      <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="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -198,12 +201,49 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html">
-                          Empty page
+                        <a class="dropdown-item" href="./alerts.html">
+                          Alerts
                         </a>
                         <a class="dropdown-item" href="./accordion.html">
                           Accordion
                         </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./sign-in.html" class="dropdown-item">
+                              Sign in
+                            </a>
+                            <a href="./sign-in-link.html" class="dropdown-item">
+                              Sign in link
+                            </a>
+                            <a href="./sign-in-illustration.html" class="dropdown-item">
+                              Sign in with illustration
+                            </a>
+                            <a href="./sign-in-cover.html" class="dropdown-item">
+                              Sign in with cover
+                            </a>
+                            <a href="./sign-up.html" class="dropdown-item">
+                              Sign up
+                            </a>
+                            <a href="./forgot-password.html" class="dropdown-item">
+                              Forgot password
+                            </a>
+                            <a href="./terms-of-service.html" class="dropdown-item">
+                              Terms of service
+                            </a>
+                            <a href="./auth-lock.html" class="dropdown-item">
+                              Lock screen
+                            </a>
+                            <a href="./2-step-verification.html" class="dropdown-item">
+                              2 step verification
+                            </a>
+                            <a href="./2-step-verification-code.html" class="dropdown-item">
+                              2 step verification code
+                            </a>
+                          </div>
+                        </div>
                         <a class="dropdown-item" href="./blank.html">
                           Blank page
                         </a>
@@ -232,9 +272,20 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./carousel.html">
+                          Carousel
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./charts.html">
+                          Charts
+                        </a>
                         <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
+                        <a class="dropdown-item" href="./colorpicker.html">
+                          Color picker
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./datagrid.html">
                           Data grid
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
@@ -246,108 +297,12 @@
                         <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./modals.html">
-                          Modals
-                        </a>
-                        <a class="dropdown-item" href="./maps.html">
-                          Maps
-                        </a>
-                        <a class="dropdown-item" href="./map-fullsize.html">
-                          Map fullsize
-                        </a>
-                        <a class="dropdown-item" href="./maps-vector.html">
-                          Vector maps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html">
-                          Navigation
-                        </a>
-                        <a class="dropdown-item" href="./charts.html">
-                          Charts
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./pagination.html">
-                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./placeholder.html">
-                          Placeholder
-                        </a>
-                        <a class="dropdown-item" href="./steps.html">
-                          Steps
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html">
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html">
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html">
-                          Carousel
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./lists.html">
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html">
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./offcanvas.html">
-                          Offcanvas
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html">
-                          Markdown
-                        </a>
                         <a class="dropdown-item" href="./dropzone.html">
                           Dropzone
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
-                        <a class="dropdown-item" href="./lightbox.html">
-                          Lightbox
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./tinymce.html">
-                          TinyMCE
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <a class="dropdown-item" href="./inline-player.html">
-                          Inline player
-                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
-                        </a>
-                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            Authentication
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./sign-in.html" class="dropdown-item">
-                              Sign in
-                            </a>
-                            <a href="./sign-in-illustration.html" class="dropdown-item">
-                              Sign in with illustration
-                            </a>
-                            <a href="./sign-in-cover.html" class="dropdown-item">
-                              Sign in with cover
-                            </a>
-                            <a href="./sign-up.html" class="dropdown-item">
-                              Sign up
-                            </a>
-                            <a href="./forgot-password.html" class="dropdown-item">
-                              Forgot password
-                            </a>
-                            <a href="./terms-of-service.html" class="dropdown-item">
-                              Terms of service
-                            </a>
-                            <a href="./auth-lock.html" class="dropdown-item">
-                              Lock screen
-                            </a>
-                          </div>
-                        </div>
                         <div class="dropend">
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
-                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -362,6 +317,76 @@
                             </a>
                           </div>
                         </div>
+                        <a class="dropdown-item" href="./flags.html">
+                          Flags
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./inline-player.html">
+                          Inline player
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./lightbox.html">
+                          Lightbox
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./lists.html">
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="./modals.html">
+                          Modal
+                        </a>
+                        <a class="dropdown-item" href="./maps.html">
+                          Map
+                        </a>
+                        <a class="dropdown-item" href="./map-fullsize.html">
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="./maps-vector.html">
+                          Map vector
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
+                          Markdown
+                        </a>
+                        <a class="dropdown-item" href="./navigation.html">
+                          Navigation
+                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./pagination.html">
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
+                        </a>
+                        <a class="dropdown-item" href="./steps.html">
+                          Steps
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./stars-rating.html">
+                          Stars rating
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./tabs.html">
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="./tags.html">
+                          Tags
+                        </a>
+                        <a class="dropdown-item" href="./tables.html">
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="./typography.html">
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="./tinymce.html">
+                          TinyMCE
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -369,7 +394,7 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
-                      <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="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                      <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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -388,6 +413,17 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./empty.html">
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="./cookie-banner.html">
+                          Cookie banner
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./chat.html">
+                          Chat
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./activity.html">
                           Activity
                         </a>
@@ -446,10 +482,18 @@
                           Settings
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./trial-ended.html">
+                          Trial ended
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                         <a class="dropdown-item" href="./job-listing.html">
                           Job listing
                           <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                         </a>
+                        <a class="dropdown-item" href="./page-loader.html">
+                          Page loader
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -457,7 +501,7 @@
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
-                      <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                      <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="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -515,24 +559,34 @@
                 <li class="nav-item">
                   <a class="nav-link" href="./icons.html" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
-                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                      <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="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      2979 icons
+                      4637 icons
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./emails.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
+                      <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="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Email templates
                     </span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
-                      <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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
+                      <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="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Help
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./docs/">
+                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                       Documentation
                     </a>
                     <a class="dropdown-item" href="./changelog.html">
@@ -543,7 +597,7 @@
                     </a>
                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" 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-inline me-1" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor project!
                     </a>
                   </div>
@@ -554,7 +608,7 @@
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
-                      <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" /></svg>
+                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                     </span>
                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
@@ -563,7 +617,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </header>
       <div class="page-wrapper">
         <!-- Page header -->
         <div class="page-header d-print-none">
@@ -908,13 +962,13 @@
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                   <li class="list-inline-item">
                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 text-pink icon-filled icon-inline" 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.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                       Sponsor
                     </a>
                   </li>
@@ -923,13 +977,13 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2022
+                    Copyright &copy; 2023
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
-                      v1.0.0-beta16
+                      v1.0.0-beta20
                     </a>
                   </li>
                 </ul>
@@ -940,10 +994,10 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/list.js/dist/list.min.js?1668287865" defer></script>
+    <script src="./dist/libs/list.js/dist/list.min.js?1692870487" defer></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1668287865" defer></script>
-    <script src="./dist/js/demo.min.js?1668287865" defer></script>
+    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
+    <script src="./dist/js/demo.min.js?1692870487" defer></script>
     <script>
       document.addEventListener("DOMContentLoaded", function() {
       const list = new List('table-default', {

demo/dist/css/demo.css

@@ -1,11 +1,13 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/* prettier-ignore */
+/* prettier-ignore */
 pre.highlight,
 .highlight pre {
   max-height: 30rem;
@@ -13,10 +15,14 @@ pre.highlight,
   overflow: auto;
   border-radius: var(--tblr-border-radius);
 }
+pre.highlight,
+.highlight pre {
+  scrollbar-color: rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16) transparent;
+}
 pre.highlight::-webkit-scrollbar,
 .highlight pre::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 1rem;
+  height: 1rem;
   -webkit-transition: background 0.3s;
   transition: background 0.3s;
 }
@@ -29,16 +35,17 @@ pre.highlight::-webkit-scrollbar,
 }
 pre.highlight::-webkit-scrollbar-thumb,
 .highlight pre::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background: rgba(var(--tblr-light-rgb), 0.16);
+  border-radius: 1rem;
+  border: 5px solid transparent;
+  box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16);
 }
 pre.highlight::-webkit-scrollbar-track,
 .highlight pre::-webkit-scrollbar-track {
-  background: rgba(var(--tblr-light-rgb), 0.06);
+  background: transparent;
 }
 pre.highlight:hover::-webkit-scrollbar-thumb,
 .highlight pre:hover::-webkit-scrollbar-thumb {
-  background: rgba(var(--tblr-light-rgb), 0.32);
+  box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.32);
 }
 pre.highlight::-webkit-scrollbar-corner,
 .highlight pre::-webkit-scrollbar-corner {
@@ -93,7 +100,7 @@ pre.highlight::-webkit-scrollbar-corner,
 .example-content {
   font-size: 0.875rem;
   line-height: 1.4285714286;
-  color: #1d273b;
+  color: var(--tblr-body-color);
   flex: 1;
   max-width: 100%;
 }
@@ -102,7 +109,7 @@ pre.highlight::-webkit-scrollbar-corner,
 }
 
 .example-bg {
-  background: #f1f5f9;
+  background: #f6f8fb;
 }
 
 .example-code {
@@ -135,7 +142,7 @@ pre.highlight::-webkit-scrollbar-corner,
 }
 
 .example-modal-backdrop {
-  background: #1d273b;
+  background: #182433;
   opacity: 0.24;
   position: absolute;
   width: 100%;
@@ -145,44 +152,12 @@ pre.highlight::-webkit-scrollbar-corner,
   border-radius: 2px 2px 0 0;
 }
 
-@media not print {
-  .theme-dark .example {
-    background-color: #1a2234;
-    border-color: #243049;
-  }
-  .theme-dark .example-content {
-    color: #f8fafc;
-  }
-  .theme-dark .example-code {
-    border-color: #243049;
-    border-top: none;
-  }
-}
-@media not print {
-  @media (prefers-color-scheme: dark) {
-    .theme-dark-auto .example {
-      background-color: #1a2234;
-      border-color: #243049;
-    }
-    .theme-dark-auto .example-content {
-      color: #f8fafc;
-    }
-    .theme-dark-auto .example-code {
-      border-color: #243049;
-      border-top: none;
-    }
-  }
-}
 .card-sponsor {
-  background: #dbe7f6 no-repeat center/100% 100%;
-  border-color: #548ed2;
+  background: var(--tblr-primary-lt) no-repeat center/100% 100%;
+  border-color: var(--tblr-primary);
   min-height: 316px;
 }
 
-body.no-transitions * {
-  transition: none !important;
-}
-
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
@@ -285,17 +260,17 @@ body.no-transitions * {
   box-shadow: rgba(var(--tblr-body-color-rgb), 0.04) 0 2px 4px 0;
 }
 .settings-scheme-light {
-  background: linear-gradient(135deg, #ffffff 50%, #f8fafc 50%);
+  background: linear-gradient(135deg, #ffffff 50%, #fcfdfe 50%);
 }
 .settings-scheme-mixed {
-  background-image: linear-gradient(135deg, #1d273b 50%, #fff 50%);
+  background-image: linear-gradient(135deg, #182433 50%, #fff 50%);
 }
 .settings-scheme-transparent {
-  background: #f8fafc;
+  background: #fcfdfe;
 }
 .settings-scheme-dark {
-  background: #1d273b;
+  background: #182433;
 }
 .settings-scheme-colored {
-  background-image: linear-gradient(135deg, var(--tblr-primary) 50%, #f8fafc 50%);
+  background-image: linear-gradient(135deg, var(--tblr-primary) 50%, #fcfdfe 50%);
 }

demo/dist/css/demo.min.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
-.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;border-radius:var(--tblr-border-radius)}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:.5rem;height:.5rem;-webkit-transition:background .3s;transition:background .3s}@media (prefers-reduced-motion:reduce){.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{-webkit-transition:none;transition:none}}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(var(--tblr-light-rgb),.16)}.highlight pre::-webkit-scrollbar-track,pre.highlight::-webkit-scrollbar-track{background:rgba(var(--tblr-light-rgb),.06)}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:rgba(var(--tblr-light-rgb),.32)}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight{margin:0}.highlight code>*{margin:0!important;padding:0!important}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .nc,.highlight .nt,.highlight .nx{color:#ff8383}.highlight .na,.highlight .p{color:#ffe484}.highlight .dl,.highlight .s,.highlight .s2{color:#b5f4a5}.highlight .k{color:#93ddfd}.highlight .mi,.highlight .s1{color:#d9a9ff}.example{padding:2rem;margin:1rem 0 2rem;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;line-height:1.4285714286;color:#1d273b;flex:1;max-width:100%}.example-content .page-header{margin-bottom:0}.example-bg{background:#f1f5f9}.example-code{margin:2rem 0;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-top:none}.example-code pre{margin:0;border:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:26rem}.example-column-2{max-width:52rem}.example-modal-backdrop{background:#1d273b;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example{background-color:#1a2234;border-color:#243049}.theme-dark .example-content{color:#f8fafc}.theme-dark .example-code{border-color:#243049;border-top:none}}@media not print{@media (prefers-color-scheme:dark){.theme-dark-auto .example{background-color:#1a2234;border-color:#243049}.theme-dark-auto .example-content{color:#f8fafc}.theme-dark-auto .example-code{border-color:#243049;border-top:none}}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem!important}.demo-icon-preview{position:-webkit-sticky;position:sticky;top:0}.demo-icon-preview i,.demo-icon-preview svg{width:15rem;height:15rem;font-size:15rem;stroke-width:1.5;margin:0 auto;display:block}@media (max-width:575.98px){.demo-icon-preview i,.demo-icon-preview svg{width:10rem;height:10rem;font-size:10rem}}.demo-icon-preview-icon pre{margin:0;-webkit-user-select:all;-moz-user-select:all;user-select:all}.demo-dividers>p{opacity:.2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.demo-icons-list{display:flex;flex-wrap:wrap;padding:0;margin:0 -2px -1px 0;list-style:none}.demo-icons-list>*{flex:1 0 4rem}.demo-icons-list-wrap{overflow:hidden}.demo-icons-list-item{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;text-align:center;padding:.5rem;border-right:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-bottom:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);color:inherit;cursor:pointer}.demo-icons-list-item .icon{width:1.5rem;height:1.5rem;font-size:1.5rem}.demo-icons-list-item:hover{text-decoration:none}.settings-btn{position:fixed;right:-1px;top:10rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0}.settings-scheme{display:inline-block;border-radius:50%;height:3rem;width:3rem;position:relative;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);box-shadow:rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0}.settings-scheme-light{background:linear-gradient(135deg,#fff 50%,#f8fafc 50%)}.settings-scheme-mixed{background-image:linear-gradient(135deg,#1d273b 50%,#fff 50%)}.settings-scheme-transparent{background:#f8fafc}.settings-scheme-dark{background:#1d273b}.settings-scheme-colored{background-image:linear-gradient(135deg,var(--tblr-primary) 50%,#f8fafc 50%)}
+.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;border-radius:var(--tblr-border-radius)}.highlight pre,pre.highlight{scrollbar-color:rgba(var(--tblr-scrollbar-color,var(--tblr-body-color-rgb)),.16) transparent}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:1rem;height:1rem;-webkit-transition:background .3s;transition:background .3s}@media (prefers-reduced-motion:reduce){.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{-webkit-transition:none;transition:none}}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:1rem;border:5px solid transparent;box-shadow:inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color,var(--tblr-body-color-rgb)),.16)}.highlight pre::-webkit-scrollbar-track,pre.highlight::-webkit-scrollbar-track{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{box-shadow:inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color,var(--tblr-body-color-rgb)),.32)}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight{margin:0}.highlight code>*{margin:0!important;padding:0!important}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .nc,.highlight .nt,.highlight .nx{color:#ff8383}.highlight .na,.highlight .p{color:#ffe484}.highlight .dl,.highlight .s,.highlight .s2{color:#b5f4a5}.highlight .k{color:#93ddfd}.highlight .mi,.highlight .s1{color:#d9a9ff}.example{padding:2rem;margin:1rem 0 2rem;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;line-height:1.4285714286;color:var(--tblr-body-color);flex:1;max-width:100%}.example-content .page-header{margin-bottom:0}.example-bg{background:#f6f8fb}.example-code{margin:2rem 0;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-top:none}.example-code pre{margin:0;border:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:26rem}.example-column-2{max-width:52rem}.example-modal-backdrop{background:#182433;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}.card-sponsor{background:var(--tblr-primary-lt) no-repeat center/100% 100%;border-color:var(--tblr-primary);min-height:316px}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem!important}.demo-icon-preview{position:-webkit-sticky;position:sticky;top:0}.demo-icon-preview i,.demo-icon-preview svg{width:15rem;height:15rem;font-size:15rem;stroke-width:1.5;margin:0 auto;display:block}@media (max-width:575.98px){.demo-icon-preview i,.demo-icon-preview svg{width:10rem;height:10rem;font-size:10rem}}.demo-icon-preview-icon pre{margin:0;-webkit-user-select:all;-moz-user-select:all;user-select:all}.demo-dividers>p{opacity:.2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.demo-icons-list{display:flex;flex-wrap:wrap;padding:0;margin:0 -2px -1px 0;list-style:none}.demo-icons-list>*{flex:1 0 4rem}.demo-icons-list-wrap{overflow:hidden}.demo-icons-list-item{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;text-align:center;padding:.5rem;border-right:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-bottom:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);color:inherit;cursor:pointer}.demo-icons-list-item .icon{width:1.5rem;height:1.5rem;font-size:1.5rem}.demo-icons-list-item:hover{text-decoration:none}.settings-btn{position:fixed;right:-1px;top:10rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0}.settings-scheme{display:inline-block;border-radius:50%;height:3rem;width:3rem;position:relative;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);box-shadow:rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0}.settings-scheme-light{background:linear-gradient(135deg,#fff 50%,#fcfdfe 50%)}.settings-scheme-mixed{background-image:linear-gradient(135deg,#182433 50%,#fff 50%)}.settings-scheme-transparent{background:#fcfdfe}.settings-scheme-dark{background:#182433}.settings-scheme-colored{background-image:linear-gradient(135deg,var(--tblr-primary) 50%,#fcfdfe 50%)}

demo/dist/css/demo.rtl.css

@@ -1,11 +1,13 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/* prettier-ignore */
+/* prettier-ignore */
 pre.highlight,
 .highlight pre {
   max-height: 30rem;
@@ -13,10 +15,14 @@ pre.highlight,
   overflow: auto;
   border-radius: var(--tblr-border-radius);
 }
+pre.highlight,
+.highlight pre {
+  scrollbar-color: rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16) transparent;
+}
 pre.highlight::-webkit-scrollbar,
 .highlight pre::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 1rem;
+  height: 1rem;
   -webkit-transition: background 0.3s;
   transition: background 0.3s;
 }
@@ -29,16 +35,17 @@ pre.highlight::-webkit-scrollbar,
 }
 pre.highlight::-webkit-scrollbar-thumb,
 .highlight pre::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background: rgba(var(--tblr-light-rgb), 0.16);
+  border-radius: 1rem;
+  border: 5px solid transparent;
+  box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16);
 }
 pre.highlight::-webkit-scrollbar-track,
 .highlight pre::-webkit-scrollbar-track {
-  background: rgba(var(--tblr-light-rgb), 0.06);
+  background: transparent;
 }
 pre.highlight:hover::-webkit-scrollbar-thumb,
 .highlight pre:hover::-webkit-scrollbar-thumb {
-  background: rgba(var(--tblr-light-rgb), 0.32);
+  box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.32);
 }
 pre.highlight::-webkit-scrollbar-corner,
 .highlight pre::-webkit-scrollbar-corner {
@@ -93,7 +100,7 @@ pre.highlight::-webkit-scrollbar-corner,
 .example-content {
   font-size: 0.875rem;
   line-height: 1.4285714286;
-  color: #1d273b;
+  color: var(--tblr-body-color);
   flex: 1;
   max-width: 100%;
 }
@@ -102,7 +109,7 @@ pre.highlight::-webkit-scrollbar-corner,
 }
 
 .example-bg {
-  background: #f1f5f9;
+  background: #f6f8fb;
 }
 
 .example-code {
@@ -135,7 +142,7 @@ pre.highlight::-webkit-scrollbar-corner,
 }
 
 .example-modal-backdrop {
-  background: #1d273b;
+  background: #182433;
   opacity: 0.24;
   position: absolute;
   width: 100%;
@@ -145,44 +152,12 @@ pre.highlight::-webkit-scrollbar-corner,
   border-radius: 2px 2px 0 0;
 }
 
-@media not print {
-  .theme-dark .example {
-    background-color: #1a2234;
-    border-color: #243049;
-  }
-  .theme-dark .example-content {
-    color: #f8fafc;
-  }
-  .theme-dark .example-code {
-    border-color: #243049;
-    border-top: none;
-  }
-}
-@media not print {
-  @media (prefers-color-scheme: dark) {
-    .theme-dark-auto .example {
-      background-color: #1a2234;
-      border-color: #243049;
-    }
-    .theme-dark-auto .example-content {
-      color: #f8fafc;
-    }
-    .theme-dark-auto .example-code {
-      border-color: #243049;
-      border-top: none;
-    }
-  }
-}
 .card-sponsor {
-  background: #dbe7f6 no-repeat center/100% 100%;
-  border-color: #548ed2;
+  background: var(--tblr-primary-lt) no-repeat center/100% 100%;
+  border-color: var(--tblr-primary);
   min-height: 316px;
 }
 
-body.no-transitions * {
-  transition: none !important;
-}
-
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
@@ -285,17 +260,17 @@ body.no-transitions * {
   box-shadow: rgba(var(--tblr-body-color-rgb), 0.04) 0 2px 4px 0;
 }
 .settings-scheme-light {
-  background: linear-gradient(-135deg, #ffffff 50%, #f8fafc 50%);
+  background: linear-gradient(-135deg, #ffffff 50%, #fcfdfe 50%);
 }
 .settings-scheme-mixed {
-  background-image: linear-gradient(-135deg, #1d273b 50%, #fff 50%);
+  background-image: linear-gradient(-135deg, #182433 50%, #fff 50%);
 }
 .settings-scheme-transparent {
-  background: #f8fafc;
+  background: #fcfdfe;
 }
 .settings-scheme-dark {
-  background: #1d273b;
+  background: #182433;
 }
 .settings-scheme-colored {
-  background-image: linear-gradient(-135deg, var(--tblr-primary) 50%, #f8fafc 50%);
+  background-image: linear-gradient(-135deg, var(--tblr-primary) 50%, #fcfdfe 50%);
 }

demo/dist/css/demo.rtl.min.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
-.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;border-radius:var(--tblr-border-radius)}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:.5rem;height:.5rem;-webkit-transition:background .3s;transition:background .3s}@media (prefers-reduced-motion:reduce){.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{-webkit-transition:none;transition:none}}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(var(--tblr-light-rgb),.16)}.highlight pre::-webkit-scrollbar-track,pre.highlight::-webkit-scrollbar-track{background:rgba(var(--tblr-light-rgb),.06)}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:rgba(var(--tblr-light-rgb),.32)}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight{margin:0}.highlight code>*{margin:0!important;padding:0!important}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .nc,.highlight .nt,.highlight .nx{color:#ff8383}.highlight .na,.highlight .p{color:#ffe484}.highlight .dl,.highlight .s,.highlight .s2{color:#b5f4a5}.highlight .k{color:#93ddfd}.highlight .mi,.highlight .s1{color:#d9a9ff}.example{padding:2rem;margin:1rem 0 2rem;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;line-height:1.4285714286;color:#1d273b;flex:1;max-width:100%}.example-content .page-header{margin-bottom:0}.example-bg{background:#f1f5f9}.example-code{margin:2rem 0;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-top:none}.example-code pre{margin:0;border:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:26rem}.example-column-2{max-width:52rem}.example-modal-backdrop{background:#1d273b;opacity:.24;position:absolute;width:100%;right:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example{background-color:#1a2234;border-color:#243049}.theme-dark .example-content{color:#f8fafc}.theme-dark .example-code{border-color:#243049;border-top:none}}@media not print{@media (prefers-color-scheme:dark){.theme-dark-auto .example{background-color:#1a2234;border-color:#243049}.theme-dark-auto .example-content{color:#f8fafc}.theme-dark-auto .example-code{border-color:#243049;border-top:none}}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem!important}.demo-icon-preview{position:-webkit-sticky;position:sticky;top:0}.demo-icon-preview i,.demo-icon-preview svg{width:15rem;height:15rem;font-size:15rem;stroke-width:1.5;margin:0 auto;display:block}@media (max-width:575.98px){.demo-icon-preview i,.demo-icon-preview svg{width:10rem;height:10rem;font-size:10rem}}.demo-icon-preview-icon pre{margin:0;-webkit-user-select:all;-moz-user-select:all;user-select:all}.demo-dividers>p{opacity:.2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.demo-icons-list{display:flex;flex-wrap:wrap;padding:0;margin:0 0 -1px -2px;list-style:none}.demo-icons-list>*{flex:1 0 4rem}.demo-icons-list-wrap{overflow:hidden}.demo-icons-list-item{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;text-align:center;padding:.5rem;border-left:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-bottom:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);color:inherit;cursor:pointer}.demo-icons-list-item .icon{width:1.5rem;height:1.5rem;font-size:1.5rem}.demo-icons-list-item:hover{text-decoration:none}.settings-btn{position:fixed;left:-1px;top:10rem;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0}.settings-scheme{display:inline-block;border-radius:50%;height:3rem;width:3rem;position:relative;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);box-shadow:rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0}.settings-scheme-light{background:linear-gradient(-135deg,#fff 50%,#f8fafc 50%)}.settings-scheme-mixed{background-image:linear-gradient(-135deg,#1d273b 50%,#fff 50%)}.settings-scheme-transparent{background:#f8fafc}.settings-scheme-dark{background:#1d273b}.settings-scheme-colored{background-image:linear-gradient(-135deg,var(--tblr-primary) 50%,#f8fafc 50%)}
+.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;border-radius:var(--tblr-border-radius)}.highlight pre,pre.highlight{scrollbar-color:rgba(var(--tblr-scrollbar-color,var(--tblr-body-color-rgb)),.16) transparent}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:1rem;height:1rem;-webkit-transition:background .3s;transition:background .3s}@media (prefers-reduced-motion:reduce){.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{-webkit-transition:none;transition:none}}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:1rem;border:5px solid transparent;box-shadow:inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color,var(--tblr-body-color-rgb)),.16)}.highlight pre::-webkit-scrollbar-track,pre.highlight::-webkit-scrollbar-track{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{box-shadow:inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color,var(--tblr-body-color-rgb)),.32)}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight{margin:0}.highlight code>*{margin:0!important;padding:0!important}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .nc,.highlight .nt,.highlight .nx{color:#ff8383}.highlight .na,.highlight .p{color:#ffe484}.highlight .dl,.highlight .s,.highlight .s2{color:#b5f4a5}.highlight .k{color:#93ddfd}.highlight .mi,.highlight .s1{color:#d9a9ff}.example{padding:2rem;margin:1rem 0 2rem;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;line-height:1.4285714286;color:var(--tblr-body-color);flex:1;max-width:100%}.example-content .page-header{margin-bottom:0}.example-bg{background:#f6f8fb}.example-code{margin:2rem 0;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-top:none}.example-code pre{margin:0;border:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:26rem}.example-column-2{max-width:52rem}.example-modal-backdrop{background:#182433;opacity:.24;position:absolute;width:100%;right:0;top:0;height:100%;border-radius:2px 2px 0 0}.card-sponsor{background:var(--tblr-primary-lt) no-repeat center/100% 100%;border-color:var(--tblr-primary);min-height:316px}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem!important}.demo-icon-preview{position:-webkit-sticky;position:sticky;top:0}.demo-icon-preview i,.demo-icon-preview svg{width:15rem;height:15rem;font-size:15rem;stroke-width:1.5;margin:0 auto;display:block}@media (max-width:575.98px){.demo-icon-preview i,.demo-icon-preview svg{width:10rem;height:10rem;font-size:10rem}}.demo-icon-preview-icon pre{margin:0;-webkit-user-select:all;-moz-user-select:all;user-select:all}.demo-dividers>p{opacity:.2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.demo-icons-list{display:flex;flex-wrap:wrap;padding:0;margin:0 0 -1px -2px;list-style:none}.demo-icons-list>*{flex:1 0 4rem}.demo-icons-list-wrap{overflow:hidden}.demo-icons-list-item{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;text-align:center;padding:.5rem;border-left:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);border-bottom:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);color:inherit;cursor:pointer}.demo-icons-list-item .icon{width:1.5rem;height:1.5rem;font-size:1.5rem}.demo-icons-list-item:hover{text-decoration:none}.settings-btn{position:fixed;left:-1px;top:10rem;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0}.settings-scheme{display:inline-block;border-radius:50%;height:3rem;width:3rem;position:relative;border:var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);box-shadow:rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0}.settings-scheme-light{background:linear-gradient(-135deg,#fff 50%,#fcfdfe 50%)}.settings-scheme-mixed{background-image:linear-gradient(-135deg,#182433 50%,#fff 50%)}.settings-scheme-transparent{background:#fcfdfe}.settings-scheme-dark{background:#182433}.settings-scheme-colored{background-image:linear-gradient(-135deg,var(--tblr-primary) 50%,#fcfdfe 50%)}

demo/dist/css/tabler-flags.css

@@ -1,34 +1,42 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/* prettier-ignore */
+/* prettier-ignore */
 .flag {
   position: relative;
   display: inline-block;
-  width: 1.33333em;
-  height: 1em;
-  vertical-align: -3px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  border: var(--tblr-border-size) var(--tblr-border-style) var(--tblr-border-color);
+  height: 2.5rem;
+  aspect-ratio: 1.33333;
+  background: no-repeat center/cover;
+  box-shadow: var(--tblr-box-shadow-border);
   border-radius: var(--tblr-border-radius);
+  vertical-align: bottom;
+}
+.flag.flag-country-np {
+  box-shadow: none;
+  border-radius: 0;
 }
 
 .flag-country-ad {
   background-image: url("../img/flags/ad.svg");
 }
 
+.flag-country-af {
+  background-image: url("../img/flags/af.svg");
+}
+
 .flag-country-ae {
   background-image: url("../img/flags/ae.svg");
 }
 
-.flag-country-af {
-  background-image: url("../img/flags/af.svg");
+.flag-country-afrun {
+  background-image: url("../img/flags/afrun.svg");
 }
 
 .flag-country-ag {
@@ -47,6 +55,10 @@
   background-image: url("../img/flags/am.svg");
 }
 
+.flag-country-ams {
+  background-image: url("../img/flags/ams.svg");
+}
+
 .flag-country-ao {
   background-image: url("../img/flags/ao.svg");
 }
@@ -135,8 +147,16 @@
   background-image: url("../img/flags/bo.svg");
 }
 
-.flag-country-bq {
-  background-image: url("../img/flags/bq.svg");
+.flag-country-bq-bo {
+  background-image: url("../img/flags/bq-bo.svg");
+}
+
+.flag-country-bq-sa {
+  background-image: url("../img/flags/bq-sa.svg");
+}
+
+.flag-country-bq-se {
+  background-image: url("../img/flags/bq-se.svg");
 }
 
 .flag-country-br {
@@ -263,10 +283,6 @@
   background-image: url("../img/flags/do.svg");
 }
 
-.flag-country-dz {
-  background-image: url("../img/flags/dz.svg");
-}
-
 .flag-country-ec {
   background-image: url("../img/flags/ec.svg");
 }
@@ -295,6 +311,10 @@
   background-image: url("../img/flags/et.svg");
 }
 
+.flag-country-eu {
+  background-image: url("../img/flags/eu.svg");
+}
+
 .flag-country-fi {
   background-image: url("../img/flags/fi.svg");
 }
@@ -323,10 +343,26 @@
   background-image: url("../img/flags/ga.svg");
 }
 
+.flag-country-gb-eng {
+  background-image: url("../img/flags/gb-eng.svg");
+}
+
+.flag-country-gb-sct {
+  background-image: url("../img/flags/gb-sct.svg");
+}
+
 .flag-country-gb {
   background-image: url("../img/flags/gb.svg");
 }
 
+.flag-country-gb-wls {
+  background-image: url("../img/flags/gb-wls.svg");
+}
+
+.flag-country-gb-nir {
+  background-image: url("../img/flags/gb-nir.svg");
+}
+
 .flag-country-gd {
   background-image: url("../img/flags/gd.svg");
 }
@@ -495,8 +531,8 @@
   background-image: url("../img/flags/km.svg");
 }
 
-.flag-country-kn {
-  background-image: url("../img/flags/kn.svg");
+.flag-country-kn-sk {
+  background-image: url("../img/flags/kn-sk.svg");
 }
 
 .flag-country-kp {
@@ -767,6 +803,10 @@
   background-image: url("../img/flags/qa.svg");
 }
 
+.flag-country-rainbow {
+  background-image: url("../img/flags/rainbow.svg");
+}
+
 .flag-country-re {
   background-image: url("../img/flags/re.svg");
 }
@@ -947,6 +987,10 @@
   background-image: url("../img/flags/um.svg");
 }
 
+.flag-country-unasur {
+  background-image: url("../img/flags/unasur.svg");
+}
+
 .flag-country-us {
   background-image: url("../img/flags/us.svg");
 }
@@ -999,10 +1043,6 @@
   background-image: url("../img/flags/ye.svg");
 }
 
-.flag-country-yt {
-  background-image: url("../img/flags/yt.svg");
-}
-
 .flag-country-za {
   background-image: url("../img/flags/za.svg");
 }
@@ -1015,60 +1055,30 @@
   background-image: url("../img/flags/zw.svg");
 }
 
-.flag-country-es-ct {
-  background-image: url("../img/flags/es-ct.svg");
-}
-
-.flag-country-eu {
-  background-image: url("../img/flags/eu.svg");
-}
-
-.flag-country-gb-eng {
-  background-image: url("../img/flags/gb-eng.svg");
-}
-
-.flag-country-gb-nir {
-  background-image: url("../img/flags/gb-nir.svg");
-}
-
-.flag-country-gb-sct {
-  background-image: url("../img/flags/gb-sct.svg");
-}
-
-.flag-country-gb-wls {
-  background-image: url("../img/flags/gb-wls.svg");
-}
-
-.flag-country-un {
-  background-image: url("../img/flags/un.svg");
+.flag-xxs {
+  height: 1rem;
 }
 
 .flag-xs {
-  width: 1.5rem;
-  height: 1.125rem;
+  height: 1.25rem;
 }
 
 .flag-sm {
-  width: 2rem;
-  height: 1.5rem;
+  height: 2rem;
 }
 
 .flag-md {
-  width: 4rem;
-  height: 3rem;
+  height: 2.5rem;
 }
 
 .flag-lg {
-  width: 5rem;
-  height: 3.75rem;
+  height: 3rem;
 }
 
 .flag-xl {
-  width: 7rem;
-  height: 5.25rem;
+  height: 5rem;
 }
 
 .flag-2xl {
-  width: 11rem;
-  height: 8.25rem;
+  height: 7rem;
 }

demo/dist/css/tabler-flags.rtl.css

@@ -1,34 +1,42 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/* prettier-ignore */
+/* prettier-ignore */
 .flag {
   position: relative;
   display: inline-block;
-  width: 1.33333em;
-  height: 1em;
-  vertical-align: -3px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  border: var(--tblr-border-size) var(--tblr-border-style) var(--tblr-border-color);
+  height: 2.5rem;
+  aspect-ratio: 1.33333;
+  background: no-repeat center/cover;
+  box-shadow: var(--tblr-box-shadow-border);
   border-radius: var(--tblr-border-radius);
+  vertical-align: bottom;
+}
+.flag.flag-country-np {
+  box-shadow: none;
+  border-radius: 0;
 }
 
 .flag-country-ad {
   background-image: url("../img/flags/ad.svg");
 }
 
+.flag-country-af {
+  background-image: url("../img/flags/af.svg");
+}
+
 .flag-country-ae {
   background-image: url("../img/flags/ae.svg");
 }
 
-.flag-country-af {
-  background-image: url("../img/flags/af.svg");
+.flag-country-afrun {
+  background-image: url("../img/flags/afrun.svg");
 }
 
 .flag-country-ag {
@@ -47,6 +55,10 @@
   background-image: url("../img/flags/am.svg");
 }
 
+.flag-country-ams {
+  background-image: url("../img/flags/ams.svg");
+}
+
 .flag-country-ao {
   background-image: url("../img/flags/ao.svg");
 }
@@ -135,8 +147,16 @@
   background-image: url("../img/flags/bo.svg");
 }
 
-.flag-country-bq {
-  background-image: url("../img/flags/bq.svg");
+.flag-country-bq-bo {
+  background-image: url("../img/flags/bq-bo.svg");
+}
+
+.flag-country-bq-sa {
+  background-image: url("../img/flags/bq-sa.svg");
+}
+
+.flag-country-bq-se {
+  background-image: url("../img/flags/bq-se.svg");
 }
 
 .flag-country-br {
@@ -263,10 +283,6 @@
   background-image: url("../img/flags/do.svg");
 }
 
-.flag-country-dz {
-  background-image: url("../img/flags/dz.svg");
-}
-
 .flag-country-ec {
   background-image: url("../img/flags/ec.svg");
 }
@@ -295,6 +311,10 @@
   background-image: url("../img/flags/et.svg");
 }
 
+.flag-country-eu {
+  background-image: url("../img/flags/eu.svg");
+}
+
 .flag-country-fi {
   background-image: url("../img/flags/fi.svg");
 }
@@ -323,10 +343,26 @@
   background-image: url("../img/flags/ga.svg");
 }
 
+.flag-country-gb-eng {
+  background-image: url("../img/flags/gb-eng.svg");
+}
+
+.flag-country-gb-sct {
+  background-image: url("../img/flags/gb-sct.svg");
+}
+
 .flag-country-gb {
   background-image: url("../img/flags/gb.svg");
 }
 
+.flag-country-gb-wls {
+  background-image: url("../img/flags/gb-wls.svg");
+}
+
+.flag-country-gb-nir {
+  background-image: url("../img/flags/gb-nir.svg");
+}
+
 .flag-country-gd {
   background-image: url("../img/flags/gd.svg");
 }
@@ -495,8 +531,8 @@
   background-image: url("../img/flags/km.svg");
 }
 
-.flag-country-kn {
-  background-image: url("../img/flags/kn.svg");
+.flag-country-kn-sk {
+  background-image: url("../img/flags/kn-sk.svg");
 }
 
 .flag-country-kp {
@@ -767,6 +803,10 @@
   background-image: url("../img/flags/qa.svg");
 }
 
+.flag-country-rainbow {
+  background-image: url("../img/flags/rainbow.svg");
+}
+
 .flag-country-re {
   background-image: url("../img/flags/re.svg");
 }
@@ -947,6 +987,10 @@
   background-image: url("../img/flags/um.svg");
 }
 
+.flag-country-unasur {
+  background-image: url("../img/flags/unasur.svg");
+}
+
 .flag-country-us {
   background-image: url("../img/flags/us.svg");
 }
@@ -999,10 +1043,6 @@
   background-image: url("../img/flags/ye.svg");
 }
 
-.flag-country-yt {
-  background-image: url("../img/flags/yt.svg");
-}
-
 .flag-country-za {
   background-image: url("../img/flags/za.svg");
 }
@@ -1015,60 +1055,30 @@
   background-image: url("../img/flags/zw.svg");
 }
 
-.flag-country-es-ct {
-  background-image: url("../img/flags/es-ct.svg");
-}
-
-.flag-country-eu {
-  background-image: url("../img/flags/eu.svg");
-}
-
-.flag-country-gb-eng {
-  background-image: url("../img/flags/gb-eng.svg");
-}
-
-.flag-country-gb-nir {
-  background-image: url("../img/flags/gb-nir.svg");
-}
-
-.flag-country-gb-sct {
-  background-image: url("../img/flags/gb-sct.svg");
-}
-
-.flag-country-gb-wls {
-  background-image: url("../img/flags/gb-wls.svg");
-}
-
-.flag-country-un {
-  background-image: url("../img/flags/un.svg");
+.flag-xxs {
+  height: 1rem;
 }
 
 .flag-xs {
-  width: 1.5rem;
-  height: 1.125rem;
+  height: 1.25rem;
 }
 
 .flag-sm {
-  width: 2rem;
-  height: 1.5rem;
+  height: 2rem;
 }
 
 .flag-md {
-  width: 4rem;
-  height: 3rem;
+  height: 2.5rem;
 }
 
 .flag-lg {
-  width: 5rem;
-  height: 3.75rem;
+  height: 3rem;
 }
 
 .flag-xl {
-  width: 7rem;
-  height: 5.25rem;
+  height: 5rem;
 }
 
 .flag-2xl {
-  width: 11rem;
-  height: 8.25rem;
+  height: 7rem;
 }

demo/dist/css/tabler-payments.css

@@ -1,14 +1,16 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/* prettier-ignore */
+/* prettier-ignore */
 .payment {
-  width: 3.33332rem;
-  height: 2rem;
+  height: 2.5rem;
+  aspect-ratio: 1.66666;
   display: inline-block;
   background: no-repeat center/100% 100%;
   vertical-align: bottom;
@@ -161,6 +163,14 @@
   background-image: url("../img/payments/ebay-dark.svg");
 }
 
+.payment-provider-epayco {
+  background-image: url("../img/payments/epayco.svg");
+}
+
+.payment-provider-epayco-dark {
+  background-image: url("../img/payments/epayco-dark.svg");
+}
+
 .payment-provider-eway {
   background-image: url("../img/payments/eway.svg");
 }
@@ -489,32 +499,30 @@
   background-image: url("../img/payments/worldpay-dark.svg");
 }
 
+.payment-xxs {
+  height: 1rem;
+}
+
 .payment-xs {
-  width: 2.49999rem;
-  height: 1.5rem;
+  height: 1.25rem;
 }
 
 .payment-sm {
-  width: 3.33332rem;
   height: 2rem;
 }
 
 .payment-md {
-  width: 6.66664rem;
-  height: 4rem;
+  height: 2.5rem;
 }
 
 .payment-lg {
-  width: 8.3333rem;
-  height: 5rem;
+  height: 3rem;
 }
 
 .payment-xl {
-  width: 11.66662rem;
-  height: 7rem;
+  height: 5rem;
 }
 
 .payment-2xl {
-  width: 18.33326rem;
-  height: 11rem;
+  height: 7rem;
 }

demo/dist/css/tabler-payments.rtl.css

@@ -1,14 +1,16 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/* prettier-ignore */
+/* prettier-ignore */
 .payment {
-  width: 3.33332rem;
-  height: 2rem;
+  height: 2.5rem;
+  aspect-ratio: 1.66666;
   display: inline-block;
   background: no-repeat center/100% 100%;
   vertical-align: bottom;
@@ -161,6 +163,14 @@
   background-image: url("../img/payments/ebay-dark.svg");
 }
 
+.payment-provider-epayco {
+  background-image: url("../img/payments/epayco.svg");
+}
+
+.payment-provider-epayco-dark {
+  background-image: url("../img/payments/epayco-dark.svg");
+}
+
 .payment-provider-eway {
   background-image: url("../img/payments/eway.svg");
 }
@@ -489,32 +499,30 @@
   background-image: url("../img/payments/worldpay-dark.svg");
 }
 
+.payment-xxs {
+  height: 1rem;
+}
+
 .payment-xs {
-  width: 2.49999rem;
-  height: 1.5rem;
+  height: 1.25rem;
 }
 
 .payment-sm {
-  width: 3.33332rem;
   height: 2rem;
 }
 
 .payment-md {
-  width: 6.66664rem;
-  height: 4rem;
+  height: 2.5rem;
 }
 
 .payment-lg {
-  width: 8.3333rem;
-  height: 5rem;
+  height: 3rem;
 }
 
 .payment-xl {
-  width: 11.66662rem;
-  height: 7rem;
+  height: 5rem;
 }
 
 .payment-2xl {
-  width: 18.33326rem;
-  height: 11rem;
+  height: 7rem;
 }

demo/dist/css/tabler-social.css

@@ -0,0 +1,10 @@
+/*!
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+/* prettier-ignore */
+/* prettier-ignore */

demo/dist/css/tabler-social.min.css

@@ -0,0 +1,8 @@
+/*!
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/

demo/dist/css/tabler-social.rtl.css

@@ -0,0 +1,10 @@
+/*!
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+/* prettier-ignore */
+/* prettier-ignore */

demo/dist/css/tabler-social.rtl.min.css

@@ -0,0 +1,8 @@
+/*!
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/

demo/dist/css/tabler-vendors.css

@@ -1,11 +1,13 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/* prettier-ignore */
+/* prettier-ignore */
 /* Functional styling;
  * These styles are required for noUiSlider to function.
  * You don't need to change these rules to apply your design.
@@ -390,7 +392,7 @@
   margin: 1px 1px 0 0;
 }
 .noUi-handle.noUi-active, .noUi-handle:focus {
-  box-shadow: 0 0 0 1px #f1f5f9, 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
+  box-shadow: 0 0 0 1px #f6f8fb, 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
 }
 
 .noUi-connect {
@@ -398,9 +400,9 @@
 }
 
 .litepicker {
-  --litepicker-month-weekday-color: var(--tblr-muted);
-  --litepicker-button-prev-month-color: var(--tblr-muted);
-  --litepicker-button-next-month-color: var(--tblr-muted);
+  --litepicker-month-weekday-color: var(--tblr-secondary);
+  --litepicker-button-prev-month-color: var(--tblr-secondary);
+  --litepicker-button-next-month-color: var(--tblr-secondary);
   --litepicker-button-prev-month-color-hover: var(--tblr-primary);
   --litepicker-button-next-month-color-hover: var(--tblr-primary);
   --litepicker-day-color: var(--tblr-body-color);
@@ -445,6 +447,9 @@
     transition: none;
   }
 }
+.datepicker-inline .litepicker {
+  box-shadow: var(--tblr-box-shadow-input);
+}
 .datepicker-inline .litepicker .container__months {
   box-shadow: none;
   background-color: var(--tblr-bg-forms);
@@ -532,7 +537,7 @@
   position: absolute;
   right: 0.75rem;
   top: 50%;
-  color: #1d273b;
+  color: #182433;
   opacity: 0.4;
   margin-top: -12px;
   line-height: 20px;
@@ -545,21 +550,21 @@
 .plugin-dropdown_input.focus.dropdown-active .ts-control {
   box-shadow: none;
   border: 1px solid var(--tblr-border-color);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: var(--tblr-box-shadow-input);
 }
 .plugin-dropdown_input .dropdown-input {
   border: 1px solid #d0d0d0;
   border-width: 0 0 1px 0;
   display: block;
-  padding: 0.4375rem 0.75rem;
+  padding: 0.5625rem 0.75rem;
   box-shadow: none;
   width: 100%;
   background: transparent;
 }
 .plugin-dropdown_input.focus .ts-dropdown .dropdown-input {
-  border-color: #90b5e2;
+  border-color: #80aad3;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
+  box-shadow: var(--tblr-box-shadow-input), 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
 }
 .plugin-dropdown_input .items-placeholder {
   border: 0 none !important;
@@ -580,9 +585,6 @@
 .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-webkit-input-placeholder {
   color: transparent;
 }
-.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-moz-placeholder {
-  color: transparent;
-}
 .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input:-ms-input-placeholder {
   color: transparent;
 }
@@ -641,7 +643,7 @@
 }
 
 .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
-  border-left: 1px solid #e6e7e9;
+  border-left: 1px solid #dadfe5;
   margin-left: 5px;
 }
 .ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
@@ -652,7 +654,7 @@
 }
 
 .ts-wrapper.plugin-remove_button.rtl .item .remove {
-  border-right: 1px solid #e6e7e9;
+  border-right: 1px solid #dadfe5;
   margin-right: 5px;
 }
 .ts-wrapper.plugin-remove_button.rtl .item.active .remove {
@@ -669,7 +671,7 @@
 .ts-dropdown,
 .ts-control,
 .ts-control input {
-  color: #1d273b;
+  color: #182433;
   font-family: inherit;
   font-size: inherit;
   line-height: 1.4285714286;
@@ -684,7 +686,7 @@
 
 .ts-control {
   border: 1px solid var(--tblr-border-color);
-  padding: 0.4375rem 0.75rem;
+  padding: 0.5625rem 0.75rem;
   width: 100%;
   overflow: hidden;
   position: relative;
@@ -696,7 +698,7 @@
   flex-wrap: wrap;
 }
 .ts-wrapper.multi.has-items .ts-control {
-  padding: calc( 0.4375rem - 1px - 0px) 0.75rem calc( 0.4375rem - 1px - 3px - 0px);
+  padding: calc( 0.5625rem - 1px - 0px) 0.75rem calc( 0.5625rem - 1px - 3px - 0px);
 }
 .full .ts-control {
   background-color: var(--tblr-bg-forms);
@@ -716,16 +718,16 @@
   margin: 0 3px 3px 0;
   padding: 1px 5px;
   background: #efefef;
-  color: #1d273b;
-  border: 0px solid #e6e7e9;
+  color: #182433;
+  border: 0px solid #dadfe5;
 }
 .ts-wrapper.multi .ts-control > div.active {
-  background: #206bc4;
+  background: #0054a6;
   color: #fff;
   border: 0px solid rgba(0, 0, 0, 0);
 }
 .ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
-  color: #797979;
+  color: #727272;
   background: white;
   border: 0px solid white;
 }
@@ -769,7 +771,7 @@
 }
 .disabled .ts-control {
   opacity: 0.5;
-  background-color: var(--tblr-gray-100);
+  background-color: var(--tblr-bg-surface-secondary);
 }
 .input-hidden .ts-control > input {
   opacity: 0;
@@ -784,7 +786,7 @@
   width: 100%;
   z-index: 10;
   border: 1px solid #d0d0d0;
-  background: #ffffff;
+  background: #fff;
   margin: 0.25rem 0 0 0;
   border-top: 0 none;
   box-sizing: border-box;
@@ -817,19 +819,19 @@
   border-top: 0 none;
 }
 .ts-dropdown .optgroup-header {
-  color: #49566c;
-  background: #ffffff;
+  color: #667382;
+  background: var(--tblr-bg-surface);
   cursor: default;
 }
 .ts-dropdown .active {
-  background-color: rgba(var(--tblr-muted-rgb), 0.04);
+  background-color: rgba(var(--tblr-text-secondary-rgb), 0.04);
   color: inherit;
 }
 .ts-dropdown .active.create {
   color: inherit;
 }
 .ts-dropdown .create {
-  color: rgba(29, 39, 59, 0.5);
+  color: rgba(24, 36, 51, 0.5);
 }
 .ts-dropdown .spinner {
   display: inline-block;
@@ -891,7 +893,7 @@
   height: auto;
   padding: 0;
   z-index: 1000;
-  background: #ffffff;
+  background: #fff;
   border: 1px solid var(--tblr-border-color-translucent);
   border-radius: 4px;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -908,7 +910,7 @@
   content: " ";
   display: block;
   height: 0;
-  margin: 0.5rem 0;
+  margin: var(--tblr-spacer) 0;
   overflow: hidden;
   border-top: 1px solid var(--tblr-border-color-translucent);
   margin-left: -0.75rem;
@@ -923,6 +925,7 @@
 }
 
 .ts-control {
+  box-shadow: var(--tblr-box-shadow-input);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   display: flex;
   align-items: center;
@@ -936,9 +939,9 @@
   border-radius: var(--tblr-border-radius);
 }
 .focus .ts-control {
-  border-color: #90b5e2;
+  border-color: #80aad3;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
+  box-shadow: var(--tblr-box-shadow-input), 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
 }
 .ts-control .item {
   display: flex;
@@ -948,68 +951,68 @@
 .ts-wrapper.is-invalid,
 .was-validated .invalid,
 .was-validated :invalid + .ts-wrapper {
-  border-color: #d63939;
+  border-color: var(--tblr-form-invalid-color);
 }
 .ts-wrapper.is-invalid:not(.single),
 .was-validated .invalid:not(.single),
 .was-validated :invalid + .ts-wrapper:not(.single) {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
-  background-position: right calc(0.3571428572em + 0.21875rem) center;
-  background-size: calc(0.7142857143em + 0.4375rem) calc(0.7142857143em + 0.4375rem);
+  background-position: right calc(0.3571428572em + 0.28125rem) center;
+  background-size: calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
   background-repeat: no-repeat;
 }
 .ts-wrapper.is-invalid.single,
 .was-validated .invalid.single,
 .was-validated :invalid + .ts-wrapper.single {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5a9b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23929dab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
   background-position: right 0.75rem center, center right 2.25rem;
-  background-size: 16px 12px, calc(0.7142857143em + 0.4375rem) calc(0.7142857143em + 0.4375rem);
+  background-size: 16px 12px, calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
   background-repeat: no-repeat;
 }
 .ts-wrapper.is-invalid.focus .ts-control,
 .was-validated .invalid.focus .ts-control,
 .was-validated :invalid + .ts-wrapper.focus .ts-control {
-  border-color: #d63939;
-  box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25);
+  border-color: var(--tblr-form-invalid-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-form-invalid-color), 0.25);
 }
 
 .ts-wrapper.is-valid,
 .was-validated .valid,
 .was-validated :valid + .ts-wrapper {
-  border-color: #2fb344;
+  border-color: var(--tblr-form-valid-color);
 }
 .ts-wrapper.is-valid:not(.single),
 .was-validated .valid:not(.single),
 .was-validated :valid + .ts-wrapper:not(.single) {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232fb344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
-  background-position: right calc(0.3571428572em + 0.21875rem) center;
-  background-size: calc(0.7142857143em + 0.4375rem) calc(0.7142857143em + 0.4375rem);
+  background-position: right calc(0.3571428572em + 0.28125rem) center;
+  background-size: calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
   background-repeat: no-repeat;
 }
 .ts-wrapper.is-valid.single,
 .was-validated .valid.single,
 .was-validated :valid + .ts-wrapper.single {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5a9b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232fb344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23929dab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232fb344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
   background-position: right 0.75rem center, center right 2.25rem;
-  background-size: 16px 12px, calc(0.7142857143em + 0.4375rem) calc(0.7142857143em + 0.4375rem);
+  background-size: 16px 12px, calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
   background-repeat: no-repeat;
 }
 .ts-wrapper.is-valid.focus .ts-control,
 .was-validated .valid.focus .ts-control,
 .was-validated :valid + .ts-wrapper.focus .ts-control {
-  border-color: #2fb344;
-  box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25);
+  border-color: var(--tblr-form-valid-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-form-valid-color), 0.25);
 }
 
 .ts-wrapper {
-  min-height: calc(1.4285714286em + 0.875rem + calc(var(--tblr-border-width) * 2));
+  min-height: calc(1.4285714286em + 1.125rem + calc(var(--tblr-border-width) * 2));
   display: flex;
 }
 .input-group-sm > .ts-wrapper, .ts-wrapper.form-select-sm, .ts-wrapper.form-control-sm {
   min-height: calc(1.4285714286em + 0.25rem + calc(var(--tblr-border-width) * 2));
 }
 .input-group-sm > .ts-wrapper .ts-control, .ts-wrapper.form-select-sm .ts-control, .ts-wrapper.form-control-sm .ts-control {
-  border-radius: 2px;
+  border-radius: var(--tblr-border-radius-sm);
   font-size: 0.75rem;
 }
 .input-group-sm > .ts-wrapper.has-items .ts-control, .ts-wrapper.form-select-sm.has-items .ts-control, .ts-wrapper.form-control-sm.has-items .ts-control {
@@ -1030,7 +1033,7 @@
   min-height: calc(1.4285714286em + 1rem + calc(var(--tblr-border-width) * 2));
 }
 .input-group-lg > .ts-wrapper .ts-control, .ts-wrapper.form-control-lg .ts-control, .ts-wrapper.form-select-lg .ts-control {
-  border-radius: 8px;
+  border-radius: var(--tblr-border-radius-lg);
   font-size: 1.25rem;
 }
 
@@ -1042,7 +1045,7 @@
   background: none;
 }
 .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5a9b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23929dab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 16px 12px;
@@ -1074,6 +1077,11 @@
   border-bottom-right-radius: 0;
 }
 
+:root {
+  --ts-pr-clear-button: 0rem;
+  --ts-pr-caret: 0rem;
+}
+
 .ts-input {
   color: inherit;
 }
@@ -1086,6 +1094,50 @@
   height: auto;
 }
 
+.ts-wrapper .form-control,
+.ts-wrapper .form-select, .ts-wrapper.form-control, .ts-wrapper.form-select {
+  box-shadow: var(--tblr-box-shadow-input);
+}
+.ts-wrapper.is-invalid .ts-control, .ts-wrapper.is-valid .ts-control {
+  --ts-pr-clear-button: 1.5rem;
+}
+
+.ts-dropdown {
+  background: var(--tblr-bg-surface);
+  color: var(--tblr-body-color);
+  box-shadow: var(--tblr-box-shadow-dropdown);
+}
+.ts-dropdown .option {
+  padding: 0.5rem 0.75rem;
+}
+
+.ts-control,
+.ts-control input {
+  color: var(--tblr-body-color);
+}
+
+.ts-control input::-webkit-input-placeholder {
+  color: #929dab;
+}
+
+.ts-control input:-ms-input-placeholder {
+  color: #929dab;
+}
+
+.ts-control input::-ms-input-placeholder {
+  color: #929dab;
+}
+
+.ts-control input::placeholder {
+  color: #929dab;
+}
+
+.ts-wrapper.multi .ts-control > div {
+  background: var(--tblr-bg-surface-secondary);
+  border: 1px solid var(--tblr-border-color);
+  color: var(--tblr-body-color);
+}
+
 .apexcharts-tooltip {
   color: var(--tblr-light) !important;
   background: var(--tblr-bg-surface-dark) !important;
@@ -1115,6 +1167,22 @@
   height: 10px !important;
 }
 
+.apexcharts-text {
+  fill: var(--tblr-body-color) !important;
+}
+
+.apexcharts-gridline {
+  stroke: var(--tblr-border-color) !important;
+}
+
+.apexcharts-legend-text {
+  color: inherit !important;
+}
+
+.apexcharts-radialbar-area {
+  stroke: var(--tblr-border-color-dark) !important;
+}
+
 svg {
   touch-action: none;
 }
@@ -1241,7 +1309,7 @@ image, text, .jvm-zoomin, .jvm-zoomout {
   }
 }
 .jvm-tooltip {
-  background: #1d273b;
+  background: #182433;
   font-family: inherit;
   font-size: 0.75rem;
   box-shadow: var(--tblr-shadow-card);
@@ -1285,12 +1353,12 @@ image, text, .jvm-zoomin, .jvm-zoomout {
 }
 
 .dropzone {
-  border: 1px dashed var(--tblr-border-color);
-  color: var(--tblr-muted);
+  border: var(--tblr-border-width) dashed var(--tblr-border-color);
+  color: var(--tblr-secondary);
   padding: 1rem;
 }
 .dropzone.dz-drag-hover {
-  border: 1px dashed var(--tblr-primary);
+  border: var(--tblr-border-width) dashed var(--tblr-primary);
   background: rgba(var(--tblr-primary-rgb), 0.01);
   color: var(--tblr-primary);
 }
@@ -1309,7 +1377,7 @@ image, text, .jvm-zoomin, .jvm-zoomout {
 
 .fslightbox-container {
   font-family: inherit !important;
-  background: rgba(29, 39, 59, 0.24) !important;
+  background: rgba(24, 36, 51, 0.24) !important;
   -webkit-backdrop-filter: blur(4px) !important;
           backdrop-filter: blur(4px) !important;
 }
@@ -1336,6 +1404,10 @@ body {
   padding: 0 0.5rem 0;
 }
 
+.tox .tox-toolbar__primary {
+  background: transparent !important;
+}
+
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   border-bottom: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color) !important;
   box-shadow: none !important;
@@ -1350,13 +1422,83 @@ body {
   border-top: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color) !important;
 }
 
-.tox .tox-toolbar,
-.tox .tox-toolbar__overflow,
-.tox .tox-toolbar__primary {
-  background: transparent !important;
-}
-
 .tox .tox-toolbar-overlord,
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   background: transparent !important;
+}
+
+:root {
+  --gl-star-size: auto;
+  --gl-star-color: var(--tblr-yellow);
+  --gl-star-color-inactive: var(--tblr-border-color);
+}
+
+[data-star-rating] svg {
+  width: var(--tblr-icon-size, --gl-star-size);
+  height: var(--tblr-icon-size, --gl-star-size);
+}
+[data-star-rating] :not(.gl-active) > .gl-star-full {
+  color: var(--gl-star-color-inactive) !important;
+}
+[data-star-rating] .gl-active > .gl-star-full {
+  color: var(--gl-star-color);
+}
+
+.clr-picker {
+  box-shadow: var(--tblr-box-shadow-dropdown);
+  background-color: var(--tblr-bg-surface);
+}
+
+input.clr-color {
+  border-radius: var(--tblr-border-radius);
+  color: var(--tblr-body-color);
+  border-color: var(--tblr-border-color);
+  background: transparent;
+}
+input.clr-color:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+  border-color: rgba(var(--tblr-primary-rgb), 0.25);
+}
+
+.clr-swatches button {
+  border-radius: var(--tblr-border-radius);
+  padding: 0 2px 4px 2px;
+}
+.clr-swatches button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+}
+
+.clr-preview {
+  border-radius: var(--tblr-border-radius);
+  overflow: visible;
+}
+.clr-preview button, .clr-preview:before, .clr-preview:after {
+  border-radius: var(--tblr-border-radius);
+}
+.clr-preview button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+}
+
+.clr-field {
+  display: block;
+}
+.clr-field button {
+  width: 1.5rem;
+  height: 1.5rem;
+  left: 6px;
+  right: auto;
+  border-radius: var(--tblr-border-radius);
+}
+.clr-field button:after {
+  box-shadow: inset 0 0 0 1px var(--tblr-border-color-translucent);
+}
+.clr-field button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+}
+.clr-field input {
+  padding-left: 2.5rem;
 }

demo/dist/css/tabler-vendors.rtl.css

@@ -1,11 +1,13 @@
 /*!
-* Tabler v1.0.0-beta16 (https://tabler.io)
-* @version 1.0.0-beta16
+* Tabler v1.0.0-beta20 (https://tabler.io)
+* @version 1.0.0-beta20
 * @link https://tabler.io
-* Copyright 2018-2022 The Tabler Authors
-* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
+/* prettier-ignore */
+/* prettier-ignore */
 /* Functional styling;
  * These styles are required for noUiSlider to function.
  * You don't need to change these rules to apply your design.
@@ -390,7 +392,7 @@
   margin: 1px 0 0 1px;
 }
 .noUi-handle.noUi-active, .noUi-handle:focus {
-  box-shadow: 0 0 0 1px #f1f5f9, 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
+  box-shadow: 0 0 0 1px #f6f8fb, 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
 }
 
 .noUi-connect {
@@ -398,9 +400,9 @@
 }
 
 .litepicker {
-  --litepicker-month-weekday-color: var(--tblr-muted);
-  --litepicker-button-prev-month-color: var(--tblr-muted);
-  --litepicker-button-next-month-color: var(--tblr-muted);
+  --litepicker-month-weekday-color: var(--tblr-secondary);
+  --litepicker-button-prev-month-color: var(--tblr-secondary);
+  --litepicker-button-next-month-color: var(--tblr-secondary);
   --litepicker-button-prev-month-color-hover: var(--tblr-primary);
   --litepicker-button-next-month-color-hover: var(--tblr-primary);
   --litepicker-day-color: var(--tblr-body-color);
@@ -445,6 +447,9 @@
     transition: none;
   }
 }
+.datepicker-inline .litepicker {
+  box-shadow: var(--tblr-box-shadow-input);
+}
 .datepicker-inline .litepicker .container__months {
   box-shadow: none;
   background-color: var(--tblr-bg-forms);
@@ -532,7 +537,7 @@
   position: absolute;
   left: 0.75rem;
   top: 50%;
-  color: #1d273b;
+  color: #182433;
   opacity: 0.4;
   margin-top: -12px;
   line-height: 20px;
@@ -545,21 +550,21 @@
 .plugin-dropdown_input.focus.dropdown-active .ts-control {
   box-shadow: none;
   border: 1px solid var(--tblr-border-color);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: var(--tblr-box-shadow-input);
 }
 .plugin-dropdown_input .dropdown-input {
   border: 1px solid #d0d0d0;
   border-width: 0 0 1px 0;
   display: block;
-  padding: 0.4375rem 0.75rem;
+  padding: 0.5625rem 0.75rem;
   box-shadow: none;
   width: 100%;
   background: transparent;
 }
 .plugin-dropdown_input.focus .ts-dropdown .dropdown-input {
-  border-color: #90b5e2;
+  border-color: #80aad3;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
+  box-shadow: var(--tblr-box-shadow-input), 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
 }
 .plugin-dropdown_input .items-placeholder {
   border: 0 none !important;
@@ -580,9 +585,6 @@
 .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-webkit-input-placeholder {
   color: transparent;
 }
-.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-moz-placeholder {
-  color: transparent;
-}
 .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input:-ms-input-placeholder {
   color: transparent;
 }
@@ -641,7 +643,7 @@
 }
 
 .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
-  border-right: 1px solid #e6e7e9;
+  border-right: 1px solid #dadfe5;
   margin-right: 5px;
 }
 .ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
@@ -652,7 +654,7 @@
 }
 
 .ts-wrapper.plugin-remove_button.rtl .item .remove {
-  border-left: 1px solid #e6e7e9;
+  border-left: 1px solid #dadfe5;
   margin-left: 5px;
 }
 .ts-wrapper.plugin-remove_button.rtl .item.active .remove {
@@ -669,7 +671,7 @@
 .ts-dropdown,
 .ts-control,
 .ts-control input {
-  color: #1d273b;
+  color: #182433;
   font-family: inherit;
   font-size: inherit;
   line-height: 1.4285714286;
@@ -684,7 +686,7 @@
 
 .ts-control {
   border: 1px solid var(--tblr-border-color);
-  padding: 0.4375rem 0.75rem;
+  padding: 0.5625rem 0.75rem;
   width: 100%;
   overflow: hidden;
   position: relative;
@@ -696,7 +698,7 @@
   flex-wrap: wrap;
 }
 .ts-wrapper.multi.has-items .ts-control {
-  padding: calc( 0.4375rem - 1px - 0px) 0.75rem calc( 0.4375rem - 1px - 3px - 0px);
+  padding: calc( 0.5625rem - 1px - 0px) 0.75rem calc( 0.5625rem - 1px - 3px - 0px);
 }
 .full .ts-control {
   background-color: var(--tblr-bg-forms);
@@ -716,16 +718,16 @@
   margin: 0 0 3px 3px;
   padding: 1px 5px;
   background: #efefef;
-  color: #1d273b;
-  border: 0px solid #e6e7e9;
+  color: #182433;
+  border: 0px solid #dadfe5;
 }
 .ts-wrapper.multi .ts-control > div.active {
-  background: #206bc4;
+  background: #0054a6;
   color: #fff;
   border: 0px solid rgba(0, 0, 0, 0);
 }
 .ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
-  color: #797979;
+  color: #727272;
   background: white;
   border: 0px solid white;
 }
@@ -769,7 +771,7 @@
 }
 .disabled .ts-control {
   opacity: 0.5;
-  background-color: var(--tblr-gray-100);
+  background-color: var(--tblr-bg-surface-secondary);
 }
 .input-hidden .ts-control > input {
   opacity: 0;
@@ -784,7 +786,7 @@
   width: 100%;
   z-index: 10;
   border: 1px solid #d0d0d0;
-  background: #ffffff;
+  background: #fff;
   margin: 0.25rem 0 0 0;
   border-top: 0 none;
   box-sizing: border-box;
@@ -817,19 +819,19 @@
   border-top: 0 none;
 }
 .ts-dropdown .optgroup-header {
-  color: #49566c;
-  background: #ffffff;
+  color: #667382;
+  background: var(--tblr-bg-surface);
   cursor: default;
 }
 .ts-dropdown .active {
-  background-color: rgba(var(--tblr-muted-rgb), 0.04);
+  background-color: rgba(var(--tblr-text-secondary-rgb), 0.04);
   color: inherit;
 }
 .ts-dropdown .active.create {
   color: inherit;
 }
 .ts-dropdown .create {
-  color: rgba(29, 39, 59, 0.5);
+  color: rgba(24, 36, 51, 0.5);
 }
 .ts-dropdown .spinner {
   display: inline-block;
@@ -891,7 +893,7 @@
   height: auto;
   padding: 0;
   z-index: 1000;
-  background: #ffffff;
+  background: #fff;
   border: 1px solid var(--tblr-border-color-translucent);
   border-radius: 4px;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -908,7 +910,7 @@
   content: " ";
   display: block;
   height: 0;
-  margin: 0.5rem 0;
+  margin: var(--tblr-spacer) 0;
   overflow: hidden;
   border-top: 1px solid var(--tblr-border-color-translucent);
   margin-right: -0.75rem;
@@ -923,6 +925,7 @@
 }
 
 .ts-control {
+  box-shadow: var(--tblr-box-shadow-input);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   display: flex;
   align-items: center;
@@ -936,9 +939,9 @@
   border-radius: var(--tblr-border-radius);
 }
 .focus .ts-control {
-  border-color: #90b5e2;
+  border-color: #80aad3;
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
+  box-shadow: var(--tblr-box-shadow-input), 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
 }
 .ts-control .item {
   display: flex;
@@ -948,68 +951,68 @@
 .ts-wrapper.is-invalid,
 .was-validated .invalid,
 .was-validated :invalid + .ts-wrapper {
-  border-color: #d63939;
+  border-color: var(--tblr-form-invalid-color);
 }
 .ts-wrapper.is-invalid:not(.single),
 .was-validated .invalid:not(.single),
 .was-validated :invalid + .ts-wrapper:not(.single) {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
-  background-position: left calc(0.3571428572em + 0.21875rem) center;
-  background-size: calc(0.7142857143em + 0.4375rem) calc(0.7142857143em + 0.4375rem);
+  background-position: left calc(0.3571428572em + 0.28125rem) center;
+  background-size: calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
   background-repeat: no-repeat;
 }
 .ts-wrapper.is-invalid.single,
 .was-validated .invalid.single,
 .was-validated :invalid + .ts-wrapper.single {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5a9b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23929dab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
   background-position: left 0.75rem center, center left 2.25rem;
-  background-size: 16px 12px, calc(0.7142857143em + 0.4375rem) calc(0.7142857143em + 0.4375rem);
+  background-size: 16px 12px, calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
   background-repeat: no-repeat;
 }
 .ts-wrapper.is-invalid.focus .ts-control,
 .was-validated .invalid.focus .ts-control,
 .was-validated :invalid + .ts-wrapper.focus .ts-control {
-  border-color: #d63939;
-  box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25);
+  border-color: var(--tblr-form-invalid-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-form-invalid-color), 0.25);
 }
 
 .ts-wrapper.is-valid,
 .was-validated .valid,
 .was-validated :valid + .ts-wrapper {
-  border-color: #2fb344;
+  border-color: var(--tblr-form-valid-color);
 }
 .ts-wrapper.is-valid:not(.single),
 .was-validated .valid:not(.single),
 .was-validated :valid + .ts-wrapper:not(.single) {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232fb344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
-  background-position: left calc(0.3571428572em + 0.21875rem) center;
-  background-size: calc(0.7142857143em + 0.4375rem) calc(0.7142857143em + 0.4375rem);
+  background-position: left calc(0.3571428572em + 0.28125rem) center;
+  background-size: calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
   background-repeat: no-repeat;
 }
 .ts-wrapper.is-valid.single,
 .was-validated .valid.single,
 .was-validated :valid + .ts-wrapper.single {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5a9b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232fb344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23929dab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232fb344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
   background-position: left 0.75rem center, center left 2.25rem;
-  background-size: 16px 12px, calc(0.7142857143em + 0.4375rem) calc(0.7142857143em + 0.4375rem);
+  background-size: 16px 12px, calc(0.7142857143em + 0.5625rem) calc(0.7142857143em + 0.5625rem);
   background-repeat: no-repeat;
 }
 .ts-wrapper.is-valid.focus .ts-control,
 .was-validated .valid.focus .ts-control,
 .was-validated :valid + .ts-wrapper.focus .ts-control {
-  border-color: #2fb344;
-  box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25);
+  border-color: var(--tblr-form-valid-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-form-valid-color), 0.25);
 }
 
 .ts-wrapper {
-  min-height: calc(1.4285714286em + 0.875rem + calc(var(--tblr-border-width) * 2));
+  min-height: calc(1.4285714286em + 1.125rem + calc(var(--tblr-border-width) * 2));
   display: flex;
 }
 .input-group-sm > .ts-wrapper, .ts-wrapper.form-select-sm, .ts-wrapper.form-control-sm {
   min-height: calc(1.4285714286em + 0.25rem + calc(var(--tblr-border-width) * 2));
 }
 .input-group-sm > .ts-wrapper .ts-control, .ts-wrapper.form-select-sm .ts-control, .ts-wrapper.form-control-sm .ts-control {
-  border-radius: 2px;
+  border-radius: var(--tblr-border-radius-sm);
   font-size: 0.75rem;
 }
 .input-group-sm > .ts-wrapper.has-items .ts-control, .ts-wrapper.form-select-sm.has-items .ts-control, .ts-wrapper.form-control-sm.has-items .ts-control {
@@ -1030,7 +1033,7 @@
   min-height: calc(1.4285714286em + 1rem + calc(var(--tblr-border-width) * 2));
 }
 .input-group-lg > .ts-wrapper .ts-control, .ts-wrapper.form-control-lg .ts-control, .ts-wrapper.form-select-lg .ts-control {
-  border-radius: 8px;
+  border-radius: var(--tblr-border-radius-lg);
   font-size: 1.25rem;
 }
 
@@ -1042,7 +1045,7 @@
   background: none;
 }
 .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5a9b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23929dab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: left 0.75rem center;
   background-size: 16px 12px;
@@ -1074,6 +1077,11 @@
   border-bottom-left-radius: 0;
 }
 
+:root {
+  --ts-pr-clear-button: 0rem;
+  --ts-pr-caret: 0rem;
+}
+
 .ts-input {
   color: inherit;
 }
@@ -1086,6 +1094,50 @@
   height: auto;
 }
 
+.ts-wrapper .form-control,
+.ts-wrapper .form-select, .ts-wrapper.form-control, .ts-wrapper.form-select {
+  box-shadow: var(--tblr-box-shadow-input);
+}
+.ts-wrapper.is-invalid .ts-control, .ts-wrapper.is-valid .ts-control {
+  --ts-pr-clear-button: 1.5rem;
+}
+
+.ts-dropdown {
+  background: var(--tblr-bg-surface);
+  color: var(--tblr-body-color);
+  box-shadow: var(--tblr-box-shadow-dropdown);
+}
+.ts-dropdown .option {
+  padding: 0.5rem 0.75rem;
+}
+
+.ts-control,
+.ts-control input {
+  color: var(--tblr-body-color);
+}
+
+.ts-control input::-webkit-input-placeholder {
+  color: #929dab;
+}
+
+.ts-control input:-ms-input-placeholder {
+  color: #929dab;
+}
+
+.ts-control input::-ms-input-placeholder {
+  color: #929dab;
+}
+
+.ts-control input::placeholder {
+  color: #929dab;
+}
+
+.ts-wrapper.multi .ts-control > div {
+  background: var(--tblr-bg-surface-secondary);
+  border: 1px solid var(--tblr-border-color);
+  color: var(--tblr-body-color);
+}
+
 .apexcharts-tooltip {
   color: var(--tblr-light) !important;
   background: var(--tblr-bg-surface-dark) !important;
@@ -1115,6 +1167,22 @@
   height: 10px !important;
 }
 
+.apexcharts-text {
+  fill: var(--tblr-body-color) !important;
+}
+
+.apexcharts-gridline {
+  stroke: var(--tblr-border-color) !important;
+}
+
+.apexcharts-legend-text {
+  color: inherit !important;
+}
+
+.apexcharts-radialbar-area {
+  stroke: var(--tblr-border-color-dark) !important;
+}
+
 svg {
   touch-action: none;
 }
@@ -1241,7 +1309,7 @@ image, text, .jvm-zoomin, .jvm-zoomout {
   }
 }
 .jvm-tooltip {
-  background: #1d273b;
+  background: #182433;
   font-family: inherit;
   font-size: 0.75rem;
   box-shadow: var(--tblr-shadow-card);
@@ -1285,12 +1353,12 @@ image, text, .jvm-zoomin, .jvm-zoomout {
 }
 
 .dropzone {
-  border: 1px dashed var(--tblr-border-color);
-  color: var(--tblr-muted);
+  border: var(--tblr-border-width) dashed var(--tblr-border-color);
+  color: var(--tblr-secondary);
   padding: 1rem;
 }
 .dropzone.dz-drag-hover {
-  border: 1px dashed var(--tblr-primary);
+  border: var(--tblr-border-width) dashed var(--tblr-primary);
   background: rgba(var(--tblr-primary-rgb), 0.01);
   color: var(--tblr-primary);
 }
@@ -1309,7 +1377,7 @@ image, text, .jvm-zoomin, .jvm-zoomout {
 
 .fslightbox-container {
   font-family: inherit !important;
-  background: rgba(29, 39, 59, 0.24) !important;
+  background: rgba(24, 36, 51, 0.24) !important;
   -webkit-backdrop-filter: blur(4px) !important;
           backdrop-filter: blur(4px) !important;
 }
@@ -1336,6 +1404,10 @@ body {
   padding: 0 0.5rem 0;
 }
 
+.tox .tox-toolbar__primary {
+  background: transparent !important;
+}
+
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   border-bottom: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color) !important;
   box-shadow: none !important;
@@ -1350,13 +1422,83 @@ body {
   border-top: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color) !important;
 }
 
-.tox .tox-toolbar,
-.tox .tox-toolbar__overflow,
-.tox .tox-toolbar__primary {
-  background: transparent !important;
-}
-
 .tox .tox-toolbar-overlord,
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   background: transparent !important;
+}
+
+:root {
+  --gl-star-size: auto;
+  --gl-star-color: var(--tblr-yellow);
+  --gl-star-color-inactive: var(--tblr-border-color);
+}
+
+[data-star-rating] svg {
+  width: var(--tblr-icon-size, --gl-star-size);
+  height: var(--tblr-icon-size, --gl-star-size);
+}
+[data-star-rating] :not(.gl-active) > .gl-star-full {
+  color: var(--gl-star-color-inactive) !important;
+}
+[data-star-rating] .gl-active > .gl-star-full {
+  color: var(--gl-star-color);
+}
+
+.clr-picker {
+  box-shadow: var(--tblr-box-shadow-dropdown);
+  background-color: var(--tblr-bg-surface);
+}
+
+input.clr-color {
+  border-radius: var(--tblr-border-radius);
+  color: var(--tblr-body-color);
+  border-color: var(--tblr-border-color);
+  background: transparent;
+}
+input.clr-color:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+  border-color: rgba(var(--tblr-primary-rgb), 0.25);
+}
+
+.clr-swatches button {
+  border-radius: var(--tblr-border-radius);
+  padding: 0 2px 4px 2px;
+}
+.clr-swatches button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+}
+
+.clr-preview {
+  border-radius: var(--tblr-border-radius);
+  overflow: visible;
+}
+.clr-preview button, .clr-preview:before, .clr-preview:after {
+  border-radius: var(--tblr-border-radius);
+}
+.clr-preview button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+}
+
+.clr-field {
+  display: block;
+}
+.clr-field button {
+  width: 1.5rem;
+  height: 1.5rem;
+  right: 6px;
+  left: auto;
+  border-radius: var(--tblr-border-radius);
+}
+.clr-field button:after {
+  box-shadow: inset 0 0 0 1px var(--tblr-border-color-translucent);
+}
+.clr-field button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
+}
+.clr-field input {
+  padding-right: 2.5rem;
 }