dbeaver/pro#5630 fix images

Merge branch 'devel' into dbeaver/pro#5630-add-cache-for-queries
fix: do not use cache if result dataFormat changed
2026-10-16 14:50:15 +08:00 · 2025-07-29 16:33:18 +02:00 · 2025-07-29 15:16:42 +02:00 · 2025-07-29 20:06:59 +08:00 · 2025-07-29 19:53:03 +08:00 · 2025-07-29 19:52:34 +08:00
1949 changed files with 33405 additions and 27098 deletions
@@ -1,29 +0,0 @@
---
-name: Bug report
-about: Create a report to help us improve CloudBeaver
-title: ''
-labels: bug, wait for review
-assignees: ''
-
---
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here, e.g. error log.
@@ -0,0 +1,61 @@
+name: 🐛 Bug Report
+description: Create a report to help us improve our product
+labels: [wait for review]
+type: Bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for reporting a bug in CloudBeaver!
+        To ensure we can address the issue as quickly and efficiently as possible, please provide as much detail as you can in the fields below.
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: |
+        A clear and concise description of the issue being addressed.
+         - Describe the actual problematic behavior.
+         - Ensure private information is redacted.
+         - Include console output or log files if relevant.
+         - If applicable, add screenshots or screen recordings to help explain your problem.
+      placeholder: |
+        Please enter a description of the issue. Here you can also attach log files, screenshots or a video
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: Describe the steps to reproduce the bug
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected/Desired Behavior
+      description: |
+        A clear and concise description of what happens in the software **after** a fix is created and merged.
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: CloudBeaver Version
+      description: What version of CloudBeaver are you running?
+      placeholder: ex. CloudBeaver Community 25.0.0
+    validations:
+      required: true
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Any additional context about the environment
+      placeholder: |
+        Example:
+        1. OS: [e.g. iOS, Ubuntu, Windows 11]
+        2. Browser: [e.g. Chrome, Safari]
+    validations:
+      required: false
@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Read our documentations
+    url: https://dbeaver.com/docs/cloudbeaver
+    about: Many articles about product deployment and features.
+  - name: Try advanced database management features in DBeaver PRO or CloudBeaver EE
+    url: https://dbeaver.com/download/?utm_source=github&utm_medium=social&utm_campaign=issue
+    about: Download a 14-day free trial on dbeaver.com. No credit card is needed.
+  - name: Learn how to use CloudBeaver effectively with our tutorial videos
+    url: https://www.youtube.com/channel/UC-yOjsQLSaJVEghg6UB3N7A
+    about: Subscribe to our YouTube channel and watch new tutorials every week.
+  - name: Follow us on X (ex. Twitter)
+    url: https://x.com/dbeaver_news
+    about: Get everyday tips, fresh news, and DBeaver/CloudBeaver feature overviews.
@@ -1,8 +1,9 @@
 ---
-name: Feature request
-about: Suggest an idea for CloudBeaver
+name: Feature Request
+about: Provide a description of your feature request for CloudBeaver. Include the problem you are trying to solve, why it is important, and any specific functionality you believe would improve the platform.
 title: ''
-labels: feature request, wait for review
+labels: wait for review
+type: Feature
 assignees: ''

 ---
@@ -12,3 +13,9 @@ A clear and concise description of what the problem is. Ex. I'm always frustrate

 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
@@ -1,8 +1,9 @@
 ---
 name: Question
-about: Is there something unclear?
+about: Is there something unclear? Ask your question.
 title: ''
-labels: question, wait for review
+labels: wait for review
+type: Question
 assignees: ''

 ---
@@ -71,17 +71,23 @@ jobs:
      - if: inputs.clean-cache
        run: yarn clear

-      # - run: yarn install --immutable
-      #   working-directory: ./cloudbeaver/common-typescript
+      - run: yarn install --immutable
+        working-directory: ./cloudbeaver/common-typescript

-      # - run: yarn install --immutable
-      #   working-directory: ./cloudbeaver/common-react
+      - run: yarn install --immutable
+        working-directory: ./cloudbeaver/common-react

      - run: yarn install --immutable

      - run: yarn bundle
        working-directory: ./cloudbeaver/webapp/packages/product-default

+      - run: yarn test
+        working-directory: ./cloudbeaver/common-typescript
+
+      # - run: yarn test
+      #   working-directory: ./cloudbeaver/common-react
+
      - run: yarn test

      # - name: Archive build artifacts
@@ -10,7 +10,7 @@ on:
    branches: [devel]

 concurrency:
-  group: ${{ github.event_name == 'pull_request' && format('pr-{0}', github.event.pull_request.number) || 'push-pr-devel' }}
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.event.pull_request.number || github.ref_name }}
  cancel-in-progress: true

 jobs:
@@ -2,21 +2,18 @@
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.linkedEditing": true,
-
  "task.autoDetect": "off",
-
  "java.configuration.updateBuildConfiguration": "automatic",
  "java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx16G -Xms100m -Xlog:disable",
  "java.compile.nullAnalysis.mode": "automatic",
-
  "typescript.preferences.useAliasesForRenames": false,
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "typescript.preferences.quoteStyle": "single",
  "typescript.tsdk": "webapp/.yarn/sdks/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
  "prettier.prettierPath": "webapp/.yarn/sdks/prettier/index.cjs",
  "eslint.nodePath": "webapp/.yarn/sdks",
-
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
@@ -24,8 +21,9 @@
    "typescript",
    "typescriptreact"
  ],
-  "eslint.workingDirectories": ["webapp"],
-
+  "eslint.workingDirectories": [
+    "webapp"
+  ],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
@@ -42,12 +40,10 @@
  "[java]": {
    "editor.defaultFormatter": "redhat.java"
  },
-
  "files.eol": "\n",
  "files.associations": {
    "*.css": "postcss"
  },
-
  "java.checkstyle.configuration": "${workspaceFolder}/../dbeaver-common/.github/dbeaver-checkstyle-config.xml",
  "java.checkstyle.version": "10.12.0"
-}
+}
@@ -19,6 +19,16 @@
      "group": "test",
      "args": ["test"]
    },
+    {
+      "label": "Run Tests Common Typescript",
+      "type": "shell",
+      "command": "yarn",
+      "group": "test",
+      "args": ["test"],
+      "options": {
+        "cwd": "${workspaceFolder}/common-typescript"
+      }
+    },
    {
      "label": "Run DevServer CE",
      "group": "build",
@@ -92,18 +102,10 @@
        "clear": false
      }
    },
-    {
-      "label": "Update TS references CE",
-      "type": "shell",
-      "command": "yarn run update-ts-references",
-      "options": {
-        "cwd": "${workspaceFolder}/webapp"
-      }
-    },
    {
      "label": "Clean CE",
      "type": "shell",
-      "command": "yarn clean",
+      "command": "yarn clear",
      "options": {
        "cwd": "${workspaceFolder}/webapp"
      }
@@ -115,6 +117,15 @@
      "options": {
        "cwd": "${workspaceFolder}/webapp/packages"
      }
+    },
+    {
+      "label": "Run Ui Kit Preview",
+      "type": "shell",
+      "command": "yarn",
+      "options": {
+        "cwd": "${workspaceFolder}/common-react/@dbeaver/ui-kit"
+      },
+      "args": ["docs"]
    }
  ],
  "inputs": [
@@ -7,7 +7,7 @@ CloudBeaver is a web server that provides a rich web interface. The server itsel
 It is free to use and open-source (licensed under [Apache 2](https://github.com/dbeaver/cloudbeaver/blob/devel/LICENSE) license).  
 See our [WIKI](https://github.com/dbeaver/cloudbeaver/wiki) for more details. 

-<img src="https://github.com/dbeaver/cloudbeaver/wiki/images/connection-creation-demo.png" width="400"/>
+<a><img src="https://github.com/dbeaver/cloudbeaver/wiki/images/connection-creation-demo.png" width="400"/></a>
 <img src="https://github.com/dbeaver/cloudbeaver/wiki/images/gis-demo.png" width="400"/>
 <img src="https://github.com/dbeaver/cloudbeaver/wiki/images/data-transfer-demo.png" width="400"/>
 <img src="https://github.com/dbeaver/cloudbeaver/wiki/images/sql-editor-demo.png" width="400"/>
@@ -25,47 +25,56 @@ You can see a live demo of CloudBeaver here: https://demo.cloudbeaver.io

 ## Changelog

+### 25.1.3 2025-07-21
+- A password confirmation field has been added for administrators in the Easy Config section to help prevent accidental misconfigurations;
+- Added column descriptions in the Data Editor to provide more metadata context. You can disable this in Preferences > Data Viewer;
+- Added the option to display tabs across multiple rows, allowing you to see all tabs without scrolling. You can enable this in Preferences > Interface;
+- Changed the default engine used for autocompletion in the SQL Editor. This Semantic engine offers improved suggestions for database objects, keywords, and functions. You can switch back to the Legacy engine in Preferences -> SQL Editor;
+- Clickhouse: fixed the presentation of tuples and map data types in the data editor.

-### 25.0 2025-03-03
-### Changes since 24.3.0:
- General:
-  -    Added transaction log viewing for connections with manual commit mode. This allows users to see all modifying statements before committing;
-  -    Added an ability for all editors to reconnect if a connection has been lost;
-  -    Tooltips for metadata objects and SQL Editor tabs now include additional details about catalogs, schemas, and connections;
-  -    Added Ctrl + Shift + S (Cmd + Shift + S on Mac) shortcut for the "Save As Script" action;
-  -    Updated list of available shortcuts for macOS.
+### 25.1.2 2025-07-07
+- The CloudBeaver default theme matches the device theme by default now. You can change this behavior in user preferences under the Theme section;
+- Added a button “Clear” to the Output panel;
+- Changed the data transfer mechanism to avoid intermediate file creation. The parameter dataExportFileSizeLimit was removed from the server configuration as deprecated;
+- PostgresSQL: fixed misplaced comment for table DDL generation.
+
+### 25.1.1 2025-06-23
+### Changes since 25.1.0:
+- Added a search panel for SQL Editor and Value panel: press Ctrl+F to open a panel that allows searching and replacing by keyword or regular expression.
+- Added a new welcome screen for a freshly opened application. This screen contains shortcuts to create a new connection, open SQL editor or documentation.
+- Databend database support has been added.
+
+### 25.1.0 2025-06-02
+### Changes since 25.0.0:
+- Important:
+  -    Connection templates were removed from the application. You can use the Connection Editor to create new connections.
 - Administration:
-  -    Added system information data to the Product Information tab in the Administration panel. This provides administrators with quick access to essential system details, such as the server deployment type (e.g., Docker, Kubernetes), install path, Java version, and Java parameters;
-  -    The global access server URL has been added to the console log, making it easier to locate server installation information directly within the logs;
-  -    New environment variables were introduced for theme styling, SQL editor, and log viewer settings. You can use them for quick setup during the initial Docker configuration stage.
+  -    Log records now capture create, update, and delete actions for users, teams, and connections for improved tracking and transparency.
 - LDAP authorization:
-  -    Added the ability to match users from LDAP configuration with CloudBeaver users;
-  -    Added an option to specify a user login as an attribute parameter for LDAP providers;
-  -    CloudBeaver now uses EntityID or objectGUID to create new LDAP users in CloudBeaver to ensure uniqueness. This change enhances user identification and prevents conflicts while maintaining backward compatibility for existing users.
- Deployment:
-  -    CloudBeaver now uses JDK 21 as its base Java image. If you use standard deployment and upgrade scripts, the new Java version will be applied automatically after the product update;
-  -    Changed the permission of the Docker volumes directory to enhance security and prevent any insecure actions by the "root" user. All new deployments will use the "dbeaver" user by default. For existing deployments running as the "root" user, this update will automatically adjust file permissions to ensure they are compatible with the new security model. There will be no manual intervention, and the service will continue to run as expected with the updated permissions.
- Connections:
-  -    Enabled the possibility of switching a database connection to read-only mode. This mode can be activated in the connection dialog. Administrators can set this mode for any connection, while regular users can set it for their private connections only;
-  -    For Oracle and SQL Server connections, advanced database settings can now be used in the URL connection mode.
+  -    Added support for secure [LDAP authentication over SSL](https://github.com/dbeaver/cloudbeaver/wiki/LDAP-Authentication);
+  -    Brute force protection is now supported for LDAP authentication. All authentication methods on the application level have this security mechanism.
+- SQL Editor:
+  -    A new setting to autosave scripts in the SQL editor appeared in global and users' preferences;
+  -    Auto-completion has been improved for aliases and camelCase entities.
 - Data Editor:
-  -    Auto-suggestions for column names in the Data Editor filter field were introduced to avoid typing mistakes;
-  -    Introduced the ability to insert data in tables without unique keys: you can import data from CSV files or insert entire rows directly via UI;
-  -    The collapse of the grouping panel doesn't lead to the complete panel cleaning anymore.
- Data transfer:
-  -    Added the ability to use default spreadsheet names (e.g. Sheet0, Sheet1) for exporting to XLSX;
-  -    An option to replace line break characters on any custom value was added when exporting to CSV.
- Navigator tree: 
-  -    An option to show metadata object comments was added. You can enable it in the database navigator settings panel;
-  -    Introduced the ability to create connections not only on the initial level but in folders and sub-folders directly;
-  -    Fixed the display of objects with long names (more than 32 characters) - now, such names will be displayed entirely and not in a cropped format.
- Drivers:
-  -    The MariaDB driver has been updated to version 3.5.1;
-  -    The SQLite driver has been updated to version 3.48.0.0.
+  -    Improved table rendering to scale column width depending on the content;
+  -    Accessibility: improved keyboard navigation by sorting buttons in column headers.
+- General:
+  -    Added the ability to configure the default database or schema in the connection configuration;
+  -    Enhanced initial configuration stage security: a server needs to be restarted if the initial setup time exceeds 1 hour;
+  -    Improved Navigation tree performance: lost connection does not lead to the application freezing anymore;
+  -    Data transfer: Improved export/import functionality performance by optimizing disk memory consumption;
+  -    Vietnamese localization has been added (thanks to [0xhanh](https://github.com/0xhanh)).
+- Databases and drivers:
+  -    Clickhouse: driver has been updated to version 0.8.5;
+  -    DuckDB: expanded the list of system objects that can be hidden in the Navigation tree;
+  -    LibSQL: added the ability to connect using token authentication;
+  -    Oracle: users' DDL in Oracle is displayed in the metadata editor on the corresponding tab for users with Oracle administration permissions;
+  -    SQLite: added information about a table's Strict mode to the table metadata section (thanks to [eusebe-cda](https://github.com/eusebe-cda)).

 ## Contribution
 As a community-driven open-source project, we warmly welcome contributions through GitHub pull requests. 

 [We are happy to reward](https://dbeaver.com/help-dbeaver/) our most active contributors every major sprint.
-The most significant contribution to our code for the major release 24.3.0 was made by:
-1. [cashlifei](https://github.com/cashlifei)
+The most significant contribution to our code for the major release 25.1.0 was made by:
+1. [0xhanh](https://github.com/0xhanh) - for Vietnamese localization.
@@ -1,9 +1,17 @@
+# artifacts
+lib
+out
+dist
+node_modules
+
+# Yarn
 .yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+!.yarn/sdks/**

 # Swap the comments on the following lines if you wish to use zero-installs
 # In that case, don't forget to run `yarn config set enableGlobalCache false`!
@@ -11,9 +19,3 @@

 #!.yarn/cache
 .pnp.*
-
-# artifacts
-lib
-out
-dist
-node_modules
@@ -1,6 +1,6 @@
 {
  "name": "prettier",
-  "version": "3.5.1-sdk",
+  "version": "3.6.2-sdk",
  "main": "./index.cjs",
  "type": "commonjs",
  "bin": "./bin/prettier.cjs"
@@ -1,10 +0,0 @@
-{
-  "name": "typescript",
-  "version": "5.7.3-sdk",
-  "main": "./lib/typescript.js",
-  "type": "commonjs",
-  "bin": {
-    "tsc": "./bin/tsc",
-    "tsserver": "./bin/tsserver"
-  }
-}
@@ -1,479 +1,537 @@
-import { JSX as JSX_2 } from 'react/jsx-runtime';
-import type { Key } from 'react';
-import { Provider } from 'react';
-import type { ReactElement } from 'react';
-import { ReactNode } from 'react';
-import { RefAttributes } from 'react';
+import * as react2 from "react";
+import * as react13 from "react";
+import * as react10 from "react";
+import { Key, ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";

-declare interface BaseRenderRowProps<TRow, TSummaryRow = unknown> extends Omit_2<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'>, Pick<DataGridProps<TRow, TSummaryRow>, 'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'> {
-    viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
-    rowIdx: number;
-    selectedCellIdx: number | undefined;
-    isRowSelectionDisabled: boolean;
-    isRowSelected: boolean;
-    gridRowStart: number;
-    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+//#region src/types.d.ts
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Maybe<T> = T | undefined | null;
+interface Column<TRow, TSummaryRow = unknown> {
+  /** The name of the column. Displayed in the header cell by default */
+  readonly name: string | ReactElement;
+  /** A unique key to distinguish each column */
+  readonly key: string;
+  /**
+   * Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns
+   * @default 'auto'
+   */
+  readonly width?: Maybe<number | string>;
+  /**
+   * Minimum column width in pixels
+   * @default 50
+   */
+  readonly minWidth?: Maybe<number>;
+  /** Maximum column width in pixels */
+  readonly maxWidth?: Maybe<number>;
+  /** Class name(s) for the cell */
+  readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
+  /** Class name(s) for the header cell */
+  readonly headerCellClass?: Maybe<string>;
+  /** Class name(s) for the summary cell */
+  readonly summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>;
+  /** Render function to render the content of cells */
+  readonly renderCell?: Maybe<(props: RenderCellProps<TRow, TSummaryRow>) => ReactNode>;
+  /** Render function to render the content of the header cell */
+  readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode>;
+  /** Render function to render the content of summary cells */
+  readonly renderSummaryCell?: Maybe<(props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode>;
+  /** Render function to render the content of group cells */
+  readonly renderGroupCell?: Maybe<(props: RenderGroupCellProps<TRow, TSummaryRow>) => ReactNode>;
+  /** Render function to render the content of edit cells. When set, the column is automatically set to be editable */
+  readonly renderEditCell?: Maybe<(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
+  /** Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor */
+  readonly editable?: Maybe<boolean | ((row: TRow) => boolean)>;
+  readonly colSpan?: Maybe<(args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>>;
+  /** Determines whether column is frozen */
+  readonly frozen?: Maybe<boolean>;
+  /** Enable resizing of the column */
+  readonly resizable?: Maybe<boolean>;
+  /** Enable sorting of the column */
+  readonly sortable?: Maybe<boolean>;
+  /** Enable dragging of the column */
+  readonly draggable?: Maybe<boolean>;
+  /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */
+  readonly sortDescendingFirst?: Maybe<boolean>;
+  /** Options for cell editing */
+  readonly editorOptions?: Maybe<{
+    /**
+     * Render the cell content in addition to the edit cell.
+     * Enable this option when the editor is rendered outside the grid, like a modal for example.
+     * By default, the cell content is not rendered when the edit cell is open.
+     * @default false
+     */
+    readonly displayCellContent?: Maybe<boolean>;
+    /**
+     * Commit changes when clicking outside the cell
+     * @default true
+     */
+    readonly commitOnOutsideClick?: Maybe<boolean>;
+    /**
+     * Close the editor when the row changes externally
+     * @default true
+     */
+    readonly closeOnExternalRowChange?: Maybe<boolean>;
+  }>;
 }
-
-export declare interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
-    readonly parent: CalculatedColumnParent<TRow, TSummaryRow> | undefined;
-    readonly idx: number;
-    readonly level: number;
-    readonly width: number | string;
-    readonly minWidth: number;
-    readonly maxWidth: number | undefined;
-    readonly resizable: boolean;
-    readonly sortable: boolean;
-    readonly draggable: boolean;
-    readonly frozen: boolean;
-    readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;
+interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
+  readonly parent: CalculatedColumnParent<TRow, TSummaryRow> | undefined;
+  readonly idx: number;
+  readonly level: number;
+  readonly width: number | string;
+  readonly minWidth: number;
+  readonly maxWidth: number | undefined;
+  readonly resizable: boolean;
+  readonly sortable: boolean;
+  readonly draggable: boolean;
+  readonly frozen: boolean;
+  readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;
+  readonly renderHeaderCell: (props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode;
 }
-
-export declare type CalculatedColumnOrColumnGroup<R, SR> = CalculatedColumnParent<R, SR> | CalculatedColumn<R, SR>;
-
-export declare interface CalculatedColumnParent<R, SR> {
-    readonly name: string | ReactElement;
-    readonly parent: CalculatedColumnParent<R, SR> | undefined;
-    readonly idx: number;
-    readonly colSpan: number;
-    readonly level: number;
-    readonly headerCellClass?: Maybe<string>;
+interface ColumnGroup<R, SR = unknown> {
+  /** The name of the column group, it will be displayed in the header cell */
+  readonly name: string | ReactElement;
+  readonly headerCellClass?: Maybe<string>;
+  readonly children: readonly ColumnOrColumnGroup<R, SR>[];
 }
-
-export declare const Cell: <R, SR>(props: CellRendererProps<R, SR> & RefAttributes<HTMLDivElement>) => React.JSX.Element;
-
-export declare interface CellClickArgs<TRow, TSummaryRow = unknown> {
-    rowIdx: number;
-    row: TRow;
-    column: CalculatedColumn<TRow, TSummaryRow>;
-    selectCell: (enableEditor?: boolean) => void;
+interface CalculatedColumnParent<R, SR> {
+  readonly name: string | ReactElement;
+  readonly parent: CalculatedColumnParent<R, SR> | undefined;
+  readonly idx: number;
+  readonly colSpan: number;
+  readonly level: number;
+  readonly headerCellClass?: Maybe<string>;
 }
-
-declare type CellEvent<E extends React.SyntheticEvent<HTMLDivElement>> = E & {
-    preventGridDefault: () => void;
-    isGridDefaultPrevented: () => boolean;
+type ColumnOrColumnGroup<R, SR = unknown> = Column<R, SR> | ColumnGroup<R, SR>;
+type CalculatedColumnOrColumnGroup<R, SR> = CalculatedColumnParent<R, SR> | CalculatedColumn<R, SR>;
+interface Position {
+  readonly idx: number;
+  readonly rowIdx: number;
+}
+interface RenderCellProps<TRow, TSummaryRow = unknown> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
+  rowIdx: number;
+  isCellEditable: boolean;
+  tabIndex: number;
+  onRowChange: (row: TRow) => void;
+}
+interface RenderSummaryCellProps<TSummaryRow, TRow = unknown> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TSummaryRow;
+  tabIndex: number;
+}
+interface RenderGroupCellProps<TRow, TSummaryRow = unknown> {
+  groupKey: unknown;
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: GroupRow<TRow>;
+  childRows: readonly TRow[];
+  isExpanded: boolean;
+  tabIndex: number;
+  toggleGroup: () => void;
+}
+interface RenderEditCellProps<TRow, TSummaryRow = unknown> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
+  rowIdx: number;
+  onRowChange: (row: TRow, commitChanges?: boolean) => void;
+  onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
+}
+interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  sortDirection: SortDirection | undefined;
+  priority: number | undefined;
+  tabIndex: number;
+}
+interface BaseCellRendererProps<TRow, TSummaryRow = unknown> extends Omit<React.ComponentProps<'div'>, 'children'>, Pick<DataGridProps<TRow, TSummaryRow>, 'onCellMouseDown' | 'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'> {
+  rowIdx: number;
+  selectCell: (position: Position, options?: SelectCellOptions) => void;
+}
+interface CellRendererProps<TRow, TSummaryRow> extends BaseCellRendererProps<TRow, TSummaryRow> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
+  colSpan: number | undefined;
+  isDraggedOver: boolean;
+  isCellSelected: boolean;
+  onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, newRow: TRow) => void;
+}
+type CellEvent<E extends React.SyntheticEvent<HTMLDivElement>> = E & {
+  preventGridDefault: () => void;
+  isGridDefaultPrevented: () => boolean;
 };
-
-export declare type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;
-
-export declare type CellKeyDownArgs<TRow, TSummaryRow = unknown> = SelectCellKeyDownArgs<TRow, TSummaryRow> | EditCellKeyDownArgs<TRow, TSummaryRow>;
-
-export declare type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;
-
-export declare interface CellRendererProps<TRow, TSummaryRow> extends Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>, Omit_2<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'> {
-    column: CalculatedColumn<TRow, TSummaryRow>;
-    colSpan: number | undefined;
-    isCopied: boolean;
-    isDraggedOver: boolean;
-    isCellSelected: boolean;
-    onClick: RenderRowProps<TRow, TSummaryRow>['onCellClick'];
-    onDoubleClick: RenderRowProps<TRow, TSummaryRow>['onCellDoubleClick'];
-    onContextMenu: RenderRowProps<TRow, TSummaryRow>['onCellContextMenu'];
-    onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, newRow: TRow) => void;
+type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;
+type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;
+type CellClipboardEvent = React.ClipboardEvent<HTMLDivElement>;
+interface CellMouseArgs<TRow, TSummaryRow = unknown> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
+  rowIdx: number;
+  selectCell: (enableEditor?: boolean) => void;
 }
-
-export declare interface CellSelectArgs<TRow, TSummaryRow = unknown> {
-    rowIdx: number;
-    row: TRow | undefined;
-    column: CalculatedColumn<TRow, TSummaryRow>;
+interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
+  mode: 'SELECT';
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
+  rowIdx: number;
+  selectCell: (position: Position, options?: SelectCellOptions) => void;
 }
-
-export declare type ColSpanArgs<TRow, TSummaryRow> = {
-    type: 'HEADER';
+interface EditCellKeyDownArgs<TRow, TSummaryRow = unknown> {
+  mode: 'EDIT';
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
+  rowIdx: number;
+  navigate: () => void;
+  onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
+}
+type CellKeyDownArgs<TRow, TSummaryRow = unknown> = SelectCellKeyDownArgs<TRow, TSummaryRow> | EditCellKeyDownArgs<TRow, TSummaryRow>;
+interface CellSelectArgs<TRow, TSummaryRow = unknown> {
+  rowIdx: number;
+  row: TRow | undefined;
+  column: CalculatedColumn<TRow, TSummaryRow>;
+}
+type CellMouseEventHandler<R, SR> = Maybe<(args: CellMouseArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
+interface BaseRenderRowProps<TRow, TSummaryRow = unknown> extends BaseCellRendererProps<TRow, TSummaryRow> {
+  viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
+  rowIdx: number;
+  selectedCellIdx: number | undefined;
+  isRowSelectionDisabled: boolean;
+  isRowSelected: boolean;
+  gridRowStart: number;
+}
+interface RenderRowProps<TRow, TSummaryRow = unknown> extends BaseRenderRowProps<TRow, TSummaryRow> {
+  row: TRow;
+  lastFrozenColumnIndex: number;
+  draggedOverCellIdx: number | undefined;
+  selectedCellEditor: ReactElement<RenderEditCellProps<TRow>> | undefined;
+  onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, rowIdx: number, newRow: TRow) => void;
+  rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe<string>>;
+}
+interface RowsChangeData<R, SR = unknown> {
+  indexes: number[];
+  column: CalculatedColumn<R, SR>;
+}
+interface SelectRowEvent<TRow> {
+  row: TRow;
+  checked: boolean;
+  isShiftClick: boolean;
+}
+interface SelectHeaderRowEvent {
+  checked: boolean;
+}
+interface FillEvent<TRow> {
+  columnKey: string;
+  sourceRow: TRow;
+  targetRow: TRow;
+}
+interface CellCopyPasteArgs<TRow, TSummaryRow = unknown> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
+}
+type CellCopyArgs<TRow, TSummaryRow = unknown> = CellCopyPasteArgs<TRow, TSummaryRow>;
+type CellPasteArgs<TRow, TSummaryRow = unknown> = CellCopyPasteArgs<TRow, TSummaryRow>;
+interface GroupRow<TRow> {
+  readonly childRows: readonly TRow[];
+  readonly id: string;
+  readonly parentId: unknown;
+  readonly groupKey: unknown;
+  readonly isExpanded: boolean;
+  readonly level: number;
+  readonly posInSet: number;
+  readonly setSize: number;
+  readonly startRowIndex: number;
+}
+interface SortColumn {
+  readonly columnKey: string;
+  readonly direction: SortDirection;
+}
+type SortDirection = 'ASC' | 'DESC';
+type ColSpanArgs<TRow, TSummaryRow> = {
+  type: 'HEADER';
 } | {
-    type: 'ROW';
-    row: TRow;
+  type: 'ROW';
+  row: TRow;
 } | {
-    type: 'SUMMARY';
-    row: TSummaryRow;
+  type: 'SUMMARY';
+  row: TSummaryRow;
 };
-
-export declare interface Column<TRow, TSummaryRow = unknown> {
-    /** The name of the column. By default it will be displayed in the header cell */
-    readonly name: string | ReactElement;
-    /** A unique key to distinguish each column */
-    readonly key: string;
-    /**
-     * Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns
-     * @default 'auto'
-     */
-    readonly width?: Maybe<number | string>;
-    /**
-     * Minimum column width in px
-     * @default '50px'
-     */
-    readonly minWidth?: Maybe<number>;
-    /** Maximum column width in px. */
-    readonly maxWidth?: Maybe<number>;
-    readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
-    readonly headerCellClass?: Maybe<string>;
-    readonly summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>;
-    /** Render function used to render the content of cells */
-    readonly renderCell?: Maybe<(props: RenderCellProps<TRow, TSummaryRow>) => ReactNode>;
-    /** Render function used to render the content of the column's header cell */
-    readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode>;
-    /** Render function used to render the content of summary cells */
-    readonly renderSummaryCell?: Maybe<(props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode>;
-    /** Render function used to render the content of group cells */
-    readonly renderGroupCell?: Maybe<(props: RenderGroupCellProps<TRow, TSummaryRow>) => ReactNode>;
-    /** Render function used to render the content of edit cells. When set, the column is automatically set to be editable */
-    readonly renderEditCell?: Maybe<(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
-    /** Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor */
-    readonly editable?: Maybe<boolean | ((row: TRow) => boolean)>;
-    readonly colSpan?: Maybe<(args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>>;
-    /** Determines whether column is frozen or not */
-    readonly frozen?: Maybe<boolean>;
-    /** Enable resizing of a column */
-    readonly resizable?: Maybe<boolean>;
-    /** Enable sorting of a column */
-    readonly sortable?: Maybe<boolean>;
-    /** Enable dragging of a column */
-    readonly draggable?: Maybe<boolean>;
-    /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */
-    readonly sortDescendingFirst?: Maybe<boolean>;
-    readonly editorOptions?: Maybe<{
-        /**
-         * Render the cell content in addition to the edit cell.
-         * Enable this option when the editor is rendered outside the grid, like a modal for example.
-         * By default, the cell content is not rendered when the edit cell is open.
-         * @default false
-         */
-        readonly displayCellContent?: Maybe<boolean>;
-        /** @default true */
-        readonly commitOnOutsideClick?: Maybe<boolean>;
-    }>;
-}
-
-export declare interface ColumnGroup<R, SR = unknown> {
-    /** The name of the column group, it will be displayed in the header cell */
-    readonly name: string | ReactElement;
-    readonly headerCellClass?: Maybe<string>;
-    readonly children: readonly ColumnOrColumnGroup<R, SR>[];
-}
-
-export declare type ColumnOrColumnGroup<R, SR = unknown> = Column<R, SR> | ColumnGroup<R, SR>;
-
-export declare interface CopyEvent<TRow> {
-    sourceColumnKey: string;
-    sourceRow: TRow;
-}
-
-export declare const DataGridDefaultRenderersProvider: Provider<Maybe<Renderers<any, any>>>;
-
-export declare interface DataGridHandle {
-    element: HTMLDivElement | null;
-    scrollToCell: (position: PartialPosition) => void;
-    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
-}
-
-export declare interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {
-    /**
-     * Grid and data Props
-     */
-    /** An array of objects representing each column on the grid */
-    columns: readonly ColumnOrColumnGroup<NoInfer<R>, NoInfer<SR>>[];
-    /** A function called for each rendered row that should return a plain key/value pair object */
-    rows: readonly R[];
-    /**
-     * Rows to be pinned at the top of the rows view for summary, the vertical scroll bar will not scroll these rows.
-     */
-    topSummaryRows?: Maybe<readonly SR[]>;
-    /**
-     * Rows to be pinned at the bottom of the rows view for summary, the vertical scroll bar will not scroll these rows.
-     */
-    bottomSummaryRows?: Maybe<readonly SR[]>;
-    /** The getter should return a unique key for each row */
-    rowKeyGetter?: Maybe<(row: NoInfer<R>) => K>;
-    onRowsChange?: Maybe<(rows: NoInfer<R>[], data: RowsChangeData<NoInfer<R>, NoInfer<SR>>) => void>;
-    /**
-     * Dimensions props
-     */
-    /**
-     * The height of each row in pixels
-     * @default 35
-     */
-    rowHeight?: Maybe<number | ((row: NoInfer<R>) => number)>;
-    /**
-     * The height of the header row in pixels
-     * @default 35
-     */
-    headerRowHeight?: Maybe<number>;
-    /**
-     * The height of each summary row in pixels
-     * @default 35
-     */
-    summaryRowHeight?: Maybe<number>;
-    /**
-     * Feature props
-     */
-    /** Set of selected row keys */
-    selectedRows?: Maybe<ReadonlySet<K>>;
-    /** Determines if row selection is disabled, per row */
-    isRowSelectionDisabled?: Maybe<(row: NoInfer<R>) => boolean>;
-    /** Function called whenever row selection is changed */
-    onSelectedRowsChange?: Maybe<(selectedRows: Set<NoInfer<K>>) => void>;
-    /** Used for multi column sorting */
-    sortColumns?: Maybe<readonly SortColumn[]>;
-    onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
-    defaultColumnOptions?: Maybe<DefaultColumnOptions<NoInfer<R>, NoInfer<SR>>>;
-    onFill?: Maybe<(event: FillEvent<NoInfer<R>>) => NoInfer<R>>;
-    onCopy?: Maybe<(event: CopyEvent<NoInfer<R>>) => void>;
-    onPaste?: Maybe<(event: PasteEvent<NoInfer<R>>) => NoInfer<R>>;
-    /**
-     * Event props
-     */
-    /** Function called whenever a cell is clicked */
-    onCellClick?: Maybe<(args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
-    /** Function called whenever a cell is double clicked */
-    onCellDoubleClick?: Maybe<(args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
-    /** Function called whenever a cell is right clicked */
-    onCellContextMenu?: Maybe<(args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
-    onCellKeyDown?: Maybe<(args: CellKeyDownArgs<NoInfer<R>, NoInfer<SR>>, event: CellKeyboardEvent) => void>;
-    /** Function called whenever cell selection is changed */
-    onSelectedCellChange?: Maybe<(args: CellSelectArgs<NoInfer<R>, NoInfer<SR>>) => void>;
-    /** Called when the grid is scrolled */
-    onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
-    /** Called when a column is resized */
-    onColumnResize?: Maybe<(column: CalculatedColumn<R, SR>, width: number) => void>;
-    /** Called when a column is reordered */
-    onColumnsReorder?: Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>;
-    /**
-     * Toggles and modes
-     */
-    /** @default true */
-    enableVirtualization?: Maybe<boolean>;
-    /**
-     * Miscellaneous
-     */
-    renderers?: Maybe<Renderers<NoInfer<R>, NoInfer<SR>>>;
-    rowClass?: Maybe<(row: NoInfer<R>, rowIdx: number) => Maybe<string>>;
-    /** @default 'ltr' */
-    direction?: Maybe<Direction>;
-    'data-testid'?: Maybe<string>;
-    'data-cy'?: Maybe<string>;
-}
-
-declare const _default: <R, SR = unknown, K extends Key = Key>(props: DataGridProps<R, SR, K> & RefAttributes<DataGridHandle>) => React.JSX.Element;
-export default _default;
-
-export declare type DefaultColumnOptions<R, SR> = Pick<Column<R, SR>, 'renderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable' | 'draggable'>;
-
-declare type Direction = 'ltr' | 'rtl';
-
-declare interface EditCellKeyDownArgs<TRow, TSummaryRow = unknown> {
-    mode: 'EDIT';
-    row: TRow;
-    column: CalculatedColumn<TRow, TSummaryRow>;
-    rowIdx: number;
-    navigate: () => void;
-    onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
-}
-
-export declare interface FillEvent<TRow> {
-    columnKey: string;
-    sourceRow: TRow;
-    targetRow: TRow;
-}
-
-declare interface GroupRow<TRow> {
-    readonly childRows: readonly TRow[];
-    readonly id: string;
-    readonly parentId: unknown;
-    readonly groupKey: unknown;
-    readonly isExpanded: boolean;
-    readonly level: number;
-    readonly posInSet: number;
-    readonly setSize: number;
-    readonly startRowIndex: number;
-}
-
-declare type Maybe<T> = T | undefined | null;
-
-declare type Omit_2<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
-declare interface PartialPosition {
-    readonly idx?: number | undefined;
-    readonly rowIdx?: number | undefined;
-}
-
-export declare interface PasteEvent<TRow> {
-    sourceColumnKey: string;
-    sourceRow: TRow;
-    targetColumnKey: string;
-    targetRow: TRow;
-}
-
-declare interface Position {
-    readonly idx: number;
-    readonly rowIdx: number;
-}
-
-export declare interface RenderCellProps<TRow, TSummaryRow = unknown> {
-    column: CalculatedColumn<TRow, TSummaryRow>;
-    row: TRow;
-    rowIdx: number;
-    isCellEditable: boolean;
-    tabIndex: number;
-    onRowChange: (row: TRow) => void;
-}
-
-export declare function renderCheckbox({ onChange, indeterminate, ...props }: RenderCheckboxProps): JSX_2.Element;
-
-export declare interface RenderCheckboxProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'> {
-    indeterminate?: boolean | undefined;
-    onChange: (checked: boolean, shift: boolean) => void;
-}
-
-export declare interface RenderEditCellProps<TRow, TSummaryRow = unknown> {
-    column: CalculatedColumn<TRow, TSummaryRow>;
-    row: TRow;
-    rowIdx: number;
-    onRowChange: (row: TRow, commitChanges?: boolean) => void;
-    onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
-}
-
-export declare interface Renderers<TRow, TSummaryRow> {
-    renderCell?: Maybe<(key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode>;
-    renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
-    renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
-    renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
-    noRowsFallback?: Maybe<ReactNode>;
-}
-
-export declare interface RenderGroupCellProps<TRow, TSummaryRow = unknown> {
-    groupKey: unknown;
-    column: CalculatedColumn<TRow, TSummaryRow>;
-    row: GroupRow<TRow>;
-    childRows: readonly TRow[];
-    isExpanded: boolean;
-    tabIndex: number;
-    toggleGroup: () => void;
-}
-
-export declare function renderHeaderCell<R, SR>({ column, sortDirection, priority }: RenderHeaderCellProps<R, SR>): string | JSX_2.Element;
-
-export declare interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {
-    column: CalculatedColumn<TRow, TSummaryRow>;
-    sortDirection: SortDirection | undefined;
-    priority: number | undefined;
-    tabIndex: number;
-}
-
-export declare interface RenderRowProps<TRow, TSummaryRow = unknown> extends BaseRenderRowProps<TRow, TSummaryRow> {
-    row: TRow;
-    lastFrozenColumnIndex: number;
-    copiedCellIdx: number | undefined;
-    draggedOverCellIdx: number | undefined;
-    selectedCellEditor: ReactElement<RenderEditCellProps<TRow>> | undefined;
-    onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, rowIdx: number, newRow: TRow) => void;
-    rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe<string>>;
-    setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined;
-}
-
-export declare function renderSortIcon({ sortDirection }: RenderSortIconProps): JSX_2.Element | null;
-
-export declare interface RenderSortIconProps {
-    sortDirection: SortDirection | undefined;
-}
-
-export declare function renderSortPriority({ priority }: RenderSortPriorityProps): number | undefined;
-
-export declare interface RenderSortPriorityProps {
-    priority: number | undefined;
-}
-
-export declare interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPriorityProps {
-}
-
-export declare interface RenderSummaryCellProps<TSummaryRow, TRow = unknown> {
-    column: CalculatedColumn<TRow, TSummaryRow>;
-    row: TSummaryRow;
-    tabIndex: number;
-}
-
-export declare function renderToggleGroup<R, SR>(props: RenderGroupCellProps<R, SR>): JSX_2.Element;
-
-export declare function renderValue<R, SR>(props: RenderCellProps<R, SR>): ReactNode;
-
-export declare const Row: <R, SR>(props: RenderRowProps<R, SR> & RefAttributes<HTMLDivElement>) => React.JSX.Element;
-
-export declare type RowHeightArgs<TRow> = {
-    type: 'ROW';
-    row: TRow;
+type RowHeightArgs<TRow> = {
+  type: 'ROW';
+  row: TRow;
 } | {
-    type: 'GROUP';
-    row: GroupRow<TRow>;
+  type: 'GROUP';
+  row: GroupRow<TRow>;
 };
-
-export declare interface RowsChangeData<R, SR = unknown> {
-    indexes: number[];
-    column: CalculatedColumn<R, SR>;
+interface RenderSortIconProps {
+  sortDirection: SortDirection | undefined;
 }
-
-export declare const SELECT_COLUMN_KEY = "rdg-select-column";
-
-export declare function SelectCellFormatter({ value, tabIndex, indeterminate, disabled, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: SelectCellFormatterProps): ReactNode;
-
-declare interface SelectCellFormatterProps extends SharedInputProps {
-    value: boolean;
+interface RenderSortPriorityProps {
+  priority: number | undefined;
 }
-
-declare interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
-    mode: 'SELECT';
-    row: TRow;
-    column: CalculatedColumn<TRow, TSummaryRow>;
-    rowIdx: number;
-    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPriorityProps {}
+interface RenderCheckboxProps extends Pick<React.ComponentProps<'input'>, 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'> {
+  indeterminate?: boolean | undefined;
+  onChange: (checked: boolean, shift: boolean) => void;
 }
-
-export declare const SelectColumn: Column<any, any>;
-
-export declare interface SelectHeaderRowEvent {
-    checked: boolean;
+interface Renderers<TRow, TSummaryRow> {
+  renderCell?: Maybe<(key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode>;
+  renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
+  renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
+  renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
+  noRowsFallback?: Maybe<ReactNode>;
 }
-
-export declare interface SelectRowEvent<TRow> {
-    row: TRow;
-    checked: boolean;
-    isShiftClick: boolean;
+interface SelectCellOptions {
+  enableEditor?: Maybe<boolean>;
+  shouldFocusCell?: Maybe<boolean>;
 }
-
-declare type SharedDivProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label' | 'aria-labelledby' | 'aria-description' | 'aria-describedby' | 'aria-rowcount' | 'className' | 'style'>;
-
-declare type SharedInputProps = Pick<RenderCheckboxProps, 'disabled' | 'tabIndex' | 'aria-label' | 'aria-labelledby' | 'indeterminate' | 'onChange'>;
-
-export declare interface SortColumn {
-    readonly columnKey: string;
-    readonly direction: SortDirection;
+interface ColumnWidth {
+  readonly type: 'resized' | 'measured';
+  readonly width: number;
 }
-
-export declare type SortDirection = 'ASC' | 'DESC';
-
-export declare function textEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose }: RenderEditCellProps<TRow, TSummaryRow>): JSX_2.Element;
-
-export declare function ToggleGroup<R, SR>({ groupKey, isExpanded, tabIndex, toggleGroup }: RenderGroupCellProps<R, SR>): JSX_2.Element;
-
-export declare const TreeDataGrid: <R, SR = unknown, K extends Key = Key>(props: TreeDataGridProps<R, SR, K> & RefAttributes<DataGridHandle>) => React.JSX.Element;
-
-export declare interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit_2<DataGridProps<R, SR, K>, 'columns' | 'role' | 'aria-rowcount' | 'rowHeight' | 'onFill' | 'isRowSelectionDisabled'> {
-    columns: readonly Column<NoInfer<R>, NoInfer<SR>>[];
-    rowHeight?: Maybe<number | ((args: RowHeightArgs<NoInfer<R>>) => number)>;
-    groupBy: readonly string[];
-    rowGrouper: (rows: readonly NoInfer<R>[], columnKey: string) => Record<string, readonly NoInfer<R>[]>;
-    expandedGroupIds: ReadonlySet<unknown>;
-    onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;
+type ColumnWidths = ReadonlyMap<string, ColumnWidth>;
+type Direction = 'ltr' | 'rtl';
+//#endregion
+//#region src/ScrollToCell.d.ts
+interface PartialPosition {
+  readonly idx?: number | undefined;
+  readonly rowIdx?: number | undefined;
 }
-
-export declare function useHeaderRowSelection(): {
-    isIndeterminate: boolean;
-    isRowSelected: boolean;
-    onRowSelectionChange: (selectRowEvent: SelectHeaderRowEvent) => void;
+//#endregion
+//#region src/DataGrid.d.ts
+type DefaultColumnOptions<R, SR> = Pick<Column<R, SR>, 'renderCell' | 'renderHeaderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable' | 'draggable'>;
+interface DataGridHandle {
+  element: HTMLDivElement | null;
+  scrollToCell: (position: PartialPosition) => void;
+  selectCell: (position: Position, options?: SelectCellOptions) => void;
+}
+type SharedDivProps = Pick<React.ComponentProps<'div'>, 'role' | 'aria-label' | 'aria-labelledby' | 'aria-description' | 'aria-describedby' | 'aria-rowcount' | 'className' | 'style'>;
+interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {
+  ref?: Maybe<React.Ref<DataGridHandle>>;
+  /**
+   * Grid and data Props
+   */
+  /** An array of column definitions */
+  columns: readonly ColumnOrColumnGroup<NoInfer<R>, NoInfer<SR>>[];
+  /** A function called for each rendered row that should return a plain key/value pair object */
+  rows: readonly R[];
+  /** Rows pinned at the top of the grid for summary purposes */
+  topSummaryRows?: Maybe<readonly SR[]>;
+  /** Rows pinned at the bottom of the grid for summary purposes */
+  bottomSummaryRows?: Maybe<readonly SR[]>;
+  /** Function to return a unique key/identifier for each row */
+  rowKeyGetter?: Maybe<(row: NoInfer<R>) => K>;
+  /** Callback triggered when rows are changed */
+  onRowsChange?: Maybe<(rows: NoInfer<R>[], data: RowsChangeData<NoInfer<R>, NoInfer<SR>>) => void>;
+  /**
+   * Dimensions props
+   */
+  /**
+   * Height of each row in pixels
+   * @default 35
+   */
+  rowHeight?: Maybe<number | ((row: NoInfer<R>) => number)>;
+  /**
+   * Height of the header row in pixels
+   * @default 35
+   */
+  headerRowHeight?: Maybe<number>;
+  /**
+   * Height of each summary row in pixels
+   * @default 35
+   */
+  summaryRowHeight?: Maybe<number>;
+  /** A map of column widths */
+  columnWidths?: Maybe<ColumnWidths>;
+  /** Callback triggered when column widths change */
+  onColumnWidthsChange?: Maybe<(columnWidths: ColumnWidths) => void>;
+  /**
+   * Feature props
+   */
+  /** A set of selected row keys */
+  selectedRows?: Maybe<ReadonlySet<K>>;
+  /** Function to determine if row selection is disabled for a specific row */
+  isRowSelectionDisabled?: Maybe<(row: NoInfer<R>) => boolean>;
+  /** Callback triggered when the selection changes */
+  onSelectedRowsChange?: Maybe<(selectedRows: Set<NoInfer<K>>) => void>;
+  /** An array of sorted columns */
+  sortColumns?: Maybe<readonly SortColumn[]>;
+  /** Callback triggered when sorting changes */
+  onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
+  /** Default options applied to all columns */
+  defaultColumnOptions?: Maybe<DefaultColumnOptions<NoInfer<R>, NoInfer<SR>>>;
+  onFill?: Maybe<(event: FillEvent<NoInfer<R>>) => NoInfer<R>>;
+  /**
+   * Event props
+   */
+  /** Callback triggered when a pointer becomes active in a cell */
+  onCellMouseDown?: CellMouseEventHandler<R, SR>;
+  /** Callback triggered when a cell is clicked */
+  onCellClick?: CellMouseEventHandler<R, SR>;
+  /** Callback triggered when a cell is double-clicked */
+  onCellDoubleClick?: CellMouseEventHandler<R, SR>;
+  /** Callback triggered when a cell is right-clicked */
+  onCellContextMenu?: CellMouseEventHandler<R, SR>;
+  /** Callback triggered when a key is pressed in a cell */
+  onCellKeyDown?: Maybe<(args: CellKeyDownArgs<NoInfer<R>, NoInfer<SR>>, event: CellKeyboardEvent) => void>;
+  /** Callback triggered when a cell's content is copied */
+  onCellCopy?: Maybe<(args: CellCopyArgs<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent) => void>;
+  /** Callback triggered when content is pasted into a cell */
+  onCellPaste?: Maybe<(args: CellPasteArgs<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent) => NoInfer<R>>;
+  /** Function called whenever cell selection is changed */
+  onSelectedCellChange?: Maybe<(args: CellSelectArgs<NoInfer<R>, NoInfer<SR>>) => void>;
+  /** Callback triggered when the grid is scrolled */
+  onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
+  /** Callback triggered when column is resized */
+  onColumnResize?: Maybe<(column: CalculatedColumn<R, SR>, width: number) => void>;
+  /** Callback triggered when columns are reordered */
+  onColumnsReorder?: Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>;
+  /**
+   * Toggles and modes
+   */
+  /** @default true */
+  enableVirtualization?: Maybe<boolean>;
+  /**
+   * Miscellaneous
+   */
+  /** Custom renderers for cells, rows, and other components */
+  renderers?: Maybe<Renderers<NoInfer<R>, NoInfer<SR>>>;
+  /** Function to apply custom class names to rows */
+  rowClass?: Maybe<(row: NoInfer<R>, rowIdx: number) => Maybe<string>>;
+  /** Custom class name for the header row */
+  headerRowClass?: Maybe<string>;
+  /**
+   * Text direction of the grid ('ltr' or 'rtl')
+   * @default 'ltr'
+   * */
+  direction?: Maybe<Direction>;
+  'data-testid'?: Maybe<string>;
+  'data-cy'?: Maybe<string>;
+}
+/**
+ * Main API Component to render a data grid of rows and columns
+ *
+ * @example
+ *
+ * <DataGrid columns={columns} rows={rows} />
+ */
+declare function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridProps<R, SR, K>): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/TreeDataGrid.d.ts
+interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit<DataGridProps<R, SR, K>, 'columns' | 'role' | 'aria-rowcount' | 'rowHeight' | 'onFill' | 'isRowSelectionDisabled'> {
+  columns: readonly Column<NoInfer<R>, NoInfer<SR>>[];
+  rowHeight?: Maybe<number | ((args: RowHeightArgs<NoInfer<R>>) => number)>;
+  groupBy: readonly string[];
+  rowGrouper: (rows: readonly NoInfer<R>[], columnKey: string) => Record<string, readonly NoInfer<R>[]>;
+  expandedGroupIds: ReadonlySet<unknown>;
+  onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;
+  groupIdGetter?: Maybe<(groupKey: string, parentId?: string) => string>;
+}
+declare function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
+  columns: rawColumns,
+  rows: rawRows,
+  rowHeight: rawRowHeight,
+  rowKeyGetter: rawRowKeyGetter,
+  onCellKeyDown: rawOnCellKeyDown,
+  onCellCopy: rawOnCellCopy,
+  onCellPaste: rawOnCellPaste,
+  onRowsChange,
+  selectedRows: rawSelectedRows,
+  onSelectedRowsChange: rawOnSelectedRowsChange,
+  renderers,
+  groupBy: rawGroupBy,
+  rowGrouper,
+  expandedGroupIds,
+  onExpandedGroupIdsChange,
+  groupIdGetter: rawGroupIdGetter,
+  ...props
+}: TreeDataGridProps<R, SR, K>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/DataGridDefaultRenderersContext.d.ts
+declare const DataGridDefaultRenderersContext: react2.Context<Maybe<Renderers<any, any>>>;
+//#endregion
+//#region src/Row.d.ts
+declare const RowComponent: <R, SR>(props: RenderRowProps<R, SR>) => React.JSX.Element;
+//#endregion
+//#region src/Cell.d.ts
+declare const CellComponent: <R, SR>(props: CellRendererProps<R, SR>) => React.JSX.Element;
+//#endregion
+//#region src/Columns.d.ts
+declare const SELECT_COLUMN_KEY = "rdg-select-column";
+declare const SelectColumn: Column<any, any>;
+//#endregion
+//#region src/cellRenderers/renderCheckbox.d.ts
+declare function renderCheckbox({
+  onChange,
+  indeterminate,
+  ...props
+}: RenderCheckboxProps): react_jsx_runtime9.JSX.Element;
+//#endregion
+//#region src/cellRenderers/renderToggleGroup.d.ts
+declare function renderToggleGroup<R, SR>(props: RenderGroupCellProps<R, SR>): react_jsx_runtime11.JSX.Element;
+declare function ToggleGroup<R, SR>({
+  groupKey,
+  isExpanded,
+  tabIndex,
+  toggleGroup
+}: RenderGroupCellProps<R, SR>): react_jsx_runtime11.JSX.Element;
+//#endregion
+//#region src/cellRenderers/renderValue.d.ts
+declare function renderValue<R, SR>(props: RenderCellProps<R, SR>): react13.ReactNode;
+//#endregion
+//#region src/cellRenderers/SelectCellFormatter.d.ts
+type SharedInputProps = Pick<RenderCheckboxProps, 'disabled' | 'tabIndex' | 'aria-label' | 'aria-labelledby' | 'indeterminate' | 'onChange'>;
+interface SelectCellFormatterProps extends SharedInputProps {
+  value: boolean;
+}
+declare function SelectCellFormatter({
+  value,
+  tabIndex,
+  indeterminate,
+  disabled,
+  onChange,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy
+}: SelectCellFormatterProps): react10.ReactNode;
+//#endregion
+//#region src/editors/textEditor.d.ts
+declare function textEditor<TRow, TSummaryRow>({
+  row,
+  column,
+  onRowChange,
+  onClose
+}: RenderEditCellProps<TRow, TSummaryRow>): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/renderHeaderCell.d.ts
+declare function renderHeaderCell<R, SR>({
+  column,
+  sortDirection,
+  priority
+}: RenderHeaderCellProps<R, SR>): string | react_jsx_runtime5.JSX.Element;
+//#endregion
+//#region src/sortStatus.d.ts
+declare function renderSortIcon({
+  sortDirection
+}: RenderSortIconProps): react_jsx_runtime7.JSX.Element | null;
+declare function renderSortPriority({
+  priority
+}: RenderSortPriorityProps): number | undefined;
+//#endregion
+//#region src/hooks/useRowSelection.d.ts
+declare function useRowSelection(): {
+  isRowSelectionDisabled: boolean;
+  isRowSelected: boolean;
+  onRowSelectionChange: (selectRowEvent: SelectRowEvent<any>) => void;
 };
-
-export declare function useRowSelection(): {
-    isRowSelectionDisabled: boolean;
-    isRowSelected: boolean;
-    onRowSelectionChange: (selectRowEvent: SelectRowEvent<any>) => void;
+declare function useHeaderRowSelection(): {
+  isIndeterminate: boolean;
+  isRowSelected: boolean;
+  onRowSelectionChange: (selectRowEvent: SelectHeaderRowEvent) => void;
 };
-
-export { }
+//#endregion
+export { CalculatedColumn, CalculatedColumnOrColumnGroup, CalculatedColumnParent, CellComponent as Cell, CellCopyArgs, CellKeyDownArgs, CellKeyboardEvent, CellMouseArgs, CellMouseEvent, CellPasteArgs, CellRendererProps, CellSelectArgs, ColSpanArgs, Column, ColumnGroup, ColumnOrColumnGroup, ColumnWidth, ColumnWidths, DataGrid, DataGridDefaultRenderersContext, DataGridHandle, DataGridProps, DefaultColumnOptions, FillEvent, RenderCellProps, RenderCheckboxProps, RenderEditCellProps, RenderGroupCellProps, RenderHeaderCellProps, RenderRowProps, RenderSortIconProps, RenderSortPriorityProps, RenderSortStatusProps, RenderSummaryCellProps, Renderers, RowComponent as Row, RowHeightArgs, RowsChangeData, SELECT_COLUMN_KEY, SelectCellFormatter, SelectCellOptions, SelectColumn, SelectHeaderRowEvent, SelectRowEvent, SortColumn, SortDirection, ToggleGroup, TreeDataGrid, TreeDataGridProps, renderCheckbox, renderHeaderCell, renderSortIcon, renderSortPriority, renderToggleGroup, renderValue, textEditor, useHeaderRowSelection, useRowSelection };
+//# sourceMappingURL=index.d.ts.map
@@ -15,7 +15,7 @@
    Root;
 }

-.mlln6zg7-0-0-beta-47 {
+.mlln6zg7-0-0-beta-55 {
  @layer rdg.MeasuringCell {
    contain: strict;
    grid-row: 1;
@@ -24,13 +24,13 @@
 }


-.cj343x07-0-0-beta-47 {
+.cj343x07-0-0-beta-55 {
  @layer rdg.Cell {
    /* max-content does not work with size containment
     * dynamically switching between different containment styles incurs a heavy relayout penalty
     * Chromium bug: at odd zoom levels or subpixel positioning,
     * layout/paint/style containment can make cell borders disappear
-     *   https://bugs.chromium.org/p/chromium/issues/detail?id=1326946
+     *   https://issues.chromium.org/issues/40840864
     */
    position: relative; /* needed for absolute positioning to work */
    padding-block: 0;
@@ -53,7 +53,7 @@
  }
 }

-.csofj7r7-0-0-beta-47 {
+.csofj7r7-0-0-beta-55 {
  @layer rdg.Cell {
    position: sticky;
    /* Should have a higher value than 0 to show up above unfrozen cells */
@@ -66,8 +66,33 @@
  }
 }

+.ch2wcw87-0-0-beta-55 {
+  @layer rdg.DragHandle {
+    --rdg-drag-handle-size: 8px;
+    z-index: 0;
+    cursor: move;
+    inline-size: var(--rdg-drag-handle-size);
+    block-size: var(--rdg-drag-handle-size);
+    background-color: var(--rdg-selection-color);
+    place-self: end;

-.c1bn88vv7-0-0-beta-47 {
+    &:hover {
+      --rdg-drag-handle-size: 16px;
+      border: 2px solid var(--rdg-selection-color);
+      background-color: var(--rdg-background-color);
+    }
+  }
+}
+
+.c1wvphzh7-0-0-beta-55 {
+  @layer rdg.DragHandle {
+    z-index: 1;
+    position: sticky;
+  }
+}
+
+
+.c1bn88vv7-0-0-beta-55 {
  @layer rdg.CheckboxInput {
    display: block;
    margin: auto;
@@ -86,13 +111,13 @@
 }


-.g1s9ylgp7-0-0-beta-47 {
+.g1s9ylgp7-0-0-beta-55 {
  @layer rdg.GroupCellContent {
    outline: none;
  }
 }

-.cz54e4y7-0-0-beta-47 {
+.cz54e4y7-0-0-beta-55 {
  @layer rdg.GroupCellCaret {
    margin-inline-start: 4px;
    stroke: currentColor;
@@ -107,63 +132,13 @@
 }


-.c6ra8a37-0-0-beta-47 {
-  @layer rdg.Cell {
-    background-color: #ccccff;
-  }
-}
-
-.cq910m07-0-0-beta-47 {
-  @layer rdg.Cell {
-    background-color: #ccccff;
-
-    &.c6ra8a37-0-0-beta-47 {
-      background-color: #9999ff;
-    }
-  }
-}
-
-
-.c1w9bbhr7-0-0-beta-47 {
-  @layer rdg.DragHandle {
-    --rdg-drag-handle-size: 8px;
-    z-index: 0;
-    cursor: move;
-    inline-size: var(--rdg-drag-handle-size);
-    block-size: var(--rdg-drag-handle-size);
-    background-color: var(--rdg-selection-color);
-    place-self: end;
-
-    &:hover {
-      --rdg-drag-handle-size: 16px;
-      border: 2px solid var(--rdg-selection-color);
-      background-color: var(--rdg-background-color);
-    }
-  }
-}
-
-.c1creorc7-0-0-beta-47 {
-  @layer rdg.DragHandle {
-    z-index: 1;
-    position: sticky;
-  }
-}
-
-
-.cis5rrm7-0-0-beta-47 {
-  @layer rdg.EditCell {
-    padding: 0;
-  }
-}
-
-
-.h44jtk67-0-0-beta-47 {
+.h44jtk67-0-0-beta-55 {
  @layer rdg.SortableHeaderCell {
    display: flex;
  }
 }

-.hcgkhxz7-0-0-beta-47 {
+.hcgkhxz7-0-0-beta-55 {
  @layer rdg.SortableHeaderCellName {
    flex-grow: 1;
    overflow: clip;
@@ -172,19 +147,33 @@
 }


-.c6l2wv17-0-0-beta-47 {
+.c6ra8a37-0-0-beta-55 {
+  @layer rdg.Cell {
+    background-color: #ccccff;
+  }
+}
+
+
+.cis5rrm7-0-0-beta-55 {
+  @layer rdg.EditCell {
+    padding: 0;
+  }
+}
+
+
+.c6l2wv17-0-0-beta-55 {
  @layer rdg.HeaderCell {
    cursor: pointer;
  }
 }

-.c1kqdw7y7-0-0-beta-47 {
+.c1kqdw7y7-0-0-beta-55 {
  @layer rdg.HeaderCell {
    touch-action: none;
  }
 }

-.r1y6ywlx7-0-0-beta-47 {
+.r1y6ywlx7-0-0-beta-55 {
  @layer rdg.HeaderCell {
    cursor: col-resize;
    position: absolute;
@@ -195,16 +184,29 @@
  }
 }

-.c1bezg5o7-0-0-beta-47 {
-  opacity: 0.5;
+.c1bezg5o7-0-0-beta-55 {
+  @layer rdg.HeaderCell {
+    background-color: var(--rdg-header-draggable-background-color);
+  }
 }

-.c1vc96037-0-0-beta-47 {
-  background-color: var(--rdg-header-draggable-background-color);
+.c1vc96037-0-0-beta-55 {
+  @layer rdg.HeaderCell {
+    background-color: var(--rdg-header-draggable-background-color);
+  }
+}
+
+.d8rwc9w7-0-0-beta-55 {
+  @layer rdg.HeaderCell {
+    border-radius: 4px;
+    width: fit-content;
+    outline: 2px solid hsl(207, 100%, 50%);
+    outline-offset: -2px;
+  }
 }


-.r1upfr807-0-0-beta-47 {
+.r1upfr807-0-0-beta-55 {
  @layer rdg.Row {
    display: contents;
    background-color: var(--rdg-background-color);
@@ -223,14 +225,14 @@
  }
 }

-.r190mhd37-0-0-beta-47 {
+.r190mhd37-0-0-beta-55 {
  @layer rdg.FocusSink {
    outline: 2px solid var(--rdg-selection-color);
    outline-offset: -2px;
  }
 }

-.r139qu9m7-0-0-beta-47 {
+.r139qu9m7-0-0-beta-55 {
  @layer rdg.FocusSink {
    &::before {
      content: '';
@@ -244,26 +246,26 @@
 }


-.h10tskcx7-0-0-beta-47 {
+.h10tskcx7-0-0-beta-55 {
  @layer rdg.HeaderRow {
    display: contents;
    background-color: var(--rdg-header-background-color);
    font-weight: bold;

-    & > .cj343x07-0-0-beta-47 {
+    & > .cj343x07-0-0-beta-55 {
      /* Should have a higher value than 1 to show up above regular cells and the focus sink */
      z-index: 2;
      position: sticky;
    }

-    & > .csofj7r7-0-0-beta-47 {
+    & > .csofj7r7-0-0-beta-55 {
      z-index: 3;
    }
  }
 }


-.a3ejtar7-0-0-beta-47 {
+.a3ejtar7-0-0-beta-55 {
  @layer rdg.SortIcon {
    fill: currentColor;

@@ -274,7 +276,7 @@
 }


-.rnvodz57-0-0-beta-47 {
+.rnvodz57-0-0-beta-55 {
  @layer rdg.Defaults {
    *,
    *::before,
@@ -285,7 +287,7 @@

  @layer rdg.Root {
    --rdg-color: #000;   --rdg-border-color: #ddd;   --rdg-summary-border-color: #aaa;   --rdg-background-color: hsl(0deg 0% 100%);   --rdg-header-background-color: hsl(0deg 0% 97.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 96%);   --rdg-row-selected-background-color: hsl(207deg 76% 92%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%);   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
-    --rdg-selection-color: #66afe9;
+    --rdg-selection-color: hsl(207, 75%, 66%);
    --rdg-font-size: 14px;
    --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);

@@ -334,30 +336,30 @@
    }

    > :nth-last-child(1 of .rdg-top-summary-row) {
-      > .cj343x07-0-0-beta-47 {
+      > .cj343x07-0-0-beta-55 {
        border-block-end: 2px solid var(--rdg-summary-border-color);
      }
    }

    > :nth-child(1 of .rdg-bottom-summary-row) {
-      > .cj343x07-0-0-beta-47 {
+      > .cj343x07-0-0-beta-55 {
        border-block-start: 2px solid var(--rdg-summary-border-color);
      }
    }
  }
 }

-.vlqv91k7-0-0-beta-47 {
+.vlqv91k7-0-0-beta-55 {
  @layer rdg.Root {
    user-select: none;

-    & .r1upfr807-0-0-beta-47 {
+    & .r1upfr807-0-0-beta-55 {
      cursor: move;
    }
  }
 }

-.f1lsfrzw7-0-0-beta-47 {
+.f1lsfrzw7-0-0-beta-55 {
  @layer rdg.FocusSink {
    grid-column: 1/-1;
    pointer-events: none;
@@ -366,7 +368,7 @@
  }
 }

-.f1cte0lg7-0-0-beta-47 {
+.f1cte0lg7-0-0-beta-55 {
  @layer rdg.FocusSink {
    /* Should have a higher value than 3 to show up above header and summary rows */
    z-index: 3;
@@ -374,7 +376,7 @@
 }


-.s8wc6fl7-0-0-beta-47 {
+.s8wc6fl7-0-0-beta-55 {
  @layer rdg.SummaryCell {
    inset-block-start: var(--rdg-summary-row-top);
    inset-block-end: var(--rdg-summary-row-bottom);
@@ -382,42 +384,42 @@
 }


-.skuhp557-0-0-beta-47 {
+.skuhp557-0-0-beta-55 {
  @layer rdg.SummaryRow {
-    > .cj343x07-0-0-beta-47 {
+    > .cj343x07-0-0-beta-55 {
      position: sticky;
    }
  }
 }

-.tf8l5ub7-0-0-beta-47 {
+.tf8l5ub7-0-0-beta-55 {
  @layer rdg.SummaryRow {
-    > .cj343x07-0-0-beta-47 {
+    > .cj343x07-0-0-beta-55 {
      z-index: 2;
    }

-    > .csofj7r7-0-0-beta-47 {
+    > .csofj7r7-0-0-beta-55 {
      z-index: 3;
    }
  }
 }


-.g1yxluv37-0-0-beta-47 {
+.g1yxluv37-0-0-beta-55 {
  @layer rdg.GroupedRow {
    &:not([aria-selected='true']) {
      background-color: var(--rdg-header-background-color);
    }

-    > .cj343x07-0-0-beta-47:not(:last-child, .csofj7r7-0-0-beta-47),
-    > :nth-last-child(n + 2 of .csofj7r7-0-0-beta-47) {
+    > .cj343x07-0-0-beta-55:not(:last-child, .csofj7r7-0-0-beta-55),
+    > :nth-last-child(n + 2 of .csofj7r7-0-0-beta-55) {
      border-inline-end: none;
    }
  }
 }


-.t7vyx3i7-0-0-beta-47 {
+.t7vyx3i7-0-0-beta-55 {
  @layer rdg.TextEditor {
    appearance: none;

@@ -447,3 +449,5 @@
 }


+
+/*# sourceMappingURL=styles.css.map*/
@@ -1,19 +1,17 @@
 {
  "name": "react-data-grid",
-  "version": "7.0.0-beta.47",
+  "version": "7.0.0-beta.55",
  "type": "module",
  "exports": {
    "./lib/styles.css": "./lib/styles.css",
    ".": {
      "types": "./lib/index.d.ts",
-      "module": "./lib/bundle.js",
-      "require": "./lib/bundle.cjs",
-      "default": "./lib/bundle.js"
+      "default": "./lib/index.js"
    }
  },
-  "browser": "./lib/bundle.js",
-  "main": "./lib/bundle.cjs",
-  "module": "./lib/bundle.js",
+  "browser": "./lib/index.js",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
  "types": "./lib/index.d.ts",
  "files": [
    "lib"
@@ -25,7 +23,7 @@
    "clsx": "^2.0.0"
  },
  "peerDependencies": {
-    "react": "^18.0 || ^19.0",
-    "react-dom": "^18.0 || ^19.0"
+    "react": "^19.0",
+    "react-dom": "^19.0"
  }
 }
@@ -4,6 +4,7 @@
  "sideEffects": [],
  "exports": {
    ".": "./lib/index.js",
+    "./*.css": "./src/*.css",
    "./*": "./lib/*.js"
  },
  "scripts": {
@@ -23,7 +24,7 @@
    "!lib/tests",
    "!.tsbuildinfo"
  ],
-  "packageManager": "yarn@4.6.0",
+  "packageManager": "yarn@4.9.2",
  "devDependencies": {
    "@dbeaver/tsconfig": "workspace:^",
    "@types/react": "^19",
@@ -32,6 +33,8 @@
    "typescript": "^5"
  },
  "dependencies": {
+    "@dbeaver/react-dnd": "workspace:^",
+    "@dbeaver/ui-kit": "workspace:^",
    "react": "^19",
    "react-data-grid": "file:./artifacts",
    "react-dom": "^19"
@@ -4,19 +4,29 @@ import { DataGridCellContext, type IDataGridCellRenderer } from './DataGridCellC
 import { createCellMouseEvent } from './eventUtils.js';
 import { DataGridCellInnerContext, type IDataGridCellInnerContext } from './DataGridCellInnerContext.js';
 import { useGridReactiveValue } from './useGridReactiveValue.js';
+import { HeaderDnDContext } from './useHeaderDnD.js';

 export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRendererProps<TRow, TSummaryRow>) {
  const cellContext = use(DataGridCellContext);
-  const tooltip = useGridReactiveValue(cellContext?.cellTooltip, props.rowIdx, props.column.idx);
+  const dndContext = use(HeaderDnDContext)!;
+  const virtualColIdx = props.column.idx;
+  const dataColIdx = dndContext.getDataColIdx(props.column.idx);
+  const rowIdx = props.rowIdx;
+  const tooltip = useGridReactiveValue(cellContext?.cellTooltip, rowIdx, dataColIdx);

  function handleClick(event: React.MouseEvent<HTMLDivElement>) {
-    props.onClick?.(
+    props.onCellClick?.(
      {
-        rowIdx: props.rowIdx,
+        rowIdx,
        row: props.row,
        column: props.column,
        selectCell(enableEditor) {
-          props.selectCell({ rowIdx: props.rowIdx, idx: props.column.idx }, enableEditor);
+          props.selectCell(
+            { rowIdx, idx: virtualColIdx },
+            {
+              enableEditor,
+            },
+          );
        },
      },
      createCellMouseEvent(event),
@@ -24,13 +34,13 @@ export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRen
  }

  function handleDoubleClick(event: React.MouseEvent<HTMLDivElement>) {
-    props.onDoubleClick?.(
+    props.onCellDoubleClick?.(
      {
-        rowIdx: props.rowIdx,
+        rowIdx,
        row: props.row,
        column: props.column,
        selectCell(enableEditor) {
-          props.selectCell({ rowIdx: props.rowIdx, idx: props.column.idx }, enableEditor);
+          props.selectCell({ rowIdx, idx: virtualColIdx }, { enableEditor });
        },
      },
      createCellMouseEvent(event),
@@ -38,13 +48,13 @@ export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRen
  }

  function handleContextMenu(event: React.MouseEvent<HTMLDivElement>) {
-    props.onContextMenu?.(
+    props.onCellContextMenu?.(
      {
-        rowIdx: props.rowIdx,
+        rowIdx,
        row: props.row,
        column: props.column,
        selectCell(enableEditor) {
-          props.selectCell({ rowIdx: props.rowIdx, idx: props.column.idx }, enableEditor);
+          props.selectCell({ rowIdx, idx: virtualColIdx }, { enableEditor });
        },
      },
      createCellMouseEvent(event),
@@ -52,7 +62,16 @@ export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRen
  }

  const mappedProps = useMemo(
-    () => ({ ...props, isFocused: props.isCellSelected, onClick: handleClick, onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }),
+    () => ({
+      ...props,
+      onCellClick: undefined,
+      onCellContextMenu: undefined,
+      onCellDoubleClick: undefined,
+      isFocused: props.isCellSelected,
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onContextMenu: handleContextMenu,
+    }),
    Object.values(props),
  );

@@ -63,9 +82,9 @@ export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRen
          <Cell
            {...props}
            title={tooltip}
-            onClick={(_, event) => onClick?.(event)}
-            onDoubleClick={(_, event) => onDoubleClick?.(event)}
-            onContextMenu={(_, event) => onContextMenu?.(event)}
+            onCellClick={(_, event) => onClick?.(event)}
+            onCellDoubleClick={(_, event) => onDoubleClick?.(event)}
+            onCellContextMenu={(_, event) => onContextMenu?.(event)}
            {...rest}
            isCellSelected={props.isCellSelected || rest.isFocused || false}
          />
@@ -74,7 +93,7 @@ export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRen
    [...Object.values(props), tooltip],
  );

-  const cellElement = useGridReactiveValue(cellContext?.cellElement, props.rowIdx, props.column.idx, mappedProps, renderDefaultCell);
+  const cellElement = useGridReactiveValue(cellContext?.cellElement, rowIdx, dataColIdx, mappedProps, renderDefaultCell);

  const innerCellContext = useMemo<IDataGridCellInnerContext>(() => ({ isFocused: props.isCellSelected }), [props.isCellSelected]);
  return <DataGridCellInnerContext value={innerCellContext}>{cellElement ?? <Cell title={tooltip} {...props} />}</DataGridCellInnerContext>;
@@ -1 +1,33 @@
+@import url('@dbeaver/ui-kit/index.css');
@import url('react-data-grid/lib/styles.css') layer(components);
+
+@layer components.rdg.MeasuringCell {
+  [data-measuring-cell] {
+    max-width: var(--rdg-max-auto-size, 350px);
+  }
+}
+
+@layer components.rdg.Cell {
+  .rdg {
+    --dbv-kit-icon-btn-outline-width: 1px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .rdg-cell-frozen {
+      &:nth-last-child(1 of &) {
+        box-shadow: none;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: -1;
+          background-color: rgba(255, 255, 255, 0.02);
+        }
+      }
+    }
+  }
+}
@@ -1,5 +1,5 @@
-import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
-import DataGridBase, { type ColumnOrColumnGroup, type CellSelectArgs, type DataGridHandle } from 'react-data-grid';
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { DataGrid as DataGridBase, type ColumnOrColumnGroup, type CellSelectArgs, type DataGridHandle, type ColumnWidth, type ColumnWidths } from 'react-data-grid';
 import { rowRenderer } from './renderers/rowRenderer.js';
 import { cellRenderer } from './renderers/cellRenderer.js';
 import { DataGridCellHeaderContext, type IDataGridHeaderCellContext } from './DataGridHeaderCellContext.js';
@@ -12,12 +12,18 @@ import { mapRenderHeaderCell } from './mapRenderHeaderCell.js';
 import { mapEditCellRenderer } from './mapEditCellRenderer.js';
 import { DataGridRowContext, type IDataGridRowContext } from './DataGridRowContext.js';
 import './DataGrid.css';
+import { HeaderDnDContext, useHeaderDnD } from './useHeaderDnD.js';

 export interface ICellPosition {
  rowIdx: number;
  colIdx: number;
 }

+export interface DataGridCellKeyboardEvent extends React.KeyboardEvent<HTMLDivElement> {
+  preventGridDefault: () => void;
+  isGridDefaultPrevented: () => boolean;
+}
+
 export interface DataGridProps extends IDataGridCellContext, IDataGridRowContext, IDataGridHeaderCellContext, React.PropsWithChildren {
  getRowHeight?: (rowIdx: number) => number;
  getRowId?: (rowIdx: number) => React.Key;
@@ -26,6 +32,7 @@ export interface DataGridProps extends IDataGridCellContext, IDataGridRowContext
  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
  onFocus?: (position: ICellPosition) => void;
  onEditorOpen?: (position: ICellPosition) => void;
+  onCellKeyDown?: (position: ICellPosition, event: DataGridCellKeyboardEvent) => void;
  className?: string;
 }

@@ -40,9 +47,13 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
    headerElement,
    getHeaderWidth,
    headerText,
+    getHeaderOrder,
    getHeaderResizable,
+    columnSortable,
    getHeaderHeight,
    getHeaderPinned,
+    columnSortingState,
+    getHeaderDnD,
    cell,
    cellText,
    cellElement,
@@ -53,19 +64,23 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
    rowCount,
    getRowId,
    getRowHeight,
+    onHeaderReorder,
    onScroll,
    onScrollToBottom,
    onFocus,
    onCellChange,
+    onColumnSort,
+    onHeaderKeyDown,
    children,
    className,
+    onCellKeyDown,
  },
  ref,
 ) {
+  const [columnWidths, setColumnWidths] = useState<ColumnWidths>(() => new Map<string, ColumnWidth>());
  const rowsCount = useGridReactiveValue(rowCount);
  const columnsCount = useGridReactiveValue(columnCount);

-  const gridKey = useRef(0);
  const rowsCountRef = useRef(rowsCount);
  const innerGridRef = useRef<DataGridHandle>(null);
  const columns = new Array<ColumnOrColumnGroup<IInnerRow, unknown>>(columnsCount)
@@ -77,25 +92,28 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
        name: '',
        resizable: getHeaderResizable?.(i) ?? true,
        width,
-        minWidth: 24,
+        minWidth: 26,
        editable: row => getCellEditable?.(row.idx, i) ?? false,
-        maxWidth: 900, // TODO: there is a bug with auto-resize if this value is too high or not set
        frozen: getHeaderPinned?.(i),
-        renderHeaderCell: mapRenderHeaderCell,
-        renderCell: mapCellContentRenderer,
-        renderEditCell: mapEditCellRenderer,
+        renderHeaderCell: mapRenderHeaderCell(i),
+        renderCell: mapCellContentRenderer(i),
+        renderEditCell: mapEditCellRenderer(i),
      };
    });

+  const dndHeaderContext = useHeaderDnD({ columns, onReorder: onHeaderReorder, getCanDrag: getHeaderDnD, getHeaderOrder });
+
  useImperativeHandle(ref, () => ({
    selectCell: (position: ICellPosition) => {
-      innerGridRef.current?.selectCell({ idx: position.colIdx, rowIdx: position.rowIdx });
+      innerGridRef.current?.selectCell({ idx: dndHeaderContext.getDataColIdx(position.colIdx), rowIdx: position.rowIdx });
    },
    scrollToCell: (position: Partial<ICellPosition>) => {
-      innerGridRef.current?.scrollToCell({ idx: position.colIdx, rowIdx: position.rowIdx });
+      innerGridRef.current?.scrollToCell({ idx: position.colIdx && dndHeaderContext.getDataColIdx(position.colIdx), rowIdx: position.rowIdx });
    },
    openEditor: (position: ICellPosition) => {
-      innerGridRef.current?.selectCell({ idx: position.colIdx, rowIdx: position.rowIdx }, true);
+      innerGridRef.current?.selectCell({ idx: dndHeaderContext.getDataColIdx(position.colIdx), rowIdx: position.rowIdx }, {
+        enableEditor: true,
+      });
    },
  }));

@@ -104,12 +122,11 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
    rowsCountRef.current = rowsCount;

    if (previousRowCount === 0) {
-      // we trigger columns size recalculation when rows are added
-      gridKey.current++;
+      setColumnWidths(new Map<string, ColumnWidth>());
    }
  }

-  const rows = useMemo(
+  let rows = useMemo(
    () =>
      new Array<IInnerRow>(rowsCount).fill({ idx: 0 }).map((_, i) => ({
        idx: i,
@@ -118,32 +135,47 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
  );

  function handleCellFocus(args: CellSelectArgs<IInnerRow, unknown>) {
-    onFocus?.({ colIdx: args.column.idx, rowIdx: args.rowIdx });
+    onFocus?.({ colIdx: dndHeaderContext.getDataColIdx(args.column.idx), rowIdx: args.rowIdx });
+  }
+
+  function handleCellKeyDown(args: CellSelectArgs<IInnerRow, unknown>, event: DataGridCellKeyboardEvent) {
+    onCellKeyDown?.({ colIdx: dndHeaderContext.getDataColIdx(args.column.idx), rowIdx: args.rowIdx }, event);
+  }
+
+  const isMeasurementRender = columnWidths.size === 0 && columnCount.get() > 0;
+
+  if (isMeasurementRender) {
+    rows = rows.slice(0, 100);
  }

  return (
-    <DataGridRowContext value={{ rowCount, onScrollToBottom }}>
-      <DataGridCellContext value={{ cell, cellText, cellElement, cellTooltip, onCellChange }}>
-        <DataGridCellHeaderContext value={{ headerElement, headerText }}>
-          <DataGridBase
-            key={gridKey.current}
-            ref={innerGridRef}
-            columns={columns}
-            rows={rows}
-            className={className}
-            headerRowHeight={getHeaderHeight?.()}
-            onScroll={onScroll}
-            rowHeight={getRowHeight ? row => getRowHeight(row.idx) : undefined}
-            rowKeyGetter={getRowId ? row => getRowId(row.idx) : undefined}
-            onSelectedCellChange={handleCellFocus}
-            renderers={{
-              renderRow: rowRenderer,
-              renderCell: cellRenderer,
-              noRowsFallback: children,
-            }}
-          />
-        </DataGridCellHeaderContext>
-      </DataGridCellContext>
-    </DataGridRowContext>
+    <HeaderDnDContext value={dndHeaderContext}>
+      <DataGridRowContext value={{ rowCount, onScrollToBottom }}>
+        <DataGridCellContext value={{ cell, cellText, cellElement, cellTooltip, onCellChange }}>
+          <DataGridCellHeaderContext value={{ headerElement, headerText, getHeaderDnD, columnSortable, onColumnSort, columnSortingState, onHeaderKeyDown }}>
+            <DataGridBase
+              ref={innerGridRef}
+              columns={dndHeaderContext.columns}
+              enableVirtualization={!isMeasurementRender}
+              rows={rows}
+              className={className}
+              headerRowHeight={getHeaderHeight?.()}
+              rowHeight={getRowHeight ? row => getRowHeight(row.idx) : undefined}
+              rowKeyGetter={getRowId ? row => getRowId(row.idx) : undefined}
+              columnWidths={columnWidths}
+              renderers={{
+                renderRow: rowRenderer,
+                renderCell: cellRenderer,
+                noRowsFallback: children,
+              }}
+              onScroll={onScroll}
+              onSelectedCellChange={handleCellFocus}
+              onCellKeyDown={handleCellKeyDown}
+              onColumnWidthsChange={setColumnWidths}
+            />
+          </DataGridCellHeaderContext>
+        </DataGridCellContext>
+      </DataGridRowContext>
+    </HeaderDnDContext>
  );
 });
@@ -4,10 +4,17 @@ import type { IGridReactiveValue } from './IGridReactiveValue.js';
 export interface IDataGridHeaderCellContext {
  headerElement?: IGridReactiveValue<React.ReactNode, [colIdx: number]>;
  headerText?: IGridReactiveValue<string, [colIdx: number]>;
+  getHeaderOrder?: () => number[];
  getHeaderWidth?: (colIdx: number) => number | string | null;
  getHeaderResizable?: (colIdx: number) => boolean;
  getHeaderHeight?: () => number;
  getHeaderPinned?: (colIdx: number) => boolean;
+  getHeaderDnD?: (colIdx: number) => boolean;
+  onHeaderReorder?: (from: number, to: number) => void;
+  columnSortingState?: IGridReactiveValue<'asc' | 'desc' | undefined | null, [colIdx: number]>;
+  columnSortable?: IGridReactiveValue<boolean, [colIdx: number]>;
+  onColumnSort?: (colIdx: number, order: 'asc' | 'desc' | null, isMultiple: boolean) => void;
+  onHeaderKeyDown?: (event: React.KeyboardEvent) => void;
 }

 export const DataGridCellHeaderContext = createContext<IDataGridHeaderCellContext | null>(null);
@@ -0,0 +1,14 @@
+import { clsx } from '@dbeaver/ui-kit';
+
+interface Props {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export function BlobFormatter({ className, onClick }: Props) {
+  return (
+    <span className={clsx('tw:uppercase', className)} onClick={onClick}>
+      [blob]
+    </span>
+  );
+}
@@ -0,0 +1,29 @@
+import { NullFormatter } from './NullFormatter.js';
+import { Checkbox, clsx, Focusable } from '@dbeaver/ui-kit';
+
+interface Props {
+  value: boolean | null;
+  className?: string;
+  focusable?: boolean;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+}
+
+export function BooleanFormatter({ value, className, onClick, onKeyDown, focusable }: Props) {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.code === 'Enter' || event.code === 'Space') {
+      event.preventDefault();
+      onKeyDown?.(event);
+    }
+  };
+  return (
+    <Focusable
+      focusable={focusable}
+      className={clsx('tw:flex tw:items-center tw:outline-none tw:hover:cursor-pointer', className)}
+      onKeyDown={handleKeyDown}
+      onClick={onClick}
+    >
+      {value === null ? <NullFormatter /> : <Checkbox className="tw:data-disabled:opacity-100!" disabled size="small" checked={value} />}
+    </Focusable>
+  );
+}
@@ -0,0 +1,21 @@
+import { NullFormatter } from './NullFormatter.js';
+
+interface Props {
+  value: Date | null;
+  type?: 'time' | 'date' | 'datetime';
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export function DateFormatter({ value, type = 'datetime', onClick }: Props) {
+  if (value === null) {
+    return <NullFormatter />;
+  }
+  return (
+    <div onClick={onClick}>
+      {value.toLocaleString(undefined, {
+        dateStyle: type === 'date' ? 'long' : undefined,
+        timeStyle: type === 'time' ? 'long' : undefined,
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,14 @@
+import { clsx } from '@dbeaver/ui-kit';
+
+interface Props {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export function NullFormatter({ className, onClick }: Props) {
+  return (
+    <span className={clsx('tw:uppercase', 'tw:opacity-65', className)} onClick={onClick}>
+      [NULL]
+    </span>
+  );
+}
@@ -0,0 +1,18 @@
+import { NullFormatter } from './NullFormatter.js';
+
+interface Props {
+  value: number | null;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export function NumberFormatter({ value, className, onClick }: Props) {
+  if (value === null) {
+    return <NullFormatter className={className} onClick={onClick} />;
+  }
+  return (
+    <div style={{ textAlign: 'right' }} className={className} onClick={onClick}>
+      {value.toLocaleString()}
+    </div>
+  );
+}
@@ -4,3 +4,10 @@ export * from './DataGridCellInnerContext.js';
 export * from './IGridReactiveValue.js';
 export * from './useCreateGridReactiveValue.js';
 export * from './useGridReactiveValue.js';
+export * from './reorderArray.js';
+
+export * from './formatters/NullFormatter.js';
+export * from './formatters/BooleanFormatter.js';
+export * from './formatters/NumberFormatter.js';
+export * from './formatters/DateFormatter.js';
+export * from './formatters/BlobFormatter.js';
@@ -2,6 +2,8 @@ import type { RenderCellProps } from 'react-data-grid';
 import type { IInnerRow } from './IInnerRow.js';
 import { CellContentRenderer } from './renderers/CellContentRenderer.js';

-export function mapCellContentRenderer({ rowIdx, column }: RenderCellProps<IInnerRow, unknown>) {
-  return <CellContentRenderer rowIdx={rowIdx} colIdx={column.idx} />;
+export function mapCellContentRenderer(colIdx: number) {
+  return function RenderCell({ rowIdx }: RenderCellProps<IInnerRow, unknown>) {
+    return <CellContentRenderer rowIdx={rowIdx} colIdx={colIdx} />;
+  };
 }
@@ -2,6 +2,8 @@ import type { RenderEditCellProps } from 'react-data-grid';
 import type { IInnerRow } from './IInnerRow.js';
 import { TextEditor } from './editors/TextEditor.js';

-export function mapEditCellRenderer({ rowIdx, column, onClose }: RenderEditCellProps<IInnerRow, unknown>) {
-  return <TextEditor rowIdx={rowIdx} colIdx={column.idx} onClose={() => onClose()} />;
+export function mapEditCellRenderer(colIdx: number) {
+  return function RenderEditCell({ rowIdx, onClose }: RenderEditCellProps<IInnerRow, unknown>) {
+    return <TextEditor rowIdx={rowIdx} colIdx={colIdx} onClose={() => onClose()} />;
+  };
 }
@@ -2,6 +2,8 @@ import type { RenderHeaderCellProps } from 'react-data-grid';
 import type { IInnerRow } from './IInnerRow.js';
 import { HeaderCellContentRenderer } from './renderers/HeaderCellContentRenderer.js';

-export function mapRenderHeaderCell({ column }: RenderHeaderCellProps<IInnerRow, unknown>) {
-  return <HeaderCellContentRenderer colIdx={column.idx} />;
+export function mapRenderHeaderCell(colIdx: number) {
+  return function RenderHeaderCell({ tabIndex }: RenderHeaderCellProps<IInnerRow, unknown>) {
+    return <HeaderCellContentRenderer colIdx={colIdx} tabIndex={tabIndex} />;
+  };
 }
@@ -1,13 +1,85 @@
-import { use } from 'react';
+import { memo, use } from 'react';
+import { useDrag, useDrop, type DnDStoreProvider } from '@dbeaver/react-dnd';
 import { DataGridCellHeaderContext } from '../DataGridHeaderCellContext.js';
 import { useGridReactiveValue } from '../useGridReactiveValue.js';
+import { HeaderDnDContext } from '../useHeaderDnD.js';
+import { OrderButton } from './OrderButton.js';

 interface Props {
  colIdx: number;
+  tabIndex?: number;
 }
-export function HeaderCellContentRenderer({ colIdx }: Props) {
+
+export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer({ colIdx, tabIndex }: Props) {
+  const dndHeaderContext = use(HeaderDnDContext);
  const cellHeaderContext = use(DataGridCellHeaderContext);
-  const headerElement = useGridReactiveValue(cellHeaderContext?.headerElement, [colIdx]);
-  const getHeaderText = useGridReactiveValue(headerElement ? undefined : cellHeaderContext?.headerText, [colIdx]);
-  return headerElement ?? getHeaderText ?? '';
-}
+  const headerElement = useGridReactiveValue(cellHeaderContext?.headerElement, colIdx);
+  const getHeaderText = useGridReactiveValue(headerElement ? undefined : cellHeaderContext?.headerText, colIdx);
+  const isColumnSortable = useGridReactiveValue(cellHeaderContext?.columnSortable, colIdx);
+  const onColumnSort = cellHeaderContext?.onColumnSort;
+  const onHeaderKeyDown = cellHeaderContext?.onHeaderKeyDown;
+  const sortingState = useGridReactiveValue(cellHeaderContext?.columnSortingState, colIdx);
+
+  const draggable = dndHeaderContext?.getCanDrag?.(colIdx) ?? false;
+  const drag = useDrag({
+    draggable,
+    onDragStart(event, store) {
+      if (dndHeaderContext?.id) {
+        store.setData('dbeaver-react-data-grid-id', dndHeaderContext?.id);
+      }
+      store.setData('dbeaver-react-data-grid-col-idx', colIdx);
+    },
+    onDragEnd() {
+      dndHeaderContext?.onDragEnd(colIdx);
+    },
+  });
+
+  function canDrop(event: React.DragEvent<HTMLElement>, store: DnDStoreProvider | null) {
+    const gridId = store?.getData('dbeaver-react-data-grid-id');
+    return gridId === dndHeaderContext?.id;
+  }
+  const drop = useDrop({
+    canDrop,
+    onDragOver(event, store) {
+      if (!canDrop(event, store)) {
+        return;
+      }
+
+      const dragColIdx = store?.getData('dbeaver-react-data-grid-col-idx');
+      const position = event.clientX - event.currentTarget.getBoundingClientRect().left;
+      const width = event.currentTarget.offsetWidth;
+      const isAfter = position > width / 2;
+
+      dndHeaderContext?.onDragOver(dragColIdx, colIdx, isAfter);
+    },
+  });
+
+  function handleSort(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
+    if (!onColumnSort) return;
+
+    const nextSortState = sortingState === 'asc' ? 'desc' : sortingState === 'desc' ? null : 'asc';
+    onColumnSort(colIdx, nextSortState, e.ctrlKey || e.metaKey);
+  }
+
+  function onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+    onHeaderKeyDown?.(event);
+
+    if ((event.key === 'Enter' || event.key === ' ') && isColumnSortable && onColumnSort) {
+      event.preventDefault();
+      handleSort(event);
+    }
+  }
+
+  return (
+    <div
+      onKeyDown={onKeyDown}
+      tabIndex={tabIndex}
+      className="tw:w-full tw:h-full tw:content-center tw:flex tw:items-center tw:justify-between tw:gap-1 tw:outline-none tw:group"
+      {...drag.props}
+      {...drop.props}
+    >
+      <span className="tw:overflow-hidden tw:h-full tw:text-ellipsis">{headerElement ?? getHeaderText ?? ''}</span>
+      {isColumnSortable && onColumnSort && <OrderButton sortState={sortingState} onClick={handleSort} />}
+    </div>
+  );
+});
@@ -0,0 +1,32 @@
+import { clsx, IconButton, Icon } from '@dbeaver/ui-kit';
+
+interface OrderButtonProps {
+  sortState?: 'asc' | 'desc' | null;
+  onClick: (e: React.MouseEvent<HTMLElement>) => void;
+  tabIndex?: number;
+}
+
+export function OrderButton({ sortState, onClick, tabIndex }: OrderButtonProps) {
+  const svgSortAsc = 'sort-asc';
+  const svgSortDesc = 'sort-desc';
+  const svgSortUnknown = 'sort-unknown';
+
+  const iconSrc = sortState === 'asc' ? svgSortAsc : sortState === 'desc' ? svgSortDesc : svgSortUnknown;
+
+  return (
+    <IconButton
+      variant="secondary"
+      size="small"
+      onClick={onClick}
+      tabIndex={tabIndex}
+      title="Sort by column"
+      aria-label="Sort by column"
+      className={clsx(
+        'tw:opacity-0 tw:group-focus:opacity-100 tw:focus:opacity-100 tw:group-hover:opacity-100 tw:hover:opacity-100 tw:outline-offset-0',
+        sortState && 'tw:opacity-100',
+      )}
+    >
+      <Icon name={iconSrc} />
+    </IconButton>
+  );
+}
@@ -0,0 +1,11 @@
+export function reorderArray<T>(array: T[], from: number, to: number): T[] {
+  const newArray = [...array];
+  if (from < to) {
+    newArray.splice(to, 0, array[from]!);
+    newArray.splice(from, 1);
+  } else {
+    newArray.splice(from, 1);
+    newArray.splice(to, 0, array[from]!);
+  }
+  return newArray;
+}
@@ -3,7 +3,7 @@ import type { IGridReactiveValue } from './IGridReactiveValue.js';

 export function useGridReactiveValue<P extends IGridReactiveValue<any, any[]> | undefined>(
  value: P,
-  ...args: P extends IGridReactiveValue<any, infer T> ? T : unknown[]
+  ...args: P extends IGridReactiveValue<any, infer T> ? T : never[]
 ): P extends IGridReactiveValue<infer T, any[]> ? T : undefined {
  const mappedValue = useMemo(
    () => ({
@@ -0,0 +1,94 @@
+import type { ColumnOrColumnGroup } from 'react-data-grid';
+import type { IInnerRow } from './IInnerRow.js';
+import { createContext, useId, useMemo, useState } from 'react';
+import { reorderArray } from './reorderArray.js';
+
+interface IHeaderDnDOptions {
+  columns: Array<ColumnOrColumnGroup<IInnerRow, unknown>>;
+  getCanDrag?: (colIdx: number) => boolean;
+  onReorder?: (from: number, to: number) => void;
+  getHeaderOrder?: () => number[];
+}
+
+interface IHeaderDnD {
+  id: string;
+  columns: Array<ColumnOrColumnGroup<IInnerRow, unknown>>;
+  getDataColIdx: (virtualColIdx: number) => number;
+  getVirtualColIdx: (dataColIdx: number) => number;
+  getCanDrag?: (colIdx: number) => boolean;
+  onDragOver: (dragColIdx: number, dropColIdx: number, isAfter: boolean) => void;
+  onDragEnd: (colIdx: number) => void;
+}
+
+export const HeaderDnDContext = createContext<IHeaderDnD | null>(null);
+
+export function useHeaderDnD({ columns, getCanDrag, onReorder, getHeaderOrder }: IHeaderDnDOptions): IHeaderDnD {
+  const id = useId();
+  const [activeDnDElement, setActiveDnDElement] = useState<number | null>(null);
+  const [dragOverElement, setDragOverElement] = useState<[number, boolean] | null>(null);
+
+  function getDataColIdx(virtualColIdx: number) {
+    // Given a visible (ordered) column index, return the original data column index
+    const order = getHeaderOrder?.();
+    if (order) {
+      return order[virtualColIdx] ?? virtualColIdx;
+    }
+    return virtualColIdx;
+  }
+
+  function getVirtualColIdx(dataColIdx: number) {
+    // Given the original data column index, return its visible (ordered) index
+    const order = getHeaderOrder?.();
+    if (order) {
+      return order.indexOf(dataColIdx);
+    }
+    return dataColIdx;
+  }
+
+  function onDragEnd(dragColIdx: number) {
+    setActiveDnDElement(null);
+    setDragOverElement(null);
+
+    if (dragOverElement) {
+      const isAfter = dragOverElement?.[1];
+      let to = dragOverElement?.[0];
+
+      if (isAfter) {
+        to = getDataColIdx(getVirtualColIdx(to) + 1);
+      }
+
+      onReorder?.(dragColIdx, to);
+    }
+  }
+
+  function onDragOver(dragColIdx: number, dropColIdx: number, isAfter: boolean) {
+    setActiveDnDElement(dragColIdx);
+    if (dragColIdx !== dropColIdx) {
+      setDragOverElement([dropColIdx, isAfter]);
+    }
+  }
+
+  columns = useMemo(() => columns.map((col, idx) => columns[getDataColIdx(idx)]!), [columns, getHeaderOrder]);
+
+  if (activeDnDElement !== null && dragOverElement !== null) {
+    const from = getVirtualColIdx(activeDnDElement);
+    let to = getVirtualColIdx(dragOverElement[0]);
+    const isAfter = dragOverElement[1];
+
+    if (isAfter) {
+      to++;
+    }
+
+    columns = reorderArray(columns, from, to);
+  }
+
+  return {
+    id,
+    columns,
+    getDataColIdx,
+    getVirtualColIdx,
+    getCanDrag,
+    onDragOver,
+    onDragEnd,
+  };
+}
@@ -12,5 +12,13 @@
  },
  "include": [
    "src"
+  ],
+  "references": [
+    {
+      "path": "../react-dnd"
+    },
+    {
+      "path": "../ui-kit"
+    }
  ]
 }
@@ -0,0 +1 @@
+# @dbeaver/react-dnd
@@ -0,0 +1,36 @@
+{
+  "name": "@dbeaver/react-dnd",
+  "type": "module",
+  "sideEffects": [],
+  "exports": {
+    ".": "./lib/index.js",
+    "./*": "./lib/*.js"
+  },
+  "scripts": {
+    "clear": "rimraf lib"
+  },
+  "files": [
+    "package.json",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "lib",
+    "!lib/**/*.d.ts.map",
+    "!lib/**/*.test.js",
+    "!lib/**/*.test.d.ts",
+    "!lib/**/*.test.d.ts.map",
+    "!lib/**/*.test.js.map",
+    "!lib/tests",
+    "!.tsbuildinfo"
+  ],
+  "packageManager": "yarn@4.9.2",
+  "devDependencies": {
+    "@dbeaver/tsconfig": "workspace:^",
+    "@types/react": "^19",
+    "rimraf": "^6",
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "react": "^19"
+  }
+}
@@ -0,0 +1,3 @@
+export * from './useDrag.js';
+export * from './useDrop.js';
+export { type DnDStoreProvider } from './store.js';
@@ -0,0 +1,46 @@
+export const DND_STORE_PREFIX = 'application/dbeaver-react-dnd-';
+
+export interface DnDStoreProvider {
+  getData: (key: string) => any;
+  setData: (key: string, value: any) => void;
+  removeData: () => void;
+}
+
+class DnDStore {
+  private data: Map<string, Record<string, any>> = new Map();
+  setData(id: string, key: string, value: any) {
+    if (!this.data.has(id)) {
+      this.data.set(id, {});
+    }
+    this.data.get(id)![key] = value;
+  }
+  getData(id: string, key: string) {
+    return this.data.get(id)?.[key];
+  }
+  removeData(id: string) {
+    this.data.delete(id);
+  }
+
+  getProvider(id: string) {
+    return {
+      getData: (key: string) => this.getData(id, key),
+      setData: (key: string, value: any) => {
+        this.setData(id, key, value);
+      },
+      removeData: () => {
+        this.removeData(id);
+      },
+    };
+  }
+}
+
+export function getStoreProvider(event: React.DragEvent<HTMLElement>): DnDStoreProvider | null {
+  const id = event.dataTransfer.types.find(type => type.startsWith(DND_STORE_PREFIX))?.slice(DND_STORE_PREFIX.length);
+
+  return id ? globalDnDStore.getProvider(id) : null;
+}
+
+// TODO: do we want to use react context here?
+//       the main idea was to use native DataTransfer, but it's available only for drag start and drop events
+//       so we need to use a custom store
+export const globalDnDStore = new DnDStore();
@@ -0,0 +1,67 @@
+import { useId, useMemo, useRef, useState } from 'react';
+import { DND_STORE_PREFIX, globalDnDStore, type DnDStoreProvider } from './store.js';
+
+interface IDragOptions {
+  draggable?: boolean;
+  onDrag?: (event: React.DragEvent<HTMLElement>, provider: DnDStoreProvider) => void;
+  onDragStart?: (event: React.DragEvent<HTMLElement>, provider: DnDStoreProvider) => void;
+  onDragEnd?: (event: React.DragEvent<HTMLElement>, provider: DnDStoreProvider) => void;
+}
+interface IDrag {
+  isDragging: boolean;
+  props: {
+    draggable?: boolean;
+    onDrag: (event: React.DragEvent<HTMLElement>) => void;
+    onDragStart: (event: React.DragEvent<HTMLElement>) => void;
+    onDragEnd: (event: React.DragEvent<HTMLElement>) => void;
+  };
+}
+
+export function useDrag({ draggable, onDragStart, onDrag, onDragEnd }: IDragOptions = {}): IDrag {
+  const id = useId();
+  const [dragging, setDragging] = useState(false);
+  const optionsRef = useRef<IDragOptions>({ draggable, onDragStart, onDrag, onDragEnd });
+  optionsRef.current = { draggable, onDragStart, onDrag, onDragEnd };
+
+  function handleDragStart(event: React.DragEvent<HTMLElement>) {
+    if (!optionsRef.current.draggable) {
+      return;
+    }
+    event.stopPropagation();
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData(`${DND_STORE_PREFIX}${id}`, id);
+    setDragging(true);
+    optionsRef.current.onDragStart?.(event, globalDnDStore.getProvider(id));
+  }
+
+  function handleDrag(event: React.DragEvent<HTMLElement>) {
+    if (!optionsRef.current.draggable) {
+      return;
+    }
+    optionsRef.current.onDrag?.(event, globalDnDStore.getProvider(id));
+  }
+
+  function handleDragEnd(event: React.DragEvent<HTMLElement>) {
+    if (!optionsRef.current.draggable) {
+      return;
+    }
+    setDragging(false);
+    optionsRef.current.onDragEnd?.(event, globalDnDStore.getProvider(id));
+    globalDnDStore.removeData(id);
+  }
+
+  return {
+    isDragging: dragging,
+    props: {
+      draggable,
+      ...useMemo(
+        () => ({
+          onDrag: handleDrag,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+        }),
+        [],
+      ),
+    },
+  };
+}
@@ -0,0 +1,61 @@
+import { useMemo, useRef } from 'react';
+import { getStoreProvider, type DnDStoreProvider } from './store.js';
+
+interface IDropOptions {
+  canDrop?: (event: React.DragEvent<HTMLElement>, provider: DnDStoreProvider | null) => boolean;
+  onDrop?: (event: React.DragEvent<HTMLElement>, provider: DnDStoreProvider | null) => void;
+  onDragOver?: (event: React.DragEvent<HTMLElement>, provider: DnDStoreProvider | null) => void;
+  onDragEnter?: (event: React.DragEvent<HTMLElement>, provider: DnDStoreProvider | null) => void;
+  onDragLeave?: (event: React.DragEvent<HTMLElement>, provider: DnDStoreProvider | null) => void;
+}
+
+interface IDrop {
+  props: {
+    onDrop: (event: React.DragEvent<HTMLElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLElement>) => void;
+    onDragEnter: (event: React.DragEvent<HTMLElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLElement>) => void;
+  };
+}
+
+export function useDrop({ canDrop, onDrop, onDragOver, onDragEnter, onDragLeave }: IDropOptions = {}): IDrop {
+  const optionsRef = useRef<IDropOptions>({ canDrop, onDrop, onDragOver, onDragEnter, onDragLeave });
+  optionsRef.current = { canDrop, onDrop, onDragOver, onDragEnter, onDragLeave };
+
+  function handleOver(event: React.DragEvent<HTMLElement>) {
+    const provider = getStoreProvider(event);
+    const isDroppable = optionsRef.current.canDrop?.(event, provider);
+    if (isDroppable) {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+    } else {
+      event.dataTransfer.dropEffect = 'none';
+    }
+    optionsRef.current.onDragOver?.(event, provider);
+  }
+
+  function handleEnter(event: React.DragEvent<HTMLElement>) {
+    const provider = getStoreProvider(event);
+    optionsRef.current.onDragEnter?.(event, provider);
+  }
+  function handleLeave(event: React.DragEvent<HTMLElement>) {
+    const provider = getStoreProvider(event);
+    optionsRef.current.onDragLeave?.(event, provider);
+  }
+  function handleDrop(event: React.DragEvent<HTMLElement>) {
+    const provider = getStoreProvider(event);
+    optionsRef.current.onDrop?.(event, provider);
+  }
+
+  return {
+    props: useMemo(
+      () => ({
+        onDrop: handleDrop,
+        onDragOver: handleOver,
+        onDragEnter: handleEnter,
+        onDragLeave: handleLeave,
+      }),
+      [],
+    ),
+  };
+}
@@ -0,0 +1,16 @@
+{
+  "extends": "@dbeaver/tsconfig/tsconfig.webview.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "rootDirs": [
+      "src"
+    ],
+    "outDir": "lib",
+    "incremental": true,
+    "composite": true
+  },
+  "include": [
+    "src"
+  ]
+}
@@ -1,2 +1,14 @@
 import '../src/index.css';
 import './global.css';
+import Icons from '../assets/icons/icons.svg?react';
+
+import type { GlobalProvider } from '@ladle/react';
+
+export const Provider: GlobalProvider = ({ children }) => {
+  return (
+    <div>
+      <Icons style={{ display: 'none' }} />
+      {children}
+    </div>
+  );
+};
@@ -1,4 +1,4 @@
-@import 'tailwindcss' prefix(tw);
+@import 'tailwindcss' layer(base) prefix(tw);

@layer theme {
  main {
@@ -86,6 +86,7 @@

 :root[data-theme='dark'] {
  --dbv-kit-color-foreground: var(--tw-color-gray-200);
+  --dbv-kit-color-background: var(--tw-color-gray-900);
  --dbv-kit-btn-loader-base-color: var(--tw-color-gray-900);

  /* Primary Button */
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="15" y="2" width="2" height="26" />
+  <rect class="cls-1" x="13.21" y="23.28" width="14.14" height="2.02"
+    transform="translate(-11.23 21.46) rotate(-45)" />
+  <rect class="cls-1" x="10.7" y="17.21" width="2.02" height="14.14"
+    transform="translate(-13.74 15.4) rotate(-45)" />
+</svg>
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="11.17" y="2" width="1.67" height="18.33" />
+  <rect class="cls-1" x="9.68" y="16.4" width="11.78" height="1.68"
+    transform="translate(-7.63 16.06) rotate(-45)" />
+  <rect class="cls-1" x="7.59" y="11.35" width="1.68" height="11.79"
+    transform="translate(-9.72 11.01) rotate(-45)" />
+</svg>
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="7.5" y="1" width="1" height="13" />
+  <rect class="cls-1" x="6.61" y="11.35" width="7.07" height="1.01"
+    transform="translate(-5.41 10.64) rotate(-45)" />
+  <rect class="cls-1" x="5.35" y="8.32" width="1.01" height="7.07"
+    transform="translate(-6.67 7.61) rotate(-45)" />
+</svg>
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="15" y="4" width="2" height="26" />
+  <rect class="cls-1" x="4.64" y="6.7" width="14.14" height="2.02"
+    transform="translate(-2.02 10.54) rotate(-45)" />
+  <rect class="cls-1" x="19.28" y=".64" width="2.02" height="14.14"
+    transform="translate(.49 16.6) rotate(-45)" />
+</svg>
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="11.17" y="3.67" width="1.67" height="18.33" />
+  <rect class="cls-1" x="2.54" y="5.92" width="11.78" height="1.68"
+    transform="translate(-2.31 7.94) rotate(-45)" />
+  <rect class="cls-1" x="14.73" y=".87" width="1.68" height="11.79"
+    transform="translate(-.22 12.99) rotate(-45)" />
+</svg>
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="7.5" y="2" width="1" height="13" />
+  <rect class="cls-1" x="2.32" y="3.64" width="7.07" height="1.01"
+    transform="translate(-1.21 5.36) rotate(-45)" />
+  <rect class="cls-1" x="9.64" y=".61" width="1.01" height="7.07"
+    transform="translate(.04 8.39) rotate(-45)" />
+</svg>
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M5.76,18.69l-2.07,6.28H1.02L7.84,5h3.08l6.82,19.97h-2.76l-2.13-6.28h-7.08ZM12.34,16.68l-1.99-5.75c-.44-1.3-.74-2.49-1.04-3.65h-.06c-.3,1.16-.59,2.4-1.01,3.62l-1.96,5.78h6.05Z" />
+  <path class="cls-1"
+    d="M30.77,21.31c0,1.22.06,2.41.21,3.37h-2.34l-.21-1.77h-.09c-.8,1.1-2.34,2.09-4.39,2.09-2.9,0-4.39-2-4.39-4.04,0-3.4,3.08-5.26,8.62-5.23v-.29c0-1.13-.33-3.25-3.26-3.22-1.36,0-2.76.38-3.76,1.05l-.59-1.71c1.19-.73,2.93-1.22,4.74-1.22,4.39,0,5.45,2.93,5.45,5.72v5.26ZM28.25,17.51c-2.84-.06-6.08.43-6.08,3.17,0,1.68,1.13,2.44,2.43,2.44,1.9,0,3.11-1.16,3.53-2.35.09-.29.12-.58.12-.81v-2.44Z" />
+</svg>
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M4.48,14.37l-1.52,4.61h-1.96L6.01,4.31h2.26l5.01,14.67h-2.02l-1.57-4.61h-5.2ZM9.31,12.89l-1.46-4.22c-.33-.96-.54-1.83-.76-2.68h-.04c-.22.85-.44,1.76-.74,2.65l-1.44,4.24h4.44Z" />
+  <path class="cls-1"
+    d="M22.85,16.29c0,.9.04,1.77.15,2.47h-1.72l-.15-1.3h-.07c-.59.81-1.72,1.53-3.22,1.53-2.13,0-3.22-1.47-3.22-2.96,0-2.5,2.26-3.86,6.33-3.84v-.21c0-.83-.24-2.39-2.39-2.37-1,0-2.02.28-2.76.77l-.44-1.26c.87-.53,2.15-.9,3.48-.9,3.22,0,4,2.15,4,4.2v3.86ZM21,13.5c-2.09-.04-4.46.32-4.46,2.32,0,1.24.83,1.79,1.78,1.79,1.39,0,2.29-.85,2.59-1.73.07-.21.09-.43.09-.6v-1.79Z" />
+</svg>
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M2.53,9.63l-1.11,3.36H0L3.64,2.32h1.65l3.64,10.67h-1.47l-1.14-3.36h-3.78ZM6.05,8.55l-1.06-3.07c-.24-.7-.4-1.33-.55-1.95h-.03c-.16.62-.32,1.28-.54,1.93l-1.04,3.09h3.23Z" />
+  <path class="cls-1"
+    d="M15.89,11.03c0,.65.03,1.29.11,1.8h-1.25l-.11-.95h-.05c-.43.59-1.25,1.12-2.34,1.12-1.55,0-2.34-1.07-2.34-2.16,0-1.81,1.65-2.81,4.61-2.79v-.15c0-.6-.17-1.74-1.74-1.72-.73,0-1.47.2-2.01.56l-.32-.91c.63-.39,1.57-.65,2.53-.65,2.34,0,2.91,1.57,2.91,3.06v2.81ZM14.54,9c-1.52-.03-3.24.23-3.24,1.69,0,.9.6,1.3,1.3,1.3,1.01,0,1.66-.62,1.88-1.26.05-.15.06-.31.06-.43v-1.3Z" />
+</svg>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor">
+  <polygon points="2 10 12 10 7 4 2 10" />
+  <rect x="6" y="6" width="2" height="22" />
+  <rect x="14" y="6" width="16" height="2" />
+  <rect x="14" y="15" width="12" height="2" />
+  <rect x="14" y="24" width="8" height="2" />
+</svg>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <polygon points="2 8.14 9.14 8.14 5.57 3.86 2 8.14" />
+  <rect x="4.86" y="5.29" width="1.43" height="15.71" />
+  <rect x="10.57" y="5.29" width="11.43" height="1.43" />
+  <rect x="10.57" y="11.71" width="8.57" height="1.43" />
+  <rect x="10.57" y="18.14" width="5.71" height="1.43" />
+</svg>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+  <polygon points="0 4 5 4 2.5 1 0 4" />
+  <rect x="2" y="4" width="1" height="11" />
+  <rect x="6" y="3" width="10" height="1" />
+  <rect x="6" y="8" width="7" height="1" />
+  <rect x="6" y="13" width="4" height="1" />
+</svg>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor">
+  <polygon points="12 22 2 22 7 28 12 22" />
+  <rect x="6" y="4" width="2" height="22" />
+  <rect x="14" y="6" width="16" height="2" />
+  <rect x="14" y="15" width="12" height="2" />
+  <rect x="14" y="24" width="8" height="2" />
+</svg>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <polygon points="9.14 16.71 2 16.71 5.57 21 9.14 16.71" />
+  <rect x="4.86" y="3.86" width="1.43" height="15.71" />
+  <rect x="10.57" y="5.29" width="11.43" height="1.43" />
+  <rect x="10.57" y="11.71" width="8.57" height="1.43" />
+  <rect x="10.57" y="18.14" width="5.71" height="1.43" />
+</svg>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+  <polygon points="5 12 0 12 2.5 15 5 12" />
+  <rect x="2" y="1" width="1" height="12" />
+  <rect x="6" y="3" width="10" height="1" />
+  <rect x="6" y="8" width="7" height="1" />
+  <rect x="6" y="13" width="4" height="1" />
+</svg>
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor">
+  <polygon points="4 10 14 10 9 4 4 10" />
+  <rect x="8" y="6" width="2" height="22" />
+  <polygon points="28 22 18 22 23 28 28 22" />
+  <rect x="22" y="4" width="2" height="22" />
+</svg>
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <polygon points="3.4 8.29 10.55 8.29 6.98 4 3.4 8.29" />
+  <rect x="6.26" y="5.43" width="1.43" height="15.71" />
+  <polygon points="20.55 16.86 13.4 16.86 16.98 21.14 20.55 16.86" />
+  <rect x="16.26" y="4" width="1.43" height="15.71" />
+</svg>
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+  <polygon points="2 4 7 4 4.5 1 2 4" />
+  <rect x="4" y="4" width="1" height="11" />
+  <polygon points="14 12 9 12 11.5 15 14 12" />
+  <rect x="11" y="1" width="1" height="11" />
+</svg>
@@ -0,0 +1,302 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <!-- SORTING ICONS -->
+    <symbol id="icon-sort-unknown" viewBox="0 0 32 32" fill="currentColor">
+        <polygon points="4 10 14 10 9 4 4 10" />
+        <rect x="8" y="6" width="2" height="22" />
+        <polygon points="28 22 18 22 23 28 28 22" />
+        <rect x="22" y="4" width="2" height="22" />
+    </symbol>
+
+    <symbol id="icon-sort-unknown_m" viewBox="0 0 24 24" fill="currentColor">
+        <polygon points="3.4 8.29 10.55 8.29 6.98 4 3.4 8.29" />
+        <rect x="6.26" y="5.43" width="1.43" height="15.71" />
+        <polygon points="20.55 16.86 13.4 16.86 16.98 21.14 20.55 16.86" />
+        <rect x="16.26" y="4" width="1.43" height="15.71" />
+    </symbol>
+
+    <symbol id="icon-sort-unknown_sm" viewBox="0 0 16 16" fill="currentColor">
+        <polygon points="2 4 7 4 4.5 1 2 4" />
+        <rect x="4" y="4" width="1" height="11" />
+        <polygon points="14 12 9 12 11.5 15 14 12" />
+        <rect x="11" y="1" width="1" height="11" />
+    </symbol>
+
+    <symbol id="icon-sort-desc" viewBox="0 0 32 32"
+        fill="currentColor">
+        <polygon points="12 22 2 22 7 28 12 22" />
+        <rect x="6" y="4" width="2" height="22" />
+        <rect x="14" y="6" width="16" height="2" />
+        <rect x="14" y="15" width="12" height="2" />
+        <rect x="14" y="24" width="8" height="2" />
+    </symbol>
+
+    <symbol id="icon-sort-desc_m" viewBox="0 0 24 24"
+        fill="currentColor">
+        <polygon points="9.14 16.71 2 16.71 5.57 21 9.14 16.71" />
+        <rect x="4.86" y="3.86" width="1.43" height="15.71" />
+        <rect x="10.57" y="5.29" width="11.43" height="1.43" />
+        <rect x="10.57" y="11.71" width="8.57" height="1.43" />
+        <rect x="10.57" y="18.14" width="5.71" height="1.43" />
+    </symbol>
+
+    <symbol id="icon-sort-desc_sm" viewBox="0 0 16 16"
+        fill="currentColor">
+        <polygon points="5 12 0 12 2.5 15 5 12" />
+        <rect x="2" y="1" width="1" height="12" />
+        <rect x="6" y="3" width="10" height="1" />
+        <rect x="6" y="8" width="7" height="1" />
+        <rect x="6" y="13" width="4" height="1" />
+    </symbol>
+
+
+    <symbol id="icon-sort-asc" viewBox="0 0 32 32" fill="currentColor">
+        <polygon points="2 10 12 10 7 4 2 10" />
+        <rect x="6" y="6" width="2" height="22" />
+        <rect x="14" y="6" width="16" height="2" />
+        <rect x="14" y="15" width="12" height="2" />
+        <rect x="14" y="24" width="8" height="2" />
+    </symbol>
+
+    <symbol id="icon-sort-asc_m" viewBox="0 0 24 24" fill="currentColor">
+        <polygon points="2 8.14 9.14 8.14 5.57 3.86 2 8.14" />
+        <rect x="4.86" y="5.29" width="1.43" height="15.71" />
+        <rect x="10.57" y="5.29" width="11.43" height="1.43" />
+        <rect x="10.57" y="11.71" width="8.57" height="1.43" />
+        <rect x="10.57" y="18.14" width="5.71" height="1.43" />
+    </symbol>
+
+    <symbol id="icon-sort-asc_sm" viewBox="0 0 16 16" fill="currentColor">
+        <polygon points="0 4 5 4 2.5 1 0 4" />
+        <rect x="2" y="4" width="1" height="11" />
+        <rect x="6" y="3" width="10" height="1" />
+        <rect x="6" y="8" width="7" height="1" />
+        <rect x="6" y="13" width="4" height="1" />
+    </symbol>
+    <!-- SORTING ICONS END -->
+
+    <!-- CROSS ICON (ONLY ONE SIZE)-->
+    <symbol id="icon-cross_m" viewBox="0 0 24 24">
+        <path xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M3.31579 3.31579C2.89474 3.73684 2.89474 4.42105 3.31579 4.84211L10.4737 12L3.31579 19.1579C2.89474 19.5789 2.89474 20.2632 3.31579 20.6842C3.73684 21.1053 4.42105 21.1053 4.84211 20.6842L12 13.5263L19.1579 20.6842C19.5789 21.1053 20.2632 21.1053 20.6842 20.6842C21.1053 20.2632 21.1053 19.5789 20.6842 19.1579L13.5263 12L20.6842 4.84211C21.1053 4.42105 21.1053 3.73684 20.6842 3.31579C20.2632 2.89474 19.5789 2.89474 19.1579 3.31579L12 10.4737L4.84211 3.31579C4.42105 2.89474 3.73684 2.89474 3.31579 3.31579Z" />
+    </symbol>
+    <!-- CROSS ICON END -->
+
+    <!-- REPLACE ICONS -->
+    <symbol id="icon-replace_sm" viewBox="0 0 16 16" fill="currentColor">
+        <path
+            d="M10.03,1h1.04v2.39h.02c.24-.42.68-.69,1.3-.69.95,0,1.61.79,1.61,1.93,0,1.36-.86,2.04-1.71,2.04-.55,0-.99-.21-1.28-.71h-.02l-.04.62h-.95c.02-.26.03-.64.03-.98V1ZM11.06,4.97c0,.07,0,.13.03.19.11.37.48.62.93.62.65,0,1.03-.45,1.03-1.12,0-.59-.35-1.09-1.02-1.09-.41,0-.81.25-.93.65-.02.07-.04.14-.04.22v.52Z" />
+        <path
+            d="M8.99,13.78c-.18.09-.58.22-1.09.22-1.15,0-1.89-.78-1.89-1.94s.8-2.03,2.04-2.03c.41,0,.77.1.96.2v.82c-.17-.09-.58-.23-.96-.23-.59,0-1.04.4-1.04,1.19,0,.88.51,1.13,1.02,1.13.39,0,.77-.08.97-.17v.8Z" />
+        <path d="M13,9v6H3v-6h10M14,8H2v8h12V8h0Z" />
+        <path
+            d="M5,5h-1v-1.49c0-1.38,1.13-2.51,2.51-2.51h2.49v1h-2.49c-.83,0-1.51.68-1.51,1.51v1.49Z" />
+        <polygon points="4.5 6 3 4 6 4 4.5 6" />
+    </symbol>
+
+    <symbol id="icon-replace_m" viewBox="0 0 24 24" fill="currentColor">
+        <path
+            d="M15.62.88h1.64v3.75h.02c.38-.67,1.07-1.09,2.04-1.09,1.49,0,2.53,1.24,2.53,3.04,0,2.14-1.36,3.2-2.69,3.2-.86,0-1.56-.33-2.01-1.11h-.02l-.06.98h-1.49c.02-.41.05-1.01.05-1.54V.88ZM17.23,7.12c0,.1.01.21.04.3.18.58.75.98,1.46.98,1.03,0,1.62-.71,1.62-1.77,0-.92-.55-1.71-1.6-1.71-.65,0-1.27.4-1.47,1.03-.03.1-.06.22-.06.35v.82Z" />
+        <path
+            d="M13.98,19.4c-.28.14-.91.35-1.72.35-1.8,0-2.98-1.22-2.98-3.05s1.26-3.19,3.21-3.19c.64,0,1.21.16,1.51.32v1.29c-.27-.14-.91-.36-1.51-.36-.93,0-1.64.64-1.64,1.87,0,1.38.81,1.77,1.6,1.77.62,0,1.21-.13,1.52-.26v1.26Z" />
+        <path d="M20.29,11.88v9.43H4.57v-9.43h15.71M21.86,10.31H3v12.57h18.86v-12.57h0Z" />
+        <path
+            d="M7.71,7.17h-1.57v-2.34c0-2.18,1.77-3.95,3.95-3.95h3.91v1.57h-3.91c-1.31,0-2.37,1.07-2.37,2.37v2.34Z" />
+        <polygon points="6.93 8.74 4.57 5.6 9.29 5.6 6.93 8.74" />
+    </symbol>
+
+    <symbol id="icon-replace" viewBox="0 0 32 32" fill="currentColor">
+        <path
+            d="M20.06,2h2.09v4.78h.03c.49-.85,1.37-1.38,2.59-1.38,1.9,0,3.22,1.57,3.22,3.87,0,2.72-1.73,4.07-3.43,4.07-1.1,0-1.98-.42-2.56-1.41h-.03l-.08,1.24h-1.9c.03-.52.06-1.29.06-1.96V2ZM22.11,9.94c0,.13.01.27.06.39.22.74.95,1.24,1.85,1.24,1.3,0,2.06-.91,2.06-2.25,0-1.17-.7-2.17-2.03-2.17-.83,0-1.61.51-1.87,1.3-.04.13-.07.28-.07.45v1.04Z" />
+        <path
+            d="M17.97,25.56c-.36.17-1.16.44-2.19.44-2.3,0-3.79-1.56-3.79-3.88s1.6-4.06,4.09-4.06c.82,0,1.54.2,1.92.41v1.65c-.34-.17-1.16-.46-1.92-.46-1.19,0-2.09.81-2.09,2.38,0,1.76,1.03,2.25,2.04,2.25.79,0,1.54-.16,1.94-.33v1.6Z" />
+        <path d="M26,16v12H6v-12h20M28,14H4v16h24V14h0Z" />
+        <path
+            d="M10,10h-2v-2.98c0-2.77,2.25-5.02,5.02-5.02h4.98v2h-4.98c-1.67,0-3.02,1.36-3.02,3.02v2.98Z" />
+        <polygon points="9 12 6 8 12 8 9 12" />
+    </symbol>
+    <!-- REPLACE ICONS END -->
+
+    <!-- REPLACE ALL ICONS -->
+    <symbol id="icon-replace-all" viewBox="0 0 32 32" fill="currentColor">
+        <path
+            d="M13,24.99c0,.67-.03,1.49.05,2.01h-1.25l-.11-1.14h-.05c-.43.6-1.25,1.14-2.34,1.14-1.55,0-2.34-1.09-2.34-2.2,0-1.85,1.65-2.87,4.61-2.85v-.16c0-.62-.17-1.33-1.74-1.31-.73,0-1.47.3-2.01.66l-.79-1.19c.63-.4,2.05-.95,3.01-.95,2.34,0,2.98,1.6,2.98,3.12v2.87ZM11.59,23.14c-1.21-.03-3.03.19-3.03,1.38,0,.73.39,1.06,1.48,1.06.81,0,1.33-.51,1.51-1.02.04-.13.05-.25.05-.35v-1.06Z" />
+        <path
+            d="M22.05,8.99c0,.67-.03,1.49.05,2.01h-1.25l-.11-1.14h-.05c-.43.6-1.25,1.14-2.34,1.14-1.55,0-2.34-1.09-2.34-2.2,0-1.85,1.65-2.87,4.61-2.85v-.16c0-.62-.17-1.33-1.74-1.31-.73,0-1.47.3-2.01.66l-.79-1.19c.63-.4,2.05-.95,3.01-.95,2.34,0,2.98,1.6,2.98,3.12v2.87ZM20.64,7.14c-1.21-.03-3.03.19-3.03,1.38,0,.73.39,1.06,1.48,1.06.81,0,1.33-.51,1.51-1.02.04-.13.05-.25.05-.35v-1.06Z" />
+        <path
+            d="M23.06,1.07h1.83v4.33h.03c.43-.77,1.2-1.25,2.27-1.25,1.66,0,2.82,1.42,2.82,3.5,0,2.46-1.51,3.69-3,3.69-.96,0-1.73-.38-2.24-1.28h-.03l-.07,1.12h-1.66c.03-.47.06-1.17.06-1.78V1.07ZM24.85,8.26c0,.12.01.24.05.35.2.67.84,1.13,1.62,1.13,1.14,0,1.8-.82,1.8-2.03,0-1.06-.61-1.97-1.78-1.97-.72,0-1.41.46-1.63,1.18-.04.12-.06.25-.06.4v.94Z" />
+        <path
+            d="M20.97,26.56c-.36.17-1.16.44-2.19.44-2.3,0-3.79-1.56-3.79-3.88s1.6-4.06,4.09-4.06c.82,0,1.54.2,1.92.41v1.65c-.34-.17-1.16-.46-1.92-.46-1.19,0-2.09.77-2.09,2.34,0,1.76,1.03,2.29,2.04,2.29.79,0,1.54-.16,1.94-.33v1.6Z" />
+        <path d="M24,18v10H4v-10h20M26,16H2v14h24v-14h0Z" />
+        <polygon points="9 12 9 14 28 14 28 28 30 28 30 12 9 12" />
+        <g>
+            <path
+                d="M6,13h-2v-2.98c0-2.77,2.25-5.02,5.02-5.02h4.98v2h-4.98c-1.67,0-3.02,1.36-3.02,3.02v2.98Z" />
+            <polygon points="5 15 2 11 8 11 5 15" />
+        </g>
+    </symbol>
+
+    <symbol id="icon-replace-all_m" viewBox="0 0 24 24" fill="currentColor">
+        <path
+            d="M9.25,19.01c0,.5-.02,1.12.04,1.51h-.94l-.08-.86h-.04c-.32.45-.94.86-1.76.86-1.16,0-1.76-.82-1.76-1.65,0-1.39,1.24-2.15,3.46-2.14v-.12c0-.46-.13-1-1.31-.98-.55,0-1.1.22-1.51.5l-.6-.89c.48-.3,1.53-.71,2.26-.71,1.76,0,2.23,1.2,2.23,2.34v2.15ZM8.19,17.63c-.91-.02-2.28.14-2.28,1.03,0,.55.29.8,1.11.8.61,0,1-.38,1.13-.77.03-.09.04-.19.04-.27v-.8Z" />
+        <path
+            d="M16.04,7.01c0,.5-.02,1.12.04,1.51h-.94l-.08-.86h-.04c-.32.45-.94.86-1.76.86-1.16,0-1.76-.82-1.76-1.65,0-1.39,1.24-2.15,3.46-2.14v-.12c0-.46-.13-1-1.31-.98-.55,0-1.1.22-1.51.5l-.6-.89c.48-.3,1.53-.71,2.26-.71,1.76,0,2.23,1.2,2.23,2.34v2.15ZM14.98,5.63c-.91-.02-2.28.14-2.28,1.03,0,.55.29.8,1.11.8.61,0,1-.38,1.13-.77.03-.09.04-.19.04-.27v-.8Z" />
+        <path
+            d="M16.79,1.07h1.37v3.24h.02c.32-.58.9-.94,1.7-.94,1.25,0,2.12,1.07,2.12,2.63,0,1.85-1.13,2.76-2.25,2.76-.72,0-1.3-.29-1.68-.96h-.02l-.05.84h-1.25c.02-.35.04-.88.04-1.33V1.07ZM18.14,6.46c0,.09,0,.18.04.26.15.5.63.84,1.22.84.86,0,1.35-.61,1.35-1.53,0-.8-.46-1.48-1.34-1.48-.54,0-1.06.34-1.22.89-.03.09-.05.19-.05.3v.7Z" />
+        <path
+            d="M15.23,20.19c-.27.13-.87.33-1.64.33-1.72,0-2.84-1.17-2.84-2.91s1.2-3.04,3.07-3.04c.61,0,1.16.15,1.44.31v1.23c-.25-.13-.87-.34-1.44-.34-.89,0-1.57.58-1.57,1.76,0,1.32.77,1.72,1.53,1.72.59,0,1.16-.12,1.45-.25v1.2Z" />
+        <path d="M17.5,13.77v7.5H2.5v-7.5h15M19,12.27H1v10.5h18v-10.5h0Z" />
+        <polygon
+            points="6.25 9.27 6.25 10.77 20.5 10.77 20.5 21.27 22 21.27 22 9.27 6.25 9.27" />
+        <g>
+            <path
+                d="M4,10.02h-1.5v-2.23c0-2.08,1.69-3.77,3.77-3.77h3.73v1.5h-3.73c-1.25,0-2.27,1.02-2.27,2.27v2.23Z" />
+            <polygon points="3.25 11.52 1 8.52 5.5 8.52 3.25 11.52" />
+        </g>
+    </symbol>
+
+    <symbol id="icon-replace-all_sm" viewBox="0 0 16 16" fill="currentColor">
+        <path
+            d="M6.5,13.49c0,.33-.01.74.02,1.01h-.63l-.06-.57h-.02c-.21.3-.63.57-1.17.57-.78,0-1.17-.55-1.17-1.1,0-.93.82-1.43,2.3-1.43v-.08c0-.31-.09-.66-.87-.66-.36,0-.74.15-1.01.33l-.4-.59c.32-.2,1.02-.48,1.51-.48,1.17,0,1.49.8,1.49,1.56v1.43ZM5.8,12.57c-.61-.01-1.52.09-1.52.69,0,.37.19.53.74.53.4,0,.66-.25.75-.51.02-.06.03-.13.03-.18v-.53Z" />
+        <path
+            d="M11.02,4.49c0,.33-.01.74.02,1.01h-.63l-.06-.57h-.02c-.21.3-.63.57-1.17.57-.78,0-1.17-.55-1.17-1.1,0-.93.82-1.43,2.3-1.43v-.08c0-.31-.09-.66-.87-.66-.36,0-.74.15-1.01.33l-.4-.59c.32-.2,1.02-.48,1.51-.48,1.17,0,1.49.8,1.49,1.56v1.43ZM10.32,3.57c-.61-.01-1.52.09-1.52.69,0,.37.19.53.74.53.4,0,.66-.25.75-.51.02-.06.03-.13.03-.18v-.53Z" />
+        <path
+            d="M11.53.54h.91v2.16h.01c.21-.38.6-.63,1.13-.63.83,0,1.41.71,1.41,1.75,0,1.23-.76,1.84-1.5,1.84-.48,0-.87-.19-1.12-.64h-.01l-.03.56h-.83c.01-.23.03-.58.03-.89V.54ZM12.43,4.13c0,.06,0,.12.02.17.1.33.42.56.81.56.57,0,.9-.41.9-1.02,0-.53-.31-.98-.89-.98-.36,0-.71.23-.82.59-.02.06-.03.13-.03.2v.47Z" />
+        <path
+            d="M10.48,14.28c-.18.09-.58.22-1.09.22-1.15,0-1.89-.78-1.89-1.94s.8-2.03,2.04-2.03c.41,0,.77.1.96.2v.82c-.17-.09-.58-.23-.96-.23-.59,0-1.04.38-1.04,1.17,0,.88.51,1.15,1.02,1.15.39,0,.77-.08.97-.17v.8Z" />
+        <path d="M12,10v5H2v-5h10M13,9H1v7h12v-7h0Z" />
+        <polygon points="4.5 7 4.5 8 14 8 14 15 15 15 15 7 4.5 7" />
+        <g>
+            <path
+                d="M3,7h-1v-1.49c0-1.38,1.13-2.51,2.51-2.51h2.49v1h-2.49c-.83,0-1.51.68-1.51,1.51v1.49Z" />
+            <polygon points="2.5 8 1 6 4 6 2.5 8" />
+        </g>
+    </symbol>
+    <!-- REPLACE ALL ICONS END -->
+
+    <!-- REGEX ICONS -->
+    <symbol id="icon-regex" viewBox="0 0 32 32" fill="currentColor">
+        <rect x="20.04" y="2" width="2" height="22" />
+        <rect x="20.04" y="2" width="2" height="22"
+            transform="translate(-.9 24.42) rotate(-59.21)" />
+        <rect x="10.04" y="12" width="22" height="2"
+            transform="translate(-3.69 13.25) rotate(-32.29)" />
+        <rect x="2.04" y="22" width="8" height="8" />
+    </symbol>
+
+    <symbol id="icon-regex_m" viewBox="0 0 24 24" fill="currentColor">
+        <rect x="14.46" y="2" width="1.38" height="15.14" />
+        <rect x="14.46" y="2" width="1.38" height="15.14"
+            transform="translate(-.83 17.68) rotate(-59.21)" />
+        <rect x="7.58" y="8.88" width="15.14" height="1.38"
+            transform="translate(-2.77 9.57) rotate(-32.29)" />
+        <rect x="2.08" y="16.5" width="5.5" height="5.5" />
+    </symbol>
+    <symbol id="icon-regex_sm" viewBox="0 0 16 16" fill="currentColor">
+        <rect x="10" y="1" width="1" height="11" />
+        <rect x="10" y="1" width="1" height="11"
+            transform="translate(-.46 12.19) rotate(-59.21)" />
+        <rect x="5" y="6" width="11" height="1"
+            transform="translate(-1.85 6.61) rotate(-32.29)" />
+        <rect x="1" y="11" width="4" height="4" />
+    </symbol>
+    <!-- REGEX ICONS END -->
+
+    <!-- MATCH WORD ICONS -->
+    <symbol id="icon-match-word" viewBox="0 0 32 32" fill="currentColor">
+        <path
+            d="M13.82,20.03c0,1.12.05,2.22.18,3.1h-2.01l-.18-1.63h-.08c-.69,1.02-2.01,1.92-3.76,1.92-2.49,0-3.76-1.84-3.76-3.71,0-3.13,2.64-4.84,7.4-4.81v-.27c0-1.04-.28-2.99-2.8-2.97-1.17,0-2.36.35-3.23.96l-.51-1.58c1.02-.67,2.52-1.12,4.07-1.12,3.76,0,4.68,2.7,4.68,5.26v4.84ZM11.66,16.53c-2.44-.05-5.21.4-5.21,2.91,0,1.55.97,2.24,2.08,2.24,1.63,0,2.67-1.07,3.02-2.16.08-.27.1-.53.1-.75v-2.24Z" />
+        <path
+            d="M17.11,5h2.44v7.28h-.75c.87-1.44,2.44-2.35,4.62-2.35,3.39,0,5.75,2.67,5.75,6.57,0,4.62-3.08,6.92-6.11,6.92-1.96,0-2.72-.72-3.76-2.4h-.3l.1,2.11h-2.1c.06-.88.11-2.19.11-3.34V5ZM19.38,17.94c0,.29.08.59.17.85.45,1.63,1.21,2.75,3,2.75,2.61,0,4.12-2,4.12-4.97,0-2.59-1.4-4.81-4.06-4.81-1.65,0-2.55,1.12-3.06,2.89-.08.29-.17.61-.17.99v2.3Z" />
+        <rect x="1" y="23" width="2" height="4" />
+        <rect x="29" y="23" width="2" height="4" />
+        <rect x="1.67" y="25" width="29.33" height="2" />
+    </symbol>
+    <symbol id="icon-match-word_m" viewBox="0 0 24 24" fill="currentColor">
+        <path
+            d="M10.41,14.93c0,.82.04,1.61.13,2.25h-1.47l-.13-1.18h-.06c-.5.74-1.47,1.4-2.76,1.4-1.83,0-2.76-1.34-2.76-2.7,0-2.27,1.94-3.52,5.43-3.5v-.19c0-.76-.2-2.18-2.05-2.16-.86,0-1.73.25-2.37.7l-.37-1.15c.75-.49,1.85-.82,2.98-.82,2.76,0,3.43,1.96,3.43,3.83v3.52ZM8.82,12.38c-1.79-.04-3.82.29-3.82,2.12,0,1.13.71,1.63,1.53,1.63,1.19,0,1.96-.78,2.22-1.57.06-.19.07-.39.07-.54v-1.63Z" />
+        <path
+            d="M12.82,4h1.79v5.29h-.55c.64-1.05,1.79-1.71,3.39-1.71,2.49,0,4.21,1.94,4.21,4.78,0,3.36-2.26,5.03-4.48,5.03-1.44,0-2-.52-2.76-1.75h-.22l.08,1.54h-1.54c.04-.64.08-1.59.08-2.43V4ZM14.49,13.41c0,.21.06.43.12.62.33,1.19.89,2,2.2,2,1.91,0,3.02-1.46,3.02-3.61,0-1.88-1.03-3.5-2.98-3.5-1.21,0-1.87.82-2.24,2.1-.06.21-.12.45-.12.72v1.67Z" />
+        <rect x="1" y="17" width="1.47" height="3" />
+        <rect x="21.54" y="17" width="1.47" height="3" />
+        <rect x="1.49" y="18.55" width="21.52" height="1.45" />
+    </symbol>
+    <symbol id="icon-match-word_sm" viewBox="0 0 16 16" fill="currentColor">
+        <path
+            d="M6.9,10.2c0,.61.03,1.21.1,1.69h-1.15l-.1-.89h-.04c-.39.55-1.15,1.05-2.16,1.05-1.43,0-2.16-1.01-2.16-2.03,0-1.71,1.52-2.64,4.24-2.62v-.15c0-.57-.16-1.63-1.6-1.62-.67,0-1.35.19-1.85.52l-.29-.86c.58-.36,1.44-.61,2.33-.61,2.16,0,2.68,1.47,2.68,2.87v2.64ZM5.66,8.29c-1.4-.03-2.99.22-2.99,1.59,0,.85.55,1.22,1.19,1.22.93,0,1.53-.58,1.73-1.18.04-.15.06-.29.06-.41v-1.22Z" />
+        <path
+            d="M8.73,2h1.27v3.97h-.39c.45-.79,1.27-1.28,2.4-1.28,1.76,0,2.99,1.46,2.99,3.58,0,2.52-1.6,3.77-3.18,3.77-1.02,0-1.42-.39-1.95-1.31h.13l-.23,1.15h-1.09c.03-.48.06-1.19.06-1.82V2ZM9.93,9.06c0,.16.01.32.06.47.23.89.64,1.5,1.58,1.5,1.35,0,2.14-1.09,2.14-2.71,0-1.41-.73-2.62-2.11-2.62-.86,0-1.33.61-1.59,1.57-.04.16-.07.33-.07.54v1.25Z" />
+
+        <rect y="12" width="1" height="2" />
+        <rect x="15" y="12.02" width="1" height="1.98" />
+        <rect y="13" width="16" height="1" />
+    </symbol>
+    <!-- MATCH WORD ICONS END -->
+
+    <!-- CASE ICONS -->
+    <symbol id="icon-case" viewBox="0 0 32 32" fill="currentColor">
+        <path
+            d="M5.76,18.69l-2.07,6.28H1.02L7.84,5h3.08l6.82,19.97h-2.76l-2.13-6.28h-7.08ZM12.34,16.68l-1.99-5.75c-.44-1.3-.74-2.49-1.04-3.65h-.06c-.3,1.16-.59,2.4-1.01,3.62l-1.96,5.78h6.05Z" />
+        <path
+            d="M30.77,21.31c0,1.22.06,2.41.21,3.37h-2.34l-.21-1.77h-.09c-.8,1.1-2.34,2.09-4.39,2.09-2.9,0-4.39-2-4.39-4.04,0-3.4,3.08-5.26,8.62-5.23v-.29c0-1.13-.33-3.25-3.26-3.22-1.36,0-2.76.38-3.76,1.05l-.59-1.71c1.19-.73,2.93-1.22,4.74-1.22,4.39,0,5.45,2.93,5.45,5.72v5.26ZM28.25,17.51c-2.84-.06-6.08.43-6.08,3.17,0,1.68,1.13,2.44,2.43,2.44,1.9,0,3.11-1.16,3.53-2.35.09-.29.12-.58.12-.81v-2.44Z" />
+    </symbol>
+    <symbol id="icon-case_m" viewBox="0 0 24 24" fill="currentColor">
+        <path
+            d="M4.48,14.37l-1.52,4.61h-1.96L6.01,4.31h2.26l5.01,14.67h-2.02l-1.57-4.61h-5.2ZM9.31,12.89l-1.46-4.22c-.33-.96-.54-1.83-.76-2.68h-.04c-.22.85-.44,1.76-.74,2.65l-1.44,4.24h4.44Z" />
+        <path
+            d="M22.85,16.29c0,.9.04,1.77.15,2.47h-1.72l-.15-1.3h-.07c-.59.81-1.72,1.53-3.22,1.53-2.13,0-3.22-1.47-3.22-2.96,0-2.5,2.26-3.86,6.33-3.84v-.21c0-.83-.24-2.39-2.39-2.37-1,0-2.02.28-2.76.77l-.44-1.26c.87-.53,2.15-.9,3.48-.9,3.22,0,4,2.15,4,4.2v3.86ZM21,13.5c-2.09-.04-4.46.32-4.46,2.32,0,1.24.83,1.79,1.78,1.79,1.39,0,2.29-.85,2.59-1.73.07-.21.09-.43.09-.6v-1.79Z" />
+    </symbol>
+    <symbol id="icon-case_sm" viewBox="0 0 16 16" fill="currentColor">
+        <path
+            d="M2.53,9.63l-1.11,3.36H0L3.64,2.32h1.65l3.64,10.67h-1.47l-1.14-3.36h-3.78ZM6.05,8.55l-1.06-3.07c-.24-.7-.4-1.33-.55-1.95h-.03c-.16.62-.32,1.28-.54,1.93l-1.04,3.09h3.23Z" />
+        <path
+            d="M15.89,11.03c0,.65.03,1.29.11,1.8h-1.25l-.11-.95h-.05c-.43.59-1.25,1.12-2.34,1.12-1.55,0-2.34-1.07-2.34-2.16,0-1.81,1.65-2.81,4.61-2.79v-.15c0-.6-.17-1.74-1.74-1.72-.73,0-1.47.2-2.01.56l-.32-.91c.63-.39,1.57-.65,2.53-.65,2.34,0,2.91,1.57,2.91,3.06v2.81ZM14.54,9c-1.52-.03-3.24.23-3.24,1.69,0,.9.6,1.3,1.3,1.3,1.01,0,1.66-.62,1.88-1.26.05-.15.06-.31.06-.43v-1.3Z" />
+    </symbol>
+    <!-- CASE ICONS END -->
+
+    <!-- ARROW ICONS-->
+    <symbol id="icon-arrow-up" viewBox="0 0 32 32" fill="currentColor">
+        <rect x="15" y="4" width="2" height="26" />
+        <rect x="4.64" y="6.7" width="14.14" height="2.02"
+            transform="translate(-2.02 10.54) rotate(-45)" />
+        <rect x="19.28" y=".64" width="2.02" height="14.14"
+            transform="translate(.49 16.6) rotate(-45)" />
+    </symbol>
+    <symbol id="icon-arrow-up_m" viewBox="0 0 24 24" fill="currentColor">
+        <rect x="11.17" y="3.67" width="1.67" height="18.33" />
+        <rect x="2.54" y="5.92" width="11.78" height="1.68"
+            transform="translate(-2.31 7.94) rotate(-45)" />
+        <rect x="14.73" y=".87" width="1.68" height="11.79"
+            transform="translate(-.22 12.99) rotate(-45)" />
+    </symbol>
+    <symbol id="icon-arrow-up_sm" viewBox="0 0 16 16" fill="currentColor">
+        <rect x="7.5" y="2" width="1" height="13" />
+        <rect x="2.32" y="3.64" width="7.07" height="1.01"
+            transform="translate(-1.21 5.36) rotate(-45)" />
+        <rect x="9.64" y=".61" width="1.01" height="7.07"
+            transform="translate(.04 8.39) rotate(-45)" />
+    </symbol>
+
+    <symbol id="icon-arrow-down" viewBox="0 0 32 32" fill="currentColor">
+        <rect x="15" y="2" width="2" height="26" />
+        <rect x="13.21" y="23.28" width="14.14" height="2.02"
+            transform="translate(-11.23 21.46) rotate(-45)" />
+        <rect x="10.7" y="17.21" width="2.02" height="14.14"
+            transform="translate(-13.74 15.4) rotate(-45)" />
+    </symbol>
+    <symbol id="icon-arrow-down_m" viewBox="0 0 24 24" fill="currentColor">
+        <rect x="11.17" y="2" width="1.67" height="18.33" />
+        <rect x="9.68" y="16.4" width="11.78" height="1.68"
+            transform="translate(-7.63 16.06) rotate(-45)" />
+        <rect x="7.59" y="11.35" width="1.68" height="11.79"
+            transform="translate(-9.72 11.01) rotate(-45)" />
+    </symbol>
+    <symbol id="icon-arrow-down_sm" viewBox="0 0 16 16" fill="currentColor">
+        <rect x="7.5" y="1" width="1" height="13" />
+        <rect x="6.61" y="11.35" width="7.07" height="1.01"
+            transform="translate(-5.41 10.64) rotate(-45)" />
+        <rect x="5.35" y="8.32" width="1.01" height="7.07"
+            transform="translate(-6.67 7.61) rotate(-45)" />
+    </symbol>
+    <!-- ARROW ICONS END -->
+</svg>  
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M13.82,20.03c0,1.12.05,2.22.18,3.1h-2.01l-.18-1.63h-.08c-.69,1.02-2.01,1.92-3.76,1.92-2.49,0-3.76-1.84-3.76-3.71,0-3.13,2.64-4.84,7.4-4.81v-.27c0-1.04-.28-2.99-2.8-2.97-1.17,0-2.36.35-3.23.96l-.51-1.58c1.02-.67,2.52-1.12,4.07-1.12,3.76,0,4.68,2.7,4.68,5.26v4.84ZM11.66,16.53c-2.44-.05-5.21.4-5.21,2.91,0,1.55.97,2.24,2.08,2.24,1.63,0,2.67-1.07,3.02-2.16.08-.27.1-.53.1-.75v-2.24Z" />
+  <path class="cls-1"
+    d="M17.11,5h2.44v7.28h-.75c.87-1.44,2.44-2.35,4.62-2.35,3.39,0,5.75,2.67,5.75,6.57,0,4.62-3.08,6.92-6.11,6.92-1.96,0-2.72-.72-3.76-2.4h-.3l.1,2.11h-2.1c.06-.88.11-2.19.11-3.34V5ZM19.38,17.94c0,.29.08.59.17.85.45,1.63,1.21,2.75,3,2.75,2.61,0,4.12-2,4.12-4.97,0-2.59-1.4-4.81-4.06-4.81-1.65,0-2.55,1.12-3.06,2.89-.08.29-.17.61-.17.99v2.3Z" />
+  <rect class="cls-1" x="1" y="23" width="2" height="4" />
+  <rect class="cls-1" x="29" y="23" width="2" height="4" />
+  <rect class="cls-1" x="1.67" y="25" width="29.33" height="2" />
+</svg>
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M10.41,14.93c0,.82.04,1.61.13,2.25h-1.47l-.13-1.18h-.06c-.5.74-1.47,1.4-2.76,1.4-1.83,0-2.76-1.34-2.76-2.7,0-2.27,1.94-3.52,5.43-3.5v-.19c0-.76-.2-2.18-2.05-2.16-.86,0-1.73.25-2.37.7l-.37-1.15c.75-.49,1.85-.82,2.98-.82,2.76,0,3.43,1.96,3.43,3.83v3.52ZM8.82,12.38c-1.79-.04-3.82.29-3.82,2.12,0,1.13.71,1.63,1.53,1.63,1.19,0,1.96-.78,2.22-1.57.06-.19.07-.39.07-.54v-1.63Z" />
+  <path class="cls-1"
+    d="M12.82,4h1.79v5.29h-.55c.64-1.05,1.79-1.71,3.39-1.71,2.49,0,4.21,1.94,4.21,4.78,0,3.36-2.26,5.03-4.48,5.03-1.44,0-2-.52-2.76-1.75h-.22l.08,1.54h-1.54c.04-.64.08-1.59.08-2.43V4ZM14.49,13.41c0,.21.06.43.12.62.33,1.19.89,2,2.2,2,1.91,0,3.02-1.46,3.02-3.61,0-1.88-1.03-3.5-2.98-3.5-1.21,0-1.87.82-2.24,2.1-.06.21-.12.45-.12.72v1.67Z" />
+  <rect class="cls-1" x="1" y="17" width="1.47" height="3" />
+  <rect class="cls-1" x="21.54" y="17" width="1.47" height="3" />
+  <rect class="cls-1" x="1.49" y="18.55" width="21.52" height="1.45" />
+</svg>
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1"
+      d="M6.9,10.2c0,.61.03,1.21.1,1.69h-1.15l-.1-.89h-.04c-.39.55-1.15,1.05-2.16,1.05-1.43,0-2.16-1.01-2.16-2.03,0-1.71,1.52-2.64,4.24-2.62v-.15c0-.57-.16-1.63-1.6-1.62-.67,0-1.35.19-1.85.52l-.29-.86c.58-.36,1.44-.61,2.33-.61,2.16,0,2.68,1.47,2.68,2.87v2.64ZM5.66,8.29c-1.4-.03-2.99.22-2.99,1.59,0,.85.55,1.22,1.19,1.22.93,0,1.53-.58,1.73-1.18.04-.15.06-.29.06-.41v-1.22Z" />
+    <path class="cls-1"
+      d="M8.73,2h1.27v3.97h-.39c.45-.79,1.27-1.28,2.4-1.28,1.76,0,2.99,1.46,2.99,3.58,0,2.52-1.6,3.77-3.18,3.77-1.02,0-1.42-.39-1.95-1.31h.13l-.23,1.15h-1.09c.03-.48.06-1.19.06-1.82V2ZM9.93,9.06c0,.16.01.32.06.47.23.89.64,1.5,1.58,1.5,1.35,0,2.14-1.09,2.14-2.71,0-1.41-.73-2.62-2.11-2.62-.86,0-1.33.61-1.59,1.57-.04.16-.07.33-.07.54v1.25Z" />
+  </g>
+  <rect class="cls-1" y="12" width="1" height="2" />
+  <rect class="cls-1" x="15" y="12.02" width="1" height="1.98" />
+  <rect class="cls-1" y="13" width="16" height="1" />
+</svg>
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="20.04" y="2" width="2" height="22" />
+  <rect class="cls-1" x="20.04" y="2" width="2" height="22"
+    transform="translate(-.9 24.42) rotate(-59.21)" />
+  <rect class="cls-1" x="10.04" y="12" width="22" height="2"
+    transform="translate(-3.69 13.25) rotate(-32.29)" />
+  <rect class="cls-1" x="2.04" y="22" width="8" height="8" />
+</svg>
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="14.46" y="2" width="1.38" height="15.14" />
+  <rect class="cls-1" x="14.46" y="2" width="1.38" height="15.14"
+    transform="translate(-.83 17.68) rotate(-59.21)" />
+  <rect class="cls-1" x="7.58" y="8.88" width="15.14" height="1.38"
+    transform="translate(-2.77 9.57) rotate(-32.29)" />
+  <rect class="cls-1" x="2.08" y="16.5" width="5.5" height="5.5" />
+</svg>
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="10" y="1" width="1" height="11" />
+  <rect class="cls-1" x="10" y="1" width="1" height="11"
+    transform="translate(-.46 12.19) rotate(-59.21)" />
+  <rect class="cls-1" x="5" y="6" width="11" height="1"
+    transform="translate(-1.85 6.61) rotate(-32.29)" />
+  <rect class="cls-1" x="1" y="11" width="4" height="4" />
+</svg>
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M13,24.99c0,.67-.03,1.49.05,2.01h-1.25l-.11-1.14h-.05c-.43.6-1.25,1.14-2.34,1.14-1.55,0-2.34-1.09-2.34-2.2,0-1.85,1.65-2.87,4.61-2.85v-.16c0-.62-.17-1.33-1.74-1.31-.73,0-1.47.3-2.01.66l-.79-1.19c.63-.4,2.05-.95,3.01-.95,2.34,0,2.98,1.6,2.98,3.12v2.87ZM11.59,23.14c-1.21-.03-3.03.19-3.03,1.38,0,.73.39,1.06,1.48,1.06.81,0,1.33-.51,1.51-1.02.04-.13.05-.25.05-.35v-1.06Z" />
+  <path class="cls-1"
+    d="M22.05,8.99c0,.67-.03,1.49.05,2.01h-1.25l-.11-1.14h-.05c-.43.6-1.25,1.14-2.34,1.14-1.55,0-2.34-1.09-2.34-2.2,0-1.85,1.65-2.87,4.61-2.85v-.16c0-.62-.17-1.33-1.74-1.31-.73,0-1.47.3-2.01.66l-.79-1.19c.63-.4,2.05-.95,3.01-.95,2.34,0,2.98,1.6,2.98,3.12v2.87ZM20.64,7.14c-1.21-.03-3.03.19-3.03,1.38,0,.73.39,1.06,1.48,1.06.81,0,1.33-.51,1.51-1.02.04-.13.05-.25.05-.35v-1.06Z" />
+  <path class="cls-1"
+    d="M23.06,1.07h1.83v4.33h.03c.43-.77,1.2-1.25,2.27-1.25,1.66,0,2.82,1.42,2.82,3.5,0,2.46-1.51,3.69-3,3.69-.96,0-1.73-.38-2.24-1.28h-.03l-.07,1.12h-1.66c.03-.47.06-1.17.06-1.78V1.07ZM24.85,8.26c0,.12.01.24.05.35.2.67.84,1.13,1.62,1.13,1.14,0,1.8-.82,1.8-2.03,0-1.06-.61-1.97-1.78-1.97-.72,0-1.41.46-1.63,1.18-.04.12-.06.25-.06.4v.94Z" />
+  <path class="cls-1"
+    d="M20.97,26.56c-.36.17-1.16.44-2.19.44-2.3,0-3.79-1.56-3.79-3.88s1.6-4.06,4.09-4.06c.82,0,1.54.2,1.92.41v1.65c-.34-.17-1.16-.46-1.92-.46-1.19,0-2.09.77-2.09,2.34,0,1.76,1.03,2.29,2.04,2.29.79,0,1.54-.16,1.94-.33v1.6Z" />
+  <path class="cls-1" d="M24,18v10H4v-10h20M26,16H2v14h24v-14h0Z" />
+  <polygon class="cls-1" points="9 12 9 14 28 14 28 28 30 28 30 12 9 12" />
+  <g>
+    <path class="cls-1"
+      d="M6,13h-2v-2.98c0-2.77,2.25-5.02,5.02-5.02h4.98v2h-4.98c-1.67,0-3.02,1.36-3.02,3.02v2.98Z" />
+    <polygon class="cls-1" points="5 15 2 11 8 11 5 15" />
+  </g>
+</svg>
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M9.25,19.01c0,.5-.02,1.12.04,1.51h-.94l-.08-.86h-.04c-.32.45-.94.86-1.76.86-1.16,0-1.76-.82-1.76-1.65,0-1.39,1.24-2.15,3.46-2.14v-.12c0-.46-.13-1-1.31-.98-.55,0-1.1.22-1.51.5l-.6-.89c.48-.3,1.53-.71,2.26-.71,1.76,0,2.23,1.2,2.23,2.34v2.15ZM8.19,17.63c-.91-.02-2.28.14-2.28,1.03,0,.55.29.8,1.11.8.61,0,1-.38,1.13-.77.03-.09.04-.19.04-.27v-.8Z" />
+  <path class="cls-1"
+    d="M16.04,7.01c0,.5-.02,1.12.04,1.51h-.94l-.08-.86h-.04c-.32.45-.94.86-1.76.86-1.16,0-1.76-.82-1.76-1.65,0-1.39,1.24-2.15,3.46-2.14v-.12c0-.46-.13-1-1.31-.98-.55,0-1.1.22-1.51.5l-.6-.89c.48-.3,1.53-.71,2.26-.71,1.76,0,2.23,1.2,2.23,2.34v2.15ZM14.98,5.63c-.91-.02-2.28.14-2.28,1.03,0,.55.29.8,1.11.8.61,0,1-.38,1.13-.77.03-.09.04-.19.04-.27v-.8Z" />
+  <path class="cls-1"
+    d="M16.79,1.07h1.37v3.24h.02c.32-.58.9-.94,1.7-.94,1.25,0,2.12,1.07,2.12,2.63,0,1.85-1.13,2.76-2.25,2.76-.72,0-1.3-.29-1.68-.96h-.02l-.05.84h-1.25c.02-.35.04-.88.04-1.33V1.07ZM18.14,6.46c0,.09,0,.18.04.26.15.5.63.84,1.22.84.86,0,1.35-.61,1.35-1.53,0-.8-.46-1.48-1.34-1.48-.54,0-1.06.34-1.22.89-.03.09-.05.19-.05.3v.7Z" />
+  <path class="cls-1"
+    d="M15.23,20.19c-.27.13-.87.33-1.64.33-1.72,0-2.84-1.17-2.84-2.91s1.2-3.04,3.07-3.04c.61,0,1.16.15,1.44.31v1.23c-.25-.13-.87-.34-1.44-.34-.89,0-1.57.58-1.57,1.76,0,1.32.77,1.72,1.53,1.72.59,0,1.16-.12,1.45-.25v1.2Z" />
+  <path class="cls-1" d="M17.5,13.77v7.5H2.5v-7.5h15M19,12.27H1v10.5h18v-10.5h0Z" />
+  <polygon class="cls-1"
+    points="6.25 9.27 6.25 10.77 20.5 10.77 20.5 21.27 22 21.27 22 9.27 6.25 9.27" />
+  <g>
+    <path class="cls-1"
+      d="M4,10.02h-1.5v-2.23c0-2.08,1.69-3.77,3.77-3.77h3.73v1.5h-3.73c-1.25,0-2.27,1.02-2.27,2.27v2.23Z" />
+    <polygon class="cls-1" points="3.25 11.52 1 8.52 5.5 8.52 3.25 11.52" />
+  </g>
+</svg>
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M6.5,13.49c0,.33-.01.74.02,1.01h-.63l-.06-.57h-.02c-.21.3-.63.57-1.17.57-.78,0-1.17-.55-1.17-1.1,0-.93.82-1.43,2.3-1.43v-.08c0-.31-.09-.66-.87-.66-.36,0-.74.15-1.01.33l-.4-.59c.32-.2,1.02-.48,1.51-.48,1.17,0,1.49.8,1.49,1.56v1.43ZM5.8,12.57c-.61-.01-1.52.09-1.52.69,0,.37.19.53.74.53.4,0,.66-.25.75-.51.02-.06.03-.13.03-.18v-.53Z" />
+  <path class="cls-1"
+    d="M11.02,4.49c0,.33-.01.74.02,1.01h-.63l-.06-.57h-.02c-.21.3-.63.57-1.17.57-.78,0-1.17-.55-1.17-1.1,0-.93.82-1.43,2.3-1.43v-.08c0-.31-.09-.66-.87-.66-.36,0-.74.15-1.01.33l-.4-.59c.32-.2,1.02-.48,1.51-.48,1.17,0,1.49.8,1.49,1.56v1.43ZM10.32,3.57c-.61-.01-1.52.09-1.52.69,0,.37.19.53.74.53.4,0,.66-.25.75-.51.02-.06.03-.13.03-.18v-.53Z" />
+  <path class="cls-1"
+    d="M11.53.54h.91v2.16h.01c.21-.38.6-.63,1.13-.63.83,0,1.41.71,1.41,1.75,0,1.23-.76,1.84-1.5,1.84-.48,0-.87-.19-1.12-.64h-.01l-.03.56h-.83c.01-.23.03-.58.03-.89V.54ZM12.43,4.13c0,.06,0,.12.02.17.1.33.42.56.81.56.57,0,.9-.41.9-1.02,0-.53-.31-.98-.89-.98-.36,0-.71.23-.82.59-.02.06-.03.13-.03.2v.47Z" />
+  <path class="cls-1"
+    d="M10.48,14.28c-.18.09-.58.22-1.09.22-1.15,0-1.89-.78-1.89-1.94s.8-2.03,2.04-2.03c.41,0,.77.1.96.2v.82c-.17-.09-.58-.23-.96-.23-.59,0-1.04.38-1.04,1.17,0,.88.51,1.15,1.02,1.15.39,0,.77-.08.97-.17v.8Z" />
+  <path class="cls-1" d="M12,10v5H2v-5h10M13,9H1v7h12v-7h0Z" />
+  <polygon class="cls-1" points="4.5 7 4.5 8 14 8 14 15 15 15 15 7 4.5 7" />
+  <g>
+    <path class="cls-1"
+      d="M3,7h-1v-1.49c0-1.38,1.13-2.51,2.51-2.51h2.49v1h-2.49c-.83,0-1.51.68-1.51,1.51v1.49Z" />
+    <polygon class="cls-1" points="2.5 8 1 6 4 6 2.5 8" />
+  </g>
+</svg>
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M20.06,2h2.09v4.78h.03c.49-.85,1.37-1.38,2.59-1.38,1.9,0,3.22,1.57,3.22,3.87,0,2.72-1.73,4.07-3.43,4.07-1.1,0-1.98-.42-2.56-1.41h-.03l-.08,1.24h-1.9c.03-.52.06-1.29.06-1.96V2ZM22.11,9.94c0,.13.01.27.06.39.22.74.95,1.24,1.85,1.24,1.3,0,2.06-.91,2.06-2.25,0-1.17-.7-2.17-2.03-2.17-.83,0-1.61.51-1.87,1.3-.04.13-.07.28-.07.45v1.04Z" />
+  <path class="cls-1"
+    d="M17.97,25.56c-.36.17-1.16.44-2.19.44-2.3,0-3.79-1.56-3.79-3.88s1.6-4.06,4.09-4.06c.82,0,1.54.2,1.92.41v1.65c-.34-.17-1.16-.46-1.92-.46-1.19,0-2.09.81-2.09,2.38,0,1.76,1.03,2.25,2.04,2.25.79,0,1.54-.16,1.94-.33v1.6Z" />
+  <path class="cls-1" d="M26,16v12H6v-12h20M28,14H4v16h24V14h0Z" />
+  <path class="cls-1"
+    d="M10,10h-2v-2.98c0-2.77,2.25-5.02,5.02-5.02h4.98v2h-4.98c-1.67,0-3.02,1.36-3.02,3.02v2.98Z" />
+  <polygon class="cls-1" points="9 12 6 8 12 8 9 12" />
+</svg>
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M15.62.88h1.64v3.75h.02c.38-.67,1.07-1.09,2.04-1.09,1.49,0,2.53,1.24,2.53,3.04,0,2.14-1.36,3.2-2.69,3.2-.86,0-1.56-.33-2.01-1.11h-.02l-.06.98h-1.49c.02-.41.05-1.01.05-1.54V.88ZM17.23,7.12c0,.1.01.21.04.3.18.58.75.98,1.46.98,1.03,0,1.62-.71,1.62-1.77,0-.92-.55-1.71-1.6-1.71-.65,0-1.27.4-1.47,1.03-.03.1-.06.22-.06.35v.82Z" />
+  <path class="cls-1"
+    d="M13.98,19.4c-.28.14-.91.35-1.72.35-1.8,0-2.98-1.22-2.98-3.05s1.26-3.19,3.21-3.19c.64,0,1.21.16,1.51.32v1.29c-.27-.14-.91-.36-1.51-.36-.93,0-1.64.64-1.64,1.87,0,1.38.81,1.77,1.6,1.77.62,0,1.21-.13,1.52-.26v1.26Z" />
+  <path class="cls-1" d="M20.29,11.88v9.43H4.57v-9.43h15.71M21.86,10.31H3v12.57h18.86v-12.57h0Z" />
+  <path class="cls-1"
+    d="M7.71,7.17h-1.57v-2.34c0-2.18,1.77-3.95,3.95-3.95h3.91v1.57h-3.91c-1.31,0-2.37,1.07-2.37,2.37v2.34Z" />
+  <polygon class="cls-1" points="6.93 8.74 4.57 5.6 9.29 5.6 6.93 8.74" />
+</svg>
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1 {
+      fill: currentColor;
+      }
+    </style>
+  </defs>
+  <path class="cls-1"
+    d="M10.03,1h1.04v2.39h.02c.24-.42.68-.69,1.3-.69.95,0,1.61.79,1.61,1.93,0,1.36-.86,2.04-1.71,2.04-.55,0-.99-.21-1.28-.71h-.02l-.04.62h-.95c.02-.26.03-.64.03-.98V1ZM11.06,4.97c0,.07,0,.13.03.19.11.37.48.62.93.62.65,0,1.03-.45,1.03-1.12,0-.59-.35-1.09-1.02-1.09-.41,0-.81.25-.93.65-.02.07-.04.14-.04.22v.52Z" />
+  <path class="cls-1"
+    d="M8.99,13.78c-.18.09-.58.22-1.09.22-1.15,0-1.89-.78-1.89-1.94s.8-2.03,2.04-2.03c.41,0,.77.1.96.2v.82c-.17-.09-.58-.23-.96-.23-.59,0-1.04.4-1.04,1.19,0,.88.51,1.13,1.02,1.13.39,0,.77-.08.97-.17v.8Z" />
+  <path class="cls-1" d="M13,9v6H3v-6h10M14,8H2v8h12V8h0Z" />
+  <path class="cls-1"
+    d="M5,5h-1v-1.49c0-1.38,1.13-2.51,2.51-2.51h2.49v1h-2.49c-.83,0-1.51.68-1.51,1.51v1.49Z" />
+  <polygon class="cls-1" points="4.5 6 3 4 6 4 4.5 6" />
+</svg>
@@ -5,29 +5,34 @@
  "description": "",
  "license": "Apache-2.0",
  "exports": {
-    ".": "./lib/index.js"
+    ".": "./lib/index.js",
+    "./*.css": "./src/*.css",
+    "./*": "./lib/*.js",
+    "./assets/icons/*.svg": "./assets/icons/*.svg"
  },
  "scripts": {
    "build": "tsc -b",
    "docs": "ladle serve",
-    "clean": "rimraf --glob dist"
+    "clean": "rimraf --glob lib"
  },
-  "packageManager": "yarn@4.6.0",
+  "packageManager": "yarn@4.9.2",
  "devDependencies": {
    "@dbeaver/tsconfig": "workspace:^",
    "@ladle/react": "^5",
-    "@tailwindcss/vite": "^4",
+    "@tailwindcss/vite": "4.0.7",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@wroud/vite-plugin-asset-resolver": "^0",
    "@wroud/vite-plugin-tsc": "^0.11.6",
    "rimraf": "^6",
-    "tailwindcss": "^4",
+    "tailwindcss": "4.0.7",
    "typescript": "^5",
-    "vite": "^6"
+    "vite": "^7",
+    "vite-plugin-svgr": "^4.3.0"
  },
  "dependencies": {
    "@ariakit/react": "^0",
+    "clsx": "^2",
    "react": "^19",
    "react-dom": "^19"
  }
@@ -0,0 +1,16 @@
+export default function template(files) {
+    const exportLines = files.map((file) => {
+        const { path } = file;
+
+        const fileName = path.split('/').pop();
+        const componentNameWithExt = fileName.replace(/\.tsx$/, '.js');
+        const componentName = fileName.replace(/\.tsx$/, '');
+
+        return `export { default as ${componentName} } from './${componentNameWithExt}';`;
+    });
+
+
+    const header = '/* This file is automatically generated by the build:icons script. Do not modify it manually.*/\n\n ';
+
+    return header + exportLines.join('\n');
+};
@@ -4,19 +4,8 @@

@layer base {
  .dbv-kit-button {
-    display: inline-flex;
-    text-align: center;
-    text-decoration: none;
-    cursor: pointer;
-    user-select: none;
-    position: relative;
-    justify-content: center;
-    align-items: center;
-    white-space: nowrap;
-
    height: var(--dbv-kit-btn-height);
    padding-inline: var(--dbv-kit-btn-padding-inline);
-    gap: var(--dbv-kit-btn-gap);

    background-color: var(--dbv-kit-btn-background);
    color: var(--dbv-kit-btn-foreground);
@@ -29,6 +18,8 @@
    font-size: var(--dbv-kit-btn-font-size);
    font-weight: var(--dbv-kit-btn-font-weight);

+    cursor: pointer;
+
    &:focus-visible,
    &[data-focus-visible] {
      outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-btn-outline-color);
@@ -37,18 +28,16 @@

    &:hover {
      @media (hover: hover) {
+        color: var(--dbv-kit-btn-foreground-hover);
        background-color: var(--dbv-kit-btn-background-hover);
      }
    }

    &:active,
    &[data-active] {
+      color: var(--dbv-kit-btn-foreground-active);
      background-color: var(--dbv-kit-btn-background-active);
    }
-
-    &:disabled {
-      opacity: var(--dbv-kit-control-disabled-opacity);
-    }
  }

  /* ---------------------------- */
@@ -94,72 +83,76 @@
  /* Variants */

  .dbv-kit-button--primary {
-    --dbv-kit-btn-background: var(--dbv-kit-btn-primary-background);
    --dbv-kit-btn-foreground: var(--dbv-kit-btn-primary-foreground);
+    --dbv-kit-btn-foreground-hover: var(--dbv-kit-btn-primary-foreground-hover);
+    --dbv-kit-btn-foreground-active: var(--dbv-kit-btn-primary-foreground-active);
+
+    --dbv-kit-btn-background: var(--dbv-kit-btn-primary-background);
    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-primary-background-hover);
    --dbv-kit-btn-background-active: var(--dbv-kit-btn-primary-background-active);

-    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-background-hover);
-    --dbv-kit-btn-loader-background: var(--dbv-kit-btn-loader-base-color);
+    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-primary-foreground);
+
+    &:disabled {
+      background-color: var(--dbv-kit-control-disabled-background);
+      color: var(--dbv-kit-control-disabled-foreground);
+    }
  }

  .dbv-kit-button--secondary {
-    --dbv-kit-btn-background: var(--dbv-kit-btn-secondary-background);
    --dbv-kit-btn-foreground: var(--dbv-kit-btn-secondary-foreground);
+    --dbv-kit-btn-foreground-hover: var(--dbv-kit-btn-secondary-foreground-hover);
+    --dbv-kit-btn-foreground-active: var(--dbv-kit-btn-secondary-foreground-active);
+
+    --dbv-kit-btn-background: var(--dbv-kit-btn-secondary-background);
    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-secondary-background-hover);
    --dbv-kit-btn-background-active: var(--dbv-kit-btn-secondary-background-active);
    --dbv-kit-btn-border-color: var(--dbv-kit-btn-secondary-border-color);

    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-secondary-foreground);
-    --dbv-kit-btn-loader-background: var(--dbv-kit-btn-secondary-background-active);
+
+    &:disabled {
+      color: var(--dbv-kit-control-disabled-foreground);
+      border-color: var(--dbv-kit-control-disabled-foreground);
+    }
  }

  .dbv-kit-button--danger {
-    --dbv-kit-btn-background: var(--dbv-kit-btn-danger-background);
    --dbv-kit-btn-foreground: var(--dbv-kit-btn-danger-foreground);
+    --dbv-kit-btn-foreground-hover: var(--dbv-kit-btn-danger-foreground);
+    --dbv-kit-btn-foreground-active: var(--dbv-kit-btn-danger-foreground-active);
+
+    --dbv-kit-btn-background: var(--dbv-kit-btn-danger-background);
    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-danger-background-hover);
    --dbv-kit-btn-background-active: var(--dbv-kit-btn-danger-background-active);
+    --dbv-kit-btn-border-color: var(--dbv-kit-btn-danger-border-color);

-    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-danger-background);
-    --dbv-kit-btn-loader-background: var(--dbv-kit-btn-loader-base-color);
+    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-danger-foreground);
    --dbv-kit-btn-outline-color: var(--dbv-kit-btn-danger-color-outline);
+
+    &:disabled {
+      background-color: var(--dbv-kit-control-disabled-background);
+      color: var(--dbv-kit-control-disabled-foreground);
+    }
  }

  /* ---------------------------- */
  /* Loader */

  .dbv-kit-button[data-loading='true'] {
-    opacity: 0.75;
-    color: color-mix(in oklch, var(--dbv-kit-btn-foreground) 25%, var(--dbv-kit-btn-loader-base-color));
-    background-color: color-mix(in oklch, var(--dbv-kit-btn-loader-base-color) 75%, var(--dbv-kit-btn-background));
+    background-color: var(--dbv-kit-btn-background-hover);

    &:hover,
    &:active,
    &[data-active] {
-      background-color: color-mix(in oklch, var(--dbv-kit-btn-loader-base-color) 85%, var(--dbv-kit-btn-background));
+      background-color: var(--dbv-kit-btn-background-active);
    }
  }

-  .dbv-kit-button__loader {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-
-    &::after {
-      --loader-width: calc(var(--dbv-kit-btn-font-size) * 0.2);
-      content: '';
-      border: var(--loader-width) solid var(--dbv-kit-btn-loader-background);
-      border-top: var(--loader-width) solid var(--dbv-kit-btn-loader-color);
-      border-radius: 50%;
-      opacity: 1;
-      width: calc(var(--dbv-kit-btn-font-size) * 1.25);
-      height: calc(var(--dbv-kit-btn-font-size) * 1.25);
-      animation: var(--dbv-kit-btn-loader-animation);
-    }
+  .dbv-kit-button .dbv-kit-spinner {
+    --dbv-kit-spinner-stroke-color: var(--dbv-kit-btn-loader-color);
+    --dbv-kit-spinner-height: calc(var(--dbv-kit-btn-height) * 0.6);
+    --dbv-kit-spinner-stroke-width: 3px;
  }

  /* ---------------------------- */
@@ -5,31 +5,21 @@
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */
-import { Button as AriaButton, type ButtonProps as AriaKitButtonProps } from '@ariakit/react';
-import './Button.css';
+import clsx from 'clsx';
 import type { ControlSize } from '../types/controls.js';
+import { componentProviderWrapper } from '../componentProviderWrapper.js';
+import { ButtonRoot, type ButtonRootProps } from './ButtonRoot.js';
+import './Button.css';

-export interface ButtonProps extends Omit<AriaKitButtonProps, 'clickOnEnter' | 'clickOnSpace'> {
+export interface ButtonProps extends ButtonRootProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: ControlSize;
-  loading?: boolean;
-  loader?: React.ReactNode;
 }

-export function Button({ className, variant = 'primary', size = 'medium', loading, loader, children, onClick, ...props }: ButtonProps) {
-  const classToApply = `dbv-kit-button dbv-kit-button--${variant} dbv-kit-button--${size}` + (className ? ` ${className}` : '');
+export function ButtonBase({ className, variant = 'primary', size = 'medium', ...props }: ButtonProps) {
+  const classToApply = clsx('dbv-kit-button', `dbv-kit-button--${variant}`, `dbv-kit-button--${size}`, className);

-  if (loading) {
-    props['aria-busy'] = true;
-    props['data-loading'] = true;
-  }
-
-  return (
-    <AriaButton onClick={loading ? () => null : onClick} className={classToApply} {...props}>
-      {loading && (loader ? loader : <span className="dbv-kit-button__loader" />)}
-      {children}
-    </AriaButton>
-  );
+  return <ButtonRoot className={classToApply} {...props} />;
 }
 export interface ButtonIconProps extends React.HTMLAttributes<HTMLSpanElement> {
  placement?: 'start' | 'end';
@@ -40,7 +30,10 @@ export interface ButtonIconProps extends React.HTMLAttributes<HTMLSpanElement> {
 *
 * @param props.placement This property is needed to adjust icon placement inside a button. The icon with placement="start" will cut the inline-start padding. placement="end" will affect the padding-inline-end accordingly. This property supports RTL and LTR, so you don't need to think about it.
 */
-Button.Icon = function ButtonIcon({ className, children, placement }: ButtonIconProps) {
-  const classToApply = `dbv-kit-button__icon` + (placement ? ` dbv-kit-button__icon--${placement}` : '') + (className ? ` ${className}` : '');
+export function ButtonBaseIcon({ className, children, placement }: ButtonIconProps) {
+  const classToApply = clsx('dbv-kit-button__icon', placement && `dbv-kit-button__icon--${placement}`, className);
  return <span className={classToApply}>{children}</span>;
-};
+}
+
+export const Button = componentProviderWrapper('Button', ButtonBase);
+export const ButtonIcon = componentProviderWrapper('ButtonIcon', ButtonBaseIcon);
@@ -0,0 +1,25 @@
+@layer base {
+  .dbv-kit-button__loader {
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dbv-kit-button__content {
+    display: flex;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    transition: opacity 0.2s ease-in-out;
+    gap: var(--dbv-kit-btn-gap);
+  }
+}
@@ -0,0 +1,23 @@
+import { Button as AriaButton, type ButtonProps as AriaKitButtonProps } from '@ariakit/react';
+import { Spinner } from '../Spinner/Spinner.js';
+import { clsx } from '../utils/clsx.js';
+import './ButtonRoot.css';
+
+export interface ButtonRootProps extends Omit<AriaKitButtonProps, 'clickOnEnter' | 'clickOnSpace'> {
+  loading?: boolean;
+  loader?: React.ReactNode;
+}
+
+export function ButtonRoot({ loading, loader, children, onClick, className, ...props }: ButtonRootProps) {
+  if (loading) {
+    props['aria-busy'] = true;
+    props['data-loading'] = true;
+  }
+
+  return (
+    <AriaButton onClick={loading ? () => null : onClick} className={clsx(className, 'tw:relative')} {...props}>
+      <div className={clsx('dbv-kit-button__content', loading && 'tw:opacity-0')}>{children}</div>
+      {loading && <div className="dbv-kit-button__loader">{loader ? loader : <Spinner />}</div>}
+    </AriaButton>
+  );
+}
@@ -2,14 +2,18 @@
  :root {
    --dbv-kit-btn-height: var(--dbv-kit-control-height-medium);
    --dbv-kit-btn-padding-inline: calc(var(--tw-spacing) * 2.5);
-    --dbv-kit-btn-gap: calc(var(--dbv-kit-btn-padding-inline) / 4);
+    --dbv-kit-btn-gap: calc(var(--dbv-kit-btn-padding-inline) / 2);
+
    --dbv-kit-btn-outline-offset: var(--dbv-kit-control-outline-offset);
+    --dbv-kit-btn-outline-color: var(--dbv-kit-control-outline-color);

    --dbv-kit-btn-foreground: var(--tw-color-white);
+    --dbv-kit-btn-foreground-hover: var(--tw-color-white);
+    --dbv-kit-btn-foreground-active: var(--tw-color-white);
+
    --dbv-kit-btn-background: var(--dbv-kit-color-primary-600);
    --dbv-kit-btn-background-hover: var(--dbv-kit-color-primary-700);
    --dbv-kit-btn-background-active: var(--dbv-kit-color-primary-800);
-    --dbv-kit-btn-outline-color: var(--dbv-kit-color-outline);

    --dbv-kit-btn-border-width: var(--dbv-kit-control-border-width);
    --dbv-kit-btn-border-color: transparent;
@@ -19,7 +23,7 @@
    --dbv-kit-btn-font-weight: var(--tw-font-weight-normal);
    --dbv-kit-btn-font-size: calc(var(--dbv-kit-font-size-base) * 0.875);

-    --dbv-kit-btn-loader-base-color: var(--tw-color-white);
-    --dbv-kit-btn-loader-animation: var(--tw-animate-spin);
+    --dbv-kit-btn-loader-base-color: var(--dbv-kit-btn-foreground);
+    --dbv-kit-btn-loader-height: calc(var(--dbv-kit-btn-height) * 0.6);
  }
 }
@@ -2,22 +2,30 @@
  :root {
    /* Primary Button */
    --dbv-kit-btn-primary-foreground: var(--tw-color-white);
+    --dbv-kit-btn-primary-foreground-hover: var(--tw-color-white);
+    --dbv-kit-btn-primary-foreground-active: var(--tw-color-white);
    --dbv-kit-btn-primary-background: var(--dbv-kit-color-primary-600);
    --dbv-kit-btn-primary-background-hover: var(--dbv-kit-color-primary-700);
    --dbv-kit-btn-primary-background-active: var(--dbv-kit-color-primary-800);

    /* Secondary Button */
    --dbv-kit-btn-secondary-foreground: var(--dbv-kit-color-primary-600);
+    --dbv-kit-btn-secondary-foreground-hover: var(--dbv-kit-color-primary-600);
+    --dbv-kit-btn-secondary-foreground-active: var(--dbv-kit-color-primary-600);
    --dbv-kit-btn-secondary-background: transparent;
    --dbv-kit-btn-secondary-background-hover: var(--dbv-kit-color-primary-50);
    --dbv-kit-btn-secondary-background-active: var(--dbv-kit-color-primary-100);
    --dbv-kit-btn-secondary-border-color: var(--dbv-kit-color-primary-600);
+    --dbv-kit-btn-secondary-border-color-hover: var(--dbv-kit-color-primary-600);

    /* Danger Button */
    --dbv-kit-btn-danger-foreground: var(--tw-color-white);
+    --dbv-kit-btn-danger-foreground-hover: var(--tw-color-white);
+    --dbv-kit-btn-danger-foreground-active: var(--tw-color-white);
    --dbv-kit-btn-danger-background: var(--tw-color-red-600);
    --dbv-kit-btn-danger-background-hover: var(--tw-color-red-700);
    --dbv-kit-btn-danger-background-active: var(--tw-color-red-800);
+    --dbv-kit-btn-danger-border-color: transparent;
    --dbv-kit-btn-danger-color-outline: var(--tw-color-red-300);
  }
 }
@@ -11,13 +11,12 @@
    line-height: var(--dbv-kit-checkbox-height);
    font-size: var(--dbv-kit-checkbox-font-size);
    color: var(--dbv-kit-checkbox-foreground);
-    outline: var(--dbv-kit-color-outline);
+    outline: var(--dbv-kit-control-outline-color);

    &:hover {
      cursor: pointer;

      .dbv-kit-checkbox__check {
-        border-color: var(--dbv-kit-checkbox-border-color-checked);
        box-shadow: 0 0 0 2px var(--dbv-kit-checkbox-hover-shadow-color);
      }
    }
@@ -33,11 +32,12 @@
  }

  .dbv-kit-checkbox__check {
+    --check-size: round(calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size)), 2px);
    margin-top: calc(var(--dbv-kit-checkbox-height) * (calc(1 - var(--dbv-kit-checkbox-check-size)) / 2));
-    height: calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size));
-    line-height: calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size));
-    width: calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size));
-    min-width: calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size));
+    height: var(--check-size);
+    line-height: var(--check-size);
+    width: var(--check-size);
+    min-width: var(--check-size);
    border-radius: var(--dbv-kit-checkbox-border-radius);
    background-color: var(--dbv-kit-checkbox-background);
    border-color: var(--dbv-kit-checkbox-border-color);
@@ -46,7 +46,7 @@
    color: var(--dbv-kit-checkbox-icon-color);
    outline-offset: var(--dbv-kit-control-outline-offset);
    outline-width: var(--dbv-kit-control-outline-width);
-    outline-color: var(--dbv-kit-color-outline);
+    outline-color: var(--dbv-kit-control-outline-color);
    transition-property: stroke-dashoffset;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
@@ -57,10 +57,6 @@
      outline-style: solid;
    }

-    &:hover {
-      border-color: var(--dbv-kit-checkbox-border-color-checked);
-    }
-
    &[data-checked='true'],
    &[data-indeterminate='true'] {
      background-color: var(--dbv-kit-checkbox-background-checked);
@@ -8,8 +8,10 @@

 import { Checkbox as AriaCheckbox, VisuallyHidden, type CheckboxProps as AriaKitCheckboxProps } from '@ariakit/react';
 import { useState } from 'react';
+import clsx from 'clsx';
 import './Checkbox.css';
 import type { ControlSize } from '../types/controls.js';
+import { componentProviderWrapper } from '../componentProviderWrapper.js';

 export interface CheckboxProps extends Omit<AriaKitCheckboxProps, 'render' | 'size'> {
  size?: ControlSize;
@@ -18,14 +20,14 @@ export interface CheckboxProps extends Omit<AriaKitCheckboxProps, 'render' | 'si
  indeterminateIcon?: React.ReactNode;
 }

-export function Checkbox({ children, className, icon, indeterminate, indeterminateIcon, size = 'medium', ...props }: CheckboxProps) {
+export function CheckboxBase({ children, className, icon, indeterminate, indeterminateIcon, size = 'medium', ...props }: CheckboxProps) {
  const [innerChecked, setInnerChecked] = useState(props.defaultChecked ?? false);
  const checked = props.checked ?? innerChecked;

  const [focusVisible, setFocusVisible] = useState(false);
  return (
    <label
-      className={`dbv-kit-checkbox dbv-kit-checkbox--${size}` + (className ? ` ${className}` : '')}
+      className={clsx('dbv-kit-checkbox', `dbv-kit-checkbox--${size}`, className)}
      data-disabled={props.disabled || undefined}
      data-checked={checked}
      data-focus-visible={focusVisible || undefined}
@@ -52,8 +54,8 @@ export function Checkbox({ children, className, icon, indeterminate, indetermina
      >
        {checked &&
          (icon ?? (
-            <svg fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 16 16">
-              <polyline points="3,7 7,11 13,4" />
+            <svg stroke="currentColor" strokeWidth="2" viewBox="0 0 16 16">
+              <polyline fill="none" points="3,7 7,11 13,4" />
            </svg>
          ))}
        {indeterminate &&
@@ -69,3 +71,5 @@ export function Checkbox({ children, className, icon, indeterminate, indetermina
    </label>
  );
 }
+
+export const Checkbox = componentProviderWrapper('Checkbox', CheckboxBase);
@@ -3,22 +3,21 @@
    /* Checkbox sizes */
    --dbv-kit-checkbox-height: var(--dbv-kit-control-height-medium);
    --dbv-kit-checkbox-gap: calc(var(--tw-spacing) * 1.25);
-    --dbv-kit-checkbox-check-size: 0.75;
+    --dbv-kit-checkbox-check-size: 0.5625;

    /* Checkbox colors */
    --dbv-kit-checkbox-foreground: var(--tw-color-black);
    --dbv-kit-checkbox-background: transparent;
    --dbv-kit-checkbox-background-checked: var(--dbv-kit-color-primary-600);
-    --dbv-kit-checkbox-background-active: var(--dbv-kit-color-primary-800);

-    --dbv-kit-checkbox-hover-shadow-color: var(--dbv-kit-color-primary-100);
+    --dbv-kit-checkbox-hover-shadow-color: var(--dbv-kit-color-primary-200);
    --dbv-kit-checkbox-icon-color: var(--tw-color-white);

    /* Checkbox border */
-    --dbv-kit-checkbox-border-width: var(--dbv-kit-control-border-width);
+    --dbv-kit-checkbox-border-width: calc(var(--dbv-kit-control-border-width) * 2);
    --dbv-kit-checkbox-border-radius: var(--dbv-kit-control-border-radius);
    --dbv-kit-checkbox-border-style: solid;
-    --dbv-kit-checkbox-border-color: var(--tw-color-gray-300);
+    --dbv-kit-checkbox-border-color: var(--dbv-kit-color-control-inactive);
    --dbv-kit-checkbox-border-color-checked: var(--dbv-kit-color-primary-600);

    /* Checkbox label font */
@@ -2,22 +2,22 @@
  :root {
    /* Small checkbox */
    --dbv-kit-checkbox-small-font-size: calc(var(--dbv-kit-checkbox-font-size) * 0.875);
-    --dbv-kit-checkbox-small-height: calc(var(--dbv-kit-control-height-small) * 0.875);
+    --dbv-kit-checkbox-small-height: var(--dbv-kit-control-height-small);
    --dbv-kit-checkbox-small-gap: calc(var(--dbv-kit-checkbox-gap) * 0.5);

    /* Medium checkbox */
    --dbv-kit-checkbox-medium-font-size: var(--dbv-kit-checkbox-font-size);
-    --dbv-kit-checkbox-medium-height: calc(var(--dbv-kit-control-height-medium) * 0.75);
+    --dbv-kit-checkbox-medium-height: var(--dbv-kit-control-height-medium);
    --dbv-kit-checkbox-medium-gap: var(--dbv-kit-checkbox-gap);

    /* Large checkbox */
    --dbv-kit-checkbox-large-font-size: calc(var(--dbv-kit-checkbox-font-size) * 1.125);
-    --dbv-kit-checkbox-large-height: calc(var(--dbv-kit-control-height-large) * 0.75);
+    --dbv-kit-checkbox-large-height: var(--dbv-kit-control-height-large);
    --dbv-kit-checkbox-large-gap: calc(var(--dbv-kit-checkbox-gap) * 1.25);

    /* Extra large checkbox */
    --dbv-kit-checkbox-xlarge-font-size: calc(var(--dbv-kit-checkbox-font-size) * 1.25);
-    --dbv-kit-checkbox-xlarge-height: calc(var(--dbv-kit-control-height-xlarge) * 0.75);
+    --dbv-kit-checkbox-xlarge-height: var(--dbv-kit-control-height-xlarge);
    --dbv-kit-checkbox-xlarge-gap: calc(var(--dbv-kit-checkbox-gap) * 1.5);
  }
 }
@@ -0,0 +1,22 @@
+import { createContext } from 'react';
+import type { ButtonBase, ButtonBaseIcon } from './Button/Button.js';
+import type { IconButtonBase } from './IconButton/IconButton.js';
+import type { CheckboxBase } from './Checkbox/Checkbox.js';
+import type { Radio } from './Radio/Radio.js';
+import type { InputBase } from './Input/Input.js';
+import type { RadioGroup } from './Radio/RadioGroup.js';
+import type { Select } from './Select/Select.js';
+import type { SelectField } from './Select/SelectField.js';
+
+export interface IComponentProvider {
+  Button?: typeof ButtonBase;
+  ButtonIcon?: typeof ButtonBaseIcon;
+  IconButton?: typeof IconButtonBase;
+  Input?: typeof InputBase;
+  Checkbox?: typeof CheckboxBase;
+  Radio?: typeof Radio;
+  RadioGroup?: typeof RadioGroup;
+  Select?: typeof Select;
+  SelectField?: typeof SelectField;
+}
+export const ComponentProvider = createContext<IComponentProvider>({});
@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+
+type IconNames =
+  | 'replace'
+  | 'replace-all'
+  | 'match-word'
+  | 'case'
+  | 'regex'
+  | 'sort-asc'
+  | 'sort-desc'
+  | 'cross'
+  | 'sort-unknown'
+  | 'arrow-up'
+  | 'arrow-down';
+
+export interface IconProps {
+  name: IconNames;
+  className?: string;
+  size?: 'small' | 'medium' | 'large';
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function Icon({ name, className, size = 'small', color, style }: IconProps) {
+  const sizeAffix = size === 'small' ? '_sm' : size === 'large' ? '' : '_m';
+  const w = size === 'small' ? 16 : size === 'large' ? 32 : 24;
+  return (
+    <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`} className={clsx('dbv-kit-icon', className)} style={{ color, ...style }}>
+      <use href={`#icon-${name}${sizeAffix}`} />
+    </svg>
+  );
+}
@@ -0,0 +1,110 @@
+@import './_base.css';
+@import './_sizes.css';
+@import './_variants.css';
+
+@layer base {
+  .dbv-kit-icon-button {
+    min-width: var(--dbv-kit-icon-btn-size);
+    width: var(--dbv-kit-icon-btn-size);
+    height: var(--dbv-kit-icon-btn-size);
+    font-size: calc(var(--dbv-kit-icon-btn-size) * 0.75);
+
+    border-radius: var(--dbv-kit-icon-btn-border-radius);
+    border-color: var(--dbv-kit-icon-btn-border-color);
+    border-width: var(--dbv-kit-icon-btn-border-width);
+    border-style: var(--dbv-kit-icon-btn-border-style);
+
+    color: var(--dbv-kit-icon-btn-foreground);
+    background-color: var(--dbv-kit-icon-btn-background);
+
+    cursor: pointer;
+
+    &:focus-visible,
+    &[data-focus-visible] {
+      outline: var(--dbv-kit-icon-btn-outline-width) solid var(--dbv-kit-icon-btn-outline-color);
+      outline-offset: var(--dbv-kit-icon-btn-outline-offset);
+    }
+
+    &:hover {
+      @media (hover: hover) {
+        color: var(--dbv-kit-icon-btn-foreground-hover);
+        background-color: var(--dbv-kit-icon-btn-background-hover);
+      }
+    }
+
+    &:active,
+    &[data-active] {
+      color: var(--dbv-kit-icon-btn-foreground-active);
+      background-color: var(--dbv-kit-icon-btn-background-active);
+    }
+
+    &:disabled {
+      opacity: var(--dbv-kit-control-disabled-opacity);
+    }
+
+    &[data-loading='true'] {
+      background-color: var(--dbv-kit-icon-btn-background);
+
+      &:hover,
+      &:active,
+      &[data-active] {
+        background-color: var(--dbv-kit-icon-btn-background-active);
+      }
+    }
+
+    .dbv-kit-spinner {
+      --dbv-kit-spinner-stroke-color: var(--dbv-kit-icon-btn-loader-color);
+      --dbv-kit-spinner-height: calc(var(--dbv-kit-icon-btn-size) * 0.8);
+      --dbv-kit-spinner-stroke-width: 3px;
+    }
+  }
+
+  /* Size variants */
+  .dbv-kit-icon-button--small {
+    --dbv-kit-icon-btn-size: var(--dbv-kit-icon-btn-small-size);
+  }
+
+  .dbv-kit-icon-button--medium {
+    --dbv-kit-icon-btn-size: var(--dbv-kit-icon-btn-medium-size);
+  }
+
+  .dbv-kit-icon-button--large {
+    --dbv-kit-icon-btn-size: var(--dbv-kit-icon-btn-large-size);
+  }
+
+  .dbv-kit-icon-button--xlarge {
+    --dbv-kit-icon-btn-size: var(--dbv-kit-icon-btn-xlarge-size);
+  }
+
+  /* Variant styles */
+  .dbv-kit-icon-button--primary {
+    --dbv-kit-icon-btn-foreground: var(--dbv-kit-icon-btn-primary-foreground);
+    --dbv-kit-icon-btn-foreground-hover: var(--dbv-kit-icon-btn-primary-foreground-hover);
+    --dbv-kit-icon-btn-foreground-active: var(--dbv-kit-icon-btn-primary-foreground-active);
+    --dbv-kit-icon-btn-background: var(--dbv-kit-icon-btn-primary-background);
+    --dbv-kit-icon-btn-background-hover: var(--dbv-kit-icon-btn-primary-background-hover);
+    --dbv-kit-icon-btn-background-active: var(--dbv-kit-icon-btn-primary-background-active);
+    --dbv-kit-icon-btn-loader-color: var(--dbv-kit-icon-btn-primary-foreground);
+  }
+
+  .dbv-kit-icon-button--secondary {
+    --dbv-kit-icon-btn-foreground: var(--dbv-kit-icon-btn-secondary-foreground);
+    --dbv-kit-icon-btn-foreground-hover: var(--dbv-kit-icon-btn-secondary-foreground-hover);
+    --dbv-kit-icon-btn-foreground-active: var(--dbv-kit-icon-btn-secondary-foreground-active);
+    --dbv-kit-icon-btn-background: var(--dbv-kit-icon-btn-secondary-background);
+    --dbv-kit-icon-btn-background-hover: var(--dbv-kit-icon-btn-secondary-background-hover);
+    --dbv-kit-icon-btn-background-active: var(--dbv-kit-icon-btn-secondary-background-active);
+    --dbv-kit-icon-btn-border-color: var(--dbv-kit-icon-btn-secondary-border-color);
+    --dbv-kit-icon-btn-loader-color: var(--dbv-kit-icon-btn-secondary-loader-color);
+  }
+
+  .dbv-kit-icon-button--danger {
+    --dbv-kit-icon-btn-foreground: var(--dbv-kit-icon-btn-danger-foreground);
+    --dbv-kit-icon-btn-foreground-hover: var(--dbv-kit-icon-btn-danger-foreground-hover);
+    --dbv-kit-icon-btn-foreground-active: var(--dbv-kit-icon-btn-danger-foreground-active);
+    --dbv-kit-icon-btn-background: var(--dbv-kit-icon-btn-danger-background);
+    --dbv-kit-icon-btn-background-hover: var(--dbv-kit-icon-btn-danger-background-hover);
+    --dbv-kit-icon-btn-background-active: var(--dbv-kit-icon-btn-danger-background-active);
+    --dbv-kit-icon-btn-loader-color: var(--dbv-kit-icon-btn-danger-loader-color);
+  }
+}
@@ -0,0 +1,32 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { clsx } from 'clsx';
+
+import { componentProviderWrapper } from '../componentProviderWrapper.js';
+import { ButtonRoot, type ButtonRootProps } from '../Button/ButtonRoot.js';
+import type { ControlSize } from '../types/controls.js';
+
+import './IconButton.css';
+
+export interface IconButtonProps extends ButtonRootProps {
+  'aria-label': string;
+  variant?: 'primary' | 'secondary' | 'danger';
+  size?: ControlSize;
+}
+
+export function IconButtonBase({ className, variant = 'primary', size = 'medium', children, ...props }: IconButtonProps) {
+  const classToApply = clsx('dbv-kit-icon-button', `dbv-kit-icon-button--${variant}`, `dbv-kit-icon-button--${size}`, className);
+
+  return (
+    <ButtonRoot className={classToApply} {...props}>
+      {children}
+    </ButtonRoot>
+  );
+}
+
+export const IconButton = componentProviderWrapper('IconButton', IconButtonBase);
@@ -0,0 +1,30 @@
+@layer base {
+  :root {
+    /* Icon Button border variables */
+    --dbv-kit-icon-btn-border-radius: var(--dbv-kit-btn-border-radius);
+    --dbv-kit-icon-btn-border-width: var(--dbv-kit-btn-border-width);
+    --dbv-kit-icon-btn-border-style: var(--dbv-kit-btn-border-style);
+    --dbv-kit-icon-btn-border-color: var(--dbv-kit-btn-border-color);
+
+    /* Icon Button outline variables */
+    --dbv-kit-icon-btn-outline-width: var(--dbv-kit-control-outline-width);
+    --dbv-kit-icon-btn-outline-style: var(--dbv-kit-control-outline-style);
+    --dbv-kit-icon-btn-outline-color: var(--dbv-kit-control-outline-color);
+    --dbv-kit-icon-btn-outline-offset: var(--dbv-kit-control-outline-offset);
+
+    /* Default size */
+    --dbv-kit-icon-btn-size: var(--dbv-kit-control-height-medium);
+
+    /* Default colors */
+    --dbv-kit-icon-btn-foreground: var(--tw-color-gray-600);
+    --dbv-kit-icon-btn-foreground-hover: var(--tw-color-gray-600);
+    --dbv-kit-icon-btn-foreground-active: var(--tw-color-gray-700);
+    --dbv-kit-icon-btn-background: transparent;
+    --dbv-kit-icon-btn-background-hover: var(--tw-color-gray-100);
+    --dbv-kit-icon-btn-background-active: var(--tw-color-gray-200);
+
+    /* Loader color */
+    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-foreground-hover);
+    --dbv-kit-btn-loader-base-color: transparent;
+  }
+}
@@ -0,0 +1,8 @@
+@layer base {
+  :root {
+    --dbv-kit-icon-btn-small-size: var(--dbv-kit-control-height-small);
+    --dbv-kit-icon-btn-medium-size: var(--dbv-kit-control-height-medium);
+    --dbv-kit-icon-btn-large-size: var(--dbv-kit-control-height-large);
+    --dbv-kit-icon-btn-xlarge-size: var(--dbv-kit-control-height-xlarge);
+  }
+}
--- a/Show More
+++ b/Show More