@tabler/core 1.1.1 → 1.2.0

package/scss/ui/_type.scss

@@ -1,11 +1,17 @@
 @import "typo/hr";
 
 .lead {
-  line-height: 1.4;
+  color: var(--#{$prefix}secondary);
+  font-size: inherit;
 }
 
 a {
   text-decoration-skip-ink: auto;
+  color: color-mix(in srgb, transparent, var(--#{$prefix}link-color) var(--#{$prefix}link-opacity, 100%));
+
+  &:hover {
+    color: color-mix(in srgb, transparent, var(--#{$prefix}link-hover-color) var(--#{$prefix}link-opacity, 100%));
+  }
 }
 
 h1,
@@ -107,10 +113,14 @@ dl {
 }
 
 pre {
+  --#{$prefix}scrollbar-color: #{$pre-color};
   padding: $pre-padding;
   background: $pre-bg;
   color: $pre-color;
   border-radius: var(--#{$prefix}border-radius);
+  line-height: $line-height-base;
+
+  @include scrollbar;
 
   code {
     background: transparent;
@@ -157,7 +167,7 @@ Selection
  */
 ::selection,
 .text-selected {
-  background-color: color-transparent(var(--#{$prefix}primary), .1);
+  background-color: color-transparent(var(--#{$prefix}primary), 0.1);
 }
 
 .text-selected {
@@ -179,6 +189,17 @@ a:hover:has(.icon) {
   text-decoration: none;
 }
 
+.link-hoverable {
+  border-radius: var(--#{$prefix}border-radius);
+  transition: background-color 0.15s ease-in-out;
+
+  &:hover {
+    text-decoration: none;
+    color: var(--#{$prefix}primary);
+    background: color-transparent(var(--#{$prefix}secondary), 0.04);
+  }
+}
+
 /**
 Subheader
  */
@@ -191,7 +212,7 @@ Mentions
  */
 .mention {
   display: inline-block;
-  box-shadow: var(--tblr-box-shadow-border);
+  box-shadow: var(--#{$prefix}box-shadow-border);
   border-radius: var(--#{$prefix}border-radius-pill);
   line-height: calc(16em / 12);
   font-size: calc(12em / 14);
@@ -199,11 +220,11 @@ Mentions
   background: var(--#{$prefix}bg-surface-tertiary);
   padding: calc(2em / 12) calc(8em / 12);
   font-weight: var(--#{$prefix}font-weight-medium);
-  
+
   @at-root a#{&} {
     cursor: pointer;
 
-    &:hover, 
+    &:hover,
     &.hover {
       background: var(--#{$prefix}bg-surface-secondary);
       text-decoration: underline;
@@ -243,10 +264,51 @@ $text-variants: (
 
 @each $variant, $color in $text-variants {
   .text-#{$variant} {
-    background: color-transparent($color, .04);
+    background: color-transparent($color, 0.04);
     background: color-transparent($color, 4%);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-decoration-color: $color;
   }
-}
+}
+
+.steps {
+  --#{$prefix}steps-padding: 2rem;
+  --#{$prefix}steps-item-size: 1.5rem;
+  margin-left: 1rem;
+  padding-left: var(--#{$prefix}steps-padding);
+  counter-reset: step;
+  border-left: 1px solid var(--#{$prefix}border-color);
+  margin-bottom: 2rem;
+  flex-direction: column;
+
+  h3 {
+    counter-increment: step;
+
+    &:not(:first-child) {
+      margin-top: 2.5rem !important;
+    }
+
+    &:before {
+      content: counter(step);
+      display: inline-block;
+      position: absolute;
+      margin-top: 1px;
+      margin-left: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2);
+      width: var(--#{$prefix}steps-item-size);
+      height: var(--#{$prefix}steps-item-size);
+      text-align: center;
+      color: var(--#{$prefix}body-color);
+      border: 1px solid var(--#{$prefix}border-color);
+      background: var(--#{$prefix}bg-surface);
+      border-radius: var(--#{$prefix}border-radius);
+      line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
+      font-size: var(--#{$prefix}font-size-h4);
+      font-weight: var(--#{$prefix}font-weight-bold);
+    }
+  }
+
+  >:last-child {
+    margin-bottom: 0;
+  }
+}

package/scss/ui/forms/_form-colorinput.scss

@@ -21,7 +21,7 @@ Color Input
   height: 1.5rem;
   color: $white;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
-  border-radius: 3px;
+  border-radius: var(--#{$prefix}border-radius);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
 
   &:before {

package/scss/ui/forms/_form-imagecheck.scss

@@ -2,6 +2,7 @@
 Image check
  */
 .form-imagecheck {
+  --#{$prefix}form-imagecheck-radius: var(--#{$prefix}border-radius);
   position: relative;
   margin: 0;
   cursor: pointer;
@@ -19,7 +20,7 @@ Image check
   margin: 0;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-radius: 3px;
+  border-radius: var(--#{$prefix}form-imagecheck-radius);
 
   .form-imagecheck-input:focus ~ & {
     border-color: var(--#{$prefix}primary);
@@ -73,13 +74,13 @@ Image check
   @include transition(opacity $transition-time);
 
   &:first-child {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    border-top-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-top-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
   }
 
   &:last-child {
-    border-bottom-right-radius: 2px;
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-bottom-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
   }
 
   .form-imagecheck:hover &,

package/scss/ui/forms/_form-selectgroup.scss

@@ -42,7 +42,7 @@ Select group
   cursor: pointer;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
-  border-radius: 3px;
+  border-radius: var(--#{$prefix}border-radius);
   box-shadow: $input-box-shadow;
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 

package/scss/utils/_colors.scss

@@ -1,27 +1,55 @@
 // All colors
-@each $color, $value in map-merge($theme-colors, ( white: $white )) {
+@each $color, $value in map-merge($theme-colors, ( white: $white)) {
   .bg-#{"" + $color} {
-    --#{$prefix}bg-opacity: 1;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
   }
 
   .bg-#{"" + $color}-lt {
-    --#{$prefix}bg-opacity: 1;
-    --#{$prefix}text-opacity: 1;
-    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
-    background-color: rgba(var(--#{$prefix}#{$color}-lt-rgb), var(--#{$prefix}bg-opacity)) !important;
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lt) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
   }
 
   .border-#{"" + $color} {
-    --#{$prefix}border-opacity: 1;
-    border-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}border-opacity)) !important;
+    border-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}border-opacity, 1) * 100%), transparent) !important;
+  }
+
+  .bg-gradient-from-#{"" + $color} {
+    --#{$prefix}gradient-from: var(--#{$prefix}#{$color});
+  }
+
+  .bg-gradient-to-#{"" + $color} {
+    --#{$prefix}gradient-to: var(--#{$prefix}#{$color});
+  }
+
+  .bg-gradient-via-#{"" + $color} {
+    --#{$prefix}gradient-via: var(--#{$prefix}#{$color});
+    --#{$prefix}gradient-stops: var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-via, transparent), var(--#{$prefix}gradient-to, transparent);
+  }
+
+  .text-bg-#{"" + $color} {
+    color: color-contrast($value) if($enable-important-utilities, !important, null);
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+  }
+
+  .link-#{"" + $color} {
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-opacity, 1) * 100%), transparent) !important;
+    text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-underline-opacity, 1) * 100%), transparent) !important;
+
+    @if $link-shade-percentage != 0 {
+      &:hover,
+      &:focus {
+        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+      }
+    }
   }
 }
 
 @each $color, $value in $theme-colors {
   .text-#{"" + $color} {
     --#{$prefix}text-opacity: 1;
-    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity) * 100%), transparent) !important;
   }
 
   .text-#{"" + $color}-fg {
@@ -32,7 +60,7 @@
 @each $color, $value in $gray-colors {
   .bg-#{"" + $color} {
     --#{$prefix}bg-opacity: 1;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
   }
 
   .text-#{"" + $color}-fg {
@@ -40,6 +68,21 @@
   }
 }
 
+@each $color, $value in $social-colors {
+  .bg-#{"" + $color} {
+    --#{$prefix}bg-opacity: 1;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
+  }
+
+  .text-#{"" + $color}-fg {
+    color: $value !important;
+  }
+}
+
+.bg-inverted {
+  --#{$prefix}bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--#{$prefix}bg-surface-inverted) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
+}
 .bg-surface {
   background-color: var(--#{$prefix}bg-surface) !important;
 }
@@ -50,4 +93,8 @@
 
 .bg-surface-tertiary {
   background-color: var(--#{$prefix}bg-surface-tertiary) !important;
+}
+
+.bg-surface-backdrop {
+  background-color: color-transparent($modal-backdrop-bg, $modal-backdrop-opacity) !important;
 }

package/scss/utils/_scroll.scss

@@ -1,5 +1,3 @@
-// stylelint-disable declaration-no-important
-
 /*
 Scrollable
 */

package/scss/vendor/_coloris.scss

@@ -1,6 +1,11 @@
 .clr-picker {
-  box-shadow: var(--#{$prefix}box-shadow-dropdown);
+  box-shadow: var(--#{$prefix}shadow-dropdown);
   background-color: var(--#{$prefix}bg-surface);
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+.clr-gradient {
+  border-radius: var(--#{$prefix}border-radius) var(--#{$prefix}border-radius) 0 0;
 }
 
 input.clr-color {

package/scss/vendor/_fslightbox.scss

@@ -1,6 +1,6 @@
 .fslightbox-container {
   font-family: inherit !important;
-  background: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
+  background: var(--#{$prefix}backdrop-bg) !important;
   backdrop-filter: blur($modal-backdrop-blur) !important;
 }
 

package/scss/vendor/_jsvectormap.scss

@@ -1,7 +1,6 @@
-// @import "jsvectormap/dist/jsvectormap";
-
 .jvm-tooltip {
-  background: $dark;
+  background: var(--#{$prefix}bg-surface-inverted);
+  color: var(--#{$prefix}text-inverted);
   font-family: inherit;
   font-size: $h5-font-size;
   box-shadow: $card-box-shadow;

package/scss/vendor/_litepicker.scss

@@ -62,6 +62,7 @@
     .container__months {
       box-shadow: none;
       background-color: var(--#{$prefix}bg-forms);
+      border-radius: calc(var(--#{$prefix}border-radius) - 1px);
     }
   }
 }

package/scss/vendor/_nouislider.scss

@@ -1,5 +1,3 @@
-// @import "nouislider/dist/nouislider";
-
 .noUi-target {
   border: 0;
   box-shadow: none;

package/scss/vendor/_tinymce.scss

@@ -1,4 +1,4 @@
-.tox-tinymce {
+.tox-hugerte {
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
   border-radius: $border-radius !important;
   font-family: var(--#{$prefix}font-sans-serif) !important;
@@ -12,7 +12,7 @@
   background: transparent !important;
 }
 
-.tox:not(.tox-tinymce-inline) {
+.tox:not(.tox-hugerte-inline) {
   .tox-editor-header {
     border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
     box-shadow: none !important;
@@ -29,6 +29,6 @@
 }
 
 .tox .tox-toolbar-overlord,
-.tox:not(.tox-tinymce-inline) .tox-editor-header {
+.tox:not(.tox-hugerte-inline) .tox-editor-header {
   background: transparent !important;
 }

package/scss/vendor/_tom-select.scss

@@ -2,8 +2,6 @@ $select-color-dropdown: #fff;
 $select-color-dropdown-border-top: red;
 $input-border-width: 1px;
 
-// @import "tom-select/src/scss/tom-select.bootstrap5.scss";
-
 :root {
   --ts-pr-clear-button: 0rem;
   --ts-pr-caret: 0rem;
@@ -13,6 +11,11 @@ $input-border-width: 1px;
   color: inherit;
 }
 
+.focus .ts-control {
+  border-radius: var(--#{$prefix}border-radius);
+}
+  
+
 .ts-control {
   color: inherit;
 
@@ -41,7 +44,7 @@ $input-border-width: 1px;
 .ts-dropdown {
   background: var(--#{$prefix}bg-surface);
   color: var(--#{$prefix}body-color);
-  box-shadow: var(--#{$prefix}box-shadow-dropdown);
+  box-shadow: var(--#{$prefix}shadow-dropdown);
   z-index: $zindex-dropdown;
 
   .option {
@@ -75,4 +78,4 @@ $input-border-width: 1px;
   &> div.item {
     color: var(--#{$prefix}gray-500);
   }
-}
+}

package/scss/vendor/_turbo.scss

@@ -0,0 +1,3 @@
+.turbo-progress-bar {
+  background: var(--#{$prefix}primary);
+}

package/scss/vendor/_wysiwyg.scss

@@ -0,0 +1,34 @@
+.tox-hugerte {
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+  border-radius: $border-radius !important;
+  font-family: var(--#{$prefix}font-sans-serif) !important;
+}
+
+.tox-toolbar__group {
+  padding: 0 .5rem 0;
+}
+
+.tox .tox-toolbar__primary {
+  background: transparent !important;
+}
+
+.tox:not(.tox-hugerte-inline) {
+  .tox-editor-header {
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}
+
+.tox-tbtn {
+  margin: 0 !important; 
+}
+
+.tox-statusbar {
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+}
+
+.tox .tox-toolbar-overlord,
+.tox:not(.tox-hugerte-inline) .tox-editor-header {
+  background: transparent !important;
+}

package/docs/emails/index.mdx

@@ -1,14 +0,0 @@
----
-title: Tabler Emails
-seoTitle: Tabler Emails - premium email templates
-order: 4
-description: Customizable email templates for over 90 clients and devices.
-summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
-seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
----
-
-# Tabler Emails
-
-*Change below image!*
-
-![Tabler Emails](/docs/cover-illustrations.png)

package/docs/emails/introduction/compiled-html.mdx

@@ -1,29 +0,0 @@
----
-title: Compiled templates
-order: 2
-seoTitle: Tabler Emails - How to use the compiled HTML email templates
-description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
-summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
-seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
----
-
-## Compiled version of the template
-
-If you only want to change a content - text or images - of the email template, you can just use the compiled HTML files - `compiled.html`. They are ready to use, and you need only a basic knowledge of HTML to modify them.
-
-## How to modify the compiled HTML files
-
-1. Open the `compiled.html` file in your favorite code editor.
-2. Find the content you want to change inside the `<body>` element.
-3. Modify the content as needed:
-* Change the text, which is mostly placed inside the `<p>` or `<h1>` tags.
-* Change the images by replacing the `src` attribute of the `<img>` tag.
-* Change the links by replacing the `href` attribute of the `<a>` tag.
-* Remove the HTML elements you don't need, but only if you're sure that they are not necessary for the email template to work correctly.
-4. If you changed the images, make sure to replace them in the `assets/` folder.
-5. Remove all the images you don't use from `assets/` to reduce the size of the email template.
-
-## How to use the compiled HTML files
-
-After changing the templates as needed, you can use them in your email campaigns.
-The `compiled.html` file with the `assets/` folder should be sent to your email marketing tool, like Mailchimp, SendGrid, or any other.

package/docs/emails/introduction/contents.mdx

@@ -1,63 +0,0 @@
----
-title: Contents
-order: 1
-seoTitle: Tabler Emails - Content of the package
-description: Content of the Tabler Emails package.
-summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
-seoDescription: todo
----
-
-## Folder structure
-
-Once you unzip the downloaded file, you will see the following structure:
-
-```
-tabler-emails/
-├── emails/
-|	├── absence/
-|	|	├── assets/
-|	|	├── compiled.html
-|	|	├── compiled-dark.html
-|	|	├── source.html
-|	|	├── source-dark.html
-|	|	├── screenshot.jpg
-|	|	├── screenshot-dark.jpg
-|	|	├── screenshot-mobile.jpg
-|	|	└── screenshot-mobile-dark.jpg
-|	├── access-token/
-|	├── account-deleted/
-|	├── .../
-|	├── welcome/
-|	└── whishlist/
-├── images/
-|	├── chart-donuts/
-|	├── icons/
-|	├── illustrations/
-|	└── overlays/
-├── license.txt
-└── readme.html
-```
-
-## Understanding the file structure in Tabler Emails
-
-The **Tabler Emails** package is organized into a clear and efficient folder structure to streamline the use of its assets. Below is a breakdown of its key directories:
-
-### 1. Email Templates: `emails/`
-This folder contains <EmailsCount /> email subfolders, each with a specific template. Each email folder contains the following files:
-* Compiled HTML files for light and dark themes. Read more about its usage in the [Compiled HTML](/docs/emails/compiled-html) section.
-* Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section.
-* Screenshot images for desktop and mobile views.
-* Assets folder with images used in the email template and the CSS file with styles
-
-### 2. Images: `images/`
-It contains 4 subfolders with images used across the different email templates:
-* `chart-donuts/`: Images of donut charts with different fill.
-* `icons/`: [Tabler Icons](/icons) used in the email templates, in PNG version.
-* `illustrations/`: PNG versions of [Tabler Illustrations](/illustrations) for light and dark themes.
-* `overlays/`: overlay images used in the email templates.
-
-### 3. License: `license.txt`
-This file contains the license information for the Tabler Emails package.
-
-### 4. Readme: `readme.html`
-This file with the main information about the Tabler Emails package. It contains a brief description of the package and instructions on how to use it.

package/docs/emails/introduction/index.mdx

@@ -1,9 +0,0 @@
----
-title: Introduction
-seoTitle: Introduction to Tabler Emails
-description: Base information about Tabler Emails package.
-summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
-seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
----
-
-

package/docs/emails/introduction/source-html.mdx

@@ -1,26 +0,0 @@
----
-title: Source templates
-order: 3
-seoTitle: Tabler Emails - How to use the source HTML email templates
-description: Learn how to use the source HTML email templates from the Tabler Emails package.
-summary: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
-seoDescription: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
----
-
-## Source version of the template
-
-If you want to make more advanced changes to the email template, you can use the source HTML files - `source.html` combined with the `theme.css` file. They are ready to use, but you need a basic knowledge of HTML and CSS to modify them.
-
-## How to modify the source HTML files
-
-1. Open the `source.html` file in your favorite code editor.
-2. Open the `theme.css` file from `assets/`* directory in the same editor.
-3. Change all the content and styles as needed.
-4. Use a selected tool to inline the CSS styles into the HTML file. There are a lot of options, like:
-* Online tools like [Juice](https://automattic.github.io/juice/) or [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
-* NPM tools like [juice](https://www.npmjs.com/package/juice) or [inline-css](https://www.npmjs.com/package/inline-css).
-5. Save the output HTML file.
-
-## How to use the source HTML files
-
-To use the modified HTML template send the output file with the `assets/` folder to your email marketing tool.

package/docs/icons/index.mdx

@@ -1,13 +0,0 @@
----
-title: Tabler Icons
-summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
-order: 2
-description: Over 5000 pixel-perfect icons for web design and development
----
-
-## Browse icons
-
-Tabler Icons is a comprehensive icon library that features over <IconsCount rounded /> high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
-
-To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
-

package/docs/icons/libraries/index.mdx

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

package/docs/icons/libraries/preact.mdx

@@ -1,42 +0,0 @@
----
-title: Preact
-description: Tabler Icons library for Preact framework.
-summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
----
-
-![](/docs/icons/package-preact.png)
-
-## Installation
-
-<TabsPackage name="@tabler/icons-preact" />
-
-or just [download from Github](https://github.com/tabler/tabler-icons/releases).
-
-## How to use
-
-It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
-
-```js
-import { IconArrowDown } from '@tabler/icons-preact';
-
-const App = () => {
-  return <IconArrowDown />;
-};
-
-export default App;
-```
-
-You can pass additional props to adjust the icon.
-
-```js
-<IconArrowDown color="red" size={48} />
-```
-
-### Props
-
-| name          | type     | default      |
-| ------------- | -------- | ------------ |
-| `size`        | _Number_ | 24           |
-| `color`       | _String_ | currentColor |
-| `stroke`      | _Number_ | 2            |
-