Release 1.0.0-beta15

# Conflicts:
#	vercel.json

.bundlewatch.config.json

@@ -1,36 +0,0 @@
-{
-  "files": [
-    {
-      "path": "./dist/css/tabler.css",
-      "maxSize": "55 kB"
-    },
-    {
-      "path": "./dist/css/tabler.min.css",
-      "maxSize": "45 kB"
-    },
-    {
-      "path": "./dist/css/tabler-flags.css",
-      "maxSize": "2 kB"
-    },
-    {
-      "path": "./dist/css/tabler-flags.min.css",
-      "maxSize": "2 kB"
-    },
-    {
-      "path": "./dist/css/tabler-payments.css",
-      "maxSize": "2 kB"
-    },
-    {
-      "path": "./dist/css/tabler-payments.min.css",
-      "maxSize": "2 kB"
-    },
-    {
-      "path": "./dist/js/tabler.js",
-      "maxSize": "2 kB"
-    },
-    {
-      "path": "./dist/js/tabler.min.js",
-      "maxSize": "1.5 kB"
-    }
-  ]
-}

.dependabot/config.yml

@@ -1,11 +0,0 @@
-# https://dependabot.com/docs/config-file/
-version: 1
-update_configs:
-  - package_manager: "javascript"
-    directory: "/"
-    update_schedule: "monthly"
-    default_reviewers:
-      - "codecalm"
-    default_labels:
-      - "dependencies"
-    version_requirement_updates: "increase_versions"

.dockerignore

@@ -0,0 +1,3 @@
+demo/
+.git/
+.github/

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/bundlewatch.yml

@@ -0,0 +1,44 @@
+name: Bundlewatch
+
+on:
+  push:
+    branches-ignore:
+      - "dependabot/**"
+  pull_request:
+  workflow_dispatch:
+
+env:
+  FORCE_COLOR: 2
+  NODE: 16
+
+jobs:
+  bundlewatch:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: npm
+
+      - name: Set up Bundler
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.6
+          bundler-cache: true
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Run build
+        run: npm run build
+
+      - name: Run bundlewatch
+        run: npm run bundlewatch
+        env:
+          BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
+          CI_BRANCH_BASE: main

.github/workflows/test.yml

@@ -0,0 +1,39 @@
+name: Test build
+
+on:
+  pull_request:
+    types: [ opened, reopened ]
+
+env:
+  NODE: 14
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: npm
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.6
+          bundler-cache: true
+
+      - run: ruby --version
+      - run: node --version
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build

.gitignore

@@ -21,6 +21,6 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
-/Gemfile.lock
-/package-lock.json
-/src/pages/playground.html
+/src/pages/playground.html
+/src/pages/playground-*.html
+/src/pages/features.html

CHANGELOG.md

@@ -0,0 +1,219 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+
+## `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.
+
+
+## `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-beta3` - 2021-05-08
+
+- upgrade Bootstrap to 5.0
+- upgrade dependencies
+- change `$border-radius-pill` variable
+- badge vertical align fix
+
+
+## `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-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-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-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-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`
+
+
+## `1.0.0-beta13` - 2022-10-18
+
+- update Bootstrap to 5.2.1, update dependencies
+- new `tracking` component
+- new radio button version of `form-imagecheck`
+- update icons to v1.105.0
+- dark mode improvements
+- corrects the spelling of New Zealand (#1318)
+- remove `$border-color-dark`
+- fix #1301 - code snippets in docs look bad in dark mode
+- fix #1305 - different default link color for dark mode
+- fix popover background in dark mode
+- fix button default border color
+- fix `form-imagecheck` bg in dark mode
+- navbar logo fix
+- move card ribbons config to variables
+- navbar border fix
+- dark mode active fix
+- using globalThis instead of window (#1315)
+- fix #1210 - lastmod not generated for pages in `sitemap.xml`
+- fix card border in dark mode
+- fix #895 - background color overwrites background image
+- fix #1302 - wrong card header in dark mode
+- fix #1303 - wrong color when hovering over `selectgroup` in dark mode
+- fix #1308 - bad coloring in table in dark mode
+- fix #1273 - datepicker background color broken
+- fix `$prefix` hard coded `layout/_dark.scss`
+- fix #1275 - remove last border-right on progress bar
+- fix #1261 - broken offcanvas bg
+
+
+## `1.0.0-beta14` - 2022-10-21
+
+- fix active items in dark mode
+- update Jekyll to newest version
+
+
+## `1.0.0-beta15` - 2022-11-01
+
+- 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

Dockerfile

@@ -0,0 +1,27 @@
+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" ]

Gemfile

@@ -1,6 +1,6 @@
 source "https://rubygems.org"
 
-gem "jekyll", "4.1.1"
+gem "jekyll", "4.3.1"
 
 group :jekyll_plugins do
 	gem "jekyll-random"

Gemfile.lock

@@ -0,0 +1,86 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.10)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.15.5)
+    forwardable-extended (2.6.0)
+    htmlbeautifier (1.4.2)
+    htmlcompressor (0.4.0)
+    http_parser.rb (0.8.0)
+    i18n (1.12.0)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-random (0.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sass-converter (2.2.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-tidy (0.2.2)
+      htmlbeautifier
+      htmlcompressor
+      jekyll
+    jekyll-timeago (0.14.0)
+      mini_i18n (>= 0.8.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    mini_i18n (0.8.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (5.0.0)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.30.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.3.0)
+    webrick (1.7.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (= 4.3.1)
+  jekyll-random
+  jekyll-redirect-from
+  jekyll-tidy
+  jekyll-timeago
+
+BUNDLED WITH
+   2.1.4

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2019 The Tabler Authors
+Copyright (c) 2018-2021 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

@@ -1,20 +1,35 @@
-# Tabler
-
+<p align="center">
+<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
 A premium and open source dashboard template with a responsive and high-quality UI.
+</p>
 
-<a href="https://preview.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/dev.zip">Download ZIP</a>
+<p align="center">
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
+<a href="https://preview.tabler.io" target="__blank"><img src="https://img.shields.io/static/v1?label=Demo&message=preview&color=228be6" alt="Tabler preview"></a>
+<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a>
+<a href="https://github.com/tabler/tabler/archive/dev.zip" target="__blank"><img src="https://img.shields.io/static/v1?label=Download&message=ZIP&color=339af0" alt="Tabler preview"></a>
+<a href="https://github.com/tabler/tabler/actions/workflows/test.yml" target="__blank"><img alt="Test build" src="https://github.com/tabler/tabler/actions/workflows/test.yml/badge.svg"></a>
+<a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
+</p>
 
-![Tabler preview](/src/static/tabler-preview.png?raw=true)
+<p align="center">
+  <a href="https://github.com/sponsors/codecalm">
+    <img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.svg'>
+  </a>
+</p>
 
 
-## Status
+## 🔎 Preview
 
-<a href="#backers" alt="Backers Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/@tabler/core.svg" alt="Latest Release"></a>
+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>
+
+<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>
 
 
-## Features
+## 🚀 Features
 
-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 visualise different types of data in the easiest possible way!
+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.
@@ -23,8 +38,15 @@ We've created this admin panel for everyone who wants to create templates based
 * **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!
 * **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.
 
+## 📖 Documentation
 
-## Sponsor Tabler
+Documentation is available as a part of Tabler preview: https://preview.tabler.io/docs/
+
+## 🪴 Project Activity
+
+![Alt](https://repobeats.axiom.co/api/embed/61d1db34446967b0848af68198a392067e0f5870.svg "Repobeats analytics image")
+
+## 💕 Sponsor Tabler
 
 <a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
 
@@ -45,19 +67,37 @@ Support this project by becoming a sponsor. Your logo will show up in this READM
 <a href="https://opencollective.com/tabler/tiers/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/9/avatar.svg" /></a>
 
 
-## Setup environment
+## 📦 Setup environment
 
 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`.
-3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
+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```
+2. install Ruby (2.5.* recommended)
+	```brew install ruby @2.5```
+3. install bundler
+	```gem install bundler```
+4. install
+	```bundle install```
+- if bundler get any errors try
+```
+sudo rm -rf /Library/Developer/CommandLineTools
+sudo xcode-select --install
+```
+5. Run NPM
+	```npm run start```
+
+
 **Windows users**:
 
-1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\git\bin\bash.exe"` to change the default shell.
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - the recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
+1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change the default shell.
+2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - the recommended version is [2.7.6](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.7.6-1/rubyinstaller-devkit-2.7.6-1-x64.exe).
 3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
 
 Once you complete the setup, you'll be able to run the various commands provided from the command line.
@@ -65,9 +105,14 @@ Once you complete the setup, you'll be able to run the various commands provided
 
 ## Build locally
 
-1. From the root `/tabler` directory, run `npm run start` in the command line.
-2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
-3. Any change in the `/src` directory will build the application and refresh the page.
+You need to have `npm` and `bundler` installed.
+
+1. From the root `/tabler` directory, run installation in the command line:
+  - `npm install` 
+  - `bundler install` 
+2. Then execute `npm 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.
@@ -81,6 +126,26 @@ Tabler is distributed via npm.
 npm install --save @tabler/core
 ```
 
+## Running with Docker
+
+If you don't want to install node/npm/ruby and the dependencies on your local environment, you can use the provided Dockerfile to build a docker image.
+This Dockerfile is provided as an example to spin-up a container running Tabler.
+
+Example of how to use this image:
+
+1. Build the tabler image : `docker build -t tabler .`
+2. Run the tabler image while mounting the `src` directory as well as the `_config.yml` file into the container.
+
+Don't forget to expose the port 3000 so you can browse the website locally.
+You can also expose the port 3001 to have access to BrowserSync
+
+```sh
+docker run -p 3000:3000 -p 3001:3001 -v $(pwd)/src:/app/src -v $(pwd)/_config.yml:/app/_config.yml tabler
+```
+
+Now open your browser to [http://localhost:3000](http://localhost:3000). Edit anything in the `src/` folder and watch your browser refresh the page after it has been rebuilt.
+
+
 ### CDN support
 
 All files included in `@tabler/core` npm package are available over a CDN.
@@ -88,13 +153,13 @@ All files included in `@tabler/core` npm package are available over a CDN.
 #### Javascript
 
 ```html
-<script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
 ```
 
 #### Styles
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">
 ```
 
 ## Feature requests
@@ -107,7 +172,7 @@ https://tabler.canny.io/feature-requests
 Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
 
 
-## Creators
+## 🤓 Creators
 
 **Paweł Kuna**
 
@@ -116,18 +181,24 @@ Found a bug or have a feature request? [Please open a new issue](https://github.
 - <https://codecalm.net>
 
 
-### Contributors
+## 👨‍🚀 Contributors
 
 This project exists thanks to all the people who contribute.
 
 <img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false" />
 
-### Backers
+## 🌸 Backers
 
 Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/tabler#backer)
 
 <a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/tiers/backer.svg?width=890&button=false" /></a>
 
+## ❤️ Thanks
+
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
+
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
+
 ## License
 
 See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.

_config.yml

@@ -10,11 +10,13 @@ keep_files:
   - playground.html
 
 use-iconfont: false
+rtl: false
 
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
 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
@@ -22,6 +24,10 @@ preview-url: https://preview.tabler.io
 mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
 google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
 google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
+npm-package: "@tabler/core"
+
+random-date-from: "2018-01-01"
+random-date-to: "2022-01-01"
 
 debug: false
 
@@ -33,7 +39,7 @@ plugins:
   - jekyll-timeago
   - jekyll-redirect-from
 
-tabler-plugins:
+tabler-css-plugins:
   - tabler-flags
   - tabler-payments
   - tabler-vendors
@@ -61,7 +67,6 @@ defaults:
       path: "*.md"
     values:
       layout: markdown
-
   - scope:
       type: "pages"
     values:
@@ -73,39 +78,51 @@ defaults:
 
 colors:
   blue:
+    class: blue
     hex: '#206bc4'
     title: Blue
   azure:
+    class: azure
     hex: '#45aaf2'
     title: Azure
   indigo:
+    class: indigo
     hex: '#6574cd'
     title: Indigo
   purple:
+    class: purple
     hex: '#a55eea'
     title: Purple
   pink:
+    class: pink
     hex: '#f66d9b'
     title: Pink
   red:
+    class: red
     hex: '#fa4654'
     title: Red
   orange:
+    class: orange
     hex: '#fd9644'
     title: Orange
   yellow:
+    class: yellow
     hex: '#f1c40f'
     title: Yellow
   lime:
+    class: lime
     hex: '#7bd235'
     title: Lime
   green:
+    class: green
     hex: '#5eba00'
     title: Green
   teal:
+    class: teal
     hex: '#2bcbba'
     title: Teal
   cyan:
+    class: cyan
     hex: '#17a2b8'
     title: Cyan
 
@@ -130,7 +147,7 @@ variants:
   - name: danger
     icon: alert-circle
 
-button-variants:
+theme-colors:
   primary:
     class: primary
     title: Primary
@@ -149,12 +166,12 @@ button-variants:
   info:
     class: info
     title: Info
-  light:
-    class: light
-    title: Light
   dark:
     class: dark
     title: Dark
+  light:
+    class: light
+    title: Light
 
 button-states:
   - class:
@@ -203,7 +220,7 @@ socials:
     title: Flickr
   bitbucket:
     icon: brand-bitbucket
-    title: Bitbucker
+    title: Bitbucket
   tabler:
     icon: brand-tabler
     title: Tabler

_config_prod.yml

@@ -0,0 +1,4 @@
+exclude:
+  - redirects.json
+  - playground.html
+  - playground-*.html

demo/accordion.html

@@ -0,0 +1,672 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 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>Accordion - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1667333929" 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;
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1667333929"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md navbar-light 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>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </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>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <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>
+              </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>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <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>
+              </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="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <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 active" href="./accordion.html">
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <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="./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">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <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>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      2925 icons
+                    </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>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </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>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <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>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Accordion
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="card">
+              <div class="card-body">
+                <div class="accordion" id="accordion-example">
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-1">
+                      <button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true">
+                        Accordion Item #1
+                      </button>
+                    </h2>
+                    <div id="collapse-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-2">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
+                        Accordion Item #2
+                      </button>
+                    </h2>
+                    <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-3">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
+                        Accordion Item #3
+                      </button>
+                    </h2>
+                    <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading-4">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
+                        Accordion Item #4
+                      </button>
+                    </h2>
+                    <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                      <div class="accordion-body pt-0">
+                        <strong>This is the fourth item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <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="./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>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <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
+                    <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-beta15
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1667333929" defer></script>
+    <script src="./dist/js/demo.min.js?1667333929" defer></script>
+  </body>
+</html>

demo/all.html

@@ -1,714 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.16
-* @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 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>Index - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <a href=".">
-              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
-            </a>
-          </h1>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
-                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a href="#" class="dropdown-item">Set status</a>
-                <a href="#" class="dropdown-item">Profile & account</a>
-                <a href="#" class="dropdown-item">Feedback</a>
-                <div class="dropdown-divider"></div>
-                <a href="#" class="dropdown-item">Settings</a>
-                <a href="#" class="dropdown-item">Logout</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <span class="nav-link-title">
-                      Interface
-                    </span>
-                  </a>
-                  <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="./blank.html" >
-                          Blank page
-                        </a>
-                        <a class="dropdown-item" href="./buttons.html" >
-                          Buttons
-                        </a>
-                        <a class="dropdown-item" href="./cards.html" >
-                          Cards
-                        </a>
-                        <a class="dropdown-item" href="./cards-masonry.html" >
-                          Cards Masonry
-                        </a>
-                        <a class="dropdown-item" href="./colors.html" >
-                          Colors
-                        </a>
-                        <a class="dropdown-item" href="./dropdowns.html" >
-                          Dropdowns
-                        </a>
-                        <a class="dropdown-item" href="./icons.html" >
-                          Icons
-                        </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
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html" >
-                          Navigation
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./charts.html" >
-                          Charts
-                        </a>
-                        <a class="dropdown-item" href="./charts-heatmap.html" >
-                          Charts heatmap
-                        </a>
-                        <a class="dropdown-item" href="./pagination.html" >
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html" >
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html" >
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html" >
-                          Carousel
-                        </a>
-                        <a class="dropdown-item" href="./lists.html" >
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html" >
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html" >
-                          Markdown
-                        </a>
-                        <div class="dropright">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" 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-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="dropright">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                            Error pages
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./error-404.html" class="dropdown-item">404 page</a>
-                            <a href="./error-500.html" class="dropdown-item">500 page</a>
-                            <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./activity.html" >
-                      Activity
-                    </a>
-                    <a class="dropdown-item" href="./gallery.html" >
-                      Gallery
-                    </a>
-                    <a class="dropdown-item" href="./invoice.html" >
-                      Invoice
-                    </a>
-                    <a class="dropdown-item" href="./search-results.html" >
-                      Search results
-                    </a>
-                    <a class="dropdown-item" href="./pricing.html" >
-                      Pricing cards
-                    </a>
-                    <a class="dropdown-item" href="./users.html" >
-                      Users
-                    </a>
-                    <a class="dropdown-item" href="./license.html" >
-                      License
-                    </a>
-                    <a class="dropdown-item" href="./music.html" >
-                      Music
-                    </a>
-                    <a class="dropdown-item" href="./widgets.html" >
-                      Widgets
-                    </a>
-                    <a class="dropdown-item" href="./wizard.html" >
-                      Wizard
-                    </a>
-                  </div>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <div class="dropdown-menu">
-                    <div class="dropdown-menu-columns">
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
-                          Horizontal
-                        </a>
-                        <a class="dropdown-item" href="./layout-vertical.html" >
-                          Vertical
-                        </a>
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
-                          Vertical transparent
-                        </a>
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
-                          Right vertical
-                        </a>
-                        <a class="dropdown-item" href="./layout-condensed.html" >
-                          Condensed
-                        </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
-                        <a class="dropdown-item" href="./layout-combo.html" >
-                          Combined
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                          Navbar dark
-                        </a>
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
-                          Navbar sticky
-                        </a>
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                          Navbar overlap
-                        </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
-                        <a class="dropdown-item" href="./layout-rtl.html" >
-                          RTL mode
-                        </a>
-                        <a class="dropdown-item" href="./layout-fluid.html" >
-                          Fluid
-                        </a>
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                          Fluid vertical
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./docs/index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Documentation
-                    </span>
-                  </a>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header d-print-none">
-            <div class="row align-items-center">
-              <div class="col">
-                <h2 class="page-title">
-                  Index
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row row justify-content-center mt-3 mt-lg-5">
-            <div class="col-lg-6 col-xl-5">
-              <div class="card">
-                <div class="card-header">
-                  <h2 class="card-title">
-                    All pages
-                  </h2>
-                </div>
-                <div class="card-body">
-                  <ul>
-                    <li>
-                      <a href="/robots.txt">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        robots.txt
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-combo.html">
-                        layout-combo.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-condensed-dark.html">
-                        layout-condensed-dark.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-condensed.html">
-                        layout-condensed.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-dark.html">
-                        layout-dark.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-fluid-vertical.html">
-                        layout-fluid-vertical.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-fluid.html">
-                        layout-fluid.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-horizontal.html">
-                        layout-horizontal.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-dark.html">
-                        layout-navbar-dark.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-overlap.html">
-                        layout-navbar-overlap.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-sticky.html">
-                        layout-navbar-sticky.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-vertical-right.html">
-                        layout-vertical-right.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-vertical-transparent.html">
-                        layout-vertical-transparent.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-vertical.html">
-                        layout-vertical.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/map-fullsize.html">
-                        map-fullsize.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/search-results.html">
-                        search-results.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/sitemap.xml">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        sitemap.xml
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/skeleton.html">
-                        skeleton.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tables.html">
-                        tables.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/docs.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        redirect.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/redirects.json">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        redirects.json
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/activity.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        Activity
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/blank.html">
-                        Blank page
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/buttons.html">
-                        Buttons
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/cards.html">
-                        Cards
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/cards-masonry.html">
-                        Cards Masonry
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/carousel.html">
-                        Carousel
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/changelog.html">
-                        Changelog
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/charts.html">
-                        Charts
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/colors.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        Colors
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/dropdowns.html">
-                        Dropdowns
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/empty.html">
-                        Empty page
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/auth-lock.html">
-                        Forgot password
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/forgot-password.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        Forgot password
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/form-elements.html">
-                        Form elements
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/gallery.html">
-                        Gallery
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/charts-heatmap.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        Heatmap Charts
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/icons.html">
-                        Icons
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/all.html">
-                        Index
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/invoice.html">
-                        Invoice
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/license.html">
-                        License
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/lists.html">
-                        Lists
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/error-maintenance.html">
-                        Maintenance mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/maps.html">
-                        Maps
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/markdown.html">
-                        Markdown
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/modals.html">
-                        Modals
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/music.html">
-                        Music components
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/navigation.html">
-                        Navigation
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/error-404.html">
-                        Page 404
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/error-500.html">
-                        Page 500
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/pagination.html">
-                        Pagination
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/pricing.html">
-                        Pricing cards
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-rtl.html">
-                        RTL mode
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/sign-in.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        Sign in
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/sign-up.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        Sign up
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tabs.html">
-                        Tabs
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/terms-of-service.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
-                        Terms of service
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/typography.html">
-                        Typography
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/users.html">
-                        Users list
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/maps-vector.html">
-                        Vector Maps
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/widgets.html">
-                        Widgets
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/wizard.html">
-                        Wizard
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent d-print-none">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">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>
-                </ul>
-              </div>
-              <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 © 2020
-                    <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-alpha.16</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </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-alpha.16
+* @version 1.0.0-beta15
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,22 +14,26 @@
     <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" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1667333929" rel="stylesheet"/>
     <style>
-      body { display: none; }
+      @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;
+      }
     </style>
   </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex flex-column justify-content-center py-4">
-      <div class="container-tight py-6">
+  <body  class=" border-top-wide border-primary d-flex flex-column">
+    <script src="./dist/js/demo-theme.min.js?1667333929"></script>
+    <div class="page page-center">
+      <div class="container container-tight py-4">
         <div class="text-center mb-4">
-          <a href="."><img src="./static/logo.svg" height="36" alt=""></a>
+          <a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo.svg" height="36" alt=""></a>
         </div>
-        <form class="card card-md" action="." method="get" autocomplete="off">
+        <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>
@@ -44,6 +48,7 @@
             </div>
             <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>
                 Unlock
               </a>
@@ -53,11 +58,8 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
+    <script src="./dist/js/tabler.min.js?1667333929" defer></script>
+    <script src="./dist/js/demo.min.js?1667333929" defer></script>
   </body>
 </html>

demo/badges.html

@@ -0,0 +1,772 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 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>Badges - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1667333929" 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;
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1667333929"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md navbar-light 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>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </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>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <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>
+              </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>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <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>
+              </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="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <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="./accordion.html">
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item active" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <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="./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">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <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>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      2925 icons
+                    </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>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </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>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <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>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Badges
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-cards">
+              <div class="col-4">
+                <div class="card">
+                  <div class="card-body">
+                    <h1>Example heading <span class="badge">New</span></h1>
+                    <h2>Example heading <span class="badge">New</span></h2>
+                    <h3>Example heading <span class="badge">New</span></h3>
+                    <h4>Example heading <span class="badge">New</span></h4>
+                    <h5>Example heading <span class="badge">New</span></h5>
+                    <h6>Example heading <span class="badge">New</span></h6>
+                  </div>
+                </div>
+              </div>
+              <div class="col-8">
+                <div class="row row-cards">
+                  <div class="col-12">
+                    <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>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="badges-list">
+                          <span class="badge bg-blue-lt">Blue</span>
+                          <span class="badge bg-azure-lt">Azure</span>
+                          <span class="badge bg-indigo-lt">Indigo</span>
+                          <span class="badge bg-purple-lt">Purple</span>
+                          <span class="badge bg-pink-lt">Pink</span>
+                          <span class="badge bg-red-lt">Red</span>
+                          <span class="badge bg-orange-lt">Orange</span>
+                          <span class="badge bg-yellow-lt">Yellow</span>
+                          <span class="badge bg-lime-lt">Lime</span>
+                          <span class="badge bg-green-lt">Green</span>
+                          <span class="badge bg-teal-lt">Teal</span>
+                          <span class="badge bg-cyan-lt">Cyan</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="card">
+                      <div class="card-body">
+                        <div class="badges-list">
+                          <span class="badge badge-outline text-blue">Blue</span>
+                          <span class="badge badge-outline text-azure">Azure</span>
+                          <span class="badge badge-outline text-indigo">Indigo</span>
+                          <span class="badge badge-outline text-purple">Purple</span>
+                          <span class="badge badge-outline text-pink">Pink</span>
+                          <span class="badge badge-outline text-red">Red</span>
+                          <span class="badge badge-outline text-orange">Orange</span>
+                          <span class="badge badge-outline text-yellow">Yellow</span>
+                          <span class="badge badge-outline text-lime">Lime</span>
+                          <span class="badge badge-outline text-green">Green</span>
+                          <span class="badge badge-outline text-teal">Teal</span>
+                          <span class="badge badge-outline text-cyan">Cyan</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-3">
+                <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>
+                  </a>
+                  <a class="dropdown-item" href="#">
+                    Another action
+                    <span class="badge bg-green ms-auto"></span>
+                  </a>
+                </div>
+              </div>
+              <div class="col-sm-6 col-lg-9">
+                <div class="row row-cards">
+                  <div class="col-12">
+                    <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>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <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>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <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-blink"></span></button>
+                          <button class="btn position-relative">Azure badge <span class="badge bg-azure badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Indigo badge <span class="badge bg-indigo badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Purple badge <span class="badge bg-purple badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Pink badge <span class="badge bg-pink badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Red badge <span class="badge bg-red badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Orange badge <span class="badge bg-orange badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Yellow badge <span class="badge bg-yellow badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Lime badge <span class="badge bg-lime badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Green badge <span class="badge bg-green badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Teal badge <span class="badge bg-teal badge-notification badge-blink"></span></button>
+                          <button class="btn position-relative">Cyan badge <span class="badge bg-cyan badge-notification badge-blink"></span></button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <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="./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>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <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
+                    <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-beta15
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1667333929" defer></script>
+    <script src="./dist/js/demo.min.js?1667333929" 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-alpha.16
+* @version 1.0.0-beta15
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,37 +14,139 @@
     <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" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1667333929" rel="stylesheet"/>
     <style>
-      body { display: none; }
+      @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;
+      }
     </style>
   </head>
-  <body class="antialiased">
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1667333929"></script>
     <div class="page">
+      <!-- Navbar -->
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+          <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>
           </button>
-          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
             <a href=".">
               <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
             </a>
           </h1>
           <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
-                <span class="badge bg-red"></span>
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </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>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
               </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+              <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>
+              </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>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -52,18 +154,18 @@
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
+                <div class="d-none d-xl-block ps-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a href="#" class="dropdown-item">Set status</a>
-                <a href="#" class="dropdown-item">Profile & account</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="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
-                <a href="#" class="dropdown-item">Settings</a>
-                <a href="#" class="dropdown-item">Logout</a>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
               </div>
             </div>
           </div>
@@ -75,8 +177,9 @@
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
+                  <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>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -84,8 +187,9 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
+                  <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>
                     </span>
                     <span class="nav-link-title">
                       Interface
@@ -94,100 +198,164 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./empty.html" >
+                        <a class="dropdown-item" href="./empty.html">
                           Empty page
                         </a>
-                        <a class="dropdown-item active" href="./blank.html" >
+                        <a class="dropdown-item" href="./accordion.html">
+                          Accordion
+                        </a>
+                        <a class="dropdown-item active" href="./blank.html">
                           Blank page
                         </a>
-                        <a class="dropdown-item" href="./buttons.html" >
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
                           Buttons
                         </a>
-                        <a class="dropdown-item" href="./cards.html" >
-                          Cards
-                        </a>
-                        <a class="dropdown-item" href="./cards-masonry.html" >
-                          Cards Masonry
-                        </a>
-                        <a class="dropdown-item" href="./colors.html" >
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html">
                           Colors
                         </a>
-                        <a class="dropdown-item" href="./dropdowns.html" >
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./dropdowns.html">
                           Dropdowns
                         </a>
-                        <a class="dropdown-item" href="./icons.html" >
-                          Icons
-                        </a>
-                        <a class="dropdown-item" href="./modals.html" >
+                        <a class="dropdown-item" href="./modals.html">
                           Modals
                         </a>
-                        <a class="dropdown-item" href="./maps.html" >
+                        <a class="dropdown-item" href="./maps.html">
                           Maps
                         </a>
-                        <a class="dropdown-item" href="./map-fullsize.html" >
+                        <a class="dropdown-item" href="./map-fullsize.html">
                           Map fullsize
                         </a>
-                        <a class="dropdown-item" href="./maps-vector.html" >
+                        <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" >
+                        <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="./charts.html" >
-                          Charts
-                        </a>
-                        <a class="dropdown-item" href="./charts-heatmap.html" >
-                          Charts heatmap
-                        </a>
-                        <a class="dropdown-item" href="./pagination.html" >
+                        <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="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html">
+                          Placeholder
                         </a>
-                        <a class="dropdown-item" href="./tabs.html" >
+                        <a class="dropdown-item" href="./tabs.html">
                           Tabs
                         </a>
-                        <a class="dropdown-item" href="./tables.html" >
+                        <a class="dropdown-item" href="./tables.html">
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html" >
+                        <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" >
+                        <a class="dropdown-item" href="./lists.html">
                           Lists
                         </a>
-                        <a class="dropdown-item" href="./typography.html" >
+                        <a class="dropdown-item" href="./typography.html">
                           Typography
                         </a>
-                        <a class="dropdown-item" href="./markdown.html" >
+                        <a class="dropdown-item" href="./offcanvas.html">
+                          Offcanvas
+                        </a>
+                        <a class="dropdown-item" href="./markdown.html">
                           Markdown
                         </a>
-                        <div class="dropright">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                        <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-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="./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="dropright">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                        <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">
-                            <a href="./error-404.html" class="dropdown-item">404 page</a>
-                            <a href="./error-500.html" class="dropdown-item">500 page</a>
-                            <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
                           </div>
                         </div>
                       </div>
@@ -196,7 +364,8 @@
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
+                    <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>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -204,49 +373,83 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./activity.html" >
-                      Activity
-                    </a>
-                    <a class="dropdown-item" href="./gallery.html" >
-                      Gallery
-                    </a>
-                    <a class="dropdown-item" href="./invoice.html" >
-                      Invoice
-                    </a>
-                    <a class="dropdown-item" href="./search-results.html" >
-                      Search results
-                    </a>
-                    <a class="dropdown-item" href="./pricing.html" >
-                      Pricing cards
-                    </a>
-                    <a class="dropdown-item" href="./users.html" >
-                      Users
-                    </a>
-                    <a class="dropdown-item" href="./license.html" >
-                      License
-                    </a>
-                    <a class="dropdown-item" href="./music.html" >
-                      Music
-                    </a>
-                    <a class="dropdown-item" href="./widgets.html" >
-                      Widgets
-                    </a>
-                    <a class="dropdown-item" href="./wizard.html" >
-                      Wizard
-                    </a>
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <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>
+                      </div>
+                    </div>
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
+                  <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>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -255,48 +458,46 @@
                   <div class="dropdown-menu">
                     <div class="dropdown-menu-columns">
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
+                        <a class="dropdown-item" href="./layout-horizontal.html">
                           Horizontal
                         </a>
-                        <a class="dropdown-item" href="./layout-vertical.html" >
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
                           Vertical
                         </a>
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
                           Vertical transparent
                         </a>
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
                           Right vertical
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed.html" >
+                        <a class="dropdown-item" href="./layout-condensed.html">
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
-                        <a class="dropdown-item" href="./layout-combo.html" >
+                        <a class="dropdown-item" href="./layout-combo.html">
                           Combined
                         </a>
                       </div>
                       <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
                           Navbar dark
                         </a>
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
                           Navbar sticky
                         </a>
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
-                        <a class="dropdown-item" href="./layout-rtl.html" >
+                        <a class="dropdown-item" href="./layout-rtl.html">
                           RTL mode
                         </a>
-                        <a class="dropdown-item" href="./layout-fluid.html" >
+                        <a class="dropdown-item" href="./layout-fluid.html">
                           Fluid
                         </a>
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
                           Fluid vertical
                         </a>
                       </div>
@@ -304,22 +505,50 @@
                   </div>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link" href="./docs/index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                  <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>
                     </span>
                     <span class="nav-link-title">
-                      Documentation
+                      2925 icons
                     </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>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </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>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
+                <form action="./" method="get" autocomplete="off" novalidate>
                   <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>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                   </div>
                 </form>
               </div>
@@ -327,42 +556,55 @@
           </div>
         </div>
       </div>
-      <div class="content">
-        <div class="container-xl d-flex flex-column justify-content-center">
-          <div class="empty">
-            <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">
-              Try adjusting your search or filter to find what you're looking for.
-            </p>
-            <div class="empty-action">
-              <a href="./." class="btn btn-primary">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><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>
-                Add your first client
-              </a>
+      <div class="page-wrapper">
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl d-flex flex-column justify-content-center">
+            <div class="empty">
+              <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">
+                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>
+                  Add your first client
+                </a>
+              </div>
             </div>
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
+              <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/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./docs/" class="link-secondary">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>
+                      Sponsor
+                    </a>
+                  </li>
                 </ul>
               </div>
               <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 © 2020
+                    Copyright &copy; 2022
                     <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-alpha.16</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta15
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -372,11 +614,8 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
+    <script src="./dist/js/tabler.min.js?1667333929" defer></script>
+    <script src="./dist/js/demo.min.js?1667333929" defer></script>
   </body>
 </html>

demo/card-actions.html

@@ -0,0 +1,820 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 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>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?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1667333929" 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;
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1667333929"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md navbar-light 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>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </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>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <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>
+              </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>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <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>
+              </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="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <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="./accordion.html">
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <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="./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">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <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>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      2925 icons
+                    </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>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </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>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <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>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Card actions
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-cards">
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Sample card</h3>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Card with action</h3>
+                    <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>
+                        Add new
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Cart title</h3>
+                    <div class="card-actions">
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/phone -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
+                        Phone
+                      </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>
+                        Email
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <div class="row align-items-center">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="card-title">Paweł Kuna</div>
+                          <div class="card-subtitle">UI Designer</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card-actions">
+                      <a href="#" class="btn">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/phone -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
+                        Phone
+                      </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>
+                        Email
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <h3 class="card-title">
+                        With description
+                      </h3>
+                      <p class="card-subtitle">
+                        Lorem ipsum dolor sit amet consectetur adipisicing.
+                      </p>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <h3 class="card-title">
+                        With description and action
+                      </h3>
+                      <p class="card-subtitle">
+                        Lorem ipsum dolor sit amet consectetur adipisicing.
+                      </p>
+                    </div>
+                    <div class="card-actions">
+                      <a href="#" class="btn btn-primary">
+                        Create new job
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <div>
+                      <div class="row align-items-center">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="card-title">Dunn Slane</div>
+                          <div class="card-subtitle">Research Nurse</div>
+                        </div>
+                      </div>
+                    </div>
+                    <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>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-end">
+                          <a class="dropdown-item" href="#">Edit user</a>
+                          <a class="dropdown-item" href="#">Change permissions</a>
+                          <a class="dropdown-item text-danger" href="#">Delete user</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Card actions</h3>
+                    <div class="card-actions btn-actions">
+                      <a href="#" class="btn-action" ><!-- Download SVG icon from http://tabler-icons.io/i/refresh -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
+                      </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>
+                      </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>
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+                      <line x1="0" y1="0" x2="400" y2="200"></line>
+                      <line x1="0" y1="200" x2="400" y2="0"></line>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <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="./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>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <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
+                    <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-beta15
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1667333929" defer></script>
+    <script src="./dist/js/demo.min.js?1667333929" defer></script>
+  </body>
+</html>

demo/charts-heatmap.html

@@ -1,624 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.16
-* @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 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>Heatmap Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- CSS files -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light d-print-none">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <a href=".">
-              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
-            </a>
-          </h1>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
-                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a href="#" class="dropdown-item">Set status</a>
-                <a href="#" class="dropdown-item">Profile & account</a>
-                <a href="#" class="dropdown-item">Feedback</a>
-                <div class="dropdown-divider"></div>
-                <a href="#" class="dropdown-item">Settings</a>
-                <a href="#" class="dropdown-item">Logout</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="collapse navbar-collapse" id="navbar-menu">
-          <div class="navbar navbar-light">
-            <div class="container-xl">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="./index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <span class="nav-link-title">
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <span class="nav-link-title">
-                      Interface
-                    </span>
-                  </a>
-                  <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="./blank.html" >
-                          Blank page
-                        </a>
-                        <a class="dropdown-item" href="./buttons.html" >
-                          Buttons
-                        </a>
-                        <a class="dropdown-item" href="./cards.html" >
-                          Cards
-                        </a>
-                        <a class="dropdown-item" href="./cards-masonry.html" >
-                          Cards Masonry
-                        </a>
-                        <a class="dropdown-item" href="./colors.html" >
-                          Colors
-                        </a>
-                        <a class="dropdown-item" href="./dropdowns.html" >
-                          Dropdowns
-                        </a>
-                        <a class="dropdown-item" href="./icons.html" >
-                          Icons
-                        </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
-                        </a>
-                        <a class="dropdown-item" href="./navigation.html" >
-                          Navigation
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./charts.html" >
-                          Charts
-                        </a>
-                        <a class="dropdown-item" href="./charts-heatmap.html" >
-                          Charts heatmap
-                        </a>
-                        <a class="dropdown-item" href="./pagination.html" >
-                          Pagination
-                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
-                        </a>
-                        <a class="dropdown-item" href="./tabs.html" >
-                          Tabs
-                        </a>
-                        <a class="dropdown-item" href="./tables.html" >
-                          Tables
-                        </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
-                        <a class="dropdown-item" href="./carousel.html" >
-                          Carousel
-                        </a>
-                        <a class="dropdown-item" href="./lists.html" >
-                          Lists
-                        </a>
-                        <a class="dropdown-item" href="./typography.html" >
-                          Typography
-                        </a>
-                        <a class="dropdown-item" href="./markdown.html" >
-                          Markdown
-                        </a>
-                        <div class="dropright">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" 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-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="dropright">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                            Error pages
-                          </a>
-                          <div class="dropdown-menu">
-                            <a href="./error-404.html" class="dropdown-item">404 page</a>
-                            <a href="./error-500.html" class="dropdown-item">500 page</a>
-                            <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./form-elements.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <span class="nav-link-title">
-                      Form elements
-                    </span>
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Extra
-                    </span>
-                  </a>
-                  <div class="dropdown-menu">
-                    <a class="dropdown-item" href="./activity.html" >
-                      Activity
-                    </a>
-                    <a class="dropdown-item" href="./gallery.html" >
-                      Gallery
-                    </a>
-                    <a class="dropdown-item" href="./invoice.html" >
-                      Invoice
-                    </a>
-                    <a class="dropdown-item" href="./search-results.html" >
-                      Search results
-                    </a>
-                    <a class="dropdown-item" href="./pricing.html" >
-                      Pricing cards
-                    </a>
-                    <a class="dropdown-item" href="./users.html" >
-                      Users
-                    </a>
-                    <a class="dropdown-item" href="./license.html" >
-                      License
-                    </a>
-                    <a class="dropdown-item" href="./music.html" >
-                      Music
-                    </a>
-                    <a class="dropdown-item" href="./widgets.html" >
-                      Widgets
-                    </a>
-                    <a class="dropdown-item" href="./wizard.html" >
-                      Wizard
-                    </a>
-                  </div>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <span class="nav-link-title">
-                      Layout
-                    </span>
-                  </a>
-                  <div class="dropdown-menu">
-                    <div class="dropdown-menu-columns">
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
-                          Horizontal
-                        </a>
-                        <a class="dropdown-item" href="./layout-vertical.html" >
-                          Vertical
-                        </a>
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
-                          Vertical transparent
-                        </a>
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
-                          Right vertical
-                        </a>
-                        <a class="dropdown-item" href="./layout-condensed.html" >
-                          Condensed
-                        </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
-                        <a class="dropdown-item" href="./layout-combo.html" >
-                          Combined
-                        </a>
-                      </div>
-                      <div class="dropdown-menu-column">
-                        <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                          Navbar dark
-                        </a>
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
-                          Navbar sticky
-                        </a>
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
-                          Navbar overlap
-                        </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
-                        <a class="dropdown-item" href="./layout-rtl.html" >
-                          RTL mode
-                        </a>
-                        <a class="dropdown-item" href="./layout-fluid.html" >
-                          Fluid
-                        </a>
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                          Fluid vertical
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./docs/index.html" >
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                    </span>
-                    <span class="nav-link-title">
-                      Documentation
-                    </span>
-                  </a>
-                </li>
-              </ul>
-              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header d-print-none">
-            <div class="row align-items-center">
-              <div class="col">
-                <h2 class="page-title">
-                  Heatmap Charts
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row row-cards">
-            <div class="col-xl-6">
-              <div class="card">
-                <div class="card-body">
-                  <h4 class="card-title">Basic Heatmap - Single Series</h4>
-                  <div id="chart-heatmap-basic"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-xl-6">
-              <div class="card">
-                <div class="card-body">
-                  <h4 class="card-title">Heatmap - Multiple series</h4>
-                  <div id="chart-heatmap-multiple"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-xl-6">
-              <div class="card">
-                <div class="card-body">
-                  <h4 class="card-title">Heatmap - Labels included</h4>
-                  <div id="chart-heatmap-labels"></div>
-                </div>
-              </div>
-            </div>
-            <div class="col-xl-6">
-              <div class="card">
-                <div class="card-body">
-                  <h4 class="card-title">Heatmap - Color range</h4>
-                  <div id="chart-heatmap-colors"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent d-print-none">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">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>
-                </ul>
-              </div>
-              <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 © 2020
-                    <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-alpha.16</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      var generateData = function() {
-      	var data = [],
-      		min = 0,
-      		max = 100,
-      		count = 15;
-      	for (var n = 0; n < count; n++) {
-      		data.push({
-      			x: (n + 1).toString(),
-      			y: Math.floor(Math.random() * (max - min + 1)) + min
-      		});
-      	}
-      	return data;
-      };
-      var options = {
-      	chart: {
-      		height: 400,
-      		type: "heatmap",
-      		toolbar: {
-      			show: false,
-      		},
-      	},
-      	dataLabels: {
-      		enabled: false
-      	},
-      	colors: ["#206bc4", ],
-      	series: [
-      		{ name: "Jan", data: generateData() },
-      		{ name: "Feb", data: generateData() },
-      		{ name: "Mar", data: generateData() },
-      		{ name: "Apr", data: generateData() },
-      		{ name: "May", data: generateData() },
-      		{ name: "Jun", data: generateData() },
-      		{ name: "Jul", data: generateData() },
-      		{ name: "Aug", data: generateData() },
-      		{ name: "Sep", data: generateData() },
-      		{ name: "Oct", data: generateData() },
-      		{ name: "Nov", data: generateData() },
-      		{ name: "Dec", data: generateData() },
-      	],
-      	xaxis: {
-      		type: "category"
-      	}
-      };
-      (new ApexCharts(document.querySelector("#chart-heatmap-basic"),options)).render();
-    </script>
-    <script>
-      var generateData = function() {
-      	var data = [],
-      		min = 0,
-      		max = 100,
-      		count = 15;
-      	for (var n = 0; n < count; n++) {
-      		data.push({
-      			x: (n + 1).toString(),
-      			y: Math.floor(Math.random() * (max - min + 1)) + min
-      		});
-      	}
-      	return data;
-      };
-      var options = {
-      	chart: {
-      		height: 400,
-      		type: "heatmap",
-      		toolbar: {
-      			show: false,
-      		},
-      	},
-      	dataLabels: {
-      		enabled: false
-      	},
-      	colors: ["#206bc4", "#45aaf2", "#6574cd", "#a55eea", "#f66d9b", "#cd201f", "#ff922b", "#fab005", "#94d82d", "#5eba00", "#2bcbba", "#17a2b8", ],
-      	series: [
-      		{ name: "Jan", data: generateData() },
-      		{ name: "Feb", data: generateData() },
-      		{ name: "Mar", data: generateData() },
-      		{ name: "Apr", data: generateData() },
-      		{ name: "May", data: generateData() },
-      		{ name: "Jun", data: generateData() },
-      		{ name: "Jul", data: generateData() },
-      		{ name: "Aug", data: generateData() },
-      		{ name: "Sep", data: generateData() },
-      		{ name: "Oct", data: generateData() },
-      		{ name: "Nov", data: generateData() },
-      		{ name: "Dec", data: generateData() },
-      	],
-      	xaxis: {
-      		type: "category"
-      	}
-      };
-      (new ApexCharts(document.querySelector("#chart-heatmap-multiple"),options)).render();
-    </script>
-    <script>
-      var generateData = function() {
-      	var data = [],
-      		min = 0,
-      		max = 100,
-      		count = 15;
-      	for (var n = 0; n < count; n++) {
-      		data.push({
-      			x: (n + 1).toString(),
-      			y: Math.floor(Math.random() * (max - min + 1)) + min
-      		});
-      	}
-      	return data;
-      };
-      var options = {
-      	chart: {
-      		height: 400,
-      		type: "heatmap",
-      		toolbar: {
-      			show: false,
-      		},
-      	},
-      	dataLabels: {
-      		enabled: true
-      	},
-      	colors: ["#206bc4", ],
-      	series: [
-      		{ name: "Jan", data: generateData() },
-      		{ name: "Feb", data: generateData() },
-      		{ name: "Mar", data: generateData() },
-      		{ name: "Apr", data: generateData() },
-      		{ name: "May", data: generateData() },
-      		{ name: "Jun", data: generateData() },
-      		{ name: "Jul", data: generateData() },
-      		{ name: "Aug", data: generateData() },
-      		{ name: "Sep", data: generateData() },
-      		{ name: "Oct", data: generateData() },
-      		{ name: "Nov", data: generateData() },
-      		{ name: "Dec", data: generateData() },
-      	],
-      	xaxis: {
-      		type: "category"
-      	}
-      };
-      (new ApexCharts(document.querySelector("#chart-heatmap-labels"),options)).render();
-    </script>
-    <script>
-      var generateData = function() {
-      	var data = [],
-      		min = 0,
-      		max = 100,
-      		count = 15;
-      	for (var n = 0; n < count; n++) {
-      		data.push({
-      			x: (n + 1).toString(),
-      			y: Math.floor(Math.random() * (max - min + 1)) + min
-      		});
-      	}
-      	return data;
-      };
-      var options = {
-      	chart: {
-      		height: 400,
-      		type: "heatmap",
-      		toolbar: {
-      			show: false,
-      		},
-      	},
-      	dataLabels: {
-      		enabled: false
-      	},
-      	plotOptions: {
-      		heatmap: {
-      			enableShades: true,
-      			colorScale: {
-      				ranges: [{
-      					from: 0,
-      					to: 20,
-      					name: "Low",
-      					color: "#5eba00"
-      				}, {
-      					from: 21,
-      					to: 50,
-      					name: "Medium",
-      					color: "#206bc4"
-      				}, {
-      					from: 51,
-      					to: 75,
-      					name: "High",
-      					color: "#fab005"
-      				}, {
-      					from: 76,
-      					to: 100,
-      					name: "Extreme",
-      					color: "#cd201f"
-      				}]
-      			}
-      		}
-      	},
-      	series: [
-      		{ name: "Jan", data: generateData() },
-      		{ name: "Feb", data: generateData() },
-      		{ name: "Mar", data: generateData() },
-      		{ name: "Apr", data: generateData() },
-      		{ name: "May", data: generateData() },
-      		{ name: "Jun", data: generateData() },
-      		{ name: "Jul", data: generateData() },
-      		{ name: "Aug", data: generateData() },
-      		{ name: "Sep", data: generateData() },
-      		{ name: "Oct", data: generateData() },
-      		{ name: "Nov", data: generateData() },
-      		{ name: "Dec", data: generateData() },
-      	],
-      	xaxis: {
-      		type: "category"
-      	}
-      };
-      (new ApexCharts(document.querySelector("#chart-heatmap-colors"),options)).render();
-    </script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/datagrid.html

@@ -0,0 +1,706 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 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>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?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1667333929" 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;
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1667333929"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md navbar-light 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>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </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>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <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>
+              </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>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <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>
+              </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="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <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="./accordion.html">
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </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>
+                        </a>
+                        <a class="dropdown-item" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <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="./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">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <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>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      2925 icons
+                    </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>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </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>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <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>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Data grid
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="card">
+              <div class="card-header">
+                <h3 class="card-title">Base info</h3>
+              </div>
+              <div class="card-body">
+                <div class="datagrid">
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Registrar</div>
+                    <div class="datagrid-content">Third Party</div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Nameservers</div>
+                    <div class="datagrid-content">Third Party</div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Port number</div>
+                    <div class="datagrid-content">3306</div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Expiration date</div>
+                    <div class="datagrid-content">–</div>
+                  </div>
+                  <div class="datagrid-item">
+                    <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>
+                        Paweł Kuna
+                      </div>
+                    </div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Age</div>
+                    <div class="datagrid-content">15 days</div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Edge network</div>
+                    <div class="datagrid-content">
+                      <span class="status status-green">
+                        Active
+                      </span>
+                    </div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Avatars list</div>
+                    <div class="datagrid-content">
+                      <div class="avatar-list avatar-list-stacked">
+                        <span class="avatar avatar-xs 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>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Checkbox</div>
+                    <div class="datagrid-content">
+                      <label class="form-check">
+                        <input class="form-check-input" type="checkbox" checked>
+                        <span class="form-check-label">Click me</span>
+                      </label>
+                    </div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Icon</div>
+                    <div class="datagrid-content">
+                      <!-- Download SVG icon from http://tabler-icons.io/i/check -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
+                      Checked
+                    </div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Form control</div>
+                    <div class="datagrid-content">
+                      <input type="text" class="form-control form-control-flush" placeholder="Input placeholder">
+                    </div>
+                  </div>
+                  <div class="datagrid-item">
+                    <div class="datagrid-title">Longer description</div>
+                    <div class="datagrid-content">
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <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="./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>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <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
+                    <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-beta15
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1667333929" defer></script>
+    <script src="./dist/js/demo.min.js?1667333929" defer></script>
+  </body>
+</html>

demo/datatables.html

@@ -0,0 +1,953 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 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>Datatables - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/tabler-vendors.min.css?1667333929" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css?1667333929" 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;
+      }
+    </style>
+  </head>
+  <body >
+    <script src="./dist/js/demo-theme.min.js?1667333929"></script>
+    <div class="page">
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md navbar-light 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>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex me-3">
+              <div class="btn-list">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  Source code
+                </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>
+                  Sponsor
+                </a>
+              </div>
+            </div>
+            <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <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>
+              </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>
+                  <span class="badge bg-red"></span>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Last updates</h3>
+                    </div>
+                    <div class="list-group list-group-flush list-group-hoverable">
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Change deprecated html tags to text decoration classes (#29604)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              justify-content:between ⇒ justify-content:space-between (#29734)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions show">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Update change-version.js (#29736)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="list-group-item">
+                        <div class="row align-items-center">
+                          <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">
+                              Regenerate package-lock.json (#29730)
+                            </div>
+                          </div>
+                          <div class="col-auto">
+                            <a href="#" class="list-group-item-actions">
+                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+                <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>
+              </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="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <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="./accordion.html">
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="./blank.html">
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="./badges.html">
+                          Badges
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./buttons.html">
+                          Buttons
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
+                            Cards
+                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="./cards.html" class="dropdown-item">
+                              Sample cards
+                            </a>
+                            <a href="./card-actions.html" class="dropdown-item">
+                              Card actions
+                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                            </a>
+                            <a href="./cards-masonry.html" class="dropdown-item">
+                              Cards Masonry
+                            </a>
+                          </div>
+                        </div>
+                        <a class="dropdown-item" href="./colors.html">
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="./datagrid.html">
+                          Data grid
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item active" href="./datatables.html">
+                          Datatables
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <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="./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">
+                            <a href="./error-404.html" class="dropdown-item">
+                              404 page
+                            </a>
+                            <a href="./error-500.html" class="dropdown-item">
+                              500 page
+                            </a>
+                            <a href="./error-maintenance.html" class="dropdown-item">
+                              Maintenance page
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./activity.html">
+                          Activity
+                        </a>
+                        <a class="dropdown-item" href="./gallery.html">
+                          Gallery
+                        </a>
+                        <a class="dropdown-item" href="./invoice.html">
+                          Invoice
+                        </a>
+                        <a class="dropdown-item" href="./search-results.html">
+                          Search results
+                        </a>
+                        <a class="dropdown-item" href="./pricing.html">
+                          Pricing cards
+                        </a>
+                        <a class="dropdown-item" href="./pricing-table.html">
+                          Pricing table
+                        </a>
+                        <a class="dropdown-item" href="./faq.html">
+                          FAQ
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./users.html">
+                          Users
+                        </a>
+                        <a class="dropdown-item" href="./license.html">
+                          License
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./logs.html">
+                          Logs
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./music.html">
+                          Music
+                        </a>
+                        <a class="dropdown-item" href="./tasks.html">
+                          Tasks
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./uptime.html">
+                          Uptime monitor
+                        </a>
+                        <a class="dropdown-item" href="./widgets.html">
+                          Widgets
+                        </a>
+                        <a class="dropdown-item" href="./wizard.html">
+                          Wizard
+                        </a>
+                        <a class="dropdown-item" href="./settings.html">
+                          Settings
+                          <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>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-horizontal.html">
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="./layout-boxed.html">
+                          Boxed
+                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical.html">
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="./layout-condensed.html">
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="./layout-combo.html">
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="./layout-rtl.html">
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid.html">
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <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>
+                    </span>
+                    <span class="nav-link-title">
+                      2925 icons
+                    </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>
+                    </span>
+                    <span class="nav-link-title">
+                      Help
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="./docs/">
+                      Documentation
+                    </a>
+                    <a class="dropdown-item" href="./changelog.html">
+                      Changelog
+                    </a>
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
+                      Source code
+                    </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>
+                      Sponsor project!
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="./" method="get" autocomplete="off" novalidate>
+                  <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>
+                    </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Datatables
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="card">
+              <div class="card-body">
+                <div id="table-default" class="table-responsive">
+                  <table class="table">
+                    <thead>
+                      <tr>
+                        <th><button class="table-sort" data-sort="sort-name">Name</button></th>
+                        <th><button class="table-sort" data-sort="sort-city">City</button></th>
+                        <th><button class="table-sort" data-sort="sort-type">Type</button></th>
+                        <th><button class="table-sort" data-sort="sort-score">Score</button></th>
+                        <th><button class="table-sort" data-sort="sort-date">Date</button></th>
+                        <th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
+                        <th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
+                      </tr>
+                    </thead>
+                    <tbody class="table-tbody">
+                      <tr>
+                        <td class="sort-name">Steel Vengeance</td>
+                        <td class="sort-city">Cedar Point, United States</td>
+                        <td class="sort-type">RMC Hybrid</td>
+                        <td class="sort-score">100,0%</td>
+                        <td class="sort-date" data-date="1628071164">August 04, 2021</td>
+                        <td class="sort-quantity">74</td>
+                        <td class="sort-progress" data-progress="30">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">30%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 30%" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" aria-label="30% Complete">
+                                  <span class="visually-hidden">30% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Fury 325</td>
+                        <td class="sort-city">Carowinds, United States</td>
+                        <td class="sort-type">B&M Giga, Hyper, Steel</td>
+                        <td class="sort-score">99,3%</td>
+                        <td class="sort-date" data-date="1546512137">January 03, 2019</td>
+                        <td class="sort-quantity">49</td>
+                        <td class="sort-progress" data-progress="48">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">48%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 48%" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" aria-label="48% Complete">
+                                  <span class="visually-hidden">48% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Wildfire</td>
+                        <td class="sort-city">Kolmården  Sweden</td>
+                        <td class="sort-type">RMC Twister, Wooden, Terrain</td>
+                        <td class="sort-score">99,3%</td>
+                        <td class="sort-date" data-date="1546016360">December 28, 2018</td>
+                        <td class="sort-quantity">8</td>
+                        <td class="sort-progress" data-progress="9">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">9%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 9%" role="progressbar" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100" aria-label="9% Complete">
+                                  <span class="visually-hidden">9% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Lightning Rod</td>
+                        <td class="sort-city">Dollywood, United States</td>
+                        <td class="sort-type">RMC Wooden</td>
+                        <td class="sort-score">99,1%</td>
+                        <td class="sort-date" data-date="1604704179">November 07, 2020</td>
+                        <td class="sort-quantity">104</td>
+                        <td class="sort-progress" data-progress="98">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">98%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 98%" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" aria-label="98% Complete">
+                                  <span class="visually-hidden">98% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Maverick</td>
+                        <td class="sort-city">Cedar Point, United States</td>
+                        <td class="sort-type">Intamin Rocket, Steel</td>
+                        <td class="sort-score">99,1%</td>
+                        <td class="sort-date" data-date="1637669424">November 23, 2021</td>
+                        <td class="sort-quantity">86</td>
+                        <td class="sort-progress" data-progress="46">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">46%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 46%" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100" aria-label="46% Complete">
+                                  <span class="visually-hidden">46% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">El Toro</td>
+                        <td class="sort-city">Six Flags Great Adventure, United States</td>
+                        <td class="sort-type">Intamin Twister, Wooden</td>
+                        <td class="sort-score">99,0%</td>
+                        <td class="sort-date" data-date="1610586921">January 14, 2021</td>
+                        <td class="sort-quantity">130</td>
+                        <td class="sort-progress" data-progress="29">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">29%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 29%" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" aria-label="29% Complete">
+                                  <span class="visually-hidden">29% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Twisted Colossus</td>
+                        <td class="sort-city">Six Flags Magic Mountain, United States</td>
+                        <td class="sort-type">RMC Hybrid</td>
+                        <td class="sort-score">98,9%</td>
+                        <td class="sort-date" data-date="1569399536">September 25, 2019</td>
+                        <td class="sort-quantity">30</td>
+                        <td class="sort-progress" data-progress="57">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">57%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
+                                  <span class="visually-hidden">57% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Eejanaika new</td>
+                        <td class="sort-city">Fuji-Q Highland, Japan</td>
+                        <td class="sort-type">S&S Power 4th Dimension, Steel</td>
+                        <td class="sort-score">98,6%</td>
+                        <td class="sort-date" data-date="1610794724">January 16, 2021</td>
+                        <td class="sort-quantity">162</td>
+                        <td class="sort-progress" data-progress="91">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">91%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 91%" role="progressbar" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100" aria-label="91% Complete">
+                                  <span class="visually-hidden">91% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Wicked Cyclone</td>
+                        <td class="sort-city">Six Flags New England, United States</td>
+                        <td class="sort-type">RMC Hybrid</td>
+                        <td class="sort-score">98,2%</td>
+                        <td class="sort-date" data-date="1568819813">September 18, 2019</td>
+                        <td class="sort-quantity">174</td>
+                        <td class="sort-progress" data-progress="3">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">3%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 3%" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="100" aria-label="3% Complete">
+                                  <span class="visually-hidden">3% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Shambhala</td>
+                        <td class="sort-city">Port Aventura, Spain</td>
+                        <td class="sort-type">B&M Hyper, Steel</td>
+                        <td class="sort-score">98,2%</td>
+                        <td class="sort-date" data-date="1538221867">September 29, 2018</td>
+                        <td class="sort-quantity">111</td>
+                        <td class="sort-progress" data-progress="24">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">24%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete">
+                                  <span class="visually-hidden">24% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Taron</td>
+                        <td class="sort-city">Phantasialand, Germany</td>
+                        <td class="sort-type">Intamin Sit Down, Steel</td>
+                        <td class="sort-score">98,2%</td>
+                        <td class="sort-date" data-date="1592858850">June 22, 2020</td>
+                        <td class="sort-quantity">130</td>
+                        <td class="sort-progress" data-progress="48">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">48%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 48%" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" aria-label="48% Complete">
+                                  <span class="visually-hidden">48% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Expedition Ge Force</td>
+                        <td class="sort-city">Holiday Park, Germany</td>
+                        <td class="sort-type">Intamin Megacoaster, Steel</td>
+                        <td class="sort-score">98,2%</td>
+                        <td class="sort-date" data-date="1565107347">August 06, 2019</td>
+                        <td class="sort-quantity">157</td>
+                        <td class="sort-progress" data-progress="57">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">57%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
+                                  <span class="visually-hidden">57% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Storm Chaser</td>
+                        <td class="sort-city">Kentucky Kingdom, United States</td>
+                        <td class="sort-type">RMC Steel</td>
+                        <td class="sort-score">97,9%</td>
+                        <td class="sort-date" data-date="1564805623">August 03, 2019</td>
+                        <td class="sort-quantity">43</td>
+                        <td class="sort-progress" data-progress="42">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">42%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 42%" role="progressbar" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100" aria-label="42% Complete">
+                                  <span class="visually-hidden">42% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Helix</td>
+                        <td class="sort-city">Liseberg, Sweden</td>
+                        <td class="sort-type">Mack Looper, Steel, Terrain</td>
+                        <td class="sort-score">97,9%</td>
+                        <td class="sort-date" data-date="1633500491">October 06, 2021</td>
+                        <td class="sort-quantity">151</td>
+                        <td class="sort-progress" data-progress="54">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">54%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 54%" role="progressbar" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" aria-label="54% Complete">
+                                  <span class="visually-hidden">54% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="sort-name">Outlaw Run</td>
+                        <td class="sort-city">Silver Dollar City, United States</td>
+                        <td class="sort-type">RMC Hybrid</td>
+                        <td class="sort-score">96,6%</td>
+                        <td class="sort-date" data-date="1547084027">January 10, 2019</td>
+                        <td class="sort-quantity">131</td>
+                        <td class="sort-progress" data-progress="64">
+                          <div class="row align-items-center">
+                            <div class="col-12 col-lg-auto">64%</div>
+                            <div class="col">
+                              <div class="progress" style="width: 5rem">
+                                <div class="progress-bar" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="64% Complete">
+                                  <span class="visually-hidden">64% Complete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <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="./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>
+                      Sponsor
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <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
+                    <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-beta15
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/list.js/dist/list.min.js?1667333929" defer></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1667333929" defer></script>
+    <script src="./dist/js/demo.min.js?1667333929" defer></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+      const list = new List('table-default', {
+      	sortClass: 'table-sort',
+      	listClass: 'table-tbody',
+      	valueNames: [ 'sort-name', 'sort-type', 'sort-city', 'sort-score',
+      		{ attr: 'data-date', name: 'sort-date' },
+      		{ attr: 'data-progress', name: 'sort-progress' },
+      		'sort-quantity'
+      	]
+      });
+      })
+    </script>
+  </body>
+</html>

demo/dist/css/demo.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.16 (https://tabler.io)
-* @version 1.0.0-alpha.16
+* Tabler v1.0.0-beta15 (https://tabler.io)
+* @version 1.0.0-beta15
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 pre.highlight,
@@ -11,316 +11,291 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: 85.7142857%;
-  border-radius: 3px; }
+  border-radius: var(--tblr-border-radius);
+}
+pre.highlight::-webkit-scrollbar,
+.highlight pre::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
   pre.highlight::-webkit-scrollbar,
-  .highlight pre::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    -webkit-transition: .3s background;
-    transition: .3s background; }
-  pre.highlight::-webkit-scrollbar-thumb,
-  .highlight pre::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: #dbdee3; }
-  pre.highlight::-webkit-scrollbar-corner,
-  .highlight pre::-webkit-scrollbar-corner {
-    background: transparent; }
-  pre.highlight:hover::-webkit-scrollbar-thumb,
-  .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #c6cad0;
-    background: #c6cad0; }
+.highlight pre::-webkit-scrollbar {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+pre.highlight::-webkit-scrollbar-thumb,
+.highlight pre::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: rgba(var(--tblr-light-rgb), 0.16);
+}
+pre.highlight::-webkit-scrollbar-track,
+.highlight pre::-webkit-scrollbar-track {
+  background: rgba(var(--tblr-light-rgb), 0.06);
+}
+pre.highlight:hover::-webkit-scrollbar-thumb,
+.highlight pre:hover::-webkit-scrollbar-thumb {
+  background: rgba(var(--tblr-light-rgb), 0.32);
+}
+pre.highlight::-webkit-scrollbar-corner,
+.highlight pre::-webkit-scrollbar-corner {
+  background: transparent;
+}
 
 .highlight {
-  margin: 0; }
-  .highlight code > * {
-    margin: 0 !important;
-    padding: 0 !important; }
-  .highlight .dl {
-    color: #4070a0; }
-  .highlight .c {
-    color: #727272; }
-  .highlight .c1 {
-    color: #727272; }
-  .highlight .ch {
-    font-style: italic;
-    color: #60a0b0; }
-  .highlight .cm {
-    color: #727272; }
-  .highlight .cp {
-    color: #008085; }
-  .highlight .cpf {
-    color: #007020; }
-  .highlight .cs {
-    color: #727272; }
-  .highlight .gd {
-    background-color: #fcc;
-    border: 1px solid #c00; }
-  .highlight .ge {
-    font-style: italic; }
-  .highlight .gh {
-    color: #030; }
-  .highlight .gi {
-    background-color: #cfc;
-    border: 1px solid #0c0; }
-  .highlight .gl {
-    text-decoration: underline; }
-  .highlight .go {
-    color: #aaa; }
-  .highlight .gp {
-    color: #009; }
-  .highlight .gr {
-    color: #f00; }
-  .highlight .gs {
-    font-weight: 700; }
-  .highlight .gt {
-    color: #9c6; }
-  .highlight .gu {
-    color: #030; }
-  .highlight .il {
-    color: #c24f19; }
-  .highlight .k {
-    color: #069; }
-  .highlight .kc {
-    color: #069; }
-  .highlight .kd {
-    color: #069; }
-  .highlight .kn {
-    color: #069; }
-  .highlight .kp {
-    color: #069; }
-  .highlight .kr {
-    color: #069; }
-  .highlight .kt {
-    color: #078; }
-  .highlight .m {
-    color: #c24f19; }
-  .highlight .mf {
-    color: #c24f19; }
-  .highlight .mb {
-    color: #40a070; }
-  .highlight .mh {
-    color: #c24f19; }
-  .highlight .mi {
-    color: #c24f19; }
-  .highlight .mo {
-    color: #c24f19; }
-  .highlight .na {
-    color: #006ee0; }
-  .highlight .nb {
-    color: #366; }
-  .highlight .nc {
-    color: #168174; }
-  .highlight .nd {
-    color: #6b62de; }
-  .highlight .ne {
-    color: #c00; }
-  .highlight .nf {
-    color: #b715f4; }
-  .highlight .ni {
-    color: #727272; }
-  .highlight .nl {
-    color: #6b62de; }
-  .highlight .nn {
-    color: #007ca5; }
-  .highlight .no {
-    color: #360; }
-  .highlight .nt {
-    color: #2f6f9f; }
-  .highlight .nv {
-    color: #033; }
-  .highlight .o {
-    color: #555; }
-  .highlight .ow {
-    color: #000; }
-  .highlight .s {
-    color: #d73038; }
-  .highlight .s1 {
-    color: #c30; }
-  .highlight .s2 {
-    color: #c30; }
-  .highlight .sa {
-    color: #4070a0; }
-  .highlight .sb {
-    color: #c30; }
-  .highlight .sc {
-    color: #c30; }
-  .highlight .sd {
-    font-style: italic;
-    color: #c30; }
-  .highlight .se {
-    color: #c30; }
-  .highlight .sh {
-    color: #c30; }
-  .highlight .si {
-    color: #a00; }
-  .highlight .sr {
-    color: #337e7e; }
-  .highlight .ss {
-    color: #fc3; }
-  .highlight .sx {
-    color: #c30; }
-  .highlight .w {
-    color: #bbb; }
-  .highlight .language-bash::before, .highlight .language-sh::before {
-    color: #009;
-    content: "$ ";
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none; }
-  .highlight .language-bash .m, .highlight .language-sh .m {
-    color: inherit; }
-  .highlight .language-powershell::before {
-    color: #009;
-    content: "PM> ";
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none; }
+  margin: 0;
+}
+.highlight code > * {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.highlight .c, .highlight .c1 {
+  color: #a0aec0;
+}
+.highlight .nt, .highlight .nc, .highlight .nx {
+  color: #ff8383;
+}
+.highlight .na, .highlight .p {
+  color: #ffe484;
+}
+.highlight .s, .highlight .dl, .highlight .s2 {
+  color: #b5f4a5;
+}
+.highlight .k {
+  color: #93ddfd;
+}
+.highlight .s1, .highlight .mi {
+  color: #d9a9ff;
+}
 
 .example {
   padding: 2rem;
-  margin: 2rem 0;
-  border: 1px solid #e6e8e9;
+  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; }
+  overflow-x: auto;
+}
 
 .example-centered {
-  justify-content: center; }
-  .example-centered .example-content {
-    flex: 0 auto; }
+  justify-content: center;
+}
+.example-centered .example-content {
+  flex: 0 auto;
+}
 
 .example-content {
   font-size: 0.875rem;
-  line-height: 1.4285714;
-  color: #232e3c;
+  line-height: 1.4285714286;
+  color: #1d273b;
   flex: 1;
-  max-width: 100%; }
+  max-width: 100%;
+}
+.example-content .page-header {
+  margin-bottom: 0;
+}
 
 .example-bg {
-  background: #f4f6fa; }
+  background: #f1f5f9;
+}
 
 .example-code {
   margin: 2rem 0;
-  border: 1px solid #e6e8e9;
-  border-top: none; }
-  .example-code pre {
-    margin: 0;
-    border: 0;
-    border-radius: 0 0 3px 3px; }
-  .example + .example-code {
-    margin-top: -2rem; }
+  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; }
+  margin: 0 auto;
+}
+.example-column > .card:last-of-type {
+  margin-bottom: 0;
+}
 
 .example-column-1 {
-  max-width: 26rem; }
+  max-width: 26rem;
+}
 
 .example-column-2 {
-  max-width: 52rem; }
+  max-width: 52rem;
+}
 
 .example-modal-backdrop {
-  background: #232e3c;
+  background: #1d273b;
   opacity: 0.24;
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   height: 100%;
-  border-radius: 2px 2px 0 0; }
+  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: 1px solid #e6e8e9;
-    border-top: none; } }
-
-@media not print and (prefers-color-scheme: dark) {
-  .theme-dark-auto .example-code {
-    border: 1px solid #e6e8e9;
-    border-top: none; } }
-
+    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; }
+  min-height: 316px;
+}
 
 body.no-transitions * {
-  transition: none !important; }
+  transition: none !important;
+}
 
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
   position: relative;
   top: 0;
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem !important;
+}
 
 .demo-icon-preview {
   position: -webkit-sticky;
   position: sticky;
-  top: 0; }
+  top: 0;
+}
+.demo-icon-preview svg,
+.demo-icon-preview i {
+  width: 15rem;
+  height: 15rem;
+  font-size: 15rem;
+  stroke-width: 1.5;
+  margin: 0 auto;
+  display: block;
+}
+@media (max-width: 575.98px) {
   .demo-icon-preview svg,
-  .demo-icon-preview i {
-    width: 15rem;
-    height: 15rem;
-    font-size: 15rem;
-    stroke-width: 1.5;
-    margin: 0 auto;
-    display: block; }
-    @media (max-width: 575.98px) {
-      .demo-icon-preview svg,
-      .demo-icon-preview i {
-        width: 10rem;
-        height: 10rem;
-        font-size: 10rem; } }
+.demo-icon-preview i {
+    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; }
+          user-select: all;
+}
 
 .demo-dividers > p {
-  opacity: .2;
+  opacity: 0.2;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
-          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 7rem; }
+  list-style: none;
+}
+.demo-icons-list > * {
+  flex: 1 0 4rem;
+}
 
 .demo-icons-list-wrap {
-  overflow: hidden; }
+  overflow: hidden;
+}
 
 .demo-icons-list-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 7rem;
+  aspect-ratio: 1;
   text-align: center;
-  padding: .5rem;
-  border-right: 1px solid #e6e8e9;
-  border-bottom: 1px solid #e6e8e9;
+  padding: 0.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; }
+  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), 0.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), 0.04) 0 2px 4px 0;
+}
+.settings-scheme-light {
+  background: linear-gradient(135deg, #ffffff 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%);
+}

demo/dist/css/demo.rtl.css

@@ -0,0 +1,301 @@
+/*!
+* Tabler v1.0.0-beta15 (https://tabler.io)
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+pre.highlight,
+.highlight pre {
+  max-height: 30rem;
+  margin: 1.5rem 0;
+  overflow: auto;
+  border-radius: var(--tblr-border-radius);
+}
+pre.highlight::-webkit-scrollbar,
+.highlight pre::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  pre.highlight::-webkit-scrollbar,
+.highlight pre::-webkit-scrollbar {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+pre.highlight::-webkit-scrollbar-thumb,
+.highlight pre::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: rgba(var(--tblr-light-rgb), 0.16);
+}
+pre.highlight::-webkit-scrollbar-track,
+.highlight pre::-webkit-scrollbar-track {
+  background: rgba(var(--tblr-light-rgb), 0.06);
+}
+pre.highlight:hover::-webkit-scrollbar-thumb,
+.highlight pre:hover::-webkit-scrollbar-thumb {
+  background: rgba(var(--tblr-light-rgb), 0.32);
+}
+pre.highlight::-webkit-scrollbar-corner,
+.highlight pre::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.highlight {
+  margin: 0;
+}
+.highlight code > * {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.highlight .c, .highlight .c1 {
+  color: #a0aec0;
+}
+.highlight .nt, .highlight .nc, .highlight .nx {
+  color: #ff8383;
+}
+.highlight .na, .highlight .p {
+  color: #ffe484;
+}
+.highlight .s, .highlight .dl, .highlight .s2 {
+  color: #b5f4a5;
+}
+.highlight .k {
+  color: #93ddfd;
+}
+.highlight .s1, .highlight .mi {
+  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: 0.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: 0.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 svg,
+.demo-icon-preview i {
+  width: 15rem;
+  height: 15rem;
+  font-size: 15rem;
+  stroke-width: 1.5;
+  margin: 0 auto;
+  display: block;
+}
+@media (max-width: 575.98px) {
+  .demo-icon-preview svg,
+.demo-icon-preview i {
+    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: 0.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: 0.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), 0.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), 0.04) 0 2px 4px 0;
+}
+.settings-scheme-light {
+  background: linear-gradient(-135deg, #ffffff 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%);
+}

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

@@ -0,0 +1,9 @@
+/*!
+* Tabler v1.0.0-beta15 (https://tabler.io)
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 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%)}

demo/dist/css/tabler-payments.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.16 (https://tabler.io)
-* @version 1.0.0-alpha.16
+* Tabler v1.0.0-beta15 (https://tabler.io)
+* @version 1.0.0-beta15
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 .payment {
@@ -14,378 +14,507 @@
   vertical-align: bottom;
   font-style: normal;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 2px; }
+  border-radius: 2px;
+}
 
 .payment-provider-2checkout {
-  background-image: url("../img/payments/2checkout.svg"); }
+  background-image: url("../img/payments/2checkout.svg");
+}
 
 .payment-provider-2checkout-dark {
-  background-image: url("../img/payments/2checkout-dark.svg"); }
+  background-image: url("../img/payments/2checkout-dark.svg");
+}
 
 .payment-provider-alipay {
-  background-image: url("../img/payments/alipay.svg"); }
+  background-image: url("../img/payments/alipay.svg");
+}
 
 .payment-provider-alipay-dark {
-  background-image: url("../img/payments/alipay-dark.svg"); }
+  background-image: url("../img/payments/alipay-dark.svg");
+}
 
 .payment-provider-amazon {
-  background-image: url("../img/payments/amazon.svg"); }
+  background-image: url("../img/payments/amazon.svg");
+}
 
 .payment-provider-amazon-dark {
-  background-image: url("../img/payments/amazon-dark.svg"); }
+  background-image: url("../img/payments/amazon-dark.svg");
+}
 
 .payment-provider-americanexpress {
-  background-image: url("../img/payments/americanexpress.svg"); }
+  background-image: url("../img/payments/americanexpress.svg");
+}
 
 .payment-provider-americanexpress-dark {
-  background-image: url("../img/payments/americanexpress-dark.svg"); }
+  background-image: url("../img/payments/americanexpress-dark.svg");
+}
 
 .payment-provider-applepay {
-  background-image: url("../img/payments/applepay.svg"); }
+  background-image: url("../img/payments/applepay.svg");
+}
 
 .payment-provider-applepay-dark {
-  background-image: url("../img/payments/applepay-dark.svg"); }
+  background-image: url("../img/payments/applepay-dark.svg");
+}
 
 .payment-provider-bancontact {
-  background-image: url("../img/payments/bancontact.svg"); }
+  background-image: url("../img/payments/bancontact.svg");
+}
 
 .payment-provider-bancontact-dark {
-  background-image: url("../img/payments/bancontact-dark.svg"); }
+  background-image: url("../img/payments/bancontact-dark.svg");
+}
 
 .payment-provider-bitcoin {
-  background-image: url("../img/payments/bitcoin.svg"); }
+  background-image: url("../img/payments/bitcoin.svg");
+}
 
 .payment-provider-bitcoin-dark {
-  background-image: url("../img/payments/bitcoin-dark.svg"); }
+  background-image: url("../img/payments/bitcoin-dark.svg");
+}
 
 .payment-provider-bitpay {
-  background-image: url("../img/payments/bitpay.svg"); }
+  background-image: url("../img/payments/bitpay.svg");
+}
 
 .payment-provider-bitpay-dark {
-  background-image: url("../img/payments/bitpay-dark.svg"); }
+  background-image: url("../img/payments/bitpay-dark.svg");
+}
 
 .payment-provider-blik {
-  background-image: url("../img/payments/blik.svg"); }
+  background-image: url("../img/payments/blik.svg");
+}
 
 .payment-provider-blik-dark {
-  background-image: url("../img/payments/blik-dark.svg"); }
+  background-image: url("../img/payments/blik-dark.svg");
+}
 
 .payment-provider-cirrus {
-  background-image: url("../img/payments/cirrus.svg"); }
+  background-image: url("../img/payments/cirrus.svg");
+}
 
 .payment-provider-cirrus-dark {
-  background-image: url("../img/payments/cirrus-dark.svg"); }
+  background-image: url("../img/payments/cirrus-dark.svg");
+}
 
 .payment-provider-clickandbuy {
-  background-image: url("../img/payments/clickandbuy.svg"); }
+  background-image: url("../img/payments/clickandbuy.svg");
+}
 
 .payment-provider-clickandbuy-dark {
-  background-image: url("../img/payments/clickandbuy-dark.svg"); }
+  background-image: url("../img/payments/clickandbuy-dark.svg");
+}
 
 .payment-provider-coinkite {
-  background-image: url("../img/payments/coinkite.svg"); }
+  background-image: url("../img/payments/coinkite.svg");
+}
 
 .payment-provider-coinkite-dark {
-  background-image: url("../img/payments/coinkite-dark.svg"); }
+  background-image: url("../img/payments/coinkite-dark.svg");
+}
 
 .payment-provider-dinersclub {
-  background-image: url("../img/payments/dinersclub.svg"); }
+  background-image: url("../img/payments/dinersclub.svg");
+}
 
 .payment-provider-dinersclub-dark {
-  background-image: url("../img/payments/dinersclub-dark.svg"); }
+  background-image: url("../img/payments/dinersclub-dark.svg");
+}
 
 .payment-provider-directdebit {
-  background-image: url("../img/payments/directdebit.svg"); }
+  background-image: url("../img/payments/directdebit.svg");
+}
 
 .payment-provider-directdebit-dark {
-  background-image: url("../img/payments/directdebit-dark.svg"); }
+  background-image: url("../img/payments/directdebit-dark.svg");
+}
 
 .payment-provider-discover {
-  background-image: url("../img/payments/discover.svg"); }
+  background-image: url("../img/payments/discover.svg");
+}
 
 .payment-provider-discover-dark {
-  background-image: url("../img/payments/discover-dark.svg"); }
+  background-image: url("../img/payments/discover-dark.svg");
+}
 
 .payment-provider-dotpay {
-  background-image: url("../img/payments/dotpay.svg"); }
+  background-image: url("../img/payments/dotpay.svg");
+}
 
 .payment-provider-dotpay-dark {
-  background-image: url("../img/payments/dotpay-dark.svg"); }
+  background-image: url("../img/payments/dotpay-dark.svg");
+}
 
 .payment-provider-dwolla {
-  background-image: url("../img/payments/dwolla.svg"); }
+  background-image: url("../img/payments/dwolla.svg");
+}
 
 .payment-provider-dwolla-dark {
-  background-image: url("../img/payments/dwolla-dark.svg"); }
+  background-image: url("../img/payments/dwolla-dark.svg");
+}
 
 .payment-provider-ebay {
-  background-image: url("../img/payments/ebay.svg"); }
+  background-image: url("../img/payments/ebay.svg");
+}
 
 .payment-provider-ebay-dark {
-  background-image: url("../img/payments/ebay-dark.svg"); }
+  background-image: url("../img/payments/ebay-dark.svg");
+}
 
 .payment-provider-eway {
-  background-image: url("../img/payments/eway.svg"); }
+  background-image: url("../img/payments/eway.svg");
+}
 
 .payment-provider-eway-dark {
-  background-image: url("../img/payments/eway-dark.svg"); }
+  background-image: url("../img/payments/eway-dark.svg");
+}
 
 .payment-provider-giropay {
-  background-image: url("../img/payments/giropay.svg"); }
+  background-image: url("../img/payments/giropay.svg");
+}
 
 .payment-provider-giropay-dark {
-  background-image: url("../img/payments/giropay-dark.svg"); }
+  background-image: url("../img/payments/giropay-dark.svg");
+}
 
 .payment-provider-googlewallet {
-  background-image: url("../img/payments/googlewallet.svg"); }
+  background-image: url("../img/payments/googlewallet.svg");
+}
 
 .payment-provider-googlewallet-dark {
-  background-image: url("../img/payments/googlewallet-dark.svg"); }
+  background-image: url("../img/payments/googlewallet-dark.svg");
+}
 
 .payment-provider-ingenico {
-  background-image: url("../img/payments/ingenico.svg"); }
+  background-image: url("../img/payments/ingenico.svg");
+}
 
 .payment-provider-ingenico-dark {
-  background-image: url("../img/payments/ingenico-dark.svg"); }
+  background-image: url("../img/payments/ingenico-dark.svg");
+}
 
 .payment-provider-jcb {
-  background-image: url("../img/payments/jcb.svg"); }
+  background-image: url("../img/payments/jcb.svg");
+}
 
 .payment-provider-jcb-dark {
-  background-image: url("../img/payments/jcb-dark.svg"); }
+  background-image: url("../img/payments/jcb-dark.svg");
+}
 
 .payment-provider-klarna {
-  background-image: url("../img/payments/klarna.svg"); }
+  background-image: url("../img/payments/klarna.svg");
+}
 
 .payment-provider-klarna-dark {
-  background-image: url("../img/payments/klarna-dark.svg"); }
+  background-image: url("../img/payments/klarna-dark.svg");
+}
 
 .payment-provider-laser {
-  background-image: url("../img/payments/laser.svg"); }
+  background-image: url("../img/payments/laser.svg");
+}
 
 .payment-provider-laser-dark {
-  background-image: url("../img/payments/laser-dark.svg"); }
+  background-image: url("../img/payments/laser-dark.svg");
+}
 
 .payment-provider-maestro {
-  background-image: url("../img/payments/maestro.svg"); }
+  background-image: url("../img/payments/maestro.svg");
+}
 
 .payment-provider-maestro-dark {
-  background-image: url("../img/payments/maestro-dark.svg"); }
+  background-image: url("../img/payments/maestro-dark.svg");
+}
 
 .payment-provider-mastercard {
-  background-image: url("../img/payments/mastercard.svg"); }
+  background-image: url("../img/payments/mastercard.svg");
+}
 
 .payment-provider-mastercard-dark {
-  background-image: url("../img/payments/mastercard-dark.svg"); }
+  background-image: url("../img/payments/mastercard-dark.svg");
+}
 
 .payment-provider-mir {
-  background-image: url("../img/payments/mir.svg"); }
+  background-image: url("../img/payments/mir.svg");
+}
 
 .payment-provider-mir-dark {
-  background-image: url("../img/payments/mir-dark.svg"); }
+  background-image: url("../img/payments/mir-dark.svg");
+}
 
 .payment-provider-monero {
-  background-image: url("../img/payments/monero.svg"); }
+  background-image: url("../img/payments/monero.svg");
+}
 
 .payment-provider-monero-dark {
-  background-image: url("../img/payments/monero-dark.svg"); }
+  background-image: url("../img/payments/monero-dark.svg");
+}
 
 .payment-provider-neteller {
-  background-image: url("../img/payments/neteller.svg"); }
+  background-image: url("../img/payments/neteller.svg");
+}
 
 .payment-provider-neteller-dark {
-  background-image: url("../img/payments/neteller-dark.svg"); }
+  background-image: url("../img/payments/neteller-dark.svg");
+}
 
 .payment-provider-ogone {
-  background-image: url("../img/payments/ogone.svg"); }
+  background-image: url("../img/payments/ogone.svg");
+}
 
 .payment-provider-ogone-dark {
-  background-image: url("../img/payments/ogone-dark.svg"); }
+  background-image: url("../img/payments/ogone-dark.svg");
+}
 
 .payment-provider-okpay {
-  background-image: url("../img/payments/okpay.svg"); }
+  background-image: url("../img/payments/okpay.svg");
+}
 
 .payment-provider-okpay-dark {
-  background-image: url("../img/payments/okpay-dark.svg"); }
+  background-image: url("../img/payments/okpay-dark.svg");
+}
 
 .payment-provider-paybox {
-  background-image: url("../img/payments/paybox.svg"); }
+  background-image: url("../img/payments/paybox.svg");
+}
 
 .payment-provider-paybox-dark {
-  background-image: url("../img/payments/paybox-dark.svg"); }
+  background-image: url("../img/payments/paybox-dark.svg");
+}
 
 .payment-provider-paymill {
-  background-image: url("../img/payments/paymill.svg"); }
+  background-image: url("../img/payments/paymill.svg");
+}
 
 .payment-provider-paymill-dark {
-  background-image: url("../img/payments/paymill-dark.svg"); }
+  background-image: url("../img/payments/paymill-dark.svg");
+}
 
 .payment-provider-payone {
-  background-image: url("../img/payments/payone.svg"); }
+  background-image: url("../img/payments/payone.svg");
+}
 
 .payment-provider-payone-dark {
-  background-image: url("../img/payments/payone-dark.svg"); }
+  background-image: url("../img/payments/payone-dark.svg");
+}
 
 .payment-provider-payoneer {
-  background-image: url("../img/payments/payoneer.svg"); }
+  background-image: url("../img/payments/payoneer.svg");
+}
 
 .payment-provider-payoneer-dark {
-  background-image: url("../img/payments/payoneer-dark.svg"); }
+  background-image: url("../img/payments/payoneer-dark.svg");
+}
 
 .payment-provider-paypal {
-  background-image: url("../img/payments/paypal.svg"); }
+  background-image: url("../img/payments/paypal.svg");
+}
 
 .payment-provider-paypal-dark {
-  background-image: url("../img/payments/paypal-dark.svg"); }
+  background-image: url("../img/payments/paypal-dark.svg");
+}
 
 .payment-provider-paysafecard {
-  background-image: url("../img/payments/paysafecard.svg"); }
+  background-image: url("../img/payments/paysafecard.svg");
+}
 
 .payment-provider-paysafecard-dark {
-  background-image: url("../img/payments/paysafecard-dark.svg"); }
+  background-image: url("../img/payments/paysafecard-dark.svg");
+}
 
 .payment-provider-payu {
-  background-image: url("../img/payments/payu.svg"); }
+  background-image: url("../img/payments/payu.svg");
+}
 
 .payment-provider-payu-dark {
-  background-image: url("../img/payments/payu-dark.svg"); }
+  background-image: url("../img/payments/payu-dark.svg");
+}
 
 .payment-provider-payza {
-  background-image: url("../img/payments/payza.svg"); }
+  background-image: url("../img/payments/payza.svg");
+}
 
 .payment-provider-payza-dark {
-  background-image: url("../img/payments/payza-dark.svg"); }
+  background-image: url("../img/payments/payza-dark.svg");
+}
 
 .payment-provider-przelewy24 {
-  background-image: url("../img/payments/przelewy24.svg"); }
+  background-image: url("../img/payments/przelewy24.svg");
+}
 
 .payment-provider-przelewy24-dark {
-  background-image: url("../img/payments/przelewy24-dark.svg"); }
+  background-image: url("../img/payments/przelewy24-dark.svg");
+}
 
 .payment-provider-ripple {
-  background-image: url("../img/payments/ripple.svg"); }
+  background-image: url("../img/payments/ripple.svg");
+}
 
 .payment-provider-ripple-dark {
-  background-image: url("../img/payments/ripple-dark.svg"); }
+  background-image: url("../img/payments/ripple-dark.svg");
+}
 
 .payment-provider-sage {
-  background-image: url("../img/payments/sage.svg"); }
+  background-image: url("../img/payments/sage.svg");
+}
 
 .payment-provider-sage-dark {
-  background-image: url("../img/payments/sage-dark.svg"); }
+  background-image: url("../img/payments/sage-dark.svg");
+}
 
 .payment-provider-sepa {
-  background-image: url("../img/payments/sepa.svg"); }
+  background-image: url("../img/payments/sepa.svg");
+}
 
 .payment-provider-sepa-dark {
-  background-image: url("../img/payments/sepa-dark.svg"); }
+  background-image: url("../img/payments/sepa-dark.svg");
+}
 
 .payment-provider-shopify {
-  background-image: url("../img/payments/shopify.svg"); }
+  background-image: url("../img/payments/shopify.svg");
+}
 
 .payment-provider-shopify-dark {
-  background-image: url("../img/payments/shopify-dark.svg"); }
+  background-image: url("../img/payments/shopify-dark.svg");
+}
 
 .payment-provider-skrill {
-  background-image: url("../img/payments/skrill.svg"); }
+  background-image: url("../img/payments/skrill.svg");
+}
 
 .payment-provider-skrill-dark {
-  background-image: url("../img/payments/skrill-dark.svg"); }
+  background-image: url("../img/payments/skrill-dark.svg");
+}
 
 .payment-provider-solo {
-  background-image: url("../img/payments/solo.svg"); }
+  background-image: url("../img/payments/solo.svg");
+}
 
 .payment-provider-solo-dark {
-  background-image: url("../img/payments/solo-dark.svg"); }
+  background-image: url("../img/payments/solo-dark.svg");
+}
 
 .payment-provider-square {
-  background-image: url("../img/payments/square.svg"); }
+  background-image: url("../img/payments/square.svg");
+}
 
 .payment-provider-square-dark {
-  background-image: url("../img/payments/square-dark.svg"); }
+  background-image: url("../img/payments/square-dark.svg");
+}
 
 .payment-provider-stripe {
-  background-image: url("../img/payments/stripe.svg"); }
+  background-image: url("../img/payments/stripe.svg");
+}
 
 .payment-provider-stripe-dark {
-  background-image: url("../img/payments/stripe-dark.svg"); }
+  background-image: url("../img/payments/stripe-dark.svg");
+}
 
 .payment-provider-switch {
-  background-image: url("../img/payments/switch.svg"); }
+  background-image: url("../img/payments/switch.svg");
+}
 
 .payment-provider-switch-dark {
-  background-image: url("../img/payments/switch-dark.svg"); }
+  background-image: url("../img/payments/switch-dark.svg");
+}
 
 .payment-provider-tpay {
-  background-image: url("../img/payments/tpay.svg"); }
+  background-image: url("../img/payments/tpay.svg");
+}
 
 .payment-provider-tpay-dark {
-  background-image: url("../img/payments/tpay-dark.svg"); }
+  background-image: url("../img/payments/tpay-dark.svg");
+}
 
 .payment-provider-ukash {
-  background-image: url("../img/payments/ukash.svg"); }
+  background-image: url("../img/payments/ukash.svg");
+}
 
 .payment-provider-ukash-dark {
-  background-image: url("../img/payments/ukash-dark.svg"); }
+  background-image: url("../img/payments/ukash-dark.svg");
+}
 
 .payment-provider-unionpay {
-  background-image: url("../img/payments/unionpay.svg"); }
+  background-image: url("../img/payments/unionpay.svg");
+}
 
 .payment-provider-unionpay-dark {
-  background-image: url("../img/payments/unionpay-dark.svg"); }
+  background-image: url("../img/payments/unionpay-dark.svg");
+}
 
 .payment-provider-verifone {
-  background-image: url("../img/payments/verifone.svg"); }
+  background-image: url("../img/payments/verifone.svg");
+}
 
 .payment-provider-verifone-dark {
-  background-image: url("../img/payments/verifone-dark.svg"); }
+  background-image: url("../img/payments/verifone-dark.svg");
+}
 
 .payment-provider-verisign {
-  background-image: url("../img/payments/verisign.svg"); }
+  background-image: url("../img/payments/verisign.svg");
+}
 
 .payment-provider-verisign-dark {
-  background-image: url("../img/payments/verisign-dark.svg"); }
+  background-image: url("../img/payments/verisign-dark.svg");
+}
 
 .payment-provider-visa {
-  background-image: url("../img/payments/visa.svg"); }
+  background-image: url("../img/payments/visa.svg");
+}
 
 .payment-provider-visa-dark {
-  background-image: url("../img/payments/visa-dark.svg"); }
+  background-image: url("../img/payments/visa-dark.svg");
+}
 
 .payment-provider-webmoney {
-  background-image: url("../img/payments/webmoney.svg"); }
+  background-image: url("../img/payments/webmoney.svg");
+}
 
 .payment-provider-webmoney-dark {
-  background-image: url("../img/payments/webmoney-dark.svg"); }
+  background-image: url("../img/payments/webmoney-dark.svg");
+}
 
 .payment-provider-westernunion {
-  background-image: url("../img/payments/westernunion.svg"); }
+  background-image: url("../img/payments/westernunion.svg");
+}
 
 .payment-provider-westernunion-dark {
-  background-image: url("../img/payments/westernunion-dark.svg"); }
+  background-image: url("../img/payments/westernunion-dark.svg");
+}
 
 .payment-provider-worldpay {
-  background-image: url("../img/payments/worldpay.svg"); }
+  background-image: url("../img/payments/worldpay.svg");
+}
 
 .payment-provider-worldpay-dark {
-  background-image: url("../img/payments/worldpay-dark.svg"); }
+  background-image: url("../img/payments/worldpay-dark.svg");
+}
 
 .payment-xs {
-  width: 2.083325rem;
-  height: 1.25rem; }
+  width: 2.49999rem;
+  height: 1.5rem;
+}
 
 .payment-sm {
   width: 3.33332rem;
-  height: 2rem; }
+  height: 2rem;
+}
 
 .payment-md {
-  width: 6.249975rem;
-  height: 3.75rem; }
+  width: 6.66664rem;
+  height: 4rem;
+}
 
 .payment-lg {
   width: 8.3333rem;
-  height: 5rem; }
+  height: 5rem;
+}
 
 .payment-xl {
   width: 11.66662rem;
-  height: 7rem; }
+  height: 7rem;
+}
+
+.payment-2xl {
+  width: 18.33326rem;
+  height: 11rem;
+}

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

@@ -0,0 +1,520 @@
+/*!
+* Tabler v1.0.0-beta15 (https://tabler.io)
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+.payment {
+  width: 3.33332rem;
+  height: 2rem;
+  display: inline-block;
+  background: no-repeat center/100% 100%;
+  vertical-align: bottom;
+  font-style: normal;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+}
+
+.payment-provider-2checkout {
+  background-image: url("../img/payments/2checkout.svg");
+}
+
+.payment-provider-2checkout-dark {
+  background-image: url("../img/payments/2checkout-dark.svg");
+}
+
+.payment-provider-alipay {
+  background-image: url("../img/payments/alipay.svg");
+}
+
+.payment-provider-alipay-dark {
+  background-image: url("../img/payments/alipay-dark.svg");
+}
+
+.payment-provider-amazon {
+  background-image: url("../img/payments/amazon.svg");
+}
+
+.payment-provider-amazon-dark {
+  background-image: url("../img/payments/amazon-dark.svg");
+}
+
+.payment-provider-americanexpress {
+  background-image: url("../img/payments/americanexpress.svg");
+}
+
+.payment-provider-americanexpress-dark {
+  background-image: url("../img/payments/americanexpress-dark.svg");
+}
+
+.payment-provider-applepay {
+  background-image: url("../img/payments/applepay.svg");
+}
+
+.payment-provider-applepay-dark {
+  background-image: url("../img/payments/applepay-dark.svg");
+}
+
+.payment-provider-bancontact {
+  background-image: url("../img/payments/bancontact.svg");
+}
+
+.payment-provider-bancontact-dark {
+  background-image: url("../img/payments/bancontact-dark.svg");
+}
+
+.payment-provider-bitcoin {
+  background-image: url("../img/payments/bitcoin.svg");
+}
+
+.payment-provider-bitcoin-dark {
+  background-image: url("../img/payments/bitcoin-dark.svg");
+}
+
+.payment-provider-bitpay {
+  background-image: url("../img/payments/bitpay.svg");
+}
+
+.payment-provider-bitpay-dark {
+  background-image: url("../img/payments/bitpay-dark.svg");
+}
+
+.payment-provider-blik {
+  background-image: url("../img/payments/blik.svg");
+}
+
+.payment-provider-blik-dark {
+  background-image: url("../img/payments/blik-dark.svg");
+}
+
+.payment-provider-cirrus {
+  background-image: url("../img/payments/cirrus.svg");
+}
+
+.payment-provider-cirrus-dark {
+  background-image: url("../img/payments/cirrus-dark.svg");
+}
+
+.payment-provider-clickandbuy {
+  background-image: url("../img/payments/clickandbuy.svg");
+}
+
+.payment-provider-clickandbuy-dark {
+  background-image: url("../img/payments/clickandbuy-dark.svg");
+}
+
+.payment-provider-coinkite {
+  background-image: url("../img/payments/coinkite.svg");
+}
+
+.payment-provider-coinkite-dark {
+  background-image: url("../img/payments/coinkite-dark.svg");
+}
+
+.payment-provider-dinersclub {
+  background-image: url("../img/payments/dinersclub.svg");
+}
+
+.payment-provider-dinersclub-dark {
+  background-image: url("../img/payments/dinersclub-dark.svg");
+}
+
+.payment-provider-directdebit {
+  background-image: url("../img/payments/directdebit.svg");
+}
+
+.payment-provider-directdebit-dark {
+  background-image: url("../img/payments/directdebit-dark.svg");
+}
+
+.payment-provider-discover {
+  background-image: url("../img/payments/discover.svg");
+}
+
+.payment-provider-discover-dark {
+  background-image: url("../img/payments/discover-dark.svg");
+}
+
+.payment-provider-dotpay {
+  background-image: url("../img/payments/dotpay.svg");
+}
+
+.payment-provider-dotpay-dark {
+  background-image: url("../img/payments/dotpay-dark.svg");
+}
+
+.payment-provider-dwolla {
+  background-image: url("../img/payments/dwolla.svg");
+}
+
+.payment-provider-dwolla-dark {
+  background-image: url("../img/payments/dwolla-dark.svg");
+}
+
+.payment-provider-ebay {
+  background-image: url("../img/payments/ebay.svg");
+}
+
+.payment-provider-ebay-dark {
+  background-image: url("../img/payments/ebay-dark.svg");
+}
+
+.payment-provider-eway {
+  background-image: url("../img/payments/eway.svg");
+}
+
+.payment-provider-eway-dark {
+  background-image: url("../img/payments/eway-dark.svg");
+}
+
+.payment-provider-giropay {
+  background-image: url("../img/payments/giropay.svg");
+}
+
+.payment-provider-giropay-dark {
+  background-image: url("../img/payments/giropay-dark.svg");
+}
+
+.payment-provider-googlewallet {
+  background-image: url("../img/payments/googlewallet.svg");
+}
+
+.payment-provider-googlewallet-dark {
+  background-image: url("../img/payments/googlewallet-dark.svg");
+}
+
+.payment-provider-ingenico {
+  background-image: url("../img/payments/ingenico.svg");
+}
+
+.payment-provider-ingenico-dark {
+  background-image: url("../img/payments/ingenico-dark.svg");
+}
+
+.payment-provider-jcb {
+  background-image: url("../img/payments/jcb.svg");
+}
+
+.payment-provider-jcb-dark {
+  background-image: url("../img/payments/jcb-dark.svg");
+}
+
+.payment-provider-klarna {
+  background-image: url("../img/payments/klarna.svg");
+}
+
+.payment-provider-klarna-dark {
+  background-image: url("../img/payments/klarna-dark.svg");
+}
+
+.payment-provider-laser {
+  background-image: url("../img/payments/laser.svg");
+}
+
+.payment-provider-laser-dark {
+  background-image: url("../img/payments/laser-dark.svg");
+}
+
+.payment-provider-maestro {
+  background-image: url("../img/payments/maestro.svg");
+}
+
+.payment-provider-maestro-dark {
+  background-image: url("../img/payments/maestro-dark.svg");
+}
+
+.payment-provider-mastercard {
+  background-image: url("../img/payments/mastercard.svg");
+}
+
+.payment-provider-mastercard-dark {
+  background-image: url("../img/payments/mastercard-dark.svg");
+}
+
+.payment-provider-mir {
+  background-image: url("../img/payments/mir.svg");
+}
+
+.payment-provider-mir-dark {
+  background-image: url("../img/payments/mir-dark.svg");
+}
+
+.payment-provider-monero {
+  background-image: url("../img/payments/monero.svg");
+}
+
+.payment-provider-monero-dark {
+  background-image: url("../img/payments/monero-dark.svg");
+}
+
+.payment-provider-neteller {
+  background-image: url("../img/payments/neteller.svg");
+}
+
+.payment-provider-neteller-dark {
+  background-image: url("../img/payments/neteller-dark.svg");
+}
+
+.payment-provider-ogone {
+  background-image: url("../img/payments/ogone.svg");
+}
+
+.payment-provider-ogone-dark {
+  background-image: url("../img/payments/ogone-dark.svg");
+}
+
+.payment-provider-okpay {
+  background-image: url("../img/payments/okpay.svg");
+}
+
+.payment-provider-okpay-dark {
+  background-image: url("../img/payments/okpay-dark.svg");
+}
+
+.payment-provider-paybox {
+  background-image: url("../img/payments/paybox.svg");
+}
+
+.payment-provider-paybox-dark {
+  background-image: url("../img/payments/paybox-dark.svg");
+}
+
+.payment-provider-paymill {
+  background-image: url("../img/payments/paymill.svg");
+}
+
+.payment-provider-paymill-dark {
+  background-image: url("../img/payments/paymill-dark.svg");
+}
+
+.payment-provider-payone {
+  background-image: url("../img/payments/payone.svg");
+}
+
+.payment-provider-payone-dark {
+  background-image: url("../img/payments/payone-dark.svg");
+}
+
+.payment-provider-payoneer {
+  background-image: url("../img/payments/payoneer.svg");
+}
+
+.payment-provider-payoneer-dark {
+  background-image: url("../img/payments/payoneer-dark.svg");
+}
+
+.payment-provider-paypal {
+  background-image: url("../img/payments/paypal.svg");
+}
+
+.payment-provider-paypal-dark {
+  background-image: url("../img/payments/paypal-dark.svg");
+}
+
+.payment-provider-paysafecard {
+  background-image: url("../img/payments/paysafecard.svg");
+}
+
+.payment-provider-paysafecard-dark {
+  background-image: url("../img/payments/paysafecard-dark.svg");
+}
+
+.payment-provider-payu {
+  background-image: url("../img/payments/payu.svg");
+}
+
+.payment-provider-payu-dark {
+  background-image: url("../img/payments/payu-dark.svg");
+}
+
+.payment-provider-payza {
+  background-image: url("../img/payments/payza.svg");
+}
+
+.payment-provider-payza-dark {
+  background-image: url("../img/payments/payza-dark.svg");
+}
+
+.payment-provider-przelewy24 {
+  background-image: url("../img/payments/przelewy24.svg");
+}
+
+.payment-provider-przelewy24-dark {
+  background-image: url("../img/payments/przelewy24-dark.svg");
+}
+
+.payment-provider-ripple {
+  background-image: url("../img/payments/ripple.svg");
+}
+
+.payment-provider-ripple-dark {
+  background-image: url("../img/payments/ripple-dark.svg");
+}
+
+.payment-provider-sage {
+  background-image: url("../img/payments/sage.svg");
+}
+
+.payment-provider-sage-dark {
+  background-image: url("../img/payments/sage-dark.svg");
+}
+
+.payment-provider-sepa {
+  background-image: url("../img/payments/sepa.svg");
+}
+
+.payment-provider-sepa-dark {
+  background-image: url("../img/payments/sepa-dark.svg");
+}
+
+.payment-provider-shopify {
+  background-image: url("../img/payments/shopify.svg");
+}
+
+.payment-provider-shopify-dark {
+  background-image: url("../img/payments/shopify-dark.svg");
+}
+
+.payment-provider-skrill {
+  background-image: url("../img/payments/skrill.svg");
+}
+
+.payment-provider-skrill-dark {
+  background-image: url("../img/payments/skrill-dark.svg");
+}
+
+.payment-provider-solo {
+  background-image: url("../img/payments/solo.svg");
+}
+
+.payment-provider-solo-dark {
+  background-image: url("../img/payments/solo-dark.svg");
+}
+
+.payment-provider-square {
+  background-image: url("../img/payments/square.svg");
+}
+
+.payment-provider-square-dark {
+  background-image: url("../img/payments/square-dark.svg");
+}
+
+.payment-provider-stripe {
+  background-image: url("../img/payments/stripe.svg");
+}
+
+.payment-provider-stripe-dark {
+  background-image: url("../img/payments/stripe-dark.svg");
+}
+
+.payment-provider-switch {
+  background-image: url("../img/payments/switch.svg");
+}
+
+.payment-provider-switch-dark {
+  background-image: url("../img/payments/switch-dark.svg");
+}
+
+.payment-provider-tpay {
+  background-image: url("../img/payments/tpay.svg");
+}
+
+.payment-provider-tpay-dark {
+  background-image: url("../img/payments/tpay-dark.svg");
+}
+
+.payment-provider-ukash {
+  background-image: url("../img/payments/ukash.svg");
+}
+
+.payment-provider-ukash-dark {
+  background-image: url("../img/payments/ukash-dark.svg");
+}
+
+.payment-provider-unionpay {
+  background-image: url("../img/payments/unionpay.svg");
+}
+
+.payment-provider-unionpay-dark {
+  background-image: url("../img/payments/unionpay-dark.svg");
+}
+
+.payment-provider-verifone {
+  background-image: url("../img/payments/verifone.svg");
+}
+
+.payment-provider-verifone-dark {
+  background-image: url("../img/payments/verifone-dark.svg");
+}
+
+.payment-provider-verisign {
+  background-image: url("../img/payments/verisign.svg");
+}
+
+.payment-provider-verisign-dark {
+  background-image: url("../img/payments/verisign-dark.svg");
+}
+
+.payment-provider-visa {
+  background-image: url("../img/payments/visa.svg");
+}
+
+.payment-provider-visa-dark {
+  background-image: url("../img/payments/visa-dark.svg");
+}
+
+.payment-provider-webmoney {
+  background-image: url("../img/payments/webmoney.svg");
+}
+
+.payment-provider-webmoney-dark {
+  background-image: url("../img/payments/webmoney-dark.svg");
+}
+
+.payment-provider-westernunion {
+  background-image: url("../img/payments/westernunion.svg");
+}
+
+.payment-provider-westernunion-dark {
+  background-image: url("../img/payments/westernunion-dark.svg");
+}
+
+.payment-provider-worldpay {
+  background-image: url("../img/payments/worldpay.svg");
+}
+
+.payment-provider-worldpay-dark {
+  background-image: url("../img/payments/worldpay-dark.svg");
+}
+
+.payment-xs {
+  width: 2.49999rem;
+  height: 1.5rem;
+}
+
+.payment-sm {
+  width: 3.33332rem;
+  height: 2rem;
+}
+
+.payment-md {
+  width: 6.66664rem;
+  height: 4rem;
+}
+
+.payment-lg {
+  width: 8.3333rem;
+  height: 5rem;
+}
+
+.payment-xl {
+  width: 11.66662rem;
+  height: 7rem;
+}
+
+.payment-2xl {
+  width: 18.33326rem;
+  height: 11rem;
+}

demo/dist/js/demo-theme.js

@@ -0,0 +1,32 @@
+/*!
+* Tabler v1.0.0-beta15 (https://tabler.io)
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+(function (factory) {
+	typeof define === 'function' && define.amd ? define(factory) :
+	factory();
+})((function () { 'use strict';
+
+	var themeStorageKey = 'tablerTheme';
+	var defaultTheme = 'light';
+	var selectedTheme;
+	var params = new Proxy(new URLSearchParams(window.location.search), {
+	  get: function get(searchParams, prop) {
+	    return searchParams.get(prop);
+	  }
+	});
+	if (!!params.theme) {
+	  localStorage.setItem(themeStorageKey, params.theme);
+	  selectedTheme = params.theme;
+	} else {
+	  var storedTheme = localStorage.getItem(themeStorageKey);
+	  selectedTheme = storedTheme ? storedTheme : defaultTheme;
+	}
+	document.body.classList.remove('theme-dark', 'theme-light');
+	document.body.classList.add("theme-".concat(selectedTheme));
+
+}));

demo/dist/js/demo-theme.min.js

@@ -0,0 +1,9 @@
+/*!
+* Tabler v1.0.0-beta15 (https://tabler.io)
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";var e,t="tablerTheme",n=new Proxy(new URLSearchParams(window.location.search),{get:function(e,t){return e.get(t)}});if(n.theme)localStorage.setItem(t,n.theme),e=n.theme;else{var o=localStorage.getItem(t);e=o||"light"}document.body.classList.remove("theme-dark","theme-light"),document.body.classList.add("theme-".concat(e))}));

demo/dist/js/demo.js

@@ -0,0 +1,141 @@
+/*!
+* Tabler v1.0.0-beta15 (https://tabler.io)
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+(function (factory) {
+  typeof define === 'function' && define.amd ? define(factory) :
+  factory();
+})((function () { 'use strict';
+
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+
+    var _s, _e;
+
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var items = {
+    'menu-position': {
+      localStorage: 'tablerMenuPosition',
+      default: 'top'
+    },
+    'menu-behavior': {
+      localStorage: 'tablerMenuBehavior',
+      default: 'sticky'
+    },
+    'container-layout': {
+      localStorage: 'tablerContainerLayout',
+      default: 'boxed'
+    }
+  };
+  var config = {};
+  for (var _i = 0, _Object$entries = Object.entries(items); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        key = _Object$entries$_i[0],
+        params = _Object$entries$_i[1];
+    var lsParams = localStorage.getItem(params.localStorage);
+    config[key] = lsParams ? lsParams : params.default;
+  }
+  var parseUrl = function parseUrl() {
+    var search = window.location.search.substring(1);
+    var params = search.split('&');
+    for (var i = 0; i < params.length; i++) {
+      var arr = params[i].split('=');
+      var _key = arr[0];
+      var value = arr[1];
+      if (!!items[_key]) {
+        localStorage.setItem(items[_key].localStorage, value);
+        config[_key] = value;
+      }
+    }
+  };
+  var toggleFormControls = function toggleFormControls(form) {
+    for (var _i2 = 0, _Object$entries2 = Object.entries(items); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+          _key2 = _Object$entries2$_i[0];
+          _Object$entries2$_i[1];
+      var elem = form.querySelector("[name=\"settings-".concat(_key2, "\"][value=\"").concat(config[_key2], "\"]"));
+      if (elem) {
+        elem.checked = true;
+      }
+    }
+  };
+  var submitForm = function submitForm(form) {
+    for (var _i3 = 0, _Object$entries3 = Object.entries(items); _i3 < _Object$entries3.length; _i3++) {
+      var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),
+          _key3 = _Object$entries3$_i[0],
+          _params2 = _Object$entries3$_i[1];
+      var value = form.querySelector("[name=\"settings-".concat(_key3, "\"]:checked")).value;
+      localStorage.setItem(_params2.localStorage, value);
+      config[_key3] = value;
+    }
+    window.dispatchEvent(new Event('resize'));
+    new bootstrap.Offcanvas(form).hide();
+  };
+  parseUrl();
+  var form = document.querySelector('#offcanvasSettings');
+  if (form) {
+    form.addEventListener('submit', function (e) {
+      e.preventDefault();
+      submitForm(form);
+    });
+    toggleFormControls(form);
+  }
+
+}));

demo/dist/js/demo.min.js

@@ -0,0 +1,9 @@
+/*!
+* Tabler v1.0.0-beta15 (https://tabler.io)
+* @version 1.0.0-beta15
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";function t(t,r){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==r)return;var n,o,a=[],l=!0,i=!1;try{for(r=r.call(t);!(l=(n=r.next()).done)&&(a.push(n.value),!e||a.length!==e);l=!0);}catch(t){i=!0,o=t}finally{try{l||null==r.return||r.return()}finally{if(i)throw o}}return a}(t,r)||function(t,r){if(!t)return;if("string"==typeof t)return e(t,r);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,r)}(t,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}for(var r={"menu-position":{localStorage:"tablerMenuPosition",default:"top"},"menu-behavior":{localStorage:"tablerMenuBehavior",default:"sticky"},"container-layout":{localStorage:"tablerContainerLayout",default:"boxed"}},n={},o=0,a=Object.entries(r);o<a.length;o++){var l=t(a[o],2),i=l[0],c=l[1],u=localStorage.getItem(c.localStorage);n[i]=u||c.default}!function(){for(var t=window.location.search.substring(1).split("&"),e=0;e<t.length;e++){var o=t[e].split("="),a=o[0],l=o[1];r[a]&&(localStorage.setItem(r[a].localStorage,l),n[a]=l)}}();var f=document.querySelector("#offcanvasSettings");f&&(f.addEventListener("submit",(function(e){e.preventDefault(),function(e){for(var o=0,a=Object.entries(r);o<a.length;o++){var l=t(a[o],2),i=l[0],c=l[1],u=e.querySelector('[name="settings-'.concat(i,'"]:checked')).value;localStorage.setItem(c.localStorage,u),n[i]=u}window.dispatchEvent(new Event("resize")),new bootstrap.Offcanvas(e).hide()}(f)})),function(e){for(var o=0,a=Object.entries(r);o<a.length;o++){var l=t(a[o],2),i=l[0];l[1];var c=e.querySelector('[name="settings-'.concat(i,'"][value="').concat(n[i],'"]'));c&&(c.checked=!0)}}(f))}));

demo/dist/libs/apexcharts/dist/apexcharts.css

@@ -0,0 +1,691 @@
+.apexcharts-canvas {
+  position: relative;
+  user-select: none;
+  /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
+}
+
+
+/* scrollbar is not visible by default for legend, hence forcing the visibility */
+.apexcharts-canvas ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 6px;
+}
+
+.apexcharts-canvas ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .5);
+  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+}
+
+
+.apexcharts-inner {
+  position: relative;
+}
+
+.apexcharts-text tspan {
+  font-family: inherit;
+}
+
+.legend-mouseover-inactive {
+  transition: 0.15s ease all;
+  opacity: 0.20;
+}
+
+.apexcharts-series-collapsed {
+  opacity: 0;
+}
+
+.apexcharts-tooltip {
+  border-radius: 5px;
+  box-shadow: 2px 2px 6px -4px #999;
+  cursor: default;
+  font-size: 14px;
+  left: 62px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  white-space: nowrap;
+  z-index: 12;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-tooltip.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light {
+  border: 1px solid #e3e3e3;
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.apexcharts-tooltip.apexcharts-theme-dark {
+  color: #fff;
+  background: rgba(30, 30, 30, 0.8);
+}
+
+.apexcharts-tooltip * {
+  font-family: inherit;
+}
+
+
+.apexcharts-tooltip-title {
+  padding: 6px;
+  font-size: 15px;
+  margin-bottom: 4px;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+  background: #ECEFF1;
+  border-bottom: 1px solid #ddd;
+}
+
+.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
+  background: rgba(0, 0, 0, 0.7);
+  border-bottom: 1px solid #333;
+}
+
+.apexcharts-tooltip-text-y-value,
+.apexcharts-tooltip-text-goals-value,
+.apexcharts-tooltip-text-z-value {
+  display: inline-block;
+  font-weight: 600;
+  margin-left: 5px;
+}
+
+.apexcharts-tooltip-title:empty,
+.apexcharts-tooltip-text-y-label:empty,
+.apexcharts-tooltip-text-y-value:empty,
+.apexcharts-tooltip-text-goals-label:empty,
+.apexcharts-tooltip-text-goals-value:empty,
+.apexcharts-tooltip-text-z-value:empty {
+  display: none;
+}
+
+.apexcharts-tooltip-text-y-value,
+.apexcharts-tooltip-text-goals-value,
+.apexcharts-tooltip-text-z-value {
+  font-weight: 600;
+}
+
+.apexcharts-tooltip-text-goals-label, 
+.apexcharts-tooltip-text-goals-value {
+  padding: 6px 0 5px;
+}
+
+.apexcharts-tooltip-goals-group, 
+.apexcharts-tooltip-text-goals-label, 
+.apexcharts-tooltip-text-goals-value {
+  display: flex;
+}
+.apexcharts-tooltip-text-goals-label:not(:empty),
+.apexcharts-tooltip-text-goals-value:not(:empty) {
+  margin-top: -6px;
+}
+
+.apexcharts-tooltip-marker {
+  width: 12px;
+  height: 12px;
+  position: relative;
+  top: 0px;
+  margin-right: 10px;
+  border-radius: 50%;
+}
+
+.apexcharts-tooltip-series-group {
+  padding: 0 10px;
+  display: none;
+  text-align: left;
+  justify-content: left;
+  align-items: center;
+}
+
+.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
+  opacity: 1;
+}
+
+.apexcharts-tooltip-series-group.apexcharts-active,
+.apexcharts-tooltip-series-group:last-child {
+  padding-bottom: 4px;
+}
+
+.apexcharts-tooltip-series-group-hidden {
+  opacity: 0;
+  height: 0;
+  line-height: 0;
+  padding: 0 !important;
+}
+
+.apexcharts-tooltip-y-group {
+  padding: 6px 0 5px;
+}
+
+.apexcharts-tooltip-box, .apexcharts-custom-tooltip {
+  padding: 4px 8px;
+}
+
+.apexcharts-tooltip-boxPlot {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.apexcharts-tooltip-box>div {
+  margin: 4px 0;
+}
+
+.apexcharts-tooltip-box span.value {
+  font-weight: bold;
+}
+
+.apexcharts-tooltip-rangebar {
+  padding: 5px 8px;
+}
+
+.apexcharts-tooltip-rangebar .category {
+  font-weight: 600;
+  color: #777;
+}
+
+.apexcharts-tooltip-rangebar .series-name {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.apexcharts-xaxistooltip {
+  opacity: 0;
+  padding: 9px 10px;
+  pointer-events: none;
+  color: #373d3f;
+  font-size: 13px;
+  text-align: center;
+  border-radius: 2px;
+  position: absolute;
+  z-index: 10;
+  background: #ECEFF1;
+  border: 1px solid #90A4AE;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-xaxistooltip.apexcharts-theme-dark {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.apexcharts-xaxistooltip:after,
+.apexcharts-xaxistooltip:before {
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.apexcharts-xaxistooltip:after {
+  border-color: rgba(236, 239, 241, 0);
+  border-width: 6px;
+  margin-left: -6px;
+}
+
+.apexcharts-xaxistooltip:before {
+  border-color: rgba(144, 164, 174, 0);
+  border-width: 7px;
+  margin-left: -7px;
+}
+
+.apexcharts-xaxistooltip-bottom:after,
+.apexcharts-xaxistooltip-bottom:before {
+  bottom: 100%;
+}
+
+.apexcharts-xaxistooltip-top:after,
+.apexcharts-xaxistooltip-top:before {
+  top: 100%;
+}
+
+.apexcharts-xaxistooltip-bottom:after {
+  border-bottom-color: #ECEFF1;
+}
+
+.apexcharts-xaxistooltip-bottom:before {
+  border-bottom-color: #90A4AE;
+}
+
+.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-top:after {
+  border-top-color: #ECEFF1
+}
+
+.apexcharts-xaxistooltip-top:before {
+  border-top-color: #90A4AE;
+}
+
+.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
+  border-top-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
+  border-top-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-yaxistooltip {
+  opacity: 0;
+  padding: 4px 10px;
+  pointer-events: none;
+  color: #373d3f;
+  font-size: 13px;
+  text-align: center;
+  border-radius: 2px;
+  position: absolute;
+  z-index: 10;
+  background: #ECEFF1;
+  border: 1px solid #90A4AE;
+}
+
+.apexcharts-yaxistooltip.apexcharts-theme-dark {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.apexcharts-yaxistooltip:after,
+.apexcharts-yaxistooltip:before {
+  top: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.apexcharts-yaxistooltip:after {
+  border-color: rgba(236, 239, 241, 0);
+  border-width: 6px;
+  margin-top: -6px;
+}
+
+.apexcharts-yaxistooltip:before {
+  border-color: rgba(144, 164, 174, 0);
+  border-width: 7px;
+  margin-top: -7px;
+}
+
+.apexcharts-yaxistooltip-left:after,
+.apexcharts-yaxistooltip-left:before {
+  left: 100%;
+}
+
+.apexcharts-yaxistooltip-right:after,
+.apexcharts-yaxistooltip-right:before {
+  right: 100%;
+}
+
+.apexcharts-yaxistooltip-left:after {
+  border-left-color: #ECEFF1;
+}
+
+.apexcharts-yaxistooltip-left:before {
+  border-left-color: #90A4AE;
+}
+
+.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
+  border-left-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
+  border-left-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-right:after {
+  border-right-color: #ECEFF1;
+}
+
+.apexcharts-yaxistooltip-right:before {
+  border-right-color: #90A4AE;
+}
+
+.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
+  border-right-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
+  border-right-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip.apexcharts-active {
+  opacity: 1;
+}
+
+.apexcharts-yaxistooltip-hidden {
+  display: none;
+}
+
+.apexcharts-xcrosshairs,
+.apexcharts-ycrosshairs {
+  pointer-events: none;
+  opacity: 0;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-xcrosshairs.apexcharts-active,
+.apexcharts-ycrosshairs.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-ycrosshairs-hidden {
+  opacity: 0;
+}
+
+.apexcharts-selection-rect {
+  cursor: move;
+}
+
+.svg_select_boundingRect, .svg_select_points_rot {
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+.apexcharts-selection-rect + g .svg_select_boundingRect,
+.apexcharts-selection-rect + g .svg_select_points_rot {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.apexcharts-selection-rect + g .svg_select_points_l,
+.apexcharts-selection-rect + g .svg_select_points_r {
+  cursor: ew-resize;
+  opacity: 1;
+  visibility: visible;
+}
+
+.svg_select_points {
+  fill: #efefef;
+  stroke: #333;
+  rx: 2;
+}
+
+.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
+  cursor: crosshair
+}
+
+.apexcharts-svg.apexcharts-zoomable.hovering-pan {
+  cursor: move
+}
+
+.apexcharts-zoom-icon,
+.apexcharts-zoomin-icon,
+.apexcharts-zoomout-icon,
+.apexcharts-reset-icon,
+.apexcharts-pan-icon,
+.apexcharts-selection-icon,
+.apexcharts-menu-icon,
+.apexcharts-toolbar-custom-icon {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  line-height: 24px;
+  color: #6E8192;
+  text-align: center;
+}
+
+.apexcharts-zoom-icon svg,
+.apexcharts-zoomin-icon svg,
+.apexcharts-zoomout-icon svg,
+.apexcharts-reset-icon svg,
+.apexcharts-menu-icon svg {
+  fill: #6E8192;
+}
+
+.apexcharts-selection-icon svg {
+  fill: #444;
+  transform: scale(0.76)
+}
+
+.apexcharts-theme-dark .apexcharts-zoom-icon svg,
+.apexcharts-theme-dark .apexcharts-zoomin-icon svg,
+.apexcharts-theme-dark .apexcharts-zoomout-icon svg,
+.apexcharts-theme-dark .apexcharts-reset-icon svg,
+.apexcharts-theme-dark .apexcharts-pan-icon svg,
+.apexcharts-theme-dark .apexcharts-selection-icon svg,
+.apexcharts-theme-dark .apexcharts-menu-icon svg,
+.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
+  fill: #f3f4f5;
+}
+
+.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
+.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
+.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
+  fill: #008FFB;
+}
+
+.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
+.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
+.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
+.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
+.apexcharts-theme-light .apexcharts-reset-icon:hover svg,
+.apexcharts-theme-light .apexcharts-menu-icon:hover svg {
+  fill: #333;
+}
+
+.apexcharts-selection-icon,
+.apexcharts-menu-icon {
+  position: relative;
+}
+
+.apexcharts-reset-icon {
+  margin-left: 5px;
+}
+
+.apexcharts-zoom-icon,
+.apexcharts-reset-icon,
+.apexcharts-menu-icon {
+  transform: scale(0.85);
+}
+
+.apexcharts-zoomin-icon,
+.apexcharts-zoomout-icon {
+  transform: scale(0.7)
+}
+
+.apexcharts-zoomout-icon {
+  margin-right: 3px;
+}
+
+.apexcharts-pan-icon {
+  transform: scale(0.62);
+  position: relative;
+  left: 1px;
+  top: 0px;
+}
+
+.apexcharts-pan-icon svg {
+  fill: #fff;
+  stroke: #6E8192;
+  stroke-width: 2;
+}
+
+.apexcharts-pan-icon.apexcharts-selected svg {
+  stroke: #008FFB;
+}
+
+.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
+  stroke: #333;
+}
+
+.apexcharts-toolbar {
+  position: absolute;
+  z-index: 11;
+  max-width: 176px;
+  text-align: right;
+  border-radius: 3px;
+  padding: 0px 6px 2px 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.apexcharts-menu {
+  background: #fff;
+  position: absolute;
+  top: 100%;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 3px;
+  right: 10px;
+  opacity: 0;
+  min-width: 110px;
+  transition: 0.15s ease all;
+  pointer-events: none;
+}
+
+.apexcharts-menu.apexcharts-menu-open {
+  opacity: 1;
+  pointer-events: all;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-menu-item {
+  padding: 6px 7px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.apexcharts-theme-light .apexcharts-menu-item:hover {
+  background: #eee;
+}
+
+.apexcharts-theme-dark .apexcharts-menu {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+}
+
+@media screen and (min-width: 768px) {
+  .apexcharts-canvas:hover .apexcharts-toolbar {
+    opacity: 1;
+  }
+}
+
+.apexcharts-datalabel.apexcharts-element-hidden {
+  opacity: 0;
+}
+
+.apexcharts-pie-label,
+.apexcharts-datalabels,
+.apexcharts-datalabel,
+.apexcharts-datalabel-label,
+.apexcharts-datalabel-value {
+  cursor: default;
+  pointer-events: none;
+}
+
+.apexcharts-pie-label-delay {
+  opacity: 0;
+  animation-name: opaque;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+}
+
+.apexcharts-canvas .apexcharts-element-hidden {
+  opacity: 0;
+}
+
+.apexcharts-hide .apexcharts-series-points {
+  opacity: 0;
+}
+
+.apexcharts-gridline,
+.apexcharts-annotation-rect,
+.apexcharts-xaxis-annotation-label,
+.apexcharts-yaxis-annotation-label,
+.apexcharts-point-annotation-label,
+.apexcharts-tooltip .apexcharts-marker,
+.apexcharts-area-series .apexcharts-area,
+.apexcharts-line,
+.apexcharts-zoom-rect,
+.apexcharts-toolbar svg,
+.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
+.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
+.apexcharts-radar-series path,
+.apexcharts-radar-series polygon {
+  pointer-events: none;
+}
+
+
+/* markers */
+
+.apexcharts-marker {
+  transition: 0.15s ease all;
+}
+
+@keyframes opaque {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+
+/* Resize generated styles */
+
+@keyframes resizeanim {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.resize-triggers {
+  animation: 1ms resizeanim;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.resize-triggers,
+.resize-triggers>div,
+.contract-trigger:before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.resize-triggers>div {
+  background: #eee;
+  overflow: auto;
+}
+
+.contract-trigger:before {
+  width: 200%;
+  height: 200%;
+}

demo/dist/libs/apexcharts/dist/locales/ar.json

@@ -0,0 +1,63 @@
+{
+"name": "ar",
+"options": {
+"months": [
+"يناير",
+"فبراير",
+"مارس",
+"أبريل",
+"مايو",
+"يونيو",
+"يوليو",
+"أغسطس",
+"سبتمبر",
+"أكتوبر",
+"نوفمبر",
+"ديسمبر"
+],
+"shortMonths": [
+"يناير",
+"فبراير",
+"مارس",
+"أبريل",
+"مايو",
+"يونيو",
+"يوليو",
+"أغسطس",
+"سبتمبر",
+"أكتوبر",
+"نوفمبر",
+"ديسمبر"
+],
+"days": [
+"الأحد",
+"الإثنين",
+"الثلاثاء",
+"الأربعاء",
+"الخميس",
+"الجمعة",
+"السبت"
+],
+"shortDays": [
+"أحد",
+"إثنين",
+"ثلاثاء",
+"أربعاء",
+"خميس",
+"جمعة",
+"سبت"
+],
+"toolbar": {
+"exportToSVG": "تحميل بصيغة SVG",
+"exportToPNG": "تحميل بصيغة PNG",
+"exportToCSV": "تحميل بصيغة CSV",
+"menu": "القائمة",
+"selection": "تحديد",
+"selectionZoom": "تكبير التحديد",
+"zoomIn": "تكبير",
+"zoomOut": "تصغير",
+"pan": "تحريك",
+"reset": "إعادة التعيين"
+}
+}
+}

demo/dist/libs/apexcharts/dist/locales/ca.json

@@ -0,0 +1,55 @@
+{
+  "name": "ca",
+  "options": {
+    "months": [
+      "Gener",
+      "Febrer",
+      "Març",
+      "Abril",
+      "Maig",
+      "Juny",
+      "Juliol",
+      "Agost",
+      "Setembre",
+      "Octubre",
+      "Novembre",
+      "Desembre"
+    ],
+    "shortMonths": [
+      "Gen.",
+      "Febr.",
+      "Març",
+      "Abr.",
+      "Maig",
+      "Juny",
+      "Jul.",
+      "Ag.",
+      "Set.",
+      "Oct.",
+      "Nov.",
+      "Des."
+    ],
+    "days": [
+      "Diumenge",
+      "Dilluns",
+      "Dimarts",
+      "Dimecres",
+      "Dijous",
+      "Divendres",
+      "Dissabte"
+    ],
+    "shortDays": ["Dg", "Dl", "Dt", "Dc", "Dj", "Dv", "Ds"],
+    "toolbar": {
+      "exportToSVG": "Descarregar SVG",
+      "exportToPNG": "Descarregar PNG",
+      "exportToCSV": "Descarregar CSV",
+      "menu": "Menú",
+      "selection": "Seleccionar",
+      "selectionZoom": "Seleccionar Zoom",
+      "zoomIn": "Augmentar",
+      "zoomOut": "Disminuir",
+      "pan": "Navegació",
+      "reset": "Reiniciar Zoom"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/cs.json

@@ -0,0 +1,55 @@
+{
+  "name": "cs",
+  "options": {
+    "months": [
+      "Leden",
+      "Únor",
+      "Březen",
+      "Duben",
+      "Květen",
+      "Červen",
+      "Červenec",
+      "Srpen",
+      "Září",
+      "Říjen",
+      "Listopad",
+      "Prosinec"
+    ],
+    "shortMonths": [
+      "Led",
+      "Úno",
+      "Bře",
+      "Dub",
+      "Kvě",
+      "Čvn",
+      "Čvc",
+      "Srp",
+      "Zář",
+      "Říj",
+      "Lis",
+      "Pro"
+    ],
+    "days": [
+      "Neděle",
+      "Pondělí",
+      "Úterý",
+      "Středa",
+      "Čtvrtek",
+      "Pátek",
+      "Sobota"
+    ],
+    "shortDays": ["Ne", "Po", "Út", "St", "Čt", "Pá", "So"],
+    "toolbar": {
+      "exportToSVG": "Stáhnout SVG",
+      "exportToPNG": "Stáhnout PNG",
+      "exportToCSV": "Stáhnout CSV",
+      "menu": "Menu",
+      "selection": "Vybrat",
+      "selectionZoom": "Zoom: Vybrat",
+      "zoomIn": "Zoom: Přiblížit",
+      "zoomOut": "Zoom: Oddálit",
+      "pan": "Přesouvat",
+      "reset": "Resetovat"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/de.json

@@ -0,0 +1,55 @@
+{
+  "name": "de",
+  "options": {
+    "months": [
+      "Januar",
+      "Februar",
+      "März",
+      "April",
+      "Mai",
+      "Juni",
+      "Juli",
+      "August",
+      "September",
+      "Oktober",
+      "November",
+      "Dezember"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mär",
+      "Apr",
+      "Mai",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Dez"
+    ],
+    "days": [
+      "Sonntag",
+      "Montag",
+      "Dienstag",
+      "Mittwoch",
+      "Donnerstag",
+      "Freitag",
+      "Samstag"
+    ],
+    "shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+    "toolbar": {
+      "exportToSVG": "SVG speichern",
+      "exportToPNG": "PNG speichern",
+      "exportToCSV": "CSV speichern",
+      "menu": "Menü",
+      "selection": "Auswahl",
+      "selectionZoom": "Auswahl vergrößern",
+      "zoomIn": "Vergrößern",
+      "zoomOut": "Verkleinern",
+      "pan": "Verschieben",
+      "reset": "Zoom zurücksetzen"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/el.json

@@ -0,0 +1,55 @@
+{
+  "name": "el",
+  "options": {
+    "months": [
+      "Ιανουάριος",
+      "Φεβρουάριος",
+      "Μάρτιος",
+      "Απρίλιος",
+      "Μάιος",
+      "Ιούνιος",
+      "Ιούλιος",
+      "Αύγουστος",
+      "Σεπτέμβριος",
+      "Οκτώβριος",
+      "Νοέμβριος",
+      "Δεκέμβριος"
+    ],
+    "shortMonths": [
+      "Ιαν",
+      "Φευ",
+      "Μαρ",
+      "Απρ",
+      "Μάι",
+      "Ιουν",
+      "Ιουλ",
+      "Αυγ",
+      "Σεπ",
+      "Οκτ",
+      "Νοε",
+      "Δεκ"
+    ],
+    "days": [
+      "Κυριακή",
+      "Δευτέρα",
+      "Τρίτη",
+      "Τετάρτη",
+      "Πέμπτη",
+      "Παρασκευή",
+      "Σάββατο"
+    ],
+    "shortDays": ["Κυρ", "Δευ", "Τρι", "Τετ", "Πεμ", "Παρ", "Σαβ"],
+    "toolbar": {
+      "exportToSVG": "Λήψη SVG",
+      "exportToPNG": "Λήψη PNG",
+      "exportToCSV": "Λήψη CSV",
+      "menu": "Menu",
+      "selection": "Επιλογή",
+      "selectionZoom": "Μεγένθυση βάση επιλογής",
+      "zoomIn": "Μεγένθυνση",
+      "zoomOut": "Σμίκρυνση",
+      "pan": "Μετατόπιση",
+      "reset": "Επαναφορά μεγένθυνσης"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/en.json

@@ -0,0 +1,55 @@
+{
+  "name": "en",
+  "options": {
+    "months": [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ],
+    "days": [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday"
+    ],
+    "shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    "toolbar": {
+      "exportToSVG": "Download SVG",
+      "exportToPNG": "Download PNG",
+      "exportToCSV": "Download CSV",
+      "menu": "Menu",
+      "selection": "Selection",
+      "selectionZoom": "Selection Zoom",
+      "zoomIn": "Zoom In",
+      "zoomOut": "Zoom Out",
+      "pan": "Panning",
+      "reset": "Reset Zoom"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/es.json

@@ -0,0 +1,55 @@
+{
+  "name": "es",
+  "options": {
+    "months": [
+      "Enero",
+      "Febrero",
+      "Marzo",
+      "Abril",
+      "Mayo",
+      "Junio",
+      "Julio",
+      "Agosto",
+      "Septiembre",
+      "Octubre",
+      "Noviembre",
+      "Diciembre"
+    ],
+    "shortMonths": [
+      "Ene",
+      "Feb",
+      "Mar",
+      "Abr",
+      "May",
+      "Jun",
+      "Jul",
+      "Ago",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dic"
+    ],
+    "days": [
+      "Domingo",
+      "Lunes",
+      "Martes",
+      "Miércoles",
+      "Jueves",
+      "Viernes",
+      "Sábado"
+    ],
+    "shortDays": ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
+    "toolbar": {
+      "exportToSVG": "Descargar SVG",
+      "exportToPNG": "Descargar PNG",
+      "exportToCSV": "Descargar CSV",
+      "menu": "Menu",
+      "selection": "Seleccionar",
+      "selectionZoom": "Seleccionar Zoom",
+      "zoomIn": "Aumentar",
+      "zoomOut": "Disminuir",
+      "pan": "Navegación",
+      "reset": "Reiniciar Zoom"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/et.json

@@ -0,0 +1,63 @@
+{
+  "name": "et",
+  "options": {
+    "months": [
+      "jaanuar",
+      "veebruar",
+      "märts",
+      "aprill",
+      "mai",
+      "juuni",
+      "juuli",
+      "august",
+      "september",
+      "oktoober",
+      "november",
+      "detsember"
+    ],
+    "shortMonths": [
+      "jaan",
+      "veebr",
+      "märts",
+      "apr",
+      "mai",
+      "juuni",
+      "juuli",
+      "aug",
+      "sept",
+      "okt",
+      "nov",
+      "dets"
+    ],
+    "days": [
+      "pühapäev",
+      "esmaspäev",
+      "teisipäev",
+      "kolmapäev",
+      "neljapäev",
+      "reede",
+      "laupäev"
+    ],
+    "shortDays": [
+      "P",
+      "E",
+      "T",
+      "K",
+      "N",
+      "R",
+      "L"
+    ],
+    "toolbar": {
+      "exportToSVG": "Lae alla SVG",
+      "exportToPNG": "Lae alla PNG",
+      "exportToCSV": "Lae alla CSV",
+      "menu": "Menüü",
+      "selection": "Valik",
+      "selectionZoom": "Valiku suum",
+      "zoomIn": "Suurenda",
+      "zoomOut": "Vähenda",
+      "pan": "Panoraamimine",
+      "reset": "Lähtesta suum"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/fa.json

@@ -0,0 +1,55 @@
+{
+  "name": "fa",
+  "options": {
+    "months": [
+      "فروردین",
+      "اردیبهشت",
+      "خرداد",
+      "تیر",
+      "مرداد",
+      "شهریور",
+      "مهر",
+      "آبان",
+      "آذر",
+      "دی",
+      "بهمن",
+      "اسفند"
+    ],
+    "shortMonths": [
+      "فرو",
+      "ارد",
+      "خرد",
+      "تیر",
+      "مرد",
+      "شهر",
+      "مهر",
+      "آبا",
+      "آذر",
+      "دی",
+      "بهمـ",
+      "اسفـ"
+    ],
+    "days": [
+      "یکشنبه",
+      "دوشنبه",
+      "سه شنبه",
+      "چهارشنبه",
+      "پنجشنبه",
+      "جمعه",
+      "شنبه"
+    ],
+    "shortDays": ["ی", "د", "س", "چ", "پ", "ج", "ش"],
+    "toolbar": {
+      "exportToSVG": "دانلود SVG",
+      "exportToPNG": "دانلود PNG",
+      "exportToCSV": "دانلود CSV",
+      "menu": "منو",
+      "selection": "انتخاب",
+      "selectionZoom": "بزرگنمایی انتخابی",
+      "zoomIn": "بزرگنمایی",
+      "zoomOut": "کوچکنمایی",
+      "pan": "پیمایش",
+      "reset": "بازنشانی بزرگنمایی"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/fi.json

@@ -0,0 +1,55 @@
+{
+  "name": "fi",
+  "options": {
+    "months": [
+      "Tammikuu",
+      "Helmikuu",
+      "Maaliskuu",
+      "Huhtikuu",
+      "Toukokuu",
+      "Kesäkuu",
+      "Heinäkuu",
+      "Elokuu",
+      "Syyskuu",
+      "Lokakuu",
+      "Marraskuu",
+      "Joulukuu"
+    ],
+    "shortMonths": [
+      "Tammi",
+      "Helmi",
+      "Maalis",
+      "Huhti",
+      "Touko",
+      "Kesä",
+      "Heinä",
+      "Elo",
+      "Syys",
+      "Loka",
+      "Marras",
+      "Joulu"
+    ],
+    "days": [
+      "Sunnuntai",
+      "Maanantai",
+      "Tiistai",
+      "Keskiviikko",
+      "Torstai",
+      "Perjantai",
+      "Lauantai"
+    ],
+    "shortDays": ["Su", "Ma", "Ti", "Ke", "To", "Pe", "La"],
+    "toolbar": {
+      "exportToSVG": "Lataa SVG",
+      "exportToPNG": "Lataa PNG",
+      "exportToCSV": "Lataa CSV",
+      "menu": "Valikko",
+      "selection": "Valinta",
+      "selectionZoom": "Valinnan zoomaus",
+      "zoomIn": "Lähennä",
+      "zoomOut": "Loitonna",
+      "pan": "Panoroi",
+      "reset": "Nollaa zoomaus"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/fr.json

@@ -0,0 +1,55 @@
+{
+  "name": "fr",
+  "options": {
+    "months": [
+      "janvier",
+      "février",
+      "mars",
+      "avril",
+      "mai",
+      "juin",
+      "juillet",
+      "août",
+      "septembre",
+      "octobre",
+      "novembre",
+      "décembre"
+    ],
+    "shortMonths": [
+      "janv.",
+      "févr.",
+      "mars",
+      "avr.",
+      "mai",
+      "juin",
+      "juill.",
+      "août",
+      "sept.",
+      "oct.",
+      "nov.",
+      "déc."
+    ],
+    "days": [
+      "dimanche",
+      "lundi",
+      "mardi",
+      "mercredi",
+      "jeudi",
+      "vendredi",
+      "samedi"
+    ],
+    "shortDays": ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
+    "toolbar": {
+      "exportToSVG": "Télécharger au format SVG",
+      "exportToPNG": "Télécharger au format PNG",
+      "exportToCSV": "Télécharger au format CSV",
+      "menu": "Menu",
+      "selection": "Sélection",
+      "selectionZoom": "Sélection et zoom",
+      "zoomIn": "Zoomer",
+      "zoomOut": "Dézoomer",
+      "pan": "Navigation",
+      "reset": "Réinitialiser le zoom"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/he.json

@@ -0,0 +1,55 @@
+{
+  "name": "he",
+  "options": {
+    "months": [
+      "ינואר",
+      "פברואר",
+      "מרץ",
+      "אפריל",
+      "מאי",
+      "יוני",
+      "יולי",
+      "אוגוסט",
+      "ספטמבר",
+      "אוקטובר",
+      "נובמבר",
+      "דצמבר"
+    ],
+    "shortMonths": [
+      "ינו׳",
+      "פבר׳",
+      "מרץ",
+      "אפר׳",
+      "מאי",
+      "יוני",
+      "יולי",
+      "אוג׳",
+      "ספט׳",
+      "אוק׳",
+      "נוב׳",
+      "דצמ׳"
+    ],
+    "days": [
+      "ראשון",
+      "שני",
+      "שלישי",
+      "רביעי",
+      "חמישי",
+      "שישי",
+      "שבת"
+    ],
+    "shortDays": ["א׳", "ב׳", "ג׳", "ד׳", "ה׳", "ו׳", "ש׳"],
+    "toolbar": {
+      "exportToSVG": "הורד SVG",
+      "exportToPNG": "הורד PNG",
+      "exportToCSV": "הורד CSV",
+      "menu": "תפריט",
+      "selection": "בחירה",
+      "selectionZoom": "זום בחירה",
+      "zoomIn": "הגדלה",
+      "zoomOut": "הקטנה",
+      "pan": "הזזה",
+      "reset": "איפוס תצוגה"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/hi.json

@@ -0,0 +1,55 @@
+{
+  "name": "hi",
+  "options": {
+    "months": [
+      "जनवरी",
+      "फ़रवरी",
+      "मार्च",
+      "अप्रैल",
+      "मई",
+      "जून",
+      "जुलाई",
+      "अगस्त",
+      "सितंबर",
+      "अक्टूबर",
+      "नवंबर",
+      "दिसंबर"
+    ],
+    "shortMonths": [
+      "जनवरी",
+      "फ़रवरी",
+      "मार्च",
+      "अप्रैल",
+      "मई",
+      "जून",
+      "जुलाई",
+      "अगस्त",
+      "सितंबर",
+      "अक्टूबर",
+      "नवंबर",
+      "दिसंबर"
+    ],
+    "days": [
+      "रविवार",
+      "सोमवार",
+      "मंगलवार",
+      "बुधवार",
+      "गुरुवार",
+      "शुक्रवार",
+      "शनिवार"
+    ],
+    "shortDays": ["रवि", "सोम", "मंगल", "बुध", "गुरु", "शुक्र", "शनि"],
+    "toolbar": {
+      "exportToSVG": "निर्यात SVG",
+      "exportToPNG": "निर्यात PNG",
+      "exportToCSV": "निर्यात CSV",
+      "menu": "सूची",
+      "selection": "चयन",
+      "selectionZoom": "ज़ूम करना",
+      "zoomIn": "ज़ूम इन",
+      "zoomOut": "ज़ूम आउट",
+      "pan": "पैनिंग",
+      "reset": "फिर से कायम करना"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/hr.json

@@ -0,0 +1,55 @@
+{
+  "name": "hr",
+  "options": {
+    "months": [
+      "Siječanj",
+      "Veljača",
+      "Ožujak",
+      "Travanj",
+      "Svibanj",
+      "Lipanj",
+      "Srpanj",
+      "Kolovoz",
+      "Rujan",
+      "Listopad",
+      "Studeni",
+      "Prosinac"
+    ],
+    "shortMonths": [
+      "Sij",
+      "Velj",
+      "Ožu",
+      "Tra",
+      "Svi",
+      "Lip",
+      "Srp",
+      "Kol",
+      "Ruj",
+      "Lis",
+      "Stu",
+      "Pro"
+    ],
+    "days": [
+      "Nedjelja",
+      "Ponedjeljak",
+      "Utorak",
+      "Srijeda",
+      "Četvrtak",
+      "Petak",
+      "Subota"
+    ],
+    "shortDays": ["Ned", "Pon", "Uto", "Sri", "Čet", "Pet", "Sub"],
+    "toolbar": {
+      "exportToSVG": "Preuzmi SVG",
+      "exportToPNG": "Preuzmi PNG",
+      "exportToCSV": "Preuzmi CSV",
+      "menu": "Izbornik",
+      "selection": "Odabir",
+      "selectionZoom": "Odabirno povećanje",
+      "zoomIn": "Uvećajte prikaz",
+      "zoomOut": "Umanjite prikaz",
+      "pan": "Pomicanje",
+      "reset": "Povratak na zadani prikaz"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/hu.json

@@ -0,0 +1,64 @@
+{
+  "name": "hu",
+  "options": {
+    "months": [
+      "január",
+      "február",
+      "március",
+      "április",
+      "május",
+      "június",
+      "július",
+      "augusztus",
+      "szeptember",
+      "október",
+      "november",
+      "december"
+    ],
+    "shortMonths": [
+      "jan",
+      "feb",
+      "mar",
+      "ápr",
+      "máj",
+      "jún",
+      "júl",
+      "aug",
+      "szept",
+      "okt",
+      "nov",
+      "dec"
+    ],
+    "days": [
+      "hétfő",
+      "kedd",
+      "szerda",
+      "csütörtök",
+      "péntek",
+      "szombat",
+      "vasárnap"
+    ],
+    "shortDays": [
+      "H",
+      "K",
+      "Sze",
+      "Cs",
+      "P",
+      "Szo",
+      "V"
+    ],
+    "toolbar": {
+      "exportToSVG": "Exportálás SVG-be",
+      "exportToPNG": "Exportálás PNG-be",
+      "exportToCSV": "Exportálás CSV-be",
+      "menu": "Fő ajánlat",
+      "download": "SVG letöltése",
+      "selection": "Kiválasztás",
+      "selectionZoom": "Nagyító kiválasztása",
+      "zoomIn": "Nagyítás",
+      "zoomOut": "Kicsinyítés",
+      "pan": "Képcsúsztatás",
+      "reset": "Nagyító visszaállítása"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/hy.json

@@ -0,0 +1,55 @@
+{
+  "name": "hy",
+  "options": {
+    "months": [
+      "Հունվար",
+      "Փետրվար",
+      "Մարտ",
+      "Ապրիլ",
+      "Մայիս",
+      "Հունիս",
+      "Հուլիս",
+      "Օգոստոս",
+      "Սեպտեմբեր",
+      "Հոկտեմբեր",
+      "Նոյեմբեր",
+      "Դեկտեմբեր"
+    ],
+    "shortMonths": [
+      "Հնվ",
+      "Փտվ",
+      "Մրտ",
+      "Ապր",
+      "Մյս",
+      "Հնս",
+      "Հլիս",
+      "Օգս",
+      "Սեպ",
+      "Հոկ",
+      "Նոյ",
+      "Դեկ"
+    ],
+    "days": [
+      "Կիրակի",
+      "Երկուշաբթի",
+      "Երեքշաբթի",
+      "Չորեքշաբթի",
+      "Հինգշաբթի",
+      "Ուրբաթ",
+      "Շաբաթ"
+    ],
+    "shortDays": ["Կիր", "Երկ", "Երք", "Չրք", "Հնգ", "Ուրբ", "Շբթ"],
+    "toolbar": {
+      "exportToSVG": "Բեռնել SVG",
+      "exportToPNG": "Բեռնել PNG",
+      "exportToCSV": "Բեռնել CSV",
+      "menu": "Մենյու",
+      "selection": "Ընտրված",
+      "selectionZoom": "Ընտրված հատվածի խոշորացում",
+      "zoomIn": "Խոշորացնել",
+      "zoomOut": "Մանրացնել",
+      "pan": "Տեղափոխում",
+      "reset": "Բերել սկզբնական վիճակի"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/id.json

@@ -0,0 +1,47 @@
+{
+  "name": "id",
+  "options": {
+    "months": [
+      "Januari",
+      "Februari",
+      "Maret",
+      "April",
+      "Mei",
+      "Juni",
+      "Juli",
+      "Agustus",
+      "September",
+      "Oktober",
+      "November",
+      "Desember"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "Mei",
+      "Jun",
+      "Jul",
+      "Agu",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Des"
+    ],
+    "days": ["Minggu", "Senin", "Selasa", "Rabu", "kamis", "Jumat", "Sabtu"],
+    "shortDays": ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
+    "toolbar": {
+      "exportToSVG": "Unduh SVG",
+      "exportToPNG": "Unduh PNG",
+      "exportToCSV": "Unduh CSV",
+      "menu": "Menu",
+      "selection": "Pilihan",
+      "selectionZoom": "Perbesar Pilihan",
+      "zoomIn": "Perbesar",
+      "zoomOut": "Perkecil",
+      "pan": "Geser",
+      "reset": "Atur Ulang Zoom"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/it.json

@@ -0,0 +1,55 @@
+{
+  "name": "it",
+  "options": {
+    "months": [
+      "Gennaio",
+      "Febbraio",
+      "Marzo",
+      "Aprile",
+      "Maggio",
+      "Giugno",
+      "Luglio",
+      "Agosto",
+      "Settembre",
+      "Ottobre",
+      "Novembre",
+      "Dicembre"
+    ],
+    "shortMonths": [
+      "Gen",
+      "Feb",
+      "Mar",
+      "Apr",
+      "Mag",
+      "Giu",
+      "Lug",
+      "Ago",
+      "Set",
+      "Ott",
+      "Nov",
+      "Dic"
+    ],
+    "days": [
+      "Domenica",
+      "Lunedì",
+      "Martedì",
+      "Mercoledì",
+      "Giovedì",
+      "Venerdì",
+      "Sabato"
+    ],
+    "shortDays": ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
+    "toolbar": {
+      "exportToSVG": "Scarica SVG",
+      "exportToPNG": "Scarica PNG",
+      "exportToCSV": "Scarica CSV",
+      "menu": "Menu",
+      "selection": "Selezione",
+      "selectionZoom": "Seleziona Zoom",
+      "zoomIn": "Zoom In",
+      "zoomOut": "Zoom Out",
+      "pan": "Sposta",
+      "reset": "Reimposta Zoom"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/ja.json

@@ -0,0 +1,55 @@
+{
+  "name": "ja",
+  "options": {
+    "months": [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月"
+    ],
+    "shortMonths": [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月"
+    ],
+    "days": [
+      "日曜日",
+      "月曜日",
+      "火曜日",
+      "水曜日",
+      "木曜日",
+      "金曜日",
+      "土曜日"
+    ],
+    "shortDays": ["日", "月", "火", "水", "木", "金", "土"],
+    "toolbar": {
+      "exportToSVG": "SVGダウンロード",
+      "exportToPNG": "PNGダウンロード",
+      "exportToCSV": "CSVダウンロード",
+      "menu": "メニュー",
+      "selection": "選択",
+      "selectionZoom": "選択ズーム",
+      "zoomIn": "拡大",
+      "zoomOut": "縮小",
+      "pan": "パン",
+      "reset": "ズームリセット"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/ka.json

@@ -0,0 +1,55 @@
+{
+  "name": "ka",
+  "options": {
+    "months": [
+      "იანვარი",
+      "თებერვალი",
+      "მარტი",
+      "აპრილი",
+      "მაისი",
+      "ივნისი",
+      "ივლისი",
+      "აგვისტო",
+      "სექტემბერი",
+      "ოქტომბერი",
+      "ნოემბერი",
+      "დეკემბერი"
+    ],
+    "shortMonths": [
+      "იან",
+      "თებ",
+      "მარ",
+      "აპრ",
+      "მაი",
+      "ივნ",
+      "ივლ",
+      "აგვ",
+      "სექ",
+      "ოქტ",
+      "ნოე",
+      "დეკ"
+    ],
+    "days": [
+      "კვირა",
+      "ორშაბათი",
+      "სამშაბათი",
+      "ოთხშაბათი",
+      "ხუთშაბათი",
+      "პარასკევი",
+      "შაბათი"
+    ],
+    "shortDays": ["კვი", "ორშ", "სამ", "ოთხ", "ხუთ", "პარ", "შაბ"],
+    "toolbar": {
+      "exportToSVG": "გადმოქაჩე SVG",
+      "exportToPNG": "გადმოქაჩე PNG",
+      "exportToCSV": "გადმოქაჩე CSV",
+      "menu": "მენიუ",
+      "selection": "არჩევა",
+      "selectionZoom": "არჩეულის გადიდება",
+      "zoomIn": "გადიდება",
+      "zoomOut": "დაპატარაება",
+      "pan": "გადაჩოჩება",
+      "reset": "გადიდების გაუქმება"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/ko.json

@@ -0,0 +1,55 @@
+{
+  "name": "ko",
+  "options": {
+    "months": [
+      "1월",
+      "2월",
+      "3월",
+      "4월",
+      "5월",
+      "6월",
+      "7월",
+      "8월",
+      "9월",
+      "10월",
+      "11월",
+      "12월"
+    ],
+    "shortMonths": [
+      "1월",
+      "2월",
+      "3월",
+      "4월",
+      "5월",
+      "6월",
+      "7월",
+      "8월",
+      "9월",
+      "10월",
+      "11월",
+      "12월"
+    ],
+    "days": [
+      "일요일",
+      "월요일",
+      "화요일",
+      "수요일",
+      "목요일",
+      "금요일",
+      "토요일"
+    ],
+    "shortDays": ["일", "월", "화", "수", "목", "금", "토"],
+    "toolbar": {
+      "exportToSVG": "SVG 다운로드",
+      "exportToPNG": "PNG 다운로드",
+      "exportToCSV": "CSV 다운로드",
+      "menu": "메뉴",
+      "selection": "선택",
+      "selectionZoom": "선택영역 확대",
+      "zoomIn": "확대",
+      "zoomOut": "축소",
+      "pan": "패닝",
+      "reset": "원래대로"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/lt.json

@@ -0,0 +1,55 @@
+{
+  "name": "lt",
+  "options": {
+    "months": [
+      "Sausis",
+      "Vasaris",
+      "Kovas",
+      "Balandis",
+      "Gegužė",
+      "Birželis",
+      "Liepa",
+      "Rugpjūtis",
+      "Rugsėjis",
+      "Spalis",
+      "Lapkritis",
+      "Gruodis"
+    ],
+    "shortMonths": [
+      "Sau",
+      "Vas",
+      "Kov",
+      "Bal",
+      "Geg",
+      "Bir",
+      "Lie",
+      "Rgp",
+      "Rgs",
+      "Spl",
+      "Lap",
+      "Grd"
+    ],
+    "days": [
+      "Sekmadienis",
+      "Pirmadienis",
+      "Antradienis",
+      "Trečiadienis",
+      "Ketvirtadienis",
+      "Penktadienis",
+      "Šeštadienis"
+    ],
+    "shortDays": ["Sk", "Per", "An", "Tr", "Kt", "Pn", "Št"],
+    "toolbar": {
+      "exportToSVG": "Atsisiųsti SVG",
+      "exportToPNG": "Atsisiųsti PNG",
+      "exportToCSV": "Atsisiųsti CSV",
+      "menu": "Menu",
+      "selection": "Pasirinkimas",
+      "selectionZoom": "Zoom: Pasirinkimas",
+      "zoomIn": "Zoom: Priartinti",
+      "zoomOut": "Zoom: Atitolinti",
+      "pan": "Perkėlimas",
+      "reset": "Atstatyti"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/lv.json

@@ -0,0 +1,64 @@
+{
+  "name": "lv",
+  "options": {
+    "months": [
+      "janvāris",
+      "februāris",
+      "marts",
+      "aprīlis",
+      "maijs",
+      "jūnijs",
+      "jūlijs",
+      "augusts",
+      "septembris",
+      "oktobris",
+      "novembris",
+      "decembris"
+    ],
+    "shortMonths": [
+      "janv",
+      "febr",
+      "marts",
+      "apr",
+      "maijs",
+      "jūn",
+      "jūl",
+      "aug",
+      "sept",
+      "okt",
+      "nov",
+      "dec"
+    ],
+    "days": [
+      "svētdiena",
+      "pirmdiena",
+      "otrdiena",
+      "trešdiena",
+      "ceturtdiena",
+      "piektdiena",
+      "sestdiena"
+    ],
+    "shortDays": [
+      "Sv",
+      "P",
+      "O",
+      "T",
+      "C",
+      "P",
+      "S"
+    ],
+    "toolbar": {
+      "exportToSVG": "Lejuplādēt SVG",
+      "exportToPNG": "Lejuplādēt PNG",
+      "exportToCSV": "Lejuplādēt CSV",
+      "menu": "Izvēlne",
+      "selection": "Atlase",
+      "selectionZoom": "Pietuvināt atlasi",
+      "zoomIn": "Pietuvināt",
+      "zoomOut": "Attālināt",
+      "pan": "Pārvietoties diagrammā",
+      "reset": "Atiestatīt pietuvinājumu"
+    }
+  }
+}
+

demo/dist/libs/apexcharts/dist/locales/nb.json

@@ -0,0 +1,55 @@
+{
+  "name": "nb",
+  "options": {
+    "months": [
+      "Januar",
+      "Februar",
+      "Mars",
+      "April",
+      "Mai",
+      "Juni",
+      "Juli",
+      "August",
+      "September",
+      "Oktober",
+      "November",
+      "Desember"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "Mai",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Des"
+    ],
+    "days": [
+      "Søndag",
+      "Mandag",
+      "Tirsdag",
+      "Onsdag",
+      "Torsdag",
+      "Fredag",
+      "Lørdag"
+    ],
+    "shortDays": ["Sø", "Ma", "Ti", "On", "To", "Fr", "Lø"],
+    "toolbar": {
+      "exportToSVG": "Last ned SVG",
+      "exportToPNG": "Last ned PNG",
+      "exportToCSV": "Last ned CSV",
+      "menu": "Menu",
+      "selection": "Velg",
+      "selectionZoom": "Zoom: Velg",
+      "zoomIn": "Zoome inn",
+      "zoomOut": "Zoome ut",
+      "pan": "Skyving",
+      "reset": "Start på nytt"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/nl.json

@@ -0,0 +1,55 @@
+{
+  "name": "nl",
+  "options": {
+    "months": [
+      "Januari",
+      "Februari",
+      "Maart",
+      "April",
+      "Mei",
+      "Juni",
+      "Juli",
+      "Augustus",
+      "September",
+      "Oktober",
+      "November",
+      "December"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mrt",
+      "Apr",
+      "Mei",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Dec"
+    ],
+    "days": [
+      "Zondag",
+      "Maandag",
+      "Dinsdag",
+      "Woensdag",
+      "Donderdag",
+      "Vrijdag",
+      "Zaterdag"
+    ],
+    "shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
+    "toolbar": {
+      "exportToSVG": "Download SVG",
+      "exportToPNG": "Download PNG",
+      "exportToCSV": "Download CSV",
+      "menu": "Menu",
+      "selection": "Selectie",
+      "selectionZoom": "Zoom selectie",
+      "zoomIn": "Zoom in",
+      "zoomOut": "Zoom out",
+      "pan": "Verplaatsen",
+      "reset": "Standaardwaarden"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/pl.json

@@ -0,0 +1,55 @@
+{
+  "name": "pl",
+  "options": {
+    "months": [
+      "Styczeń",
+      "Luty",
+      "Marzec",
+      "Kwiecień",
+      "Maj",
+      "Czerwiec",
+      "Lipiec",
+      "Sierpień",
+      "Wrzesień",
+      "Październik",
+      "Listopad",
+      "Grudzień"
+    ],
+    "shortMonths": [
+      "Sty",
+      "Lut",
+      "Mar",
+      "Kwi",
+      "Maj",
+      "Cze",
+      "Lip",
+      "Sie",
+      "Wrz",
+      "Paź",
+      "Lis",
+      "Gru"
+    ],
+    "days": [
+      "Niedziela",
+      "Poniedziałek",
+      "Wtorek",
+      "Środa",
+      "Czwartek",
+      "Piątek",
+      "Sobota"
+    ],
+    "shortDays": ["Nd", "Pn", "Wt", "Śr", "Cz", "Pt", "Sb"],
+    "toolbar": {
+      "exportToSVG": "Pobierz SVG",
+      "exportToPNG": "Pobierz PNG",
+      "exportToCSV": "Pobierz CSV",
+      "menu": "Menu",
+      "selection": "Wybieranie",
+      "selectionZoom": "Zoom: Wybieranie",
+      "zoomIn": "Zoom: Przybliż",
+      "zoomOut": "Zoom: Oddal",
+      "pan": "Przesuwanie",
+      "reset": "Resetuj"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/pt-br.json

@@ -0,0 +1,55 @@
+{
+  "name": "pt-br",
+  "options": {
+    "months": [
+      "Janeiro",
+      "Fevereiro",
+      "Março",
+      "Abril",
+      "Maio",
+      "Junho",
+      "Julho",
+      "Agosto",
+      "Setembro",
+      "Outubro",
+      "Novembro",
+      "Dezembro"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Fev",
+      "Mar",
+      "Abr",
+      "Mai",
+      "Jun",
+      "Jul",
+      "Ago",
+      "Set",
+      "Out",
+      "Nov",
+      "Dez"
+    ],
+    "days": [
+      "Domingo",
+      "Segunda",
+      "Terça",
+      "Quarta",
+      "Quinta",
+      "Sexta",
+      "Sábado"
+    ],
+    "shortDays": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
+    "toolbar": {
+      "exportToSVG": "Baixar SVG",
+      "exportToPNG": "Baixar PNG",
+      "exportToCSV": "Baixar CSV",
+      "menu": "Menu",
+      "selection": "Selecionar",
+      "selectionZoom": "Selecionar Zoom",
+      "zoomIn": "Aumentar",
+      "zoomOut": "Diminuir",
+      "pan": "Navegação",
+      "reset": "Reiniciar Zoom"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/pt.json

@@ -0,0 +1,55 @@
+{
+  "name": "pt",
+  "options": {
+    "months": [
+      "Janeiro",
+      "Fevereiro",
+      "Março",
+      "Abril",
+      "Maio",
+      "Junho",
+      "Julho",
+      "Agosto",
+      "Setembro",
+      "Outubro",
+      "Novembro",
+      "Dezembro"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Fev",
+      "Mar",
+      "Abr",
+      "Mai",
+      "Jun",
+      "Jul",
+      "Ag",
+      "Set",
+      "Out",
+      "Nov",
+      "Dez"
+    ],
+    "days": [
+      "Domingo",
+      "Segunda-feira",
+      "Terça-feira",
+      "Quarta-feira",
+      "Quinta-feira",
+      "Sexta-feira",
+      "Sábado"
+    ],
+    "shortDays": ["Do", "Se", "Te", "Qa", "Qi", "Sx", "Sa"],
+    "toolbar": {
+      "exportToSVG": "Baixar SVG",
+      "exportToPNG": "Baixar PNG",
+      "exportToCSV": "Baixar CSV",
+      "menu": "Menu",
+      "selection": "Selecionar",
+      "selectionZoom": "Zoom: Selecionar",
+      "zoomIn": "Zoom: Aumentar",
+      "zoomOut": "Zoom: Diminuir",
+      "pan": "Deslocamento",
+      "reset": "Redefinir"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/rs.json

@@ -0,0 +1,55 @@
+{
+  "name": "rs",
+  "options": {
+    "months": [
+      "Januar",
+      "Februar",
+      "Mart",
+      "April",
+      "Maj",
+      "Jun",
+      "Jul",
+      "Avgust",
+      "Septembar",
+      "Oktobar",
+      "Novembar",
+      "Decembar"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "Maj",
+      "Jun",
+      "Jul",
+      "Avg",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Dec"
+    ],
+    "days": [
+      "Nedelja",
+      "Ponedeljak",
+      "Utorak",
+      "Sreda",
+      "Četvrtak",
+      "Petak",
+      "Subota"
+    ],
+    "shortDays": ["Ned", "Pon", "Uto", "Sre", "Čet", "Pet", "Sub"],
+    "toolbar": {
+      "exportToSVG": "Preuzmi SVG",
+      "exportToPNG": "Preuzmi PNG",
+      "exportToCSV": "Preuzmi CSV",
+      "menu": "Meni",
+      "selection": "Odabir",
+      "selectionZoom": "Odabirno povećanje",
+      "zoomIn": "Uvećajte prikaz",
+      "zoomOut": "Umanjite prikaz",
+      "pan": "Pomeranje",
+      "reset": "Resetuj prikaz"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/ru.json

@@ -0,0 +1,55 @@
+{
+  "name": "ru",
+  "options": {
+    "months": [
+      "Январь",
+      "Февраль",
+      "Март",
+      "Апрель",
+      "Май",
+      "Июнь",
+      "Июль",
+      "Август",
+      "Сентябрь",
+      "Октябрь",
+      "Ноябрь",
+      "Декабрь"
+    ],
+    "shortMonths": [
+      "Янв",
+      "Фев",
+      "Мар",
+      "Апр",
+      "Май",
+      "Июн",
+      "Июл",
+      "Авг",
+      "Сен",
+      "Окт",
+      "Ноя",
+      "Дек"
+    ],
+    "days": [
+      "Воскресенье",
+      "Понедельник",
+      "Вторник",
+      "Среда",
+      "Четверг",
+      "Пятница",
+      "Суббота"
+    ],
+    "shortDays": ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
+    "toolbar": {
+      "exportToSVG": "Сохранить SVG",
+      "exportToPNG": "Сохранить PNG",
+      "exportToCSV": "Сохранить CSV",
+      "menu": "Меню",
+      "selection": "Выбор",
+      "selectionZoom": "Выбор с увеличением",
+      "zoomIn": "Увеличить",
+      "zoomOut": "Уменьшить",
+      "pan": "Перемещение",
+      "reset": "Сбросить увеличение"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/se.json

@@ -0,0 +1,55 @@
+{
+  "name": "se",
+  "options": {
+    "months": [
+      "Januari",
+      "Februari",
+      "Mars",
+      "April",
+      "Maj",
+      "Juni",
+      "Juli",
+      "Augusti",
+      "September",
+      "Oktober",
+      "November",
+      "December"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "Maj",
+      "Juni",
+      "Juli",
+      "Aug",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Dec"
+    ],
+    "days": [
+      "Söndag",
+      "Måndag",
+      "Tisdag",
+      "Onsdag",
+      "Torsdag",
+      "Fredag",
+      "Lördag"
+    ],
+    "shortDays": ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
+    "toolbar": {
+      "exportToSVG": "Ladda SVG",
+      "exportToPNG": "Ladda PNG",
+      "exportToCSV": "Ladda CSV",
+      "menu": "Meny",
+      "selection": "Selektion",
+      "selectionZoom": "Val av zoom",
+      "zoomIn": "Zooma in",
+      "zoomOut": "Zooma ut",
+      "pan": "Panorering",
+      "reset": "Återställ zoomning"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/sk.json

@@ -0,0 +1,55 @@
+{
+  "name": "sk",
+  "options": {
+    "months": [
+      "Január",
+      "Február",
+      "Marec",
+      "Apríl",
+      "Máj",
+      "Jún",
+      "Júl",
+      "August",
+      "September",
+      "Október",
+      "November",
+      "December"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "Máj",
+      "Jún",
+      "Júl",
+      "Aug",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Dec"
+    ],
+    "days": [
+      "Nedeľa",
+      "Pondelok",
+      "Utorok",
+      "Streda",
+      "Štvrtok",
+      "Piatok",
+      "Sobota"
+    ],
+    "shortDays": ["Ne", "Po", "Ut", "St", "Št", "Pi", "So"],
+    "toolbar": {
+      "exportToSVG": "Stiahnuť SVG",
+      "exportToPNG": "Stiahnuť PNG",
+      "exportToCSV": "Stiahnuť CSV",
+      "menu": "Menu",
+      "selection": "Vyberanie",
+      "selectionZoom": "Zoom: Vyberanie",
+      "zoomIn": "Zoom: Priblížiť",
+      "zoomOut": "Zoom: Vzdialiť",
+      "pan": "Presúvanie",
+      "reset": "Resetovať"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/sl.json

@@ -0,0 +1,55 @@
+{
+  "name": "sl",
+  "options": {
+    "months": [
+      "Januar",
+      "Februar",
+      "Marec",
+      "April",
+      "Maj",
+      "Junij",
+      "Julij",
+      "Avgust",
+      "Septemer",
+      "Oktober",
+      "November",
+      "December"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "Maj",
+      "Jun",
+      "Jul",
+      "Avg",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Dec"
+    ],
+    "days": [
+      "Nedelja",
+      "Ponedeljek",
+      "Torek",
+      "Sreda",
+      "Četrtek",
+      "Petek",
+      "Sobota"
+    ],
+    "shortDays": ["Ne", "Po", "To", "Sr", "Če", "Pe", "So"],
+    "toolbar": {
+      "exportToSVG": "Prenesi SVG",
+      "exportToPNG": "Prenesi PNG",
+      "exportToCSV": "Prenesi CSV",
+      "menu": "Menu",
+      "selection": "Izbiranje",
+      "selectionZoom": "Zoom: Izbira",
+      "zoomIn": "Zoom: Približaj",
+      "zoomOut": "Zoom: Oddalji",
+      "pan": "Pomikanje",
+      "reset": "Resetiraj"
+    }
+  }
+}

demo/dist/libs/apexcharts/dist/locales/sq.json

@@ -0,0 +1,55 @@
+{
+  "name": "sq",
+  "options": {
+    "months": [
+      "Janar",
+      "Shkurt",
+      "Mars",
+      "Prill",
+      "Maj",
+      "Qershor",
+      "Korrik",
+      "Gusht",
+      "Shtator",
+      "Tetor",
+      "Nëntor",
+      "Dhjetor"
+    ],
+    "shortMonths": [
+      "Jan",
+      "Shk",
+      "Mar",
+      "Pr",
+      "Maj",
+      "Qer",
+      "Korr",
+      "Gush",
+      "Sht",
+      "Tet",
+      "Nën",
+      "Dhj"
+    ],
+    "days": [
+      "e Dielë",
+      "e Hënë",
+      "e Martë",
+      "e Mërkurë",
+      "e Enjte",
+      "e Premte",
+      "e Shtunë"
+    ],
+    "shortDays": ["Die", "Hën", "Mar", "Mër", "Enj", "Pre", "Sht"],
+    "toolbar": {
+      "exportToSVG": "Shkarko SVG",
+      "exportToPNG": "Shkarko PNG",
+      "exportToCSV": "Shkarko CSV",
+      "menu": "Menu",
+      "selection": "Seleksiono",
+      "selectionZoom": "Seleksiono Zmadhim",
+      "zoomIn": "Zmadho",
+      "zoomOut": "Zvogëlo",
+      "pan": "Spostoje",
+      "reset": "Rikthe dimensionin"
+    }
+  }
+}