diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
new file mode 100644
index 000000000..9f5ddbee4
--- /dev/null
+++ b/.claude/CLAUDE.md
@@ -0,0 +1,132 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+CxJS is a feature-rich JavaScript framework for building complex web front-ends, such as BI tools, dashboards and admin apps. This is a monorepo using yarn workspaces that contains the main cx package, documentation, gallery, testing environments, and various themes.
+
+## Development Commands
+
+### Build System
+- `yarn build` or `npm run build` - Builds the main CxJS library using custom build tools
+- `node packages/cx/build/index.js` - Direct build command for the cx package
+
+### Testing
+- `yarn test` or `npm test` - Runs tests using Mocha with custom configuration
+- Tests are configured in `test/mocha.config.js`
+
+### Development Servers
+- `yarn start` or `npm start` - Runs documentation site development server
+- `yarn docs` - Alternative command for documentation
+- `yarn gallery` - Runs the gallery application showcasing widgets and themes
+- `yarn litmus` - Runs the litmus testing environment for bug reproduction
+- `yarn fiddle` - Runs the online code editor/playground
+
+### TypeScript Examples
+- `cd ts-minimal && yarn start` - Runs TypeScript minimal example development server
+- `cd ts-minimal && yarn build` - Builds TypeScript minimal example for production
+
+### Theme Building
+- `npm run build:theme:core` - Builds core theme
+- `npm run build:theme:dark` - Builds dark theme
+- `npm run build:theme:frost` - Builds frost theme
+- `npm run build:theme:material` - Builds material theme
+
+## Architecture
+
+### Monorepo Structure
+The project uses yarn workspaces with these main areas:
+- `packages/cx/` - Core framework source code
+- `docs/` - Documentation site and content
+- `gallery/` - Widget gallery and theme showcase
+- `litmus/` - Bug reproduction and testing environment
+- `fiddle/` - Online code editor
+- `ts-minimal/` - TypeScript minimal example
+- `themes/` - Various UI themes
+
+### Core Package Structure (packages/cx/)
+- `src/util/` - Utility functions and helpers
+- `src/data/` - Data binding, stores, and state management
+- `src/ui/` - Core UI framework and widgets
+- `src/widgets/` - Form controls, grids, overlays
+- `src/charts/` - Charting components
+- `src/svg/` - SVG drawing utilities
+- `src/hooks/` - React-like hooks for functional components
+
+### Build System
+- Custom build tools located in `cx-build-tools` package
+- Uses Rollup for JavaScript bundling
+- SCSS compilation for stylesheets
+- Modular builds for different parts (util, data, ui, widgets, charts, svg, hooks)
+
+## TypeScript Configuration
+
+### JSX Configuration
+- The project uses custom JSX configuration with `jsxImportSource: "cx"`
+- For newer TypeScript projects, use `"jsx": "react-jsx"` and `"jsxImportSource": "cx"`
+- For legacy projects, use `"jsxFactory": "cx"`
+
+### Path Mapping
+Configure TypeScript paths for development:
+```json
+{
+  "paths": {
+    "cx": ["../packages/cx/src"],
+    "cx-react": ["../packages/cx-react"]
+  }
+}
+```
+
+## Key Framework Concepts
+
+### Data Binding
+- Uses two-way data binding with store-based state management
+- Accessor chains for deep property access (e.g., `{bind: "user.profile.name"}`)
+- Controllers for computed values and business logic
+
+### Widget System
+- All UI components inherit from Widget base class
+- Supports both declarative configuration and functional components
+- Rich set of form controls, grids, charts, and layout components
+
+### Theming
+- SCSS-based theming system with variables and mixins
+- Multiple ready-to-use themes available as separate packages
+- Theme packages follow pattern: `cx-theme-{name}`
+
+## Testing Strategy
+
+### Test Environments
+- `litmus/` - Manual testing environment for bug reproduction and feature development
+- Organized by bugs, features, and performance tests
+- Examples in `litmus/bugs/`, `litmus/features/`, `litmus/performance/`
+
+### Running Specific Tests
+- Tests are located in various subdirectories
+- Use Mocha test runner with Babel transpilation
+- Configuration in `test/mocha.config.js`
+
+## Development Workflow
+
+### Adding New Features
+1. Implement in appropriate `packages/cx/src/` subdirectory
+2. Add TypeScript definitions (.d.ts files)
+3. Create examples in `litmus/features/`
+4. Add documentation in `docs/content/`
+5. Update gallery examples if relevant
+
+### Working with Themes
+- Theme source files are in individual theme packages
+- Use webpack configurations for building theme assets
+- Test themes using gallery application
+
+### Package Management
+- Use yarn for consistency with workspace configuration
+- Install dependencies at root level for shared packages
+- Individual packages have their own package.json for specific dependencies
+
+## Claude Code Notes
+
+### File Paths
+- Always use relative paths (e.g., `gallery/tsconfig.json`) instead of absolute paths (e.g., `D:/Code/CxJS/cxjs/gallery/tsconfig.json`) when reading and editing files to avoid "File has been unexpectedly modified" errors on Windows.
\ No newline at end of file
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 000000000..529f56d1b
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,36 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(yarn build)",
+      "Bash(for f in packages/cx/src/util/date/*.ts)",
+      "Bash(do [ ! -f \"$f%.ts.d.ts\" ])",
+      "Bash(echo:*)",
+      "Bash(done)",
+      "Bash(find:*)",
+      "Bash(head:*)",
+      "Bash(npx tsc:*)",
+      "Bash(cut:*)",
+      "WebFetch(domain:github.com)",
+      "Bash(curl -s https://raw.githubusercontent.com/codaxy/cxjs/master/packages/cx/src/data/View.d.ts)",
+      "Bash(yarn build2:*)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "Bash(cat package.json)",
+      "Bash(curl:*)",
+      "Bash(yarn check-types:*)",
+      "Bash(yarn test)",
+      "Bash(claude mcp list:*)",
+      "mcp__playwright__browser_navigate",
+      "mcp__playwright__browser_tabs",
+      "mcp__playwright__browser_console_messages",
+      "mcp__playwright__browser_network_requests",
+      "mcp__playwright__browser_snapshot",
+      "mcp__playwright__browser_wait_for",
+      "mcp__playwright__browser_run_code",
+      "mcp__playwright__browser_click",
+      "mcp__playwright__browser_take_screenshot",
+      "Bash(yarn compile:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 000000000..9d74ed1c5
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,29 @@
+name: Tests
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build cx package
+        run: yarn build
+
+      - name: Run tests
+        run: yarn test
diff --git a/.gitignore b/.gitignore
index 52130c8ae..5f6e16cdf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,5 +11,7 @@ node_modules
 *.hot-update.js
 *.log
 dist
+build
 
-Thumbs.db
\ No newline at end of file
+Thumbs.db
+.playwright-mcp
\ No newline at end of file
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 644d4bfc6..3d16fca8f 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -10,7 +10,8 @@
          "request": "launch",
          "name": "Debug Tests",
          "skipFiles": ["<node_internals>/**"],
-         "runtimeArgs": ["test", "--inspect"]
+         "runtimeArgs": ["test", "--inspect"],
+         "cwd": "${workspaceFolder}/packages/cx"
       },
       {
          "type": "node",
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 88f2f5255..7e2a0fe4e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,39 @@
 {
-   "cSpell.words": ["flexbox", "hscroll", "immer", "lookupfield", "resizer", "trello"]
+   "cSpell.words": ["flexbox", "hscroll", "immer", "lookupfield", "resizer", "trello"],
+   "explorer.autoRevealExclude": {
+      "**/node_modules": false
+   },
+   "javascript.preferences.importModuleSpecifier": "relative",
+   "files.watcherExclude": {
+      "**/node_modules": true,
+      "**/dist": true,
+      "**/build": true,
+      "**/.git/objects/**": true,
+      "**/.git/subtree-cache/**": true
+   },
+   "search.exclude": {
+      "**/node_modules": true,
+      "**/dist": true,
+      "**/build": true
+   },
+   "workbench.colorCustomizations": {
+      "activityBar.activeBackground": "#1c95fe",
+      "activityBar.background": "#1c95fe",
+      "activityBar.foreground": "#e7e7e7",
+      "activityBar.inactiveForeground": "#e7e7e799",
+      "activityBarBadge.background": "#be0166",
+      "activityBarBadge.foreground": "#e7e7e7",
+      "commandCenter.border": "#e7e7e799",
+      "sash.hoverBorder": "#1c95fe",
+      "statusBar.background": "#017ce6",
+      "statusBar.foreground": "#e7e7e7",
+      "statusBarItem.hoverBackground": "#1c95fe",
+      "statusBarItem.remoteBackground": "#017ce6",
+      "statusBarItem.remoteForeground": "#e7e7e7",
+      "titleBar.activeBackground": "#017ce6",
+      "titleBar.activeForeground": "#e7e7e7",
+      "titleBar.inactiveBackground": "#017ce699",
+      "titleBar.inactiveForeground": "#e7e7e799"
+   },
+   "peacock.color": "#017ce6"
 }
diff --git a/MIGRATION.md b/MIGRATION.md
new file mode 100644
index 000000000..80332fbe8
--- /dev/null
+++ b/MIGRATION.md
@@ -0,0 +1,542 @@
+# CxJS TypeScript Migration Guide
+
+This document captures patterns and best practices learned during the migration from JavaScript to TypeScript.
+
+## Table of Contents
+
+1. [Config Interfaces](#config-interfaces)
+2. [Instance Types](#instance-types)
+3. [Generic Base Classes](#generic-base-classes)
+4. [Property Declarations](#property-declarations)
+5. [Prototype Property Initialization](#prototype-property-initialization)
+6. [Type Casting Patterns](#type-casting-patterns)
+7. [Component Props and State](#component-props-and-state)
+8. [Common Fixes](#common-fixes)
+9. [JSX Components](#jsx-components)
+10.   [Class Constructors](#class-constructors)
+
+---
+
+## Config Interfaces
+
+Every widget should have a Config interface that extends the appropriate parent config:
+
+```typescript
+export interface ButtonConfig extends HtmlElementConfig {
+   confirm?: Prop<string | Record<string, unknown>>;
+   pressed?: BooleanProp;
+   icon?: StringProp;
+   disabled?: BooleanProp;
+   onClick?: string | ((e: MouseEvent, instance: Instance) => void);
+}
+
+export class Button extends HtmlElement<ButtonConfig, HtmlElementInstance> {
+   // ...
+}
+```
+
+### Config Naming Convention
+
+- Use `{WidgetName}Config` for the interface name
+- Extend the parent widget's config (e.g., `HtmlElementConfig`, `PureContainerConfig`, `ContainerConfig`)
+
+### Property Types in Config
+
+- Use `Prop<T>` for bindable properties that accept values, bindings, or selectors
+- Use `StringProp`, `BooleanProp`, `NumberProp` for common typed props
+- Use `BindingInput<T>` when the property is specifically used with `Binding.get()`
+- Use literal union types for constrained string values (e.g., `"start" | "center" | "end"`)
+
+---
+
+## Instance Types
+
+### Creating Custom Instance Types
+
+When a widget needs custom properties on its instance (like a specialized store), create a custom instance interface:
+
+```typescript
+export interface SandboxInstance extends Instance {
+   store: ExposedValueView;
+}
+
+export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
+   initInstance(context: RenderingContext, instance: SandboxInstance): void {
+      instance.store = new ExposedValueView({
+         /* ... */
+      });
+   }
+}
+```
+
+### Standard Instance Types
+
+- `Instance` - Base instance type for most widgets
+- `HtmlElementInstance` - For HTML-based widgets, includes `tooltips` property
+- Custom interfaces extending `Instance` for specialized needs
+
+### TooltipParentInstance Pattern
+
+Widgets that support tooltips should use `HtmlElementInstance` which implements:
+
+```typescript
+export interface TooltipParentInstance extends Instance {
+   tooltips: { [key: string]: TooltipInstance };
+}
+```
+
+---
+
+## Generic Base Classes
+
+### Using Generic vs Non-Generic Base Classes
+
+CxJS provides both generic and non-generic versions of base classes:
+
+| Non-Generic     | Generic                                           |
+| --------------- | ------------------------------------------------- |
+| `Container`     | `ContainerBase<Config, Instance>`                 |
+| `PureContainer` | `PureContainerBase<Config, Instance>`             |
+| `HtmlElement`   | `HtmlElement<Config, Instance>` (already generic) |
+
+**Use the generic Base version when creating typed widgets:**
+
+```typescript
+// Correct - using generic base
+export class FlexBox extends ContainerBase<FlexBoxConfig, Instance> {}
+
+// Incorrect - Container is not generic
+export class FlexBox extends Container<FlexBoxConfig, Instance> {} // Error!
+```
+
+---
+
+## Property Declarations
+
+### Using `declare` for Class Properties
+
+Use `declare` to inform TypeScript about properties that exist at runtime but aren't initialized in the class body:
+
+```typescript
+export class FlexBox extends ContainerBase<FlexBoxConfig, Instance> {
+   declare spacing?: string | boolean;
+   declare hspacing?: boolean | string;
+   declare wrap?: boolean;
+   declare baseClass: string; // Non-nullable when defined in prototype
+}
+```
+
+### When to Use `declare`
+
+- Properties initialized via prototype assignment
+- Properties set by the framework during initialization
+- Properties from config that are copied to the instance
+
+### Non-Nullable vs Optional
+
+```typescript
+// Optional - may or may not be set
+declare spacing?: string;
+
+// Non-nullable - always defined (e.g., in prototype)
+declare baseClass: string;
+```
+
+---
+
+## Prototype Property Initialization
+
+### Using `undefined` Instead of `null`
+
+When TypeScript types don't include `null`, use `undefined` for prototype initialization:
+
+```typescript
+// Type doesn't allow null
+buttonMod?: string;
+
+// Incorrect - type error
+MsgBox.prototype.buttonMod = null;
+
+// Correct
+MsgBox.prototype.buttonMod = undefined;
+```
+
+### Non-Nullable Prototype Properties
+
+When a property is always defined in the prototype, declare it as non-nullable:
+
+```typescript
+export class Section extends ContainerBase<SectionConfig, Instance> {
+   declare baseClass: string; // Not optional - defined in prototype
+}
+
+Section.prototype.baseClass = "section";
+```
+
+---
+
+## Type Casting Patterns
+
+### Accessing Properties Not in Instance Type
+
+When accessing properties that exist at runtime but aren't in the type:
+
+```typescript
+// Use type assertion
+prepareData(context: RenderingContext, instance: Instance): void {
+   let { eventHandlers } = (instance as any);
+   // ...
+}
+```
+
+### Config Object Casting for Constructors
+
+When a constructor uses `Object.assign` but the config type is limited:
+
+```typescript
+// First, create a proper config interface
+export interface ExposedValueViewConfig extends ViewConfig {
+   containerBinding?: Binding;
+   key?: string | null;
+   recordName?: string;
+}
+
+// Then the constructor accepts the extended config
+instance.store = new ExposedValueView({
+   store: instance.parentStore,
+   containerBinding: this.storageBinding,
+   key: null,
+   recordName: this.recordName,
+});
+```
+
+---
+
+## Component Props and State
+
+### React Component Props Interface
+
+For VDOM components, create typed props and state interfaces:
+
+```typescript
+interface ResizerCmpProps {
+   instance: Instance;
+   data: Record<string, any>; // Use Record for dynamic data properties
+}
+
+interface ResizerCmpState {
+   dragged: boolean;
+   offset: number;
+   initialPosition?: { clientX: number; clientY: number };
+}
+
+class ResizerCmp extends VDOM.Component<ResizerCmpProps, ResizerCmpState> {
+   // ...
+}
+```
+
+### Using `Record<string, any>` for Data
+
+When component data has dynamically declared properties (via `declareData`), use `Record<string, any>`:
+
+```typescript
+interface MyComponentProps {
+   instance: Instance;
+   data: Record<string, any>; // Allows accessing any property
+}
+```
+
+---
+
+## Common Fixes
+
+### 1. "Type 'X' is not generic"
+
+**Problem:** Using non-generic base class with type parameters.
+
+**Fix:** Use the generic `Base` version:
+
+```typescript
+// Wrong
+class MyWidget extends Container<MyConfig, Instance> {}
+
+// Correct
+class MyWidget extends ContainerBase<MyConfig, Instance> {}
+```
+
+### 2. "Property does not exist on type 'Instance'"
+
+**Problem:** Accessing custom instance properties.
+
+**Fix:** Create custom instance interface or use type assertion:
+
+```typescript
+// Option 1: Custom interface
+interface MyInstance extends Instance {
+   customProp: string;
+}
+
+// Option 2: Type assertion
+(instance as any).customProp;
+```
+
+### 3. "Object literal may only specify known properties"
+
+**Problem:** Passing extra properties to a constructor.
+
+**Fix:** Extend the config interface:
+
+```typescript
+export interface ExtendedConfig extends BaseConfig {
+   extraProp?: string;
+}
+```
+
+### 4. "'X' is possibly 'undefined'"
+
+**Problem:** Accessing potentially undefined properties.
+
+**Fix:** Use optional chaining or non-null assertion:
+
+```typescript
+// Optional chaining
+if (components?.header) {
+   /* ... */
+}
+
+// Or declare as non-nullable if always defined
+declare;
+baseClass: string;
+```
+
+### 5. Method Signature Mismatches
+
+**Problem:** Overridden methods have incompatible signatures.
+
+**Fix:** Match parameter types with parent class or use compatible subtypes:
+
+```typescript
+// Parent uses Instance, child can use more specific type
+prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
+   super.prepareData(context, instance);
+}
+```
+
+---
+
+## JSX Components
+
+### Adding the JSX Pragma
+
+For components that render JSX in their `render` method, add the JSX pragma at the top of the file:
+
+```typescript
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig } from "../svg/BoundedObject";
+// ... rest of imports
+```
+
+This tells TypeScript/Babel to use React's JSX factory for transforming JSX syntax.
+
+### When to Add the Pragma
+
+- Any `.tsx` file that contains JSX syntax (e.g., `<g>`, `<div>`, `<rect>`)
+- Files with `render()` methods that return JSX elements
+- Files that use VDOM components
+
+---
+
+## Class Constructors
+
+### Always Add a Constructor
+
+Every widget class should have an explicit constructor that accepts the config type:
+
+```typescript
+export class MyWidget extends BoundedObject<MyWidgetConfig, MyWidgetInstance> {
+   constructor(config?: MyWidgetConfig) {
+      super(config);
+   }
+
+   // ... rest of the class
+}
+```
+
+### Why Add Constructors
+
+- Provides proper type inference when creating widgets
+- Ensures config properties are correctly typed
+- Makes the class API explicit and self-documenting
+
+---
+
+## Migration Checklist
+
+When migrating a widget from JS to TS:
+
+1. [ ] Remove `//@ts-nocheck` directive
+2. [ ] Add JSX pragma `/** @jsxImportSource react */` if file contains JSX
+3. [ ] Create `{WidgetName}Config` interface extending appropriate parent
+4. [ ] Add generic type parameters to base class if needed
+5. [ ] Add constructor accepting the config type
+6. [ ] Add `declare` statements for all class properties
+7. [ ] Add type annotations to all methods
+8. [ ] Create custom instance interface if needed
+9. [ ] Fix prototype initializations (use `undefined` not `null` where needed)
+10. [ ] Declare `baseClass` as non-nullable if defined in prototype
+11. [ ] Verify with `yarn check-types` in packages/cx
+12. [ ] Delete the corresponding `.d.ts` file
+
+---
+
+## File Organization
+
+After migration, each widget should have:
+
+- `Widget.tsx` - The implementation with inline types
+- No separate `Widget.d.ts` - Types are in the source file
+
+Index files (`index.ts`) should re-export all public types:
+
+```typescript
+export { Button, ButtonConfig } from "./Button";
+export { FlexBox, FlexBoxConfig } from "./FlexBox";
+```
+
+## Typed RenderingContext Usage
+
+RenderingContext uses `[key: string]: any` to allow dynamic property access. Parent widgets set context properties that children consume. To add type safety, define typed context interfaces that extend RenderingContext and use them directly in method signatures.
+
+### Pattern: Typed Method Signatures
+
+Define a typed context interface next to the widget that sets the context properties, then use it in method signatures:
+
+```typescript
+// In ValidationGroup.ts
+import { RenderingContext } from "../../ui/RenderingContext";
+
+/** Typed context interface for form-related context properties */
+export interface FormRenderingContext extends RenderingContext {
+   parentDisabled?: boolean;
+   parentReadOnly?: boolean;
+   parentViewMode?: boolean | string;
+   parentTabOnEnterKey?: boolean;
+   parentVisited?: boolean;
+   parentStrict?: boolean;
+   parentAsterisk?: boolean;
+   validation?: { errors: ValidationErrorData[] };
+   lastFieldId?: string;
+}
+
+export class ValidationGroup extends PureContainerBase<...> {
+   // Use typed context directly in method signature
+   explore(context: FormRenderingContext, instance: ValidationGroupInstance): void {
+      context.push("parentStrict", coalesce(instance.data.strict, context.parentStrict));
+      context.push("parentDisabled", coalesce(instance.data.disabled, context.parentDisabled));
+      super.explore(context, instance);
+   }
+}
+```
+
+### Existing Typed Contexts
+
+**FormRenderingContext** (ValidationGroup.ts):
+
+- Used by: ValidationGroup, Field, Label, ValidationError, Button
+- Properties: `parentDisabled`, `parentReadOnly`, `parentViewMode`, `parentTabOnEnterKey`, `parentVisited`, `parentStrict`, `parentAsterisk`, `validation`, `lastFieldId`
+
+**SvgRenderingContext** (BoundedObject.ts):
+
+- Used by: Svg, BoundedObject and all SVG components
+- Properties: `parentRect`, `inSvg`, `addClipRect`
+
+**ChartRenderingContext** (Chart.ts) - extends SvgRenderingContext:
+
+- Used by: Chart, all chart components (LineGraph, ScatterGraph, Gridlines, Marker, etc.)
+- Properties: `axes` (Record of axis calculators)
+
+### Guidelines
+
+1. **Define locally**: Keep context interfaces next to the widgets that define them
+2. **Export for consumers**: Export the interface so child widgets can import and use it
+3. **Extend appropriately**: ChartRenderingContext extends SvgRenderingContext since charts need `parentRect`
+4. **Use non-null assertion**: When accessing context properties that must exist, use `context.axes!`
+
+---
+
+## Nice to Have Improvements
+
+[x] Typed RenderingContext usage
+[x] Better StructuredProp and typed ContentResolver
+[x] dropdownOptions might typed as DropdownConfig?
+[x] Properly type Component.create, Widget.create, etc.
+[x] Find controller by type
+[x] Use Creatable in various places
+[x] Typed selection and dataAdapters
+[ ] Full Creatable typing (probably impossible)
+[ ] Resolve tree-shaking
+[ ] Allow Netlify to prerender CxJS docs so AI can consume it or make a static site somehow
+
+---
+
+## Documentation Comparison Testing
+
+After migrating widgets, compare the local documentation site against the production site to detect runtime errors.
+
+### Setup
+
+1. **Start documentation server:**
+
+   ```bash
+   cd docs && yarn start
+   ```
+
+   Local server runs at http://localhost:8065
+
+2. **Start TypeScript watch compilation (optional):**
+
+   ```bash
+   cd packages/cx && yarn compile -w
+   ```
+
+3. **Set up Playwright MCP for browser automation:**
+   ```bash
+   claude mcp add --transport stdio --scope local playwright -- npx -y @playwright/mcp@latest
+   ```
+
+### Testing Process
+
+1. Navigate through documentation pages on both local (localhost:8065) and production (docs.cxjs.io)
+2. Check browser console for errors on local site
+3. Compare rendered output between sites
+4. After fixing bugs, run `yarn compile` in `packages/cx` (HMR will reload)
+
+### Common Migration Bugs
+
+1. **Missing declare statements** - TypeScript class fields without `declare` overwrite values from `Object.assign(this, config)` in parent constructors, causing undefined properties
+
+2. **Missing Config interfaces** - Widgets need proper Config interfaces extending parent configs. Reference online `.d.ts` files for proper typing:
+   ```
+   https://github.com/codaxy/cxjs/blob/master/packages/cx/src/ui/{WidgetName}.d.ts
+   ```
+
+---
+
+### Active Bugs
+
+[x] Infinite Grid repeating row values (Docs)
+[x] Missing search icon in Aquamarine theme (Gallery)
+[x] SWC JSX plugin uses src
+
+## Finalization
+
+[x] Check online .d.ts files for all widgets at the end
+[x] Check all Config files without comments if comments are available online
+[x] Migrate gallery
+[x] Migrate changes independently done to master
+[x] Write detailed documentation and migration paths
+[ ] Publish under cx@ts tag and test in other applications
+[ ] Migrate all docs examples to typescript
+[ ] Figure out a fiddle replacement (with AI :)
+[x] Migrate some of the libraries (Google Maps, Diagrams)
diff --git a/benchmark/package.json b/benchmark/package.json
index 2a8c4d065..cd0560692 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -9,46 +9,45 @@
    },
    "dependencies": {
       "casual": "^1.6.2",
-      "core-js": "^3.39.0",
-      "cx": "^25.4.1",
-      "cx-react": "^24.7.1",
+      "core-js": "^3.47.0",
+      "cx": "workspace:*",
+      "cx-react": "workspace:*",
       "intl": "^1.2.5",
-      "react": "^18.3.1",
-      "react-dev-utils": "^12.0.1",
-      "react-dom": "^18.3.1",
+      "react": "^19.2.3",
+      "react-dom": "^19.2.3",
       "whatwg-fetch": "^3.6.20"
    },
    "devDependencies": {
-      "@babel/core": "^7.26.0",
-      "@babel/preset-env": "^7.26.0",
-      "@babel/preset-typescript": "^7.26.0",
-      "@types/node": "^22.10.1",
-      "@types/react": "^18.3.14",
-      "babel-loader": "^9.2.1",
+      "@babel/core": "^7.28.5",
+      "@babel/preset-env": "^7.28.5",
+      "@babel/preset-typescript": "^7.28.5",
+      "@types/node": "^25.0.3",
+      "@types/react": "^19.2.7",
+      "babel-loader": "^10.0.0",
       "babel-plugin-transform-cx-imports": "^21.3.0",
       "babel-plugin-transform-cx-jsx": "^21.3.0",
       "babel-preset-cx-env": "^24.0.0",
       "copy-webpack-plugin": "^12.0.2",
       "css-loader": "^7.1.2",
       "file-loader": "^6.2.0",
-      "html-webpack-plugin": "^5.6.3",
+      "html-webpack-plugin": "^5.6.5",
       "if-loader": "^1.0.2",
       "inline-manifest-webpack-plugin": "^4.0.2",
       "json-loader": "^0.5.7",
       "mini-css-extract-plugin": "^2.9.2",
       "modify-babel-preset": "^3.2.1",
       "sass": "^1.77.8",
-      "sass-loader": "^16.0.1",
+      "sass-loader": "^16.0.6",
       "serve": "^14.2.4",
       "style-loader": "^4.0.0",
       "svg-url-loader": "^8.0.0",
       "url-loader": "^4.1.1",
-      "webpack": "^5.97.1",
+      "webpack": "^5.103.0",
       "webpack-bundle-analyzer": "^4.10.2",
       "webpack-cleanup-plugin": "^0.5.1",
       "webpack-cli": "^5.1.4",
       "webpack-combine-loaders": "^2.0.4",
-      "webpack-dev-server": "^5.1.0",
+      "webpack-dev-server": "^5.2.2",
       "webpack-merge": "^6.0.1"
    }
 }
diff --git a/docs/app/DocsNav.js b/docs/app/DocsNav.js
index 768fba92d..b165994da 100644
--- a/docs/app/DocsNav.js
+++ b/docs/app/DocsNav.js
@@ -11,7 +11,7 @@ export const docsNavTree = [
             ],
          },
          {
-            text: "Pre-requsites",
+            text: "About",
             children: [
                { text: "JSX", url: "~/intro/jsx" },
                { text: "CLI", url: "~/intro/command-line" },
@@ -20,6 +20,10 @@ export const docsNavTree = [
                   text: "Breaking Changes",
                   url: "~/intro/breaking-changes",
                },
+               {
+                  text: "TypeScript Migration",
+                  url: "~/intro/type-script-migration",
+               },
                {
                   text: "Step by Step Tutorial",
                   url: "~/intro/step-by-step",
diff --git a/docs/app/icons.js b/docs/app/icons.js
index c58ccf768..eabdeb3d5 100644
--- a/docs/app/icons.js
+++ b/docs/app/icons.js
@@ -2,7 +2,7 @@ import { VDOM } from 'cx/ui';
 import { Icon } from 'cx/widgets';
 
 Icon.registerFactory((name, props) => {
-    props = { ...props };
-    props.className = `fa fa-${name} ${props.className || ''}`;
-    return <i {...props} />
+    let { key, ...rest } = props;
+    rest.className = `fa fa-${name} ${rest.className || ''}`;
+    return <i key={key} {...rest} />
 });
diff --git a/docs/babel-config.js b/docs/babel-config.js
index 1eadb324a..a2c66de0c 100644
--- a/docs/babel-config.js
+++ b/docs/babel-config.js
@@ -1,36 +1,42 @@
-
+let transformImports = require("../packages/babel-plugin-transform-cx-imports");
 
 module.exports = function (options) {
-    var isProduction = options.production;
+   var isProduction = options.production;
 
-    return {
-        "cacheDirectory": true,
-        "cacheIdentifier": "v16",
-        "presets": [
-            ["@babel/preset-env", {
-                loose: true,
-                modules: false,
-                useBuiltIns: "usage",
-                corejs: 3,
-                targets: {
-                    chrome: 55,
-                    ie: 11,
-                    firefox: 30,
-                    edge: 12,
-                    safari: 9
-                }
-            }]
-        ],
-        "plugins": [
-            ['transform-cx-jsx', {
-                trimWhitespace: true,
-                trimWhitespaceExceptions: ['Md', 'CodeSnippet', 'CodeSplit']
-            }],
-            ["@babel/transform-react-jsx", { "runtime": 'automatic' }],
-            "@babel/proposal-function-bind",
-            isProduction && ["transform-cx-imports", { useSrc: true }],
-        ].filter(Boolean)
-    }
+   return {
+      cacheDirectory: true,
+      cacheIdentifier: "v16",
+      presets: [
+         "@babel/typescript",
+         [
+            "@babel/preset-env",
+            {
+               loose: true,
+               modules: false,
+               useBuiltIns: "usage",
+               corejs: 3,
+               targets: {
+                  chrome: 55,
+                  ie: 11,
+                  firefox: 30,
+                  edge: 12,
+                  safari: 9,
+               },
+            },
+         ],
+      ],
+      plugins: [
+         [
+            "transform-cx-jsx",
+            {
+               trimWhitespace: true,
+               trimWhitespaceExceptions: ["Md", "CodeSnippet", "CodeSplit"],
+            },
+         ],
+         ["@babel/transform-react-jsx", { runtime: "automatic" }],
+         "@babel/proposal-function-bind",
+         [transformImports, { useSrc: true }],
+         //isProduction && false && ["transform-cx-imports", { useSrc: true }],
+      ].filter(Boolean),
+   };
 };
-
-
diff --git a/docs/components/Md.js b/docs/components/Md.js
index 50d18e1ea..56d48cd01 100644
--- a/docs/components/Md.js
+++ b/docs/components/Md.js
@@ -66,6 +66,7 @@ export class Md extends HtmlElement {
       return super.add({
          type: HtmlElement,
          innerHtml: md,
+         className: "cxe-md-block",
       });
    }
 }
diff --git a/docs/components/Md.scss b/docs/components/Md.scss
new file mode 100644
index 000000000..5edaf82ec
--- /dev/null
+++ b/docs/components/Md.scss
@@ -0,0 +1,26 @@
+.cxe-md-block > table {
+   max-width: 50em;
+   border-collapse: collapse;
+   margin: 1em 0;
+
+   th,
+   td {
+      border: 1px solid #ddd;
+      padding: 8px 12px;
+      text-align: left;
+      font-size: 13px;
+   }
+
+   th {
+      background: #f5f5f5;
+      font-weight: 600;
+   }
+
+   tr:nth-child(even) {
+      background: #fafafa;
+   }
+
+   code {
+      background: rgba(128, 128, 128, 0.15);
+   }
+}
diff --git a/docs/components/index.scss b/docs/components/index.scss
index b1f09112f..6b0a78afb 100644
--- a/docs/components/index.scss
+++ b/docs/components/index.scss
@@ -8,6 +8,7 @@
 @import "EditOnGitX";
 @import "Floater";
 @import "DocSearch";
+@import "Md";
 
 .dxb-table {
    max-width: 50em;
diff --git a/docs/content/Article.scss b/docs/content/Article.scss
index 3baf17d3c..150c62dbc 100644
--- a/docs/content/Article.scss
+++ b/docs/content/Article.scss
@@ -38,6 +38,10 @@
         color: #414340;
         font-size: 24px;
         scroll-margin-top: 200px;
+
+        & ~ p {
+            margin-top:24px;
+        }
     }
 
     h2 {
diff --git a/docs/content/charts/configs/axis.js b/docs/content/charts/configs/axis.js
index 551af6577..4bc83c2c7 100644
--- a/docs/content/charts/configs/axis.js
+++ b/docs/content/charts/configs/axis.js
@@ -199,7 +199,7 @@ export default {
     onCreateLabelFormatter: {
         type: "function",
         description: <cx><Md>
-            A function used to create a formatter function for axis labels. See See [Complex Labels](~/examples/charts/axis/complex-labels) example for more info.
+            A function used to create a formatter function for axis labels. See [Complex Labels](~/examples/charts/axis/complex-labels) example for more info.
         </Md></cx>
     }
 };
diff --git a/docs/content/charts/configs/legendary.js b/docs/content/charts/configs/legendary.js
index a57131348..9e2ef3361 100644
--- a/docs/content/charts/configs/legendary.js
+++ b/docs/content/charts/configs/legendary.js
@@ -1,5 +1,4 @@
 import {Md} from 'docs/components/Md';
-import {ShapeRender} from "cx/src/charts";
 
 export default {
     active: {
diff --git a/docs/content/concepts/CreatingComponents.js b/docs/content/concepts/CreatingComponents.js
index 305636ec5..ae7a6defc 100644
--- a/docs/content/concepts/CreatingComponents.js
+++ b/docs/content/concepts/CreatingComponents.js
@@ -1,10 +1,9 @@
 import { Md } from "../../components/Md";
-import { Content, FlexCol, Slider, Tab } from "cx/widgets";
+import { Content, FlexCol, Slider, Tab, Widget } from "cx/widgets";
 import { CodeSplit } from "../../components/CodeSplit";
 import { CodeSnippet } from "../../components/CodeSnippet";
-import { Widget } from "../../../packages/cx/src/ui/Widget";
 
-class Square extends Widget {
+class Square extends Widget{
     declareData(...args) {
         super.declareData(
             {
diff --git a/docs/content/intro/BreakingChanges.js b/docs/content/intro/BreakingChanges.js
index ff9e14e12..aaaf9ac12 100644
--- a/docs/content/intro/BreakingChanges.js
+++ b/docs/content/intro/BreakingChanges.js
@@ -13,6 +13,61 @@ export const BreakingChanges = <cx>
             This page will provide information about breaking changes and how to migrate your applications to the latest
             versions of the framework.
 
+            ## 26.1.0
+
+            ### TypeScript Migration
+
+            The CxJS framework has been fully migrated to TypeScript. This is a major change that brings
+            improved type safety, better IDE support, and enhanced developer experience.
+
+            ### Separation from React JSX Types
+
+            CxJS now provides its own JSX type definitions instead of relying on React's JSX types.
+            This separation was necessary because CxJS JSX has fundamental differences from React JSX.
+
+            To use the new JSX types, update your `tsconfig.json`:
+
+            <CodeSplit>
+                <CodeSnippet copy={false}>{`
+{
+   "compilerOptions": {
+      "jsx": "react-jsx",
+      "jsxImportSource": "cx"
+   }
+}
+                `}</CodeSnippet>
+            </CodeSplit>
+
+            With this configuration, TypeScript will use CxJS-specific JSX types, providing proper
+            type checking for CxJS attributes and components.
+
+            ### Package Upgrades Required
+
+            The following packages have been updated and should be upgraded to version 26.x:
+
+            - `cx` - Core framework package
+            - `cx-react` - React adapter (now written in TypeScript)
+            - `babel-plugin-transform-cx-imports` - Babel plugin for optimizing imports
+            - `swc-plugin-transform-cx-jsx` - SWC plugin for CxJS JSX transformation
+            - `swc-plugin-transform-cx-imports` - SWC plugin for optimizing imports
+            - `cx-scss-manifest-webpack-plugin` - Webpack plugin for SCSS manifest generation
+
+            &gt; **Note:** Some projects have copied `cx-scss-manifest-webpack-plugin` and used it in source form.
+            These projects should now transition to using the official npm package instead. These versions will not work
+            with the 26.x releases due to internal path changes and CSS will appear broken. Alternatively, the plugin can be patched to use the `build`
+            folder instead of the `src` folder to detect which components are actually being used in the project.
+
+            ### React 18+ Required
+
+            CxJS 26.x requires React 18 or later. The framework now uses the modern React 18 APIs including
+            `createRoot` from `react-dom/client`. If your application is still using React 17
+            or earlier, you will need to upgrade React before upgrading to CxJS 26.x.
+
+            ### Migration Guide
+
+            For a comprehensive guide on migrating your applications to TypeScript and taking advantage of the new
+            type system, please refer to the [TypeScript Migration Guide](~/intro/type-script-migration).
+
             ## 24.10.0
 
             ### Legend and LegendEntry rendering
diff --git a/docs/content/intro/TypeScriptMigration.js b/docs/content/intro/TypeScriptMigration.js
new file mode 100644
index 000000000..5ded4fab4
--- /dev/null
+++ b/docs/content/intro/TypeScriptMigration.js
@@ -0,0 +1,604 @@
+import { CodeSnippet } from "../../components/CodeSnippet";
+import { CodeSplit } from "../../components/CodeSplit";
+import { Md } from "../../components/Md";
+
+export const TypeScriptMigration = (
+   <cx>
+      <Md>
+         # TypeScript Migration Guide
+
+         Starting with CxJS 26.x, the core framework has been migrated to TypeScript. This guide covers the patterns
+         and best practices for working with TypeScript in CxJS applications, whether you're migrating an existing
+         project or starting fresh.
+
+         ## Project Setup
+
+         ### TypeScript Configuration
+
+         Configure your `tsconfig.json` with the following settings for optimal CxJS support:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+{
+   "compilerOptions": {
+      "jsx": "react-jsx",
+      "jsxImportSource": "cx",
+      "moduleResolution": "bundler",
+      "esModuleInterop": true
+   }
+}
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         The key setting is `"jsxImportSource": "cx"`. CxJS now provides its own JSX type definitions
+         instead of relying on React's JSX types. This means CxJS-specific attributes like `visible`,
+         `controller`, `layout`, and data-binding functions (`bind()`, `expr()`, `tpl()`) are
+         properly typed without conflicts with React's typings.
+
+         ### Webpack Configuration
+
+         With TypeScript, you technically no longer need `babel-loader` or special Babel plugins for CxJS.
+         You can use just `ts-loader` to handle TypeScript files:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+{
+   test: /\\.(ts|tsx)$/,
+   loader: 'ts-loader',
+   exclude: /node_modules/
+}
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         However, removing `babel-loader` and the `transform-cx-jsx` plugin requires significant
+         refactoring of your application, as described in the next section. For most existing projects,
+         we recommend keeping the Babel plugins during the migration process.
+
+         ### Without `transform-cx-jsx` Plugin
+
+         Applications can continue to work with the `transform-cx-jsx` plugin enabled, which is the
+         recommended approach for existing projects. However, if you want to run your application
+         without this plugin, the following requirements apply:
+
+         1. All functional components must be wrapped in `createFunctionalComponent` calls
+         2. The special JSX prop syntax (`-bind`, `-expr`, `-tpl`) must be converted to function calls
+            (`bind()`, `tpl()`, `expr()`) or object form like `&#123;&#123; bind: "prop" &#125;&#125;`,
+            `&#123;&#123; tpl: "template" &#125;&#125;`, or `&#123;&#123; expr: "1+1" &#125;&#125;`
+         3. All components previously developed in JavaScript must be ported to TypeScript.
+
+         ### Bundle Size Optimization (Optional)
+
+         While not required, you can use `babel-plugin-transform-cx-imports` to minimize bundle size
+         by transforming CxJS imports to more specific paths:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+// Install the plugin
+npm install babel-plugin-transform-cx-imports --save-dev
+
+// In babel.config.js
+{
+   plugins: [
+      ["transform-cx-imports", { useSrc: true }]
+   ]
+}
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         If using this plugin, chain `babel-loader` after `ts-loader`:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+{
+   test: /\\.(ts|tsx)$/,
+   exclude: /node_modules/,
+   use: ['babel-loader', 'ts-loader']
+}
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         ### Vite
+
+         Besides Webpack, CxJS now also supports Vite as a build tool. Vite offers faster development server
+         startup and hot module replacement. For a ready-to-use Vite template, check out the
+         [CxJS Vite Template](https://github.com/codaxy/cxjs-vite-template).
+
+         ## General Improvements
+
+         ### Typed Controller Methods
+
+         With TypeScript, you can use `getControllerByType` to get a typed controller reference instead of
+         using string method names. This provides compile-time safety and IDE autocomplete.
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+import { Controller, bind } from "cx/ui";
+import { Button, Section } from "cx/widgets";
+
+class PageController extends Controller {
+   onSave() {
+      // save logic
+   }
+
+   onDelete(id: string) {
+      // delete logic
+   }
+}
+
+export default (
+   <cx>
+      <Section controller={PageController}>
+         {/* Type-safe controller method calls */}
+         <Button
+            onClick={(e, instance) =>
+               instance.getControllerByType(PageController).onSave()
+            }
+         >
+            Save
+         </Button>
+         <Button
+            onClick={(e, instance) =>
+               instance.getControllerByType(PageController).onDelete("123")
+            }
+         >
+            Delete
+         </Button>
+      </Section>
+   </cx>
+);
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         The `getControllerByType(ControllerClass)` method searches up the widget tree and returns a
+         typed controller instance, enabling full autocomplete and compile-time type checking for
+         controller methods and their parameters.
+
+         ### Typed RenderingContext
+
+         CxJS uses a `RenderingContext` object to pass information down the widget tree during rendering.
+         Different widget families define typed context interfaces that extend `RenderingContext` for
+         type-safe access to context properties.
+
+         **Available typed contexts:**
+
+         - `FormRenderingContext` - Form validation context (`parentDisabled`, `parentReadOnly`, `validation`, etc.)
+         - `SvgRenderingContext` - SVG layout context (`parentRect`, `inSvg`, `addClipRect`)
+         - `ChartRenderingContext` - Chart context extending SVG (`axes`)
+
+         When creating custom widgets that consume these context properties, import and use the typed
+         context interface in your method signatures:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+import type { FormRenderingContext } from "cx/widgets";
+
+export class MyFormWidget extends Field<MyFormWidgetConfig> {
+   explore(context: FormRenderingContext, instance: Instance) {
+      // Type-safe access to form context properties
+      if (context.parentDisabled) {
+         // handle disabled state
+      }
+      super.explore(context, instance);
+   }
+}
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         ### Typed ContentResolver
+
+         The `ContentResolver` widget now supports type inference for the `onResolve` callback params.
+         TypeScript automatically infers the resolved types from your params definition:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+import { ContentResolver } from "cx/widgets";
+import { createAccessorModelProxy } from "cx/data";
+
+interface AppModel {
+   user: { name: string; age: number };
+}
+
+const model = createAccessorModelProxy<AppModel>();
+
+<ContentResolver
+   params={{
+      name: model.user.name,  // AccessorChain<string>
+      age: model.user.age,    // AccessorChain<number>
+      limit: 10,              // number literal
+   }}
+   onResolve={(params) => {
+      // TypeScript infers:
+      // params.name: string
+      // params.age: number
+      // params.limit: number
+      return <div>{params.name} is {params.age} years old</div>;
+   }}
+/>
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         **Type resolution behavior:**
+
+         | Param Type | Resolved Type |
+         |------------|---------------|
+         | Literal values (`42`, `"text"`) | Preserves type (`number`, `string`) |
+         | `AccessorChain&lt;T&gt;` | `T` |
+         | `Selector&lt;T&gt;` / `GetSet&lt;T&gt;` | `T` |
+         | `bind()` / `tpl()` / `expr()` | `any` (runtime-only) |
+
+         The utility types `ResolveProp&lt;P&gt;` and `ResolveStructuredProp&lt;S&gt;` are exported from `cx/ui`
+         if you need to use them in your own generic components.
+
+         ### Expression Helpers
+
+         CxJS provides a set of helper functions for creating type-safe selectors from accessor chains.
+         These are useful for boolean props like `visible`, `disabled`, or `readOnly`:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+import { createAccessorModelProxy } from "cx/data";
+import { truthy, isEmpty, equal, greaterThan } from "cx/ui";
+import { TextField, NumberField, Button } from "cx/widgets";
+
+interface FormModel {
+   name: string;
+   age: number;
+   items: string[];
+}
+
+const m = createAccessorModelProxy<FormModel>();
+
+<cx>
+   <TextField value={m.name} label="Name" />
+   <NumberField value={m.age} label="Age" />
+
+   {/* Show warning if name is empty */}
+   <div visible={isEmpty(m.name)} class="warning">
+      Name is required
+   </div>
+
+   {/* Enable button only if age >= 18 */}
+   <Button disabled={lessThan(m.age, 18)}>
+      Submit
+   </Button>
+
+   {/* Show special message for specific age */}
+   <div visible={equal(m.age, 21)}>
+      Welcome to adulthood!
+   </div>
+</cx>
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         **Available helpers:**
+
+         | Helper | Description |
+         |--------|-------------|
+         | `truthy(accessor)` | True if value is truthy (`!!x`) |
+         | `falsy(accessor)` | True if value is falsy (`!x`) |
+         | `isTrue(accessor)` | True if value is strictly `true` |
+         | `isFalse(accessor)` | True if value is strictly `false` |
+         | `hasValue(accessor)` | True if value is not null/undefined |
+         | `isEmpty(accessor)` | True if string/array is empty or null |
+         | `isNonEmpty(accessor)` | True if string/array has content |
+         | `equal(accessor, value)` | True if `x == value` (loose) |
+         | `notEqual(accessor, value)` | True if `x != value` (loose) |
+         | `strictEqual(accessor, value)` | True if `x === value` |
+         | `strictNotEqual(accessor, value)` | True if `x !== value` |
+         | `lessThan(accessor, value)` | True if `x &lt; value` |
+         | `lessThanOrEqual(accessor, value)` | True if `x &lt;= value` |
+         | `greaterThan(accessor, value)` | True if `x &gt; value` |
+         | `greaterThanOrEqual(accessor, value)` | True if `x &gt;= value` |
+
+         These helpers return `Selector&lt;boolean&gt;` which can be used anywhere a boolean binding is expected.
+
+         ### Typed Config Properties
+
+         Several widget config properties now have improved type definitions that provide better
+         autocomplete and type checking when using the `type` or `$type` pattern.
+
+         #### Selection
+
+         Grid, PieChart, and BubbleGraph support typed `selection` configs:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+import { Grid } from "cx/widgets";
+import { KeySelection } from "cx/ui";
+
+<Grid
+   selection={{
+      type: KeySelection,
+      bind: "selection",
+      keyField: "id"  // KeySelection-specific prop, fully typed
+   }}
+   // ...
+/>
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         Supported selection types: `Selection`, `KeySelection`, `PropertySelection`, `SimpleSelection`.
+
+         #### Chart Axes
+
+         Chart axes support typed configs for different axis types:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+import { Chart } from "cx/charts";
+import { NumericAxis, CategoryAxis } from "cx/charts";
+
+<Chart
+   axes={{
+      x: { type: CategoryAxis, labelAnchor: "end" },
+      y: { type: NumericAxis, min: 0, max: 100 }  // NumericAxis-specific props
+   }}
+>
+   {/* chart content */}
+</Chart>
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         Supported axis types: `Axis`, `NumericAxis`, `CategoryAxis`, `TimeAxis`.
+
+         #### Data Adapters
+
+         Grid and List support typed `dataAdapter` configs:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+import { Grid } from "cx/widgets";
+import { GroupAdapter } from "cx/ui";
+
+<Grid
+   dataAdapter={{
+      type: GroupAdapter,
+      groupings: [{ key: { bind: "category" } }]  // GroupAdapter-specific props
+   }}
+   // ...
+/>
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         Supported adapter types: `ArrayAdapter`, `GroupAdapter`, `TreeAdapter`.
+
+         #### Dropdown Options
+
+         Form fields with dropdowns (ColorField, DateTimeField, MonthField, LookupField) accept
+         typed `dropdownOptions`:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+import { DateTimeField } from "cx/widgets";
+
+<DateTimeField
+   value-bind="date"
+   dropdownOptions={{
+      placement: "down-right",
+      offset: 10,
+      touchFriendly: true
+   }}
+/>
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         #### Typed Controllers
+
+         The `controller` property accepts multiple forms: a class, a config object with `type`/`$type`,
+         an inline config, or a factory function. Because this type is intentionally flexible ("open"),
+         TypeScript's generic inference may not catch extra or misspelled properties in config objects.
+
+         Use the `validateConfig` helper to enable strict property checking:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+import { validateConfig } from "cx/util";
+import { Controller } from "cx/ui";
+
+interface MyControllerConfig {
+   apiEndpoint: string;
+   maxRetries: number;
+}
+
+class MyController extends Controller {
+   declare apiEndpoint: string;
+   declare maxRetries: number;
+
+   constructor(config?: MyControllerConfig) {
+      super(config);
+   }
+}
+
+// validateConfig enables strict checking
+<Section
+   controller={validateConfig({
+      type: MyController,
+      apiEndpoint: "/api",
+      maxRetires: 3,  // Error: 'maxRetires' does not exist (typo)
+   })}
+/>
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         The `validateConfig` function is a compile-time helper that returns its input unchanged at runtime.
+         It can be used with any config object that follows the `&#123; type: Class, ...props &#125;` pattern.
+
+         ## Authoring Widgets
+
+         Previously, CxJS widgets had to be written in JavaScript with optional
+         TypeScript declaration files (`.d.ts`) for typing. With CxJS 26.x, you can now author
+         widgets entirely in TypeScript.
+
+         &gt; **Important:** Widget files must use the `/** @jsxImportSource react */` pragma because
+         the widget's `render` method uses React JSX.
+
+         ### Complete Widget Example
+
+         Here's a complete example showing all the steps to create a CxJS widget in TypeScript:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+/** @jsxImportSource react */
+
+import { BooleanProp, StringProp, RenderingContext, VDOM } from "cx/ui";
+import { HtmlElement, HtmlElementConfig } from "cx/widgets";
+
+// 1. Define the Config interface
+export interface MyButtonConfig extends HtmlElementConfig {
+   icon?: StringProp;
+   pressed?: BooleanProp;
+}
+
+// 2. Extend the appropriate generic base class (Instance type argument is optional)
+export class MyButton extends HtmlElement<MyButtonConfig> {
+
+   // 3. Use declare for all properties from config/prototype
+   declare icon?: string;
+   declare pressed?: boolean;
+   declare baseClass: string;
+
+   // 4. Declare bindable props in declareData
+   declareData(...args) {
+      super.declareData(...args, {
+         icon: undefined,
+         pressed: undefined,
+      });
+   }
+
+   // 5. Add constructor accepting the config type
+   constructor(config?: MyButtonConfig) {
+      super(config);
+   }
+
+   // 6. Implement render method with React JSX
+   render(
+      context: RenderingContext,
+      instance: Instance,
+      key: string
+   ): React.ReactNode {
+      return (
+         <button
+            key={key}
+            className={this.baseClass}
+            onClick={(e) => this.handleClick(e, instance)}
+         >
+            {this.icon && <span className="icon">{Icon.render(instance.data.icon)}</span>}
+            {this.renderChildren(context, instance)}
+         </button>
+      );
+   }
+}
+
+// 7. Initialize prototype properties
+MyButton.prototype.baseClass = "mybutton";
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         ### Key Steps
+
+         1. **Add React JSX pragma** - Use `/** @jsxImportSource react */` at the top of widget files
+         2. **Define Config interface** - Name it `[WidgetName]Config` and extend the parent's config
+         3. **Extend generic base class** - Use `HtmlElement&lt;Config&gt;`, `ContainerBase&lt;Config&gt;`, etc.
+         4. **Use `declare` for properties** - Prevents TypeScript from overwriting config/prototype values
+         5. **Declare bindable props in `declareData`** - Register props that support data binding
+         6. **Add typed constructor** - Accepts the config type for proper type inference
+         7. **Implement render method** - Returns React JSX elements
+
+         ### Config Property Types
+
+         Use these types for bindable properties in your Config interface:
+
+         | Type | Usage |
+         |------|-------|
+         | `StringProp` | Bindable string property |
+         | `BooleanProp` | Bindable boolean property |
+         | `NumberProp` | Bindable number property |
+         | `Prop&lt;T&gt;` | Bindable property of custom type T |
+         | `RecordsProp` | Array data (Grid, List) |
+
+         ### Using `declare` for Properties
+
+         &gt; **Important:** Widget properties must use `declare` to avoid being overwritten. Without `declare`,
+         TypeScript class fields will override values passed through the config (via `Object.assign` in the
+         constructor) or values defined on the prototype.
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+// WRONG - these fields will override config values with undefined
+export class MyWidget extends HtmlElement<MyWidgetConfig> {
+   icon?: string;     // Overwrites config.icon!
+   pressed?: boolean; // Overwrites config.pressed!
+}
+
+// CORRECT - declare tells TypeScript the field exists without initializing it
+export class MyWidget extends HtmlElement<MyWidgetConfig> {
+   declare icon?: string;
+   declare pressed?: boolean;
+   declare baseClass: string; // Non-nullable when defined in prototype
+}
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         ### Base Classes
+
+         CxJS provides generic base classes for creating typed widgets. The second type argument (Instance) is optional:
+
+         | Base Class | Use Case |
+         |------------|----------|
+         | `HtmlElement&lt;Config&gt;` | Widgets rendering HTML elements |
+         | `ContainerBase&lt;Config&gt;` | Widgets containing other widgets |
+         | `PureContainerBase&lt;Config&gt;` | Containers without HTML wrapper |
+         | `Field&lt;Config&gt;` | Form input widgets |
+
+         ### Custom Instance Types
+
+         When a widget needs custom properties on its instance, create a custom instance interface:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+export interface MyWidgetInstance extends Instance {
+   customData: SomeType;
+}
+
+export class MyWidget extends HtmlElement<MyWidgetConfig, MyWidgetInstance> {
+   initInstance(context: RenderingContext, instance: MyWidgetInstance): void {
+      instance.customData = initializeSomething();
+      super.initInstance(context, instance);
+   }
+}
+            `}</CodeSnippet>
+         </CodeSplit>
+
+         ### Migration Checklist
+
+         When migrating a widget from JavaScript to TypeScript:
+
+         1. Add JSX pragma `/** @jsxImportSource react */` if file contains JSX
+         2. Create `[WidgetName]Config` interface extending appropriate parent
+         3. Add generic type parameters to base class if needed
+         4. Add constructor accepting the config type
+         5. Add `declare` statements for all class properties
+         6. Add type annotations to all methods
+         7. Create custom instance interface if needed
+         8. Fix prototype initializations (use `undefined` not `null` where needed)
+         9. Declare `baseClass` as non-nullable if defined in prototype
+         10. Delete the corresponding `.d.ts` file
+
+         ### File Organization
+
+         After migration, each widget should have:
+
+         - `Widget.tsx` - The implementation with inline types
+         - No separate `Widget.d.ts` - Types are in the source file
+
+         Index files (`index.ts`) should re-export all public types:
+
+         <CodeSplit>
+            <CodeSnippet copy={false}>{`
+export { Button, ButtonConfig } from "./Button";
+export { FlexBox, FlexBoxConfig } from "./FlexBox";
+            `}</CodeSnippet>
+         </CodeSplit>
+      </Md>
+   </cx>
+);
diff --git a/docs/content/intro/index.js b/docs/content/intro/index.js
index aa9b0d252..11d0326e1 100644
--- a/docs/content/intro/index.js
+++ b/docs/content/intro/index.js
@@ -7,6 +7,7 @@ export * from './StepByStep';
 export * from './Jsx';
 export * from './BreakingChanges';
 export * from './NpmPackages';
+export * from './TypeScriptMigration';
 
 import { bumpVersion } from '../version';
 
diff --git a/docs/index.html b/docs/index.html
index c53431cc4..963bf9ef9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,8 +16,6 @@
          type="text/css"
       />
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
-
-      <%= htmlWebpackPlugin.options.reactScripts %>
    </head>
    <body>
       <%= htmlWebpackPlugin.options.gtmb %>
diff --git a/docs/index.js b/docs/index.js
index f6a46babf..fcd1115d5 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -1,35 +1,32 @@
-import { startHotAppLoop, Url, History, enableCultureSensitiveFormatting } from 'cx/ui';
-import { Timing, Debug } from 'cx/util';
-import { Widget } from 'cx/ui';
-import { enableTooltips } from 'cx/widgets';
-import {Main} from './app/Main';
-import {store} from './app/store';
-import './app/icons';
+import { enableCultureSensitiveFormatting, History, startHotAppLoop, Url } from "cx/ui";
+import { Debug, Timing } from "cx/util";
+import { enableTooltips } from "cx/widgets";
+import "./app/icons";
+import { Main } from "./app/Main";
+import { store } from "./app/store";
 import "./index.scss";
+import "cx-theme-aquamarine";
 
 enableTooltips();
 enableCultureSensitiveFormatting();
 
-let stop, start = () => {
+let stop,
+   start = () => {
+      Url.setBaseFromScript("~/app*.js");
+      History.connect(store, "url", "hash");
+      Timing.enable("app-loop");
+      //Timing.enable('vdom-render');
+      Debug.enable("app-data");
+      //Widget.lazyInit = false;
+      //Widget.optimizePrepare = false;
+      //Debug.enable('process-data');
+      //Debug.enable('should-update');
+      stop = startHotAppLoop(module, document.getElementById("app"), store, Main);
+   };
 
-    Url.setBaseFromScript('~/app*.js');
-    History.connect(store, 'url', "hash");
-    Timing.enable('app-loop');
-    //Timing.enable('vdom-render');
-    Debug.enable('app-data');
-    //Widget.lazyInit = false;
-    //Widget.optimizePrepare = false;
-    //Debug.enable('process-data');
-    //Debug.enable('should-update');
-    stop = startHotAppLoop(module, document.getElementById('app'), store, Main);
-};
-
-if (Object.assign && window.fetch && window.WeakMap && window.Intl)
-    start();
+if (Object.assign && window.fetch && window.WeakMap && window.Intl) start();
 else {
-    import(/* webpackChunkName: "polyfill" */ './polyfill')
-        .then(start)
-        .catch(error => {
-            console.error(error);
-        });
-}
\ No newline at end of file
+   import(/* webpackChunkName: "polyfill" */ "./polyfill").then(start).catch((error) => {
+      console.error(error);
+   });
+}
diff --git a/docs/package.json b/docs/package.json
index a685ca3f1..8a99fe280 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,48 +9,48 @@
    },
    "dependencies": {
       "casual": "^1.6.2",
-      "core-js": "^3.39.0",
-      "cx": "^25.4.1",
-      "cx-react": "^24.7.1",
+      "core-js": "^3.47.0",
+      "cx": "workspace:*",
+      "cx-react": "workspace:*",
+      "cx-theme-aquamarine": "workspace:*",
       "illuminate-js": "^1.0.0-alpha.2",
       "intl": "^1.2.5",
       "marked": "^4.3.0",
-      "react": "^18.3.1",
-      "react-dev-utils": "^12.0.1",
-      "react-dom": "^18.3.1",
+      "react": "^19.2.3",
+      "react-dom": "^19.2.3",
       "whatwg-fetch": "^3.6.20"
    },
    "devDependencies": {
-      "@babel/core": "^7.26.0",
-      "@babel/preset-env": "^7.26.0",
-      "@babel/preset-typescript": "^7.26.0",
-      "@types/node": "^22.10.1",
-      "@types/react": "^18.3.14",
-      "babel-loader": "^9.2.1",
-      "babel-plugin-transform-cx-imports": "^21.3.0",
-      "babel-plugin-transform-cx-jsx": "^21.3.0",
-      "babel-preset-cx-env": "^24.0.0",
+      "@babel/core": "^7.28.5",
+      "@babel/preset-env": "^7.28.5",
+      "@babel/preset-typescript": "^7.28.5",
+      "@types/node": "^25.0.3",
+      "@types/react": "^19.2.7",
+      "babel-loader": "^10.0.0",
+      "babel-plugin-transform-cx-imports": "workspace:*",
+      "babel-plugin-transform-cx-jsx": "workspace:*",
+      "babel-preset-cx-env": "workspace:*",
       "clean-webpack-plugin": "^4.0.0",
       "copy-webpack-plugin": "^12.0.2",
       "css-loader": "^7.1.2",
       "file-loader": "^6.2.0",
-      "html-webpack-plugin": "^5.6.3",
+      "html-webpack-plugin": "^5.6.5",
       "if-loader": "^1.0.2",
       "inline-manifest-webpack-plugin": "^4.0.2",
       "json-loader": "^0.5.7",
       "mini-css-extract-plugin": "^2.9.2",
       "modify-babel-preset": "^3.2.1",
       "sass": "^1.77.8",
-      "sass-loader": "^16.0.1",
+      "sass-loader": "^16.0.6",
       "style-loader": "^4.0.0",
       "svg-url-loader": "^8.0.0",
       "url-loader": "^4.1.1",
-      "webpack": "^5.97.1",
+      "webpack": "^5.103.0",
       "webpack-bundle-analyzer": "^4.10.2",
       "webpack-cleanup-plugin": "^0.5.1",
       "webpack-cli": "^5.1.4",
       "webpack-combine-loaders": "^2.0.4",
-      "webpack-dev-server": "^5.1.0",
+      "webpack-dev-server": "^5.2.2",
       "webpack-merge": "^6.0.1"
    }
 }
diff --git a/docs/webpack.config.js b/docs/webpack.config.js
index ce2cd46a2..174bf0739 100644
--- a/docs/webpack.config.js
+++ b/docs/webpack.config.js
@@ -23,7 +23,19 @@ if (production) {
          rules: [
             {
                test: /\.scss$/,
-               use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+               use: [
+                  MiniCssExtractPlugin.loader,
+                  "css-loader",
+                  {
+                     loader: "sass-loader",
+                     options: {
+                        sassOptions: {
+                           quietDeps: true,
+                           silenceDeprecations: ["import", "global-builtin"],
+                        },
+                     },
+                  },
+               ],
             },
             {
                test: /\.css$/,
@@ -82,7 +94,19 @@ if (production) {
          rules: [
             {
                test: /\.scss$/,
-               use: ["style-loader", "css-loader", "sass-loader"],
+               use: [
+                  "style-loader",
+                  "css-loader",
+                  {
+                     loader: "sass-loader",
+                     options: {
+                        sassOptions: {
+                           quietDeps: true,
+                           silenceDeprecations: ["import", "global-builtin"],
+                        },
+                     },
+                  },
+               ],
             },
             {
                test: /\.css$/,
@@ -123,24 +147,13 @@ if (production) {
 
 var common = {
    resolve: {
-      alias: {
-         "cx/src": path.resolve(path.join(__dirname, "../packages/cx/src")),
-         "cx/locale": path.resolve(path.join(__dirname, "../packages/cx/locale")),
-         cx: path.resolve(path.join(__dirname, "../packages/cx/src")),
-         "cx-react": path.resolve(path.join(__dirname, "../packages/cx-react")),
-         //'cx-react': path.resolve(path.join(__dirname, '../packages/cx-inferno')),
-         //'cx-react': path.resolve(path.join(__dirname, '../packages/cx-preact')),
-         "cx-react-css-transition-group": path.resolve(
-            path.join(__dirname, "../packages/cx-react-css-transition-group"),
-         ),
-         docs: __dirname,
-      },
+      extensions: [".js", ".ts", ".tsx"],
    },
 
    module: {
       rules: [
          {
-            test: /\.js$/,
+            test: /\.(js|ts|tsx)$/,
             include: /[\\\/](misc|docs|cx|cx-react)[\\\/]/,
             //exclude: /(babelHelpers)/,
             use: [
@@ -169,10 +182,10 @@ var common = {
       path: __dirname,
       filename: "[name].js",
    },
-   externals: {
-      react: "React",
-      "react-dom": "ReactDOM",
-   },
+   //    externals: {
+   //       react: "React",
+   //       "react-dom": "ReactDOM",
+   //    },
    plugins: [
       new HtmlWebpackPlugin({
          template: path.join(__dirname, "index.html"),
@@ -198,7 +211,7 @@ var common = {
 
       buildDependencies: {
          // 2. Add your config as buildDependency to get cache invalidation on config change
-         config: [__filename],
+         config: [__filename, path.join(__dirname, "./babel-config.js")],
 
          // 3. If you have other things the build depends on you can add them here
          // Note that webpack, loaders and all modules referenced from your config are automatically added
diff --git a/fiddle/package.json b/fiddle/package.json
index 59bd20789..ac190988f 100644
--- a/fiddle/package.json
+++ b/fiddle/package.json
@@ -7,7 +7,8 @@
    "scripts": {
       "build": "webpack",
       "build:root": "webpack",
-      "start": "webpack-dev-server --open"
+      "start": "webpack-dev-server --open",
+      "test": "mocha --require @babel/register app/**/*.spec.js"
    },
    "repository": {
       "type": "git",
@@ -25,57 +26,58 @@
    },
    "homepage": "https://gitlab.com/mstijak/cx-fiddle#README",
    "dependencies": {
-      "@babel/runtime": "^7.26.0",
+      "@babel/runtime": "^7.28.4",
       "assert": "^2.1.0",
       "buffer": "^6.0.3",
       "casual": "^1.6.2",
       "codemirror": "^5.65.18",
-      "core-js": "^3.39.0",
-      "cx": "^25.4.1",
-      "cx-react": "^24.7.1",
+      "core-js": "^3.47.0",
+      "cx": "workspace:*",
+      "cx-react": "workspace:*",
       "deep-equal": "^2.2.3",
       "deepmerge": "^4.3.1",
       "path-browserify": "^1.0.1",
       "prettier": "^3.3.3",
       "process": "^0.11.10",
       "query-string": "^9.1.0",
-      "react": "^18.3.1",
-      "react-dom": "^18.3.1",
+      "react": "^19.2.3",
+      "react-dom": "^19.2.3",
       "whatwg-fetch": "^3.6.20"
    },
    "devDependencies": {
-      "@babel/core": "^7.26.0",
-      "@babel/preset-env": "^7.26.0",
-      "@babel/preset-typescript": "^7.26.0",
-      "@babel/register": "^7.25.9",
-      "@babel/runtime-corejs2": "^7.26.0",
-      "@babel/runtime-corejs3": "^7.26.0",
-      "@types/node": "^22.10.1",
-      "@types/react": "^18.3.14",
-      "babel-loader": "^9.2.1",
+      "@babel/core": "^7.28.5",
+      "@babel/preset-env": "^7.28.5",
+      "@babel/preset-typescript": "^7.28.5",
+      "@babel/register": "^7.28.3",
+      "@babel/runtime-corejs2": "^7.28.4",
+      "@babel/runtime-corejs3": "^7.28.4",
+      "@types/node": "^25.0.3",
+      "@types/react": "^19.2.7",
+      "babel-loader": "^10.0.0",
       "babel-plugin-transform-cx-imports": "^21.3.0",
       "babel-plugin-transform-cx-jsx": "^21.3.0",
       "babel-preset-cx-env": "^24.0.0",
       "copy-webpack-plugin": "^12.0.2",
       "css-loader": "^7.1.2",
       "file-loader": "^6.2.0",
-      "html-webpack-plugin": "^5.6.3",
+      "html-webpack-plugin": "^5.6.5",
       "if-loader": "^1.0.2",
       "inline-manifest-webpack-plugin": "^4.0.2",
       "json-loader": "^0.5.7",
       "mini-css-extract-plugin": "^2.9.2",
+      "mocha": "^10.8.2",
       "modify-babel-preset": "^3.2.1",
       "sass": "^1.77.8",
-      "sass-loader": "^16.0.1",
+      "sass-loader": "^16.0.6",
       "style-loader": "^4.0.0",
       "svg-url-loader": "^8.0.0",
       "url-loader": "^4.1.1",
-      "webpack": "^5.97.1",
+      "webpack": "^5.103.0",
       "webpack-bundle-analyzer": "^4.10.2",
       "webpack-cleanup-plugin": "^0.5.1",
       "webpack-cli": "^5.1.4",
       "webpack-combine-loaders": "^2.0.4",
-      "webpack-dev-server": "^5.1.0",
+      "webpack-dev-server": "^5.2.2",
       "webpack-md5-hash": "^0.0.6",
       "webpack-merge": "^6.0.1"
    }
diff --git a/gallery/components/ThemeLoader.tsx b/gallery/components/ThemeLoader.tsx
index a968e0851..35a95c634 100644
--- a/gallery/components/ThemeLoader.tsx
+++ b/gallery/components/ThemeLoader.tsx
@@ -1,7 +1,6 @@
-import { cx, ContentResolver } from "cx/widgets";
-import { loadTheme } from "../themes";
 import { createFunctionalComponent } from "cx/ui";
-import { StringProp } from "cx/src/core";
+import { ContentResolver } from "cx/widgets";
+import { loadTheme } from "../themes";
 
 function importTheme(theme) {
    switch (theme) {
diff --git a/gallery/config/babel-config.js b/gallery/config/babel-config.js
index 6527b0784..26714d70a 100644
--- a/gallery/config/babel-config.js
+++ b/gallery/config/babel-config.js
@@ -19,7 +19,7 @@ module.exports = {
             useBuiltIns: "usage",
             cx: {
                imports: {
-                  useSrc: true,
+                  //useSrc: true,
                },
             },
          },
diff --git a/gallery/config/webpack.config.js b/gallery/config/webpack.config.js
index 4f08523de..ea52953f2 100644
--- a/gallery/config/webpack.config.js
+++ b/gallery/config/webpack.config.js
@@ -1,7 +1,5 @@
 const HtmlWebpackPlugin = require("html-webpack-plugin"),
-   merge = require("webpack-merge"),
    path = require("path"),
-   babelCfg = require("./babel-config"),
    p = (p) => path.join(__dirname, "../", p || ""),
    gtm = require("../../misc/tracking/gtm.js"),
    reactScripts = require("../../misc/reactScripts"),
@@ -10,43 +8,43 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"),
 module.exports = (production) => ({
    resolve: {
       alias: {
-         app: p("."),
-         "cx/src": p("../packages/cx/src"),
-         cx: p("../packages/cx"),
-         "cx-react": p("../packages/cx-react"),
-         "cx-theme-material": p("../packages/cx-theme-material"),
-         "cx-theme-frost": p("../packages/cx-theme-frost"),
-         "cx-theme-dark": p("../packages/cx-theme-dark"),
-         "cx-theme-aquamarine": p("../packages/cx-theme-aquamarine"),
-         "cx-theme-material-dark": p("../packages/cx-theme-material-dark"),
-         "cx-theme-space-blue": p("../packages/cx-theme-space-blue"),
-         "cx-theme-packed-dark": p("../packages/cx-theme-packed-dark"),
+         //app: p("."),
+         //"cx/src": p("../packages/cx/src"),
+         //cx: p("../packages/cx"),
+         //"cx-react": p("../packages/cx-react"),
+         // "cx-theme-material": p("../packages/cx-theme-material"),
+         // "cx-theme-frost": p("../packages/cx-theme-frost"),
+         // "cx-theme-dark": p("../packages/cx-theme-dark"),
+         // "cx-theme-aquamarine": p("../packages/cx-theme-aquamarine"),
+         // "cx-theme-material-dark": p("../packages/cx-theme-material-dark"),
+         // "cx-theme-space-blue": p("../packages/cx-theme-space-blue"),
+         // "cx-theme-packed-dark": p("../packages/cx-theme-packed-dark"),
          //uncomment the line below to alias cx-react to cx-preact or some other React replacement library
          //'cx-react': 'cx-preact',
       },
-      extensions: [".js", ".ts", ".tsx", ".json"],
+      extensions: [".ts", ".js", ".tsx", ".json"],
    },
 
    module: {
       rules: [
          {
-            test: /\.tsx?$/,
-            include: /gallery/,
+            test: /\.(ts|tsx)?$/,
+            //include: /gallery/,
             use: [
-               {
-                  loader: "babel-loader",
-                  options: babelCfg,
-               },
+               // {
+               //    loader: "babel-loader",
+               //    options: babelCfg,
+               // },
                "ts-loader",
             ],
          },
-         {
-            test: /\.js$/,
-            //add here any ES6 based library
-            include: /[\\\/](cx|cx-react|gallery|misc|cx-theme-.*)[\\\/]/,
-            loader: "babel-loader",
-            options: babelCfg,
-         },
+         // {
+         //    test: /\.js$/,
+         //    //add here any ES6 based library
+         //    include: /[\\\/](cx|cx-react|gallery|misc|cx-theme-.*)[\\\/]/,
+         //    loader: "babel-loader",
+         //    options: babelCfg,
+         // },
          {
             test: /\.(png|jpg|svg)/,
             loader: "file-loader",
@@ -73,6 +71,10 @@ module.exports = (production) => ({
                   loader: "sass-loader",
                   options: {
                      sourceMap: !production,
+                     sassOptions: {
+                        quietDeps: true,
+                        silenceDeprecations: ["import", "global-builtin", "color-functions", "slash-div"],
+                     },
                   },
                },
             ],
@@ -85,16 +87,15 @@ module.exports = (production) => ({
    },
    entry: {
       //vendor: ['cx-react', p('polyfill.js')],
-      app: [p("../misc/babelHelpers"), p("index")],
+      app: [p("index.tsx")],
    },
    output: {
-      path: p("dist"),
       filename: "[name].js",
    },
-   externals: {
-      react: "React",
-      "react-dom": "ReactDOM",
-   },
+   // externals: {
+   //    react: "React",
+   //    "react-dom": "ReactDOM",
+   // },
 
    optimization: {
       runtimeChunk: "single",
@@ -108,18 +109,6 @@ module.exports = (production) => ({
          reactScripts: production ? reactScripts : reactScriptsDev,
          favicon: p("assets/favicon.png"),
       }),
-      //new InlineManifestWebpackPlugin(),
-      // new ScriptExtHtmlWebpackPlugin({
-      //    async: /\.js$/,
-      //    preload: {
-      //       test: /(aquamarine)/,
-      //       chunks: "async"
-      //    },
-      //    prefetch: {
-      //       test: /\.js$/,
-      //       chunks: "async"
-      //    }
-      // })
    ],
 
    cache: {
diff --git a/gallery/config/webpack.dev.js b/gallery/config/webpack.dev.js
index ef3448d1a..e5c5ccd04 100644
--- a/gallery/config/webpack.dev.js
+++ b/gallery/config/webpack.dev.js
@@ -4,17 +4,18 @@ var webpack = require("webpack"),
    path = require("path");
 
 var specific = {
-   module: {
-      rules: [],
-   },
+   // module: {
+   //    rules: [],
+   // },
    mode: "development",
-   optimization: { moduleIds: "named" },
+   //optimization: { moduleIds: "named" },
    output: {
       publicPath: "/",
+      path: path.join(__dirname, ".."), //required for unknown reasons
    },
-   devtool: "eval",
+   //devtool: "eval",
    devServer: {
-      //contentBase: path.join(__dirname, ".."),
+      //static: path.join(__dirname, ".."),
       hot: true,
       port: 8088,
       historyApiFallback: true,
diff --git a/gallery/examples/baseline/index.tsx b/gallery/examples/baseline/index.tsx
index bf6b278e7..77ebb0e2b 100644
--- a/gallery/examples/baseline/index.tsx
+++ b/gallery/examples/baseline/index.tsx
@@ -1,20 +1,24 @@
-import {cx, Section, FlexRow, Button, TextField, Menu, Submenu, Checkbox, Switch} from 'cx/widgets';
-import {bind} from 'cx/ui';
+import { bind } from "cx/ui";
+import { Button, Checkbox, Menu, Section, Submenu, Switch, TextField } from "cx/widgets";
 
-export default <cx>
-    <a href="https://github.com/codaxy/cx/tree/master/gallery/examples/baseline/index.tsx" target="_blank"
-       putInto="github">Source Code</a>
-    <Section mod="well" ws style="min-width: 918px;">
-        <p>
-            All widgets respect the baseline.
-        </p>
+export default (
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/examples/baseline/index.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <Section mod="well" ws style="min-width: 918px;">
+         <p>All widgets respect the baseline.</p>
 
-        <div styles="white-space: nowrap">
-            <Checkbox value={bind("check")}/>
+         <div styles="white-space: nowrap">
+            <Checkbox value={bind("check")} />
             &nbsp;
-            <TextField value={bind("text")} placeholder="TextField"/>
+            <TextField value={bind("text")} placeholder="TextField" />
             &nbsp;
-            <Button mod="hollow" icon="search"/>
+            <Button mod="hollow" icon="search" />
             &nbsp;
             <Button mod="hollow">Hollow Button</Button>
             &nbsp;
@@ -23,21 +27,22 @@ export default <cx>
             <span style={{ marginLeft: "10px" }}>Span of text</span>
             &nbsp;
             <Menu horizontal style="display:inline-block">
-                <Submenu arrow>
-                    Dropdown
-                    <Menu putInto="dropdown">
-                        <a href="#">Item1</a>
-                        <a href="#">Item2</a>
-                    </Menu>
-                </Submenu>
+               <Submenu arrow>
+                  Dropdown
+                  <Menu putInto="dropdown">
+                     <a href="#">Item1</a>
+                     <a href="#">Item2</a>
+                  </Menu>
+               </Submenu>
             </Menu>
             &nbsp;
             <Checkbox value={bind("check")}>Check</Checkbox>
             &nbsp;
-            <Switch on={bind("check")}/>
-        </div>
-    </Section>
-</cx>
+            <Switch on={bind("check")} />
+         </div>
+      </Section>
+   </cx>
+);
 
-import {hmr} from '../../routes/hmr.js';
-hmr(module);
\ No newline at end of file
+import { hmr } from "../../routes/hmr.js";
+hmr(module);
diff --git a/gallery/global.d.ts b/gallery/global.d.ts
deleted file mode 100644
index c297fa82a..000000000
--- a/gallery/global.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare class System {
-   static import(path: string): Promise<any>
-}
-
-declare let module: any;
\ No newline at end of file
diff --git a/gallery/index.html b/gallery/index.html
index 33b2ad2e1..beb0705fe 100644
--- a/gallery/index.html
+++ b/gallery/index.html
@@ -8,7 +8,7 @@
          href="https://fonts.googleapis.com/css?family=Roboto:400,500|Open+Sans:400,500,600,700|Material+Icons|Inter"
          rel="stylesheet"
       />
-      <%= htmlWebpackPlugin.options.reactScripts %> <%= htmlWebpackPlugin.options.gtmh %>
+      <%= htmlWebpackPlugin.options.gtmh %>
    </head>
    <body>
       <%= htmlWebpackPlugin.options.gtmb %>
diff --git a/gallery/index.ts b/gallery/index.ts
deleted file mode 100644
index 9c4c96ffc..000000000
--- a/gallery/index.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Store } from 'cx/data';
-import { Url, History, startHotAppLoop, enableCultureSensitiveFormatting } from 'cx/ui';
-import { Timing, Debug } from 'cx/util';
-import {enableTooltips} from 'cx/widgets';
-//css
-import "./style";
-import Routes from './routes';
-import {registerStore} from './routes/hmr';
-
-enableTooltips();
-enableCultureSensitiveFormatting();
-
-
-function start() {
-
-   //store
-   const store = new Store();
-
-   //routing
-   Url.setBaseFromScript('app*.js');
-   History.connect(store, 'url');
-
-   //debug
-   Timing.enable('app-loop');
-   Debug.enable('app-data');
-
-   registerStore(store);
-
-   //app loop
-   let stop = startHotAppLoop(module, document.getElementById('app'), store, Routes);
-}
-
-if (typeof window["fetch"] === "undefined" || typeof window["Intl"] === "undefined") {
-   import("./polyfill")
-      .then(start);
-} else {
-   start();
-}
-
diff --git a/gallery/index.tsx b/gallery/index.tsx
new file mode 100644
index 000000000..399a544a5
--- /dev/null
+++ b/gallery/index.tsx
@@ -0,0 +1,31 @@
+import { Store } from "cx/data";
+import { Url, History, startHotAppLoop, enableCultureSensitiveFormatting } from "cx/ui";
+import { Timing, Debug } from "cx/util";
+import { enableTooltips } from "cx/widgets";
+//css
+import "./style";
+import Routes from "./routes";
+import { registerStore } from "./routes/hmr";
+
+enableTooltips();
+enableCultureSensitiveFormatting();
+
+function start() {
+   //store
+   const store = new Store();
+
+   //routing
+   Url.setBaseFromScript("app*.js");
+   History.connect(store, "url");
+
+   //debug
+   Timing.enable("app-loop");
+   Debug.enable("app-data");
+
+   registerStore(store);
+
+   //app loop
+   let stop = startHotAppLoop(module, document.getElementById("app"), store, Routes);
+}
+
+start();
diff --git a/gallery/package.json b/gallery/package.json
index 2f8c6031e..15ed57fec 100644
--- a/gallery/package.json
+++ b/gallery/package.json
@@ -4,58 +4,58 @@
    "version": "1.0.0",
    "scripts": {
       "start": "webpack-dev-server --config config/webpack.dev.js --open",
-      "build": "webpack --config config/webpack.prod.js"
+      "build": "webpack --config config/webpack.prod.js",
+      "check-types": "tsc --noEmit"
    },
    "dependencies": {
       "casual": "^1.6.2",
-      "core-js": "^3.39.0",
-      "cx": "^25.4.1",
-      "cx-react": "^24.7.1",
-      "cx-theme-aquamarine": "^18.7.3",
-      "cx-theme-dark": "^18.7.1",
-      "cx-theme-frost": "^18.7.1",
-      "cx-theme-material": "^18.7.0",
-      "cx-theme-material-dark": "^20.1.0",
-      "cx-theme-packed-dark": "^24.4.1",
-      "cx-theme-space-blue": "^24.5.1",
+      "core-js": "^3.47.0",
+      "cx": "workspace:*",
+      "cx-react": "workspace:*",
+      "cx-theme-aquamarine": "workspace:*",
+      "cx-theme-dark": "workspace:*",
+      "cx-theme-frost": "workspace:*",
+      "cx-theme-material": "workspace:*",
+      "cx-theme-material-dark": "workspace:*",
+      "cx-theme-packed-dark": "workspace:*",
+      "cx-theme-space-blue": "workspace:*",
       "intl": "^1.2.5",
       "plural": "^1.1.0",
-      "react": "^18.3.1",
-      "react-dev-utils": "^12.0.1",
-      "react-dom": "^18.3.1",
+      "react": "^19.2.3",
+      "react-dom": "^19.2.3",
       "whatwg-fetch": "^3.6.20"
    },
    "devDependencies": {
-      "@babel/core": "^7.26.0",
-      "@babel/preset-env": "^7.26.0",
-      "@babel/preset-typescript": "^7.26.0",
-      "@types/node": "^22.10.1",
-      "@types/react": "^18.3.14",
-      "babel-loader": "^9.2.1",
-      "babel-plugin-transform-cx-imports": "^21.3.0",
+      "@babel/core": "^7.28.5",
+      "@babel/preset-env": "^7.28.5",
+      "@babel/preset-typescript": "^7.28.5",
+      "@types/node": "^25.0.3",
+      "@types/react": "^19.2.7",
+      "babel-loader": "^10.0.0",
+      "babel-plugin-transform-cx-imports": "^26.0.1",
       "babel-plugin-transform-cx-jsx": "^21.3.0",
       "babel-preset-cx-env": "^24.0.0",
       "clean-webpack-plugin": "^4.0.0",
       "copy-webpack-plugin": "^12.0.2",
       "css-loader": "^7.1.2",
       "file-loader": "^6.2.0",
-      "html-webpack-plugin": "^5.6.3",
+      "html-webpack-plugin": "^5.6.5",
       "if-loader": "^1.0.2",
       "json-loader": "^0.5.7",
       "mini-css-extract-plugin": "^2.9.2",
       "modify-babel-preset": "^3.2.1",
       "sass": "^1.77.8",
-      "sass-loader": "^16.0.1",
+      "sass-loader": "^16.0.6",
       "style-loader": "^4.0.0",
       "svg-url-loader": "^8.0.0",
       "ts-loader": "^9.5.1",
-      "typescript": "^5.7.2",
+      "typescript": "^5.9.3",
       "url-loader": "^4.1.1",
-      "webpack": "^5.97.1",
+      "webpack": "^5.103.0",
       "webpack-bundle-analyzer": "^4.10.2",
       "webpack-cli": "^5.1.4",
       "webpack-combine-loaders": "^2.0.4",
-      "webpack-dev-server": "^5.1.0",
+      "webpack-dev-server": "^5.2.2",
       "webpack-merge": "^6.0.1"
    }
 }
diff --git a/gallery/polyfill.js b/gallery/polyfill.js
deleted file mode 100644
index eb33effc1..000000000
--- a/gallery/polyfill.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import "core-js/stable";
-import 'whatwg-fetch';
-
diff --git a/gallery/routes/charts/column/combination.tsx b/gallery/routes/charts/column/combination.tsx
index bb169af3f..33696234c 100644
--- a/gallery/routes/charts/column/combination.tsx
+++ b/gallery/routes/charts/column/combination.tsx
@@ -1,105 +1,125 @@
-import { cx, Section, FlexRow, Repeater, Checkbox, Grid } from 'cx/widgets';
-import { bind, expr, tpl, Controller, KeySelection } from 'cx/ui';
-import { Chart, Legend, Gridlines, LineGraph, CategoryAxis, 
-    NumericAxis, ColumnGraph, TimeAxis, Range, Marker, Column } from 'cx/charts';
-import { Svg, Line, Rectangle, Text, ClipRect } from 'cx/svg';
-import casual from '../../../util/casual';
+import { CategoryAxis, Chart, Column, Gridlines, Marker, NumericAxis } from "cx/charts";
+import { Rectangle, Svg, Text } from "cx/svg";
+import { bind, Controller, expr, KeySelection, tpl } from "cx/ui";
+import { FlexRow, Grid, Repeater, Section } from "cx/widgets";
 
-var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
 class PageController extends Controller {
    init() {
       super.init();
 
       var v1 = 100;
-      this.store.set('$page.points2', Array.from({length: categories.length}, (_, i) => ({
-         x: categories[i],
-         v1: v1 = (v1 + (Math.random() - 0.5) * 30),
-         v2: v1 + 50 + Math.random() * 100
-      })));
-
+      this.store.set(
+         "$page.points2",
+         Array.from({ length: categories.length }, (_, i) => ({
+            x: categories[i],
+            v1: (v1 = v1 + (Math.random() - 0.5) * 30),
+            v2: v1 + 50 + Math.random() * 100,
+         })),
+      );
    }
 }
 
 var columnSelection = new KeySelection({
-   keyField: 'x',
-   bind: '$page.selection',
-   record: { bind: '$point' },
-   index: { bind: '$index' }
+   keyField: "x",
+   bind: "$page.selection",
+   record: { bind: "$point" },
+   index: { bind: "$index" },
 });
 
 let mw = 768;
 
-export default <cx>
-    <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/charts/column/combination.tsx" target="_blank" putInto="github">Source Code</a>
-    <Section mod="well" style="width: 100%" controller={PageController}>
-        <FlexRow target="desktop" spacing="xlarge">
+export default (
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/charts/column/combination.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <Section mod="well" style="width: 100%" controller={PageController}>
+         <FlexRow target="desktop" spacing="xlarge">
             <Svg style="flex:1.25; min-height: 400px; width: 90%; touch-action: pan-y;">
-               <Chart offset="20 -20 -40 40" axes={{ 
-                        x: window.innerWidth >= mw ? CategoryAxis : {type: CategoryAxis, labelAnchor: "end", labelRotation: -45, labelDy: '0.35em' },
-                        y: { type: NumericAxis, vertical: true, snapToTicks: 0 } }}>
-                  <Gridlines/>
+               <Chart
+                  offset="20 -20 -40 40"
+                  axes={{
+                     x:
+                        window.innerWidth >= mw
+                           ? CategoryAxis
+                           : { type: CategoryAxis, labelAnchor: "end", labelRotation: -45, labelDy: "0.35em" },
+                     y: { type: NumericAxis, vertical: true, snapToTicks: 0 },
+                  }}
+               >
+                  <Gridlines />
                   <Repeater records={bind("$page.points2")} recordName="$point">
-                     <Column colorIndex={expr("{$index}")}
-                             width={0.5}
-                             offset={0}
-                             x={bind("$point.x")}
-                             y={bind("$point.v1")}
-                             tooltip={tpl("{$point.x} {$point.v1:n}")}
-                             selection={columnSelection} />
-                         
-                     <Column colorIndex={expr("{$index}+2")}
-                             width={0.5}
-                             offset={0}
-                             x={bind("$point.x")}
-                             y0={bind("$point.v1")}
-                             y={bind("$point.v2")}
-                             tooltip="X2"
-                             selection={columnSelection} />
-                         
-                     <Marker x={bind("$point.x")}
-                             y={bind("$point.v1")}
-                             xOffset={0}
-                             size={10}
-                             colorIndex={expr("{$index}")}
-                             style="cursor:move;"
-                             draggableY>
-                        <Rectangle anchors="0 1 0 0"
-                                   offset="-30 10 -10 -10"
-                                   mod="cover">
+                     <Column
+                        colorIndex={expr("{$index}")}
+                        width={0.5}
+                        offset={0}
+                        x={bind("$point.x")}
+                        y={bind("$point.v1")}
+                        tooltip={tpl("{$point.x} {$point.v1:n}")}
+                        selection={columnSelection}
+                     />
+
+                     <Column
+                        colorIndex={expr("{$index}+2")}
+                        width={0.5}
+                        offset={0}
+                        x={bind("$point.x")}
+                        y0={bind("$point.v1")}
+                        y={bind("$point.v2")}
+                        tooltip="X2"
+                        selection={columnSelection}
+                     />
+
+                     <Marker
+                        x={bind("$point.x")}
+                        y={bind("$point.v1")}
+                        xOffset={0}
+                        size={10}
+                        colorIndex={expr("{$index}")}
+                        style="cursor:move;"
+                        draggableY
+                     >
+                        <Rectangle anchors="0 1 0 0" offset="-30 10 -10 -10" mod="cover">
                            <Text tpl="{$point.v1:n;0}" ta="middle" dy="0.4em" />
                         </Rectangle>
                      </Marker>
-                     <Marker x={bind("$point.x")}
-                             y={bind("$point.v2")}
-                             xOffset={0}
-                             size={10}
-                             colorIndex={expr("{$index}+2")}
-                             style="cursor:move;"
-                             draggableY >
-                        <Rectangle anchors="0 1 0 0"
-                                   offset="-30 10 -10 -10"
-                                   mod="cover">
+                     <Marker
+                        x={bind("$point.x")}
+                        y={bind("$point.v2")}
+                        xOffset={0}
+                        size={10}
+                        colorIndex={expr("{$index}+2")}
+                        style="cursor:move;"
+                        draggableY
+                     >
+                        <Rectangle anchors="0 1 0 0" offset="-30 10 -10 -10" mod="cover">
                            <Text tpl="{$point.v2:n;0}" ta="middle" dy="0.4em" />
                         </Rectangle>
                      </Marker>
                   </Repeater>
                </Chart>
             </Svg>
-            <Grid style="flex: 0.75;"
-                records={bind("$page.points2")}
-                columns={[
-                   { header: 'Month', field: 'x' },
-                   { header: 'V1', field: 'v1', format: 'n;2', align: "right" },
-                   { header: 'V2', field: 'v2', format: 'n;2', align: "right" },
-                   { header: 'Delta', value: { expr: "{$record.v2}-{$record.v1}" }, format: 'n;2', align: "right" },
-                ]}
-                selection={{type: KeySelection, keyField: 'x', bind: '$page.selection' }}
-                scrollable
+            <Grid
+               style="flex: 0.75;"
+               records={bind("$page.points2")}
+               columns={[
+                  { header: "Month", field: "x" },
+                  { header: "V1", field: "v1", format: "n;2", align: "right" },
+                  { header: "V2", field: "v2", format: "n;2", align: "right" },
+                  { header: "Delta", value: { expr: "{$record.v2}-{$record.v1}" }, format: "n;2", align: "right" },
+               ]}
+               selection={{ type: KeySelection, keyField: "x", bind: "$page.selection" }}
+               scrollable
             />
-        </FlexRow>
-    </Section>
-</cx>
+         </FlexRow>
+      </Section>
+   </cx>
+);
 
-import { hmr } from '../../hmr.js';
- +hmr(module);
\ No newline at end of file
+import { hmr } from "../../hmr.js";
++hmr(module);
diff --git a/gallery/routes/charts/column/normalized.tsx b/gallery/routes/charts/column/normalized.tsx
index c13352fca..1b8856239 100644
--- a/gallery/routes/charts/column/normalized.tsx
+++ b/gallery/routes/charts/column/normalized.tsx
@@ -1,11 +1,9 @@
-import { cx, Section, FlexRow, Repeater, Checkbox, Grid } from 'cx/widgets';
-import { bind, expr, tpl, Controller, KeySelection } from 'cx/ui';
-import { Chart, Legend, Gridlines, LineGraph, CategoryAxis, 
-    NumericAxis, ColumnGraph, TimeAxis, Range, Marker, Column } from 'cx/charts';
-import { Svg, Line, Rectangle, Text, ClipRect } from 'cx/svg';
-import casual from '../../../util/casual';
+import { CategoryAxis, Chart, Column, Gridlines, Legend, NumericAxis } from "cx/charts";
+import { Svg } from "cx/svg";
+import { bind, Controller, KeySelection, tpl } from "cx/ui";
+import { Repeater, Section } from "cx/widgets";
 
-var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
 class PageController extends Controller {
    init() {
@@ -14,69 +12,91 @@ class PageController extends Controller {
       var v1 = 500;
       var v2 = 500;
       var v3 = 500;
-      this.store.set('$page.points4', Array.from({length: 10}, (_, i) => ({
-         x: 2000 + i,
-         v1: v1 = v1 + (Math.random() - 0.5) * 100,
-         v2: v2 = v2 + (Math.random() - 0.5) * 100,
-         v3: v3 = v3 + (Math.random() - 0.5) * 100,
-      })));
-
+      this.store.set(
+         "$page.points4",
+         Array.from({ length: 10 }, (_, i) => ({
+            x: 2000 + i,
+            v1: (v1 = v1 + (Math.random() - 0.5) * 100),
+            v2: (v2 = v2 + (Math.random() - 0.5) * 100),
+            v3: (v3 = v3 + (Math.random() - 0.5) * 100),
+         })),
+      );
    }
 }
 
 var columnSelection = new KeySelection({
-   keyField: 'x',
-   bind: '$page.selection',
-   record: { bind: '$point' },
-   index: { bind: '$index' }
+   keyField: "x",
+   bind: "$page.selection",
+   record: { bind: "$point" },
+   index: { bind: "$index" },
 });
 
 let mw = 768;
 
-export default <cx>
-    <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/charts/column/normalized.tsx" target="_blank" putInto="github">Source Code</a>
-    <Section mod="well"
-        controller={PageController}
-        bodyStyle="display:flex; flex-direction: column;"
-        style="height: 100%"
-    >
-        <Svg style="width: 100%; flex: 1;">
-           <Chart offset="20 -20 -40 40" axes={{
-                 x: window.innerWidth >= mw ? CategoryAxis : {type: CategoryAxis, labelAnchor: "end", labelRotation: -45, labelDy: '0.35em' },
-                 y: { type: NumericAxis, vertical: true, normalized: true, format: 'p;0' }
-              }}>
-              <Gridlines/>
-              <Repeater records={bind("$page.points4")} recordName="$point">
-                 <Column name="V1"
-                         active={bind("$page.normalized.v1")}
-                         colorIndex={0}
-                         x={bind("$point.x")}
-                         y={bind("$point.v1")}
-                         tooltip={tpl("V1 {$point.x} {$point.v1:n}")}
-                         stacked />
-                        
-                 <Column name="V2"
-                         active={bind("$page.normalized.v2")}
-                         colorIndex={2}
-                         x={bind("$point.x")}
-                         y={bind("$point.v2")}
-                         tooltip={tpl("V2 {$point.x} {$point.v2:n}")}
-                         stacked />
-                        
-                 <Column name="V3"
-                         active={bind("$page.normalized.v3")}
-                         colorIndex={4}
-                         x={bind("$point.x")}
-                         y={bind("$point.v3")}
-                         tooltip={tpl("V3 {$point.x} {$point.v3:n}")}
-                         stacked />
-                        
-              </Repeater>
-           </Chart>      
-        </Svg>
-        <Legend /> 
-    </Section>
-</cx>
+export default (
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/charts/column/normalized.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <Section
+         mod="well"
+         controller={PageController}
+         bodyStyle="display:flex; flex-direction: column;"
+         style="height: 100%"
+      >
+         <Svg style="width: 100%; flex: 1;">
+            <Chart
+               offset="20 -20 -40 40"
+               axes={{
+                  x:
+                     window.innerWidth >= mw
+                        ? CategoryAxis
+                        : { type: CategoryAxis, labelAnchor: "end", labelRotation: -45, labelDy: "0.35em" },
+                  y: { type: NumericAxis, vertical: true, normalized: true, format: "p;0" },
+               }}
+            >
+               <Gridlines />
+               <Repeater records={bind("$page.points4")} recordName="$point">
+                  <Column
+                     name="V1"
+                     active={bind("$page.normalized.v1")}
+                     colorIndex={0}
+                     x={bind("$point.x")}
+                     y={bind("$point.v1")}
+                     tooltip={tpl("V1 {$point.x} {$point.v1:n}")}
+                     stacked
+                  />
+
+                  <Column
+                     name="V2"
+                     active={bind("$page.normalized.v2")}
+                     colorIndex={2}
+                     x={bind("$point.x")}
+                     y={bind("$point.v2")}
+                     tooltip={tpl("V2 {$point.x} {$point.v2:n}")}
+                     stacked
+                  />
+
+                  <Column
+                     name="V3"
+                     active={bind("$page.normalized.v3")}
+                     colorIndex={4}
+                     x={bind("$point.x")}
+                     y={bind("$point.v3")}
+                     tooltip={tpl("V3 {$point.x} {$point.v3:n}")}
+                     stacked
+                  />
+               </Repeater>
+            </Chart>
+         </Svg>
+         <Legend />
+      </Section>
+   </cx>
+);
 
-import { hmr } from '../../hmr.js';
- +hmr(module);
\ No newline at end of file
+import { hmr } from "../../hmr.js";
++hmr(module);
diff --git a/gallery/routes/charts/pie-chart/multilevel.tsx b/gallery/routes/charts/pie-chart/multilevel.tsx
index 5ebe67b39..7f37d952e 100644
--- a/gallery/routes/charts/pie-chart/multilevel.tsx
+++ b/gallery/routes/charts/pie-chart/multilevel.tsx
@@ -1,77 +1,92 @@
-import {cx, Section, FlexRow, Repeater} from 'cx/widgets';
-import {bind, expr, tpl, Controller, KeySelection} from 'cx/ui';
-import { PieChart, PieSlice, Legend, ColorMap } from 'cx/charts';
-import {Svg, Line, Rectangle, Text} from 'cx/svg';
+import { cx, Section, FlexRow, Repeater } from "cx/widgets";
+import { bind, expr, tpl, Controller, KeySelection } from "cx/ui";
+import { PieChart, PieSlice, Legend, ColorMap } from "cx/charts";
+import { Svg, Line, Rectangle, Text } from "cx/svg";
 
 class PageController extends Controller {
    init() {
       super.init();
-      this.store.set('multilevel.points', Array.from({length: 7}).map((_, i) => {
-         var value = 20 + Math.random() * 100;
-         return {
-            x: i * 5,
-            v: value,
-            slices: Array.from({length: 5}).map(x=>({sv: value / 5}))
-         }
-      }));
+      this.store.set(
+         "multilevel.points",
+         Array.from({ length: 7 }).map((_, i) => {
+            var value = 20 + Math.random() * 100;
+            return {
+               x: i * 5,
+               v: value,
+               slices: Array.from({ length: 5 }).map((x) => ({ sv: value / 5 })),
+            };
+         }),
+      );
    }
 }
 
-export default <cx>
-    <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/charts/pie-chart/states.tsx" target="_blank" putInto="github">Source Code</a>
-    <Section mod="well" 
-        controller={PageController} 
-        style="height: 100%"
-        bodyStyle="display: flex; flex-direction: column;">
-        <Legend />
-        <Svg style="width: 100%; flex: 1;">
-           <PieChart angle={360}>
-              <Repeater records={bind("multilevel.points")}>
-                 <PieSlice value={bind('$record.v')}
-                            active={bind('$record.active')}
-                             colorIndex={expr('{$index} * 3 % 16')}
-                             r={55}
-                             r0={20}
-                             offset={3}
-                             name={tpl("Item {$index}")}
-                             selection={{
-                                type: KeySelection,
-                                bind:'multilevel.selection',
-                                records: {bind:'multilevel.points'},
-                                record: {bind:'$record'},
-                                index: {bind:'$index'},
-                                keyField: 'x'
-                             }}>
-                 </PieSlice>
-                 <Repeater records={bind("$record.slices")} recordName="$slice" indexName="$sliceIndex">
-                    <PieSlice value={bind('$slice.sv')}
-                               active={bind('$record.active')}
-                               colorIndex={expr('{$index} * 3 % 16')}
-                               r={90}
-                               r0={58}
-                               offset={3}
-                               name={tpl("Slice {$sliceIndex}")}
-                               legend={expr("{multilevel.selection} == {$record.x} ? 'slice' : false")}
-                               stack="outer"
-                               style={{
-                                fillOpacity: {expr: '0.3 + 0.7 * ({$sliceIndex} / 4)'}
-                               }}
-                               selection={{
-                                   type: KeySelection,
-                                   bind:'multilevel.selection',
-                                   records: {bind:'multilevel.points'},
-                                   record: {bind:'$record'},
-                                   index: {bind:'$index'},
-                                   keyField: 'x'
-                                }}>
-                    </PieSlice>
-                 </Repeater>
-              </Repeater>
-           </PieChart>
-        </Svg>
-        <Legend name="slice" />
-    </Section>
-</cx>
+export default (
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/charts/pie-chart/states.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <Section
+         mod="well"
+         controller={PageController}
+         style="height: 100%"
+         bodyStyle="display: flex; flex-direction: column;"
+      >
+         <Legend />
+         <Svg style="width: 100%; flex: 1;">
+            <PieChart angle={360}>
+               <Repeater records={bind("multilevel.points")}>
+                  <PieSlice
+                     value={bind("$record.v")}
+                     active={bind("$record.active")}
+                     colorIndex={expr("{$index} * 3 % 16")}
+                     r={55}
+                     r0={20}
+                     offset={3}
+                     name={tpl("Item {$index}")}
+                     selection={{
+                        type: KeySelection,
+                        bind: "multilevel.selection",
+                        records: { bind: "multilevel.points" },
+                        record: { bind: "$record" },
+                        index: { bind: "$index" },
+                        keyField: "x"
+                     }}
+                  ></PieSlice>
+                  <Repeater records={bind("$record.slices")} recordName="$slice" indexName="$sliceIndex">
+                     <PieSlice
+                        value={bind("$slice.sv")}
+                        active={bind("$record.active")}
+                        colorIndex={expr("{$index} * 3 % 16")}
+                        r={90}
+                        r0={58}
+                        offset={3}
+                        name={tpl("Slice {$sliceIndex}")}
+                        legend={expr("{multilevel.selection} == {$record.x} ? 'slice' : false")}
+                        stack="outer"
+                        style={{
+                           fillOpacity: { expr: "0.3 + 0.7 * ({$sliceIndex} / 4)" },
+                        }}
+                        selection={{
+                           type: KeySelection,
+                           bind: "multilevel.selection",
+                           records: { bind: "multilevel.points" },
+                           record: { bind: "$record" },
+                           index: { bind: "$index" },
+                           keyField: "x",
+                        }}
+                     ></PieSlice>
+                  </Repeater>
+               </Repeater>
+            </PieChart>
+         </Svg>
+         <Legend name="slice" />
+      </Section>
+   </cx>
+);
 
-import {hmr} from '../../hmr.js';
-hmr(module);
\ No newline at end of file
+import { hmr } from "../../hmr.js";
+hmr(module);
diff --git a/gallery/routes/charts/scatter-graph/standard.tsx b/gallery/routes/charts/scatter-graph/standard.tsx
index 301ae7e37..faf2af913 100644
--- a/gallery/routes/charts/scatter-graph/standard.tsx
+++ b/gallery/routes/charts/scatter-graph/standard.tsx
@@ -1,59 +1,75 @@
-import {cx, Section, FlexRow} from 'cx/widgets';
-import {bind, expr, tpl, Controller} from 'cx/ui';
-import {Chart, ScatterGraph, NumericAxis, Gridlines, Legend} from 'cx/charts';
-import {Svg} from 'cx/svg';
+import { cx, Section, FlexRow } from "cx/widgets";
+import { bind, expr, tpl, Controller } from "cx/ui";
+import { Chart, ScatterGraph, NumericAxis, Gridlines, Legend } from "cx/charts";
+import { Svg } from "cx/svg";
 
 class PageController extends Controller {
-    init() {
-        super.init();
-        this.store.set('$page.reds', Array.from({length: 200}, (_, i) => ({
+   init() {
+      super.init();
+      this.store.set(
+         "$page.reds",
+         Array.from({ length: 200 }, (_, i) => ({
             x: 100 + Math.random() * 300,
             y: Math.random() * 300,
-            size: Math.random() * 20
-        })));
-        this.store.set('$page.blues', Array.from({length: 200}, (_, i) => ({
+            size: Math.random() * 20,
+         })),
+      );
+      this.store.set(
+         "$page.blues",
+         Array.from({ length: 200 }, (_, i) => ({
             x: Math.random() * 300,
             y: 100 + Math.random() * 300,
-            size: Math.random() * 20
-        })));
-    }
+            size: Math.random() * 20,
+         })),
+      );
+   }
 }
 
-export default <cx>
-    <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/charts/scatter-graph/standard.tsx" target="_blank"
-       putInto="github">Source Code</a>
-    <Section
-        mod="card"
-        controller={PageController}
-        style="height: 100%;"
-        bodyStyle="display: flex; flex-direction: column;"
-    >
-        <Svg style="min-width:400px; flex: 1">
-            <Chart offset="20 -20 -40 40" axes={{
-                x: { type: NumericAxis, snapToTicks: 1 },
-                y: { type: NumericAxis, vertical: true, snapToTicks: 1 }
-            }}>
-                <Gridlines />
-                <ScatterGraph
-                    data={bind("$page.reds")}
-                    name="Reds"
-                    colorIndex={1}
-                    shape="square"
-                    sizeField="size"
-                    active={bind("$page.showReds")}
-                />
-                <ScatterGraph
-                    data={bind("$page.blues")}
-                    name="Blues"
-                    colorIndex={5}
-                    sizeField="size"
-                    active={bind("$page.showBlues")}
-                />
+export default (
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/charts/scatter-graph/standard.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <Section
+         mod="card"
+         controller={PageController}
+         style="height: 100%;"
+         bodyStyle="display: flex; flex-direction: column;"
+      >
+         <Svg style="min-width:400px; flex: 1">
+            <Chart
+               offset="20 -20 -40 40"
+               axes={{
+                  x: { type: NumericAxis, snapToTicks: 1 },
+                  y: { type: NumericAxis, vertical: true, snapToTicks: 1 },
+               }}
+            >
+               <Gridlines />
+               <ScatterGraph
+                  data={bind("$page.reds")}
+                  name="Reds"
+                  colorIndex={1}
+                  shape="square"
+                  sizeField="size"
+                  active={bind("$page.showReds")}
+               />
+               <ScatterGraph
+                  data={bind("$page.blues")}
+                  name="Blues"
+                  colorIndex={5}
+                  sizeField="size"
+                  active={bind("$page.showBlues")}
+               />
             </Chart>
-        </Svg>
-        <Legend />
-    </Section>
-</cx>
+         </Svg>
+         <Legend />
+      </Section>
+   </cx>
+);
 
-import {hmr} from '../../hmr.js';
-hmr(module);
\ No newline at end of file
+import { hmr } from "../../hmr.js";
+hmr(module);
diff --git a/gallery/routes/general/grids/drag-drop.tsx b/gallery/routes/general/grids/drag-drop.tsx
index 98dd01709..1515193ca 100644
--- a/gallery/routes/general/grids/drag-drop.tsx
+++ b/gallery/routes/general/grids/drag-drop.tsx
@@ -1,123 +1,118 @@
-import {DragHandle, FlexRow, Grid, HtmlElement, Section, cx} from "cx/widgets";
-import {Controller, KeySelection, bind} from "cx/ui";
+import { Controller, KeySelection, bind } from "cx/ui";
+import { DragHandle, FlexRow, Grid, Section } from "cx/widgets";
 
 //Filtering not implemented to keep it short
 function insertElement(array, index, ...args) {
-    return [...array.slice(0, index), ...args, ...array.slice(index)];
+   return [...array.slice(0, index), ...args, ...array.slice(index)];
 }
 
 function move(store, target, e) {
-    let selection = e.source.records.map(r => r.data);
+   let selection = e.source.records.map((r) => r.data);
 
-    store.update(
-        e.source.data.source,
-        array => array.filter((a, i) => selection.indexOf(a) == -1)
-    );
+   store.update(e.source.data.source, (array) => array.filter((a, i) => selection.indexOf(a) == -1));
 
-    if (e.source.data.source == target) e.source.records.forEach(record => {
-        if (record.index < e.target.insertionIndex) e.target.insertionIndex--;
-    });
+   if (e.source.data.source == target)
+      e.source.records.forEach((record) => {
+         if (record.index < e.target.insertionIndex) e.target.insertionIndex--;
+      });
 
-    store.update(target, insertElement, e.target.insertionIndex, ...selection);
+   store.update(target, insertElement, e.target.insertionIndex, ...selection);
 }
 
 class PageController extends Controller {
-    init() {
-        this.store.init(
-            "grid1",
-            Array.from({length: 10}, (_, c) => ({
-                id: c + 1,
-                name: "Item " + (c + 1),
-                number: Math.random() * 100
-            }))
-        );
+   init() {
+      this.store.init(
+         "grid1",
+         Array.from({ length: 10 }, (_, c) => ({
+            id: c + 1,
+            name: "Item " + (c + 1),
+            number: Math.random() * 100,
+         })),
+      );
 
-        this.store.init(
-            "grid2",
-            Array.from({length: 10}, (_, c) => ({
-                id: 10000 + c + 1,
-                name: "Item " + (c + 1),
-                number: Math.random() * 100
-            }))
-        );
-    }
+      this.store.init(
+         "grid2",
+         Array.from({ length: 10 }, (_, c) => ({
+            id: 10000 + c + 1,
+            name: "Item " + (c + 1),
+            number: Math.random() * 100,
+         })),
+      );
+   }
 }
-;
-
 export default (
-    <cx>
-        <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/drag-drop.tsx" target="_blank"
-            putInto="github">Source Code</a>
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/drag-drop.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
 
-        <FlexRow target="tablet" wrap controller={PageController} spacing="large">
-            <Section mod="well" title="Full Row" hLevel={4}>
-                <Grid
-                    records={bind("grid1")}
-                    scrollable
-                    style="height: 400px"
-                    columns={
-                        [
-                            {
-                                field: "name",
-                                header: "Name",
-                                sortable: true,
-                                style: "width: 300px"
-                            },
-                            {
-                                field: "number",
-                                header: "Number",
-                                format: "n;2",
-                                sortable: true,
-                                align: "right"
-                            }
-                        ]
-                    }
-                    dragSource={{data: {type: "record", source: "grid1"}}}
-                    onDropTest={e => e.source.data.type == "record"}
-                    onDrop={(e, {store}) => move(store, "grid1", e)}
-                    selection={{type: KeySelection, multiple: true, bind: "s1"}}
-                />
-            </Section>
-            <Section mod="well" title="Row Handle" hLevel={4}>
-                <Grid
-                    records={bind("grid2")}
-                    scrollable
-                    style="height: 400px"
-                    columns={[
-                        {
-                            items: (
-                                <cx>
-                                    <DragHandle style="cursor:move">
-                                        ☰
-                                    </DragHandle>
-                                </cx>
-                            )
-                        },
-                        {
-                            style: "width: 300px",
-                            field: "name",
-                            header: "Name",
-                            sortable: true
-                        },
-                        {
-                            field: "number",
-                            header: "Number",
-                            format: "n;2",
-                            sortable: true,
-                            align: "right"
-                        }
-                    ]}
-                    dragSource={
-                        {mode: "copy", data: {type: "record", source: "grid2"}}
-                    }
-                    dropZone={{mode: "insertion"}}
-                    onDropTest={e => e.source.data.type == "record"}
-                    onDrop={(e, {store}) => move(store, "grid2", e)}
-                />
-            </Section>
-        </FlexRow>
-    </cx>
+      <FlexRow target="tablet" wrap controller={PageController} spacing="large">
+         <Section mod="well" title="Full Row" hLevel={4}>
+            <Grid
+               records={bind("grid1")}
+               scrollable
+               style="height: 400px"
+               columns={[
+                  {
+                     field: "name",
+                     header: "Name",
+                     sortable: true,
+                     style: "width: 300px",
+                  },
+                  {
+                     field: "number",
+                     header: "Number",
+                     format: "n;2",
+                     sortable: true,
+                     align: "right",
+                  },
+               ]}
+               dragSource={{ data: { type: "record", source: "grid1" } }}
+               onDropTest={(e) => e.source.data.type == "record"}
+               onDrop={(e, { store }) => move(store, "grid1", e)}
+               selection={{ type: KeySelection, multiple: true, bind: "s1" }}
+            />
+         </Section>
+         <Section mod="well" title="Row Handle" hLevel={4}>
+            <Grid
+               records={bind("grid2")}
+               scrollable
+               style="height: 400px"
+               columns={[
+                  {
+                     items: (
+                        <cx>
+                           <DragHandle style="cursor:move">☰</DragHandle>
+                        </cx>
+                     ),
+                  },
+                  {
+                     style: "width: 300px",
+                     field: "name",
+                     header: "Name",
+                     sortable: true,
+                  },
+                  {
+                     field: "number",
+                     header: "Number",
+                     format: "n;2",
+                     sortable: true,
+                     align: "right",
+                  },
+               ]}
+               dragSource={{ mode: "copy", data: { type: "record", source: "grid2" } }}
+               dropZone={{ mode: "insertion" }}
+               onDropTest={(e) => e.source.data.type == "record"}
+               onDrop={(e, { store }) => move(store, "grid2", e)}
+            />
+         </Section>
+      </FlexRow>
+   </cx>
 );
 
-import {hmr} from '../../hmr.js';
-hmr(module);
\ No newline at end of file
+import { hmr } from "../../hmr.js";
+hmr(module);
diff --git a/gallery/routes/general/grids/dynamic-grouping.tsx b/gallery/routes/general/grids/dynamic-grouping.tsx
index 119405a29..f6ec0ff9e 100644
--- a/gallery/routes/general/grids/dynamic-grouping.tsx
+++ b/gallery/routes/general/grids/dynamic-grouping.tsx
@@ -1,119 +1,113 @@
-import {Grid, HtmlElement, LookupField, Section, cx} from "cx/widgets";
-import {Controller, bind} from "cx/ui";
-import casual from '../../../util/casual';
+import { Controller, bind } from "cx/ui";
+import { Grid, LookupField, Section } from "cx/widgets";
+import casual from "../../../util/casual";
 import "../../../util/plural";
 
 class PageController extends Controller {
+   onInit() {
+      //init grid data
+      this.store.set(
+         "$page.records",
+         Array.from({ length: 100 }).map((v, i) => ({
+            id: i + 1,
+            fullName: casual.full_name,
+            continent: casual.continent,
+            browser: casual.browser,
+            os: casual.operating_system,
+            visits: casual.integer(1, 100),
+         })),
+      );
 
-    onInit() {
-        //init grid data
-        this.store.set(
-            "$page.records",
-            Array
-                .from({length: 100})
-                .map((v, i) => ({
-                    id: i + 1,
-                    fullName: casual.full_name,
-                    continent: casual.continent,
-                    browser: casual.browser,
-                    os: casual.operating_system,
-                    visits: casual.integer(1, 100)
-                }))
-        );
+      //init grouping options
+      this.store.set("$page.groupableFields", [
+         { id: "continent", text: "Continent" },
+         { id: "browser", text: "Browser" },
+         { id: "os", text: "Operating System" },
+      ]);
 
-        //init grouping options
-        this.store.set("$page.groupableFields", [
-            {id: "continent", text: "Continent"},
-            {id: "browser", text: "Browser"},
-            {id: "os", text: "Operating System"}
-        ]);
-
-        this.store.set("$page.groups", [{id: "browser", text: "Browser"}]);
-
-        //when changed, apply grouping to the grid
-        this.addTrigger("grouping", ["$page.groups"], g => {
-            var groupings = [{key: {}, showFooter: true}];
-            groupings.push(...(g || []).map(x => x.id));
-            var grid = this.widget.findFirst(Grid);
-            grid.groupBy(groupings, {autoConfigure: true});
-        }, true);
-    }
+      this.store.set("$page.groups", [{ id: "browser", text: "Browser" }]);
+   }
 }
 
-
 export default (
-    <cx>
-        <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/dynamic-grouping.tsx"
-            target="_blank" putInto="github">Source Code</a>
-        <Section
-            mod="well"
-            style="height: 100%"
-            bodyStyle="display:flex; flex-direction:column"
-            controller={PageController}
-        >
-            <p>
-                Group by: <LookupField
-                records={bind("$page.groups")}
-                options={bind("$page.groupableFields")}
-                multiple={true}
-            />
-            </p>
-            <Grid
-                records={bind("$page.records")}
-                style={{width: "100%", flex: '1 1 0%'}}
-                scrollable
-                columns={
-                    [
-                        {
-                            header: "Name",
-                            field: "fullName",
-                            sortable: true,
-                            aggregate: "count",
-                            footer: {
-                                expr: '({$group.$level} > 1 ? {$group.$name:s:TOTAL} + " - " : "") + {$group.fullName} + " " + {$group.fullName:plural;item}'
-                            }
-                        },
-                        {
-                            header: "Continent",
-                            field: "continent",
-                            sortable: true,
-                            aggregate: "distinct",
-                            aggregateField: "continents",
-                            footer: {
-                                tpl: "{$group.continents} {$group.continents:plural;continent}"
-                            }
-                        },
-                        {
-                            header: "Browser",
-                            field: "browser",
-                            sortable: true,
-                            aggregate: "distinct",
-                            aggregateField: "browsers",
-                            footer: {
-                                tpl: "{$group.browsers} {$group.browsers:plural;browser}"
-                            }
-                        },
-                        {
-                            header: "OS",
-                            field: "os",
-                            sortable: true,
-                            aggregate: "distinct",
-                            aggregateField: "oss",
-                            footer: {tpl: "{$group.oss} {$group.oss:plural;OS}"}
-                        },
-                        {
-                            header: "Visits",
-                            field: "visits",
-                            sortable: true,
-                            aggregate: "sum",
-                            align: "right"
-                        }
-                    ]
-                }
-            />
-        </Section>
-    </cx>
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/dynamic-grouping.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <Section
+         mod="well"
+         style="height: 100%"
+         bodyStyle="display:flex; flex-direction:column"
+         controller={PageController}
+      >
+         <p>
+            Group by:{" "}
+            <LookupField records={bind("$page.groups")} options={bind("$page.groupableFields")} multiple={true} />
+         </p>
+         <Grid
+            records={bind("$page.records")}
+            style={{ width: "100%", flex: "1 1 0%" }}
+            scrollable
+            groupingParams={bind("$page.groups")}
+            onGetGrouping={(g) => {
+               var groupings = [{ key: {}, showFooter: true }];
+               groupings.push(...(g || []).map((x) => x.id));
+               return groupings;
+            }}
+            columns={[
+               {
+                  header: "Name",
+                  field: "fullName",
+                  sortable: true,
+                  aggregate: "count",
+                  footer: {
+                     expr: '({$group.$level} > 1 ? {$group.$name:s:TOTAL} + " - " : "") + {$group.fullName} + " " + {$group.fullName:plural;item}',
+                  },
+               },
+               {
+                  header: "Continent",
+                  field: "continent",
+                  sortable: true,
+                  aggregate: "distinct",
+                  aggregateField: "continents",
+                  footer: {
+                     tpl: "{$group.continents} {$group.continents:plural;continent}",
+                  },
+               },
+               {
+                  header: "Browser",
+                  field: "browser",
+                  sortable: true,
+                  aggregate: "distinct",
+                  aggregateField: "browsers",
+                  footer: {
+                     tpl: "{$group.browsers} {$group.browsers:plural;browser}",
+                  },
+               },
+               {
+                  header: "OS",
+                  field: "os",
+                  sortable: true,
+                  aggregate: "distinct",
+                  aggregateField: "oss",
+                  footer: { tpl: "{$group.oss} {$group.oss:plural;OS}" },
+               },
+               {
+                  header: "Visits",
+                  field: "visits",
+                  sortable: true,
+                  aggregate: "sum",
+                  align: "right",
+               },
+            ]}
+         />
+      </Section>
+   </cx>
 );
 
-import {hmr} from '../../hmr.js';
-hmr(module);
\ No newline at end of file
+import { hmr } from "../../hmr.js";
+hmr(module);
diff --git a/gallery/routes/general/grids/filtering.tsx b/gallery/routes/general/grids/filtering.tsx
index 4048c9f3c..1d4131164 100644
--- a/gallery/routes/general/grids/filtering.tsx
+++ b/gallery/routes/general/grids/filtering.tsx
@@ -1,165 +1,139 @@
-import { Grid, HtmlElement, Pagination, TextField, Section, Select, cx } from "cx/widgets";
-import { Controller, bind } from "cx/ui";
 import { getComparer } from "cx/data";
-import casual from '../../../util/casual';
+import { Controller, bind } from "cx/ui";
+import { Grid, Pagination, Section, Select, TextField } from "cx/widgets";
+import casual from "../../../util/casual";
 
 class PageController extends Controller {
-  init() {
-    super.init();
+   init() {
+      super.init();
 
-    var dataSet = Array
-      .from({ length: 1000 })
-      .map((v, i) => ({
-        id: i + 1,
-        fullName: casual.full_name,
-        phone: casual.phone,
-        city: casual.city
+      var dataSet = Array.from({ length: 1000 }).map((v, i) => ({
+         id: i + 1,
+         fullName: casual.full_name,
+         phone: casual.phone,
+         city: casual.city,
       }));
 
-    this.store.init("$page.pageSize", 20);
-    this.store.init("$page.filter", { name: null, phone: null, city: null });
-
-    //if context changes, go to the first page
-    this.addTrigger(
-      "page",
-      [ "$page.pageSize", "$page.sorters", "$page.filter" ],
-      () => {
-        this.store.set("$page.page", 1);
-      },
-      true
-    );
+      this.store.init("$page.pageSize", 20);
+      this.store.init("$page.filter", { name: null, phone: null, city: null });
 
-    this.addTrigger(
-      "pagination",
-      ["$page.pageSize", "$page.page", "$page.sorters", "$page.filter"],
-      (size, page, sorters, filter) => {
-        //simulate server call
-        setTimeout(
-          () => {
-            var filtered = dataSet;
-            if (filter) {
-              if (filter.name) {
-                var checks = filter.name
-                  .split(" ")
-                  .map(w => new RegExp(w, "gi"));
-                filtered = filtered.filter(
-                  x => checks.every(ex => x.fullName.match(ex))
-                );
-              }
+      //if context changes, go to the first page
+      this.addTrigger(
+         "page",
+         ["$page.pageSize", "$page.sorters", "$page.filter"],
+         () => {
+            this.store.set("$page.page", 1);
+         },
+         true,
+      );
 
-              if (filter.phone)
-                filtered = filtered.filter(
-                  x => x.phone.indexOf(filter.phone) != -1
-                );
+      this.addTrigger(
+         "pagination",
+         ["$page.pageSize", "$page.page", "$page.sorters", "$page.filter"],
+         (size, page, sorters, filter) => {
+            //simulate server call
+            setTimeout(() => {
+               var filtered = dataSet;
+               if (filter) {
+                  if (filter.name) {
+                     var checks = filter.name.split(" ").map((w) => new RegExp(w, "gi"));
+                     filtered = filtered.filter((x) => checks.every((ex) => x.fullName.match(ex)));
+                  }
 
-              if (filter.city)
-                filtered = filtered.filter(
-                  x => x.city.indexOf(filter.city) != -1
-                );
-            }
-            var compare = getComparer(
-              (sorters || []).map(x => ({
-                value: { bind: x.field },
-                direction: x.direction
-              }))
-            );
-            filtered.sort(compare);
-            //simulate database sort
-            this.store.set(
-              "$page.records",
-              filtered.slice((page - 1) * size, page * size)
-            );
-            this.store.set(
-              "$page.pageCount",
-              Math.ceil(filtered.length / size)
-            );
-          },
-          100
-        );
-      },
-      true
-    );
-  }
-};
+                  if (filter.phone) filtered = filtered.filter((x) => x.phone.indexOf(filter.phone) != -1);
 
+                  if (filter.city) filtered = filtered.filter((x) => x.city.indexOf(filter.city) != -1);
+               }
+               var compare = getComparer(
+                  (sorters || []).map((x) => ({
+                     value: { bind: x.field },
+                     direction: x.direction,
+                  })),
+               );
+               filtered.sort(compare);
+               //simulate database sort
+               this.store.set("$page.records", filtered.slice((page - 1) * size, page * size));
+               this.store.set("$page.pageCount", Math.ceil(filtered.length / size));
+            }, 100);
+         },
+         true,
+      );
+   }
+}
 
 export default (
-  <cx>
-    <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/filtering.tsx" target="_blank" putInto="github">Source Code</a>
-    <Section
-      mod="well"
-      style="height: 100%; min-width: 640px;"
-      bodyStyle="display:flex; flex-direction:column"
-      controller={PageController}
-    >
-      <Grid
-        records={bind("$page.records")}
-        style={{ width: "100%", flex: '1 1 0%' }}
-        mod="bordered"
-        scrollable={true}
-        lockColumnWidths
-        columns={
-          [
-            {
-              field: "fullName",
-              sortable: true,
-              header1: "Name",
-              header2: {
-                allowSorting: false,
-                items: (
-                  <TextField
-                    value={bind("$page.filter.name")}
-                    style="width:100%"
-                    placeholder="Filter by Name"
-                  />
-                )
-              }
-            },
-            {
-              header1: "Phone",
-              header2: {
-                items: (
-                  <TextField
-                    value={bind("$page.filter.phone")}
-                    style="width:100%"
-                    placeholder="Filter by Phone Number"
-                  />
-                )
-              },
-              field: "phone"
-            },
-            {
-              header1: "City",
-              header2: {
-                allowSorting: false,
-                items: (
-                  <TextField
-                    value={bind("$page.filter.city")}
-                    style="width:100%"
-                    placeholder="Filter by City"
-                  />
-                )
-              },
-              field: "city",
-              sortable: true
-            }
-          ]
-        }
-        sorters={bind("$page.sorters")}
-        remoteSort
-      />
-      <div style={{ marginTop: "20px" }}>
-        <Pagination page={bind("$page.page")} pageCount={bind("$page.pageCount")} />
-        <Select value={bind("$page.pageSize")} style={{ float: "right" }}>
-          <option value="5">5</option>
-          <option value={10}>10</option>
-          <option value="20">20</option>
-          <option value="50">50</option>
-        </Select>
-      </div>
-    </Section>
-  </cx>
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/filtering.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <Section
+         mod="well"
+         style="height: 100%; min-width: 640px;"
+         bodyStyle="display:flex; flex-direction:column"
+         controller={PageController}
+      >
+         <Grid
+            records={bind("$page.records")}
+            style={{ width: "100%", flex: "1 1 0%" }}
+            mod="bordered"
+            scrollable={true}
+            lockColumnWidths
+            columns={[
+               {
+                  field: "fullName",
+                  sortable: true,
+                  header1: "Name",
+                  header2: {
+                     allowSorting: false,
+                     items: (
+                        <TextField value={bind("$page.filter.name")} style="width:100%" placeholder="Filter by Name" />
+                     ),
+                  },
+               },
+               {
+                  header1: "Phone",
+                  header2: {
+                     items: (
+                        <TextField
+                           value={bind("$page.filter.phone")}
+                           style="width:100%"
+                           placeholder="Filter by Phone Number"
+                        />
+                     ),
+                  },
+                  field: "phone",
+               },
+               {
+                  header1: "City",
+                  header2: {
+                     allowSorting: false,
+                     items: (
+                        <TextField value={bind("$page.filter.city")} style="width:100%" placeholder="Filter by City" />
+                     ),
+                  },
+                  field: "city",
+                  sortable: true,
+               },
+            ]}
+            sorters={bind("$page.sorters")}
+            remoteSort
+         />
+         <div style={{ marginTop: "20px" }}>
+            <Pagination page={bind("$page.page")} pageCount={bind("$page.pageCount")} />
+            <Select value={bind("$page.pageSize")} style={{ float: "right" }}>
+               <option value="5">5</option>
+               <option value={10}>10</option>
+               <option value="20">20</option>
+               <option value="50">50</option>
+            </Select>
+         </div>
+      </Section>
+   </cx>
 );
 
-import { hmr } from '../../hmr.js';
-hmr(module);
\ No newline at end of file
+import { hmr } from "../../hmr.js";
+hmr(module);
diff --git a/gallery/routes/general/grids/form-editing.tsx b/gallery/routes/general/grids/form-editing.tsx
index 3651c5abd..31b1b9bda 100644
--- a/gallery/routes/general/grids/form-editing.tsx
+++ b/gallery/routes/general/grids/form-editing.tsx
@@ -1,132 +1,128 @@
-import {
-    Grid,
-    Button,
-    Section,
-    cx,
-    Checkbox,
-    TextField,
-    ValidationGroup,
-    FlexCol,
-    FlexRow
-} from "cx/widgets";
-import {Controller, bind, expr, KeySelection, LabelsLeftLayout} from "cx/ui";
-import casual from '../../../util/casual';
+import { Grid, Button, Section, cx, Checkbox, TextField, ValidationGroup, FlexCol, FlexRow } from "cx/widgets";
+import { Controller, bind, expr, KeySelection, LabelsLeftLayout } from "cx/ui";
+import casual from "../../../util/casual";
 
 class PageController extends Controller {
-    init() {
-        super.init();
+   init() {
+      super.init();
 
-        this.store.set(
-            "$page.records",
-            Array
-                .from({length: 5})
-                .map((v, i) => ({
-                    id: i + 1,
-                    fullName: casual.full_name,
-                    phone: casual.phone,
-                    city: casual.city,
-                    notified: casual.coin_flip
-                }))
-        );
+      this.store.set(
+         "$page.records",
+         Array.from({ length: 5 }).map((v, i) => ({
+            id: i + 1,
+            fullName: casual.full_name,
+            phone: casual.phone,
+            city: casual.city,
+            notified: casual.coin_flip,
+         })),
+      );
 
-        this.addTrigger("$page.form", ["$page.id", "$page.records"], (id,
-                                                                      records) => {
-            this.store.set("$page.form", records.find(a => a.id == id));
-            this.store.set("$page.add", false);
-        });
-    }
+      this.addTrigger("$page.form", ["$page.id", "$page.records"], (id, records) => {
+         this.store.set(
+            "$page.form",
+            records.find((a) => a.id == id),
+         );
+         this.store.set("$page.add", false);
+      });
+   }
 
-    newRecord() {
-        let records = this.store.get("$page.records");
-        this.store.set("$page.add", true);
-        this.store.set("$page.form", {fullName: "New Entry"});
-    }
+   newRecord() {
+      let records = this.store.get("$page.records");
+      this.store.set("$page.add", true);
+      this.store.set("$page.form", { fullName: "New Entry" });
+   }
 
-    saveRecord() {
-        let page = this.store.get("$page"), newRecords;
-        if (page.add) {
-            let id = page.records.reduce((acc, rec) => Math.max(acc, rec.id), 0) + 1;
-            newRecords = [...page.records, Object.assign({id: id}, page.form)];
-            this.store.set("$page.id", id);
-        } else newRecords = page.records.map(r => r.id == page.id ? page.form : r);
+   saveRecord() {
+      let page = this.store.get("$page"),
+         newRecords;
+      if (page.add) {
+         let id = page.records.reduce((acc, rec) => Math.max(acc, rec.id), 0) + 1;
+         newRecords = [...page.records, Object.assign({ id: id }, page.form)];
+         this.store.set("$page.id", id);
+      } else newRecords = page.records.map((r) => (r.id == page.id ? page.form : r));
 
-        this.store.set("$page.records", newRecords);
-    }
+      this.store.set("$page.records", newRecords);
+   }
 
-    removeRecord(id) {
-        let newRecords = this.store.get("$page.records").filter(r => r.id != id);
-        this.store.set("$page.records", newRecords);
-    }
+   removeRecord(id) {
+      let newRecords = this.store.get("$page.records").filter((r) => r.id != id);
+      this.store.set("$page.records", newRecords);
+   }
 }
 
 export default (
-    <cx>
-        <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/form-editing.tsx" target="_blank"
-            putInto="github">Source Code</a>
-        <FlexRow target="tablet" spacing="large" controller={PageController}>
-            <Section mod="card">
-                <Grid
-                    records={bind("$page.records")}
-                    style={{
-                        "width": "100%",
-                    }}
-                    selection={{type: KeySelection, bind: "$page.id", keyField: "id"}}
-                    columns={[
-                        {header: "Name", field: "fullName", sortable: true, style: "white-space: nowrap"},
-                        {header: "Phone", field: "phone", style: "white-space: nowrap"},
-                        {header: "City", field: "city", sortable: true},
-                        {
-                            header: "Notified",
-                            field: "notified",
-                            align: 'center',
-                            sortable: true,
-                            value: {expr: '{$record.notified} ? "Yes" : "No"'}
-                        },
-                        {
-                            header: "Actions",
-                            items: (
-                                <cx>
-                                    <Button
-                                        type="button"
-                                        mod="flat-primary"
-                                        data-id={bind("$record.id")}
-                                        onClick={(e, {controller, data}) => {
-                                            controller.removeRecord(data.data.id);
-                                        }}
-                                    >
-                                        Remove
-                                    </Button>
-                                </cx>
-                            )
-                        }
-                    ]}
-                />
-                <br/>
-                <Button
-                    type="button"
-                    onClick={(e, {controller}) => {
-                        controller.newRecord();
-                    }}
-                    style={{}}
-                >
-                    Add
-                </Button>
-            </Section>
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/form-editing.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <FlexRow target="tablet" spacing="large" controller={PageController}>
+         <Section mod="card">
+            <Grid
+               records={bind("$page.records")}
+               style={{
+                  width: "100%",
+               }}
+               selection={{ type: KeySelection, bind: "$page.id", keyField: "id" }}
+               columns={[
+                  { header: "Name", field: "fullName", sortable: true, style: "white-space: nowrap" },
+                  { header: "Phone", field: "phone", style: "white-space: nowrap" },
+                  { header: "City", field: "city", sortable: true },
+                  {
+                     header: "Notified",
+                     field: "notified",
+                     align: "center",
+                     sortable: true,
+                     value: { expr: '{$record.notified} ? "Yes" : "No"' },
+                  },
+                  {
+                     header: "Actions",
+                     items: (
+                        <cx>
+                           <Button
+                              type="button"
+                              mod="flat-primary"
+                              data-id={bind("$record.id")}
+                              onClick={(e, instance) => {
+                                 instance.getControllerByType(PageController).removeRecord(instance.data.data.id);
+                              }}
+                           >
+                              Remove
+                           </Button>
+                        </cx>
+                     ),
+                  },
+               ]}
+            />
+            <br />
+            <Button
+               type="button"
+               onClick={(e, instance) => {
+                  instance.getControllerByType(PageController).newRecord();
+               }}
+               style={{}}
+            >
+               Add
+            </Button>
+         </Section>
 
-            <Section mod="card" title={bind("$page.form.fullName")} hLevel={4} visible={expr("{$page.form}")}>
-                <ValidationGroup layout={LabelsLeftLayout}>
-                    <TextField label="Name" value={bind("$page.form.fullName")}/>
-                    <TextField label="Phone" value={bind("$page.form.phone")}/>
-                    <TextField label="City" value={bind("$page.form.city")}/>
-                    <Checkbox label="Notified" value={bind("$page.form.notified")}/>
-                    <Button onClick="saveRecord">
-                        Save
-                    </Button>
-                </ValidationGroup>
-            </Section>
-        </FlexRow>
-    </cx>
+         <Section mod="card" title={bind("$page.form.fullName")} hLevel={4} visible={expr("{$page.form}")}>
+            <ValidationGroup layout={LabelsLeftLayout}>
+               <TextField label="Name" value={bind("$page.form.fullName")} />
+               <TextField label="Phone" value={bind("$page.form.phone")} />
+               <TextField label="City" value={bind("$page.form.city")} />
+               <Checkbox label="Notified" value={bind("$page.form.notified")} />
+               <Button onClick={(e, instance) => instance.getControllerByType(PageController).saveRecord()}>
+                  Save
+               </Button>
+            </ValidationGroup>
+         </Section>
+      </FlexRow>
+   </cx>
 );
 
-import {hmr} from '../../hmr.js';
-hmr(module);
\ No newline at end of file
+import { hmr } from "../../hmr.js";
+hmr(module);
diff --git a/gallery/routes/general/grids/row-editing.js b/gallery/routes/general/grids/row-editing.js
deleted file mode 100644
index 6fe21859d..000000000
--- a/gallery/routes/general/grids/row-editing.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import {cx, Grid, Button, TextField, NumberField, Section} from "cx/widgets";
-import {Controller} from "cx/ui";
-import casual from '../../../util/casual';
-
-class PageController extends Controller {
-   onInit() {
-      //init grid data
-      if (!this.store.get('$page.records'))
-         this.shuffle();
-   }
-
-   shuffle() {
-      this.store.set(
-         "$page.records",
-         Array
-            .from({length: 10})
-            .map((v, i) => ({
-               fullName: casual.full_name,
-               continent: casual.continent,
-               browser: casual.browser,
-               os: casual.operating_system,
-               visits: casual.integer(1, 100)
-            }))
-      );
-   }
-
-   editRow(e, {store}) {
-      let record = store.get('$record');
-      //keep old values
-      store.set('$record.$editing', record);
-   }
-
-   saveRow(e, {store}) {
-      store.delete('$record.$editing');
-   }
-
-   cancelRowEditing(e, {store}) {
-      let oldRecord = store.get('$record.$editing');
-      if (oldRecord.add)
-         store.delete('$record');
-      else
-         store.set('$record', oldRecord);
-   }
-
-   addRow(e) {
-      this.store.update('$page.records', records => [...records, {
-         $editing: {add: true}
-      }])
-   }
-
-   deleteRow(e, {store}) {
-      store.delete('$record');
-   }
-}
-
-export default (
-   <cx>
-      <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/row-editing.js" target="_blank" putInto="github">Source Code</a>
-      <Section
-         mod="well"
-         style="height: 100%"
-         bodyStyle="display:flex; flex-direction:column"
-         controller={PageController}>
-         <Grid
-            records-bind="$page.records"
-            lockColumnWidths
-            cached
-            scrollable
-            style={{
-               flex: '1 1 0%'
-            }}
-            row={{
-               valid: { bind: "$record.valid" },
-               style: {
-                  background: {expr: "!!{$record.$editing} ? 'rgba(128, 128, 128, 0.1)' : null"}
-               }
-            }}
-            columns={
-               [
-                  {
-                     header: {
-                        text: "Name"
-                     },
-                     field: "fullName",
-                     sortable: true,
-                     items: <cx>
-                        <TextField
-                           value-bind="$record.fullName"
-                           viewMode-expr="!{$record.$editing}"
-                           style="width: 100%"
-                           autoFocus
-                           required
-                        />
-                     </cx>
-                  },
-                  {
-                     header: "Continent", field: "continent", sortable: true,
-                     items: <cx>
-                        <TextField
-                           value-bind="$record.continent"
-                           viewMode-expr="!{$record.$editing}"
-                           style="width: 100%"
-                           required
-                        />
-                     </cx>
-                  },
-                  {
-                     header: "Browser", field: "browser", sortable: true,
-                     items: <cx>
-                        <TextField
-                           value-bind="$record.browser"
-                           viewMode-expr="!{$record.$editing}"
-                           style="width: 100%"
-                           required
-                        />
-                     </cx>
-                  },
-                  {
-                     header: "OS", field: "os", sortable: true,
-                     items: <cx>
-                        <TextField
-                           value-bind="$record.os"
-                           viewMode-expr="!{$record.$editing}"
-                           style="width: 100%"
-                           required
-                        />
-                     </cx>
-                  },
-                  {
-                     header: "Visits",
-                     field: "visits",
-                     sortable: true,
-                     align: "right",
-                     items: <cx>
-                        <NumberField
-                           value-bind="$record.visits"
-                           viewMode-expr="!{$record.$editing}"
-                           style="width: 100%"
-                           inputStyle="text-align: right"
-                           required
-                           reactOn="change"
-                        />
-                     </cx>
-                  }, {
-                  header: 'Actions',
-                  style: "whitespace: nowrap",
-                  align:"center",
-                  items: <cx>
-                     <Button mod="hollow" onClick="editRow" visible-expr="!{$record.$editing}">Edit</Button>
-                     <Button mod="hollow" onClick="deleteRow" visible-expr="!{$record.$editing}" confirm="Are you sure?">Delete</Button>
-                     <Button
-                        mod-expr="{$root.$route.theme} == 'aquamarine' ? 'flat-primary' : 'primary'"
-                        onClick="saveRow"
-                        visible-expr="!!{$record.$editing}"
-                        disabled-expr="!{$record.valid}"
-                     >Save</Button>
-                     <Button mod="hollow" onClick="cancelRowEditing" visible-expr="!!{$record.$editing}">Cancel</Button>
-                  </cx>
-               }
-               ]
-            }
-         />
-         <br/>
-         <p>
-            <Button onClick="addRow">Add</Button>
-         </p>
-      </Section>
-   </cx>
-);
diff --git a/gallery/routes/general/grids/row-editing.tsx b/gallery/routes/general/grids/row-editing.tsx
new file mode 100644
index 000000000..58331eeb3
--- /dev/null
+++ b/gallery/routes/general/grids/row-editing.tsx
@@ -0,0 +1,204 @@
+import { bind, Controller, expr } from "cx/ui";
+import { Button, Grid, NumberField, Section, TextField } from "cx/widgets";
+import casual from "../../../util/casual";
+
+class PageController extends Controller {
+   onInit() {
+      //init grid data
+      if (!this.store.get("$page.records")) this.shuffle();
+   }
+
+   shuffle() {
+      this.store.set(
+         "$page.records",
+         Array.from({ length: 10 }).map((v, i) => ({
+            fullName: casual.full_name,
+            continent: casual.continent,
+            browser: casual.browser,
+            os: casual.operating_system,
+            visits: casual.integer(1, 100),
+         })),
+      );
+   }
+
+   editRow(e, { store }) {
+      let record = store.get("$record");
+      //keep old values
+      store.set("$record.$editing", record);
+   }
+
+   saveRow(e, { store }) {
+      store.delete("$record.$editing");
+   }
+
+   cancelRowEditing(e, { store }) {
+      let oldRecord = store.get("$record.$editing");
+      if (oldRecord.add) store.delete("$record");
+      else store.set("$record", oldRecord);
+   }
+
+   addRow(e) {
+      this.store.update("$page.records", (records) => [
+         ...records,
+         {
+            $editing: { add: true },
+         },
+      ]);
+   }
+
+   deleteRow(e, { store }) {
+      store.delete("$record");
+   }
+}
+
+export default (
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/row-editing.js"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <Section
+         mod="well"
+         style="height: 100%"
+         bodyStyle="display:flex; flex-direction:column"
+         controller={PageController}
+      >
+         <Grid
+            records={bind("$page.records")}
+            lockColumnWidths
+            cached
+            scrollable
+            style={{
+               flex: "1 1 0%",
+            }}
+            row={{
+               valid: { bind: "$record.valid" },
+               style: {
+                  background: { expr: "!!{$record.$editing} ? 'rgba(128, 128, 128, 0.1)' : null" },
+               },
+            }}
+            columns={[
+               {
+                  header: {
+                     text: "Name",
+                  },
+                  field: "fullName",
+                  sortable: true,
+                  items: (
+                     <cx>
+                        <TextField
+                           value={bind("$record.fullName")}
+                           viewMode={expr("!{$record.$editing}")}
+                           style="width: 100%"
+                           autoFocus
+                           required
+                        />
+                     </cx>
+                  ),
+               },
+               {
+                  header: "Continent",
+                  field: "continent",
+                  sortable: true,
+                  items: (
+                     <cx>
+                        <TextField
+                           value={bind("$record.continent")}
+                           viewMode={expr("!{$record.$editing}")}
+                           style="width: 100%"
+                           required
+                        />
+                     </cx>
+                  ),
+               },
+               {
+                  header: "Browser",
+                  field: "browser",
+                  sortable: true,
+                  items: (
+                     <cx>
+                        <TextField
+                           value={bind("$record.browser")}
+                           viewMode={expr("!{$record.$editing}")}
+                           style="width: 100%"
+                           required
+                        />
+                     </cx>
+                  ),
+               },
+               {
+                  header: "OS",
+                  field: "os",
+                  sortable: true,
+                  items: (
+                     <cx>
+                        <TextField
+                           value={bind("$record.os")}
+                           viewMode={expr("!{$record.$editing}")}
+                           style="width: 100%"
+                           required
+                        />
+                     </cx>
+                  ),
+               },
+               {
+                  header: "Visits",
+                  field: "visits",
+                  sortable: true,
+                  align: "right",
+                  items: (
+                     <cx>
+                        <NumberField
+                           value={bind("$record.visits")}
+                           viewMode={expr("!{$record.$editing}")}
+                           style="width: 100%"
+                           inputStyle="text-align: right"
+                           required
+                           reactOn="change"
+                        />
+                     </cx>
+                  ),
+               },
+               {
+                  header: "Actions",
+                  style: "whitespace: nowrap",
+                  align: "center",
+                  items: (
+                     <cx>
+                        <Button mod="hollow" onClick={(e, instance) => instance.getControllerByType(PageController).editRow(e, instance)} visible={expr("!{$record.$editing}")}>
+                           Edit
+                        </Button>
+                        <Button
+                           mod="hollow"
+                           onClick={(e, instance) => instance.getControllerByType(PageController).deleteRow(e, instance)}
+                           visible={expr("!{$record.$editing}")}
+                           confirm="Are you sure?"
+                        >
+                           Delete
+                        </Button>
+                        <Button
+                           mod={expr("{$root.$route.theme} == 'aquamarine' ? 'flat-primary' : 'primary'")}
+                           onClick={(e, instance) => instance.getControllerByType(PageController).saveRow(e, instance)}
+                           visible={expr("!!{$record.$editing}")}
+                           disabled={expr("!{$record.valid}")}
+                        >
+                           Save
+                        </Button>
+                        <Button mod="hollow" onClick={(e, instance) => instance.getControllerByType(PageController).cancelRowEditing(e, instance)} visible={expr("!!{$record.$editing}")}>
+                           Cancel
+                        </Button>
+                     </cx>
+                  ),
+               },
+            ]}
+         />
+         <br />
+         <p>
+            <Button onClick={(e, instance) => instance.getControllerByType(PageController).addRow(e)}>Add</Button>
+         </p>
+      </Section>
+   </cx>
+);
diff --git a/gallery/routes/general/grids/row-expanding.js b/gallery/routes/general/grids/row-expanding.tsx
similarity index 100%
rename from gallery/routes/general/grids/row-expanding.js
rename to gallery/routes/general/grids/row-expanding.tsx
diff --git a/gallery/routes/general/grids/tree-grid.tsx b/gallery/routes/general/grids/tree-grid.tsx
index 4110a3ace..3b809524c 100644
--- a/gallery/routes/general/grids/tree-grid.tsx
+++ b/gallery/routes/general/grids/tree-grid.tsx
@@ -1,87 +1,85 @@
-import {Grid, HtmlElement, Button, Section, Select, cx, ValidationGroup, TreeAdapter, TreeNode} from "cx/widgets";
-import {Controller, bind, expr, KeySelection} from "cx/ui";
-import {Format} from "cx/util";
-import casual from '../../../util/casual';
+import { Grid, HtmlElement, Button, Section, Select, cx, ValidationGroup, TreeAdapter, TreeNode } from "cx/widgets";
+import { Controller, bind, expr, KeySelection } from "cx/ui";
+import { Format } from "cx/util";
+import casual from "../../../util/casual";
 
 class PageController extends Controller {
+   idSeq: number;
 
-    idSeq: number;
+   init() {
+      super.init();
+      this.idSeq = 0;
+      this.store.set("$page.data", this.generateRecords());
+   }
 
-    init() {
-        super.init();
-        this.idSeq = 0;
-        this.store.set("$page.data", this.generateRecords());
-    }
-
-    generateRecords(node?) {
-        if (!node || node.$level < 5)
-            return Array
-                .from({length: 5})
-                .map(() => ({
-                    id: ++this.idSeq,
-                    fullName: casual.full_name,
-                    phone: casual.phone,
-                    city: casual.city,
-                    notified: casual.coin_flip,
-                    $leaf: casual.coin_flip
-                }));
-    }
+   generateRecords(node?) {
+      if (!node || node.$level < 5)
+         return Array.from({ length: 5 }).map(() => ({
+            id: ++this.idSeq,
+            fullName: casual.full_name,
+            phone: casual.phone,
+            city: casual.city,
+            notified: casual.coin_flip,
+            $leaf: casual.coin_flip,
+         }));
+   }
 }
 
 export default (
-    <cx>
-        <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/tree-grid.tsx" target="_blank"
-            putInto="github">Source Code</a>
-        <Section
-            mod="well"
-            controller={PageController}
-        >
-            <Grid
-                scrollable
-                records={bind("$page.data")}
-                mod="tree"
-                style={{
-                    width: "100%",
-                    maxHeight: "800px",
-                    minHeight: "400px"
-                }}
-                dataAdapter={{
-                    type: TreeAdapter,
-                    load: (context, {controller}, node) =>
-                        controller.generateRecords(node)
-                }}
-                selection={{type: KeySelection, bind: "$page.selection"}}
-                columns={[
-                    {
-                        header: "Name",
-                        field: "fullName",
-                        sortable: true,
-                        style: "white-space: nowrap",
-                        items: (
-                            <cx>
-                                <TreeNode
-                                    expanded={bind("$record.$expanded")}
-                                    leaf={bind("$record.$leaf")}
-                                    level={bind("$record.$level")}
-                                    loading={bind("$record.$loading")}
-                                    text={bind("$record.fullName")}
-                                />
-                            </cx>
-                        )
-                    },
-                    {header: "Phone", field: "phone", style: "white-space: nowrap"},
-                    {header: "City", field: "city", sortable: true},
-                    {
-                        header: "Notified",
-                        field: "notified",
-                        sortable: true,
-                        value: {expr: '{$record.notified} ? "Yes" : "No"'}
-                    }
-                ]}
-            />
-        </Section>
-    </cx>
+   <cx>
+      <a
+         href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/grids/tree-grid.tsx"
+         target="_blank"
+         putInto="github"
+      >
+         Source Code
+      </a>
+      <Section mod="well" controller={PageController}>
+         <Grid
+            scrollable
+            records={bind("$page.data")}
+            mod="tree"
+            style={{
+               width: "100%",
+               maxHeight: "800px",
+               minHeight: "400px",
+            }}
+            dataAdapter={{
+               type: TreeAdapter,
+               load: (context, instance, node) => instance.getControllerByType(PageController).generateRecords(node),
+            }}
+            selection={{ type: KeySelection, bind: "$page.selection" }}
+            columns={[
+               {
+                  header: "Name",
+                  field: "fullName",
+                  sortable: true,
+                  style: "white-space: nowrap",
+                  items: (
+                     <cx>
+                        <TreeNode
+                           expanded={bind("$record.$expanded")}
+                           leaf={bind("$record.$leaf")}
+                           level={bind("$record.$level")}
+                           loading={bind("$record.$loading")}
+                           text={bind("$record.fullName")}
+                        />
+                     </cx>
+                  ),
+               },
+               { header: "Phone", field: "phone", style: "white-space: nowrap" },
+               { header: "City", field: "city", sortable: true },
+               {
+                  header: "Notified",
+                  field: "notified",
+                  sortable: true,
+                  value: { expr: '{$record.notified} ? "Yes" : "No"' },
+               },
+            ]}
+         />
+      </Section>
+   </cx>
 );
 
-import {hmr} from '../../hmr.js';
-hmr(module);
\ No newline at end of file
+import { hmr } from "../../hmr.js";
+hmr(module);
diff --git a/gallery/style.js b/gallery/style.js
deleted file mode 100644
index de0a412ab..000000000
--- a/gallery/style.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import style from "./index.scss";
-style.use();
diff --git a/gallery/style.ts b/gallery/style.ts
new file mode 100644
index 000000000..62563fee6
--- /dev/null
+++ b/gallery/style.ts
@@ -0,0 +1,3 @@
+//@ts-expect-error
+import style from "./index.scss";
+style.use();
diff --git a/gallery/themes/aquamarine.js b/gallery/themes/aquamarine.js
deleted file mode 100644
index 0c8cc98cf..000000000
--- a/gallery/themes/aquamarine.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import style from "./aquamarine.useable.scss";
-import {registerTheme} from './index';
-
-import {applyThemeOverrides} from "cx-theme-aquamarine/src";
-
-registerTheme("aquamarine", style, applyThemeOverrides);
\ No newline at end of file
diff --git a/gallery/themes/aquamarine.ts b/gallery/themes/aquamarine.ts
new file mode 100644
index 000000000..bdbfe9ce5
--- /dev/null
+++ b/gallery/themes/aquamarine.ts
@@ -0,0 +1,7 @@
+// @ts-ignore
+import style from "./aquamarine.useable.scss";
+import { registerTheme } from "./index";
+
+import { applyThemeOverrides } from "cx-theme-aquamarine";
+
+registerTheme("aquamarine", style, applyThemeOverrides);
diff --git a/gallery/themes/core.js b/gallery/themes/core.js
deleted file mode 100644
index aa520d67d..000000000
--- a/gallery/themes/core.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import style from "./core.useable.scss";
-import {registerTheme} from './index';
-
-registerTheme("core", style);
\ No newline at end of file
diff --git a/gallery/themes/core.ts b/gallery/themes/core.ts
new file mode 100644
index 000000000..153dc7ddb
--- /dev/null
+++ b/gallery/themes/core.ts
@@ -0,0 +1,5 @@
+// @ts-ignore
+import style from "./core.useable.scss";
+import { registerTheme } from "./index";
+
+registerTheme("core", style);
diff --git a/gallery/themes/dark.js b/gallery/themes/dark.js
deleted file mode 100644
index 981c67151..000000000
--- a/gallery/themes/dark.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import style from "./dark.useable.scss";
-import {registerTheme} from './index';
-
-registerTheme("dark", style);
\ No newline at end of file
diff --git a/gallery/themes/dark.ts b/gallery/themes/dark.ts
new file mode 100644
index 000000000..69dff5e62
--- /dev/null
+++ b/gallery/themes/dark.ts
@@ -0,0 +1,5 @@
+// @ts-ignore
+import style from "./dark.useable.scss";
+import { registerTheme } from "./index";
+
+registerTheme("dark", style);
diff --git a/gallery/themes/frost.js b/gallery/themes/frost.js
deleted file mode 100644
index 6b662876d..000000000
--- a/gallery/themes/frost.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import style from "./frost.useable.scss";
-import {registerTheme} from './index';
-import {applyThemeOverrides} from "cx-theme-frost/src";
-
-registerTheme("frost", style, applyThemeOverrides);
\ No newline at end of file
diff --git a/gallery/themes/frost.ts b/gallery/themes/frost.ts
new file mode 100644
index 000000000..5991065aa
--- /dev/null
+++ b/gallery/themes/frost.ts
@@ -0,0 +1,6 @@
+// @ts-ignore
+import style from "./frost.useable.scss";
+import { registerTheme } from "./index";
+import { applyThemeOverrides } from "cx-theme-frost";
+
+registerTheme("frost", style, applyThemeOverrides);
diff --git a/gallery/themes/index.ts b/gallery/themes/index.ts
index a7aebac9a..6e1243410 100644
--- a/gallery/themes/index.ts
+++ b/gallery/themes/index.ts
@@ -1,14 +1,12 @@
-import {bump} from '../routes/hmr.js';
+import { bump } from "../routes/hmr.js";
 let activeStyle = null;
-import {Icon} from 'cx/widgets';
-import {Localization} from 'cx/ui';
+import { Icon } from "cx/widgets";
+import { Localization } from "cx/ui";
 
 Localization.trackDefaults();
 
 export function loadTheme(name) {
-
-   if (activeStyle)
-      activeStyle.unuse();
+   if (activeStyle) activeStyle.unuse();
 
    let style = themes[name];
    activeStyle = style;
@@ -18,8 +16,7 @@ export function loadTheme(name) {
    Icon.restoreDefaultIcons();
    Localization.restoreDefaults();
 
-   if (callbacks[name])
-      callbacks[name]();
+   if (callbacks[name]) callbacks[name]();
 
    bump();
 }
@@ -27,7 +24,7 @@ export function loadTheme(name) {
 const themes = {};
 const callbacks = {};
 
-export function registerTheme(name, style, callback) {
+export function registerTheme(name: string, style: any, callback?: () => void) {
    themes[name] = style;
    callbacks[name] = callback;
-}
\ No newline at end of file
+}
diff --git a/gallery/themes/material-dark.js b/gallery/themes/material-dark.js
deleted file mode 100644
index 6b7aab044..000000000
--- a/gallery/themes/material-dark.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import style from "./material-dark.useable.scss";
-import {registerTheme} from './index';
-
-import {applyThemeOverrides} from "cx-theme-material-dark/src";
-
-registerTheme("material-dark", style, applyThemeOverrides);
\ No newline at end of file
diff --git a/gallery/themes/material-dark.ts b/gallery/themes/material-dark.ts
new file mode 100644
index 000000000..7e89de8a3
--- /dev/null
+++ b/gallery/themes/material-dark.ts
@@ -0,0 +1,7 @@
+// @ts-ignore
+import style from "./material-dark.useable.scss";
+import { registerTheme } from "./index";
+
+import { applyThemeOverrides } from "cx-theme-material-dark";
+
+registerTheme("material-dark", style, applyThemeOverrides);
diff --git a/gallery/themes/material.js b/gallery/themes/material.js
deleted file mode 100644
index 4e00c522e..000000000
--- a/gallery/themes/material.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import style from "./material.useable.scss";
-import {registerTheme} from './index';
-
-import {applyThemeOverrides} from "cx-theme-material/src";
-
-registerTheme("material", style, applyThemeOverrides);
\ No newline at end of file
diff --git a/gallery/themes/material.ts b/gallery/themes/material.ts
new file mode 100644
index 000000000..347db9ab4
--- /dev/null
+++ b/gallery/themes/material.ts
@@ -0,0 +1,7 @@
+// @ts-ignore
+import style from "./material.useable.scss";
+import { registerTheme } from "./index";
+
+import { applyThemeOverrides } from "cx-theme-material";
+
+registerTheme("material", style, applyThemeOverrides);
diff --git a/gallery/themes/packed-dark.js b/gallery/themes/packed-dark.js
deleted file mode 100644
index 3e2c350d8..000000000
--- a/gallery/themes/packed-dark.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import style from "./packed-dark.useable.scss";
-import { registerTheme } from "./index";
-import { applyThemeOverrides } from "cx-theme-packed-dark/src";
-
-registerTheme("packed-dark", style, applyThemeOverrides);
diff --git a/gallery/themes/packed-dark.ts b/gallery/themes/packed-dark.ts
new file mode 100644
index 000000000..294ae5550
--- /dev/null
+++ b/gallery/themes/packed-dark.ts
@@ -0,0 +1,6 @@
+// @ts-ignore
+import style from "./packed-dark.useable.scss";
+import { registerTheme } from "./index";
+import { applyThemeOverrides } from "cx-theme-packed-dark";
+
+registerTheme("packed-dark", style, applyThemeOverrides);
diff --git a/gallery/themes/space-blue.js b/gallery/themes/space-blue.js
deleted file mode 100644
index ef09be41b..000000000
--- a/gallery/themes/space-blue.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import style from "./space-blue.useable.scss";
-import {registerTheme} from './index';
-
-import {applyThemeOverrides} from "cx-theme-space-blue/src";
-
-registerTheme("space-blue", style, applyThemeOverrides);
\ No newline at end of file
diff --git a/gallery/themes/space-blue.ts b/gallery/themes/space-blue.ts
new file mode 100644
index 000000000..74620a0eb
--- /dev/null
+++ b/gallery/themes/space-blue.ts
@@ -0,0 +1,7 @@
+// @ts-ignore
+import style from "./space-blue.useable.scss";
+import { registerTheme } from "./index";
+
+import { applyThemeOverrides } from "cx-theme-space-blue";
+
+registerTheme("space-blue", style, applyThemeOverrides);
diff --git a/gallery/tsconfig.json b/gallery/tsconfig.json
index 3ae032907..4d32ec9da 100644
--- a/gallery/tsconfig.json
+++ b/gallery/tsconfig.json
@@ -1,20 +1,25 @@
 {
-  "compilerOptions": {
-    "target": "es6",
-    "jsx": "react",
-    "allowJs": true,
-    "moduleResolution": "node",
-    "module": "esnext",
-    "sourceMap": false,
-    "jsxFactory": "cx",
-    "baseUrl": ".",
-    "paths": {
-      "cx": [ "../packages/cx/src" ],
-      "cx-react": [ "../packages/cx-react" ]
-    },
-    "outDir": "./build/"
-  },
-  "exclude": [
-    "node_modules", "dist"
-  ]
-}
\ No newline at end of file
+   "compilerOptions": {
+      "target": "es2024",
+      "jsx": "react-jsx",
+      //"jsxFactory": "cx",
+      "jsxImportSource": "cx",
+      "allowJs": true,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "sourceMap": false,
+      "baseUrl": ".",
+      "paths": {
+         "cx-theme-aquamarine": ["../packages/cx-theme-aquamarine"],
+         "cx-theme-frost": ["../packages/cx-theme-frost"],
+         "cx-theme-material": ["../packages/cx-theme-material"],
+         "cx-theme-material-dark": ["../packages/cx-theme-material-dark"],
+         "cx-theme-packed-dark": ["../packages/cx-theme-packed-dark"],
+         "cx-theme-space-blue": ["../packages/cx-theme-space-blue"]
+      },
+      "outDir": "./build/",
+      "types": ["node", "webpack-env"]
+   },
+   "include": [".", "../misc"],
+   "exclude": ["node_modules", "dist"]
+}
diff --git a/litmus/index.js b/litmus/index.js
index de351bd7f..99d03a21c 100644
--- a/litmus/index.js
+++ b/litmus/index.js
@@ -140,10 +140,9 @@ import "./index.scss";
 // import Demo from "./features/charts/PointReducer";
 // import Demo from "./features/charts/line-graph/LineGraph";
 // import Demo from "./bugs/GridDefaultSortFieldClearableSortIssue";
-// import Demo from "./bugs/GridFixedColumnsFixedHeaderColumnsPosition";
+import Demo from "./bugs/GridFixedColumnsFixedHeaderColumnsPosition";
 // import Demo from "./features/charts/axis/ComplexAxisLabels";
-//import Demo from "./bugs/pie-chart-active-bind";
-import Demo from "./bugs/grouping";
+// import Demo from "./bugs/pie-chart-active-bind";
 let store = (window.store = new Store());
 
 Widget.resetCounter();
diff --git a/litmus/package.json b/litmus/package.json
index 4a22ef547..b8128c6e3 100644
--- a/litmus/package.json
+++ b/litmus/package.json
@@ -7,31 +7,30 @@
    },
    "dependencies": {
       "casual": "^1.6.2",
-      "core-js": "^3.39.0",
-      "cx": "^25.4.1",
-      "cx-immer": "^25.5.0",
-      "cx-react": "^24.7.1",
+      "core-js": "^3.47.0",
+      "cx": "workspace:*",
+      "cx-immer": "workspace:*",
+      "cx-react": "workspace:*",
       "immer": "^10.1.1",
       "intl": "^1.2.5",
-      "react": "^18.3.1",
-      "react-dev-utils": "^12.0.1",
-      "react-dom": "^18.3.1",
+      "react": "^19.2.3",
+      "react-dom": "^19.2.3",
       "whatwg-fetch": "^3.6.20"
    },
    "devDependencies": {
-      "@babel/core": "^7.26.0",
-      "@babel/preset-env": "^7.26.0",
-      "@babel/preset-typescript": "^7.26.0",
-      "@types/node": "^22.10.1",
-      "@types/react": "^18.3.14",
-      "babel-loader": "^9.2.1",
+      "@babel/core": "^7.28.5",
+      "@babel/preset-env": "^7.28.5",
+      "@babel/preset-typescript": "^7.28.5",
+      "@types/node": "^25.0.3",
+      "@types/react": "^19.2.7",
+      "babel-loader": "^10.0.0",
       "babel-plugin-transform-cx-imports": "^21.3.0",
       "babel-plugin-transform-cx-jsx": "^21.3.0",
       "babel-preset-cx-env": "^24.0.0",
       "copy-webpack-plugin": "^12.0.2",
       "css-loader": "^7.1.2",
       "file-loader": "^6.2.0",
-      "html-webpack-plugin": "^5.6.3",
+      "html-webpack-plugin": "^5.6.5",
       "if-loader": "^1.0.2",
       "inline-manifest-webpack-plugin": "^4.0.2",
       "json-loader": "^0.5.7",
@@ -39,18 +38,18 @@
       "modify-babel-preset": "^3.2.1",
       "process": "^0.11.10",
       "sass": "^1.77.8",
-      "sass-loader": "^16.0.1",
+      "sass-loader": "^16.0.6",
       "style-loader": "^4.0.0",
       "svg-url-loader": "^8.0.0",
       "ts-loader": "^9.5.1",
       "typescript": "^5.7.2",
       "url-loader": "^4.1.1",
-      "webpack": "^5.97.1",
+      "webpack": "^5.103.0",
       "webpack-bundle-analyzer": "^4.10.2",
       "webpack-cleanup-plugin": "^0.5.1",
       "webpack-cli": "^5.1.4",
       "webpack-combine-loaders": "^2.0.4",
-      "webpack-dev-server": "^5.1.0",
+      "webpack-dev-server": "^5.2.2",
       "webpack-merge": "^6.0.1"
    }
 }
diff --git a/misc/components/Animicon.js b/misc/components/Animicon.js
deleted file mode 100644
index f805342f4..000000000
--- a/misc/components/Animicon.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { computable } from 'cx/ui';
-import { getSelector } from 'cx/src/data';
-
-export const Animicon = ({ shape, onClick }) => (
-    <cx>
-        <div
-            onClick={onClick}
-            class={computable(getSelector(shape), shape => {
-                return {
-                    'lines-button': true,
-                    close: true,
-                    x: shape == 'close',
-                    'arrow arrow-left': shape == 'arrow',
-                };
-            })}
-        >
-            <span class="lines" />
-        </div>
-    </cx>
-);
diff --git a/misc/components/Animicon.tsx b/misc/components/Animicon.tsx
new file mode 100644
index 000000000..eddc8c493
--- /dev/null
+++ b/misc/components/Animicon.tsx
@@ -0,0 +1,20 @@
+import { computable, createFunctionalComponent } from "cx/ui";
+import { getSelector } from "cx/data";
+
+export const Animicon = createFunctionalComponent(({ shape, onClick }: any) => (
+   <cx>
+      <div
+         onClick={onClick}
+         class={computable(getSelector(shape), (shape) => {
+            return {
+               "lines-button": true,
+               close: true,
+               x: shape == "close",
+               "arrow arrow-left": shape == "arrow",
+            };
+         })}
+      >
+         <span class="lines" />
+      </div>
+   </cx>
+));
diff --git a/misc/components/GitHubStarCount.js b/misc/components/GitHubStarCount.js
deleted file mode 100644
index a748a5201..000000000
--- a/misc/components/GitHubStarCount.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { VDOM } from "cx/ui";
-
-export class GitHubStarCount extends VDOM.Component {
-   render() {
-      return (
-         <div className="master_githubstars">
-            <a
-               className="github-button"
-               href="https://github.com/codaxy/cxjs"
-               data-size="large"
-               data-show-count="true"
-               aria-label="Star codaxy/cxjs on GitHub"
-            >
-               Star
-            </a>
-         </div>
-      );
-   }
-
-   shouldComponentUpdate() {
-      return false;
-   }
-
-   componentDidMount() {
-      let script = document.createElement("script");
-      script.async = true;
-      script.defer = true;
-      script.src = "https://buttons.github.io/buttons.js";
-      document.body.appendChild(script);
-   }
-}
diff --git a/misc/components/GitHubStarCount.tsx b/misc/components/GitHubStarCount.tsx
new file mode 100644
index 000000000..4f173d8cb
--- /dev/null
+++ b/misc/components/GitHubStarCount.tsx
@@ -0,0 +1,32 @@
+/** @jsxImportSource react */
+import { VDOM } from "cx/ui";
+
+export class GitHubStarCount extends VDOM.Component<any> {
+   render() {
+      return (
+         <div className="master_githubstars">
+            <a
+               className="github-button"
+               href="https://github.com/codaxy/cxjs"
+               data-size="large"
+               data-show-count="true"
+               aria-label="Star codaxy/cxjs on GitHub"
+            >
+               Star
+            </a>
+         </div>
+      );
+   }
+
+   shouldComponentUpdate() {
+      return false;
+   }
+
+   componentDidMount() {
+      let script = document.createElement("script");
+      script.async = true;
+      script.defer = true;
+      script.src = "https://buttons.github.io/buttons.js";
+      document.body.appendChild(script);
+   }
+}
diff --git a/misc/components/NavTree.js b/misc/components/NavTree.js
deleted file mode 100644
index 978b0dc65..000000000
--- a/misc/components/NavTree.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Repeater, Link } from "cx/widgets";
-import { createFunctionalComponent, computable, DataProxy } from "cx/ui";
-import { ref } from "cx/hooks";
-
-export const NavTree = createFunctionalComponent(({ tree, url, showCategory }) => {
-   let treeRef = ref(tree);
-   let urlRef = ref(url);
-
-   let visibleNode = computable(treeRef, urlRef, (tree, url) => {
-      let node =
-         tree &&
-         tree?.find(
-            (item) => item.url && (url.startsWith(item.url) || item.alternativeUrls?.some((alt) => url.startsWith(alt)))
-         );
-      return node || { children: [] };
-   });
-
-   return (
-      <cx>
-         <div class="sidenav_category" visible={(data) => showCategory && !!visibleNode(data).text}>
-            <Link href={(data) => visibleNode(data).href} text={(data) => visibleNode(data).text} url="dummy" />
-         </div>
-         <Repeater records={(data) => visibleNode(data).children} recordAlias="$group">
-            <div text-bind="$group.text" class="sidenav_group" />
-            <Repeater records-bind="$group.children" recordAlias="$item">
-               <Link href-bind="$item.url" url={url} text-bind="$item.text" />
-            </Repeater>
-            <div text-bind="$group.text" class="sidenav_group-text" />
-         </Repeater>
-      </cx>
-   );
-});
diff --git a/misc/components/NavTree.tsx b/misc/components/NavTree.tsx
new file mode 100644
index 000000000..233a0e9aa
--- /dev/null
+++ b/misc/components/NavTree.tsx
@@ -0,0 +1,34 @@
+import { Repeater, Link } from "cx/widgets";
+import { bind, createFunctionalComponent, computable } from "cx/ui";
+import { ref } from "cx/hooks";
+
+export const NavTree = createFunctionalComponent(({ tree, url, showCategory }: any) => {
+   let treeRef = ref(tree);
+   let urlRef = ref(url);
+
+   let visibleNode = computable(treeRef, urlRef, (tree, url) => {
+      let node =
+         tree &&
+         url &&
+         tree?.find(
+            (item) =>
+               item.url && (url.startsWith(item.url) || item.alternativeUrls?.some((alt) => url.startsWith(alt))),
+         );
+      return node || { children: [] };
+   });
+
+   return (
+      <cx>
+         <div class="sidenav_category" visible={(data) => showCategory && !!visibleNode(data).text}>
+            <Link href={(data) => visibleNode(data).href} text={(data) => visibleNode(data).text} url="dummy" />
+         </div>
+         <Repeater records={(data) => visibleNode(data).children} recordAlias="$group">
+            <div text={bind("$group.text")} class="sidenav_group" />
+            <Repeater records={bind("$group.children")} recordAlias="$item">
+               <Link href={bind("$item.url")} url={url} text={bind("$item.text")} />
+            </Repeater>
+            <div text={bind("$group.text")} class="sidenav_group-text" />
+         </Repeater>
+      </cx>
+   );
+});
diff --git a/misc/components/ScrollIntoView.d.ts b/misc/components/ScrollIntoView.d.ts
deleted file mode 100644
index 6ffb2bc38..000000000
--- a/misc/components/ScrollIntoView.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as Cx from '../../packages/cx/src/core';
-
-export interface ScrollIntoViewProps extends Cx.StyledContainerProps {
-   selector?: Cx.StringProp
-}
-
-export class ScrollIntoView extends Cx.Widget<ScrollIntoViewProps> {}
diff --git a/misc/components/ScrollIntoView.js b/misc/components/ScrollIntoView.js
deleted file mode 100644
index 9d78b6784..000000000
--- a/misc/components/ScrollIntoView.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import {Container, VDOM} from "cx/ui";
-import {scrollElementIntoView} from "cx/util";
-
-export class ScrollIntoView extends Container {
-
-   declareData(...args) {
-      super.declareData(...args, {
-         selector: undefined
-      });
-   }
-
-   render(context, instance, key) {
-      let {data} = instance;
-      return <ScrollIntoViewCmp
-         key={key}
-         selector={data.selector}
-         style={data.style}
-         className={data.classNames}
-      >
-         {this.renderChildren(context, instance)}
-      </ScrollIntoViewCmp>
-   }
-}
-
-ScrollIntoView.prototype.styled = true;
-
-class ScrollIntoViewCmp extends VDOM.Component {
-   render() {
-      let {style, className, children} = this.props;
-      return <div ref={el => this.el = el} style={style} className={className}>{children}</div>
-   }
-
-   componentDidMount() {
-      this.scrollIntoView();
-   }
-
-   componentDidUpdate() {
-      this.scrollIntoView();
-   }
-
-   scrollIntoView() {
-      let child = this.el.querySelector(this.props.selector);
-      if (child)
-         scrollElementIntoView(child)
-   }
-}
\ No newline at end of file
diff --git a/misc/components/ScrollIntoView.tsx b/misc/components/ScrollIntoView.tsx
new file mode 100644
index 000000000..915078cf9
--- /dev/null
+++ b/misc/components/ScrollIntoView.tsx
@@ -0,0 +1,56 @@
+/** @jsxImportSource react */
+import { StyledContainerBase, StyledContainerConfig, VDOM, StringProp, Instance, RenderingContext } from "cx/ui";
+import { scrollElementIntoView } from "cx/util";
+
+export interface ScrollIntoViewConfig extends StyledContainerConfig {
+   selector?: StringProp;
+}
+
+export class ScrollIntoView extends StyledContainerBase<ScrollIntoViewConfig> {
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         selector: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      return (
+         <ScrollIntoViewCmp key={key} selector={data.selector} style={data.style} className={data.classNames}>
+            {this.renderChildren(context, instance)}
+         </ScrollIntoViewCmp>
+      );
+   }
+}
+
+class ScrollIntoViewCmp extends VDOM.Component<any> {
+   el: HTMLElement | null = null;
+
+   render() {
+      let { style, className, children } = this.props;
+      return (
+         <div
+            ref={(el) => {
+               this.el = el;
+            }}
+            style={style}
+            className={className}
+         >
+            {children}
+         </div>
+      );
+   }
+
+   componentDidMount() {
+      this.scrollIntoView();
+   }
+
+   componentDidUpdate() {
+      this.scrollIntoView();
+   }
+
+   scrollIntoView() {
+      let child = this.el?.querySelector(this.props.selector);
+      if (child) scrollElementIntoView(child);
+   }
+}
diff --git a/misc/components/ScrollReset.d.ts b/misc/components/ScrollReset.d.ts
deleted file mode 100644
index 94d0bef43..000000000
--- a/misc/components/ScrollReset.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as Cx from '../../packages/cx/src/core';
-
-export interface ScrollResetProps extends Cx.HtmlElementProps {
-   trigger?: Cx.StructuredProp
-}
-
-export class ScrollReset extends Cx.Widget<ScrollResetProps> {}
diff --git a/misc/components/ScrollReset.js b/misc/components/ScrollReset.js
deleted file mode 100644
index 75440914e..000000000
--- a/misc/components/ScrollReset.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { HtmlElement } from 'cx/widgets';
-import { closest } from 'cx/util';
-import { VDOM } from 'cx/ui';
-
-export class ScrollReset extends HtmlElement {
-
-    declareData() {
-        super.declareData(...arguments, {
-            trigger: {
-                structured: true
-            }
-        })
-    }
-
-    render(context, instance, key) {
-        return (
-            <ScrollResetComponent
-                key={key}
-                instance={instance}
-                shouldUpdate={instance.shouldUpdate}
-                data={instance.data}
-            >
-                {this.renderChildren(context, instance)}
-            </ScrollResetComponent>
-        )
-    }
-}
-
-class ScrollResetComponent extends VDOM.Component {
-
-    shouldComponentUpdate(props) {
-        return props.shouldUpdate;
-    }
-
-    render() {
-        var {data} = this.props;
-        return <div ref={el => {
-            this.el = el
-        }} className={data.classNames} style={data.style}>
-            {this.props.children}
-        </div>
-    }
-
-    componentDidMount() {
-        this.trigger = this.props.data.trigger;
-    }
-
-    componentDidUpdate() {
-        var trigger = this.props.data.trigger;
-        if (this.trigger != trigger) {
-            this.trigger = trigger;
-            var parent = closest(this.el, x => x.scrollTop != 0);
-            if (parent)
-                parent.scrollTop = 0;
-        }
-    }
-}
diff --git a/misc/components/ScrollReset.tsx b/misc/components/ScrollReset.tsx
new file mode 100644
index 000000000..3eceb8a78
--- /dev/null
+++ b/misc/components/ScrollReset.tsx
@@ -0,0 +1,65 @@
+/** @jsxImportSource react */
+import { HtmlElement, HtmlElementConfig } from 'cx/widgets';
+import { closest } from 'cx/util';
+import { VDOM } from 'cx/ui';
+import { StructuredProp } from 'cx/ui';
+
+export interface ScrollResetConfig extends HtmlElementConfig {
+    trigger?: StructuredProp;
+}
+
+export class ScrollReset extends HtmlElement<ScrollResetConfig> {
+
+    declareData() {
+        super.declareData(...arguments, {
+            trigger: {
+                structured: true
+            }
+        })
+    }
+
+    render(context, instance, key) {
+        return (
+            <ScrollResetComponent
+                key={key}
+                instance={instance}
+                shouldUpdate={instance.shouldUpdate}
+                data={instance.data}
+            >
+                {this.renderChildren(context, instance)}
+            </ScrollResetComponent>
+        )
+    }
+}
+
+class ScrollResetComponent extends VDOM.Component<any> {
+    el: HTMLElement | null = null;
+    trigger: any;
+
+    shouldComponentUpdate(props: any) {
+        return props.shouldUpdate;
+    }
+
+    render() {
+        var {data} = this.props;
+        return <div ref={el => {
+            this.el = el
+        }} className={data.classNames} style={data.style}>
+            {this.props.children}
+        </div>
+    }
+
+    componentDidMount() {
+        this.trigger = this.props.data.trigger;
+    }
+
+    componentDidUpdate() {
+        var trigger = this.props.data.trigger;
+        if (this.trigger != trigger) {
+            this.trigger = trigger;
+            var parent = closest(this.el, (x: HTMLElement) => x.scrollTop != 0);
+            if (parent)
+                parent.scrollTop = 0;
+        }
+    }
+}
diff --git a/misc/components/SideDrawer.js b/misc/components/SideDrawer.js
deleted file mode 100644
index 449853dc6..000000000
--- a/misc/components/SideDrawer.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Overlay } from 'cx/widgets';
-
-export const SideDrawer = ({ out, children }) => (
-    <cx>
-        <Overlay backdrop class="master_sidedrawer" visible={out} animate>
-            {children}
-        </Overlay>
-    </cx>
-);
diff --git a/misc/components/SideDrawer.tsx b/misc/components/SideDrawer.tsx
new file mode 100644
index 000000000..175daec09
--- /dev/null
+++ b/misc/components/SideDrawer.tsx
@@ -0,0 +1,10 @@
+import { createFunctionalComponent } from "cx/ui";
+import { Overlay } from "cx/widgets";
+
+export const SideDrawer = createFunctionalComponent(({ out, children }: any) => (
+   <cx>
+      <Overlay backdrop class="master_sidedrawer" visible={out} animate>
+         {children}
+      </Overlay>
+   </cx>
+));
diff --git a/misc/layout/index.js b/misc/layout/index.js
deleted file mode 100644
index 33bef7c44..000000000
--- a/misc/layout/index.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { PureContainer, Link, ContentPlaceholder } from "cx/widgets";
-import { Animicon } from "../components/Animicon";
-import { SideDrawer } from "../components/SideDrawer";
-import { NavTree } from "../components/NavTree";
-
-import Logo from "./cxjs.svg";
-import CodeSandboxIcon from "./CodeSandbox.svg";
-import { GitHubStarCount } from "../components/GitHubStarCount";
-import { computable } from "cx/ui";
-import { isArray } from "cx/util";
-
-const TopLinks = ({ topLinks, mod, alternativeLinks, children }) => (
-   <cx>
-      <div>
-         {Object.keys(topLinks || {}).map((url) => (
-            <cx>
-               <Link
-                  href={url}
-                  text={topLinks[url]}
-                  url-bind="url"
-                  match="subroute"
-                  mod={mod}
-                  active={
-                     alternativeLinks &&
-                     alternativeLinks[url] &&
-                     computable("url", (currentUrl) => {
-                        let links = alternativeLinks[url];
-                        return isArray(links) && links.some((link) => currentUrl.startsWith(link)) ? true : null;
-                     })
-                  }
-               />
-            </cx>
-         ))}
-         {children}
-      </div>
-   </cx>
-);
-
-export const MasterLayout = ({ app, children, shadow, navTree, title, topLinks, alternativeLinks }) => (
-   <cx>
-      <PureContainer>
-         <header ws class={{ master_header: true, shadow, elevate: { expr: "!!{master.drawer.icon}" } }}>
-            <div class="master_topbar">
-               <div class="master_hamburger">
-                  <Animicon
-                     shape={{ bind: "master.drawer.icon", defaultValue: null }}
-                     onClick={(e, { store }) => {
-                        store.update("master.drawer.icon", (shape) => {
-                           switch (shape) {
-                              case "arrow":
-                                 return "close";
-
-                              case "close":
-                                 return null;
-
-                              default:
-                                 return "arrow";
-                           }
-                        });
-                     }}
-                  />
-               </div>
-               <img class="master_logo" src={Logo} />
-               <Link href="https://cxjs.io" url-bind="url" active={app == "site"}>
-                  Home
-               </Link>
-               <Link href="https://docs.cxjs.io" url-bind="url" active={app == "docs"}>
-                  Docs
-               </Link>
-               <Link href="https://gallery.cxjs.io" url-bind="url" active={app == "gallery"}>
-                  Gallery
-               </Link>
-               <Link href="https://fiddle.cxjs.io" url-bind="url" active={app == "fiddle"}>
-                  Fiddle
-               </Link>
-
-               <div style="margin-left: auto" />
-
-               <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href="https://www.npmjs.com/package/cx"
-                  class="master_npmversion"
-               >
-                  <img src="https://img.shields.io/npm/v/cx" alt="version" />
-               </a>
-
-               <a
-                  className="master_iconlink"
-                  href="https://codesandbox.io/search?refinementList%5Btemplate%5D%5B0%5D=cxjs"
-               >
-                  <img src={CodeSandboxIcon} alt="CodeSandbox" />
-               </a>
-
-               <GitHubStarCount />
-            </div>
-         </header>
-         <div class="sticky topbanner" visible={!!title}>
-            <div class="topbanner_heading">
-               <h3>{title}</h3>
-               <ContentPlaceholder name="topbanner" />
-            </div>
-            <div class="topbanner_tabs">
-               <TopLinks topLinks={topLinks} alternativeLinks={alternativeLinks}>
-                  <ContentPlaceholder name="topbanner_tabs" />
-               </TopLinks>
-            </div>
-         </div>
-         {children}
-         <SideDrawer out-bind="master.drawer.icon">
-            <div
-               class="sidenav"
-               style="height: 100%;"
-               onClick={(e, { store }) => {
-                  if (e.target.nodeName == "A") store.delete("master.drawer.icon");
-               }}
-            >
-               <ContentPlaceholder name="navtree" visible-expr="{master.drawer.icon} == 'arrow'">
-                  <NavTree tree={navTree} url-bind="url" showCategory />
-               </ContentPlaceholder>
-               <div visible-expr="{master.drawer.icon} == 'close'">
-                  <div class="sidenav_section">
-                     <Link href="https://cxjs.io">Home</Link>
-                  </div>
-                  <div class="sidenav_section">
-                     <Link href="https://docs.cxjs.io">Docs</Link>
-
-                     <TopLinks visible={app == "docs"} topLinks={topLinks} mod="subsystem" />
-                  </div>
-                  <div class="sidenav_section">
-                     <Link href="https://gallery.cxjs.io" match="subroute">
-                        Gallery
-                     </Link>
-
-                     <TopLinks visible={app == "gallery"} topLinks={topLinks} mod="subsystem" />
-                  </div>
-                  <div class="sidenav_section">
-                     <Link href="https://fiddle.cxjs.io" match="subroute">
-                        Fiddle
-                     </Link>
-                  </div>
-               </div>
-            </div>
-         </SideDrawer>
-      </PureContainer>
-   </cx>
-);
diff --git a/misc/layout/index.tsx b/misc/layout/index.tsx
new file mode 100644
index 000000000..6977603a9
--- /dev/null
+++ b/misc/layout/index.tsx
@@ -0,0 +1,151 @@
+import { PureContainer, Link, ContentPlaceholder } from "cx/widgets";
+import { Animicon } from "../components/Animicon";
+import { SideDrawer } from "../components/SideDrawer";
+import { NavTree } from "../components/NavTree";
+
+// @ts-ignore
+import Logo from "./cxjs.svg";
+// @ts-ignore
+import CodeSandboxIcon from "./CodeSandbox.svg";
+import { GitHubStarCount } from "../components/GitHubStarCount";
+import { bind, computable, createFunctionalComponent, expr } from "cx/ui";
+import { isArray } from "cx/util";
+
+const TopLinks = createFunctionalComponent(({ topLinks, mod, alternativeLinks, children }: any) => (
+   <cx>
+      <div>
+         {Object.keys(topLinks || {}).map((url) => (
+            <cx>
+               <Link
+                  href={url}
+                  text={topLinks[url]}
+                  url={bind("url")}
+                  match="subroute"
+                  mod={mod}
+                  active={
+                     alternativeLinks &&
+                     alternativeLinks[url] &&
+                     computable("url", (currentUrl) => {
+                        let links = alternativeLinks[url];
+                        return isArray(links) && links.some((link) => currentUrl.startsWith(link)) ? true : null;
+                     })
+                  }
+               />
+            </cx>
+         ))}
+         {children}
+      </div>
+   </cx>
+));
+
+export const MasterLayout = createFunctionalComponent(
+   ({ app, children, shadow, navTree, title, topLinks, alternativeLinks }: any) => (
+      <cx>
+         <PureContainer>
+            <header ws class={{ master_header: true, shadow, elevate: { expr: "!!{master.drawer.icon}" } }}>
+               <div class="master_topbar">
+                  <div class="master_hamburger">
+                     <Animicon
+                        shape={{ bind: "master.drawer.icon", defaultValue: null }}
+                        onClick={(e, { store }) => {
+                           store.update("master.drawer.icon", (shape) => {
+                              switch (shape) {
+                                 case "arrow":
+                                    return "close";
+
+                                 case "close":
+                                    return null;
+
+                                 default:
+                                    return "arrow";
+                              }
+                           });
+                        }}
+                     />
+                  </div>
+                  <img class="master_logo" src={Logo} />
+                  <Link href="https://cxjs.io" url={bind("url")} active={app == "site"}>
+                     Home
+                  </Link>
+                  <Link href="https://docs.cxjs.io" url={bind("url")} active={app == "docs"}>
+                     Docs
+                  </Link>
+                  <Link href="https://gallery.cxjs.io" url={bind("url")} active={app == "gallery"}>
+                     Gallery
+                  </Link>
+                  <Link href="https://fiddle.cxjs.io" url={bind("url")} active={app == "fiddle"}>
+                     Fiddle
+                  </Link>
+
+                  <div style="margin-left: auto" />
+
+                  <a
+                     target="_blank"
+                     rel="noopener noreferrer"
+                     href="https://www.npmjs.com/package/cx"
+                     class="master_npmversion"
+                  >
+                     <img src="https://img.shields.io/npm/v/cx" alt="version" />
+                  </a>
+
+                  <a
+                     className="master_iconlink"
+                     href="https://codesandbox.io/search?refinementList%5Btemplate%5D%5B0%5D=cxjs"
+                  >
+                     <img src={CodeSandboxIcon} alt="CodeSandbox" />
+                  </a>
+
+                  <GitHubStarCount />
+               </div>
+            </header>
+            <div class="sticky topbanner" visible={!!title}>
+               <div class="topbanner_heading">
+                  <h3>{title}</h3>
+                  <ContentPlaceholder name="topbanner" />
+               </div>
+               <div class="topbanner_tabs">
+                  <TopLinks topLinks={topLinks} alternativeLinks={alternativeLinks}>
+                     <ContentPlaceholder name="topbanner_tabs" />
+                  </TopLinks>
+               </div>
+            </div>
+            {children}
+            <SideDrawer out={bind("master.drawer.icon")}>
+               <div
+                  class="sidenav"
+                  style="height: 100%;"
+                  onClick={(e: any, { store }: any) => {
+                     if (e.target.nodeName == "A") store.delete("master.drawer.icon");
+                  }}
+               >
+                  <ContentPlaceholder name="navtree" visible={expr("{master.drawer.icon} == 'arrow'")}>
+                     <NavTree tree={navTree} url={bind("url")} showCategory />
+                  </ContentPlaceholder>
+                  <div visible={expr("{master.drawer.icon} == 'close'")}>
+                     <div class="sidenav_section">
+                        <Link href="https://cxjs.io">Home</Link>
+                     </div>
+                     <div class="sidenav_section">
+                        <Link href="https://docs.cxjs.io">Docs</Link>
+
+                        <TopLinks visible={app == "docs"} topLinks={topLinks} mod="subsystem" />
+                     </div>
+                     <div class="sidenav_section">
+                        <Link href="https://gallery.cxjs.io" match="subroute">
+                           Gallery
+                        </Link>
+
+                        <TopLinks visible={app == "gallery"} topLinks={topLinks} mod="subsystem" />
+                     </div>
+                     <div class="sidenav_section">
+                        <Link href="https://fiddle.cxjs.io" match="subroute">
+                           Fiddle
+                        </Link>
+                     </div>
+                  </div>
+               </div>
+            </SideDrawer>
+         </PureContainer>
+      </cx>
+   ),
+);
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 79b28bdf7..000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,13010 +0,0 @@
-{
-   "name": "cxjs",
-   "version": "1.1.1",
-   "lockfileVersion": 3,
-   "requires": true,
-   "packages": {
-      "": {
-         "name": "cxjs",
-         "version": "1.1.1",
-         "license": "MIT",
-         "workspaces": [
-            "packages/*",
-            "docs",
-            "gallery",
-            "litmus",
-            "benchmark",
-            "fiddle"
-         ],
-         "dependencies": {
-            "@types/react": "^18.2.0",
-            "react": "^18.2.0",
-            "react-dom": "^18.2.0"
-         },
-         "devDependencies": {
-            "@babel/core": "^7.21.8",
-            "@babel/plugin-transform-react-jsx": "^7.21.5",
-            "@babel/preset-env": "^7.21.5",
-            "@babel/register": "^7.21.0",
-            "babel-jest": "29.5.0",
-            "env-test": "^1.0.0",
-            "mocha": "^10.2.0",
-            "prettier": "^2.8.8"
-         }
-      },
-      "benchmark": {
-         "version": "1.0.0",
-         "dependencies": {
-            "casual": "^1.6.2",
-            "core-js": "^3.30.1",
-            "cx": "^23.4.1",
-            "cx-react": "^17.10.0",
-            "intl": "^1.2.5",
-            "react": "^18.2.0",
-            "react-dev-utils": "^12.0.1",
-            "react-dom": "^18.2.0",
-            "whatwg-fetch": "^3.6.2"
-         },
-         "devDependencies": {
-            "@babel/core": "^7.21.8",
-            "@babel/preset-env": "^7.21.5",
-            "@babel/preset-typescript": "^7.21.5",
-            "@types/node": "^18.16.3",
-            "@types/react": "^18.2.0",
-            "babel-loader": "^9.1.2",
-            "babel-plugin-transform-cx-imports": "^21.3.0",
-            "babel-plugin-transform-cx-jsx": "^21.3.0",
-            "babel-preset-cx-env": "^21.1.1",
-            "copy-webpack-plugin": "^11.0.0",
-            "css-loader": "^6.7.3",
-            "file-loader": "^6.2.0",
-            "html-webpack-plugin": "^5.5.1",
-            "if-loader": "^1.0.2",
-            "inline-manifest-webpack-plugin": "^4.0.2",
-            "json-loader": "^0.5.7",
-            "mini-css-extract-plugin": "^2.7.5",
-            "modify-babel-preset": "^3.2.1",
-            "sass": "^1.62.1",
-            "sass-loader": "^13.2.2",
-            "serve": "^14.2.0",
-            "style-loader": "^3.3.2",
-            "svg-url-loader": "^8.0.0",
-            "url-loader": "^4.1.1",
-            "webpack": "^5.81.0",
-            "webpack-bundle-analyzer": "^4.8.0",
-            "webpack-cleanup-plugin": "^0.5.1",
-            "webpack-cli": "^5.0.2",
-            "webpack-combine-loaders": "^2.0.4",
-            "webpack-dev-server": "^4.13.3",
-            "webpack-merge": "^5.8.0"
-         }
-      },
-      "benchmark/node_modules/cx": {
-         "version": "23.12.3",
-         "resolved": "https://registry.npmjs.org/cx/-/cx-23.12.3.tgz",
-         "integrity": "sha512-S/7k6RVV0OqLRD/eVwppWrYa9RUeBU/2xFYE+BGLSkgaRs7hfnfozRlU7drMX6gg04AnEZum+yBTyXDLeZ//FA==",
-         "dependencies": {
-            "intl-io": "^0.3.0",
-            "route-parser": "^0.0.5"
-         },
-         "peerDependencies": {
-            "@types/react": "*",
-            "react": "*",
-            "react-dom": "*"
-         }
-      },
-      "docs": {
-         "version": "1.0.0",
-         "dependencies": {
-            "casual": "^1.6.2",
-            "core-js": "^3.30.1",
-            "cx": "^23.4.1",
-            "cx-react": "^17.10.0",
-            "illuminate-js": "^1.0.0-alpha.2",
-            "intl": "^1.2.5",
-            "marked": "^4.3.0",
-            "react": "^18.2.0",
-            "react-dev-utils": "^12.0.1",
-            "react-dom": "^18.2.0",
-            "whatwg-fetch": "^3.6.2"
-         },
-         "devDependencies": {
-            "@babel/core": "^7.21.8",
-            "@babel/preset-env": "^7.21.5",
-            "@babel/preset-typescript": "^7.21.5",
-            "@types/node": "^18.16.3",
-            "@types/react": "^18.2.0",
-            "babel-loader": "^9.1.2",
-            "babel-plugin-transform-cx-imports": "^21.3.0",
-            "babel-plugin-transform-cx-jsx": "^21.3.0",
-            "babel-preset-cx-env": "^21.1.1",
-            "clean-webpack-plugin": "^4.0.0",
-            "copy-webpack-plugin": "^11.0.0",
-            "css-loader": "^6.7.3",
-            "file-loader": "^6.2.0",
-            "html-webpack-plugin": "^5.5.1",
-            "if-loader": "^1.0.2",
-            "inline-manifest-webpack-plugin": "^4.0.2",
-            "json-loader": "^0.5.7",
-            "mini-css-extract-plugin": "^2.7.5",
-            "modify-babel-preset": "^3.2.1",
-            "sass": "^1.62.1",
-            "sass-loader": "^13.2.2",
-            "style-loader": "^3.3.2",
-            "svg-url-loader": "^8.0.0",
-            "url-loader": "^4.1.1",
-            "webpack": "^5.81.0",
-            "webpack-bundle-analyzer": "^4.8.0",
-            "webpack-cleanup-plugin": "^0.5.1",
-            "webpack-cli": "^5.0.2",
-            "webpack-combine-loaders": "^2.0.4",
-            "webpack-dev-server": "^4.13.3",
-            "webpack-merge": "^5.8.0"
-         }
-      },
-      "docs/node_modules/cx": {
-         "version": "23.12.3",
-         "resolved": "https://registry.npmjs.org/cx/-/cx-23.12.3.tgz",
-         "integrity": "sha512-S/7k6RVV0OqLRD/eVwppWrYa9RUeBU/2xFYE+BGLSkgaRs7hfnfozRlU7drMX6gg04AnEZum+yBTyXDLeZ//FA==",
-         "dependencies": {
-            "intl-io": "^0.3.0",
-            "route-parser": "^0.0.5"
-         },
-         "peerDependencies": {
-            "@types/react": "*",
-            "react": "*",
-            "react-dom": "*"
-         }
-      },
-      "fiddle": {
-         "version": "1.0.0",
-         "license": "ISC",
-         "dependencies": {
-            "@babel/runtime": "^7.21.5",
-            "assert": "^2.0.0",
-            "buffer": "^6.0.3",
-            "casual": "^1.6.2",
-            "codemirror": "^5.45.0",
-            "core-js": "^3.30.1",
-            "cx": "^23.4.1",
-            "cx-react": "^17.4.1",
-            "deep-equal": "^2.2.1",
-            "deepmerge": "^4.3.1",
-            "path-browserify": "^1.0.1",
-            "prettier": "^2.8.8",
-            "process": "^0.11.10",
-            "query-string": "^8.1.0",
-            "react": "^18.2.0",
-            "react-dom": "^18.2.0",
-            "regenerator-runtime": "0.13.11",
-            "whatwg-fetch": "^3.6.2"
-         },
-         "devDependencies": {
-            "@babel/core": "^7.21.8",
-            "@babel/preset-env": "^7.21.5",
-            "@babel/preset-typescript": "^7.21.5",
-            "@babel/register": "^7.21.0",
-            "@babel/runtime-corejs2": "^7.21.5",
-            "@babel/runtime-corejs3": "^7.21.5",
-            "@types/node": "^18.16.3",
-            "@types/react": "^18.2.0",
-            "babel-loader": "^9.1.2",
-            "babel-plugin-transform-cx-imports": "^21.1.0",
-            "babel-plugin-transform-cx-jsx": "^21.1.0",
-            "babel-preset-cx-env": "^21.1.1",
-            "copy-webpack-plugin": "^11.0.0",
-            "css-loader": "^6.7.3",
-            "file-loader": "^6.2.0",
-            "html-webpack-plugin": "^5.5.1",
-            "if-loader": "^1.0.2",
-            "inline-manifest-webpack-plugin": "^4.0.2",
-            "json-loader": "^0.5.7",
-            "mini-css-extract-plugin": "^2.7.5",
-            "modify-babel-preset": "^3.2.1",
-            "sass": "^1.62.1",
-            "sass-loader": "^13.2.2",
-            "style-loader": "^3.3.2",
-            "svg-url-loader": "^8.0.0",
-            "url-loader": "^4.1.1",
-            "webpack": "^5.81.0",
-            "webpack-bundle-analyzer": "^4.8.0",
-            "webpack-cleanup-plugin": "^0.5.1",
-            "webpack-cli": "^5.0.2",
-            "webpack-combine-loaders": "^2.0.4",
-            "webpack-dev-server": "^4.13.3",
-            "webpack-md5-hash": "^0.0.6",
-            "webpack-merge": "^5.8.0"
-         }
-      },
-      "fiddle/node_modules/codemirror": {
-         "version": "5.65.13",
-         "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.13.tgz",
-         "integrity": "sha512-SVWEzKXmbHmTQQWaz03Shrh4nybG0wXx2MEu3FO4ezbPW8IbnZEd5iGHGEffSUaitKYa3i+pHpBsSvw8sPHtzg=="
-      },
-      "fiddle/node_modules/cx": {
-         "version": "23.12.3",
-         "resolved": "https://registry.npmjs.org/cx/-/cx-23.12.3.tgz",
-         "integrity": "sha512-S/7k6RVV0OqLRD/eVwppWrYa9RUeBU/2xFYE+BGLSkgaRs7hfnfozRlU7drMX6gg04AnEZum+yBTyXDLeZ//FA==",
-         "dependencies": {
-            "intl-io": "^0.3.0",
-            "route-parser": "^0.0.5"
-         },
-         "peerDependencies": {
-            "@types/react": "*",
-            "react": "*",
-            "react-dom": "*"
-         }
-      },
-      "gallery": {
-         "version": "1.0.0",
-         "dependencies": {
-            "casual": "^1.6.2",
-            "core-js": "^3.30.1",
-            "cx": "^23.4.1",
-            "cx-react": "^17.10.0",
-            "cx-theme-aquamarine": "^18.7.3",
-            "cx-theme-dark": "^18.7.1",
-            "cx-theme-frost": "^18.7.1",
-            "cx-theme-material": "^18.7.0",
-            "cx-theme-material-dark": "^20.1.0",
-            "cx-theme-space-blue": "^20.1.0",
-            "intl": "^1.2.5",
-            "plural": "^1.1.0",
-            "react": "^18.2.0",
-            "react-dev-utils": "^12.0.1",
-            "react-dom": "^18.2.0",
-            "whatwg-fetch": "^3.6.2"
-         },
-         "devDependencies": {
-            "@babel/core": "^7.21.8",
-            "@babel/preset-env": "^7.21.5",
-            "@babel/preset-typescript": "^7.21.5",
-            "@types/node": "^18.16.3",
-            "@types/react": "^18.2.0",
-            "babel-loader": "^9.1.2",
-            "babel-plugin-transform-cx-imports": "^21.3.0",
-            "babel-plugin-transform-cx-jsx": "^21.3.0",
-            "babel-preset-cx-env": "^21.1.1",
-            "clean-webpack-plugin": "^4.0.0",
-            "copy-webpack-plugin": "^11.0.0",
-            "css-loader": "^6.7.3",
-            "file-loader": "^6.2.0",
-            "html-webpack-plugin": "^5.5.1",
-            "if-loader": "^1.0.2",
-            "json-loader": "^0.5.7",
-            "mini-css-extract-plugin": "^2.7.5",
-            "modify-babel-preset": "^3.2.1",
-            "sass": "^1.62.1",
-            "sass-loader": "^13.2.2",
-            "style-loader": "^3.3.2",
-            "svg-url-loader": "^8.0.0",
-            "ts-loader": "^9.4.2",
-            "typescript": "^5.0.4",
-            "url-loader": "^4.1.1",
-            "webpack": "^5.81.0",
-            "webpack-bundle-analyzer": "^4.8.0",
-            "webpack-cli": "^5.0.2",
-            "webpack-combine-loaders": "^2.0.4",
-            "webpack-dev-server": "^4.13.3",
-            "webpack-merge": "^5.8.0"
-         }
-      },
-      "gallery/node_modules/cx": {
-         "version": "23.12.3",
-         "resolved": "https://registry.npmjs.org/cx/-/cx-23.12.3.tgz",
-         "integrity": "sha512-S/7k6RVV0OqLRD/eVwppWrYa9RUeBU/2xFYE+BGLSkgaRs7hfnfozRlU7drMX6gg04AnEZum+yBTyXDLeZ//FA==",
-         "dependencies": {
-            "intl-io": "^0.3.0",
-            "route-parser": "^0.0.5"
-         },
-         "peerDependencies": {
-            "@types/react": "*",
-            "react": "*",
-            "react-dom": "*"
-         }
-      },
-      "litmus": {
-         "version": "1.0.0",
-         "dependencies": {
-            "casual": "^1.6.2",
-            "core-js": "^3.30.1",
-            "cx": "^23.4.1",
-            "cx-immer": "^22.3.0",
-            "cx-react": "^17.10.0",
-            "immer": "^10.0.1",
-            "intl": "^1.2.5",
-            "react": "^18.2.0",
-            "react-dev-utils": "^12.0.1",
-            "react-dom": "^18.2.0",
-            "whatwg-fetch": "^3.6.2"
-         },
-         "devDependencies": {
-            "@babel/core": "^7.21.8",
-            "@babel/preset-env": "^7.21.5",
-            "@babel/preset-typescript": "^7.21.5",
-            "@types/node": "^18.16.3",
-            "@types/react": "^18.2.0",
-            "babel-loader": "^9.1.2",
-            "babel-plugin-transform-cx-imports": "^21.3.0",
-            "babel-plugin-transform-cx-jsx": "^21.3.0",
-            "babel-preset-cx-env": "^21.1.1",
-            "copy-webpack-plugin": "^11.0.0",
-            "css-loader": "^6.7.3",
-            "file-loader": "^6.2.0",
-            "html-webpack-plugin": "^5.5.1",
-            "if-loader": "^1.0.2",
-            "inline-manifest-webpack-plugin": "^4.0.2",
-            "json-loader": "^0.5.7",
-            "mini-css-extract-plugin": "^2.7.5",
-            "modify-babel-preset": "^3.2.1",
-            "process": "^0.11.10",
-            "sass": "^1.62.1",
-            "sass-loader": "^13.2.2",
-            "style-loader": "^3.3.2",
-            "svg-url-loader": "^8.0.0",
-            "ts-loader": "^9.4.2",
-            "typescript": "^5.0.4",
-            "url-loader": "^4.1.1",
-            "webpack": "^5.81.0",
-            "webpack-bundle-analyzer": "^4.8.0",
-            "webpack-cleanup-plugin": "^0.5.1",
-            "webpack-cli": "^5.0.2",
-            "webpack-combine-loaders": "^2.0.4",
-            "webpack-dev-server": "^4.13.3",
-            "webpack-merge": "^5.8.0"
-         }
-      },
-      "litmus/node_modules/cx": {
-         "version": "23.12.3",
-         "resolved": "https://registry.npmjs.org/cx/-/cx-23.12.3.tgz",
-         "integrity": "sha512-S/7k6RVV0OqLRD/eVwppWrYa9RUeBU/2xFYE+BGLSkgaRs7hfnfozRlU7drMX6gg04AnEZum+yBTyXDLeZ//FA==",
-         "dependencies": {
-            "intl-io": "^0.3.0",
-            "route-parser": "^0.0.5"
-         },
-         "peerDependencies": {
-            "@types/react": "*",
-            "react": "*",
-            "react-dom": "*"
-         }
-      },
-      "node_modules/@ampproject/remapping": {
-         "version": "2.2.1",
-         "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
-         "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-         "license": "Apache-2.0",
-         "dependencies": {
-            "@jridgewell/gen-mapping": "^0.3.0",
-            "@jridgewell/trace-mapping": "^0.3.9"
-         },
-         "engines": {
-            "node": ">=6.0.0"
-         }
-      },
-      "node_modules/@babel/code-frame": {
-         "version": "7.21.4",
-         "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
-         "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/highlight": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/compat-data": {
-         "version": "7.21.7",
-         "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.7.tgz",
-         "integrity": "sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/core": {
-         "version": "7.21.8",
-         "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz",
-         "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@ampproject/remapping": "^2.2.0",
-            "@babel/code-frame": "^7.21.4",
-            "@babel/generator": "^7.21.5",
-            "@babel/helper-compilation-targets": "^7.21.5",
-            "@babel/helper-module-transforms": "^7.21.5",
-            "@babel/helpers": "^7.21.5",
-            "@babel/parser": "^7.21.8",
-            "@babel/template": "^7.20.7",
-            "@babel/traverse": "^7.21.5",
-            "@babel/types": "^7.21.5",
-            "convert-source-map": "^1.7.0",
-            "debug": "^4.1.0",
-            "gensync": "^1.0.0-beta.2",
-            "json5": "^2.2.2",
-            "semver": "^6.3.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/babel"
-         }
-      },
-      "node_modules/@babel/core/node_modules/debug": {
-         "version": "4.3.4",
-         "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-         "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-         "license": "MIT",
-         "dependencies": {
-            "ms": "2.1.2"
-         },
-         "engines": {
-            "node": ">=6.0"
-         },
-         "peerDependenciesMeta": {
-            "supports-color": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/@babel/core/node_modules/ms": {
-         "version": "2.1.2",
-         "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-         "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-         "license": "MIT"
-      },
-      "node_modules/@babel/generator": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.5.tgz",
-         "integrity": "sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.21.5",
-            "@jridgewell/gen-mapping": "^0.3.2",
-            "@jridgewell/trace-mapping": "^0.3.17",
-            "jsesc": "^2.5.1"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/generator/node_modules/jsesc": {
-         "version": "2.5.2",
-         "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-         "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-         "license": "MIT",
-         "bin": {
-            "jsesc": "bin/jsesc"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/@babel/helper-annotate-as-pure": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
-         "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.21.5.tgz",
-         "integrity": "sha512-uNrjKztPLkUk7bpCNC0jEKDJzzkvel/W+HguzbN8krA+LPfC1CEobJEvAvGka2A/M+ViOqXdcRL0GqPUJSjx9g==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-compilation-targets": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz",
-         "integrity": "sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/compat-data": "^7.21.5",
-            "@babel/helper-validator-option": "^7.21.0",
-            "browserslist": "^4.21.3",
-            "lru-cache": "^5.1.1",
-            "semver": "^6.3.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0"
-         }
-      },
-      "node_modules/@babel/helper-create-class-features-plugin": {
-         "version": "7.21.8",
-         "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.8.tgz",
-         "integrity": "sha512-+THiN8MqiH2AczyuZrnrKL6cAxFRRQDKW9h1YkBvbgKmAm6mwiacig1qT73DHIWMGo40GRnsEfN3LA+E6NtmSw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-annotate-as-pure": "^7.18.6",
-            "@babel/helper-environment-visitor": "^7.21.5",
-            "@babel/helper-function-name": "^7.21.0",
-            "@babel/helper-member-expression-to-functions": "^7.21.5",
-            "@babel/helper-optimise-call-expression": "^7.18.6",
-            "@babel/helper-replace-supers": "^7.21.5",
-            "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-            "@babel/helper-split-export-declaration": "^7.18.6",
-            "semver": "^6.3.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0"
-         }
-      },
-      "node_modules/@babel/helper-create-regexp-features-plugin": {
-         "version": "7.21.8",
-         "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.8.tgz",
-         "integrity": "sha512-zGuSdedkFtsFHGbexAvNuipg1hbtitDLo2XE8/uf6Y9sOQV1xsYX/2pNbtedp/X0eU1pIt+kGvaqHCowkRbS5g==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-annotate-as-pure": "^7.18.6",
-            "regexpu-core": "^5.3.1",
-            "semver": "^6.3.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0"
-         }
-      },
-      "node_modules/@babel/helper-define-polyfill-provider": {
-         "version": "0.3.3",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-compilation-targets": "^7.17.7",
-            "@babel/helper-plugin-utils": "^7.16.7",
-            "debug": "^4.1.1",
-            "lodash.debounce": "^4.0.8",
-            "resolve": "^1.14.2",
-            "semver": "^6.1.2"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.4.0-0"
-         }
-      },
-      "node_modules/@babel/helper-define-polyfill-provider/node_modules/debug": {
-         "version": "4.3.4",
-         "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-         "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-         "license": "MIT",
-         "dependencies": {
-            "ms": "2.1.2"
-         },
-         "engines": {
-            "node": ">=6.0"
-         },
-         "peerDependenciesMeta": {
-            "supports-color": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/@babel/helper-define-polyfill-provider/node_modules/ms": {
-         "version": "2.1.2",
-         "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-         "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-         "license": "MIT"
-      },
-      "node_modules/@babel/helper-environment-visitor": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz",
-         "integrity": "sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-function-name": {
-         "version": "7.21.0",
-         "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
-         "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/template": "^7.20.7",
-            "@babel/types": "^7.21.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-hoist-variables": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
-         "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-member-expression-to-functions": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.5.tgz",
-         "integrity": "sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-module-imports": {
-         "version": "7.21.4",
-         "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
-         "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.21.4"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-module-transforms": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz",
-         "integrity": "sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-environment-visitor": "^7.21.5",
-            "@babel/helper-module-imports": "^7.21.4",
-            "@babel/helper-simple-access": "^7.21.5",
-            "@babel/helper-split-export-declaration": "^7.18.6",
-            "@babel/helper-validator-identifier": "^7.19.1",
-            "@babel/template": "^7.20.7",
-            "@babel/traverse": "^7.21.5",
-            "@babel/types": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-optimise-call-expression": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
-         "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-plugin-utils": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
-         "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-remap-async-to-generator": {
-         "version": "7.18.9",
-         "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
-         "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-annotate-as-pure": "^7.18.6",
-            "@babel/helper-environment-visitor": "^7.18.9",
-            "@babel/helper-wrap-function": "^7.18.9",
-            "@babel/types": "^7.18.9"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0"
-         }
-      },
-      "node_modules/@babel/helper-replace-supers": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.21.5.tgz",
-         "integrity": "sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-environment-visitor": "^7.21.5",
-            "@babel/helper-member-expression-to-functions": "^7.21.5",
-            "@babel/helper-optimise-call-expression": "^7.18.6",
-            "@babel/template": "^7.20.7",
-            "@babel/traverse": "^7.21.5",
-            "@babel/types": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-simple-access": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz",
-         "integrity": "sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-         "version": "7.20.0",
-         "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
-         "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.20.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-split-export-declaration": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
-         "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-string-parser": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
-         "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-validator-identifier": {
-         "version": "7.19.1",
-         "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-         "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-validator-option": {
-         "version": "7.21.0",
-         "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
-         "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helper-wrap-function": {
-         "version": "7.20.5",
-         "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
-         "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-function-name": "^7.19.0",
-            "@babel/template": "^7.18.10",
-            "@babel/traverse": "^7.20.5",
-            "@babel/types": "^7.20.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/helpers": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.5.tgz",
-         "integrity": "sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/template": "^7.20.7",
-            "@babel/traverse": "^7.21.5",
-            "@babel/types": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/highlight": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
-         "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-validator-identifier": "^7.18.6",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/highlight/node_modules/ansi-styles": {
-         "version": "3.2.1",
-         "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-         "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-         "license": "MIT",
-         "dependencies": {
-            "color-convert": "^1.9.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/@babel/highlight/node_modules/chalk": {
-         "version": "2.4.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-         "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-         "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.8.0"
-         }
-      },
-      "node_modules/@babel/highlight/node_modules/has-flag": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-         "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/@babel/highlight/node_modules/supports-color": {
-         "version": "5.5.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-         "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/@babel/parser": {
-         "version": "7.21.8",
-         "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.8.tgz",
-         "integrity": "sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==",
-         "license": "MIT",
-         "bin": {
-            "parser": "bin/babel-parser.js"
-         },
-         "engines": {
-            "node": ">=6.0.0"
-         }
-      },
-      "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz",
-         "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0"
-         }
-      },
-      "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-         "version": "7.20.7",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
-         "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-            "@babel/plugin-proposal-optional-chaining": "^7.20.7"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.13.0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-async-generator-functions": {
-         "version": "7.20.7",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
-         "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-environment-visitor": "^7.18.9",
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/helper-remap-async-to-generator": "^7.18.9",
-            "@babel/plugin-syntax-async-generators": "^7.8.4"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-class-properties": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
-         "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-create-class-features-plugin": "^7.18.6",
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-class-static-block": {
-         "version": "7.21.0",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz",
-         "integrity": "sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-create-class-features-plugin": "^7.21.0",
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/plugin-syntax-class-static-block": "^7.14.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.12.0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-dynamic-import": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz",
-         "integrity": "sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6",
-            "@babel/plugin-syntax-dynamic-import": "^7.8.3"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-export-namespace-from": {
-         "version": "7.18.9",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz",
-         "integrity": "sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.9",
-            "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-function-bind": {
-         "version": "7.18.9",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-function-bind/-/plugin-proposal-function-bind-7.18.9.tgz",
-         "integrity": "sha512-9RfxqKkRBCCT0xoBl9AqieCMscJmSAL9HYixGMWH549jUpT9csWWK/HEYZEx9t9iW/PRSXgX95x9bDlgtAJGFA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.9",
-            "@babel/plugin-syntax-function-bind": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-json-strings": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz",
-         "integrity": "sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6",
-            "@babel/plugin-syntax-json-strings": "^7.8.3"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
-         "version": "7.20.7",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
-         "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz",
-         "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6",
-            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-numeric-separator": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz",
-         "integrity": "sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6",
-            "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-object-rest-spread": {
-         "version": "7.20.7",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
-         "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/compat-data": "^7.20.5",
-            "@babel/helper-compilation-targets": "^7.20.7",
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-            "@babel/plugin-transform-parameters": "^7.20.7"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-optional-catch-binding": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz",
-         "integrity": "sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6",
-            "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-optional-chaining": {
-         "version": "7.21.0",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
-         "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-            "@babel/plugin-syntax-optional-chaining": "^7.8.3"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-private-methods": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
-         "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-create-class-features-plugin": "^7.18.6",
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-private-property-in-object": {
-         "version": "7.21.0",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz",
-         "integrity": "sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-annotate-as-pure": "^7.18.6",
-            "@babel/helper-create-class-features-plugin": "^7.21.0",
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-proposal-unicode-property-regex": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
-         "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=4"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-async-generators": {
-         "version": "7.8.4",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-         "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-bigint": {
-         "version": "7.8.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-         "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-class-properties": {
-         "version": "7.12.13",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
-         "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.12.13"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-class-static-block": {
-         "version": "7.14.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-         "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-dynamic-import": {
-         "version": "7.8.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-         "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-export-namespace-from": {
-         "version": "7.8.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
-         "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.8.3"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-function-bind": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-function-bind/-/plugin-syntax-function-bind-7.18.6.tgz",
-         "integrity": "sha512-wZN0Aq/AScknI9mKGcR3TpHdASMufFGaeJgc1rhPmLtZ/PniwjePSh8cfh8tXMB3U4kh/3cRKrLjDtedejg8jQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-import-assertions": {
-         "version": "7.20.0",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
-         "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.19.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-import-meta": {
-         "version": "7.10.4",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-         "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.10.4"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-json-strings": {
-         "version": "7.8.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-         "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-jsx": {
-         "version": "7.21.4",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz",
-         "integrity": "sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.20.2"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
-         "version": "7.10.4",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-         "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.10.4"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
-         "version": "7.8.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-         "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-numeric-separator": {
-         "version": "7.10.4",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-         "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.10.4"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-object-rest-spread": {
-         "version": "7.8.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-         "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-optional-catch-binding": {
-         "version": "7.8.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-         "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-optional-chaining": {
-         "version": "7.8.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-         "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-private-property-in-object": {
-         "version": "7.14.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-         "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-top-level-await": {
-         "version": "7.14.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-         "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-syntax-typescript": {
-         "version": "7.21.4",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.21.4.tgz",
-         "integrity": "sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.20.2"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-arrow-functions": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz",
-         "integrity": "sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-async-to-generator": {
-         "version": "7.20.7",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
-         "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-module-imports": "^7.18.6",
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/helper-remap-async-to-generator": "^7.18.9"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-block-scoped-functions": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz",
-         "integrity": "sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-block-scoping": {
-         "version": "7.21.0",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz",
-         "integrity": "sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.20.2"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-classes": {
-         "version": "7.21.0",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
-         "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-annotate-as-pure": "^7.18.6",
-            "@babel/helper-compilation-targets": "^7.20.7",
-            "@babel/helper-environment-visitor": "^7.18.9",
-            "@babel/helper-function-name": "^7.21.0",
-            "@babel/helper-optimise-call-expression": "^7.18.6",
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/helper-replace-supers": "^7.20.7",
-            "@babel/helper-split-export-declaration": "^7.18.6",
-            "globals": "^11.1.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-computed-properties": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz",
-         "integrity": "sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.21.5",
-            "@babel/template": "^7.20.7"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-destructuring": {
-         "version": "7.21.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz",
-         "integrity": "sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.20.2"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-dotall-regex": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz",
-         "integrity": "sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-duplicate-keys": {
-         "version": "7.18.9",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz",
-         "integrity": "sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.9"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-exponentiation-operator": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz",
-         "integrity": "sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-for-of": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz",
-         "integrity": "sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-function-name": {
-         "version": "7.18.9",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
-         "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-compilation-targets": "^7.18.9",
-            "@babel/helper-function-name": "^7.18.9",
-            "@babel/helper-plugin-utils": "^7.18.9"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-literals": {
-         "version": "7.18.9",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz",
-         "integrity": "sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.9"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-member-expression-literals": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz",
-         "integrity": "sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-modules-amd": {
-         "version": "7.20.11",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
-         "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-module-transforms": "^7.20.11",
-            "@babel/helper-plugin-utils": "^7.20.2"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-modules-commonjs": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz",
-         "integrity": "sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-module-transforms": "^7.21.5",
-            "@babel/helper-plugin-utils": "^7.21.5",
-            "@babel/helper-simple-access": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-modules-systemjs": {
-         "version": "7.20.11",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz",
-         "integrity": "sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-hoist-variables": "^7.18.6",
-            "@babel/helper-module-transforms": "^7.20.11",
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/helper-validator-identifier": "^7.19.1"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-modules-umd": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz",
-         "integrity": "sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-module-transforms": "^7.18.6",
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-         "version": "7.20.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz",
-         "integrity": "sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-create-regexp-features-plugin": "^7.20.5",
-            "@babel/helper-plugin-utils": "^7.20.2"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-new-target": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz",
-         "integrity": "sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-object-super": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
-         "integrity": "sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6",
-            "@babel/helper-replace-supers": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-parameters": {
-         "version": "7.21.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz",
-         "integrity": "sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.20.2"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-property-literals": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz",
-         "integrity": "sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-react-jsx": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.5.tgz",
-         "integrity": "sha512-ELdlq61FpoEkHO6gFRpfj0kUgSwQTGoaEU8eMRoS8Dv3v6e7BjEAj5WMtIBRdHUeAioMhKP5HyxNzNnP+heKbA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-annotate-as-pure": "^7.18.6",
-            "@babel/helper-module-imports": "^7.21.4",
-            "@babel/helper-plugin-utils": "^7.21.5",
-            "@babel/plugin-syntax-jsx": "^7.21.4",
-            "@babel/types": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-regenerator": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz",
-         "integrity": "sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.21.5",
-            "regenerator-transform": "^0.15.1"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-reserved-words": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz",
-         "integrity": "sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-shorthand-properties": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz",
-         "integrity": "sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-spread": {
-         "version": "7.20.7",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
-         "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-sticky-regex": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz",
-         "integrity": "sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-template-literals": {
-         "version": "7.18.9",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz",
-         "integrity": "sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.9"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-typeof-symbol": {
-         "version": "7.18.9",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz",
-         "integrity": "sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.18.9"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-typescript": {
-         "version": "7.21.3",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.3.tgz",
-         "integrity": "sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-annotate-as-pure": "^7.18.6",
-            "@babel/helper-create-class-features-plugin": "^7.21.0",
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/plugin-syntax-typescript": "^7.20.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-unicode-escapes": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz",
-         "integrity": "sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.21.5"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/plugin-transform-unicode-regex": {
-         "version": "7.18.6",
-         "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz",
-         "integrity": "sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-            "@babel/helper-plugin-utils": "^7.18.6"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/preset-env": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.21.5.tgz",
-         "integrity": "sha512-wH00QnTTldTbf/IefEVyChtRdw5RJvODT/Vb4Vcxq1AZvtXj6T0YeX0cAcXhI6/BdGuiP3GcNIL4OQbI2DVNxg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/compat-data": "^7.21.5",
-            "@babel/helper-compilation-targets": "^7.21.5",
-            "@babel/helper-plugin-utils": "^7.21.5",
-            "@babel/helper-validator-option": "^7.21.0",
-            "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
-            "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.20.7",
-            "@babel/plugin-proposal-async-generator-functions": "^7.20.7",
-            "@babel/plugin-proposal-class-properties": "^7.18.6",
-            "@babel/plugin-proposal-class-static-block": "^7.21.0",
-            "@babel/plugin-proposal-dynamic-import": "^7.18.6",
-            "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-            "@babel/plugin-proposal-json-strings": "^7.18.6",
-            "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
-            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-            "@babel/plugin-proposal-numeric-separator": "^7.18.6",
-            "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-            "@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
-            "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-            "@babel/plugin-proposal-private-methods": "^7.18.6",
-            "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
-            "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
-            "@babel/plugin-syntax-async-generators": "^7.8.4",
-            "@babel/plugin-syntax-class-properties": "^7.12.13",
-            "@babel/plugin-syntax-class-static-block": "^7.14.5",
-            "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-            "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-            "@babel/plugin-syntax-import-assertions": "^7.20.0",
-            "@babel/plugin-syntax-import-meta": "^7.10.4",
-            "@babel/plugin-syntax-json-strings": "^7.8.3",
-            "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-            "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-            "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-            "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-            "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-            "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-            "@babel/plugin-syntax-top-level-await": "^7.14.5",
-            "@babel/plugin-transform-arrow-functions": "^7.21.5",
-            "@babel/plugin-transform-async-to-generator": "^7.20.7",
-            "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
-            "@babel/plugin-transform-block-scoping": "^7.21.0",
-            "@babel/plugin-transform-classes": "^7.21.0",
-            "@babel/plugin-transform-computed-properties": "^7.21.5",
-            "@babel/plugin-transform-destructuring": "^7.21.3",
-            "@babel/plugin-transform-dotall-regex": "^7.18.6",
-            "@babel/plugin-transform-duplicate-keys": "^7.18.9",
-            "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
-            "@babel/plugin-transform-for-of": "^7.21.5",
-            "@babel/plugin-transform-function-name": "^7.18.9",
-            "@babel/plugin-transform-literals": "^7.18.9",
-            "@babel/plugin-transform-member-expression-literals": "^7.18.6",
-            "@babel/plugin-transform-modules-amd": "^7.20.11",
-            "@babel/plugin-transform-modules-commonjs": "^7.21.5",
-            "@babel/plugin-transform-modules-systemjs": "^7.20.11",
-            "@babel/plugin-transform-modules-umd": "^7.18.6",
-            "@babel/plugin-transform-named-capturing-groups-regex": "^7.20.5",
-            "@babel/plugin-transform-new-target": "^7.18.6",
-            "@babel/plugin-transform-object-super": "^7.18.6",
-            "@babel/plugin-transform-parameters": "^7.21.3",
-            "@babel/plugin-transform-property-literals": "^7.18.6",
-            "@babel/plugin-transform-regenerator": "^7.21.5",
-            "@babel/plugin-transform-reserved-words": "^7.18.6",
-            "@babel/plugin-transform-shorthand-properties": "^7.18.6",
-            "@babel/plugin-transform-spread": "^7.20.7",
-            "@babel/plugin-transform-sticky-regex": "^7.18.6",
-            "@babel/plugin-transform-template-literals": "^7.18.9",
-            "@babel/plugin-transform-typeof-symbol": "^7.18.9",
-            "@babel/plugin-transform-unicode-escapes": "^7.21.5",
-            "@babel/plugin-transform-unicode-regex": "^7.18.6",
-            "@babel/preset-modules": "^0.1.5",
-            "@babel/types": "^7.21.5",
-            "babel-plugin-polyfill-corejs2": "^0.3.3",
-            "babel-plugin-polyfill-corejs3": "^0.6.0",
-            "babel-plugin-polyfill-regenerator": "^0.4.1",
-            "core-js-compat": "^3.25.1",
-            "semver": "^6.3.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/preset-modules": {
-         "version": "0.1.5",
-         "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
-         "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.0.0",
-            "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
-            "@babel/plugin-transform-dotall-regex": "^7.4.4",
-            "@babel/types": "^7.4.4",
-            "esutils": "^2.0.2"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/preset-typescript": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.21.5.tgz",
-         "integrity": "sha512-iqe3sETat5EOrORXiQ6rWfoOg2y68Cs75B9wNxdPW4kixJxh7aXQE1KPdWLDniC24T/6dSnguF33W9j/ZZQcmA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.21.5",
-            "@babel/helper-validator-option": "^7.21.0",
-            "@babel/plugin-syntax-jsx": "^7.21.4",
-            "@babel/plugin-transform-modules-commonjs": "^7.21.5",
-            "@babel/plugin-transform-typescript": "^7.21.3"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/register": {
-         "version": "7.21.0",
-         "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.21.0.tgz",
-         "integrity": "sha512-9nKsPmYDi5DidAqJaQooxIhsLJiNMkGr8ypQ8Uic7cIox7UCDsM7HuUGxdGT7mSDTYbqzIdsOWzfBton/YJrMw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "clone-deep": "^4.0.1",
-            "find-cache-dir": "^2.0.0",
-            "make-dir": "^2.1.0",
-            "pirates": "^4.0.5",
-            "source-map-support": "^0.5.16"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/@babel/regjsgen": {
-         "version": "0.8.0",
-         "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
-         "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
-         "license": "MIT"
-      },
-      "node_modules/@babel/runtime": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
-         "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
-         "license": "MIT",
-         "dependencies": {
-            "regenerator-runtime": "^0.13.11"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/runtime-corejs2": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.21.5.tgz",
-         "integrity": "sha512-S2tysuG+DdRT77RwSQjlQWGdPW+91F3JmVLUxo5Lggu3LmTe57NVpagpxu0UW/mzP++UQY0r38I7wnhav8X4fA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "core-js": "^2.6.12",
-            "regenerator-runtime": "^0.13.11"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/runtime-corejs2/node_modules/core-js": {
-         "version": "2.6.12",
-         "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-         "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-         "dev": true,
-         "hasInstallScript": true,
-         "license": "MIT"
-      },
-      "node_modules/@babel/runtime-corejs3": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.21.5.tgz",
-         "integrity": "sha512-FRqFlFKNazWYykft5zvzuEl1YyTDGsIRrjV9rvxvYkUC7W/ueBng1X68Xd6uRMzAaJ0xMKn08/wem5YS1lpX8w==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "core-js-pure": "^3.25.1",
-            "regenerator-runtime": "^0.13.11"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/template": {
-         "version": "7.20.7",
-         "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
-         "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/code-frame": "^7.18.6",
-            "@babel/parser": "^7.20.7",
-            "@babel/types": "^7.20.7"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/traverse": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.5.tgz",
-         "integrity": "sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/code-frame": "^7.21.4",
-            "@babel/generator": "^7.21.5",
-            "@babel/helper-environment-visitor": "^7.21.5",
-            "@babel/helper-function-name": "^7.21.0",
-            "@babel/helper-hoist-variables": "^7.18.6",
-            "@babel/helper-split-export-declaration": "^7.18.6",
-            "@babel/parser": "^7.21.5",
-            "@babel/types": "^7.21.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@babel/traverse/node_modules/debug": {
-         "version": "4.3.4",
-         "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-         "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-         "license": "MIT",
-         "dependencies": {
-            "ms": "2.1.2"
-         },
-         "engines": {
-            "node": ">=6.0"
-         },
-         "peerDependenciesMeta": {
-            "supports-color": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/@babel/traverse/node_modules/ms": {
-         "version": "2.1.2",
-         "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-         "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-         "license": "MIT"
-      },
-      "node_modules/@babel/types": {
-         "version": "7.21.5",
-         "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.5.tgz",
-         "integrity": "sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-string-parser": "^7.21.5",
-            "@babel/helper-validator-identifier": "^7.19.1",
-            "to-fast-properties": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/@discoveryjs/json-ext": {
-         "version": "0.5.7",
-         "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
-         "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10.0.0"
-         }
-      },
-      "node_modules/@istanbuljs/load-nyc-config": {
-         "version": "1.1.0",
-         "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-         "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "camelcase": "^5.3.1",
-            "find-up": "^4.1.0",
-            "get-package-type": "^0.1.0",
-            "js-yaml": "^3.13.1",
-            "resolve-from": "^5.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
-         "version": "1.0.10",
-         "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-         "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "sprintf-js": "~1.0.2"
-         }
-      },
-      "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
-         "version": "5.3.1",
-         "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-         "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
-         "version": "4.1.0",
-         "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-         "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
-         "version": "3.14.1",
-         "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-         "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "argparse": "^1.0.7",
-            "esprima": "^4.0.0"
-         },
-         "bin": {
-            "js-yaml": "bin/js-yaml.js"
-         }
-      },
-      "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
-         "version": "5.0.0",
-         "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-         "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "p-locate": "^4.1.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
-         "version": "4.1.0",
-         "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-         "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "p-limit": "^2.2.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/@istanbuljs/schema": {
-         "version": "0.1.3",
-         "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-         "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/@jest/schemas": {
-         "version": "29.4.3",
-         "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.4.3.tgz",
-         "integrity": "sha512-VLYKXQmtmuEz6IxJsrZwzG9NvtkQsWNnWMsKxqWNu3+CnfzJQhp0WDDKWLVV9hLKr0l3SLLFRqcYHjhtyuDVxg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@sinclair/typebox": "^0.25.16"
-         },
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         }
-      },
-      "node_modules/@jest/transform": {
-         "version": "29.5.0",
-         "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.5.0.tgz",
-         "integrity": "sha512-8vbeZWqLJOvHaDfeMuoHITGKSz5qWc9u04lnWrQE3VyuSw604PzQM824ZeX9XSjUCeDiE3GuxZe5UKa8J61NQw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/core": "^7.11.6",
-            "@jest/types": "^29.5.0",
-            "@jridgewell/trace-mapping": "^0.3.15",
-            "babel-plugin-istanbul": "^6.1.1",
-            "chalk": "^4.0.0",
-            "convert-source-map": "^2.0.0",
-            "fast-json-stable-stringify": "^2.1.0",
-            "graceful-fs": "^4.2.9",
-            "jest-haste-map": "^29.5.0",
-            "jest-regex-util": "^29.4.3",
-            "jest-util": "^29.5.0",
-            "micromatch": "^4.0.4",
-            "pirates": "^4.0.4",
-            "slash": "^3.0.0",
-            "write-file-atomic": "^4.0.2"
-         },
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         }
-      },
-      "node_modules/@jest/transform/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/@jest/transform/node_modules/convert-source-map": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-         "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@jest/transform/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/@jest/types": {
-         "version": "29.5.0",
-         "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.5.0.tgz",
-         "integrity": "sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@jest/schemas": "^29.4.3",
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^17.0.8",
-            "chalk": "^4.0.0"
-         },
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         }
-      },
-      "node_modules/@jest/types/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/@jest/types/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/@jridgewell/gen-mapping": {
-         "version": "0.3.3",
-         "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-         "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@jridgewell/set-array": "^1.0.1",
-            "@jridgewell/sourcemap-codec": "^1.4.10",
-            "@jridgewell/trace-mapping": "^0.3.9"
-         },
-         "engines": {
-            "node": ">=6.0.0"
-         }
-      },
-      "node_modules/@jridgewell/resolve-uri": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
-         "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.0.0"
-         }
-      },
-      "node_modules/@jridgewell/set-array": {
-         "version": "1.1.2",
-         "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-         "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.0.0"
-         }
-      },
-      "node_modules/@jridgewell/source-map": {
-         "version": "0.3.3",
-         "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
-         "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
-         "license": "MIT",
-         "dependencies": {
-            "@jridgewell/gen-mapping": "^0.3.0",
-            "@jridgewell/trace-mapping": "^0.3.9"
-         }
-      },
-      "node_modules/@jridgewell/sourcemap-codec": {
-         "version": "1.4.15",
-         "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-         "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-         "license": "MIT"
-      },
-      "node_modules/@jridgewell/trace-mapping": {
-         "version": "0.3.18",
-         "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
-         "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
-         "license": "MIT",
-         "dependencies": {
-            "@jridgewell/resolve-uri": "3.1.0",
-            "@jridgewell/sourcemap-codec": "1.4.14"
-         }
-      },
-      "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
-         "version": "1.4.14",
-         "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-         "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-         "license": "MIT"
-      },
-      "node_modules/@leichtgewicht/ip-codec": {
-         "version": "2.0.4",
-         "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
-         "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@nodelib/fs.scandir": {
-         "version": "2.1.5",
-         "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-         "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-         "license": "MIT",
-         "dependencies": {
-            "@nodelib/fs.stat": "2.0.5",
-            "run-parallel": "^1.1.9"
-         },
-         "engines": {
-            "node": ">= 8"
-         }
-      },
-      "node_modules/@nodelib/fs.stat": {
-         "version": "2.0.5",
-         "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-         "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 8"
-         }
-      },
-      "node_modules/@nodelib/fs.walk": {
-         "version": "1.2.8",
-         "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-         "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-         "license": "MIT",
-         "dependencies": {
-            "@nodelib/fs.scandir": "2.1.5",
-            "fastq": "^1.6.0"
-         },
-         "engines": {
-            "node": ">= 8"
-         }
-      },
-      "node_modules/@polka/url": {
-         "version": "1.0.0-next.21",
-         "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
-         "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@rollup/plugin-multi-entry": {
-         "version": "6.0.0",
-         "resolved": "https://registry.npmjs.org/@rollup/plugin-multi-entry/-/plugin-multi-entry-6.0.0.tgz",
-         "integrity": "sha512-msBgVncGQwh/ahxeP/rc8MXVZNBOjoVCsBuDk6uqyFzDv/SZN7jksfAsu6DJ2w4r5PaBX3/OXOjVPeCxya2waA==",
-         "license": "MIT",
-         "dependencies": {
-            "@rollup/plugin-virtual": "^3.0.0",
-            "matched": "^5.0.1"
-         },
-         "engines": {
-            "node": ">=14.0.0"
-         },
-         "peerDependencies": {
-            "rollup": "^1.20.0||^2.0.0||^3.0.0"
-         },
-         "peerDependenciesMeta": {
-            "rollup": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/@rollup/plugin-multi-entry/node_modules/matched": {
-         "version": "5.0.1",
-         "resolved": "https://registry.npmjs.org/matched/-/matched-5.0.1.tgz",
-         "integrity": "sha512-E1fhSTPRyhAlNaNvGXAgZQlq1hL0bgYMTk/6bktVlIhzUnX/SZs7296ACdVeNJE8xFNGSuvd9IpI7vSnmcqLvw==",
-         "license": "MIT",
-         "dependencies": {
-            "glob": "^7.1.6",
-            "picomatch": "^2.2.1"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/jonschlinkert"
-         }
-      },
-      "node_modules/@rollup/plugin-virtual": {
-         "version": "3.0.1",
-         "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.1.tgz",
-         "integrity": "sha512-fK8O0IL5+q+GrsMLuACVNk2x21g3yaw+sG2qn16SnUd3IlBsQyvWxLMGHmCmXRMecPjGRSZ/1LmZB4rjQm68og==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=14.0.0"
-         },
-         "peerDependencies": {
-            "rollup": "^1.20.0||^2.0.0||^3.0.0"
-         },
-         "peerDependenciesMeta": {
-            "rollup": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/@sinclair/typebox": {
-         "version": "0.25.24",
-         "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz",
-         "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@types/babel__core": {
-         "version": "7.20.0",
-         "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
-         "integrity": "sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/parser": "^7.20.7",
-            "@babel/types": "^7.20.7",
-            "@types/babel__generator": "*",
-            "@types/babel__template": "*",
-            "@types/babel__traverse": "*"
-         }
-      },
-      "node_modules/@types/babel__generator": {
-         "version": "7.6.4",
-         "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
-         "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.0.0"
-         }
-      },
-      "node_modules/@types/babel__template": {
-         "version": "7.4.1",
-         "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
-         "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/parser": "^7.1.0",
-            "@babel/types": "^7.0.0"
-         }
-      },
-      "node_modules/@types/babel__traverse": {
-         "version": "7.18.5",
-         "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.5.tgz",
-         "integrity": "sha512-enCvTL8m/EHS/zIvJno9nE+ndYPh1/oNFzRYRmtUqJICG2VnCSBzMLW5VN2KCQU91f23tsNKR8v7VJJQMatl7Q==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/types": "^7.3.0"
-         }
-      },
-      "node_modules/@types/body-parser": {
-         "version": "1.19.2",
-         "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
-         "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/connect": "*",
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/bonjour": {
-         "version": "3.5.10",
-         "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
-         "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/connect": {
-         "version": "3.4.35",
-         "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
-         "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/connect-history-api-fallback": {
-         "version": "1.5.0",
-         "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz",
-         "integrity": "sha512-4x5FkPpLipqwthjPsF7ZRbOv3uoLUFkTA9G9v583qi4pACvq0uTELrB8OLUzPWUI4IJIyvM85vzkV1nyiI2Lig==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/express-serve-static-core": "*",
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/eslint": {
-         "version": "8.37.0",
-         "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.37.0.tgz",
-         "integrity": "sha512-Piet7dG2JBuDIfohBngQ3rCt7MgO9xCO4xIMKxBThCq5PNRB91IjlJ10eJVwfoNtvTErmxLzwBZ7rHZtbOMmFQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@types/estree": "*",
-            "@types/json-schema": "*"
-         }
-      },
-      "node_modules/@types/eslint-scope": {
-         "version": "3.7.4",
-         "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
-         "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-         "license": "MIT",
-         "dependencies": {
-            "@types/eslint": "*",
-            "@types/estree": "*"
-         }
-      },
-      "node_modules/@types/estree": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-         "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
-         "license": "MIT"
-      },
-      "node_modules/@types/express": {
-         "version": "4.17.17",
-         "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
-         "integrity": "sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/body-parser": "*",
-            "@types/express-serve-static-core": "^4.17.33",
-            "@types/qs": "*",
-            "@types/serve-static": "*"
-         }
-      },
-      "node_modules/@types/express-serve-static-core": {
-         "version": "4.17.34",
-         "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.34.tgz",
-         "integrity": "sha512-fvr49XlCGoUj2Pp730AItckfjat4WNb0lb3kfrLWffd+RLeoGAMsq7UOy04PAPtoL01uKwcp6u8nhzpgpDYr3w==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/node": "*",
-            "@types/qs": "*",
-            "@types/range-parser": "*",
-            "@types/send": "*"
-         }
-      },
-      "node_modules/@types/glob": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
-         "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/minimatch": "*",
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/graceful-fs": {
-         "version": "4.1.6",
-         "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
-         "integrity": "sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/html-minifier-terser": {
-         "version": "6.1.0",
-         "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-         "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@types/http-proxy": {
-         "version": "1.17.11",
-         "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.11.tgz",
-         "integrity": "sha512-HC8G7c1WmaF2ekqpnFq626xd3Zz0uvaqFmBJNRZCGEZCXkvSdJoNFn/8Ygbd9fKNQj8UzLdCETaI0UWPAjK7IA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/istanbul-lib-coverage": {
-         "version": "2.0.4",
-         "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-         "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@types/istanbul-lib-report": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-         "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/istanbul-lib-coverage": "*"
-         }
-      },
-      "node_modules/@types/istanbul-reports": {
-         "version": "3.0.1",
-         "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-         "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/istanbul-lib-report": "*"
-         }
-      },
-      "node_modules/@types/json-schema": {
-         "version": "7.0.11",
-         "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-         "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-         "license": "MIT"
-      },
-      "node_modules/@types/mime": {
-         "version": "1.3.2",
-         "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
-         "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@types/minimatch": {
-         "version": "5.1.2",
-         "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
-         "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@types/node": {
-         "version": "18.16.3",
-         "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz",
-         "integrity": "sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==",
-         "license": "MIT"
-      },
-      "node_modules/@types/parse-json": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-         "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-         "license": "MIT"
-      },
-      "node_modules/@types/prettier": {
-         "version": "2.7.2",
-         "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
-         "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==",
-         "license": "MIT"
-      },
-      "node_modules/@types/prop-types": {
-         "version": "15.7.5",
-         "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-         "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-         "license": "MIT"
-      },
-      "node_modules/@types/qs": {
-         "version": "6.9.7",
-         "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
-         "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@types/range-parser": {
-         "version": "1.2.4",
-         "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
-         "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@types/react": {
-         "version": "18.2.0",
-         "license": "MIT",
-         "dependencies": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-         }
-      },
-      "node_modules/@types/retry": {
-         "version": "0.12.0",
-         "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-         "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@types/scheduler": {
-         "version": "0.16.3",
-         "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-         "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-         "license": "MIT"
-      },
-      "node_modules/@types/send": {
-         "version": "0.17.1",
-         "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
-         "integrity": "sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/mime": "^1",
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/serve-index": {
-         "version": "1.9.1",
-         "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
-         "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/express": "*"
-         }
-      },
-      "node_modules/@types/serve-static": {
-         "version": "1.15.1",
-         "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
-         "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/mime": "*",
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/serve-static/node_modules/@types/mime": {
-         "version": "3.0.1",
-         "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
-         "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@types/sockjs": {
-         "version": "0.3.33",
-         "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
-         "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/ws": {
-         "version": "8.5.4",
-         "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
-         "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/node": "*"
-         }
-      },
-      "node_modules/@types/yargs": {
-         "version": "17.0.24",
-         "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
-         "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/yargs-parser": "*"
-         }
-      },
-      "node_modules/@types/yargs-parser": {
-         "version": "21.0.0",
-         "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
-         "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/@webassemblyjs/ast": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.5.tgz",
-         "integrity": "sha512-LHY/GSAZZRpsNQH+/oHqhRQ5FT7eoULcBqgfyTB5nQHogFnK3/7QoN7dLnwSE/JkUAF0SrRuclT7ODqMFtWxxQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@webassemblyjs/helper-numbers": "1.11.5",
-            "@webassemblyjs/helper-wasm-bytecode": "1.11.5"
-         }
-      },
-      "node_modules/@webassemblyjs/floating-point-hex-parser": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.5.tgz",
-         "integrity": "sha512-1j1zTIC5EZOtCplMBG/IEwLtUojtwFVwdyVMbL/hwWqbzlQoJsWCOavrdnLkemwNoC/EOwtUFch3fuo+cbcXYQ==",
-         "license": "MIT"
-      },
-      "node_modules/@webassemblyjs/helper-api-error": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.5.tgz",
-         "integrity": "sha512-L65bDPmfpY0+yFrsgz8b6LhXmbbs38OnwDCf6NpnMUYqa+ENfE5Dq9E42ny0qz/PdR0LJyq/T5YijPnU8AXEpA==",
-         "license": "MIT"
-      },
-      "node_modules/@webassemblyjs/helper-buffer": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.5.tgz",
-         "integrity": "sha512-fDKo1gstwFFSfacIeH5KfwzjykIE6ldh1iH9Y/8YkAZrhmu4TctqYjSh7t0K2VyDSXOZJ1MLhht/k9IvYGcIxg==",
-         "license": "MIT"
-      },
-      "node_modules/@webassemblyjs/helper-numbers": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.5.tgz",
-         "integrity": "sha512-DhykHXM0ZABqfIGYNv93A5KKDw/+ywBFnuWybZZWcuzWHfbp21wUfRkbtz7dMGwGgT4iXjWuhRMA2Mzod6W4WA==",
-         "license": "MIT",
-         "dependencies": {
-            "@webassemblyjs/floating-point-hex-parser": "1.11.5",
-            "@webassemblyjs/helper-api-error": "1.11.5",
-            "@xtuc/long": "4.2.2"
-         }
-      },
-      "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.5.tgz",
-         "integrity": "sha512-oC4Qa0bNcqnjAowFn7MPCETQgDYytpsfvz4ujZz63Zu/a/v71HeCAAmZsgZ3YVKec3zSPYytG3/PrRCqbtcAvA==",
-         "license": "MIT"
-      },
-      "node_modules/@webassemblyjs/helper-wasm-section": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.5.tgz",
-         "integrity": "sha512-uEoThA1LN2NA+K3B9wDo3yKlBfVtC6rh0i4/6hvbz071E8gTNZD/pT0MsBf7MeD6KbApMSkaAK0XeKyOZC7CIA==",
-         "license": "MIT",
-         "dependencies": {
-            "@webassemblyjs/ast": "1.11.5",
-            "@webassemblyjs/helper-buffer": "1.11.5",
-            "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
-            "@webassemblyjs/wasm-gen": "1.11.5"
-         }
-      },
-      "node_modules/@webassemblyjs/ieee754": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.5.tgz",
-         "integrity": "sha512-37aGq6qVL8A8oPbPrSGMBcp38YZFXcHfiROflJn9jxSdSMMM5dS5P/9e2/TpaJuhE+wFrbukN2WI6Hw9MH5acg==",
-         "license": "MIT",
-         "dependencies": {
-            "@xtuc/ieee754": "^1.2.0"
-         }
-      },
-      "node_modules/@webassemblyjs/leb128": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.5.tgz",
-         "integrity": "sha512-ajqrRSXaTJoPW+xmkfYN6l8VIeNnR4vBOTQO9HzR7IygoCcKWkICbKFbVTNMjMgMREqXEr0+2M6zukzM47ZUfQ==",
-         "license": "Apache-2.0",
-         "dependencies": {
-            "@xtuc/long": "4.2.2"
-         }
-      },
-      "node_modules/@webassemblyjs/utf8": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.5.tgz",
-         "integrity": "sha512-WiOhulHKTZU5UPlRl53gHR8OxdGsSOxqfpqWeA2FmcwBMaoEdz6b2x2si3IwC9/fSPLfe8pBMRTHVMk5nlwnFQ==",
-         "license": "MIT"
-      },
-      "node_modules/@webassemblyjs/wasm-edit": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.5.tgz",
-         "integrity": "sha512-C0p9D2fAu3Twwqvygvf42iGCQ4av8MFBLiTb+08SZ4cEdwzWx9QeAHDo1E2k+9s/0w1DM40oflJOpkZ8jW4HCQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@webassemblyjs/ast": "1.11.5",
-            "@webassemblyjs/helper-buffer": "1.11.5",
-            "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
-            "@webassemblyjs/helper-wasm-section": "1.11.5",
-            "@webassemblyjs/wasm-gen": "1.11.5",
-            "@webassemblyjs/wasm-opt": "1.11.5",
-            "@webassemblyjs/wasm-parser": "1.11.5",
-            "@webassemblyjs/wast-printer": "1.11.5"
-         }
-      },
-      "node_modules/@webassemblyjs/wasm-gen": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.5.tgz",
-         "integrity": "sha512-14vteRlRjxLK9eSyYFvw1K8Vv+iPdZU0Aebk3j6oB8TQiQYuO6hj9s4d7qf6f2HJr2khzvNldAFG13CgdkAIfA==",
-         "license": "MIT",
-         "dependencies": {
-            "@webassemblyjs/ast": "1.11.5",
-            "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
-            "@webassemblyjs/ieee754": "1.11.5",
-            "@webassemblyjs/leb128": "1.11.5",
-            "@webassemblyjs/utf8": "1.11.5"
-         }
-      },
-      "node_modules/@webassemblyjs/wasm-opt": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.5.tgz",
-         "integrity": "sha512-tcKwlIXstBQgbKy1MlbDMlXaxpucn42eb17H29rawYLxm5+MsEmgPzeCP8B1Cl69hCice8LeKgZpRUAPtqYPgw==",
-         "license": "MIT",
-         "dependencies": {
-            "@webassemblyjs/ast": "1.11.5",
-            "@webassemblyjs/helper-buffer": "1.11.5",
-            "@webassemblyjs/wasm-gen": "1.11.5",
-            "@webassemblyjs/wasm-parser": "1.11.5"
-         }
-      },
-      "node_modules/@webassemblyjs/wasm-parser": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.5.tgz",
-         "integrity": "sha512-SVXUIwsLQlc8srSD7jejsfTU83g7pIGr2YYNb9oHdtldSxaOhvA5xwvIiWIfcX8PlSakgqMXsLpLfbbJ4cBYew==",
-         "license": "MIT",
-         "dependencies": {
-            "@webassemblyjs/ast": "1.11.5",
-            "@webassemblyjs/helper-api-error": "1.11.5",
-            "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
-            "@webassemblyjs/ieee754": "1.11.5",
-            "@webassemblyjs/leb128": "1.11.5",
-            "@webassemblyjs/utf8": "1.11.5"
-         }
-      },
-      "node_modules/@webassemblyjs/wast-printer": {
-         "version": "1.11.5",
-         "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.5.tgz",
-         "integrity": "sha512-f7Pq3wvg3GSPUPzR0F6bmI89Hdb+u9WXrSKc4v+N0aV0q6r42WoF92Jp2jEorBEBRoRNXgjp53nBniDXcqZYPA==",
-         "license": "MIT",
-         "dependencies": {
-            "@webassemblyjs/ast": "1.11.5",
-            "@xtuc/long": "4.2.2"
-         }
-      },
-      "node_modules/@webpack-cli/configtest": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz",
-         "integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=14.15.0"
-         },
-         "peerDependencies": {
-            "webpack": "5.x.x",
-            "webpack-cli": "5.x.x"
-         }
-      },
-      "node_modules/@webpack-cli/info": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
-         "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=14.15.0"
-         },
-         "peerDependencies": {
-            "webpack": "5.x.x",
-            "webpack-cli": "5.x.x"
-         }
-      },
-      "node_modules/@webpack-cli/serve": {
-         "version": "2.0.2",
-         "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.2.tgz",
-         "integrity": "sha512-S9h3GmOmzUseyeFW3tYNnWS7gNUuwxZ3mmMq0JyW78Vx1SGKPSkt5bT4pB0rUnVfHjP0EL9gW2bOzmtiTfQt0A==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=14.15.0"
-         },
-         "peerDependencies": {
-            "webpack": "5.x.x",
-            "webpack-cli": "5.x.x"
-         },
-         "peerDependenciesMeta": {
-            "webpack-dev-server": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/@xtuc/ieee754": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-         "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-         "license": "BSD-3-Clause"
-      },
-      "node_modules/@xtuc/long": {
-         "version": "4.2.2",
-         "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-         "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-         "license": "Apache-2.0"
-      },
-      "node_modules/@zeit/schemas": {
-         "version": "2.29.0",
-         "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz",
-         "integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/accepts": {
-         "version": "1.3.8",
-         "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-         "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "mime-types": "~2.1.34",
-            "negotiator": "0.6.3"
-         },
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/acorn": {
-         "version": "6.4.2",
-         "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
-         "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
-         "license": "MIT",
-         "bin": {
-            "acorn": "bin/acorn"
-         },
-         "engines": {
-            "node": ">=0.4.0"
-         }
-      },
-      "node_modules/acorn-dynamic-import": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
-         "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==",
-         "license": "MIT",
-         "peerDependencies": {
-            "acorn": "^6.0.0"
-         }
-      },
-      "node_modules/acorn-jsx": {
-         "version": "5.3.2",
-         "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-         "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-         "license": "MIT",
-         "peerDependencies": {
-            "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-         }
-      },
-      "node_modules/acorn-walk": {
-         "version": "8.2.0",
-         "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-         "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.4.0"
-         }
-      },
-      "node_modules/address": {
-         "version": "1.2.2",
-         "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
-         "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 10.0.0"
-         }
-      },
-      "node_modules/adm-zip": {
-         "version": "0.5.10",
-         "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.10.tgz",
-         "integrity": "sha512-x0HvcHqVJNTPk/Bw8JbLWlWoo6Wwnsug0fnYYro1HBrjxZ3G7/AZk7Ahv8JwDe1uIcz8eBqvu86FuF1POiG7vQ==",
-         "engines": {
-            "node": ">=6.0"
-         }
-      },
-      "node_modules/ajv": {
-         "version": "8.12.0",
-         "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-         "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-         },
-         "funding": {
-            "type": "github",
-            "url": "https://github.com/sponsors/epoberezkin"
-         }
-      },
-      "node_modules/ajv-formats": {
-         "version": "2.1.1",
-         "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-         "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ajv": "^8.0.0"
-         },
-         "peerDependencies": {
-            "ajv": "^8.0.0"
-         },
-         "peerDependenciesMeta": {
-            "ajv": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/ajv-keywords": {
-         "version": "5.1.0",
-         "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-         "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "fast-deep-equal": "^3.1.3"
-         },
-         "peerDependencies": {
-            "ajv": "^8.8.2"
-         }
-      },
-      "node_modules/ansi-align": {
-         "version": "3.0.1",
-         "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
-         "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "string-width": "^4.1.0"
-         }
-      },
-      "node_modules/ansi-colors": {
-         "version": "4.1.1",
-         "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-         "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/ansi-escapes": {
-         "version": "3.2.0",
-         "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-         "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/ansi-html-community": {
-         "version": "0.0.8",
-         "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-         "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
-         "dev": true,
-         "engines": [
-            "node >= 0.8.0"
-         ],
-         "license": "Apache-2.0",
-         "bin": {
-            "ansi-html": "bin/ansi-html"
-         }
-      },
-      "node_modules/ansi-regex": {
-         "version": "5.0.1",
-         "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-         "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/ansi-styles": {
-         "version": "4.3.0",
-         "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-         "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-         "license": "MIT",
-         "dependencies": {
-            "color-convert": "^2.0.1"
-         },
-         "engines": {
-            "node": ">=8"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-         }
-      },
-      "node_modules/ansi-styles/node_modules/color-convert": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-         "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-         "license": "MIT",
-         "dependencies": {
-            "color-name": "~1.1.4"
-         },
-         "engines": {
-            "node": ">=7.0.0"
-         }
-      },
-      "node_modules/ansi-styles/node_modules/color-name": {
-         "version": "1.1.4",
-         "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-         "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-         "license": "MIT"
-      },
-      "node_modules/anymatch": {
-         "version": "3.1.3",
-         "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-         "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-         "license": "ISC",
-         "dependencies": {
-            "normalize-path": "^3.0.0",
-            "picomatch": "^2.0.4"
-         },
-         "engines": {
-            "node": ">= 8"
-         }
-      },
-      "node_modules/arch": {
-         "version": "2.2.0",
-         "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
-         "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
-         "dev": true,
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/feross"
-            },
-            {
-               "type": "patreon",
-               "url": "https://www.patreon.com/feross"
-            },
-            {
-               "type": "consulting",
-               "url": "https://feross.org/support"
-            }
-         ],
-         "license": "MIT"
-      },
-      "node_modules/arg": {
-         "version": "5.0.2",
-         "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-         "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/argparse": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-         "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-         "dev": true,
-         "license": "Python-2.0"
-      },
-      "node_modules/arr-union": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-         "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/array-buffer-byte-length": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-         "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "is-array-buffer": "^3.0.1"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/array-flatten": {
-         "version": "2.1.2",
-         "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
-         "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/array-union": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-         "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/array-uniq": {
-         "version": "1.0.3",
-         "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-         "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/asn1": {
-         "version": "0.2.6",
-         "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
-         "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-         "license": "MIT",
-         "dependencies": {
-            "safer-buffer": "~2.1.0"
-         }
-      },
-      "node_modules/assert": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
-         "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==",
-         "license": "MIT",
-         "dependencies": {
-            "es6-object-assign": "^1.1.0",
-            "is-nan": "^1.2.1",
-            "object-is": "^1.0.1",
-            "util": "^0.12.0"
-         }
-      },
-      "node_modules/assert-plus": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-         "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.8"
-         }
-      },
-      "node_modules/async-array-reduce": {
-         "version": "0.2.1",
-         "resolved": "https://registry.npmjs.org/async-array-reduce/-/async-array-reduce-0.2.1.tgz",
-         "integrity": "sha512-/ywTADOcaEnwiAnOEi0UB/rAcIq5bTFfCV9euv3jLYFUMmy6KvKccTQUnLlp8Ensmfj43wHSmbGiPqjsZ6RhNA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/asynckit": {
-         "version": "0.4.0",
-         "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-         "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-         "license": "MIT"
-      },
-      "node_modules/at-least-node": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-         "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-         "license": "ISC",
-         "engines": {
-            "node": ">= 4.0.0"
-         }
-      },
-      "node_modules/available-typed-arrays": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-         "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/aws-sign2": {
-         "version": "0.7.0",
-         "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-         "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
-         "license": "Apache-2.0",
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/aws4": {
-         "version": "1.12.0",
-         "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.12.0.tgz",
-         "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==",
-         "license": "MIT"
-      },
-      "node_modules/babel-jest": {
-         "version": "29.5.0",
-         "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.5.0.tgz",
-         "integrity": "sha512-mA4eCDh5mSo2EcA9xQjVTpmbbNk32Zb3Q3QFQsNhaK56Q+yoXowzFodLux30HRgyOho5rsQ6B0P9QpMkvvnJ0Q==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@jest/transform": "^29.5.0",
-            "@types/babel__core": "^7.1.14",
-            "babel-plugin-istanbul": "^6.1.1",
-            "babel-preset-jest": "^29.5.0",
-            "chalk": "^4.0.0",
-            "graceful-fs": "^4.2.9",
-            "slash": "^3.0.0"
-         },
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.8.0"
-         }
-      },
-      "node_modules/babel-jest/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/babel-jest/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/babel-loader": {
-         "version": "9.1.2",
-         "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.2.tgz",
-         "integrity": "sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "find-cache-dir": "^3.3.2",
-            "schema-utils": "^4.0.0"
-         },
-         "engines": {
-            "node": ">= 14.15.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.12.0",
-            "webpack": ">=5"
-         }
-      },
-      "node_modules/babel-loader/node_modules/find-cache-dir": {
-         "version": "3.3.2",
-         "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-         "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "commondir": "^1.0.1",
-            "make-dir": "^3.0.2",
-            "pkg-dir": "^4.1.0"
-         },
-         "engines": {
-            "node": ">=8"
-         },
-         "funding": {
-            "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
-         }
-      },
-      "node_modules/babel-loader/node_modules/make-dir": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-         "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "semver": "^6.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/babel-plugin-istanbul": {
-         "version": "6.1.1",
-         "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
-         "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "@babel/helper-plugin-utils": "^7.0.0",
-            "@istanbuljs/load-nyc-config": "^1.0.0",
-            "@istanbuljs/schema": "^0.1.2",
-            "istanbul-lib-instrument": "^5.0.4",
-            "test-exclude": "^6.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/babel-plugin-jest-hoist": {
-         "version": "29.5.0",
-         "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz",
-         "integrity": "sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/template": "^7.3.3",
-            "@babel/types": "^7.3.3",
-            "@types/babel__core": "^7.1.14",
-            "@types/babel__traverse": "^7.0.6"
-         },
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         }
-      },
-      "node_modules/babel-plugin-polyfill-corejs2": {
-         "version": "0.3.3",
-         "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
-         "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/compat-data": "^7.17.7",
-            "@babel/helper-define-polyfill-provider": "^0.3.3",
-            "semver": "^6.1.1"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/babel-plugin-polyfill-corejs3": {
-         "version": "0.6.0",
-         "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz",
-         "integrity": "sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-define-polyfill-provider": "^0.3.3",
-            "core-js-compat": "^3.25.1"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/babel-plugin-polyfill-regenerator": {
-         "version": "0.4.1",
-         "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz",
-         "integrity": "sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-define-polyfill-provider": "^0.3.3"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "node_modules/babel-plugin-transform-cx-imports": {
-         "resolved": "packages/babel-plugin-transform-cx-imports",
-         "link": true
-      },
-      "node_modules/babel-plugin-transform-cx-jsx": {
-         "resolved": "packages/babel-plugin-transform-cx-jsx",
-         "link": true
-      },
-      "node_modules/babel-preset-current-node-syntax": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
-         "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@babel/plugin-syntax-async-generators": "^7.8.4",
-            "@babel/plugin-syntax-bigint": "^7.8.3",
-            "@babel/plugin-syntax-class-properties": "^7.8.3",
-            "@babel/plugin-syntax-import-meta": "^7.8.3",
-            "@babel/plugin-syntax-json-strings": "^7.8.3",
-            "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
-            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-            "@babel/plugin-syntax-numeric-separator": "^7.8.3",
-            "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-            "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-            "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-            "@babel/plugin-syntax-top-level-await": "^7.8.3"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0"
-         }
-      },
-      "node_modules/babel-preset-cx-env": {
-         "resolved": "packages/babel-preset-cx-env",
-         "link": true
-      },
-      "node_modules/babel-preset-jest": {
-         "version": "29.5.0",
-         "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz",
-         "integrity": "sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "babel-plugin-jest-hoist": "^29.5.0",
-            "babel-preset-current-node-syntax": "^1.0.0"
-         },
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0"
-         }
-      },
-      "node_modules/balanced-match": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-         "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-         "license": "MIT"
-      },
-      "node_modules/base64-js": {
-         "version": "1.5.1",
-         "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-         "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/feross"
-            },
-            {
-               "type": "patreon",
-               "url": "https://www.patreon.com/feross"
-            },
-            {
-               "type": "consulting",
-               "url": "https://feross.org/support"
-            }
-         ],
-         "license": "MIT"
-      },
-      "node_modules/batch": {
-         "version": "0.6.1",
-         "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-         "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/bcrypt-pbkdf": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-         "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "tweetnacl": "^0.14.3"
-         }
-      },
-      "node_modules/benchmark": {
-         "resolved": "benchmark",
-         "link": true
-      },
-      "node_modules/big-integer": {
-         "version": "1.6.51",
-         "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
-         "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
-         "engines": {
-            "node": ">=0.6"
-         }
-      },
-      "node_modules/big.js": {
-         "version": "5.2.2",
-         "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-         "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/binary": {
-         "version": "0.3.0",
-         "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-         "integrity": "sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==",
-         "dependencies": {
-            "buffers": "~0.1.1",
-            "chainsaw": "~0.1.0"
-         },
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/binary-extensions": {
-         "version": "2.2.0",
-         "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-         "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/bluebird": {
-         "version": "3.4.7",
-         "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
-         "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA=="
-      },
-      "node_modules/body-parser": {
-         "version": "1.20.1",
-         "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-         "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "bytes": "3.1.2",
-            "content-type": "~1.0.4",
-            "debug": "2.6.9",
-            "depd": "2.0.0",
-            "destroy": "1.2.0",
-            "http-errors": "2.0.0",
-            "iconv-lite": "0.4.24",
-            "on-finished": "2.4.1",
-            "qs": "6.11.0",
-            "raw-body": "2.5.1",
-            "type-is": "~1.6.18",
-            "unpipe": "1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.8",
-            "npm": "1.2.8000 || >= 1.4.16"
-         }
-      },
-      "node_modules/body-parser/node_modules/bytes": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-         "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/bonjour-service": {
-         "version": "1.1.1",
-         "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.1.tgz",
-         "integrity": "sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "array-flatten": "^2.1.2",
-            "dns-equal": "^1.0.0",
-            "fast-deep-equal": "^3.1.3",
-            "multicast-dns": "^7.2.5"
-         }
-      },
-      "node_modules/boolbase": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-         "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-         "dev": true,
-         "license": "ISC"
-      },
-      "node_modules/boxen": {
-         "version": "7.0.0",
-         "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
-         "integrity": "sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-align": "^3.0.1",
-            "camelcase": "^7.0.0",
-            "chalk": "^5.0.1",
-            "cli-boxes": "^3.0.0",
-            "string-width": "^5.1.2",
-            "type-fest": "^2.13.0",
-            "widest-line": "^4.0.1",
-            "wrap-ansi": "^8.0.1"
-         },
-         "engines": {
-            "node": ">=14.16"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/boxen/node_modules/ansi-regex": {
-         "version": "6.0.1",
-         "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-         "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-         }
-      },
-      "node_modules/boxen/node_modules/ansi-styles": {
-         "version": "6.2.1",
-         "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-         "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-         }
-      },
-      "node_modules/boxen/node_modules/camelcase": {
-         "version": "7.0.1",
-         "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
-         "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=14.16"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/boxen/node_modules/emoji-regex": {
-         "version": "9.2.2",
-         "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-         "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/boxen/node_modules/string-width": {
-         "version": "5.1.2",
-         "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-         "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "eastasianwidth": "^0.2.0",
-            "emoji-regex": "^9.2.2",
-            "strip-ansi": "^7.0.1"
-         },
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/boxen/node_modules/strip-ansi": {
-         "version": "7.0.1",
-         "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
-         "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-regex": "^6.0.1"
-         },
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-         }
-      },
-      "node_modules/boxen/node_modules/wrap-ansi": {
-         "version": "8.1.0",
-         "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-         "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^6.1.0",
-            "string-width": "^5.0.1",
-            "strip-ansi": "^7.0.1"
-         },
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-         }
-      },
-      "node_modules/brace-expansion": {
-         "version": "1.1.11",
-         "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-         "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-         "license": "MIT",
-         "dependencies": {
-            "balanced-match": "^1.0.0",
-            "concat-map": "0.0.1"
-         }
-      },
-      "node_modules/braces": {
-         "version": "3.0.2",
-         "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-         "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-         "license": "MIT",
-         "dependencies": {
-            "fill-range": "^7.0.1"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/browser-stdout": {
-         "version": "1.3.1",
-         "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
-         "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
-         "dev": true,
-         "license": "ISC"
-      },
-      "node_modules/browserslist": {
-         "version": "4.21.5",
-         "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
-         "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
-         "funding": [
-            {
-               "type": "opencollective",
-               "url": "https://opencollective.com/browserslist"
-            },
-            {
-               "type": "tidelift",
-               "url": "https://tidelift.com/funding/github/npm/browserslist"
-            }
-         ],
-         "license": "MIT",
-         "dependencies": {
-            "caniuse-lite": "^1.0.30001449",
-            "electron-to-chromium": "^1.4.284",
-            "node-releases": "^2.0.8",
-            "update-browserslist-db": "^1.0.10"
-         },
-         "bin": {
-            "browserslist": "cli.js"
-         },
-         "engines": {
-            "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-         }
-      },
-      "node_modules/bser": {
-         "version": "2.1.1",
-         "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
-         "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
-         "dev": true,
-         "license": "Apache-2.0",
-         "dependencies": {
-            "node-int64": "^0.4.0"
-         }
-      },
-      "node_modules/buble": {
-         "version": "0.19.8",
-         "resolved": "https://registry.npmjs.org/buble/-/buble-0.19.8.tgz",
-         "integrity": "sha512-IoGZzrUTY5fKXVkgGHw3QeXFMUNBFv+9l8a4QJKG1JhG3nCMHTdEX1DCOg8568E2Q9qvAQIiSokv6Jsgx8p2cA==",
-         "license": "MIT",
-         "dependencies": {
-            "acorn": "^6.1.1",
-            "acorn-dynamic-import": "^4.0.0",
-            "acorn-jsx": "^5.0.1",
-            "chalk": "^2.4.2",
-            "magic-string": "^0.25.3",
-            "minimist": "^1.2.0",
-            "os-homedir": "^2.0.0",
-            "regexpu-core": "^4.5.4"
-         },
-         "bin": {
-            "buble": "bin/buble"
-         }
-      },
-      "node_modules/buble/node_modules/ansi-styles": {
-         "version": "3.2.1",
-         "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-         "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-         "license": "MIT",
-         "dependencies": {
-            "color-convert": "^1.9.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/buble/node_modules/chalk": {
-         "version": "2.4.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-         "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/buble/node_modules/escape-string-regexp": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-         "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.8.0"
-         }
-      },
-      "node_modules/buble/node_modules/has-flag": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-         "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/buble/node_modules/regenerate-unicode-properties": {
-         "version": "9.0.0",
-         "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz",
-         "integrity": "sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==",
-         "license": "MIT",
-         "dependencies": {
-            "regenerate": "^1.4.2"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/buble/node_modules/regexpu-core": {
-         "version": "4.8.0",
-         "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.8.0.tgz",
-         "integrity": "sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==",
-         "license": "MIT",
-         "dependencies": {
-            "regenerate": "^1.4.2",
-            "regenerate-unicode-properties": "^9.0.0",
-            "regjsgen": "^0.5.2",
-            "regjsparser": "^0.7.0",
-            "unicode-match-property-ecmascript": "^2.0.0",
-            "unicode-match-property-value-ecmascript": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/buble/node_modules/regjsparser": {
-         "version": "0.7.0",
-         "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.7.0.tgz",
-         "integrity": "sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==",
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "jsesc": "~0.5.0"
-         },
-         "bin": {
-            "regjsparser": "bin/parser"
-         }
-      },
-      "node_modules/buble/node_modules/supports-color": {
-         "version": "5.5.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-         "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/buffer": {
-         "version": "6.0.3",
-         "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-         "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/feross"
-            },
-            {
-               "type": "patreon",
-               "url": "https://www.patreon.com/feross"
-            },
-            {
-               "type": "consulting",
-               "url": "https://feross.org/support"
-            }
-         ],
-         "license": "MIT",
-         "dependencies": {
-            "base64-js": "^1.3.1",
-            "ieee754": "^1.2.1"
-         }
-      },
-      "node_modules/buffer-from": {
-         "version": "1.1.2",
-         "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-         "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-         "license": "MIT"
-      },
-      "node_modules/buffer-indexof-polyfill": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
-         "integrity": "sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==",
-         "engines": {
-            "node": ">=0.10"
-         }
-      },
-      "node_modules/buffers": {
-         "version": "0.1.1",
-         "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-         "integrity": "sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==",
-         "engines": {
-            "node": ">=0.2.0"
-         }
-      },
-      "node_modules/bytes": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-         "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/call-bind": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-         "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-         "license": "MIT",
-         "dependencies": {
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.0.2"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/callsites": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-         "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/camel-case": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-         "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "pascal-case": "^3.1.2",
-            "tslib": "^2.0.3"
-         }
-      },
-      "node_modules/camelcase": {
-         "version": "6.3.0",
-         "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-         "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/caniuse-lite": {
-         "version": "1.0.30001482",
-         "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001482.tgz",
-         "integrity": "sha512-F1ZInsg53cegyjroxLNW9DmrEQ1SuGRTO1QlpA0o2/6OpQ0gFeDRoq1yFmnr8Sakn9qwwt9DmbxHB6w167OSuQ==",
-         "funding": [
-            {
-               "type": "opencollective",
-               "url": "https://opencollective.com/browserslist"
-            },
-            {
-               "type": "tidelift",
-               "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-            },
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/ai"
-            }
-         ],
-         "license": "CC-BY-4.0"
-      },
-      "node_modules/caseless": {
-         "version": "0.12.0",
-         "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-         "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
-         "license": "Apache-2.0"
-      },
-      "node_modules/casual": {
-         "version": "1.6.2",
-         "resolved": "https://registry.npmjs.org/casual/-/casual-1.6.2.tgz",
-         "integrity": "sha512-NQObL800rg32KZ9bBajHbyDjxLXxxuShChQg7A4tbSeG3n1t7VYGOSkzFSI9gkSgOHp+xilEJ7G0L5l6M30KYA==",
-         "license": "MIT",
-         "dependencies": {
-            "mersenne-twister": "^1.0.1",
-            "moment": "^2.15.2"
-         }
-      },
-      "node_modules/chainsaw": {
-         "version": "0.1.0",
-         "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-         "integrity": "sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==",
-         "dependencies": {
-            "traverse": ">=0.3.0 <0.4"
-         },
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/chalk": {
-         "version": "5.2.0",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
-         "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": "^12.17.0 || ^14.13 || >=16.0.0"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/chalk-template": {
-         "version": "0.4.0",
-         "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
-         "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "chalk": "^4.1.2"
-         },
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk-template?sponsor=1"
-         }
-      },
-      "node_modules/chalk-template/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/chalk-template/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/charenc": {
-         "version": "0.0.2",
-         "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-         "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/chokidar": {
-         "version": "3.5.3",
-         "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-         "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-         "funding": [
-            {
-               "type": "individual",
-               "url": "https://paulmillr.com/funding/"
-            }
-         ],
-         "license": "MIT",
-         "dependencies": {
-            "anymatch": "~3.1.2",
-            "braces": "~3.0.2",
-            "glob-parent": "~5.1.2",
-            "is-binary-path": "~2.1.0",
-            "is-glob": "~4.0.1",
-            "normalize-path": "~3.0.0",
-            "readdirp": "~3.6.0"
-         },
-         "engines": {
-            "node": ">= 8.10.0"
-         },
-         "optionalDependencies": {
-            "fsevents": "~2.3.2"
-         }
-      },
-      "node_modules/chrome-trace-event": {
-         "version": "1.0.3",
-         "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-         "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.0"
-         }
-      },
-      "node_modules/ci-info": {
-         "version": "3.8.0",
-         "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
-         "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
-         "dev": true,
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/sibiraj-s"
-            }
-         ],
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/clean-css": {
-         "version": "5.3.2",
-         "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
-         "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "source-map": "~0.6.0"
-         },
-         "engines": {
-            "node": ">= 10.0"
-         }
-      },
-      "node_modules/clean-webpack-plugin": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
-         "integrity": "sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "del": "^4.1.1"
-         },
-         "engines": {
-            "node": ">=10.0.0"
-         },
-         "peerDependencies": {
-            "webpack": ">=4.0.0 <6.0.0"
-         }
-      },
-      "node_modules/cli-boxes": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
-         "integrity": "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/cli-select": {
-         "version": "1.1.2",
-         "resolved": "https://registry.npmjs.org/cli-select/-/cli-select-1.1.2.tgz",
-         "integrity": "sha512-PSvWb8G0PPmBNDcz/uM2LkZN3Nn5JmhUl465tTfynQAXjKzFpmHbxStM6X/+awKp5DJuAaHMzzMPefT0suGm1w==",
-         "license": "MIT",
-         "dependencies": {
-            "ansi-escapes": "^3.2.0"
-         }
-      },
-      "node_modules/clipboardy": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz",
-         "integrity": "sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "arch": "^2.2.0",
-            "execa": "^5.1.1",
-            "is-wsl": "^2.2.0"
-         },
-         "engines": {
-            "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/cliui": {
-         "version": "7.0.4",
-         "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-         "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "string-width": "^4.2.0",
-            "strip-ansi": "^6.0.0",
-            "wrap-ansi": "^7.0.0"
-         }
-      },
-      "node_modules/clone-deep": {
-         "version": "4.0.1",
-         "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-         "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "is-plain-object": "^2.0.4",
-            "kind-of": "^6.0.2",
-            "shallow-clone": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/color-convert": {
-         "version": "1.9.3",
-         "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-         "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-         "license": "MIT",
-         "dependencies": {
-            "color-name": "1.1.3"
-         }
-      },
-      "node_modules/color-name": {
-         "version": "1.1.3",
-         "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-         "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-         "license": "MIT"
-      },
-      "node_modules/colorette": {
-         "version": "2.0.20",
-         "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-         "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/combined-stream": {
-         "version": "1.0.8",
-         "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-         "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-         "license": "MIT",
-         "dependencies": {
-            "delayed-stream": "~1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/commander": {
-         "version": "10.0.1",
-         "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-         "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=14"
-         }
-      },
-      "node_modules/commondir": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-         "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/compressible": {
-         "version": "2.0.18",
-         "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-         "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "mime-db": ">= 1.43.0 < 2"
-         },
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/compression": {
-         "version": "1.7.4",
-         "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-         "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "accepts": "~1.3.5",
-            "bytes": "3.0.0",
-            "compressible": "~2.0.16",
-            "debug": "2.6.9",
-            "on-headers": "~1.0.2",
-            "safe-buffer": "5.1.2",
-            "vary": "~1.1.2"
-         },
-         "engines": {
-            "node": ">= 0.8.0"
-         }
-      },
-      "node_modules/compression/node_modules/safe-buffer": {
-         "version": "5.1.2",
-         "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-         "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/concat-map": {
-         "version": "0.0.1",
-         "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-         "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-         "license": "MIT"
-      },
-      "node_modules/connect-history-api-fallback": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
-         "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.8"
-         }
-      },
-      "node_modules/content-disposition": {
-         "version": "0.5.2",
-         "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
-         "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/content-type": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-         "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/convert-source-map": {
-         "version": "1.9.0",
-         "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-         "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-         "license": "MIT"
-      },
-      "node_modules/cookie": {
-         "version": "0.5.0",
-         "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-         "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/cookie-signature": {
-         "version": "1.0.6",
-         "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-         "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/copy-dir": {
-         "version": "1.3.0",
-         "resolved": "https://registry.npmjs.org/copy-dir/-/copy-dir-1.3.0.tgz",
-         "integrity": "sha512-Q4+qBFnN4bwGwvtXXzbp4P/4iNk0MaiGAzvQ8OiMtlLjkIKjmNN689uVzShSM0908q7GoFHXIPx4zi75ocoaHw==",
-         "license": "MIT"
-      },
-      "node_modules/copy-webpack-plugin": {
-         "version": "11.0.0",
-         "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
-         "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "fast-glob": "^3.2.11",
-            "glob-parent": "^6.0.1",
-            "globby": "^13.1.1",
-            "normalize-path": "^3.0.0",
-            "schema-utils": "^4.0.0",
-            "serialize-javascript": "^6.0.0"
-         },
-         "engines": {
-            "node": ">= 14.15.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "webpack": "^5.1.0"
-         }
-      },
-      "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
-         "version": "6.0.2",
-         "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-         "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "is-glob": "^4.0.3"
-         },
-         "engines": {
-            "node": ">=10.13.0"
-         }
-      },
-      "node_modules/core-js": {
-         "version": "3.30.1",
-         "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.1.tgz",
-         "integrity": "sha512-ZNS5nbiSwDTq4hFosEDqm65izl2CWmLz0hARJMyNQBgkUZMIF51cQiMvIQKA6hvuaeWxQDP3hEedM1JZIgTldQ==",
-         "hasInstallScript": true,
-         "license": "MIT",
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/core-js"
-         }
-      },
-      "node_modules/core-js-compat": {
-         "version": "3.30.1",
-         "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.1.tgz",
-         "integrity": "sha512-d690npR7MC6P0gq4npTl5n2VQeNAmUrJ90n+MHiKS7W2+xno4o3F5GDEuylSdi6EJ3VssibSGXOa1r3YXD3Mhw==",
-         "license": "MIT",
-         "dependencies": {
-            "browserslist": "^4.21.5"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/core-js"
-         }
-      },
-      "node_modules/core-js-pure": {
-         "version": "3.30.1",
-         "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.30.1.tgz",
-         "integrity": "sha512-nXBEVpmUnNRhz83cHd9JRQC52cTMcuXAmR56+9dSMpRdpeA4I1PX6yjmhd71Eyc/wXNsdBdUDIj1QTIeZpU5Tg==",
-         "dev": true,
-         "hasInstallScript": true,
-         "license": "MIT",
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/core-js"
-         }
-      },
-      "node_modules/core-util-is": {
-         "version": "1.0.3",
-         "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-         "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-         "license": "MIT"
-      },
-      "node_modules/cosmiconfig": {
-         "version": "6.0.0",
-         "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-         "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-         "license": "MIT",
-         "dependencies": {
-            "@types/parse-json": "^4.0.0",
-            "import-fresh": "^3.1.0",
-            "parse-json": "^5.0.0",
-            "path-type": "^4.0.0",
-            "yaml": "^1.7.2"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/create-cx-app": {
-         "resolved": "packages/create-cx-app",
-         "link": true
-      },
-      "node_modules/cross-spawn": {
-         "version": "7.0.3",
-         "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-         "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-         "license": "MIT",
-         "dependencies": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-         },
-         "engines": {
-            "node": ">= 8"
-         }
-      },
-      "node_modules/cross-spawn/node_modules/which": {
-         "version": "2.0.2",
-         "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-         "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-         "license": "ISC",
-         "dependencies": {
-            "isexe": "^2.0.0"
-         },
-         "bin": {
-            "node-which": "bin/node-which"
-         },
-         "engines": {
-            "node": ">= 8"
-         }
-      },
-      "node_modules/crypt": {
-         "version": "0.0.2",
-         "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-         "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/css-loader": {
-         "version": "6.7.3",
-         "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
-         "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "icss-utils": "^5.1.0",
-            "postcss": "^8.4.19",
-            "postcss-modules-extract-imports": "^3.0.0",
-            "postcss-modules-local-by-default": "^4.0.0",
-            "postcss-modules-scope": "^3.0.0",
-            "postcss-modules-values": "^4.0.0",
-            "postcss-value-parser": "^4.2.0",
-            "semver": "^7.3.8"
-         },
-         "engines": {
-            "node": ">= 12.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "webpack": "^5.0.0"
-         }
-      },
-      "node_modules/css-loader/node_modules/lru-cache": {
-         "version": "6.0.0",
-         "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-         "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "yallist": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/css-loader/node_modules/semver": {
-         "version": "7.5.0",
-         "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
-         "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "lru-cache": "^6.0.0"
-         },
-         "bin": {
-            "semver": "bin/semver.js"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/css-loader/node_modules/yallist": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-         "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-         "dev": true,
-         "license": "ISC"
-      },
-      "node_modules/css-select": {
-         "version": "4.3.0",
-         "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-         "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
-         "dev": true,
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "boolbase": "^1.0.0",
-            "css-what": "^6.0.1",
-            "domhandler": "^4.3.1",
-            "domutils": "^2.8.0",
-            "nth-check": "^2.0.1"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/fb55"
-         }
-      },
-      "node_modules/css-what": {
-         "version": "6.1.0",
-         "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-         "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-         "dev": true,
-         "license": "BSD-2-Clause",
-         "engines": {
-            "node": ">= 6"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/fb55"
-         }
-      },
-      "node_modules/cssesc": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-         "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-         "dev": true,
-         "license": "MIT",
-         "bin": {
-            "cssesc": "bin/cssesc"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/csstype": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-         "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-         "license": "MIT"
-      },
-      "node_modules/cx": {
-         "resolved": "packages/cx",
-         "link": true
-      },
-      "node_modules/cx-build-tools": {
-         "resolved": "packages/cx-build-tools",
-         "link": true
-      },
-      "node_modules/cx-cli": {
-         "resolved": "packages/cx-cli",
-         "link": true
-      },
-      "node_modules/cx-immer": {
-         "resolved": "packages/cx-immer",
-         "link": true
-      },
-      "node_modules/cx-react": {
-         "resolved": "packages/cx-react",
-         "link": true
-      },
-      "node_modules/cx-scss-manifest-webpack-plugin": {
-         "resolved": "packages/cx-scss-manifest-webpack-plugin",
-         "link": true
-      },
-      "node_modules/cx-theme-aquamarine": {
-         "resolved": "packages/cx-theme-aquamarine",
-         "link": true
-      },
-      "node_modules/cx-theme-dark": {
-         "resolved": "packages/cx-theme-dark",
-         "link": true
-      },
-      "node_modules/cx-theme-frost": {
-         "resolved": "packages/cx-theme-frost",
-         "link": true
-      },
-      "node_modules/cx-theme-material": {
-         "resolved": "packages/cx-theme-material",
-         "link": true
-      },
-      "node_modules/cx-theme-material-dark": {
-         "resolved": "packages/cx-theme-material-dark",
-         "link": true
-      },
-      "node_modules/cx-theme-space-blue": {
-         "resolved": "packages/cx-theme-space-blue",
-         "link": true
-      },
-      "node_modules/dashdash": {
-         "version": "1.14.1",
-         "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-         "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
-         "license": "MIT",
-         "dependencies": {
-            "assert-plus": "^1.0.0"
-         },
-         "engines": {
-            "node": ">=0.10"
-         }
-      },
-      "node_modules/debug": {
-         "version": "2.6.9",
-         "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-         "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-         "license": "MIT",
-         "dependencies": {
-            "ms": "2.0.0"
-         }
-      },
-      "node_modules/debug/node_modules/ms": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-         "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-         "license": "MIT"
-      },
-      "node_modules/decamelize": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz",
-         "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/decode-uri-component": {
-         "version": "0.4.1",
-         "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
-         "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=14.16"
-         }
-      },
-      "node_modules/deep-equal": {
-         "version": "2.2.1",
-         "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.1.tgz",
-         "integrity": "sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==",
-         "license": "MIT",
-         "dependencies": {
-            "array-buffer-byte-length": "^1.0.0",
-            "call-bind": "^1.0.2",
-            "es-get-iterator": "^1.1.3",
-            "get-intrinsic": "^1.2.0",
-            "is-arguments": "^1.1.1",
-            "is-array-buffer": "^3.0.2",
-            "is-date-object": "^1.0.5",
-            "is-regex": "^1.1.4",
-            "is-shared-array-buffer": "^1.0.2",
-            "isarray": "^2.0.5",
-            "object-is": "^1.1.5",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.4",
-            "regexp.prototype.flags": "^1.5.0",
-            "side-channel": "^1.0.4",
-            "which-boxed-primitive": "^1.0.2",
-            "which-collection": "^1.0.1",
-            "which-typed-array": "^1.1.9"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/deep-extend": {
-         "version": "0.6.0",
-         "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-         "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=4.0.0"
-         }
-      },
-      "node_modules/deepmerge": {
-         "version": "4.3.1",
-         "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-         "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/default-gateway": {
-         "version": "6.0.3",
-         "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-         "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
-         "dev": true,
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "execa": "^5.0.0"
-         },
-         "engines": {
-            "node": ">= 10"
-         }
-      },
-      "node_modules/define-lazy-prop": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-         "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/define-properties": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
-         "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-         "license": "MIT",
-         "dependencies": {
-            "has-property-descriptors": "^1.0.0",
-            "object-keys": "^1.1.1"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/del": {
-         "version": "4.1.1",
-         "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
-         "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/glob": "^7.1.1",
-            "globby": "^6.1.0",
-            "is-path-cwd": "^2.0.0",
-            "is-path-in-cwd": "^2.0.0",
-            "p-map": "^2.0.0",
-            "pify": "^4.0.1",
-            "rimraf": "^2.6.3"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/del/node_modules/array-union": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-         "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "array-uniq": "^1.0.1"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/del/node_modules/globby": {
-         "version": "6.1.0",
-         "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-         "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "array-union": "^1.0.1",
-            "glob": "^7.0.3",
-            "object-assign": "^4.0.1",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/del/node_modules/globby/node_modules/pify": {
-         "version": "2.3.0",
-         "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-         "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/delayed-stream": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-         "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.4.0"
-         }
-      },
-      "node_modules/depd": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-         "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/destroy": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-         "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8",
-            "npm": "1.2.8000 || >= 1.4.16"
-         }
-      },
-      "node_modules/detect-node": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-         "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/detect-port-alt": {
-         "version": "1.1.6",
-         "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
-         "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
-         "license": "MIT",
-         "dependencies": {
-            "address": "^1.0.1",
-            "debug": "^2.6.0"
-         },
-         "bin": {
-            "detect": "bin/detect-port",
-            "detect-port": "bin/detect-port"
-         },
-         "engines": {
-            "node": ">= 4.2.1"
-         }
-      },
-      "node_modules/diff": {
-         "version": "5.0.0",
-         "resolved": "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz",
-         "integrity": "sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "engines": {
-            "node": ">=0.3.1"
-         }
-      },
-      "node_modules/dir-glob": {
-         "version": "3.0.1",
-         "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-         "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-         "license": "MIT",
-         "dependencies": {
-            "path-type": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/dns-equal": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-         "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/dns-packet": {
-         "version": "5.6.0",
-         "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.0.tgz",
-         "integrity": "sha512-rza3UH1LwdHh9qyPXp8lkwpjSNk/AMD3dPytUoRoqnypDUhY0xvbdmVhWOfxO68frEfV9BU8V12Ez7ZsHGZpCQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@leichtgewicht/ip-codec": "^2.0.1"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/docs": {
-         "resolved": "docs",
-         "link": true
-      },
-      "node_modules/dom-converter": {
-         "version": "0.2.0",
-         "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-         "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "utila": "~0.4"
-         }
-      },
-      "node_modules/dom-serializer": {
-         "version": "1.4.1",
-         "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-         "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.2.0",
-            "entities": "^2.0.0"
-         },
-         "funding": {
-            "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-         }
-      },
-      "node_modules/domelementtype": {
-         "version": "2.3.0",
-         "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-         "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-         "dev": true,
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/fb55"
-            }
-         ],
-         "license": "BSD-2-Clause"
-      },
-      "node_modules/domhandler": {
-         "version": "4.3.1",
-         "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-         "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-         "dev": true,
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "domelementtype": "^2.2.0"
-         },
-         "engines": {
-            "node": ">= 4"
-         },
-         "funding": {
-            "url": "https://github.com/fb55/domhandler?sponsor=1"
-         }
-      },
-      "node_modules/domutils": {
-         "version": "2.8.0",
-         "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-         "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-         "dev": true,
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "dom-serializer": "^1.0.1",
-            "domelementtype": "^2.2.0",
-            "domhandler": "^4.2.0"
-         },
-         "funding": {
-            "url": "https://github.com/fb55/domutils?sponsor=1"
-         }
-      },
-      "node_modules/dot-case": {
-         "version": "3.0.4",
-         "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-         "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "no-case": "^3.0.4",
-            "tslib": "^2.0.3"
-         }
-      },
-      "node_modules/duplexer": {
-         "version": "0.1.2",
-         "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-         "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-         "license": "MIT"
-      },
-      "node_modules/duplexer2": {
-         "version": "0.1.4",
-         "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
-         "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
-         "dependencies": {
-            "readable-stream": "^2.0.2"
-         }
-      },
-      "node_modules/eastasianwidth": {
-         "version": "0.2.0",
-         "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-         "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/ecc-jsbn": {
-         "version": "0.1.2",
-         "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-         "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
-         "license": "MIT",
-         "dependencies": {
-            "jsbn": "~0.1.0",
-            "safer-buffer": "^2.1.0"
-         }
-      },
-      "node_modules/ee-first": {
-         "version": "1.1.1",
-         "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-         "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/electron-to-chromium": {
-         "version": "1.4.380",
-         "license": "ISC"
-      },
-      "node_modules/emoji-regex": {
-         "version": "8.0.0",
-         "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-         "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/emojis-list": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-         "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 4"
-         }
-      },
-      "node_modules/encodeurl": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-         "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/enhanced-resolve": {
-         "version": "5.13.0",
-         "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.13.0.tgz",
-         "integrity": "sha512-eyV8f0y1+bzyfh8xAwW/WTSZpLbjhqc4ne9eGSH4Zo2ejdyiNG9pU6mf9DG8a7+Auk6MFTlNOT4Y2y/9k8GKVg==",
-         "license": "MIT",
-         "dependencies": {
-            "graceful-fs": "^4.2.4",
-            "tapable": "^2.2.0"
-         },
-         "engines": {
-            "node": ">=10.13.0"
-         }
-      },
-      "node_modules/entities": {
-         "version": "2.2.0",
-         "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-         "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-         "dev": true,
-         "license": "BSD-2-Clause",
-         "funding": {
-            "url": "https://github.com/fb55/entities?sponsor=1"
-         }
-      },
-      "node_modules/env-test": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/env-test/-/env-test-1.0.0.tgz",
-         "integrity": "sha512-OBA+y3XKFzO363wYmA3BbA3nigmEm5acuGCK7wJ3jsHd8IrJVpNMcCaKpqsLM1N3cgISUSp3K6tNkibGHrx4wQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/envinfo": {
-         "version": "7.8.1",
-         "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-         "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
-         "dev": true,
-         "license": "MIT",
-         "bin": {
-            "envinfo": "dist/cli.js"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/error-ex": {
-         "version": "1.3.2",
-         "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-         "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-         "license": "MIT",
-         "dependencies": {
-            "is-arrayish": "^0.2.1"
-         }
-      },
-      "node_modules/es-get-iterator": {
-         "version": "1.1.3",
-         "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
-         "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "get-intrinsic": "^1.1.3",
-            "has-symbols": "^1.0.3",
-            "is-arguments": "^1.1.1",
-            "is-map": "^2.0.2",
-            "is-set": "^2.0.2",
-            "is-string": "^1.0.7",
-            "isarray": "^2.0.5",
-            "stop-iteration-iterator": "^1.0.0"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/es-module-lexer": {
-         "version": "1.2.1",
-         "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
-         "integrity": "sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==",
-         "license": "MIT"
-      },
-      "node_modules/es6-object-assign": {
-         "version": "1.1.0",
-         "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
-         "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==",
-         "license": "MIT"
-      },
-      "node_modules/escalade": {
-         "version": "3.1.1",
-         "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-         "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/escape-html": {
-         "version": "1.0.3",
-         "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-         "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/escape-string-regexp": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-         "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/eslint-scope": {
-         "version": "5.1.1",
-         "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-         "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^4.1.1"
-         },
-         "engines": {
-            "node": ">=8.0.0"
-         }
-      },
-      "node_modules/eslint-scope/node_modules/estraverse": {
-         "version": "4.3.0",
-         "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-         "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-         "license": "BSD-2-Clause",
-         "engines": {
-            "node": ">=4.0"
-         }
-      },
-      "node_modules/esprima": {
-         "version": "4.0.1",
-         "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-         "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-         "dev": true,
-         "license": "BSD-2-Clause",
-         "bin": {
-            "esparse": "bin/esparse.js",
-            "esvalidate": "bin/esvalidate.js"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/esrecurse": {
-         "version": "4.3.0",
-         "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-         "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "estraverse": "^5.2.0"
-         },
-         "engines": {
-            "node": ">=4.0"
-         }
-      },
-      "node_modules/estraverse": {
-         "version": "5.3.0",
-         "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-         "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-         "license": "BSD-2-Clause",
-         "engines": {
-            "node": ">=4.0"
-         }
-      },
-      "node_modules/estree-walker": {
-         "version": "0.6.1",
-         "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
-         "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
-         "license": "MIT"
-      },
-      "node_modules/esutils": {
-         "version": "2.0.3",
-         "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-         "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-         "license": "BSD-2-Clause",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/etag": {
-         "version": "1.8.1",
-         "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-         "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/eventemitter3": {
-         "version": "4.0.7",
-         "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-         "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/events": {
-         "version": "3.3.0",
-         "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-         "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.8.x"
-         }
-      },
-      "node_modules/execa": {
-         "version": "5.1.1",
-         "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-         "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "cross-spawn": "^7.0.3",
-            "get-stream": "^6.0.0",
-            "human-signals": "^2.1.0",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.1",
-            "onetime": "^5.1.2",
-            "signal-exit": "^3.0.3",
-            "strip-final-newline": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sindresorhus/execa?sponsor=1"
-         }
-      },
-      "node_modules/expand-tilde": {
-         "version": "2.0.2",
-         "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
-         "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
-         "license": "MIT",
-         "dependencies": {
-            "homedir-polyfill": "^1.0.1"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/express": {
-         "version": "4.18.2",
-         "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-         "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "accepts": "~1.3.8",
-            "array-flatten": "1.1.1",
-            "body-parser": "1.20.1",
-            "content-disposition": "0.5.4",
-            "content-type": "~1.0.4",
-            "cookie": "0.5.0",
-            "cookie-signature": "1.0.6",
-            "debug": "2.6.9",
-            "depd": "2.0.0",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "etag": "~1.8.1",
-            "finalhandler": "1.2.0",
-            "fresh": "0.5.2",
-            "http-errors": "2.0.0",
-            "merge-descriptors": "1.0.1",
-            "methods": "~1.1.2",
-            "on-finished": "2.4.1",
-            "parseurl": "~1.3.3",
-            "path-to-regexp": "0.1.7",
-            "proxy-addr": "~2.0.7",
-            "qs": "6.11.0",
-            "range-parser": "~1.2.1",
-            "safe-buffer": "5.2.1",
-            "send": "0.18.0",
-            "serve-static": "1.15.0",
-            "setprototypeof": "1.2.0",
-            "statuses": "2.0.1",
-            "type-is": "~1.6.18",
-            "utils-merge": "1.0.1",
-            "vary": "~1.1.2"
-         },
-         "engines": {
-            "node": ">= 0.10.0"
-         }
-      },
-      "node_modules/express/node_modules/array-flatten": {
-         "version": "1.1.1",
-         "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-         "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/express/node_modules/content-disposition": {
-         "version": "0.5.4",
-         "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-         "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "safe-buffer": "5.2.1"
-         },
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/express/node_modules/path-to-regexp": {
-         "version": "0.1.7",
-         "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-         "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/extend": {
-         "version": "3.0.2",
-         "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-         "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-         "license": "MIT"
-      },
-      "node_modules/extsprintf": {
-         "version": "1.3.0",
-         "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-         "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
-         "engines": [
-            "node >=0.6.0"
-         ],
-         "license": "MIT"
-      },
-      "node_modules/fast-deep-equal": {
-         "version": "3.1.3",
-         "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-         "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-         "license": "MIT"
-      },
-      "node_modules/fast-glob": {
-         "version": "3.2.12",
-         "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-         "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-         "license": "MIT",
-         "dependencies": {
-            "@nodelib/fs.stat": "^2.0.2",
-            "@nodelib/fs.walk": "^1.2.3",
-            "glob-parent": "^5.1.2",
-            "merge2": "^1.3.0",
-            "micromatch": "^4.0.4"
-         },
-         "engines": {
-            "node": ">=8.6.0"
-         }
-      },
-      "node_modules/fast-json-stable-stringify": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-         "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-         "license": "MIT"
-      },
-      "node_modules/fast-url-parser": {
-         "version": "1.1.3",
-         "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
-         "integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "punycode": "^1.3.2"
-         }
-      },
-      "node_modules/fast-url-parser/node_modules/punycode": {
-         "version": "1.4.1",
-         "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-         "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/fastest-levenshtein": {
-         "version": "1.0.16",
-         "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
-         "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 4.9.1"
-         }
-      },
-      "node_modules/fastq": {
-         "version": "1.15.0",
-         "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-         "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-         "license": "ISC",
-         "dependencies": {
-            "reusify": "^1.0.4"
-         }
-      },
-      "node_modules/faye-websocket": {
-         "version": "0.11.4",
-         "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-         "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
-         "dev": true,
-         "license": "Apache-2.0",
-         "dependencies": {
-            "websocket-driver": ">=0.5.1"
-         },
-         "engines": {
-            "node": ">=0.8.0"
-         }
-      },
-      "node_modules/fb-watchman": {
-         "version": "2.0.2",
-         "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
-         "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
-         "dev": true,
-         "license": "Apache-2.0",
-         "dependencies": {
-            "bser": "2.1.1"
-         }
-      },
-      "node_modules/fiddle": {
-         "resolved": "fiddle",
-         "link": true
-      },
-      "node_modules/file-loader": {
-         "version": "6.2.0",
-         "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
-         "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "loader-utils": "^2.0.0",
-            "schema-utils": "^3.0.0"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "webpack": "^4.0.0 || ^5.0.0"
-         }
-      },
-      "node_modules/file-loader/node_modules/ajv": {
-         "version": "6.12.6",
-         "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-         "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-         },
-         "funding": {
-            "type": "github",
-            "url": "https://github.com/sponsors/epoberezkin"
-         }
-      },
-      "node_modules/file-loader/node_modules/ajv-keywords": {
-         "version": "3.5.2",
-         "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-         "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-         "dev": true,
-         "license": "MIT",
-         "peerDependencies": {
-            "ajv": "^6.9.1"
-         }
-      },
-      "node_modules/file-loader/node_modules/json-schema-traverse": {
-         "version": "0.4.1",
-         "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-         "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/file-loader/node_modules/schema-utils": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
-         "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/json-schema": "^7.0.8",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         }
-      },
-      "node_modules/filesize": {
-         "version": "8.0.7",
-         "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
-         "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==",
-         "license": "BSD-3-Clause",
-         "engines": {
-            "node": ">= 0.4.0"
-         }
-      },
-      "node_modules/fill-range": {
-         "version": "7.0.1",
-         "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-         "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-         "license": "MIT",
-         "dependencies": {
-            "to-regex-range": "^5.0.1"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/filter-obj": {
-         "version": "5.1.0",
-         "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
-         "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=14.16"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/finalhandler": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-         "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "debug": "2.6.9",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "on-finished": "2.4.1",
-            "parseurl": "~1.3.3",
-            "statuses": "2.0.1",
-            "unpipe": "~1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/find-cache-dir": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-         "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "commondir": "^1.0.1",
-            "make-dir": "^2.0.0",
-            "pkg-dir": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/find-cache-dir/node_modules/find-up": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-         "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "locate-path": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/find-cache-dir/node_modules/locate-path": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-         "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/find-cache-dir/node_modules/p-locate": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-         "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "p-limit": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/find-cache-dir/node_modules/path-exists": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-         "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/find-cache-dir/node_modules/pkg-dir": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-         "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "find-up": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/find-up": {
-         "version": "5.0.0",
-         "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-         "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-         "license": "MIT",
-         "dependencies": {
-            "locate-path": "^6.0.0",
-            "path-exists": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/flat": {
-         "version": "5.0.2",
-         "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
-         "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "bin": {
-            "flat": "cli.js"
-         }
-      },
-      "node_modules/follow-redirects": {
-         "version": "1.15.2",
-         "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-         "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-         "dev": true,
-         "funding": [
-            {
-               "type": "individual",
-               "url": "https://github.com/sponsors/RubenVerborgh"
-            }
-         ],
-         "license": "MIT",
-         "engines": {
-            "node": ">=4.0"
-         },
-         "peerDependenciesMeta": {
-            "debug": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/for-each": {
-         "version": "0.3.3",
-         "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-         "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-         "license": "MIT",
-         "dependencies": {
-            "is-callable": "^1.1.3"
-         }
-      },
-      "node_modules/forever-agent": {
-         "version": "0.6.1",
-         "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-         "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
-         "license": "Apache-2.0",
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin": {
-         "version": "6.5.3",
-         "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
-         "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/code-frame": "^7.8.3",
-            "@types/json-schema": "^7.0.5",
-            "chalk": "^4.1.0",
-            "chokidar": "^3.4.2",
-            "cosmiconfig": "^6.0.0",
-            "deepmerge": "^4.2.2",
-            "fs-extra": "^9.0.0",
-            "glob": "^7.1.6",
-            "memfs": "^3.1.2",
-            "minimatch": "^3.0.4",
-            "schema-utils": "2.7.0",
-            "semver": "^7.3.2",
-            "tapable": "^1.0.0"
-         },
-         "engines": {
-            "node": ">=10",
-            "yarn": ">=1.0.0"
-         },
-         "peerDependencies": {
-            "eslint": ">= 6",
-            "typescript": ">= 2.7",
-            "vue-template-compiler": "*",
-            "webpack": ">= 4"
-         },
-         "peerDependenciesMeta": {
-            "eslint": {
-               "optional": true
-            },
-            "vue-template-compiler": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
-         "version": "6.12.6",
-         "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-         "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-         "license": "MIT",
-         "dependencies": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-         },
-         "funding": {
-            "type": "github",
-            "url": "https://github.com/sponsors/epoberezkin"
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
-         "version": "3.5.2",
-         "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-         "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-         "license": "MIT",
-         "peerDependencies": {
-            "ajv": "^6.9.1"
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
-         "version": "0.4.1",
-         "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-         "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-         "license": "MIT"
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/lru-cache": {
-         "version": "6.0.0",
-         "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-         "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-         "license": "ISC",
-         "dependencies": {
-            "yallist": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
-         "version": "2.7.0",
-         "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-         "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
-         "license": "MIT",
-         "dependencies": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
-         },
-         "engines": {
-            "node": ">= 8.9.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/semver": {
-         "version": "7.5.0",
-         "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
-         "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
-         "license": "ISC",
-         "dependencies": {
-            "lru-cache": "^6.0.0"
-         },
-         "bin": {
-            "semver": "bin/semver.js"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
-         "version": "1.1.3",
-         "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-         "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/fork-ts-checker-webpack-plugin/node_modules/yallist": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-         "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-         "license": "ISC"
-      },
-      "node_modules/form-data": {
-         "version": "2.3.3",
-         "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-         "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-         "license": "MIT",
-         "dependencies": {
-            "asynckit": "^0.4.0",
-            "combined-stream": "^1.0.6",
-            "mime-types": "^2.1.12"
-         },
-         "engines": {
-            "node": ">= 0.12"
-         }
-      },
-      "node_modules/forwarded": {
-         "version": "0.2.0",
-         "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-         "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/fresh": {
-         "version": "0.5.2",
-         "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-         "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/fs-extra": {
-         "version": "9.1.0",
-         "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-         "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-         "license": "MIT",
-         "dependencies": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/fs-monkey": {
-         "version": "1.0.3",
-         "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
-         "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
-         "license": "Unlicense"
-      },
-      "node_modules/fs.realpath": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-         "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-         "license": "ISC"
-      },
-      "node_modules/fstream": {
-         "version": "1.0.12",
-         "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
-         "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
-         "dependencies": {
-            "graceful-fs": "^4.1.2",
-            "inherits": "~2.0.0",
-            "mkdirp": ">=0.5 0",
-            "rimraf": "2"
-         },
-         "engines": {
-            "node": ">=0.6"
-         }
-      },
-      "node_modules/function-bind": {
-         "version": "1.1.1",
-         "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-         "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-         "license": "MIT"
-      },
-      "node_modules/functions-have-names": {
-         "version": "1.2.3",
-         "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-         "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-         "license": "MIT",
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/gallery": {
-         "resolved": "gallery",
-         "link": true
-      },
-      "node_modules/gensync": {
-         "version": "1.0.0-beta.2",
-         "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-         "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.9.0"
-         }
-      },
-      "node_modules/get-caller-file": {
-         "version": "2.0.5",
-         "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-         "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-         "dev": true,
-         "license": "ISC",
-         "engines": {
-            "node": "6.* || 8.* || >= 10.*"
-         }
-      },
-      "node_modules/get-intrinsic": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
-         "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
-         "license": "MIT",
-         "dependencies": {
-            "function-bind": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.3"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/get-package-type": {
-         "version": "0.1.0",
-         "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-         "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=8.0.0"
-         }
-      },
-      "node_modules/get-stream": {
-         "version": "6.0.1",
-         "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-         "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/getpass": {
-         "version": "0.1.7",
-         "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-         "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
-         "license": "MIT",
-         "dependencies": {
-            "assert-plus": "^1.0.0"
-         }
-      },
-      "node_modules/glob": {
-         "version": "7.2.3",
-         "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-         "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-         "license": "ISC",
-         "dependencies": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.1.1",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-         },
-         "engines": {
-            "node": "*"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/isaacs"
-         }
-      },
-      "node_modules/glob-parent": {
-         "version": "5.1.2",
-         "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-         "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-         "license": "ISC",
-         "dependencies": {
-            "is-glob": "^4.0.1"
-         },
-         "engines": {
-            "node": ">= 6"
-         }
-      },
-      "node_modules/glob-to-regexp": {
-         "version": "0.4.1",
-         "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-         "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-         "license": "BSD-2-Clause"
-      },
-      "node_modules/global-modules": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
-         "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
-         "license": "MIT",
-         "dependencies": {
-            "global-prefix": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/global-prefix": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-         "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
-         "license": "MIT",
-         "dependencies": {
-            "ini": "^1.3.5",
-            "kind-of": "^6.0.2",
-            "which": "^1.3.1"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/globals": {
-         "version": "11.12.0",
-         "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-         "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/globby": {
-         "version": "13.1.4",
-         "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
-         "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.2.11",
-            "ignore": "^5.2.0",
-            "merge2": "^1.4.1",
-            "slash": "^4.0.0"
-         },
-         "engines": {
-            "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/globby/node_modules/slash": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-         "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/gopd": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-         "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-         "license": "MIT",
-         "dependencies": {
-            "get-intrinsic": "^1.1.3"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/graceful-fs": {
-         "version": "4.2.11",
-         "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-         "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-         "license": "ISC"
-      },
-      "node_modules/gzip-size": {
-         "version": "6.0.0",
-         "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-         "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
-         "license": "MIT",
-         "dependencies": {
-            "duplexer": "^0.1.2"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/handle-thing": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-         "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/har-schema": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-         "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
-         "license": "ISC",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/har-validator": {
-         "version": "5.1.5",
-         "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-         "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-         "license": "MIT",
-         "dependencies": {
-            "ajv": "^6.12.3",
-            "har-schema": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/har-validator/node_modules/ajv": {
-         "version": "6.12.6",
-         "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-         "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-         "license": "MIT",
-         "dependencies": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-         },
-         "funding": {
-            "type": "github",
-            "url": "https://github.com/sponsors/epoberezkin"
-         }
-      },
-      "node_modules/har-validator/node_modules/json-schema-traverse": {
-         "version": "0.4.1",
-         "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-         "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-         "license": "MIT"
-      },
-      "node_modules/has": {
-         "version": "1.0.3",
-         "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-         "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-         "license": "MIT",
-         "dependencies": {
-            "function-bind": "^1.1.1"
-         },
-         "engines": {
-            "node": ">= 0.4.0"
-         }
-      },
-      "node_modules/has-bigints": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-         "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-         "license": "MIT",
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/has-flag": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-         "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/has-glob": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/has-glob/-/has-glob-1.0.0.tgz",
-         "integrity": "sha512-D+8A457fBShSEI3tFCj65PAbT++5sKiFtdCdOam0gnfBgw9D277OERk+HM9qYJXmdVLZ/znez10SqHN0BBQ50g==",
-         "license": "MIT",
-         "dependencies": {
-            "is-glob": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/has-glob/node_modules/is-glob": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-         "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
-         "license": "MIT",
-         "dependencies": {
-            "is-extglob": "^2.1.0"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/has-property-descriptors": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-         "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-         "license": "MIT",
-         "dependencies": {
-            "get-intrinsic": "^1.1.1"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/has-symbols": {
-         "version": "1.0.3",
-         "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-         "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/has-tostringtag": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-         "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-         "license": "MIT",
-         "dependencies": {
-            "has-symbols": "^1.0.2"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/he": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-         "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-         "dev": true,
-         "license": "MIT",
-         "bin": {
-            "he": "bin/he"
-         }
-      },
-      "node_modules/homedir-polyfill": {
-         "version": "1.0.3",
-         "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
-         "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
-         "license": "MIT",
-         "dependencies": {
-            "parse-passwd": "^1.0.0"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/hpack.js": {
-         "version": "2.1.6",
-         "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-         "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "inherits": "^2.0.1",
-            "obuf": "^1.0.0",
-            "readable-stream": "^2.0.1",
-            "wbuf": "^1.1.0"
-         }
-      },
-      "node_modules/html-entities": {
-         "version": "2.3.3",
-         "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
-         "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/html-minifier-terser": {
-         "version": "6.1.0",
-         "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-         "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "camel-case": "^4.1.2",
-            "clean-css": "^5.2.2",
-            "commander": "^8.3.0",
-            "he": "^1.2.0",
-            "param-case": "^3.0.4",
-            "relateurl": "^0.2.7",
-            "terser": "^5.10.0"
-         },
-         "bin": {
-            "html-minifier-terser": "cli.js"
-         },
-         "engines": {
-            "node": ">=12"
-         }
-      },
-      "node_modules/html-minifier-terser/node_modules/commander": {
-         "version": "8.3.0",
-         "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-         "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 12"
-         }
-      },
-      "node_modules/html-webpack-plugin": {
-         "version": "5.5.1",
-         "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.1.tgz",
-         "integrity": "sha512-cTUzZ1+NqjGEKjmVgZKLMdiFg3m9MdRXkZW2OEe69WYVi5ONLMmlnSZdXzGGMOq0C8jGDrL6EWyEDDUioHO/pA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/html-minifier-terser": "^6.0.0",
-            "html-minifier-terser": "^6.0.2",
-            "lodash": "^4.17.21",
-            "pretty-error": "^4.0.0",
-            "tapable": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=10.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/html-webpack-plugin"
-         },
-         "peerDependencies": {
-            "webpack": "^5.20.0"
-         }
-      },
-      "node_modules/htmlparser2": {
-         "version": "6.1.0",
-         "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-         "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-         "dev": true,
-         "funding": [
-            "https://github.com/fb55/htmlparser2?sponsor=1",
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/fb55"
-            }
-         ],
-         "license": "MIT",
-         "dependencies": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.0.0",
-            "domutils": "^2.5.2",
-            "entities": "^2.0.0"
-         }
-      },
-      "node_modules/http-deceiver": {
-         "version": "1.2.7",
-         "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-         "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/http-errors": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-         "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "depd": "2.0.0",
-            "inherits": "2.0.4",
-            "setprototypeof": "1.2.0",
-            "statuses": "2.0.1",
-            "toidentifier": "1.0.1"
-         },
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/http-parser-js": {
-         "version": "0.5.8",
-         "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
-         "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/http-proxy": {
-         "version": "1.18.1",
-         "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-         "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "eventemitter3": "^4.0.0",
-            "follow-redirects": "^1.0.0",
-            "requires-port": "^1.0.0"
-         },
-         "engines": {
-            "node": ">=8.0.0"
-         }
-      },
-      "node_modules/http-proxy-middleware": {
-         "version": "2.0.6",
-         "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
-         "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/http-proxy": "^1.17.8",
-            "http-proxy": "^1.18.1",
-            "is-glob": "^4.0.1",
-            "is-plain-obj": "^3.0.0",
-            "micromatch": "^4.0.2"
-         },
-         "engines": {
-            "node": ">=12.0.0"
-         },
-         "peerDependencies": {
-            "@types/express": "^4.17.13"
-         },
-         "peerDependenciesMeta": {
-            "@types/express": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/http-proxy-middleware/node_modules/is-plain-obj": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-         "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/http-signature": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-         "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
-         "license": "MIT",
-         "dependencies": {
-            "assert-plus": "^1.0.0",
-            "jsprim": "^1.2.2",
-            "sshpk": "^1.7.0"
-         },
-         "engines": {
-            "node": ">=0.8",
-            "npm": ">=1.3.7"
-         }
-      },
-      "node_modules/human-signals": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-         "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-         "dev": true,
-         "license": "Apache-2.0",
-         "engines": {
-            "node": ">=10.17.0"
-         }
-      },
-      "node_modules/iconv-lite": {
-         "version": "0.4.24",
-         "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-         "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "safer-buffer": ">= 2.1.2 < 3"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/icss-utils": {
-         "version": "5.1.0",
-         "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-         "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-         "dev": true,
-         "license": "ISC",
-         "engines": {
-            "node": "^10 || ^12 || >= 14"
-         },
-         "peerDependencies": {
-            "postcss": "^8.1.0"
-         }
-      },
-      "node_modules/ieee754": {
-         "version": "1.2.1",
-         "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-         "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/feross"
-            },
-            {
-               "type": "patreon",
-               "url": "https://www.patreon.com/feross"
-            },
-            {
-               "type": "consulting",
-               "url": "https://feross.org/support"
-            }
-         ],
-         "license": "BSD-3-Clause"
-      },
-      "node_modules/if-loader": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/if-loader/-/if-loader-1.0.2.tgz",
-         "integrity": "sha512-ZZqRvkcIbi0COigsjOPaBsuTAXXOxULLCMwERqhv3BCFDb/Fzh1FAu8u7SB9DwdXuTlWeKWdfdLrXkCtzXTFSQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/ignore": {
-         "version": "5.2.4",
-         "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
-         "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 4"
-         }
-      },
-      "node_modules/illuminate-js": {
-         "version": "1.0.0-alpha.2",
-         "resolved": "https://registry.npmjs.org/illuminate-js/-/illuminate-js-1.0.0-alpha.2.tgz",
-         "integrity": "sha512-Qjwvjwsu4RXfkpM0mSqOMZlom3KevYC2/JalIzFlslb4gtRcURIN6Ydq9QHlP74l8j/SxhkP4v8VSscQxcULrQ==",
-         "license": "MIT"
-      },
-      "node_modules/immer": {
-         "version": "10.0.1",
-         "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.1.tgz",
-         "integrity": "sha512-zg++jJLsKKTwXGeSYIw0HgChSYQGtu0UDTnbKx5aGLYgte4CwTmH9eJDYyQ6FheyUtBe+lQW9FrGxya1G+Dtmg==",
-         "license": "MIT",
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/immer"
-         }
-      },
-      "node_modules/immutable": {
-         "version": "4.3.0",
-         "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
-         "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
-         "license": "MIT"
-      },
-      "node_modules/import-fresh": {
-         "version": "3.3.0",
-         "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-         "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-         "license": "MIT",
-         "dependencies": {
-            "parent-module": "^1.0.0",
-            "resolve-from": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/import-fresh/node_modules/resolve-from": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-         "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/import-local": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
-         "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "pkg-dir": "^4.2.0",
-            "resolve-cwd": "^3.0.0"
-         },
-         "bin": {
-            "import-local-fixture": "fixtures/cli.js"
-         },
-         "engines": {
-            "node": ">=8"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/imurmurhash": {
-         "version": "0.1.4",
-         "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-         "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.8.19"
-         }
-      },
-      "node_modules/inflight": {
-         "version": "1.0.6",
-         "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-         "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-         "license": "ISC",
-         "dependencies": {
-            "once": "^1.3.0",
-            "wrappy": "1"
-         }
-      },
-      "node_modules/inherits": {
-         "version": "2.0.4",
-         "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-         "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-         "license": "ISC"
-      },
-      "node_modules/ini": {
-         "version": "1.3.8",
-         "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-         "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-         "license": "ISC"
-      },
-      "node_modules/inline-manifest-webpack-plugin": {
-         "version": "4.0.2",
-         "resolved": "https://registry.npmjs.org/inline-manifest-webpack-plugin/-/inline-manifest-webpack-plugin-4.0.2.tgz",
-         "integrity": "sha512-j1Q0Y7m2GVsTxnOzQ7YzIlfn5Th2Ga6Ivoqme1G0iGZc8m7R3aQY8HfzLW7ew3CwmqdZb/O26mf9Ak2JA7zzKg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "source-map-url": "0.4.0"
-         }
-      },
-      "node_modules/internal-slot": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
-         "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
-         "license": "MIT",
-         "dependencies": {
-            "get-intrinsic": "^1.2.0",
-            "has": "^1.0.3",
-            "side-channel": "^1.0.4"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         }
-      },
-      "node_modules/interpret": {
-         "version": "3.1.1",
-         "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
-         "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10.13.0"
-         }
-      },
-      "node_modules/intl": {
-         "version": "1.2.5",
-         "resolved": "https://registry.npmjs.org/intl/-/intl-1.2.5.tgz",
-         "integrity": "sha512-rK0KcPHeBFBcqsErKSpvZnrOmWOj+EmDkyJ57e90YWaQNqbcivcqmKDlHEeNprDWOsKzPsh1BfSpPQdDvclHVw==",
-         "license": "MIT"
-      },
-      "node_modules/intl-io": {
-         "version": "0.3.0",
-         "resolved": "https://registry.npmjs.org/intl-io/-/intl-io-0.3.0.tgz",
-         "integrity": "sha512-fsiAEyhgrGLI1B7wB0/hMVxBDlc4IprTmrTibxOuUkHtY6nf/Mg6O0BzRXq2T9B7v2PqMtyrcdGqu5kEUgksMA==",
-         "license": "MIT"
-      },
-      "node_modules/ipaddr.js": {
-         "version": "1.9.1",
-         "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-         "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.10"
-         }
-      },
-      "node_modules/is-arguments": {
-         "version": "1.1.1",
-         "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-         "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "has-tostringtag": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-array-buffer": {
-         "version": "3.0.2",
-         "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-         "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "get-intrinsic": "^1.2.0",
-            "is-typed-array": "^1.1.10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-arrayish": {
-         "version": "0.2.1",
-         "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-         "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-         "license": "MIT"
-      },
-      "node_modules/is-bigint": {
-         "version": "1.0.4",
-         "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-         "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
-         "license": "MIT",
-         "dependencies": {
-            "has-bigints": "^1.0.1"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-binary-path": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-         "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-         "license": "MIT",
-         "dependencies": {
-            "binary-extensions": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/is-boolean-object": {
-         "version": "1.1.2",
-         "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-         "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "has-tostringtag": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-buffer": {
-         "version": "1.1.6",
-         "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-         "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/is-callable": {
-         "version": "1.2.7",
-         "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-         "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-core-module": {
-         "version": "2.12.0",
-         "license": "MIT",
-         "dependencies": {
-            "has": "^1.0.3"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-date-object": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-         "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-         "license": "MIT",
-         "dependencies": {
-            "has-tostringtag": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-docker": {
-         "version": "2.2.1",
-         "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-         "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-         "license": "MIT",
-         "bin": {
-            "is-docker": "cli.js"
-         },
-         "engines": {
-            "node": ">=8"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/is-extglob": {
-         "version": "2.1.1",
-         "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-         "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/is-fullwidth-code-point": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-         "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/is-generator-function": {
-         "version": "1.0.10",
-         "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
-         "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-         "license": "MIT",
-         "dependencies": {
-            "has-tostringtag": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-glob": {
-         "version": "4.0.3",
-         "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-         "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-         "license": "MIT",
-         "dependencies": {
-            "is-extglob": "^2.1.1"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/is-map": {
-         "version": "2.0.2",
-         "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-         "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
-         "license": "MIT",
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-nan": {
-         "version": "1.3.2",
-         "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
-         "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-number": {
-         "version": "7.0.0",
-         "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-         "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.12.0"
-         }
-      },
-      "node_modules/is-number-object": {
-         "version": "1.0.7",
-         "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-         "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
-         "license": "MIT",
-         "dependencies": {
-            "has-tostringtag": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-path-cwd": {
-         "version": "2.2.0",
-         "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
-         "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/is-path-in-cwd": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
-         "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "is-path-inside": "^2.1.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/is-path-inside": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
-         "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "path-is-inside": "^1.0.2"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/is-plain-obj": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
-         "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/is-plain-object": {
-         "version": "2.0.4",
-         "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-         "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "isobject": "^3.0.1"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/is-port-reachable": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/is-port-reachable/-/is-port-reachable-4.0.0.tgz",
-         "integrity": "sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/is-regex": {
-         "version": "1.1.4",
-         "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-         "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "has-tostringtag": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-root": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
-         "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/is-set": {
-         "version": "2.0.2",
-         "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-         "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
-         "license": "MIT",
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-shared-array-buffer": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-         "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-stream": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-         "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/is-string": {
-         "version": "1.0.7",
-         "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-         "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-         "license": "MIT",
-         "dependencies": {
-            "has-tostringtag": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-symbol": {
-         "version": "1.0.4",
-         "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-         "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-         "license": "MIT",
-         "dependencies": {
-            "has-symbols": "^1.0.2"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-typed-array": {
-         "version": "1.1.10",
-         "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
-         "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
-         "license": "MIT",
-         "dependencies": {
-            "available-typed-arrays": "^1.0.5",
-            "call-bind": "^1.0.2",
-            "for-each": "^0.3.3",
-            "gopd": "^1.0.1",
-            "has-tostringtag": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-typedarray": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-         "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-         "license": "MIT"
-      },
-      "node_modules/is-unicode-supported": {
-         "version": "0.1.0",
-         "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
-         "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/is-valid-glob": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
-         "integrity": "sha512-AhiROmoEFDSsjx8hW+5sGwgKVIORcXnrlAx/R0ZSeaPw70Vw0CqkGBBhHGL58Uox2eXnU1AnvXJl1XlyedO5bA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/is-weakmap": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-         "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
-         "license": "MIT",
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-weakset": {
-         "version": "2.0.2",
-         "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
-         "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "get-intrinsic": "^1.1.1"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/is-windows": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-         "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/is-wsl": {
-         "version": "2.2.0",
-         "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-         "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-         "license": "MIT",
-         "dependencies": {
-            "is-docker": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/isarray": {
-         "version": "2.0.5",
-         "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-         "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-         "license": "MIT"
-      },
-      "node_modules/isexe": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-         "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-         "license": "ISC"
-      },
-      "node_modules/isobject": {
-         "version": "3.0.1",
-         "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-         "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/isstream": {
-         "version": "0.1.2",
-         "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-         "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
-         "license": "MIT"
-      },
-      "node_modules/istanbul-lib-coverage": {
-         "version": "3.2.0",
-         "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
-         "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/istanbul-lib-instrument": {
-         "version": "5.2.1",
-         "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
-         "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "@babel/core": "^7.12.3",
-            "@babel/parser": "^7.14.7",
-            "@istanbuljs/schema": "^0.1.2",
-            "istanbul-lib-coverage": "^3.2.0",
-            "semver": "^6.3.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/jest-haste-map": {
-         "version": "29.5.0",
-         "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.5.0.tgz",
-         "integrity": "sha512-IspOPnnBro8YfVYSw6yDRKh/TiCdRngjxeacCps1cQ9cgVN6+10JUcuJ1EabrgYLOATsIAigxA0rLR9x/YlrSA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@jest/types": "^29.5.0",
-            "@types/graceful-fs": "^4.1.3",
-            "@types/node": "*",
-            "anymatch": "^3.0.3",
-            "fb-watchman": "^2.0.0",
-            "graceful-fs": "^4.2.9",
-            "jest-regex-util": "^29.4.3",
-            "jest-util": "^29.5.0",
-            "jest-worker": "^29.5.0",
-            "micromatch": "^4.0.4",
-            "walker": "^1.0.8"
-         },
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         },
-         "optionalDependencies": {
-            "fsevents": "^2.3.2"
-         }
-      },
-      "node_modules/jest-regex-util": {
-         "version": "29.4.3",
-         "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.4.3.tgz",
-         "integrity": "sha512-O4FglZaMmWXbGHSQInfXewIsd1LMn9p3ZXB/6r4FOkyhX2/iP/soMG98jGvk/A3HAN78+5VWcBGO0BJAPRh4kg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         }
-      },
-      "node_modules/jest-util": {
-         "version": "29.5.0",
-         "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz",
-         "integrity": "sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@jest/types": "^29.5.0",
-            "@types/node": "*",
-            "chalk": "^4.0.0",
-            "ci-info": "^3.2.0",
-            "graceful-fs": "^4.2.9",
-            "picomatch": "^2.2.3"
-         },
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         }
-      },
-      "node_modules/jest-util/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/jest-util/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/jest-worker": {
-         "version": "29.5.0",
-         "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.5.0.tgz",
-         "integrity": "sha512-NcrQnevGoSp4b5kg+akIpthoAFHxPBcb5P6mYPY0fUNT+sSvmtu6jlkEle3anczUKIKEbMxFimk9oTP/tpIPgA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/node": "*",
-            "jest-util": "^29.5.0",
-            "merge-stream": "^2.0.0",
-            "supports-color": "^8.0.0"
-         },
-         "engines": {
-            "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-         }
-      },
-      "node_modules/js-tokens": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-         "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-         "license": "MIT"
-      },
-      "node_modules/js-yaml": {
-         "version": "4.1.0",
-         "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-         "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "argparse": "^2.0.1"
-         },
-         "bin": {
-            "js-yaml": "bin/js-yaml.js"
-         }
-      },
-      "node_modules/jsbn": {
-         "version": "0.1.1",
-         "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-         "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-         "license": "MIT"
-      },
-      "node_modules/jsesc": {
-         "version": "0.5.0",
-         "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-         "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
-         "bin": {
-            "jsesc": "bin/jsesc"
-         }
-      },
-      "node_modules/json-loader": {
-         "version": "0.5.7",
-         "resolved": "https://registry.npmjs.org/json-loader/-/json-loader-0.5.7.tgz",
-         "integrity": "sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/json-parse-even-better-errors": {
-         "version": "2.3.1",
-         "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-         "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-         "license": "MIT"
-      },
-      "node_modules/json-schema": {
-         "version": "0.4.0",
-         "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-         "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-         "license": "(AFL-2.1 OR BSD-3-Clause)"
-      },
-      "node_modules/json-schema-traverse": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-         "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/json-stringify-safe": {
-         "version": "5.0.1",
-         "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-         "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-         "license": "ISC"
-      },
-      "node_modules/json5": {
-         "version": "2.2.3",
-         "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-         "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-         "license": "MIT",
-         "bin": {
-            "json5": "lib/cli.js"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/jsonfile": {
-         "version": "6.1.0",
-         "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-         "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-         "license": "MIT",
-         "dependencies": {
-            "universalify": "^2.0.0"
-         },
-         "optionalDependencies": {
-            "graceful-fs": "^4.1.6"
-         }
-      },
-      "node_modules/jsprim": {
-         "version": "1.4.2",
-         "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
-         "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
-         "license": "MIT",
-         "dependencies": {
-            "assert-plus": "1.0.0",
-            "extsprintf": "1.3.0",
-            "json-schema": "0.4.0",
-            "verror": "1.10.0"
-         },
-         "engines": {
-            "node": ">=0.6.0"
-         }
-      },
-      "node_modules/kind-of": {
-         "version": "6.0.3",
-         "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-         "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/kleur": {
-         "version": "3.0.3",
-         "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-         "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/klona": {
-         "version": "2.0.6",
-         "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-         "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 8"
-         }
-      },
-      "node_modules/launch-editor": {
-         "version": "2.6.0",
-         "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.0.tgz",
-         "integrity": "sha512-JpDCcQnyAAzZZaZ7vEiSqL690w7dAEyLao+KC96zBplnYbJS7TYNjvM3M7y3dGz+v7aIsJk3hllWuc0kWAjyRQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "picocolors": "^1.0.0",
-            "shell-quote": "^1.7.3"
-         }
-      },
-      "node_modules/lines-and-columns": {
-         "version": "1.2.4",
-         "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-         "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-         "license": "MIT"
-      },
-      "node_modules/listenercount": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
-         "integrity": "sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ=="
-      },
-      "node_modules/litmus": {
-         "resolved": "litmus",
-         "link": true
-      },
-      "node_modules/loader-runner": {
-         "version": "4.3.0",
-         "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
-         "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6.11.5"
-         }
-      },
-      "node_modules/loader-utils": {
-         "version": "2.0.4",
-         "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-         "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-         },
-         "engines": {
-            "node": ">=8.9.0"
-         }
-      },
-      "node_modules/locate-path": {
-         "version": "6.0.0",
-         "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-         "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-         "license": "MIT",
-         "dependencies": {
-            "p-locate": "^5.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/lodash": {
-         "version": "4.17.21",
-         "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-         "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/lodash.debounce": {
-         "version": "4.0.8",
-         "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-         "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-         "license": "MIT"
-      },
-      "node_modules/lodash.hasin": {
-         "version": "4.5.2",
-         "resolved": "https://registry.npmjs.org/lodash.hasin/-/lodash.hasin-4.5.2.tgz",
-         "integrity": "sha512-AFAitwTSq1Ka/1J9uBaVxpLBP5OI3INQvkl4wKcgIYxoA0S3aqO1QWXHR9aCcOrWtPFqP7GzlFncZfe0Jz0kNw==",
-         "license": "MIT"
-      },
-      "node_modules/lodash.isempty": {
-         "version": "4.4.0",
-         "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
-         "integrity": "sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==",
-         "license": "MIT"
-      },
-      "node_modules/lodash.isnil": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
-         "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng==",
-         "license": "MIT"
-      },
-      "node_modules/lodash.omitby": {
-         "version": "4.6.0",
-         "resolved": "https://registry.npmjs.org/lodash.omitby/-/lodash.omitby-4.6.0.tgz",
-         "integrity": "sha512-5OrRcIVR75M288p4nbI2WLAf3ndw2GD9fyNv3Bc15+WCxJDdZ4lYndSxGd7hnG6PVjiJTeJE2dHEGhIuKGicIQ==",
-         "license": "MIT"
-      },
-      "node_modules/lodash.union": {
-         "version": "4.6.0",
-         "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
-         "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/log-symbols": {
-         "version": "4.1.0",
-         "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
-         "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "chalk": "^4.1.0",
-            "is-unicode-supported": "^0.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/log-symbols/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/log-symbols/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/loose-envify": {
-         "version": "1.4.0",
-         "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-         "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-         "license": "MIT",
-         "dependencies": {
-            "js-tokens": "^3.0.0 || ^4.0.0"
-         },
-         "bin": {
-            "loose-envify": "cli.js"
-         }
-      },
-      "node_modules/lower-case": {
-         "version": "2.0.2",
-         "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-         "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "tslib": "^2.0.3"
-         }
-      },
-      "node_modules/lru-cache": {
-         "version": "5.1.1",
-         "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-         "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-         "license": "ISC",
-         "dependencies": {
-            "yallist": "^3.0.2"
-         }
-      },
-      "node_modules/magic-string": {
-         "version": "0.25.9",
-         "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-         "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-         "license": "MIT",
-         "dependencies": {
-            "sourcemap-codec": "^1.4.8"
-         }
-      },
-      "node_modules/make-dir": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-         "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "pify": "^4.0.1",
-            "semver": "^5.6.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/make-dir/node_modules/semver": {
-         "version": "5.7.1",
-         "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-         "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-         "dev": true,
-         "license": "ISC",
-         "bin": {
-            "semver": "bin/semver"
-         }
-      },
-      "node_modules/makeerror": {
-         "version": "1.0.12",
-         "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
-         "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "tmpl": "1.0.5"
-         }
-      },
-      "node_modules/marked": {
-         "version": "4.3.0",
-         "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
-         "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
-         "license": "MIT",
-         "bin": {
-            "marked": "bin/marked.js"
-         },
-         "engines": {
-            "node": ">= 12"
-         }
-      },
-      "node_modules/matched": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/matched/-/matched-1.0.2.tgz",
-         "integrity": "sha512-7ivM1jFZVTOOS77QsR+TtYHH0ecdLclMkqbf5qiJdX2RorqfhsL65QHySPZgDE0ZjHoh+mQUNHTanNXIlzXd0Q==",
-         "license": "MIT",
-         "dependencies": {
-            "arr-union": "^3.1.0",
-            "async-array-reduce": "^0.2.1",
-            "glob": "^7.1.2",
-            "has-glob": "^1.0.0",
-            "is-valid-glob": "^1.0.0",
-            "resolve-dir": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.12.0"
-         }
-      },
-      "node_modules/md5": {
-         "version": "2.3.0",
-         "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-         "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "charenc": "0.0.2",
-            "crypt": "0.0.2",
-            "is-buffer": "~1.1.6"
-         }
-      },
-      "node_modules/media-typer": {
-         "version": "0.3.0",
-         "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-         "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/memfs": {
-         "version": "3.5.1",
-         "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.1.tgz",
-         "integrity": "sha512-UWbFJKvj5k+nETdteFndTpYxdeTMox/ULeqX5k/dpaQJCCFmj5EeKv3dBcyO2xmkRAx2vppRu5dVG7SOtsGOzA==",
-         "license": "Unlicense",
-         "dependencies": {
-            "fs-monkey": "^1.0.3"
-         },
-         "engines": {
-            "node": ">= 4.0.0"
-         }
-      },
-      "node_modules/merge-descriptors": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-         "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/merge-stream": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-         "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-         "license": "MIT"
-      },
-      "node_modules/merge2": {
-         "version": "1.4.1",
-         "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-         "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 8"
-         }
-      },
-      "node_modules/mersenne-twister": {
-         "version": "1.1.0",
-         "resolved": "https://registry.npmjs.org/mersenne-twister/-/mersenne-twister-1.1.0.tgz",
-         "integrity": "sha512-mUYWsMKNrm4lfygPkL3OfGzOPTR2DBlTkBNHM//F6hGp8cLThY897crAlk3/Jo17LEOOjQUrNAx6DvgO77QJkA==",
-         "license": "MIT"
-      },
-      "node_modules/methods": {
-         "version": "1.1.2",
-         "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-         "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/micromatch": {
-         "version": "4.0.5",
-         "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-         "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-         "license": "MIT",
-         "dependencies": {
-            "braces": "^3.0.2",
-            "picomatch": "^2.3.1"
-         },
-         "engines": {
-            "node": ">=8.6"
-         }
-      },
-      "node_modules/mime": {
-         "version": "1.6.0",
-         "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-         "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-         "dev": true,
-         "license": "MIT",
-         "bin": {
-            "mime": "cli.js"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/mime-db": {
-         "version": "1.52.0",
-         "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-         "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/mime-types": {
-         "version": "2.1.35",
-         "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-         "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-         "license": "MIT",
-         "dependencies": {
-            "mime-db": "1.52.0"
-         },
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/mimic-fn": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-         "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/mini-css-extract-plugin": {
-         "version": "2.7.5",
-         "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.5.tgz",
-         "integrity": "sha512-9HaR++0mlgom81s95vvNjxkg52n2b5s//3ZTI1EtzFb98awsLSivs2LMsVqnQ3ay0PVhqWcGNyDaTE961FOcjQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "schema-utils": "^4.0.0"
-         },
-         "engines": {
-            "node": ">= 12.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "webpack": "^5.0.0"
-         }
-      },
-      "node_modules/minimalistic-assert": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-         "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
-         "dev": true,
-         "license": "ISC"
-      },
-      "node_modules/minimatch": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-         "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-         "license": "ISC",
-         "dependencies": {
-            "brace-expansion": "^1.1.7"
-         },
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/minimist": {
-         "version": "1.2.8",
-         "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-         "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-         "license": "MIT",
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/mkdir-p": {
-         "version": "0.0.7",
-         "resolved": "https://registry.npmjs.org/mkdir-p/-/mkdir-p-0.0.7.tgz",
-         "integrity": "sha512-VkWaZNxDgZle/aJAemUAWdyYX7geyuleKYFfRejf/pFKjxBDbWrMAy41ijg5EiI1U00WR9JcvynuDedE/fTxLA=="
-      },
-      "node_modules/mkdirp": {
-         "version": "0.5.6",
-         "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-         "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-         "dependencies": {
-            "minimist": "^1.2.6"
-         },
-         "bin": {
-            "mkdirp": "bin/cmd.js"
-         }
-      },
-      "node_modules/mocha": {
-         "version": "10.2.0",
-         "resolved": "https://registry.npmjs.org/mocha/-/mocha-10.2.0.tgz",
-         "integrity": "sha512-IDY7fl/BecMwFHzoqF2sg/SHHANeBoMMXFlS9r0OXKDssYE1M5O43wUY/9BVPeIvfH2zmEbBfseqN9gBQZzXkg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-colors": "4.1.1",
-            "browser-stdout": "1.3.1",
-            "chokidar": "3.5.3",
-            "debug": "4.3.4",
-            "diff": "5.0.0",
-            "escape-string-regexp": "4.0.0",
-            "find-up": "5.0.0",
-            "glob": "7.2.0",
-            "he": "1.2.0",
-            "js-yaml": "4.1.0",
-            "log-symbols": "4.1.0",
-            "minimatch": "5.0.1",
-            "ms": "2.1.3",
-            "nanoid": "3.3.3",
-            "serialize-javascript": "6.0.0",
-            "strip-json-comments": "3.1.1",
-            "supports-color": "8.1.1",
-            "workerpool": "6.2.1",
-            "yargs": "16.2.0",
-            "yargs-parser": "20.2.4",
-            "yargs-unparser": "2.0.0"
-         },
-         "bin": {
-            "_mocha": "bin/_mocha",
-            "mocha": "bin/mocha.js"
-         },
-         "engines": {
-            "node": ">= 14.0.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/mochajs"
-         }
-      },
-      "node_modules/mocha/node_modules/debug": {
-         "version": "4.3.4",
-         "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-         "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ms": "2.1.2"
-         },
-         "engines": {
-            "node": ">=6.0"
-         },
-         "peerDependenciesMeta": {
-            "supports-color": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/mocha/node_modules/debug/node_modules/ms": {
-         "version": "2.1.2",
-         "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-         "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/mocha/node_modules/glob": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-         "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-         },
-         "engines": {
-            "node": "*"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/isaacs"
-         }
-      },
-      "node_modules/mocha/node_modules/glob/node_modules/minimatch": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-         "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "brace-expansion": "^1.1.7"
-         },
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/mocha/node_modules/minimatch": {
-         "version": "5.0.1",
-         "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.0.1.tgz",
-         "integrity": "sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "brace-expansion": "^2.0.1"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/mocha/node_modules/minimatch/node_modules/brace-expansion": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-         "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "balanced-match": "^1.0.0"
-         }
-      },
-      "node_modules/mocha/node_modules/serialize-javascript": {
-         "version": "6.0.0",
-         "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-         "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "randombytes": "^2.1.0"
-         }
-      },
-      "node_modules/modify-babel-preset": {
-         "version": "3.2.1",
-         "resolved": "https://registry.npmjs.org/modify-babel-preset/-/modify-babel-preset-3.2.1.tgz",
-         "integrity": "sha512-AjBTxH9FrXpagLv4++2wj6eIPwJq5As+7ZQY0muXv5GAMOCUxO69Kuc4M570ZMuBJgaNMBOEV0d/e544k/Gqtw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "require-relative": "^0.8.7"
-         }
-      },
-      "node_modules/moment": {
-         "version": "2.29.4",
-         "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-         "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
-         "license": "MIT",
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/mrmime": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
-         "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/ms": {
-         "version": "2.1.3",
-         "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-         "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/multicast-dns": {
-         "version": "7.2.5",
-         "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
-         "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "dns-packet": "^5.2.2",
-            "thunky": "^1.0.2"
-         },
-         "bin": {
-            "multicast-dns": "cli.js"
-         }
-      },
-      "node_modules/nanoid": {
-         "version": "3.3.3",
-         "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz",
-         "integrity": "sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==",
-         "dev": true,
-         "license": "MIT",
-         "bin": {
-            "nanoid": "bin/nanoid.cjs"
-         },
-         "engines": {
-            "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-         }
-      },
-      "node_modules/negotiator": {
-         "version": "0.6.3",
-         "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-         "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/neo-async": {
-         "version": "2.6.2",
-         "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-         "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-         "license": "MIT"
-      },
-      "node_modules/no-case": {
-         "version": "3.0.4",
-         "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-         "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "lower-case": "^2.0.2",
-            "tslib": "^2.0.3"
-         }
-      },
-      "node_modules/node-forge": {
-         "version": "1.3.1",
-         "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
-         "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
-         "dev": true,
-         "license": "(BSD-3-Clause OR GPL-2.0)",
-         "engines": {
-            "node": ">= 6.13.0"
-         }
-      },
-      "node_modules/node-int64": {
-         "version": "0.4.0",
-         "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-         "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/node-releases": {
-         "version": "2.0.10",
-         "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-         "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
-         "license": "MIT"
-      },
-      "node_modules/normalize-path": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-         "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/npm-run-path": {
-         "version": "4.0.1",
-         "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-         "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "path-key": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/nth-check": {
-         "version": "2.1.1",
-         "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-         "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-         "dev": true,
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "boolbase": "^1.0.0"
-         },
-         "funding": {
-            "url": "https://github.com/fb55/nth-check?sponsor=1"
-         }
-      },
-      "node_modules/oauth-sign": {
-         "version": "0.9.0",
-         "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-         "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-         "license": "Apache-2.0",
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/object-assign": {
-         "version": "4.1.1",
-         "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-         "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/object-inspect": {
-         "version": "1.12.3",
-         "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-         "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-         "license": "MIT",
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/object-is": {
-         "version": "1.1.5",
-         "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-         "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/object-keys": {
-         "version": "1.1.1",
-         "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-         "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.4"
-         }
-      },
-      "node_modules/object.assign": {
-         "version": "4.1.4",
-         "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
-         "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.4",
-            "has-symbols": "^1.0.3",
-            "object-keys": "^1.1.1"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/obuf": {
-         "version": "1.1.2",
-         "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-         "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/on-finished": {
-         "version": "2.4.1",
-         "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-         "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ee-first": "1.1.1"
-         },
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/on-headers": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-         "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/once": {
-         "version": "1.4.0",
-         "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-         "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-         "license": "ISC",
-         "dependencies": {
-            "wrappy": "1"
-         }
-      },
-      "node_modules/onetime": {
-         "version": "5.1.2",
-         "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-         "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "mimic-fn": "^2.1.0"
-         },
-         "engines": {
-            "node": ">=6"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/open": {
-         "version": "8.4.2",
-         "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
-         "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
-         "license": "MIT",
-         "dependencies": {
-            "define-lazy-prop": "^2.0.0",
-            "is-docker": "^2.1.1",
-            "is-wsl": "^2.2.0"
-         },
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/opener": {
-         "version": "1.5.2",
-         "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-         "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
-         "dev": true,
-         "license": "(WTFPL OR MIT)",
-         "bin": {
-            "opener": "bin/opener-bin.js"
-         }
-      },
-      "node_modules/os-homedir": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-2.0.0.tgz",
-         "integrity": "sha512-saRNz0DSC5C/I++gFIaJTXoFJMRwiP5zHar5vV3xQ2TkgEw6hDCcU5F272JjUylpiVgBrZNQHnfjkLabTfb92Q==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/p-limit": {
-         "version": "2.3.0",
-         "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-         "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-         "license": "MIT",
-         "dependencies": {
-            "p-try": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/p-locate": {
-         "version": "5.0.0",
-         "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-         "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-         "license": "MIT",
-         "dependencies": {
-            "p-limit": "^3.0.2"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/p-locate/node_modules/p-limit": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-         "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-         "license": "MIT",
-         "dependencies": {
-            "yocto-queue": "^0.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/p-map": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-         "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/p-retry": {
-         "version": "4.6.2",
-         "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
-         "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/retry": "0.12.0",
-            "retry": "^0.13.1"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/p-try": {
-         "version": "2.2.0",
-         "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-         "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/param-case": {
-         "version": "3.0.4",
-         "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-         "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "dot-case": "^3.0.4",
-            "tslib": "^2.0.3"
-         }
-      },
-      "node_modules/parent-module": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-         "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-         "license": "MIT",
-         "dependencies": {
-            "callsites": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/parse-json": {
-         "version": "5.2.0",
-         "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-         "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-even-better-errors": "^2.3.0",
-            "lines-and-columns": "^1.1.6"
-         },
-         "engines": {
-            "node": ">=8"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/parse-passwd": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-         "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/parseurl": {
-         "version": "1.3.3",
-         "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-         "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/pascal-case": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-         "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "no-case": "^3.0.4",
-            "tslib": "^2.0.3"
-         }
-      },
-      "node_modules/path-browserify": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
-         "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
-         "license": "MIT"
-      },
-      "node_modules/path-exists": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-         "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/path-is-absolute": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-         "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/path-is-inside": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-         "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
-         "dev": true,
-         "license": "(WTFPL OR MIT)"
-      },
-      "node_modules/path-key": {
-         "version": "3.1.1",
-         "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-         "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/path-parse": {
-         "version": "1.0.7",
-         "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-         "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-         "license": "MIT"
-      },
-      "node_modules/path-to-regexp": {
-         "version": "2.2.1",
-         "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
-         "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/path-type": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-         "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/performance-now": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-         "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-         "license": "MIT"
-      },
-      "node_modules/picocolors": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-         "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-         "license": "ISC"
-      },
-      "node_modules/picomatch": {
-         "version": "2.3.1",
-         "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-         "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8.6"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/jonschlinkert"
-         }
-      },
-      "node_modules/pify": {
-         "version": "4.0.1",
-         "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-         "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/pinkie": {
-         "version": "2.0.4",
-         "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-         "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/pinkie-promise": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-         "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "pinkie": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/pirates": {
-         "version": "4.0.5",
-         "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
-         "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 6"
-         }
-      },
-      "node_modules/pkg-dir": {
-         "version": "4.2.0",
-         "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-         "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "find-up": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/pkg-dir/node_modules/find-up": {
-         "version": "4.1.0",
-         "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-         "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/pkg-dir/node_modules/locate-path": {
-         "version": "5.0.0",
-         "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-         "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "p-locate": "^4.1.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/pkg-dir/node_modules/p-locate": {
-         "version": "4.1.0",
-         "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-         "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "p-limit": "^2.2.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/pkg-up": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-         "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
-         "license": "MIT",
-         "dependencies": {
-            "find-up": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/pkg-up/node_modules/find-up": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-         "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-         "license": "MIT",
-         "dependencies": {
-            "locate-path": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/pkg-up/node_modules/locate-path": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-         "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-         "license": "MIT",
-         "dependencies": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/pkg-up/node_modules/p-locate": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-         "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-         "license": "MIT",
-         "dependencies": {
-            "p-limit": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/pkg-up/node_modules/path-exists": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-         "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/plural": {
-         "version": "1.1.0",
-         "resolved": "https://registry.npmjs.org/plural/-/plural-1.1.0.tgz",
-         "integrity": "sha512-kX459gcOOllXDCPolRRBItCjvWU4bULIg4R3OYRMAp/4mZuBfF/H7b/SBsTJZkyc+GFkJV4ENitITOz45kyzqQ==",
-         "license": "MIT"
-      },
-      "node_modules/postcss": {
-         "version": "8.4.23",
-         "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-         "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
-         "dev": true,
-         "funding": [
-            {
-               "type": "opencollective",
-               "url": "https://opencollective.com/postcss/"
-            },
-            {
-               "type": "tidelift",
-               "url": "https://tidelift.com/funding/github/npm/postcss"
-            },
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/ai"
-            }
-         ],
-         "license": "MIT",
-         "dependencies": {
-            "nanoid": "^3.3.6",
-            "picocolors": "^1.0.0",
-            "source-map-js": "^1.0.2"
-         },
-         "engines": {
-            "node": "^10 || ^12 || >=14"
-         }
-      },
-      "node_modules/postcss-modules-extract-imports": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-         "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-         "dev": true,
-         "license": "ISC",
-         "engines": {
-            "node": "^10 || ^12 || >= 14"
-         },
-         "peerDependencies": {
-            "postcss": "^8.1.0"
-         }
-      },
-      "node_modules/postcss-modules-local-by-default": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-         "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "icss-utils": "^5.0.0",
-            "postcss-selector-parser": "^6.0.2",
-            "postcss-value-parser": "^4.1.0"
-         },
-         "engines": {
-            "node": "^10 || ^12 || >= 14"
-         },
-         "peerDependencies": {
-            "postcss": "^8.1.0"
-         }
-      },
-      "node_modules/postcss-modules-scope": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-         "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "postcss-selector-parser": "^6.0.4"
-         },
-         "engines": {
-            "node": "^10 || ^12 || >= 14"
-         },
-         "peerDependencies": {
-            "postcss": "^8.1.0"
-         }
-      },
-      "node_modules/postcss-modules-values": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-         "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "icss-utils": "^5.0.0"
-         },
-         "engines": {
-            "node": "^10 || ^12 || >= 14"
-         },
-         "peerDependencies": {
-            "postcss": "^8.1.0"
-         }
-      },
-      "node_modules/postcss-selector-parser": {
-         "version": "6.0.12",
-         "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.12.tgz",
-         "integrity": "sha512-NdxGCAZdRrwVI1sy59+Wzrh+pMMHxapGnpfenDVlMEXoOcvt4pGE0JLK9YY2F5dLxcFYA/YbVQKhcGU+FtSYQg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "cssesc": "^3.0.0",
-            "util-deprecate": "^1.0.2"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/postcss-value-parser": {
-         "version": "4.2.0",
-         "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-         "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/postcss/node_modules/nanoid": {
-         "version": "3.3.6",
-         "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-         "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-         "dev": true,
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/ai"
-            }
-         ],
-         "license": "MIT",
-         "bin": {
-            "nanoid": "bin/nanoid.cjs"
-         },
-         "engines": {
-            "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-         }
-      },
-      "node_modules/prettier": {
-         "version": "2.8.8",
-         "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-         "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-         "license": "MIT",
-         "bin": {
-            "prettier": "bin-prettier.js"
-         },
-         "engines": {
-            "node": ">=10.13.0"
-         },
-         "funding": {
-            "url": "https://github.com/prettier/prettier?sponsor=1"
-         }
-      },
-      "node_modules/pretty-error": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
-         "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "lodash": "^4.17.20",
-            "renderkid": "^3.0.0"
-         }
-      },
-      "node_modules/process": {
-         "version": "0.11.10",
-         "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-         "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6.0"
-         }
-      },
-      "node_modules/process-nextick-args": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-         "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-         "license": "MIT"
-      },
-      "node_modules/prompts": {
-         "version": "2.4.2",
-         "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-         "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-         "license": "MIT",
-         "dependencies": {
-            "kleur": "^3.0.3",
-            "sisteransi": "^1.0.5"
-         },
-         "engines": {
-            "node": ">= 6"
-         }
-      },
-      "node_modules/proxy-addr": {
-         "version": "2.0.7",
-         "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-         "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "forwarded": "0.2.0",
-            "ipaddr.js": "1.9.1"
-         },
-         "engines": {
-            "node": ">= 0.10"
-         }
-      },
-      "node_modules/psl": {
-         "version": "1.9.0",
-         "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-         "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-         "license": "MIT"
-      },
-      "node_modules/punycode": {
-         "version": "2.3.0",
-         "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-         "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/qs": {
-         "version": "6.11.0",
-         "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-         "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "side-channel": "^1.0.4"
-         },
-         "engines": {
-            "node": ">=0.6"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/query-string": {
-         "version": "8.1.0",
-         "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.1.0.tgz",
-         "integrity": "sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==",
-         "license": "MIT",
-         "dependencies": {
-            "decode-uri-component": "^0.4.1",
-            "filter-obj": "^5.1.0",
-            "split-on-first": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=14.16"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/queue-microtask": {
-         "version": "1.2.3",
-         "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-         "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/feross"
-            },
-            {
-               "type": "patreon",
-               "url": "https://www.patreon.com/feross"
-            },
-            {
-               "type": "consulting",
-               "url": "https://feross.org/support"
-            }
-         ],
-         "license": "MIT"
-      },
-      "node_modules/randombytes": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-         "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-         "license": "MIT",
-         "dependencies": {
-            "safe-buffer": "^5.1.0"
-         }
-      },
-      "node_modules/range-parser": {
-         "version": "1.2.1",
-         "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-         "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/raw-body": {
-         "version": "2.5.1",
-         "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-         "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "bytes": "3.1.2",
-            "http-errors": "2.0.0",
-            "iconv-lite": "0.4.24",
-            "unpipe": "1.0.0"
-         },
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/raw-body/node_modules/bytes": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-         "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/rc": {
-         "version": "1.2.8",
-         "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-         "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-         "dev": true,
-         "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
-         "dependencies": {
-            "deep-extend": "^0.6.0",
-            "ini": "~1.3.0",
-            "minimist": "^1.2.0",
-            "strip-json-comments": "~2.0.1"
-         },
-         "bin": {
-            "rc": "cli.js"
-         }
-      },
-      "node_modules/rc/node_modules/strip-json-comments": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-         "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/react": {
-         "version": "18.2.0",
-         "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-         "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-         "license": "MIT",
-         "dependencies": {
-            "loose-envify": "^1.1.0"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/react-dev-utils": {
-         "version": "12.0.1",
-         "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
-         "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/code-frame": "^7.16.0",
-            "address": "^1.1.2",
-            "browserslist": "^4.18.1",
-            "chalk": "^4.1.2",
-            "cross-spawn": "^7.0.3",
-            "detect-port-alt": "^1.1.6",
-            "escape-string-regexp": "^4.0.0",
-            "filesize": "^8.0.6",
-            "find-up": "^5.0.0",
-            "fork-ts-checker-webpack-plugin": "^6.5.0",
-            "global-modules": "^2.0.0",
-            "globby": "^11.0.4",
-            "gzip-size": "^6.0.0",
-            "immer": "^9.0.7",
-            "is-root": "^2.1.0",
-            "loader-utils": "^3.2.0",
-            "open": "^8.4.0",
-            "pkg-up": "^3.1.0",
-            "prompts": "^2.4.2",
-            "react-error-overlay": "^6.0.11",
-            "recursive-readdir": "^2.2.2",
-            "shell-quote": "^1.7.3",
-            "strip-ansi": "^6.0.1",
-            "text-table": "^0.2.0"
-         },
-         "engines": {
-            "node": ">=14"
-         }
-      },
-      "node_modules/react-dev-utils/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/react-dev-utils/node_modules/globby": {
-         "version": "11.1.0",
-         "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-         "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-         "license": "MIT",
-         "dependencies": {
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.2.9",
-            "ignore": "^5.2.0",
-            "merge2": "^1.4.1",
-            "slash": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/react-dev-utils/node_modules/immer": {
-         "version": "9.0.21",
-         "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
-         "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
-         "license": "MIT",
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/immer"
-         }
-      },
-      "node_modules/react-dev-utils/node_modules/loader-utils": {
-         "version": "3.2.1",
-         "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
-         "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 12.13.0"
-         }
-      },
-      "node_modules/react-dev-utils/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/react-dom": {
-         "version": "18.2.0",
-         "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-         "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-         "license": "MIT",
-         "dependencies": {
-            "loose-envify": "^1.1.0",
-            "scheduler": "^0.23.0"
-         },
-         "peerDependencies": {
-            "react": "^18.2.0"
-         }
-      },
-      "node_modules/react-error-overlay": {
-         "version": "6.0.11",
-         "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
-         "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
-         "license": "MIT"
-      },
-      "node_modules/react-is": {
-         "version": "18.2.0",
-         "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-         "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/react-shallow-renderer": {
-         "version": "16.15.0",
-         "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
-         "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "object-assign": "^4.1.1",
-            "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
-         },
-         "peerDependencies": {
-            "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
-         }
-      },
-      "node_modules/react-test-renderer": {
-         "version": "18.2.0",
-         "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz",
-         "integrity": "sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "react-is": "^18.2.0",
-            "react-shallow-renderer": "^16.15.0",
-            "scheduler": "^0.23.0"
-         },
-         "peerDependencies": {
-            "react": "^18.2.0"
-         }
-      },
-      "node_modules/readable-stream": {
-         "version": "2.3.8",
-         "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-         "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-         "license": "MIT",
-         "dependencies": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-         }
-      },
-      "node_modules/readable-stream/node_modules/isarray": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-         "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-         "license": "MIT"
-      },
-      "node_modules/readable-stream/node_modules/safe-buffer": {
-         "version": "5.1.2",
-         "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-         "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-         "license": "MIT"
-      },
-      "node_modules/readdirp": {
-         "version": "3.6.0",
-         "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-         "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-         "license": "MIT",
-         "dependencies": {
-            "picomatch": "^2.2.1"
-         },
-         "engines": {
-            "node": ">=8.10.0"
-         }
-      },
-      "node_modules/rechoir": {
-         "version": "0.8.0",
-         "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
-         "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "resolve": "^1.20.0"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         }
-      },
-      "node_modules/recursive-readdir": {
-         "version": "2.2.3",
-         "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
-         "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
-         "license": "MIT",
-         "dependencies": {
-            "minimatch": "^3.0.5"
-         },
-         "engines": {
-            "node": ">=6.0.0"
-         }
-      },
-      "node_modules/recursive-readdir-sync": {
-         "version": "1.0.6",
-         "resolved": "https://registry.npmjs.org/recursive-readdir-sync/-/recursive-readdir-sync-1.0.6.tgz",
-         "integrity": "sha512-QhkBh/V7T3L2m8FrwZEZ/VnSZU35bv7DSy/VlKVfcq10zvwwuxeuDLH7DZYFGHFyXefHchZmsHFLELR7poGjog==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/regenerate": {
-         "version": "1.4.2",
-         "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-         "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-         "license": "MIT"
-      },
-      "node_modules/regenerate-unicode-properties": {
-         "version": "10.1.0",
-         "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
-         "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
-         "license": "MIT",
-         "dependencies": {
-            "regenerate": "^1.4.2"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/regenerator-runtime": {
-         "version": "0.13.11",
-         "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-         "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-         "license": "MIT"
-      },
-      "node_modules/regenerator-transform": {
-         "version": "0.15.1",
-         "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
-         "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/runtime": "^7.8.4"
-         }
-      },
-      "node_modules/regexp.prototype.flags": {
-         "version": "1.5.0",
-         "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
-         "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.2.0",
-            "functions-have-names": "^1.2.3"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/regexpu-core": {
-         "version": "5.3.2",
-         "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
-         "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/regjsgen": "^0.8.0",
-            "regenerate": "^1.4.2",
-            "regenerate-unicode-properties": "^10.1.0",
-            "regjsparser": "^0.9.1",
-            "unicode-match-property-ecmascript": "^2.0.0",
-            "unicode-match-property-value-ecmascript": "^2.1.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/registry-auth-token": {
-         "version": "3.3.2",
-         "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
-         "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "rc": "^1.1.6",
-            "safe-buffer": "^5.0.1"
-         }
-      },
-      "node_modules/registry-url": {
-         "version": "3.1.0",
-         "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
-         "integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "rc": "^1.0.1"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/regjsgen": {
-         "version": "0.5.2",
-         "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
-         "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==",
-         "license": "MIT"
-      },
-      "node_modules/regjsparser": {
-         "version": "0.9.1",
-         "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
-         "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "jsesc": "~0.5.0"
-         },
-         "bin": {
-            "regjsparser": "bin/parser"
-         }
-      },
-      "node_modules/relateurl": {
-         "version": "0.2.7",
-         "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-         "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.10"
-         }
-      },
-      "node_modules/renderkid": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
-         "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "css-select": "^4.1.3",
-            "dom-converter": "^0.2.0",
-            "htmlparser2": "^6.1.0",
-            "lodash": "^4.17.21",
-            "strip-ansi": "^6.0.1"
-         }
-      },
-      "node_modules/request": {
-         "version": "2.88.2",
-         "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-         "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-         "license": "Apache-2.0",
-         "dependencies": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.8.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.6",
-            "extend": "~3.0.2",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.2",
-            "har-validator": "~5.1.3",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.19",
-            "oauth-sign": "~0.9.0",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.2",
-            "safe-buffer": "^5.1.2",
-            "tough-cookie": "~2.5.0",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.3.2"
-         },
-         "engines": {
-            "node": ">= 6"
-         }
-      },
-      "node_modules/request/node_modules/qs": {
-         "version": "6.5.3",
-         "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
-         "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
-         "license": "BSD-3-Clause",
-         "engines": {
-            "node": ">=0.6"
-         }
-      },
-      "node_modules/request/node_modules/uuid": {
-         "version": "3.4.0",
-         "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-         "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-         "license": "MIT",
-         "bin": {
-            "uuid": "bin/uuid"
-         }
-      },
-      "node_modules/require-directory": {
-         "version": "2.1.1",
-         "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-         "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/require-from-string": {
-         "version": "2.0.2",
-         "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-         "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/require-relative": {
-         "version": "0.8.7",
-         "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
-         "integrity": "sha512-AKGr4qvHiryxRb19m3PsLRGuKVAbJLUD7E6eOaHkfKhwc+vSgVOCY5xNvm9EkolBKTOf0GrQAZKLimOCz81Khg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/requires-port": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-         "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/resolve": {
-         "version": "1.22.3",
-         "license": "MIT",
-         "dependencies": {
-            "is-core-module": "^2.12.0",
-            "path-parse": "^1.0.7",
-            "supports-preserve-symlinks-flag": "^1.0.0"
-         },
-         "bin": {
-            "resolve": "bin/resolve"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/resolve-cwd": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-         "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "resolve-from": "^5.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/resolve-dir": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
-         "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
-         "license": "MIT",
-         "dependencies": {
-            "expand-tilde": "^2.0.0",
-            "global-modules": "^1.0.0"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/resolve-dir/node_modules/global-modules": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
-         "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
-         "license": "MIT",
-         "dependencies": {
-            "global-prefix": "^1.0.1",
-            "is-windows": "^1.0.1",
-            "resolve-dir": "^1.0.0"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/resolve-dir/node_modules/global-prefix": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
-         "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
-         "license": "MIT",
-         "dependencies": {
-            "expand-tilde": "^2.0.2",
-            "homedir-polyfill": "^1.0.1",
-            "ini": "^1.3.4",
-            "is-windows": "^1.0.1",
-            "which": "^1.2.14"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/resolve-from": {
-         "version": "5.0.0",
-         "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-         "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/retry": {
-         "version": "0.13.1",
-         "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-         "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 4"
-         }
-      },
-      "node_modules/reusify": {
-         "version": "1.0.4",
-         "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-         "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-         "license": "MIT",
-         "engines": {
-            "iojs": ">=1.0.0",
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/rimraf": {
-         "version": "2.7.1",
-         "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-         "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-         "license": "ISC",
-         "dependencies": {
-            "glob": "^7.1.3"
-         },
-         "bin": {
-            "rimraf": "bin.js"
-         }
-      },
-      "node_modules/rollup": {
-         "version": "3.21.3",
-         "license": "MIT",
-         "bin": {
-            "rollup": "dist/bin/rollup"
-         },
-         "engines": {
-            "node": ">=14.18.0",
-            "npm": ">=8.0.0"
-         },
-         "optionalDependencies": {
-            "fsevents": "~2.3.2"
-         }
-      },
-      "node_modules/rollup-plugin-babel": {
-         "version": "4.4.0",
-         "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz",
-         "integrity": "sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/helper-module-imports": "^7.0.0",
-            "rollup-pluginutils": "^2.8.1"
-         },
-         "peerDependencies": {
-            "@babel/core": "7 || ^7.0.0-rc.2",
-            "rollup": ">=0.60.0 <3"
-         }
-      },
-      "node_modules/rollup-plugin-buble": {
-         "version": "0.19.8",
-         "resolved": "https://registry.npmjs.org/rollup-plugin-buble/-/rollup-plugin-buble-0.19.8.tgz",
-         "integrity": "sha512-8J4zPk2DQdk3rxeZvxgzhHh/rm5nJkjwgcsUYisCQg1QbT5yagW+hehYEW7ZNns/NVbDCTv4JQ7h4fC8qKGOKw==",
-         "license": "MIT",
-         "dependencies": {
-            "buble": "^0.19.8",
-            "rollup-pluginutils": "^2.3.3"
-         }
-      },
-      "node_modules/rollup-plugin-multi-entry": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/rollup-plugin-multi-entry/-/rollup-plugin-multi-entry-2.1.0.tgz",
-         "integrity": "sha512-YVVsI15uvbxMKdeYS5NXQa5zbVr/DYdDBBwseC80+KAc7mqDUjM6Qe4wl+jFucVw1yvBDZFk0PPSBZqoLq8xUA==",
-         "license": "MIT",
-         "dependencies": {
-            "matched": "^1.0.2"
-         }
-      },
-      "node_modules/rollup-plugin-prettier": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/rollup-plugin-prettier/-/rollup-plugin-prettier-3.0.0.tgz",
-         "integrity": "sha512-E0UqeVX1F+ATrHsXKXIywddjK+iFKOeOGI/drZY/wVq/xfHPjghviIhsFz7I0Wfuzp8jeN+4L7kVwQ/X84mOBw==",
-         "license": "MIT",
-         "dependencies": {
-            "@types/prettier": "^1.0.0 || ^2.0.0",
-            "diff": "5.1.0",
-            "lodash.hasin": "4.5.2",
-            "lodash.isempty": "4.4.0",
-            "lodash.isnil": "4.0.0",
-            "lodash.omitby": "4.6.0",
-            "magic-string": "0.26.7"
-         },
-         "engines": {
-            "node": ">=6.0.0"
-         },
-         "peerDependencies": {
-            "prettier": "^1.0.0 || ^2.0.0",
-            "rollup": "^1.0.0 || ^2.0.0 || ^3.0.0"
-         }
-      },
-      "node_modules/rollup-plugin-prettier/node_modules/diff": {
-         "version": "5.1.0",
-         "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
-         "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
-         "license": "BSD-3-Clause",
-         "engines": {
-            "node": ">=0.3.1"
-         }
-      },
-      "node_modules/rollup-plugin-prettier/node_modules/magic-string": {
-         "version": "0.26.7",
-         "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
-         "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
-         "license": "MIT",
-         "dependencies": {
-            "sourcemap-codec": "^1.4.8"
-         },
-         "engines": {
-            "node": ">=12"
-         }
-      },
-      "node_modules/rollup-pluginutils": {
-         "version": "2.8.2",
-         "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
-         "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
-         "license": "MIT",
-         "dependencies": {
-            "estree-walker": "^0.6.1"
-         }
-      },
-      "node_modules/route-parser": {
-         "version": "0.0.5",
-         "resolved": "https://registry.npmjs.org/route-parser/-/route-parser-0.0.5.tgz",
-         "integrity": "sha512-nsii+MXoNb7NyF05LP9kaktx6AoBVT/7zUgDnzIb5IoYAvYkbZOAuoLJjVdsyEVxWv0swCxWkKDK4cMva+WDBA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.9"
-         }
-      },
-      "node_modules/run-parallel": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-         "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/feross"
-            },
-            {
-               "type": "patreon",
-               "url": "https://www.patreon.com/feross"
-            },
-            {
-               "type": "consulting",
-               "url": "https://feross.org/support"
-            }
-         ],
-         "license": "MIT",
-         "dependencies": {
-            "queue-microtask": "^1.2.2"
-         }
-      },
-      "node_modules/safe-buffer": {
-         "version": "5.2.1",
-         "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-         "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-         "funding": [
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/feross"
-            },
-            {
-               "type": "patreon",
-               "url": "https://www.patreon.com/feross"
-            },
-            {
-               "type": "consulting",
-               "url": "https://feross.org/support"
-            }
-         ],
-         "license": "MIT"
-      },
-      "node_modules/safer-buffer": {
-         "version": "2.1.2",
-         "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-         "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-         "license": "MIT"
-      },
-      "node_modules/sass": {
-         "version": "1.62.1",
-         "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
-         "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
-         "license": "MIT",
-         "dependencies": {
-            "chokidar": ">=3.0.0 <4.0.0",
-            "immutable": "^4.0.0",
-            "source-map-js": ">=0.6.2 <2.0.0"
-         },
-         "bin": {
-            "sass": "sass.js"
-         },
-         "engines": {
-            "node": ">=14.0.0"
-         }
-      },
-      "node_modules/sass-loader": {
-         "version": "13.2.2",
-         "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.2.2.tgz",
-         "integrity": "sha512-nrIdVAAte3B9icfBiGWvmMhT/D+eCDwnk+yA7VE/76dp/WkHX+i44Q/pfo71NYbwj0Ap+PGsn0ekOuU1WFJ2AA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "klona": "^2.0.6",
-            "neo-async": "^2.6.2"
-         },
-         "engines": {
-            "node": ">= 14.15.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "fibers": ">= 3.1.0",
-            "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
-            "sass": "^1.3.0",
-            "sass-embedded": "*",
-            "webpack": "^5.0.0"
-         },
-         "peerDependenciesMeta": {
-            "fibers": {
-               "optional": true
-            },
-            "node-sass": {
-               "optional": true
-            },
-            "sass": {
-               "optional": true
-            },
-            "sass-embedded": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/scheduler": {
-         "version": "0.23.0",
-         "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-         "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-         "license": "MIT",
-         "dependencies": {
-            "loose-envify": "^1.1.0"
-         }
-      },
-      "node_modules/schema-utils": {
-         "version": "4.0.1",
-         "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
-         "integrity": "sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/json-schema": "^7.0.9",
-            "ajv": "^8.9.0",
-            "ajv-formats": "^2.1.1",
-            "ajv-keywords": "^5.1.0"
-         },
-         "engines": {
-            "node": ">= 12.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         }
-      },
-      "node_modules/select-hose": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-         "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/selfsigned": {
-         "version": "2.1.1",
-         "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz",
-         "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "node-forge": "^1"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/semver": {
-         "version": "6.3.0",
-         "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-         "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-         "license": "ISC",
-         "bin": {
-            "semver": "bin/semver.js"
-         }
-      },
-      "node_modules/send": {
-         "version": "0.18.0",
-         "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-         "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "debug": "2.6.9",
-            "depd": "2.0.0",
-            "destroy": "1.2.0",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "etag": "~1.8.1",
-            "fresh": "0.5.2",
-            "http-errors": "2.0.0",
-            "mime": "1.6.0",
-            "ms": "2.1.3",
-            "on-finished": "2.4.1",
-            "range-parser": "~1.2.1",
-            "statuses": "2.0.1"
-         },
-         "engines": {
-            "node": ">= 0.8.0"
-         }
-      },
-      "node_modules/serialize-javascript": {
-         "version": "6.0.1",
-         "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-         "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "randombytes": "^2.1.0"
-         }
-      },
-      "node_modules/serve": {
-         "version": "14.2.0",
-         "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.0.tgz",
-         "integrity": "sha512-+HOw/XK1bW8tw5iBilBz/mJLWRzM8XM6MPxL4J/dKzdxq1vfdEWSwhaR7/yS8EJp5wzvP92p1qirysJvnEtjXg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@zeit/schemas": "2.29.0",
-            "ajv": "8.11.0",
-            "arg": "5.0.2",
-            "boxen": "7.0.0",
-            "chalk": "5.0.1",
-            "chalk-template": "0.4.0",
-            "clipboardy": "3.0.0",
-            "compression": "1.7.4",
-            "is-port-reachable": "4.0.0",
-            "serve-handler": "6.1.5",
-            "update-check": "1.5.4"
-         },
-         "bin": {
-            "serve": "build/main.js"
-         },
-         "engines": {
-            "node": ">= 14"
-         }
-      },
-      "node_modules/serve-handler": {
-         "version": "6.1.5",
-         "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
-         "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "bytes": "3.0.0",
-            "content-disposition": "0.5.2",
-            "fast-url-parser": "1.1.3",
-            "mime-types": "2.1.18",
-            "minimatch": "3.1.2",
-            "path-is-inside": "1.0.2",
-            "path-to-regexp": "2.2.1",
-            "range-parser": "1.2.0"
-         }
-      },
-      "node_modules/serve-handler/node_modules/mime-db": {
-         "version": "1.33.0",
-         "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
-         "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/serve-handler/node_modules/mime-types": {
-         "version": "2.1.18",
-         "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
-         "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "mime-db": "~1.33.0"
-         },
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/serve-handler/node_modules/range-parser": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
-         "integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/serve-index": {
-         "version": "1.9.1",
-         "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-         "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "accepts": "~1.3.4",
-            "batch": "0.6.1",
-            "debug": "2.6.9",
-            "escape-html": "~1.0.3",
-            "http-errors": "~1.6.2",
-            "mime-types": "~2.1.17",
-            "parseurl": "~1.3.2"
-         },
-         "engines": {
-            "node": ">= 0.8.0"
-         }
-      },
-      "node_modules/serve-index/node_modules/depd": {
-         "version": "1.1.2",
-         "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-         "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/serve-index/node_modules/http-errors": {
-         "version": "1.6.3",
-         "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-         "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "depd": "~1.1.2",
-            "inherits": "2.0.3",
-            "setprototypeof": "1.1.0",
-            "statuses": ">= 1.4.0 < 2"
-         },
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/serve-index/node_modules/inherits": {
-         "version": "2.0.3",
-         "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-         "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-         "dev": true,
-         "license": "ISC"
-      },
-      "node_modules/serve-index/node_modules/setprototypeof": {
-         "version": "1.1.0",
-         "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-         "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-         "dev": true,
-         "license": "ISC"
-      },
-      "node_modules/serve-index/node_modules/statuses": {
-         "version": "1.5.0",
-         "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-         "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/serve-static": {
-         "version": "1.15.0",
-         "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-         "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "parseurl": "~1.3.3",
-            "send": "0.18.0"
-         },
-         "engines": {
-            "node": ">= 0.8.0"
-         }
-      },
-      "node_modules/serve/node_modules/ajv": {
-         "version": "8.11.0",
-         "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-         "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-         },
-         "funding": {
-            "type": "github",
-            "url": "https://github.com/sponsors/epoberezkin"
-         }
-      },
-      "node_modules/serve/node_modules/chalk": {
-         "version": "5.0.1",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz",
-         "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": "^12.17.0 || ^14.13 || >=16.0.0"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/setimmediate": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-         "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
-      },
-      "node_modules/setprototypeof": {
-         "version": "1.2.0",
-         "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-         "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-         "dev": true,
-         "license": "ISC"
-      },
-      "node_modules/shallow-clone": {
-         "version": "3.0.1",
-         "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
-         "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "kind-of": "^6.0.2"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/shebang-command": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-         "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-         "license": "MIT",
-         "dependencies": {
-            "shebang-regex": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/shebang-regex": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-         "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/shell-quote": {
-         "version": "1.8.1",
-         "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
-         "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
-         "license": "MIT",
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/side-channel": {
-         "version": "1.0.4",
-         "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-         "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-         "license": "MIT",
-         "dependencies": {
-            "call-bind": "^1.0.0",
-            "get-intrinsic": "^1.0.2",
-            "object-inspect": "^1.9.0"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/signal-exit": {
-         "version": "3.0.7",
-         "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-         "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-         "dev": true,
-         "license": "ISC"
-      },
-      "node_modules/sirv": {
-         "version": "1.0.19",
-         "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
-         "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@polka/url": "^1.0.0-next.20",
-            "mrmime": "^1.0.0",
-            "totalist": "^1.0.0"
-         },
-         "engines": {
-            "node": ">= 10"
-         }
-      },
-      "node_modules/sisteransi": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-         "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
-         "license": "MIT"
-      },
-      "node_modules/slash": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-         "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/sockjs": {
-         "version": "0.3.24",
-         "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
-         "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "faye-websocket": "^0.11.3",
-            "uuid": "^8.3.2",
-            "websocket-driver": "^0.7.4"
-         }
-      },
-      "node_modules/source-map": {
-         "version": "0.6.1",
-         "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-         "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-         "license": "BSD-3-Clause",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/source-map-js": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-         "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-         "license": "BSD-3-Clause",
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/source-map-support": {
-         "version": "0.5.21",
-         "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-         "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-         "license": "MIT",
-         "dependencies": {
-            "buffer-from": "^1.0.0",
-            "source-map": "^0.6.0"
-         }
-      },
-      "node_modules/source-map-url": {
-         "version": "0.4.0",
-         "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-         "integrity": "sha512-liJwHPI9x9d9w5WSIjM58MqGmmb7XzNqwdUA3kSBQ4lmDngexlKwawGzK3J1mKXi6+sysoMDlpVyZh9sv5vRfw==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/sourcemap-codec": {
-         "version": "1.4.8",
-         "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-         "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-         "license": "MIT"
-      },
-      "node_modules/spdy": {
-         "version": "4.0.2",
-         "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-         "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "debug": "^4.1.0",
-            "handle-thing": "^2.0.0",
-            "http-deceiver": "^1.2.7",
-            "select-hose": "^2.0.0",
-            "spdy-transport": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=6.0.0"
-         }
-      },
-      "node_modules/spdy-transport": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-         "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "debug": "^4.1.0",
-            "detect-node": "^2.0.4",
-            "hpack.js": "^2.1.6",
-            "obuf": "^1.1.2",
-            "readable-stream": "^3.0.6",
-            "wbuf": "^1.7.3"
-         }
-      },
-      "node_modules/spdy-transport/node_modules/debug": {
-         "version": "4.3.4",
-         "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-         "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ms": "2.1.2"
-         },
-         "engines": {
-            "node": ">=6.0"
-         },
-         "peerDependenciesMeta": {
-            "supports-color": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/spdy-transport/node_modules/ms": {
-         "version": "2.1.2",
-         "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-         "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/spdy-transport/node_modules/readable-stream": {
-         "version": "3.6.2",
-         "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-         "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-         },
-         "engines": {
-            "node": ">= 6"
-         }
-      },
-      "node_modules/spdy-transport/node_modules/string_decoder": {
-         "version": "1.3.0",
-         "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-         "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "safe-buffer": "~5.2.0"
-         }
-      },
-      "node_modules/spdy/node_modules/debug": {
-         "version": "4.3.4",
-         "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-         "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ms": "2.1.2"
-         },
-         "engines": {
-            "node": ">=6.0"
-         },
-         "peerDependenciesMeta": {
-            "supports-color": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/spdy/node_modules/ms": {
-         "version": "2.1.2",
-         "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-         "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/split-on-first": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
-         "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/sprintf-js": {
-         "version": "1.0.3",
-         "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-         "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-         "dev": true,
-         "license": "BSD-3-Clause"
-      },
-      "node_modules/sshpk": {
-         "version": "1.17.0",
-         "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
-         "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
-         "license": "MIT",
-         "dependencies": {
-            "asn1": "~0.2.3",
-            "assert-plus": "^1.0.0",
-            "bcrypt-pbkdf": "^1.0.0",
-            "dashdash": "^1.12.0",
-            "ecc-jsbn": "~0.1.1",
-            "getpass": "^0.1.1",
-            "jsbn": "~0.1.0",
-            "safer-buffer": "^2.0.2",
-            "tweetnacl": "~0.14.0"
-         },
-         "bin": {
-            "sshpk-conv": "bin/sshpk-conv",
-            "sshpk-sign": "bin/sshpk-sign",
-            "sshpk-verify": "bin/sshpk-verify"
-         },
-         "engines": {
-            "node": ">=0.10.0"
-         }
-      },
-      "node_modules/statuses": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-         "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/stop-iteration-iterator": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
-         "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
-         "license": "MIT",
-         "dependencies": {
-            "internal-slot": "^1.0.4"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         }
-      },
-      "node_modules/string_decoder": {
-         "version": "1.1.1",
-         "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-         "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-         "license": "MIT",
-         "dependencies": {
-            "safe-buffer": "~5.1.0"
-         }
-      },
-      "node_modules/string_decoder/node_modules/safe-buffer": {
-         "version": "5.1.2",
-         "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-         "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-         "license": "MIT"
-      },
-      "node_modules/string-width": {
-         "version": "4.2.3",
-         "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-         "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.1"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/strip-ansi": {
-         "version": "6.0.1",
-         "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-         "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-         "license": "MIT",
-         "dependencies": {
-            "ansi-regex": "^5.0.1"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/strip-final-newline": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-         "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/strip-json-comments": {
-         "version": "3.1.1",
-         "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-         "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=8"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/style-loader": {
-         "version": "3.3.2",
-         "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.2.tgz",
-         "integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 12.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "webpack": "^5.0.0"
-         }
-      },
-      "node_modules/supports-color": {
-         "version": "8.1.1",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-         "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/supports-color?sponsor=1"
-         }
-      },
-      "node_modules/supports-preserve-symlinks-flag": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-         "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/svg-url-loader": {
-         "version": "8.0.0",
-         "resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-8.0.0.tgz",
-         "integrity": "sha512-5doSXvl18hY1fGsRLdhWAU5jgzgxJ06/gc/26cpuDnN0xOz1HmmfhkpL29SSrdIvhtxQ1UwGzmk7wTT/l48mKw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "file-loader": "~6.2.0"
-         },
-         "engines": {
-            "node": ">=14"
-         },
-         "peerDependencies": {
-            "webpack": "^5.0.0"
-         }
-      },
-      "node_modules/tapable": {
-         "version": "2.2.1",
-         "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-         "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/terser": {
-         "version": "5.17.1",
-         "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.1.tgz",
-         "integrity": "sha512-hVl35zClmpisy6oaoKALOpS0rDYLxRFLHhRuDlEGTKey9qHjS1w9GMORjuwIMt70Wan4lwsLYyWDVnWgF+KUEw==",
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "@jridgewell/source-map": "^0.3.2",
-            "acorn": "^8.5.0",
-            "commander": "^2.20.0",
-            "source-map-support": "~0.5.20"
-         },
-         "bin": {
-            "terser": "bin/terser"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/terser-webpack-plugin": {
-         "version": "5.3.7",
-         "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz",
-         "integrity": "sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==",
-         "license": "MIT",
-         "dependencies": {
-            "@jridgewell/trace-mapping": "^0.3.17",
-            "jest-worker": "^27.4.5",
-            "schema-utils": "^3.1.1",
-            "serialize-javascript": "^6.0.1",
-            "terser": "^5.16.5"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "webpack": "^5.1.0"
-         },
-         "peerDependenciesMeta": {
-            "@swc/core": {
-               "optional": true
-            },
-            "esbuild": {
-               "optional": true
-            },
-            "uglify-js": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/terser-webpack-plugin/node_modules/ajv": {
-         "version": "6.12.6",
-         "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-         "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-         "license": "MIT",
-         "dependencies": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-         },
-         "funding": {
-            "type": "github",
-            "url": "https://github.com/sponsors/epoberezkin"
-         }
-      },
-      "node_modules/terser-webpack-plugin/node_modules/ajv-keywords": {
-         "version": "3.5.2",
-         "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-         "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-         "license": "MIT",
-         "peerDependencies": {
-            "ajv": "^6.9.1"
-         }
-      },
-      "node_modules/terser-webpack-plugin/node_modules/jest-worker": {
-         "version": "27.5.1",
-         "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-         "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-         "license": "MIT",
-         "dependencies": {
-            "@types/node": "*",
-            "merge-stream": "^2.0.0",
-            "supports-color": "^8.0.0"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         }
-      },
-      "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
-         "version": "0.4.1",
-         "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-         "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-         "license": "MIT"
-      },
-      "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
-         "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
-         "license": "MIT",
-         "dependencies": {
-            "@types/json-schema": "^7.0.8",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         }
-      },
-      "node_modules/terser/node_modules/acorn": {
-         "version": "8.8.2",
-         "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-         "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-         "license": "MIT",
-         "bin": {
-            "acorn": "bin/acorn"
-         },
-         "engines": {
-            "node": ">=0.4.0"
-         }
-      },
-      "node_modules/terser/node_modules/commander": {
-         "version": "2.20.3",
-         "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-         "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-         "license": "MIT"
-      },
-      "node_modules/test-exclude": {
-         "version": "6.0.0",
-         "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-         "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "@istanbuljs/schema": "^0.1.2",
-            "glob": "^7.1.4",
-            "minimatch": "^3.0.4"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/text-table": {
-         "version": "0.2.0",
-         "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-         "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-         "license": "MIT"
-      },
-      "node_modules/thunky": {
-         "version": "1.1.0",
-         "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-         "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/tmpl": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
-         "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
-         "dev": true,
-         "license": "BSD-3-Clause"
-      },
-      "node_modules/to-fast-properties": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-         "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/to-regex-range": {
-         "version": "5.0.1",
-         "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-         "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-         "license": "MIT",
-         "dependencies": {
-            "is-number": "^7.0.0"
-         },
-         "engines": {
-            "node": ">=8.0"
-         }
-      },
-      "node_modules/toidentifier": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-         "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=0.6"
-         }
-      },
-      "node_modules/totalist": {
-         "version": "1.1.0",
-         "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
-         "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=6"
-         }
-      },
-      "node_modules/tough-cookie": {
-         "version": "2.5.0",
-         "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-         "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "psl": "^1.1.28",
-            "punycode": "^2.1.1"
-         },
-         "engines": {
-            "node": ">=0.8"
-         }
-      },
-      "node_modules/traverse": {
-         "version": "0.3.9",
-         "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-         "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/ts-loader": {
-         "version": "9.4.2",
-         "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.2.tgz",
-         "integrity": "sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "chalk": "^4.1.0",
-            "enhanced-resolve": "^5.0.0",
-            "micromatch": "^4.0.0",
-            "semver": "^7.3.4"
-         },
-         "engines": {
-            "node": ">=12.0.0"
-         },
-         "peerDependencies": {
-            "typescript": "*",
-            "webpack": "^5.0.0"
-         }
-      },
-      "node_modules/ts-loader/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/ts-loader/node_modules/lru-cache": {
-         "version": "6.0.0",
-         "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-         "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "yallist": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/ts-loader/node_modules/semver": {
-         "version": "7.5.0",
-         "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
-         "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "lru-cache": "^6.0.0"
-         },
-         "bin": {
-            "semver": "bin/semver.js"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/ts-loader/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/ts-loader/node_modules/yallist": {
-         "version": "4.0.0",
-         "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-         "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-         "dev": true,
-         "license": "ISC"
-      },
-      "node_modules/tslib": {
-         "version": "2.5.0",
-         "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-         "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
-         "dev": true,
-         "license": "0BSD"
-      },
-      "node_modules/tunnel-agent": {
-         "version": "0.6.0",
-         "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-         "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
-         "license": "Apache-2.0",
-         "dependencies": {
-            "safe-buffer": "^5.0.1"
-         },
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/tweetnacl": {
-         "version": "0.14.5",
-         "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-         "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
-         "license": "Unlicense"
-      },
-      "node_modules/type-fest": {
-         "version": "2.19.0",
-         "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-         "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-         "dev": true,
-         "license": "(MIT OR CC0-1.0)",
-         "engines": {
-            "node": ">=12.20"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/type-is": {
-         "version": "1.6.18",
-         "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-         "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "media-typer": "0.3.0",
-            "mime-types": "~2.1.24"
-         },
-         "engines": {
-            "node": ">= 0.6"
-         }
-      },
-      "node_modules/typescript": {
-         "version": "5.0.4",
-         "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
-         "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
-         "license": "Apache-2.0",
-         "bin": {
-            "tsc": "bin/tsc",
-            "tsserver": "bin/tsserver"
-         },
-         "engines": {
-            "node": ">=12.20"
-         }
-      },
-      "node_modules/unicode-canonical-property-names-ecmascript": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
-         "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/unicode-match-property-ecmascript": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
-         "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
-         "license": "MIT",
-         "dependencies": {
-            "unicode-canonical-property-names-ecmascript": "^2.0.0",
-            "unicode-property-aliases-ecmascript": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/unicode-match-property-value-ecmascript": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
-         "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/unicode-property-aliases-ecmascript": {
-         "version": "2.1.0",
-         "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
-         "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "node_modules/universalify": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-         "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-         "license": "MIT",
-         "engines": {
-            "node": ">= 10.0.0"
-         }
-      },
-      "node_modules/unpipe": {
-         "version": "1.0.0",
-         "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-         "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/unzipper": {
-         "version": "0.10.14",
-         "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
-         "integrity": "sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==",
-         "dependencies": {
-            "big-integer": "^1.6.17",
-            "binary": "~0.3.0",
-            "bluebird": "~3.4.1",
-            "buffer-indexof-polyfill": "~1.0.0",
-            "duplexer2": "~0.1.4",
-            "fstream": "^1.0.12",
-            "graceful-fs": "^4.2.2",
-            "listenercount": "~1.0.1",
-            "readable-stream": "~2.3.6",
-            "setimmediate": "~1.0.4"
-         }
-      },
-      "node_modules/update-browserslist-db": {
-         "version": "1.0.11",
-         "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
-         "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
-         "funding": [
-            {
-               "type": "opencollective",
-               "url": "https://opencollective.com/browserslist"
-            },
-            {
-               "type": "tidelift",
-               "url": "https://tidelift.com/funding/github/npm/browserslist"
-            },
-            {
-               "type": "github",
-               "url": "https://github.com/sponsors/ai"
-            }
-         ],
-         "license": "MIT",
-         "dependencies": {
-            "escalade": "^3.1.1",
-            "picocolors": "^1.0.0"
-         },
-         "bin": {
-            "update-browserslist-db": "cli.js"
-         },
-         "peerDependencies": {
-            "browserslist": ">= 4.21.0"
-         }
-      },
-      "node_modules/update-check": {
-         "version": "1.5.4",
-         "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz",
-         "integrity": "sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "registry-auth-token": "3.3.2",
-            "registry-url": "3.1.0"
-         }
-      },
-      "node_modules/uri-js": {
-         "version": "4.4.1",
-         "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-         "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-         "license": "BSD-2-Clause",
-         "dependencies": {
-            "punycode": "^2.1.0"
-         }
-      },
-      "node_modules/url-loader": {
-         "version": "4.1.1",
-         "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
-         "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "loader-utils": "^2.0.0",
-            "mime-types": "^2.1.27",
-            "schema-utils": "^3.0.0"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "file-loader": "*",
-            "webpack": "^4.0.0 || ^5.0.0"
-         },
-         "peerDependenciesMeta": {
-            "file-loader": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/url-loader/node_modules/ajv": {
-         "version": "6.12.6",
-         "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-         "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-         },
-         "funding": {
-            "type": "github",
-            "url": "https://github.com/sponsors/epoberezkin"
-         }
-      },
-      "node_modules/url-loader/node_modules/ajv-keywords": {
-         "version": "3.5.2",
-         "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-         "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-         "dev": true,
-         "license": "MIT",
-         "peerDependencies": {
-            "ajv": "^6.9.1"
-         }
-      },
-      "node_modules/url-loader/node_modules/json-schema-traverse": {
-         "version": "0.4.1",
-         "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-         "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/url-loader/node_modules/schema-utils": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
-         "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/json-schema": "^7.0.8",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         }
-      },
-      "node_modules/util": {
-         "version": "0.12.5",
-         "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
-         "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
-         "license": "MIT",
-         "dependencies": {
-            "inherits": "^2.0.3",
-            "is-arguments": "^1.0.4",
-            "is-generator-function": "^1.0.7",
-            "is-typed-array": "^1.1.3",
-            "which-typed-array": "^1.1.2"
-         }
-      },
-      "node_modules/util-deprecate": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-         "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-         "license": "MIT"
-      },
-      "node_modules/utila": {
-         "version": "0.4.0",
-         "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-         "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/utils-merge": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-         "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.4.0"
-         }
-      },
-      "node_modules/uuid": {
-         "version": "8.3.2",
-         "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-         "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-         "dev": true,
-         "license": "MIT",
-         "bin": {
-            "uuid": "dist/bin/uuid"
-         }
-      },
-      "node_modules/vary": {
-         "version": "1.1.2",
-         "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-         "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 0.8"
-         }
-      },
-      "node_modules/verror": {
-         "version": "1.10.0",
-         "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-         "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
-         "engines": [
-            "node >=0.6.0"
-         ],
-         "license": "MIT",
-         "dependencies": {
-            "assert-plus": "^1.0.0",
-            "core-util-is": "1.0.2",
-            "extsprintf": "^1.2.0"
-         }
-      },
-      "node_modules/verror/node_modules/core-util-is": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-         "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-         "license": "MIT"
-      },
-      "node_modules/verror/node_modules/extsprintf": {
-         "version": "1.4.1",
-         "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
-         "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
-         "engines": [
-            "node >=0.6.0"
-         ],
-         "license": "MIT"
-      },
-      "node_modules/walker": {
-         "version": "1.0.8",
-         "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
-         "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
-         "dev": true,
-         "license": "Apache-2.0",
-         "dependencies": {
-            "makeerror": "1.0.12"
-         }
-      },
-      "node_modules/watchpack": {
-         "version": "2.4.0",
-         "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-         "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-         "license": "MIT",
-         "dependencies": {
-            "glob-to-regexp": "^0.4.1",
-            "graceful-fs": "^4.1.2"
-         },
-         "engines": {
-            "node": ">=10.13.0"
-         }
-      },
-      "node_modules/wbuf": {
-         "version": "1.7.3",
-         "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-         "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "minimalistic-assert": "^1.0.0"
-         }
-      },
-      "node_modules/webpack": {
-         "version": "5.81.0",
-         "license": "MIT",
-         "dependencies": {
-            "@types/eslint-scope": "^3.7.3",
-            "@types/estree": "^1.0.0",
-            "@webassemblyjs/ast": "^1.11.5",
-            "@webassemblyjs/wasm-edit": "^1.11.5",
-            "@webassemblyjs/wasm-parser": "^1.11.5",
-            "acorn": "^8.7.1",
-            "acorn-import-assertions": "^1.7.6",
-            "browserslist": "^4.14.5",
-            "chrome-trace-event": "^1.0.2",
-            "enhanced-resolve": "^5.13.0",
-            "es-module-lexer": "^1.2.1",
-            "eslint-scope": "5.1.1",
-            "events": "^3.2.0",
-            "glob-to-regexp": "^0.4.1",
-            "graceful-fs": "^4.2.9",
-            "json-parse-even-better-errors": "^2.3.1",
-            "loader-runner": "^4.2.0",
-            "mime-types": "^2.1.27",
-            "neo-async": "^2.6.2",
-            "schema-utils": "^3.1.2",
-            "tapable": "^2.1.1",
-            "terser-webpack-plugin": "^5.3.7",
-            "watchpack": "^2.4.0",
-            "webpack-sources": "^3.2.3"
-         },
-         "bin": {
-            "webpack": "bin/webpack.js"
-         },
-         "engines": {
-            "node": ">=10.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependenciesMeta": {
-            "webpack-cli": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/webpack-bundle-analyzer": {
-         "version": "4.8.0",
-         "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz",
-         "integrity": "sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@discoveryjs/json-ext": "0.5.7",
-            "acorn": "^8.0.4",
-            "acorn-walk": "^8.0.0",
-            "chalk": "^4.1.0",
-            "commander": "^7.2.0",
-            "gzip-size": "^6.0.0",
-            "lodash": "^4.17.20",
-            "opener": "^1.5.2",
-            "sirv": "^1.0.7",
-            "ws": "^7.3.1"
-         },
-         "bin": {
-            "webpack-bundle-analyzer": "lib/bin/analyzer.js"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         }
-      },
-      "node_modules/webpack-bundle-analyzer/node_modules/acorn": {
-         "version": "8.8.2",
-         "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-         "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-         "dev": true,
-         "license": "MIT",
-         "bin": {
-            "acorn": "bin/acorn"
-         },
-         "engines": {
-            "node": ">=0.4.0"
-         }
-      },
-      "node_modules/webpack-bundle-analyzer/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "node_modules/webpack-bundle-analyzer/node_modules/commander": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-         "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 10"
-         }
-      },
-      "node_modules/webpack-bundle-analyzer/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "node_modules/webpack-cleanup-plugin": {
-         "version": "0.5.1",
-         "resolved": "https://registry.npmjs.org/webpack-cleanup-plugin/-/webpack-cleanup-plugin-0.5.1.tgz",
-         "integrity": "sha512-K+noogbbNOgve6gB+LVqXda6NJhaZozmhoiNGqq+ia70VY8KFtvVkDgbKTS/JpEbdGST5VbdR90xZonMiPldZw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "lodash.union": "4.6.0",
-            "minimatch": "3.0.3",
-            "recursive-readdir-sync": "1.0.6"
-         }
-      },
-      "node_modules/webpack-cleanup-plugin/node_modules/minimatch": {
-         "version": "3.0.3",
-         "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
-         "integrity": "sha512-NyXjqu1IwcqH6nv5vmMtaG3iw7kdV3g6MwlUBZkc3Vn5b5AMIWYKfptvzipoyFfhlfOgBQ9zoTxQMravF1QTnw==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "brace-expansion": "^1.0.0"
-         },
-         "engines": {
-            "node": "*"
-         }
-      },
-      "node_modules/webpack-cli": {
-         "version": "5.0.2",
-         "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.2.tgz",
-         "integrity": "sha512-4y3W5Dawri5+8dXm3+diW6Mn1Ya+Dei6eEVAdIduAmYNLzv1koKVAqsfgrrc9P2mhrYHQphx5htnGkcNwtubyQ==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@discoveryjs/json-ext": "^0.5.0",
-            "@webpack-cli/configtest": "^2.0.1",
-            "@webpack-cli/info": "^2.0.1",
-            "@webpack-cli/serve": "^2.0.2",
-            "colorette": "^2.0.14",
-            "commander": "^10.0.1",
-            "cross-spawn": "^7.0.3",
-            "envinfo": "^7.7.3",
-            "fastest-levenshtein": "^1.0.12",
-            "import-local": "^3.0.2",
-            "interpret": "^3.1.1",
-            "rechoir": "^0.8.0",
-            "webpack-merge": "^5.7.3"
-         },
-         "bin": {
-            "webpack-cli": "bin/cli.js"
-         },
-         "engines": {
-            "node": ">=14.15.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "webpack": "5.x.x"
-         },
-         "peerDependenciesMeta": {
-            "@webpack-cli/generators": {
-               "optional": true
-            },
-            "webpack-bundle-analyzer": {
-               "optional": true
-            },
-            "webpack-dev-server": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/webpack-combine-loaders": {
-         "version": "2.0.4",
-         "resolved": "https://registry.npmjs.org/webpack-combine-loaders/-/webpack-combine-loaders-2.0.4.tgz",
-         "integrity": "sha512-5O5PYVE5tZ3I3uUm3QB7niLEJzLketl8hvAcJwa4YmwNWS/vixfVsqhtUaBciP8J4u/GwIHV52d7kkgZJFvDnw==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "qs": "^6.5.2"
-         }
-      },
-      "node_modules/webpack-combine-loaders/node_modules/qs": {
-         "version": "6.11.1",
-         "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
-         "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==",
-         "dev": true,
-         "license": "BSD-3-Clause",
-         "dependencies": {
-            "side-channel": "^1.0.4"
-         },
-         "engines": {
-            "node": ">=0.6"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/webpack-dev-middleware": {
-         "version": "5.3.3",
-         "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-         "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "colorette": "^2.0.10",
-            "memfs": "^3.4.3",
-            "mime-types": "^2.1.31",
-            "range-parser": "^1.2.1",
-            "schema-utils": "^4.0.0"
-         },
-         "engines": {
-            "node": ">= 12.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "webpack": "^4.0.0 || ^5.0.0"
-         }
-      },
-      "node_modules/webpack-dev-server": {
-         "version": "4.13.3",
-         "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.13.3.tgz",
-         "integrity": "sha512-KqqzrzMRSRy5ePz10VhjyL27K2dxqwXQLP5rAKwRJBPUahe7Z2bBWzHw37jeb8GCPKxZRO79ZdQUAPesMh/Nug==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "@types/bonjour": "^3.5.9",
-            "@types/connect-history-api-fallback": "^1.3.5",
-            "@types/express": "^4.17.13",
-            "@types/serve-index": "^1.9.1",
-            "@types/serve-static": "^1.13.10",
-            "@types/sockjs": "^0.3.33",
-            "@types/ws": "^8.5.1",
-            "ansi-html-community": "^0.0.8",
-            "bonjour-service": "^1.0.11",
-            "chokidar": "^3.5.3",
-            "colorette": "^2.0.10",
-            "compression": "^1.7.4",
-            "connect-history-api-fallback": "^2.0.0",
-            "default-gateway": "^6.0.3",
-            "express": "^4.17.3",
-            "graceful-fs": "^4.2.6",
-            "html-entities": "^2.3.2",
-            "http-proxy-middleware": "^2.0.3",
-            "ipaddr.js": "^2.0.1",
-            "launch-editor": "^2.6.0",
-            "open": "^8.0.9",
-            "p-retry": "^4.5.0",
-            "rimraf": "^3.0.2",
-            "schema-utils": "^4.0.0",
-            "selfsigned": "^2.1.1",
-            "serve-index": "^1.9.1",
-            "sockjs": "^0.3.24",
-            "spdy": "^4.0.2",
-            "webpack-dev-middleware": "^5.3.1",
-            "ws": "^8.13.0"
-         },
-         "bin": {
-            "webpack-dev-server": "bin/webpack-dev-server.js"
-         },
-         "engines": {
-            "node": ">= 12.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         },
-         "peerDependencies": {
-            "webpack": "^4.37.0 || ^5.0.0"
-         },
-         "peerDependenciesMeta": {
-            "webpack": {
-               "optional": true
-            },
-            "webpack-cli": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/webpack-dev-server/node_modules/ipaddr.js": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
-         "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">= 10"
-         }
-      },
-      "node_modules/webpack-dev-server/node_modules/rimraf": {
-         "version": "3.0.2",
-         "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-         "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "glob": "^7.1.3"
-         },
-         "bin": {
-            "rimraf": "bin.js"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/isaacs"
-         }
-      },
-      "node_modules/webpack-dev-server/node_modules/ws": {
-         "version": "8.13.0",
-         "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-         "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=10.0.0"
-         },
-         "peerDependencies": {
-            "bufferutil": "^4.0.1",
-            "utf-8-validate": ">=5.0.2"
-         },
-         "peerDependenciesMeta": {
-            "bufferutil": {
-               "optional": true
-            },
-            "utf-8-validate": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/webpack-md5-hash": {
-         "version": "0.0.6",
-         "resolved": "https://registry.npmjs.org/webpack-md5-hash/-/webpack-md5-hash-0.0.6.tgz",
-         "integrity": "sha512-HrQ0AJpeXHRa3IjsgyyEfTx8EqYs5y/4x/WklSYsNDcqBixHzCkrmJV5U+4ks+sx7ycKoIdqWLdyuk913FCS+Q==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "md5": "^2.0.0"
-         }
-      },
-      "node_modules/webpack-merge": {
-         "version": "5.8.0",
-         "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
-         "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "clone-deep": "^4.0.1",
-            "wildcard": "^2.0.0"
-         },
-         "engines": {
-            "node": ">=10.0.0"
-         }
-      },
-      "node_modules/webpack-sources": {
-         "version": "3.2.3",
-         "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
-         "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=10.13.0"
-         }
-      },
-      "node_modules/webpack/node_modules/acorn": {
-         "version": "8.8.2",
-         "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-         "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-         "license": "MIT",
-         "bin": {
-            "acorn": "bin/acorn"
-         },
-         "engines": {
-            "node": ">=0.4.0"
-         }
-      },
-      "node_modules/webpack/node_modules/acorn-import-assertions": {
-         "version": "1.8.0",
-         "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
-         "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-         "license": "MIT",
-         "peerDependencies": {
-            "acorn": "^8"
-         }
-      },
-      "node_modules/webpack/node_modules/ajv": {
-         "version": "6.12.6",
-         "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-         "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-         "license": "MIT",
-         "dependencies": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-         },
-         "funding": {
-            "type": "github",
-            "url": "https://github.com/sponsors/epoberezkin"
-         }
-      },
-      "node_modules/webpack/node_modules/ajv-keywords": {
-         "version": "3.5.2",
-         "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-         "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-         "license": "MIT",
-         "peerDependencies": {
-            "ajv": "^6.9.1"
-         }
-      },
-      "node_modules/webpack/node_modules/json-schema-traverse": {
-         "version": "0.4.1",
-         "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-         "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-         "license": "MIT"
-      },
-      "node_modules/webpack/node_modules/schema-utils": {
-         "version": "3.1.2",
-         "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
-         "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
-         "license": "MIT",
-         "dependencies": {
-            "@types/json-schema": "^7.0.8",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-         },
-         "engines": {
-            "node": ">= 10.13.0"
-         },
-         "funding": {
-            "type": "opencollective",
-            "url": "https://opencollective.com/webpack"
-         }
-      },
-      "node_modules/websocket-driver": {
-         "version": "0.7.4",
-         "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-         "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
-         "dev": true,
-         "license": "Apache-2.0",
-         "dependencies": {
-            "http-parser-js": ">=0.5.1",
-            "safe-buffer": ">=5.1.0",
-            "websocket-extensions": ">=0.1.1"
-         },
-         "engines": {
-            "node": ">=0.8.0"
-         }
-      },
-      "node_modules/websocket-extensions": {
-         "version": "0.1.4",
-         "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-         "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
-         "dev": true,
-         "license": "Apache-2.0",
-         "engines": {
-            "node": ">=0.8.0"
-         }
-      },
-      "node_modules/whatwg-fetch": {
-         "version": "3.6.2",
-         "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
-         "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==",
-         "license": "MIT"
-      },
-      "node_modules/which": {
-         "version": "1.3.1",
-         "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-         "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-         "license": "ISC",
-         "dependencies": {
-            "isexe": "^2.0.0"
-         },
-         "bin": {
-            "which": "bin/which"
-         }
-      },
-      "node_modules/which-boxed-primitive": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-         "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-         "license": "MIT",
-         "dependencies": {
-            "is-bigint": "^1.0.1",
-            "is-boolean-object": "^1.1.0",
-            "is-number-object": "^1.0.4",
-            "is-string": "^1.0.5",
-            "is-symbol": "^1.0.3"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/which-collection": {
-         "version": "1.0.1",
-         "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
-         "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
-         "license": "MIT",
-         "dependencies": {
-            "is-map": "^2.0.1",
-            "is-set": "^2.0.1",
-            "is-weakmap": "^2.0.1",
-            "is-weakset": "^2.0.1"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/which-typed-array": {
-         "version": "1.1.9",
-         "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
-         "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
-         "license": "MIT",
-         "dependencies": {
-            "available-typed-arrays": "^1.0.5",
-            "call-bind": "^1.0.2",
-            "for-each": "^0.3.3",
-            "gopd": "^1.0.1",
-            "has-tostringtag": "^1.0.0",
-            "is-typed-array": "^1.1.10"
-         },
-         "engines": {
-            "node": ">= 0.4"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/ljharb"
-         }
-      },
-      "node_modules/widest-line": {
-         "version": "4.0.1",
-         "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
-         "integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "string-width": "^5.0.1"
-         },
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/widest-line/node_modules/ansi-regex": {
-         "version": "6.0.1",
-         "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-         "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-         }
-      },
-      "node_modules/widest-line/node_modules/emoji-regex": {
-         "version": "9.2.2",
-         "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-         "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/widest-line/node_modules/string-width": {
-         "version": "5.1.2",
-         "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-         "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "eastasianwidth": "^0.2.0",
-            "emoji-regex": "^9.2.2",
-            "strip-ansi": "^7.0.1"
-         },
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "node_modules/widest-line/node_modules/strip-ansi": {
-         "version": "7.0.1",
-         "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
-         "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-regex": "^6.0.1"
-         },
-         "engines": {
-            "node": ">=12"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-         }
-      },
-      "node_modules/wildcard": {
-         "version": "2.0.1",
-         "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
-         "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
-         "dev": true,
-         "license": "MIT"
-      },
-      "node_modules/workerpool": {
-         "version": "6.2.1",
-         "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz",
-         "integrity": "sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==",
-         "dev": true,
-         "license": "Apache-2.0"
-      },
-      "node_modules/wrap-ansi": {
-         "version": "7.0.0",
-         "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-         "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "ansi-styles": "^4.0.0",
-            "string-width": "^4.1.0",
-            "strip-ansi": "^6.0.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-         }
-      },
-      "node_modules/wrappy": {
-         "version": "1.0.2",
-         "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-         "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-         "license": "ISC"
-      },
-      "node_modules/write-file-atomic": {
-         "version": "4.0.2",
-         "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
-         "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
-         "dev": true,
-         "license": "ISC",
-         "dependencies": {
-            "imurmurhash": "^0.1.4",
-            "signal-exit": "^3.0.7"
-         },
-         "engines": {
-            "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-         }
-      },
-      "node_modules/ws": {
-         "version": "7.5.9",
-         "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-         "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-         "dev": true,
-         "license": "MIT",
-         "engines": {
-            "node": ">=8.3.0"
-         },
-         "peerDependencies": {
-            "bufferutil": "^4.0.1",
-            "utf-8-validate": "^5.0.2"
-         },
-         "peerDependenciesMeta": {
-            "bufferutil": {
-               "optional": true
-            },
-            "utf-8-validate": {
-               "optional": true
-            }
-         }
-      },
-      "node_modules/y18n": {
-         "version": "5.0.8",
-         "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-         "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-         "dev": true,
-         "license": "ISC",
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/yallist": {
-         "version": "3.1.1",
-         "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-         "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-         "license": "ISC"
-      },
-      "node_modules/yaml": {
-         "version": "1.10.2",
-         "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-         "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-         "license": "ISC",
-         "engines": {
-            "node": ">= 6"
-         }
-      },
-      "node_modules/yargs": {
-         "version": "16.2.0",
-         "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-         "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "cliui": "^7.0.2",
-            "escalade": "^3.1.1",
-            "get-caller-file": "^2.0.5",
-            "require-directory": "^2.1.1",
-            "string-width": "^4.2.0",
-            "y18n": "^5.0.5",
-            "yargs-parser": "^20.2.2"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/yargs-parser": {
-         "version": "20.2.4",
-         "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
-         "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==",
-         "dev": true,
-         "license": "ISC",
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/yargs-unparser": {
-         "version": "2.0.0",
-         "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz",
-         "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==",
-         "dev": true,
-         "license": "MIT",
-         "dependencies": {
-            "camelcase": "^6.0.0",
-            "decamelize": "^4.0.0",
-            "flat": "^5.0.2",
-            "is-plain-obj": "^2.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/yargs/node_modules/yargs-parser": {
-         "version": "20.2.9",
-         "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-         "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-         "dev": true,
-         "license": "ISC",
-         "engines": {
-            "node": ">=10"
-         }
-      },
-      "node_modules/yocto-queue": {
-         "version": "0.1.0",
-         "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-         "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-         "license": "MIT",
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/sponsors/sindresorhus"
-         }
-      },
-      "packages/babel-plugin-transform-cx-imports": {
-         "version": "21.3.0",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/plugin-syntax-jsx": "^7.21.4"
-         },
-         "devDependencies": {
-            "@babel/core": "^7.21.8",
-            "@babel/preset-env": "^7.21.5",
-            "mocha": "^10.2.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0"
-         }
-      },
-      "packages/babel-plugin-transform-cx-jsx": {
-         "version": "21.3.0",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/plugin-syntax-jsx": "^7.21.4"
-         },
-         "devDependencies": {
-            "@babel/core": "^7.21.8",
-            "@babel/preset-env": "^7.21.5",
-            "mocha": "^10.2.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0"
-         }
-      },
-      "packages/babel-preset-cx-env": {
-         "version": "21.3.0",
-         "license": "SEE LICENSE.md",
-         "dependencies": {
-            "@babel/plugin-proposal-function-bind": "^7.18.9",
-            "@babel/plugin-transform-react-jsx": "^7.21.5",
-            "babel-plugin-transform-cx-imports": "^21.3.0",
-            "babel-plugin-transform-cx-jsx": "^21.3.0"
-         },
-         "peerDependencies": {
-            "@babel/core": "^7.0.0-0",
-            "@babel/preset-env": "^7.0.0-0"
-         }
-      },
-      "packages/create-cx-app": {
-         "version": "21.7.0",
-         "license": "MIT",
-         "dependencies": {
-            "cx-cli": "21.6.2"
-         },
-         "bin": {
-            "create-cx-app": "index.js"
-         },
-         "engines": {
-            "node": ">=4.0.0"
-         }
-      },
-      "packages/create-cx-app/node_modules/ansi-styles": {
-         "version": "3.2.1",
-         "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-         "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-         "dependencies": {
-            "color-convert": "^1.9.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "packages/create-cx-app/node_modules/chalk": {
-         "version": "2.4.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-         "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-         "dependencies": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "packages/create-cx-app/node_modules/commander": {
-         "version": "2.20.3",
-         "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-         "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-      },
-      "packages/create-cx-app/node_modules/copy-dir": {
-         "version": "0.3.0",
-         "resolved": "https://registry.npmjs.org/copy-dir/-/copy-dir-0.3.0.tgz",
-         "integrity": "sha512-jKk3Uk5MFmeMOZU+m7TFOxCZZnjezWgb6zXIQtO9c/LKDkmyGA0RO5zl3o2ysxilPGHXY0pqurbUNuZXiUPRCg==",
-         "dependencies": {
-            "mkdir-p": "~0.0.4"
-         }
-      },
-      "packages/create-cx-app/node_modules/cx-cli": {
-         "version": "21.6.2",
-         "resolved": "https://registry.npmjs.org/cx-cli/-/cx-cli-21.6.2.tgz",
-         "integrity": "sha512-e4FVMc/po8+G+qWnIpJscKWPaLIrR7jZtakrdN27fvrwGbhbmTTQgF1WLu2LWde41oahopHcGXuibLJbjZm3Jw==",
-         "dependencies": {
-            "chalk": "^2.1.0",
-            "cli-select": "^1.1.2",
-            "commander": "^2.9.0",
-            "copy-dir": "^0.3.0",
-            "request": "^2.88.2",
-            "unzipper": "^0.10.11"
-         },
-         "bin": {
-            "cx": "index.js"
-         },
-         "engines": {
-            "node": ">=6.0.0"
-         }
-      },
-      "packages/create-cx-app/node_modules/escape-string-regexp": {
-         "version": "1.0.5",
-         "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-         "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-         "engines": {
-            "node": ">=0.8.0"
-         }
-      },
-      "packages/create-cx-app/node_modules/has-flag": {
-         "version": "3.0.0",
-         "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-         "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "packages/create-cx-app/node_modules/supports-color": {
-         "version": "5.5.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-         "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-         "dependencies": {
-            "has-flag": "^3.0.0"
-         },
-         "engines": {
-            "node": ">=4"
-         }
-      },
-      "packages/cx": {
-         "version": "24.0.1",
-         "license": "MIT",
-         "dependencies": {
-            "intl-io": "^0.3.0",
-            "route-parser": "^0.0.5"
-         },
-         "devDependencies": {
-            "react-test-renderer": "^18.2.0"
-         },
-         "peerDependencies": {
-            "@types/react": "*",
-            "react": "*",
-            "react-dom": "*"
-         }
-      },
-      "packages/cx-build-tools": {
-         "version": "21.1.0",
-         "license": "MIT",
-         "dependencies": {
-            "@babel/core": "^7.21.8",
-            "@babel/preset-env": "^7.21.5",
-            "@rollup/plugin-multi-entry": "^6.0.0",
-            "babel-preset-cx-env": "^21.1.1",
-            "prettier": "^2.8.8",
-            "rollup": "^3.21.3",
-            "rollup-plugin-babel": "^4.4.0",
-            "rollup-plugin-buble": "^0.19.8",
-            "rollup-plugin-multi-entry": "^2.1.0",
-            "rollup-plugin-prettier": "^3.0.0",
-            "sass": "^1.62.1"
-         }
-      },
-      "packages/cx-cli": {
-         "version": "23.12.1",
-         "license": "SEE LICENSE.md",
-         "dependencies": {
-            "adm-zip": "^0.5.10",
-            "chalk": "^4.1.2",
-            "cli-select": "^1.1.2",
-            "commander": "^10.0.1",
-            "copy-dir": "^1.3.0",
-            "request": "^2.88.2"
-         },
-         "bin": {
-            "cx": "index.js"
-         },
-         "engines": {
-            "node": ">=6.0.0"
-         }
-      },
-      "packages/cx-cli/node_modules/chalk": {
-         "version": "4.1.2",
-         "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-         "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-         "dependencies": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-         },
-         "engines": {
-            "node": ">=10"
-         },
-         "funding": {
-            "url": "https://github.com/chalk/chalk?sponsor=1"
-         }
-      },
-      "packages/cx-cli/node_modules/supports-color": {
-         "version": "7.2.0",
-         "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-         "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-         "dependencies": {
-            "has-flag": "^4.0.0"
-         },
-         "engines": {
-            "node": ">=8"
-         }
-      },
-      "packages/cx-immer": {
-         "version": "22.3.0",
-         "license": "MIT",
-         "peerDependencies": {
-            "immer": "*"
-         }
-      },
-      "packages/cx-react": {
-         "version": "17.10.1",
-         "license": "MIT",
-         "peerDependencies": {
-            "react": "*",
-            "react-dom": "*"
-         }
-      },
-      "packages/cx-scss-manifest-webpack-plugin": {
-         "version": "18.6.0",
-         "license": "MIT",
-         "peerDependencies": {
-            "cx": "*"
-         }
-      },
-      "packages/cx-theme-aquamarine": {
-         "version": "18.7.3",
-         "license": "SEE LICENSE.md"
-      },
-      "packages/cx-theme-dark": {
-         "version": "18.7.1",
-         "license": "SEE LICENSE.md"
-      },
-      "packages/cx-theme-frost": {
-         "version": "18.7.1",
-         "license": "SEE LICENSE.md"
-      },
-      "packages/cx-theme-material": {
-         "version": "18.7.0",
-         "license": "SEE LICENSE.md"
-      },
-      "packages/cx-theme-material-dark": {
-         "version": "20.1.0",
-         "license": "SEE LICENSE.md"
-      },
-      "packages/cx-theme-space-blue": {
-         "version": "20.11.0",
-         "license": "SEE LICENSE.md"
-      }
-   }
-}
diff --git a/package.json b/package.json
index 6a763b42e..b6a3c67f5 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,9 @@
    "description": "Framework for enterprise JavaScript applications",
    "scripts": {
       "start": "cd docs && webpack-dev-server --config webpack.config.js --open",
-      "test": "mocha --config ./test/mocha.config.js",
+      "test": "yarn workspaces foreach -A --include cx --include babel-plugin-transform-cx-jsx --include babel-plugin-transform-cx-imports run test",
       "docs": "webpack-dev-server --config docs/webpack.config.js --open",
-      "build": "node packages/cx/build/index.js",
+      "build": "yarn workspace cx-react run build && yarn workspace cx run compile && yarn workspace cx run build",
       "build:docs": "webpack --config docs/webpack.config.js",
       "build:docs:root": "webpack --config docs/webpack.config.js",
       "measure:docs": "webpack-dev-server --config docs/webpack.config.js --open",
@@ -21,6 +21,8 @@
       "build:theme:material": "webpack --config themes/material/webpack.config.js",
       "build:theme:marine": "webpack --config themes/marine/webpack.config.js",
       "build:theme:playground": "webpack --config themes/playground/webpack.config.js",
+      "compile:themes": "yarn workspaces foreach -A --include 'cx-theme-*' run compile",
+      "build:themes": "yarn workspaces foreach -A --include 'cx-theme-*' run build",
       "gallery": "webpack-dev-server --config gallery/config/webpack.dev.js --open",
       "build:gallery": "webpack --config gallery/config/webpack.prod.js",
       "build:gallery:root": "webpack --config gallery/config/webpack.prod.js",
@@ -47,7 +49,8 @@
       "gallery",
       "litmus",
       "benchmark",
-      "fiddle"
+      "fiddle",
+      "ts-minimal"
    ],
    "jest": {
       "transform": {
@@ -58,23 +61,23 @@
       ]
    },
    "dependencies": {
-      "@types/react": "^18.3.14",
-      "react": "^18.3.1",
-      "react-dom": "^18.3.1"
+      "@rollup/plugin-node-resolve": "^16.0.3",
+      "@types/react": "^19.2.7",
+      "react": "^19.2.3",
+      "react-dom": "^19.2.3"
    },
    "devDependencies": {
-      "@babel/core": "^7.26.0",
-      "@babel/plugin-transform-react-jsx": "^7.25.9",
-      "@babel/preset-env": "^7.26.0",
-      "@babel/register": "^7.25.9",
-      "babel-jest": "29.7.0",
+      "@babel/core": "^7.28.5",
+      "@babel/plugin-transform-react-jsx": "^7.27.1",
+      "@babel/preset-env": "^7.28.5",
+      "@babel/register": "^7.28.3",
       "env-test": "^1.0.0",
-      "mocha": "^10.8.2",
       "prettier": "^3.3.3",
-      "webpack-dev-server": "^5.1.0"
+      "webpack-dev-server": "^5.2.2"
    },
    "resolutions": {
-      "@babel/helper-define-polyfill-provider": "^0.1.5"
+      "@babel/helper-define-polyfill-provider": "^0.1.5",
+      "chalk": "^4.1.2"
    },
    "packageManager": "yarn@4.4.1+sha512.f825273d0689cc9ead3259c14998037662f1dcd06912637b21a450e8da7cfeb4b1965bbee73d16927baa1201054126bc385c6f43ff4aa705c8631d26e12460f1"
 }
diff --git a/packages/babel-plugin-transform-cx-imports/index.js b/packages/babel-plugin-transform-cx-imports/index.js
index 00709b0c9..6354d703e 100644
--- a/packages/babel-plugin-transform-cx-imports/index.js
+++ b/packages/babel-plugin-transform-cx-imports/index.js
@@ -1,6 +1,6 @@
 "use strict";
 
-var manifest = require('cx/manifest.js');
+var manifest = require("cx/manifest.js");
 
 // let manifest = {
 //    'widgets/TextField': {
@@ -9,42 +9,44 @@ var manifest = require('cx/manifest.js');
 //    }
 // };
 
-module.exports = function(options, o1) {
+module.exports = function (options, o1) {
    var t = options.types;
 
    return {
       visitor: {
          ImportDeclaration(path, scope) {
-
             var opts = scope.opts;
             var src = path.node.source.value;
             var importScss = opts.sass || opts.scss;
 
-            if (src.indexOf("cx/") == 0 && src.indexOf('cx/src/') != 0) {
+            if (src.startsWith("cx/") && !src.endsWith(".js")) {
                var remainder = src.substring(3);
 
                if (opts.useSrc) {
                   var imports = [];
                   path.node.specifiers.forEach(function (s) {
-                     var expanded = remainder + '/' + s.imported.name;
+                     var expanded = remainder + "/" + s.imported.name;
+                     //console.log("FULL:", expanded);
+                     //console.log("SRC:", src);
                      var srcFile = manifest[expanded];
                      if (srcFile) {
-                        if (srcFile.js)
-                           imports.push(t.importDeclaration([s], t.stringLiteral('cx/' + srcFile.js)));
+                        if (srcFile.js) {
+                           imports.push(t.importDeclaration([s], t.stringLiteral("cx/" + srcFile.js)));
+                           //console.log("RESOLVED:", srcFile.js);
+                        }
 
                         if (srcFile.scss && importScss) {
-                           imports.push(t.importDeclaration([], t.stringLiteral('cx/' + srcFile.scss)));
+                           imports.push(t.importDeclaration([], t.stringLiteral("cx/" + srcFile.scss)));
                         }
-                     }
-                     else {
-                        throw new Error(`Cx import ${s.imported.name} not found in package ${remainder}.`)
+                     } else {
+                        throw new Error(`Cx import ${s.imported.name} not found in folder ${remainder}.`);
                      }
                   });
 
                   path.replaceWithMultiple(imports);
                }
             }
-         }
-      }
-   }
+         },
+      },
+   };
 };
diff --git a/packages/babel-plugin-transform-cx-imports/package.json b/packages/babel-plugin-transform-cx-imports/package.json
index d130d63d6..e8cbcd196 100644
--- a/packages/babel-plugin-transform-cx-imports/package.json
+++ b/packages/babel-plugin-transform-cx-imports/package.json
@@ -1,17 +1,17 @@
 {
    "name": "babel-plugin-transform-cx-imports",
-   "version": "24.0.0",
+   "version": "26.1.0",
    "description": "Rewrite Cx imports for simplicity and optimal output size.",
    "repository": "https://github.com/codaxy/cxjs",
    "author": "Codaxy",
    "license": "MIT",
    "main": "index.js",
    "dependencies": {
-      "@babel/plugin-syntax-jsx": "^7.25.9"
+      "@babel/plugin-syntax-jsx": "^7.27.1"
    },
    "devDependencies": {
-      "@babel/core": "^7.26.0",
-      "@babel/preset-env": "^7.26.0",
+      "@babel/core": "^7.28.5",
+      "@babel/preset-env": "^7.28.5",
       "mocha": "^10.8.2"
    },
    "peerDependencies": {
diff --git a/packages/babel-plugin-transform-cx-imports/test.js b/packages/babel-plugin-transform-cx-imports/test.js
index 9d1654f45..947a59669 100644
--- a/packages/babel-plugin-transform-cx-imports/test.js
+++ b/packages/babel-plugin-transform-cx-imports/test.js
@@ -1,8 +1,8 @@
 "use strict";
 
-var babel  = require("@babel/core"),
+var babel = require("@babel/core"),
    plugin = require("./index"),
-   assert = require('assert');
+   assert = require("assert");
 
 function unwrap(code) {
    return code.substring(0, code.length - 1);
@@ -10,69 +10,63 @@ function unwrap(code) {
 }
 
 function lines(code) {
-   return unwrap(code).split('\n');
+   return unwrap(code).split("\n");
 }
 
-describe('babel-plugin-transform-cx-imports', function() {
-
+describe("babel-plugin-transform-cx-imports", function () {
    it("skips non-cx import", function () {
-
       let code = `import _ from "lodash"`;
 
       let output = babel.transform(code, {
-         plugins: [plugin]
+         plugins: [plugin],
       }).code;
 
       assert.equal(unwrap(output), 'import _ from "lodash"');
    });
 
    it("supports multiple imports", function () {
-
       let code = `import { Widget, VDOM } from "cx/ui"`;
 
       let output = babel.transform(code, {
-         plugins: [plugin]
+         plugins: [plugin],
       }).code;
 
       assert.equal(unwrap(output), 'import { Widget, VDOM } from "cx/ui"');
    });
 
    it("imports Cx widgets from source", function () {
-
       let code = `import {TextField} from "cx/widgets"`;
 
       let output = babel.transform(code, {
-         plugins: [[plugin, { useSrc: true }]]
+         plugins: [[plugin, { useSrc: true }]],
       }).code;
 
-      assert.equal(unwrap(output), 'import { TextField } from "cx/src/widgets/form/TextField.js"');
+      assert.equal(unwrap(output), 'import { TextField } from "cx/widgets/form/TextField.js"');
    });
 
-   it("imports scss file if available and option is set", function () {
-
+   it.skip("imports scss file if available and option is set", function () {
       let code = `import {TextField} from "cx/widgets"`;
 
       let output = babel.transform(code, {
-         plugins: [[plugin, { useSrc: true, scss: true }]]
+         plugins: [[plugin, { useSrc: true, scss: true }]],
       }).code;
 
       assert.deepEqual(lines(output), [
-         'import { TextField } from "cx/src/widgets/form/TextField.js";',
-         'import "cx/src/widgets/form/TextField.scss"'
+         'import { TextField } from "cx/widgets/form/TextField.js";',
+         'import "cx/widgets/form/TextField.scss"',
       ]);
    });
 
    it("imports multiple things from source", function () {
-
       let code = `import { Text, TextField } from "cx/widgets"`;
 
       let output = babel.transform(code, {
-         plugins: [[plugin, { useSrc: true }]]
+         plugins: [[plugin, { useSrc: true }]],
       }).code;
 
       assert.deepEqual(lines(output), [
-         'import { Text } from "cx/src/ui/Text.js";',
-         'import { TextField } from "cx/src/widgets/form/TextField.js"'
+         'import { Text } from "cx/ui/Text.js";',
+         'import { TextField } from "cx/widgets/form/TextField.js"',
       ]);
    });
 });
diff --git a/packages/babel-plugin-transform-cx-jsx/package.json b/packages/babel-plugin-transform-cx-jsx/package.json
index 9ebcbaa58..b763cb8a0 100644
--- a/packages/babel-plugin-transform-cx-jsx/package.json
+++ b/packages/babel-plugin-transform-cx-jsx/package.json
@@ -1,17 +1,17 @@
 {
    "name": "babel-plugin-transform-cx-jsx",
-   "version": "24.0.0",
+   "version": "26.1.0",
    "description": "Transpile JSX into Cx config objects",
    "repository": "https://github.com/codaxy/cxjs",
    "author": "Codaxy",
    "license": "MIT",
    "main": "index.js",
    "dependencies": {
-      "@babel/plugin-syntax-jsx": "^7.25.9"
+      "@babel/plugin-syntax-jsx": "^7.27.1"
    },
    "devDependencies": {
-      "@babel/core": "^7.26.0",
-      "@babel/preset-env": "^7.26.0",
+      "@babel/core": "^7.28.5",
+      "@babel/preset-env": "^7.28.5",
       "mocha": "^10.8.2"
    },
    "peerDependencies": {
diff --git a/packages/babel-preset-cx-env/package.json b/packages/babel-preset-cx-env/package.json
index a26ac2497..aa6714486 100644
--- a/packages/babel-preset-cx-env/package.json
+++ b/packages/babel-preset-cx-env/package.json
@@ -1,15 +1,15 @@
 {
    "name": "babel-preset-cx-env",
-   "version": "24.0.0",
+   "version": "26.1.0",
    "description": "Babel preset for CxJS apps",
    "main": "./index.js",
    "author": "Codaxy",
    "license": "SEE LICENSE.md",
    "dependencies": {
-      "@babel/plugin-proposal-function-bind": "^7.25.9",
-      "@babel/plugin-transform-react-jsx": "^7.25.9",
-      "babel-plugin-transform-cx-imports": "^21.3.0",
-      "babel-plugin-transform-cx-jsx": "^21.3.0"
+      "@babel/plugin-proposal-function-bind": "^7.27.1",
+      "@babel/plugin-transform-react-jsx": "^7.27.1",
+      "babel-plugin-transform-cx-imports": "^26.1.0",
+      "babel-plugin-transform-cx-jsx": "^26.1.0"
    },
    "peerDependencies": {
       "@babel/core": "^7.0.0-0",
diff --git a/packages/cx-build-tools/README.md b/packages/cx-build-tools/README.md
new file mode 100644
index 000000000..e41fbed03
--- /dev/null
+++ b/packages/cx-build-tools/README.md
@@ -0,0 +1,197 @@
+# cx-build-tools
+
+Build tools for creating CxJS themes and component packages.
+
+## Installation
+
+```bash
+npm install cx-build-tools --save-dev
+# or
+yarn add cx-build-tools -D
+```
+
+## Available Tools
+
+### getPathResolver
+
+Creates a path resolver function for consistent path references.
+
+```javascript
+const getPathResolver = require("cx-build-tools/getPathResolver");
+
+const resolvePath = getPathResolver(__dirname);
+const srcPath = resolvePath("src");
+const distPath = resolvePath("dist");
+```
+
+### buildJS
+
+Bundles JavaScript/TypeScript output using Rollup.
+
+```javascript
+const buildJS = require("cx-build-tools/buildJS");
+
+await buildJS(
+   srcPath,      // Source directory
+   distPath,     // Output directory
+   entries,      // Entry configurations
+   paths,        // Import path mappings (optional)
+   externals     // External modules (optional)
+);
+```
+
+### buildSCSS
+
+Compiles SCSS files into CSS.
+
+```javascript
+const buildSCSS = require("cx-build-tools/buildSCSS");
+
+await buildSCSS(
+   ["src/variables.scss", "src/styles.scss"],  // Input files
+   "dist/output.css"                            // Output file
+);
+```
+
+Supports `~cx/` prefix for importing CxJS styles:
+```scss
+@import "~cx/widgets/Button";
+```
+
+## Building a Theme
+
+### Project Structure
+
+```
+cx-theme-mytheme/
+├── src/
+│   ├── index.ts          # Theme overrides
+│   └── variables.scss    # SCSS variables
+├── build/                # TypeScript output
+├── dist/                 # Final output
+├── build.js
+├── package.json
+└── tsconfig.json
+```
+
+### package.json
+
+```json
+{
+   "name": "cx-theme-mytheme",
+   "version": "1.0.0",
+   "main": "./build/index.js",
+   "types": "./build/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./build/index.d.ts",
+         "default": "./build/index.js"
+      },
+      "./dist/": "./dist/"
+   },
+   "sideEffects": true,
+   "scripts": {
+      "compile": "tsc",
+      "build": "node build"
+   },
+   "peerDependencies": {
+      "cx": "*"
+   },
+   "devDependencies": {
+      "cx-build-tools": "*",
+      "typescript": "^5.0.0"
+   }
+}
+```
+
+### Recommended Scripts
+
+- **`compile`** - Compiles TypeScript source to the `build/` folder
+- **`build`** - Bundles JS and compiles SCSS to the `dist/` folder
+
+Run in sequence:
+```bash
+yarn compile && yarn build
+```
+
+### build.js
+
+```javascript
+const getPathResolver = require("cx-build-tools/getPathResolver");
+const buildJS = require("cx-build-tools/buildJS");
+const buildSCSS = require("cx-build-tools/buildSCSS");
+const fs = require("fs");
+
+const theme = getPathResolver(__dirname);
+const themeSrc = getPathResolver(theme("src"));
+const themeBuild = getPathResolver(theme("build"));
+
+// Ensure dist folder exists
+if (!fs.existsSync(theme("dist"))) {
+   fs.mkdirSync(theme("dist"));
+}
+
+async function build() {
+   await Promise.all([
+      buildJS(
+         theme("src"),
+         theme("dist"),
+         [{
+            name: "index",
+            options: { input: [themeBuild("index.js")] },
+            output: {}
+         }],
+         null,
+         ["cx/ui", "cx/widgets"]
+      ),
+      buildSCSS(
+         [themeSrc("variables.scss")],
+         theme("dist/theme.css")
+      )
+   ]);
+}
+
+build().catch(console.error);
+```
+
+### src/index.ts
+
+```typescript
+import { Localization } from "cx/ui";
+
+export function applyThemeOverrides() {
+   Localization.override("cx/widgets/Dropdown", {
+      arrow: false
+   });
+}
+
+applyThemeOverrides();
+```
+
+## Building a Component Package
+
+For packages with custom CxJS components:
+
+```javascript
+const getPathResolver = require("cx-build-tools/getPathResolver");
+const buildJS = require("cx-build-tools/buildJS");
+
+const pkg = getPathResolver(__dirname);
+const pkgBuild = getPathResolver(pkg("build"));
+
+async function build() {
+   await buildJS(
+      pkg("src"),
+      pkg("dist"),
+      [{
+         name: "index",
+         options: { input: [pkgBuild("index.js")] },
+         output: {}
+      }],
+      null,
+      ["cx/ui", "cx/widgets", "cx/util"]  // Mark cx imports as external
+   );
+}
+
+build().catch(console.error);
+```
diff --git a/packages/cx-build-tools/babel.config.js b/packages/cx-build-tools/babel.config.js
index ffb2a0a99..cc6543894 100644
--- a/packages/cx-build-tools/babel.config.js
+++ b/packages/cx-build-tools/babel.config.js
@@ -5,10 +5,13 @@ module.exports = {
       [
          "@babel/preset-env",
          {
-            loose: true,
             modules: false,
+            targets: {
+               chrome: "79"
+            }
          },
       ],
+      "@babel/preset-typescript",
    ],
    plugins: [
       //"@babel/external-helpers",
diff --git a/packages/cx-build-tools/buildJS.js b/packages/cx-build-tools/buildJS.js
index f89facfea..81ece4f8e 100644
--- a/packages/cx-build-tools/buildJS.js
+++ b/packages/cx-build-tools/buildJS.js
@@ -1,7 +1,7 @@
 let rollup = require("rollup"),
-   path = require("path"),
    fs = require("fs"),
    babel = require("@rollup/plugin-babel"),
+   { nodeResolve } = require("@rollup/plugin-node-resolve"),
    babelConfig = require("./babel.config"),
    importAlias = require("./importAlias"),
    manifestRecorder = require("./manifestRecorder"),
@@ -10,6 +10,8 @@ let rollup = require("rollup"),
 
 module.exports = function build(srcPath, distPath, entries, paths, externals) {
    let src = getPathResolver(srcPath);
+   let build = getPathResolver(src("../build"));
+   if (!fs.existsSync(build("."))) build = null;
    let dist = getPathResolver(distPath);
    let manifest = {};
 
@@ -37,25 +39,35 @@ module.exports = function build(srcPath, distPath, entries, paths, externals) {
             },
             plugins: [],
          },
-         e.options
+         e.options,
       );
 
       options.plugins.push(
+         nodeResolve({
+            extensions: [".js", ".jsx", ".ts", ".tsx"],
+         }),
          babel({
             babelHelpers: "bundled",
-            presets: babelConfig.presets,
-            plugins: [...babelConfig.plugins, manifestRecorder(manifest, paths, src("."))],
+            //presets: babelConfig.presets,
+            plugins: [
+               //...babelConfig.plugins,
+               manifestRecorder(manifest, paths, (build ?? src)(".")),
+            ],
+            extensions: [
+               ".js",
+               //".jsx", ".ts", ".tsx"
+            ],
          }),
          importAlias({
             paths: paths,
-            path: srcPath, //src('./' + e.name + '/')
+            path: build("."), //src('./' + e.name + '/')
          }),
          prettier({
             tabWidth: 2,
             printWidth: 120,
             useTabs: true,
             parser: "babel",
-         })
+         }),
          //buble(),
       );
 
diff --git a/packages/cx-build-tools/buildSCSS.js b/packages/cx-build-tools/buildSCSS.js
index 082d04298..6c5dc2a81 100644
--- a/packages/cx-build-tools/buildSCSS.js
+++ b/packages/cx-build-tools/buildSCSS.js
@@ -1,9 +1,12 @@
 let fs = require("fs"),
+   path = require("path"),
    renderSCSS = require("./renderSCSS");
 
 module.exports = async function buildSCSS(paths, output) {
    try {
       let result = await renderSCSS(paths);
+      let dir = path.dirname(output);
+      if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
       fs.writeFileSync(output, result.css);
       console.log("CSS", output, `${(result.css.length / 1024).toFixed(1)} kB`);
    } catch (err) {
diff --git a/packages/cx-build-tools/copyFiles.js b/packages/cx-build-tools/copyFiles.js
new file mode 100644
index 000000000..0602e113e
--- /dev/null
+++ b/packages/cx-build-tools/copyFiles.js
@@ -0,0 +1,67 @@
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * Syncs files matching a pattern from source to destination directory.
+ * Copies files from src to dest and removes files in dest that don't exist in src.
+ * @param {string} srcDir - Source directory path
+ * @param {string} destDir - Destination directory path
+ * @param {string|RegExp} pattern - File extension (e.g., '.scss') or RegExp to match
+ */
+function copyFiles(srcDir, destDir, pattern) {
+   const matcher =
+      typeof pattern === "string" ? (name) => name.endsWith(pattern) : (name) => pattern.test(name);
+
+   // Collect all matching files in src
+   const srcFiles = new Set();
+
+   function collectSrcFiles(currentSrc, relativePath) {
+      if (!fs.existsSync(currentSrc)) return;
+      const entries = fs.readdirSync(currentSrc, { withFileTypes: true });
+      for (const entry of entries) {
+         const entryRelativePath = path.join(relativePath, entry.name);
+         if (entry.isDirectory()) {
+            collectSrcFiles(path.join(currentSrc, entry.name), entryRelativePath);
+         } else if (matcher(entry.name)) {
+            srcFiles.add(entryRelativePath);
+         }
+      }
+   }
+
+   // Copy files from src to dest
+   function copyRecursive(currentSrc, currentDest, relativePath) {
+      if (!fs.existsSync(currentSrc)) return;
+      const entries = fs.readdirSync(currentSrc, { withFileTypes: true });
+      for (const entry of entries) {
+         const srcPath = path.join(currentSrc, entry.name);
+         const destPath = path.join(currentDest, entry.name);
+         if (entry.isDirectory()) {
+            copyRecursive(srcPath, destPath, path.join(relativePath, entry.name));
+         } else if (matcher(entry.name)) {
+            fs.mkdirSync(currentDest, { recursive: true });
+            fs.copyFileSync(srcPath, destPath);
+         }
+      }
+   }
+
+   // Remove files in dest that don't exist in src
+   function removeOrphans(currentDest, relativePath) {
+      if (!fs.existsSync(currentDest)) return;
+      const entries = fs.readdirSync(currentDest, { withFileTypes: true });
+      for (const entry of entries) {
+         const destPath = path.join(currentDest, entry.name);
+         const entryRelativePath = path.join(relativePath, entry.name);
+         if (entry.isDirectory()) {
+            removeOrphans(destPath, entryRelativePath);
+         } else if (matcher(entry.name) && !srcFiles.has(entryRelativePath)) {
+            fs.unlinkSync(destPath);
+         }
+      }
+   }
+
+   collectSrcFiles(srcDir, "");
+   copyRecursive(srcDir, destDir, "");
+   removeOrphans(destDir, "");
+}
+
+module.exports = copyFiles;
diff --git a/packages/cx-build-tools/manifestRecorder.js b/packages/cx-build-tools/manifestRecorder.js
index 73e253a7b..7023f5864 100644
--- a/packages/cx-build-tools/manifestRecorder.js
+++ b/packages/cx-build-tools/manifestRecorder.js
@@ -1,49 +1,39 @@
-var fs = require('fs'),
-   pathResolve = require('./pathResolve'),
-   fixPathSeparators = require(('./fixPathSeparators')),
-   p = require('path')
-
+var fs = require("fs"),
+   pathResolve = require("./pathResolve"),
+   fixPathSeparators = require("./fixPathSeparators"),
+   p = require("path");
 
 module.exports = function (manifest, paths, pkgSrc) {
-
    var imports = {};
 
    return function () {
       return {
          visitor: {
-
             ImportDeclaration: function (path, scope) {
-               path.node.specifiers.forEach(spec=>{
+               path.node.specifiers.forEach((spec) => {
                   var fileName = fixPathSeparators(scope.file.opts.filename);
                   var localImports = imports[fileName];
-                  if (!localImports)
-                     localImports = imports[fileName] = {};
-                  var resolvedPath = pathResolve(
-                     p.dirname(scope.file.opts.filename),
-                     path.node.source.value
-                  );
-                  if (!/\.js^/.test(resolvedPath))
-                     resolvedPath += '.js';
+                  if (!localImports) localImports = imports[fileName] = {};
+                  var resolvedPath = pathResolve(p.dirname(scope.file.opts.filename), path.node.source.value);
+                  if (!/\.(js|jsx)^/.test(resolvedPath)) resolvedPath += ".js";
                   localImports[spec.local.name] = resolvedPath;
                });
             },
 
             ExportNamedDeclaration: function (path, scope) {
-
                let names = [];
 
                if (path.node.specifiers) {
-                  path.node.specifiers.forEach(s => {
+                  path.node.specifiers.forEach((s) => {
                      names.push(s.exported.name);
                   });
                }
 
                if (path.node.declaration) {
-                  if (path.node.declaration.id)
-                     names.push(path.node.declaration.id.name);
+                  if (path.node.declaration.id) names.push(path.node.declaration.id.name);
 
                   if (path.node.declaration.declarations) {
-                     path.node.declaration.declarations.forEach(decl => {
+                     path.node.declaration.declarations.forEach((decl) => {
                         if (decl.id) {
                            names.push(decl.id.name);
                         }
@@ -51,7 +41,7 @@ module.exports = function (manifest, paths, pkgSrc) {
                   }
                }
 
-               names.forEach(name=> {
+               names.forEach((name) => {
                   let path = fixPathSeparators(scope.file.opts.filename),
                      srcPath = path;
 
@@ -61,26 +51,25 @@ module.exports = function (manifest, paths, pkgSrc) {
 
                   for (var key in paths) {
                      if (path.indexOf(key) == 0) {
-                        var jsPath = 'src/' + srcPath.substring(pkgSrc.length + 1);
+                        var jsPath = srcPath.substring(pkgSrc.length + 1);
 
-                        var expName = paths[key].substring(3) + '/' + name;
+                        var expName = paths[key].substring(3) + "/" + name;
 
-                        if (!manifest[expName])
-                           manifest[expName] = {};
+                        if (!manifest[expName]) manifest[expName] = {};
 
                         if (!manifest[expName].js) {
                            manifest[expName].js = jsPath;
 
-                           if (fs.existsSync(srcPath.replace(/\.js$/, '.scss')))
-                              manifest[expName].scss = jsPath.replace(/\.js$/, '.scss');
+                           if (fs.existsSync(srcPath.replace(/\.js(x)?$/, ".scss")))
+                              manifest[expName].scss = jsPath.replace(/\.js(x)?$/, ".scss");
                         }
 
                         break;
                      }
                   }
                });
-            }
-         }
-      }
-   }
+            },
+         },
+      };
+   };
 };
diff --git a/packages/cx-build-tools/package.json b/packages/cx-build-tools/package.json
index 2e127d886..79b60bd62 100644
--- a/packages/cx-build-tools/package.json
+++ b/packages/cx-build-tools/package.json
@@ -11,9 +11,11 @@
    },
    "homepage": "https://github.com/codaxy/cxjs",
    "dependencies": {
-      "@babel/core": "^7.26.0",
-      "@babel/preset-env": "^7.26.0",
-      "@rollup/plugin-babel": "^6.0.4",
+      "@babel/core": "^7.28.5",
+      "@babel/preset-env": "^7.28.5",
+      "@babel/preset-typescript": "^7.28.5",
+      "@rollup/plugin-babel": "^6.1.0",
+      "@rollup/plugin-node-resolve": "^16.0.3",
       "babel-preset-cx-env": "^24.0.0",
       "prettier": "^3.3.3",
       "rollup": "^4.28.1",
diff --git a/packages/cx-build-tools/renderSCSS.js b/packages/cx-build-tools/renderSCSS.js
index f15e90210..6806e33fd 100644
--- a/packages/cx-build-tools/renderSCSS.js
+++ b/packages/cx-build-tools/renderSCSS.js
@@ -1,30 +1,39 @@
-var sass = require("sass"),
-   path = require("path");
+const sass = require("sass");
+const path = require("path");
 
-function getImport(path) {
-   return `@import "${path}";`;
+function getImport(importPath) {
+   return `@import "${importPath}";`;
 }
 
-module.exports = function renderSCSS(paths) {
-   return new Promise((resolve, reject) => {
-      let data = paths.map(getImport).join("\n");
-      sass.render(
-         {
-            data,
-            importer: function (name, prev, done) {
-               if (name.indexOf("~cx/") == 0) {
-                  let resolvedFile = path.resolve(__dirname, "../cx/" + name.substring(4) + ".scss");
-                  return {
-                     file: resolvedFile,
-                  };
-               }
-               return { file: name };
+module.exports = async function renderSCSS(paths) {
+   try {
+      const data = paths.map(getImport).join("\n");
+
+      const result = await sass.compileStringAsync(data, {
+         importers: [
+            {
+               findFileUrl(url) {
+                  if (url.startsWith("~cx/")) {
+                     const resolvedFile = path.resolve(__dirname, "../cx/" + url.substring(4) + ".scss");
+                     return new URL(`file://${resolvedFile.replace(/\\/g, "/")}`);
+                  }
+                  // Handle absolute paths (Unix-style starting with /)
+                  if (url.startsWith("/")) {
+                     return new URL(`file://${url}`);
+                  }
+                  // Handle Windows absolute paths (e.g., C:/...)
+                  if (/^[a-zA-Z]:/.test(url)) {
+                     return new URL(`file:///${url}`);
+                  }
+                  return null;
+               },
             },
-         },
-         function (err, result) {
-            if (err) reject(err);
-            else resolve(result);
-         }
-      );
-   });
+         ],
+         silenceDeprecations: ["import", "global-builtin"],
+      });
+
+      return result;
+   } catch (err) {
+      throw err;
+   }
 };
diff --git a/packages/cx-react/index.js b/packages/cx-react/index.js
deleted file mode 100644
index 13142c462..000000000
--- a/packages/cx-react/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-var React = require("react"),
-   {
-      unstable_batchedUpdates,
-      render,
-      findDOMNode,
-      createPortal,
-      unstable_renderSubtreeIntoContainer,
-      hydrate,
-   } = require("react-dom"),
-   { createRoot, hydrateRoot } = require("react-dom/client");
-
-var vdom = React;
-vdom.DOM = {
-   unstable_batchedUpdates,
-   render,
-   findDOMNode,
-   createPortal,
-   createRoot,
-   hydrateRoot,
-   hydrate,
-   unstable_renderSubtreeIntoContainer,
-};
-
-module.exports = {
-   VDOM: vdom,
-};
diff --git a/packages/cx-react/package.json b/packages/cx-react/package.json
index 2f25c427b..72e2a9f01 100644
--- a/packages/cx-react/package.json
+++ b/packages/cx-react/package.json
@@ -1,13 +1,30 @@
 {
    "name": "cx-react",
-   "version": "24.7.1",
+   "version": "26.1.0",
    "description": "React based rendering for CxJS applications.",
-   "main": "index.js",
+   "main": "dist/index.js",
+   "types": "dist/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./dist/index.d.ts",
+         "default": "./dist/index.js"
+      }
+   },
+   "scripts": {
+      "build": "tsc",
+      "check-types": "tsc --noEmit"
+   },
    "author": "Codaxy",
    "license": "MIT",
    "homepage": "https://github.com/codaxy/cxjs",
    "peerDependencies": {
+      "@types/react": ">=18",
       "react": ">=18",
       "react-dom": ">=18"
+   },
+   "devDependencies": {
+      "@types/react": "^19.2.7",
+      "@types/react-dom": "^19.2.3",
+      "typescript": "^5.9.3"
    }
 }
diff --git a/packages/cx-react/src/index.ts b/packages/cx-react/src/index.ts
new file mode 100644
index 000000000..85cd591ae
--- /dev/null
+++ b/packages/cx-react/src/index.ts
@@ -0,0 +1,25 @@
+import React from "react";
+import { unstable_batchedUpdates, createPortal } from "react-dom";
+import { createRoot, hydrateRoot, type Root } from "react-dom/client";
+
+export type { Root };
+
+export interface CxVDOM extends Omit<typeof React, "DOM"> {
+   allowRenderOutputCaching?: boolean;
+   DOM: {
+      unstable_batchedUpdates: typeof unstable_batchedUpdates;
+      createPortal: typeof createPortal;
+      createRoot: typeof createRoot;
+      hydrateRoot: typeof hydrateRoot;
+   };
+}
+
+const vdom = React as CxVDOM;
+vdom.DOM = {
+   unstable_batchedUpdates,
+   createPortal,
+   createRoot,
+   hydrateRoot,
+};
+
+export const VDOM = vdom;
diff --git a/packages/cx-react/tsconfig.json b/packages/cx-react/tsconfig.json
new file mode 100644
index 000000000..0b6f4663d
--- /dev/null
+++ b/packages/cx-react/tsconfig.json
@@ -0,0 +1,29 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "jsx": "react-jsx",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "outDir": "./dist",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "removeComments": false
+   },
+   "exclude": ["dist"],
+   "include": ["src"]
+}
diff --git a/packages/cx-scss-manifest-webpack-plugin/package.json b/packages/cx-scss-manifest-webpack-plugin/package.json
index 9aadbac89..1dac3fe94 100644
--- a/packages/cx-scss-manifest-webpack-plugin/package.json
+++ b/packages/cx-scss-manifest-webpack-plugin/package.json
@@ -1,19 +1,20 @@
 {
-  "name": "cx-scss-manifest-webpack-plugin",
-  "version": "18.6.0",
-  "description": "Webpack plugin that inspects app's source code and generates a manifest file for importing only required elements of CxJS SCSS",
-  "main": "src/index.js",
-  "author": "Codaxy",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/codaxy/cxjs"
-  },
-  "homepage": "https://github.com/codaxy/cxjs",
-  "peerDependencies": {
-    "cx": "*"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:codaxy/cx.git"
-  }
+   "name": "cx-scss-manifest-webpack-plugin",
+   "version": "26.1.0",
+   "description": "Webpack plugin that inspects app's source code and generates a manifest file for importing only required elements of CxJS SCSS",
+   "main": "src/index.js",
+   "author": "Codaxy",
+   "license": "MIT",
+   "bugs": {
+      "url": "https://github.com/codaxy/cxjs"
+   },
+   "homepage": "https://github.com/codaxy/cxjs",
+   "peerDependencies": {
+      "cx": "*",
+      "webpack": "^5.0.0"
+   },
+   "repository": {
+      "type": "git",
+      "url": "git@github.com:codaxy/cx.git"
+   }
 }
diff --git a/packages/cx-scss-manifest-webpack-plugin/src/index.js b/packages/cx-scss-manifest-webpack-plugin/src/index.js
index 1160d0fc0..67d0bd61e 100644
--- a/packages/cx-scss-manifest-webpack-plugin/src/index.js
+++ b/packages/cx-scss-manifest-webpack-plugin/src/index.js
@@ -19,77 +19,72 @@ function CxScssManifestPlugin(options) {
    }
 }
 
-let ns1 = /cx[\\\/]src[\\\/](\w*)[\\\/]/;
-let ns2 = /cx[\\\/](\w*)[\\\/]/;
+let ns1 = /cx[\\\/]build[\\\/](\w*)[\\\/]/;
+let ns2 = /cx[\\\/]src[\\\/](\w*)[\\\/]/;
+let ns3 = /cx[\\\/](\w*)[\\\/]/;
 
-CxScssManifestPlugin.prototype.apply = function(compiler) {
+CxScssManifestPlugin.prototype.apply = function (compiler) {
    let manifest = this.manifest;
    let dirty = false;
 
-   compiler.hooks.compilation.tap(pluginName, compilation => {
-      compilation.hooks.additionalAssets.tap(pluginName, () => {
-         compilation.chunks.forEach(chunk => {
-            for (const module of chunk.modulesIterable) {
-               if (
-                  !module.resource ||
-                  module.resource.indexOf("node_modules") !== -1
-               )
-                  return;
-
-               module.dependencies.forEach(dep => {
-                  /*
-                     It would be better to use usedExports but they are missing in webpack 4
-                   */
-
-                  if (
-                     !dep.module ||
-                     !dep.module.buildMeta ||
-                     !dep.module.buildMeta.providedExports ||
-                     !dep.module.resource
-                  )
-                     return;
-
-                  let ns =
-                     dep.module.resource.match(ns1) ||
-                     dep.module.resource.match(ns2);
-                  if (!ns) return;
-
-                  dep.module.buildMeta.providedExports.forEach(exp => {
-                     let cxModule = ns[1] + "/" + exp;
-                     if (!manifest[cxModule] && cxManifest[cxModule]) {
-                        dirty = true;
-                        manifest[cxModule] = true;
-                     }
-                  });
-               });
+   const write = () => {
+      let content = "//THIS FILE IS AUTO-GENERATED USING cx-scss-manifest-webpack-plugin\n\n";
+      content += "$cx-include-all: false;\n\n";
+
+      let keys = Object.keys(manifest);
+      keys.sort();
+
+      content += "@include cx-widgets(\n";
+      content += keys.map((k) => '\t"cx/' + k + '"').join(",\n");
+      content += "\n);\n";
+
+      let previousContent = fs.readFileSync(this.opts.outputPath, "utf8");
+      if (content != previousContent) {
+         console.log("CxJS SCSS manifest update.");
+         fs.writeFileSync(this.opts.outputPath, content);
+         return true;
+      }
+      return false;
+   };
+
+   compiler.hooks.compilation.tap(pluginName, (compilation) => {
+      compilation.hooks.finishModules.tap(pluginName, (modules) => {
+         for (const module of modules) {
+            let moduleResource = getResource(module);
+            if (!moduleResource || moduleResource.indexOf("node_modules") !== -1) continue;
+            //console.log('M', moduleResource);
+            for (let dependency of module.dependencies) {
+               if (!dependency.name) continue;
+               let depModule = compilation.moduleGraph.getModule(dependency);
+               let resource = getResource(depModule);
+               //console.log('  D', dependency.name, resource);
+               if (!resource) continue;
+               let ns = resource.match(ns1) || resource.match(ns2) || resource.match(ns3);
+               if (!ns) continue;
+               let cxModule = ns[1] + "/" + dependency.name;
+               //console.log('  I', cxModule);
+               if (!manifest[cxModule] && cxManifest[cxModule]) {
+                  dirty = true;
+                  manifest[cxModule] = true;
+               }
             }
-         });
+         }
+         //console.log('MODULES');
       });
 
       compilation.hooks.needAdditionalPass.tap(pluginName, () => {
-         let content =
-            "//THIS FILE IS AUTO-GENERATED USING cx-scss-manifest-webpack-plugin\n\n";
-         content += "$cx-include-all: false;\n\n";
-
-         let keys = Object.keys(manifest);
-         keys.sort();
-
-         content += "@include cx-widgets(\n";
-         content += keys.map(k => '\t"cx/' + k + '"').join(",\n");
-         content += "\n);\n";
-
-         if (dirty) {
-            let previousContent = fs.readFileSync(this.opts.outputPath, "utf8");
-            if (content != previousContent) {
-               console.log("CxJS SCSS manifest update.");
-               fs.writeFileSync(this.opts.outputPath, content);
-            }
-            dirty = false;
+         //console.log('NEED-EXTRA PASS', dirty);
+         if (write()) {
+            //TODO: Figure out how to trigger a new SCSS round
          }
-
-         return dirty;
+         return false;
       });
    });
 };
 
+function getResource(module) {
+   if (!module) return null;
+   return module.rootModule ? module.rootModule.resource : module.resource;
+}
+
 module.exports = CxScssManifestPlugin;
diff --git a/packages/cx-theme-aquamarine/build.js b/packages/cx-theme-aquamarine/build.js
index 291981356..28e86b7b4 100644
--- a/packages/cx-theme-aquamarine/build.js
+++ b/packages/cx-theme-aquamarine/build.js
@@ -6,6 +6,7 @@ const getPathResolver = require("cx-build-tools/getPathResolver"),
 
 let theme = getPathResolver(resolvePath(__dirname));
 let themeSrc = getPathResolver(theme("src"));
+let themeBuild = getPathResolver(theme("build"));
 
 async function build() {
    try {
@@ -18,7 +19,7 @@ async function build() {
                {
                   name: "index",
                   options: {
-                     input: [themeSrc("index.js")]
+                     input: [themeBuild("index.js")]
                   },
                   output: {}
                }
diff --git a/packages/cx-theme-aquamarine/package.json b/packages/cx-theme-aquamarine/package.json
index 3b06256d6..c7a020b5a 100644
--- a/packages/cx-theme-aquamarine/package.json
+++ b/packages/cx-theme-aquamarine/package.json
@@ -1,17 +1,37 @@
 {
-  "name": "cx-theme-aquamarine",
-  "version": "18.7.3",
-  "description": "Aquamarine theme CSS styles for Cx applications",
-  "main": "./dist/index.js",
-  "author": "Codaxy",
-  "license": "SEE LICENSE.md",
-  "scripts": {
-    "build": "node build"
-  },
-  "files": [
-    "README.md",
-    "LICENSE.md",
-    "src",
-    "dist"
-  ]
+   "name": "cx-theme-aquamarine",
+   "version": "26.1.0",
+   "description": "Aquamarine theme CSS styles for Cx applications",
+   "main": "./build/index.js",
+   "types": "./build/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./build/index.d.ts",
+         "default": "./build/index.js"
+      },
+      "./src/": "./src/",
+      "./build/": "./build/",
+      "./dist/": "./dist/"
+   },
+   "sideEffects": true,
+   "author": "Codaxy",
+   "license": "SEE LICENSE.md",
+   "scripts": {
+      "build": "yarn compile && node build",
+      "compile": "tsc",
+      "check-types": "tsc --noEmit"
+   },
+   "files": [
+      "README.md",
+      "LICENSE.md",
+      "src",
+      "dist",
+      "build"
+   ],
+   "peerDependencies": {
+      "cx": "*"
+   },
+   "devDependencies": {
+      "typescript": "^5.9.3"
+   }
 }
diff --git a/packages/cx-theme-aquamarine/src/index.scss b/packages/cx-theme-aquamarine/src/index.scss
index 1f1dc31ea..03f069b9b 100644
--- a/packages/cx-theme-aquamarine/src/index.scss
+++ b/packages/cx-theme-aquamarine/src/index.scss
@@ -1,9 +1,10 @@
-@import "~cx/src/index";
+@use "sass:map";
+@import "~cx/sass/index";
 
-$block: map-get($cx-besm, block);
-$element: map-get($cx-besm, element);
-$state: map-get($cx-besm, state);
-$mod: map-get($cx-besm, mod);
+$block: map.get($cx-besm, block);
+$element: map.get($cx-besm, element);
+$state: map.get($cx-besm, state);
+$mod: map.get($cx-besm, mod);
 
 @if (cx-included("cx/widgets/Section")) {
    //SECTION
@@ -197,13 +198,17 @@ $mod: map-get($cx-besm, mod);
       &.#{$state}animate {
          opacity: 0;
          transform: scale(0.3);
-         transition: opacity 0.2s, transform 0.2s;
+         transition:
+            opacity 0.2s,
+            transform 0.2s;
       }
 
       &.#{$state}animated {
          opacity: 1;
          transform: none;
-         transition: opacity 0.3s, transform 0.3s;
+         transition:
+            opacity 0.3s,
+            transform 0.3s;
       }
    }
 
diff --git a/packages/cx-theme-aquamarine/src/index.js b/packages/cx-theme-aquamarine/src/index.ts
similarity index 100%
rename from packages/cx-theme-aquamarine/src/index.js
rename to packages/cx-theme-aquamarine/src/index.ts
diff --git a/packages/cx-theme-aquamarine/src/variables.scss b/packages/cx-theme-aquamarine/src/variables.scss
index 0ea487c33..4cbd425a8 100644
--- a/packages/cx-theme-aquamarine/src/variables.scss
+++ b/packages/cx-theme-aquamarine/src/variables.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //THEME SPECIFIC VARIABLES
 // pick theme color scheme
 $primary-color-blue: #47ccde !default; //#00BFFF !default;//lighten(#0587DD, 12) !default;//
@@ -282,7 +284,7 @@ $cx-default-progressbar-indicator-background-color: rgba($cx-theme-primary-color
 //list
 $cx-default-list-item-padding: 8px 12px !default;
 
-@import "~cx/src/variables";
+@import "~cx/sass/variables";
 
 //VARIABLE MAPS
 //LIST
@@ -360,17 +362,16 @@ $cx-button-mods: cx-deep-map-merge(
          hover: (
             // background-color: darken($cx-theme-primary-color, 5),
             //box-shadow: 0 2px 12px rgba($cx-theme-primary-color, 0.7),
-            //background: linear-gradient(to top right, darken($cx-theme-primary-color-dark, 4), darken($cx-theme-primary-color, 4)),,,,
+             //background: linear-gradient(to top right, darken($cx-theme-primary-color-dark, 4), darken($cx-theme-primary-color, 4)),,,,
          ),
          focus: (
             //background-color: darken($cx-theme-primary-color, 10),
-            //box-shadow: 0 2px 6px rgba(darken($cx-theme-primary-color, 30), 0.5) ,,,,,
+             //box-shadow: 0 2px 6px rgba(darken($cx-theme-primary-color, 30), 0.5) ,,,,,
          ),
          active: (
             background-color: darken($cx-theme-primary-color, 9),
             box-shadow: none,
-            background:
-               linear-gradient(
+            background: linear-gradient(
                   to top right,
                   darken($cx-theme-primary-color-dark, 8),
                   darken($cx-theme-primary-color, 8)
@@ -398,15 +399,14 @@ $cx-button-mods: cx-deep-map-merge(
          hover: (
             //background-color: darken($cx-theme-danger-color, 5),
             //background: linear-gradient(to top right, darken($cx-theme-danger-color-dark, 6), darken($cx-theme-danger-color, 6)),
-            //box-shadow: 0 1px 2px rgba($cx-theme-danger-color, 0.4),,,,
+             //box-shadow: 0 1px 2px rgba($cx-theme-danger-color, 0.4),,,,
          ),
          focus: (
             background-color: darken($cx-theme-danger-color, 10),
          ),
          active: (
             background-color: darken($cx-theme-danger-color, 9),
-            background:
-               linear-gradient(
+            background: linear-gradient(
                   to top right,
                   darken($cx-theme-danger-color-dark, 10),
                   darken($cx-theme-danger-color, 10)
@@ -427,9 +427,8 @@ $cx-button-mods: cx-deep-map-merge(
             border-color: transparent,
             box-shadow: none,
          ),
-         hover:
-            map-merge(
-               map-get($cx-list-item, hover),
+         hover: map.merge(
+               map.get($cx-list-item, hover),
                (
                   box-shadow: none,
                   border-color: transparent,
@@ -454,9 +453,8 @@ $cx-button-mods: cx-deep-map-merge(
             border-color: transparent,
             box-shadow: none,
          ),
-         hover:
-            map-merge(
-               map-get($cx-list-item, hover),
+         hover: map.merge(
+               map.get($cx-list-item, hover),
                (
                   box-shadow: none,
                   border-color: transparent,
@@ -631,8 +629,7 @@ $cx-tab-mods: cx-deep-map-merge(
          ),
       ),
       // If a tab is inside a dark-colored container, use mod="line-accent".
-      line-accent:
-         (
+      line-accent: (
             default: (
                color: rgba(255, 255, 255, 0.7),
                border-left-color: transparent !important,
@@ -716,7 +713,7 @@ $cx-section-mods: cx-deep-map-merge(
 );
 
 //MENU
-$cx-dropdown-styles: map-merge(
+$cx-dropdown-styles: map.merge(
    $cx-dropdown-styles,
    (
       font-size: $cx-default-box-font-size - 1px,
@@ -727,7 +724,7 @@ $cx-dropdown-styles: map-merge(
    )
 );
 
-$cx-menu-state-style-map: map-merge(
+$cx-menu-state-style-map: map.merge(
    $cx-menu-state-style-map,
    (
       default: (
@@ -826,8 +823,8 @@ $cx-grid-header-state-style-map: cx-deep-map-merge(
       ),
       hover: (
          //color: rgba($cx-default-grid-header-color, 0.45),
-         background-color: darken($cx-default-grid-header-background-color, 3)
-            //border-color: $cx-default-grid-header-border-color,,,,,
+         background-color: darken($cx-default-grid-header-background-color, 3),
+         //border-color: $cx-default-grid-header-border-color,,,,,
       ),
       sorted: (
          color: $cx-theme-primary-text-color,
@@ -946,8 +943,8 @@ $cx-textarea-state-style-map: cx-deep-map-merge(
          border-color: $cx-default-input-border-color,
       ),
       focus: (
-         box-shadow: 0px 1px 2px rgba($cx-theme-primary-color, 0.5)
-            // background-color: rgba($cx-default-color, 0.015),,,,,
+         box-shadow: 0px 1px 2px rgba($cx-theme-primary-color, 0.5),
+         // background-color: rgba($cx-default-color, 0.015),,,,,
       ),
       hover: (
          // background-color: rgba($cx-default-color, 0.009)
diff --git a/packages/cx-theme-aquamarine/tsconfig.json b/packages/cx-theme-aquamarine/tsconfig.json
new file mode 100644
index 000000000..f883e4b02
--- /dev/null
+++ b/packages/cx-theme-aquamarine/tsconfig.json
@@ -0,0 +1,31 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx/*": ["../cx/build/*"]
+      },
+      "outDir": "./build",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "removeComments": false
+   },
+   "exclude": ["dist", "build"],
+   "include": ["src"]
+}
diff --git a/packages/cx-theme-dark/build.js b/packages/cx-theme-dark/build.js
index 83afb782c..6c00b5599 100644
--- a/packages/cx-theme-dark/build.js
+++ b/packages/cx-theme-dark/build.js
@@ -6,6 +6,7 @@ const getPathResolver = require("cx-build-tools/getPathResolver"),
 
 let theme = getPathResolver(resolvePath(__dirname));
 let themeSrc = getPathResolver(theme("src"));
+let themeBuild = getPathResolver(theme("build"));
 
 async function build() {
    try {
@@ -18,7 +19,7 @@ async function build() {
                {
                   name: "index",
                   options: {
-                     input: [themeSrc("index.js")]
+                     input: [themeBuild("index.js")]
                   },
                   output: {}
                }
diff --git a/packages/cx-theme-dark/package.json b/packages/cx-theme-dark/package.json
index ed1694788..4c8f24208 100644
--- a/packages/cx-theme-dark/package.json
+++ b/packages/cx-theme-dark/package.json
@@ -1,17 +1,37 @@
 {
-  "name": "cx-theme-dark",
-  "version": "18.7.1",
-  "description": "Dark theme CSS styles for Cx applications",
-  "main": "./dist/index.js",
-  "author": "Codaxy",
-  "license": "SEE LICENSE.md",
-  "scripts": {
-    "build": "node build"
-  },
-  "files": [
-    "README.md",
-    "LICENSE.md",
-    "src",
-    "dist"
-  ]
+   "name": "cx-theme-dark",
+   "version": "26.1.0",
+   "description": "Dark theme CSS styles for Cx applications",
+   "main": "./build/index.js",
+   "types": "./build/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./build/index.d.ts",
+         "default": "./build/index.js"
+      },
+      "./src/": "./src/",
+      "./build/": "./build/",
+      "./dist/": "./dist/"
+   },
+   "sideEffects": true,
+   "author": "Codaxy",
+   "license": "SEE LICENSE.md",
+   "scripts": {
+      "build": "yarn compile && node build",
+      "compile": "tsc",
+      "check-types": "tsc --noEmit"
+   },
+   "files": [
+      "README.md",
+      "LICENSE.md",
+      "src",
+      "dist",
+      "build"
+   ],
+   "peerDependencies": {
+      "cx": "*"
+   },
+   "devDependencies": {
+      "typescript": "^5.9.3"
+   }
 }
diff --git a/packages/cx-theme-dark/src/index.js b/packages/cx-theme-dark/src/index.ts
similarity index 100%
rename from packages/cx-theme-dark/src/index.js
rename to packages/cx-theme-dark/src/index.ts
diff --git a/packages/cx-theme-dark/src/widgets.scss b/packages/cx-theme-dark/src/widgets.scss
index fd2377e76..3970c282c 100644
--- a/packages/cx-theme-dark/src/widgets.scss
+++ b/packages/cx-theme-dark/src/widgets.scss
@@ -1,8 +1,9 @@
+@use "sass:map";
 
-$block: map-get($cx-besm, block);
-$element: map-get($cx-besm, element);
-$state: map-get($cx-besm, state);
-$mod: map-get($cx-besm, mod);
+$block: map.get($cx-besm, block);
+$element: map.get($cx-besm, element);
+$state: map.get($cx-besm, state);
+$mod: map.get($cx-besm, mod);
 
 @if (cx-included('cx/widgets/Section')) {
 
diff --git a/packages/cx-theme-dark/tsconfig.json b/packages/cx-theme-dark/tsconfig.json
new file mode 100644
index 000000000..f883e4b02
--- /dev/null
+++ b/packages/cx-theme-dark/tsconfig.json
@@ -0,0 +1,31 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx/*": ["../cx/build/*"]
+      },
+      "outDir": "./build",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "removeComments": false
+   },
+   "exclude": ["dist", "build"],
+   "include": ["src"]
+}
diff --git a/packages/cx-theme-frost/build.js b/packages/cx-theme-frost/build.js
new file mode 100644
index 000000000..0db66d50f
--- /dev/null
+++ b/packages/cx-theme-frost/build.js
@@ -0,0 +1,68 @@
+const getPathResolver = require("cx-build-tools/getPathResolver"),
+   resolvePath = getPathResolver(__dirname),
+   cxSrc = getPathResolver(resolvePath("../cx/src")),
+   buildJS = require("cx-build-tools/buildJS"),
+   buildSCSS = require("cx-build-tools/buildSCSS");
+
+let theme = getPathResolver(resolvePath(__dirname));
+let themeSrc = getPathResolver(theme("src"));
+let themeBuild = getPathResolver(theme("build"));
+
+async function build() {
+   try {
+      console.log("Building theme...");
+      return Promise.all([
+         buildJS(
+            theme("src"),
+            theme("dist"),
+            [
+               {
+                  name: "index",
+                  options: {
+                     input: [themeBuild("index.js")]
+                  },
+                  output: {}
+               }
+            ],
+            null,
+            ["cx/ui", "cx/widgets"]
+         ),
+         buildSCSS(
+            [
+               themeSrc("variables.scss"),
+               resolvePath("../cx-build-tools/reset.scss")
+            ],
+            theme("dist/reset.css")
+         ),
+         buildSCSS(
+            [
+               themeSrc("variables.scss"),
+               cxSrc("variables.scss"),
+               cxSrc("widgets/index.scss"),
+               cxSrc("ui/index.scss")
+            ],
+            theme("dist/widgets.css")
+         ),
+         buildSCSS(
+            [
+               themeSrc("variables.scss"),
+               cxSrc("variables.scss"),
+               cxSrc("charts/index.scss")
+            ],
+            theme("dist/charts.css")
+         ),
+         buildSCSS(
+            [
+               themeSrc("variables.scss"),
+               cxSrc("variables.scss"),
+               cxSrc("svg/index.scss")
+            ],
+            theme("dist/svg.css")
+         )
+      ]);
+   } catch (err) {
+      console.error(err);
+   }
+}
+
+build();
diff --git a/packages/cx-theme-frost/package.json b/packages/cx-theme-frost/package.json
index 14bb278bd..d58cccf37 100644
--- a/packages/cx-theme-frost/package.json
+++ b/packages/cx-theme-frost/package.json
@@ -1,14 +1,37 @@
 {
-  "name": "cx-theme-frost",
-  "version": "18.7.1",
-  "description": "Frost theme CSS styles for Cx applications",
-  "main": "./dist/index.js",
-  "author": "Codaxy",
-  "license": "SEE LICENSE.md",
-  "files": [
-    "README.md",
-    "LICENSE.md",
-    "src",
-    "dist"
-  ]
+   "name": "cx-theme-frost",
+   "version": "26.1.0",
+   "description": "Frost theme CSS styles for Cx applications",
+   "main": "./build/index.js",
+   "types": "./build/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./build/index.d.ts",
+         "default": "./build/index.js"
+      },
+      "./src/": "./src/",
+      "./build/": "./build/",
+      "./dist/": "./dist/"
+   },
+   "sideEffects": true,
+   "author": "Codaxy",
+   "license": "SEE LICENSE.md",
+   "scripts": {
+      "build": "yarn compile && node build",
+      "compile": "tsc",
+      "check-types": "tsc --noEmit"
+   },
+   "files": [
+      "README.md",
+      "LICENSE.md",
+      "src",
+      "dist",
+      "build"
+   ],
+   "peerDependencies": {
+      "cx": "*"
+   },
+   "devDependencies": {
+      "typescript": "^5.9.3"
+   }
 }
diff --git a/packages/cx-theme-frost/src/index.scss b/packages/cx-theme-frost/src/index.scss
index 50f6608f8..dc5d45b44 100644
--- a/packages/cx-theme-frost/src/index.scss
+++ b/packages/cx-theme-frost/src/index.scss
@@ -1,13 +1,14 @@
+@use "sass:map";
 @import "~cx/src/index";
 
-$block: map-get($cx-besm, block);
-$element: map-get($cx-besm, element);
-$state: map-get($cx-besm, state);
-$mod: map-get($cx-besm, mod);
+$block: map.get($cx-besm, block);
+$element: map.get($cx-besm, element);
+$state: map.get($cx-besm, state);
+$mod: map.get($cx-besm, mod);
 
-@if (cx-included('cx/widgets/Section')) {
+@if (cx-included("cx/widgets/Section")) {
    $section-mods: primary success warning error;
-   
+
    @each $i in $section-mods {
       .#{$block}section.#{$mod}#{$i} {
          .#{$element}section-header {
@@ -15,7 +16,7 @@ $mod: map-get($cx-besm, mod);
          }
       }
    }
-   
+
    .#{$block}section.#{$mod}card.#{$mod}card {
       box-shadow: $cx-default-section-box-shadow;
    }
@@ -43,7 +44,7 @@ $mod: map-get($cx-besm, mod);
    }
 }
 
-@if (cx-included('cx/widgets/DateTimeField')) {
+@if (cx-included("cx/widgets/DateTimeField")) {
    .#{$block}datetimefield .#{$block}calendar {
       border-color: transparent !important;
    }
@@ -53,26 +54,28 @@ $mod: map-get($cx-besm, mod);
    }
 }
 
-@if (cx-included('cx/widgets/MonthField')) {
+@if (cx-included("cx/widgets/MonthField")) {
    .#{$block}monthfield .#{$block}monthpicker {
       border-color: transparent !important;
    }
 }
 
-@if (cx-included('cx/widgets/ColorPicker')) {
+@if (cx-included("cx/widgets/ColorPicker")) {
    .#{$block}colorfield .#{$block}colorpicker {
       border-color: transparent !important;
    }
 }
 
 //override for chrome mobile default press effect
-.#{$block}button, .#{$block}tab, .#{$block}menu {
+.#{$block}button,
+.#{$block}tab,
+.#{$block}menu {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
 
 //progressbar
-@if (cx-included('cx/widgets/ProgressBar')) {
+@if (cx-included("cx/widgets/ProgressBar")) {
    .#{$block}progressbar {
       overflow: hidden;
    }
-}
\ No newline at end of file
+}
diff --git a/packages/cx-theme-frost/src/index.js b/packages/cx-theme-frost/src/index.ts
similarity index 100%
rename from packages/cx-theme-frost/src/index.js
rename to packages/cx-theme-frost/src/index.ts
diff --git a/packages/cx-theme-frost/src/variables.scss b/packages/cx-theme-frost/src/variables.scss
index d10f60bec..668e3d0d5 100644
--- a/packages/cx-theme-frost/src/variables.scss
+++ b/packages/cx-theme-frost/src/variables.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 
 // GLOBAL VARIABLES
 $cx-default-color: #373a3c !default;
@@ -202,12 +203,12 @@ $cx-window-footer-state-style-map: cx-deep-map-merge($cx-window-footer-state-sty
    )
 ));
 
-$cx-dropdown-styles: map-merge($cx-dropdown-styles, (
+$cx-dropdown-styles: map.merge($cx-dropdown-styles, (
    border-width: 2px,
    border-style: solid
 ));
 
-$cx-menu-state-style-map: map-merge($cx-menu-state-style-map, (
+$cx-menu-state-style-map: map.merge($cx-menu-state-style-map, (
    default: (
 
    )
diff --git a/packages/cx-theme-frost/tsconfig.json b/packages/cx-theme-frost/tsconfig.json
new file mode 100644
index 000000000..f883e4b02
--- /dev/null
+++ b/packages/cx-theme-frost/tsconfig.json
@@ -0,0 +1,31 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx/*": ["../cx/build/*"]
+      },
+      "outDir": "./build",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "removeComments": false
+   },
+   "exclude": ["dist", "build"],
+   "include": ["src"]
+}
diff --git a/packages/cx-theme-material-dark/build.js b/packages/cx-theme-material-dark/build.js
new file mode 100644
index 000000000..5b4838fe7
--- /dev/null
+++ b/packages/cx-theme-material-dark/build.js
@@ -0,0 +1,70 @@
+const getPathResolver = require("cx-build-tools/getPathResolver"),
+   resolvePath = getPathResolver(__dirname),
+   cxSrc = getPathResolver(resolvePath("../cx/src")),
+   buildJS = require("cx-build-tools/buildJS"),
+   buildSCSS = require("cx-build-tools/buildSCSS");
+
+let theme = getPathResolver(resolvePath(__dirname));
+let themeSrc = getPathResolver(theme("src"));
+let themeBuild = getPathResolver(theme("build"));
+
+async function build() {
+   try {
+      console.log("Building theme...");
+      return Promise.all([
+         buildJS(
+            theme("src"),
+            theme("dist"),
+            [
+               {
+                  name: "index",
+                  options: {
+                     input: [themeBuild("index.js")]
+                  },
+                  output: {}
+               }
+            ],
+            null,
+            ["cx/ui", "cx/widgets"]
+         ),
+         buildSCSS(
+            [
+               themeSrc("variables.scss"),
+               resolvePath("../cx-build-tools/reset.scss"),
+               themeSrc("reset.scss")
+            ],
+            theme("dist/reset.css")
+         ),
+         buildSCSS(
+            [
+               themeSrc("variables.scss"),
+               cxSrc("variables.scss"),
+               cxSrc("widgets/index.scss"),
+               cxSrc("ui/index.scss"),
+               themeSrc("widgets.scss")
+            ],
+            theme("dist/widgets.css")
+         ),
+         buildSCSS(
+            [
+               themeSrc("variables.scss"),
+               cxSrc("variables.scss"),
+               cxSrc("charts/index.scss")
+            ],
+            theme("dist/charts.css")
+         ),
+         buildSCSS(
+            [
+               themeSrc("variables.scss"),
+               cxSrc("variables.scss"),
+               cxSrc("svg/index.scss")
+            ],
+            theme("dist/svg.css")
+         )
+      ]);
+   } catch (err) {
+      console.error(err);
+   }
+}
+
+build();
diff --git a/packages/cx-theme-material-dark/package.json b/packages/cx-theme-material-dark/package.json
index 9a1347f1f..ea363a52d 100644
--- a/packages/cx-theme-material-dark/package.json
+++ b/packages/cx-theme-material-dark/package.json
@@ -1,17 +1,37 @@
 {
-  "name": "cx-theme-material-dark",
-  "version": "20.1.0",
-  "description": "Material Dark theme CSS styles for Cx applications",
-  "main": "./dist/index.js",
-  "author": "Codaxy",
-  "license": "SEE LICENSE.md",
-  "scripts": {
-    "build": "node build"
-  },
-  "files": [
-    "README.md",
-    "LICENSE.md",
-    "src",
-    "dist"
-  ]
+   "name": "cx-theme-material-dark",
+   "version": "26.1.0",
+   "description": "Material Dark theme CSS styles for Cx applications",
+   "main": "./build/index.js",
+   "types": "./build/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./build/index.d.ts",
+         "default": "./build/index.js"
+      },
+      "./src/": "./src/",
+      "./build/": "./build/",
+      "./dist/": "./dist/"
+   },
+   "sideEffects": true,
+   "author": "Codaxy",
+   "license": "SEE LICENSE.md",
+   "scripts": {
+      "build": "yarn compile && node build",
+      "compile": "tsc",
+      "check-types": "tsc --noEmit"
+   },
+   "files": [
+      "README.md",
+      "LICENSE.md",
+      "src",
+      "dist",
+      "build"
+   ],
+   "peerDependencies": {
+      "cx": "*"
+   },
+   "devDependencies": {
+      "typescript": "^5.9.3"
+   }
 }
diff --git a/packages/cx-theme-material-dark/src/index.js b/packages/cx-theme-material-dark/src/index.js
deleted file mode 100644
index 971598029..000000000
--- a/packages/cx-theme-material-dark/src/index.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import {Localization} from 'cx/ui';
-import {Icon} from 'cx/widgets';
-import {VDOM} from 'cx/ui';
-
-export function applyThemeOverrides() {
-
-   Localization.override('cx/widgets/Dropdown', {
-      arrow: false,
-      offset: 0,
-      elementExplode: 0
-   });
-
-   Localization.override('cx/widgets/Window', {
-      animate: true,
-      destroyDelay: 200
-   });
-
-   Localization.override('cx/widgets/MenuItem', {
-      dropdownOptions: {
-         pad: false
-      }
-   });
-
-   // enable wrapper focus tracking so appropriate css class can be applied to it
-   Localization.override('cx/widgets/Field', {
-      trackFocus: true
-   });
-
-   // set all MsgBox buttons to flat-primary
-   Localization.override('cx/widgets/MsgBox', {
-      buttonMod: "flat-primary",
-      footerDirection: "row-reverse",
-      footerJustify: "start"
-   });
-
-   // show all borders on all grids
-   Localization.override('cx/widgets/Grid', {
-      showBorder: true
-   });
-
-
-   // material icons added
-   Icon.registerFactory((name, props) => {
-      return VDOM.createElement('i', {
-         ...props,
-         className: 'material-icons ' + (props.className || '')
-      }, name)
-   });
-
-   Icon.unregister('close');
-   Icon.unregister('folder');
-
-   Icon.register('calendar', props => Icon.render('date_range', props));
-   Icon.register('drop-down', props => Icon.render('keyboard_arrow_down', props));
-   Icon.register('sort-asc', props => Icon.render('arrow_upward', props));
-   Icon.register('folder-open', props => Icon.render('folder_open', props));
-   Icon.register('file', props => Icon.render('insert_drive_file', props));
-
-   // Icon.register('forward', props => {
-   //    return <svg
-   //       {...props}
-   //       viewBox="0 0 24 24">
-   //       <path fill="currentColor"
-   //             strokeWidth="0"
-   //             stroke="currentColor"
-   //             d="M11.59 16.34l4.58-4.59-4.58-4.59L13 5.75l6 6-6 6z"/>
-
-   //       <path fill="currentColor"
-   //             strokeWidth="0"
-   //             stroke="currentColor"
-   //             d="M4.59 16.34l4.58-4.59-4.58-4.59L6 5.75l6 6-6 6z"/>
-   //    </svg>
-   // });
-}
-
-applyThemeOverrides();
-
-export function enableMaterialLabelPlacement() {
-   Localization.override('cx/widgets/Field', {
-      labelPlacement: "material"
-   });
-   Localization.override('cx/widgets/LabeledContainer', {
-      labelPlacement: "material"
-   });
-}
-
-export function enableMaterialHelpPlacement() {
-   Localization.override('cx/widgets/Field', {
-      helpPlacement: "material",
-      validationMode: "help"
-   });
-}
\ No newline at end of file
diff --git a/packages/cx-theme-material-dark/src/index.ts b/packages/cx-theme-material-dark/src/index.ts
new file mode 100644
index 000000000..00803996a
--- /dev/null
+++ b/packages/cx-theme-material-dark/src/index.ts
@@ -0,0 +1,92 @@
+import {Localization} from 'cx/ui';
+import {Icon} from 'cx/widgets';
+import {VDOM} from 'cx/ui';
+
+export function applyThemeOverrides() {
+
+   Localization.override('cx/widgets/Dropdown', {
+      arrow: false,
+      offset: 0,
+      elementExplode: 0
+   });
+
+   Localization.override('cx/widgets/Window', {
+      animate: true,
+      destroyDelay: 200
+   });
+
+   Localization.override('cx/widgets/MenuItem', {
+      dropdownOptions: {
+         pad: false
+      }
+   });
+
+   // enable wrapper focus tracking so appropriate css class can be applied to it
+   Localization.override('cx/widgets/Field', {
+      trackFocus: true
+   });
+
+   // set all MsgBox buttons to flat-primary
+   Localization.override('cx/widgets/MsgBox', {
+      buttonMod: "flat-primary",
+      footerDirection: "row-reverse",
+      footerJustify: "start"
+   });
+
+   // show all borders on all grids
+   Localization.override('cx/widgets/Grid', {
+      showBorder: true
+   });
+
+
+   // material icons added
+   Icon.registerFactory((name, props) => {
+      return VDOM.createElement('i', {
+         ...props,
+         className: 'material-icons ' + (props.className || '')
+      }, name)
+   });
+
+   Icon.unregister('close');
+   Icon.unregister('folder');
+
+   Icon.register('calendar', (props: Record<string, unknown>) => Icon.render('date_range', props));
+   Icon.register('drop-down', (props: Record<string, unknown>) => Icon.render('keyboard_arrow_down', props));
+   Icon.register('sort-asc', (props: Record<string, unknown>) => Icon.render('arrow_upward', props));
+   Icon.register('folder-open', (props: Record<string, unknown>) => Icon.render('folder_open', props));
+   Icon.register('file', (props: Record<string, unknown>) => Icon.render('insert_drive_file', props));
+
+   // Icon.register('forward', props => {
+   //    return <svg
+   //       {...props}
+   //       viewBox="0 0 24 24">
+   //       <path fill="currentColor"
+   //             strokeWidth="0"
+   //             stroke="currentColor"
+   //             d="M11.59 16.34l4.58-4.59-4.58-4.59L13 5.75l6 6-6 6z"/>
+
+   //       <path fill="currentColor"
+   //             strokeWidth="0"
+   //             stroke="currentColor"
+   //             d="M4.59 16.34l4.58-4.59-4.58-4.59L6 5.75l6 6-6 6z"/>
+   //    </svg>
+   // });
+}
+
+applyThemeOverrides();
+
+export function enableMaterialLabelPlacement() {
+   Localization.override('cx/widgets/Field', {
+      labelPlacement: "material"
+   });
+   Localization.override('cx/widgets/LabeledContainer', {
+      labelPlacement: "material"
+   });
+}
+
+export function enableMaterialHelpPlacement() {
+   Localization.override('cx/widgets/Field', {
+      helpPlacement: "material",
+      validationMode: "help"
+   });
+}
\ No newline at end of file
diff --git a/packages/cx-theme-material-dark/src/variables.scss b/packages/cx-theme-material-dark/src/variables.scss
index 13d33e000..7a4983bc1 100644
--- a/packages/cx-theme-material-dark/src/variables.scss
+++ b/packages/cx-theme-material-dark/src/variables.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //THEME SPECIFIC VARIABLES
 // pick theme color scheme
 $primary-color-blue: #8cc8fe !default;
@@ -625,7 +627,7 @@ $cx-section-mods: cx-deep-map-merge(
 );
 
 //MENU
-$cx-dropdown-styles: map-merge(
+$cx-dropdown-styles: map.merge(
    $cx-dropdown-styles,
    (
       color: $cx-medium-emphasis,
@@ -635,7 +637,7 @@ $cx-dropdown-styles: map-merge(
    )
 );
 
-$cx-menu-state-style-map: map-merge(
+$cx-menu-state-style-map: map.merge(
    $cx-menu-state-style-map,
    (
       default: (
diff --git a/packages/cx-theme-material-dark/src/widgets.scss b/packages/cx-theme-material-dark/src/widgets.scss
index 2d570c666..066bf9673 100644
--- a/packages/cx-theme-material-dark/src/widgets.scss
+++ b/packages/cx-theme-material-dark/src/widgets.scss
@@ -1,7 +1,9 @@
-$block: map-get($cx-besm, block);
-$element: map-get($cx-besm, element);
-$state: map-get($cx-besm, state);
-$mod: map-get($cx-besm, mod);
+@use "sass:map";
+
+$block: map.get($cx-besm, block);
+$element: map.get($cx-besm, element);
+$state: map.get($cx-besm, state);
+$mod: map.get($cx-besm, mod);
 
 //SECTION
 @if (cx-included("cx/widgets/Section")) {
diff --git a/packages/cx-theme-material-dark/tsconfig.json b/packages/cx-theme-material-dark/tsconfig.json
new file mode 100644
index 000000000..f883e4b02
--- /dev/null
+++ b/packages/cx-theme-material-dark/tsconfig.json
@@ -0,0 +1,31 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx/*": ["../cx/build/*"]
+      },
+      "outDir": "./build",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "removeComments": false
+   },
+   "exclude": ["dist", "build"],
+   "include": ["src"]
+}
diff --git a/packages/cx-theme-material/build.js b/packages/cx-theme-material/build.js
index 83afb782c..6c00b5599 100644
--- a/packages/cx-theme-material/build.js
+++ b/packages/cx-theme-material/build.js
@@ -6,6 +6,7 @@ const getPathResolver = require("cx-build-tools/getPathResolver"),
 
 let theme = getPathResolver(resolvePath(__dirname));
 let themeSrc = getPathResolver(theme("src"));
+let themeBuild = getPathResolver(theme("build"));
 
 async function build() {
    try {
@@ -18,7 +19,7 @@ async function build() {
                {
                   name: "index",
                   options: {
-                     input: [themeSrc("index.js")]
+                     input: [themeBuild("index.js")]
                   },
                   output: {}
                }
diff --git a/packages/cx-theme-material/package.json b/packages/cx-theme-material/package.json
index cab0de20c..4e5ecc41f 100644
--- a/packages/cx-theme-material/package.json
+++ b/packages/cx-theme-material/package.json
@@ -1,17 +1,37 @@
 {
-  "name": "cx-theme-material",
-  "version": "18.7.0",
-  "description": "Material theme CSS styles for Cx applications",
-  "main": "./dist/index.js",
-  "author": "Codaxy",
-  "license": "SEE LICENSE.md",
-  "scripts": {
-    "build": "node build"
-  },
-  "files": [
-    "README.md",
-    "LICENSE.md",
-    "src",
-    "dist"
-  ]
+   "name": "cx-theme-material",
+   "version": "26.1.0",
+   "description": "Material theme CSS styles for Cx applications",
+   "main": "./build/index.js",
+   "types": "./build/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./build/index.d.ts",
+         "default": "./build/index.js"
+      },
+      "./src/": "./src/",
+      "./build/": "./build/",
+      "./dist/": "./dist/"
+   },
+   "sideEffects": true,
+   "author": "Codaxy",
+   "license": "SEE LICENSE.md",
+   "scripts": {
+      "build": "yarn compile && node build",
+      "compile": "tsc",
+      "check-types": "tsc --noEmit"
+   },
+   "files": [
+      "README.md",
+      "LICENSE.md",
+      "src",
+      "dist",
+      "build"
+   ],
+   "peerDependencies": {
+      "cx": "*"
+   },
+   "devDependencies": {
+      "typescript": "^5.9.3"
+   }
 }
diff --git a/packages/cx-theme-material/src/index.js b/packages/cx-theme-material/src/index.js
deleted file mode 100644
index 15a6fa160..000000000
--- a/packages/cx-theme-material/src/index.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import {Localization} from 'cx/ui';
-import {Icon} from 'cx/widgets';
-import {VDOM} from 'cx/ui';
-
-export function applyThemeOverrides() {
-
-   Localization.override('cx/widgets/Dropdown', {
-      arrow: false,
-      offset: 0,
-      elementExplode: 0
-   });
-
-   Localization.override('cx/widgets/Window', {
-      animate: true,
-      destroyDelay: 200
-   });
-
-   Localization.override('cx/widgets/MenuItem', {
-      dropdownOptions: {
-         pad: false
-      }
-   });
-
-   // enable wrapper focus tracking so appropriate css class can be applied to it
-   Localization.override('cx/widgets/Field', {
-      trackFocus: true
-   });
-
-   // set all MsgBox buttons to flat-primary
-   Localization.override('cx/widgets/MsgBox', {
-      buttonMod: "flat-primary",
-      footerDirection: "row-reverse",
-      footerJustify: "start"
-   });
-
-   // show all borders on all grids
-   Localization.override('cx/widgets/Grid', {
-      showBorder: true
-   });
-
-
-   // material icons added
-   Icon.registerFactory((name, props) => {
-      return VDOM.createElement('i', {
-         ...props,
-         className: 'material-icons ' + (props.className || '')
-      }, name)
-   });
-
-   Icon.unregister('close');
-   Icon.unregister('folder');
-
-   Icon.register('calendar', props => Icon.render('date_range', props));
-   Icon.register('drop-down', props => Icon.render('keyboard_arrow_down', props));
-   Icon.register('sort-asc', props => Icon.render('arrow_upward', props));
-   Icon.register('folder-open', props => Icon.render('folder_open', props));
-   Icon.register('file', props => Icon.render('insert_drive_file', props));
-
-   Icon.register('forward', props => {
-      return <svg
-         {...props}
-         viewBox="0 0 24 24">
-         <path fill="currentColor"
-               strokeWidth="0"
-               stroke="currentColor"
-               d="M11.59 16.34l4.58-4.59-4.58-4.59L13 5.75l6 6-6 6z"/>
-
-         <path fill="currentColor"
-               strokeWidth="0"
-               stroke="currentColor"
-               d="M4.59 16.34l4.58-4.59-4.58-4.59L6 5.75l6 6-6 6z"/>
-      </svg>
-   });
-}
-
-applyThemeOverrides();
-
-export function enableMaterialLabelPlacement() {
-   Localization.override('cx/widgets/Field', {
-      labelPlacement: "material"
-   });
-   Localization.override('cx/widgets/LabeledContainer', {
-      labelPlacement: "material"
-   });
-}
-
-export function enableMaterialHelpPlacement() {
-   Localization.override('cx/widgets/Field', {
-      helpPlacement: "material",
-      validationMode: "help"
-   });
-}
\ No newline at end of file
diff --git a/packages/cx-theme-material/src/index.tsx b/packages/cx-theme-material/src/index.tsx
new file mode 100644
index 000000000..7f8b1d09f
--- /dev/null
+++ b/packages/cx-theme-material/src/index.tsx
@@ -0,0 +1,92 @@
+import {Localization} from 'cx/ui';
+import {Icon} from 'cx/widgets';
+import {VDOM} from 'cx/ui';
+
+export function applyThemeOverrides() {
+
+   Localization.override('cx/widgets/Dropdown', {
+      arrow: false,
+      offset: 0,
+      elementExplode: 0
+   });
+
+   Localization.override('cx/widgets/Window', {
+      animate: true,
+      destroyDelay: 200
+   });
+
+   Localization.override('cx/widgets/MenuItem', {
+      dropdownOptions: {
+         pad: false
+      }
+   });
+
+   // enable wrapper focus tracking so appropriate css class can be applied to it
+   Localization.override('cx/widgets/Field', {
+      trackFocus: true
+   });
+
+   // set all MsgBox buttons to flat-primary
+   Localization.override('cx/widgets/MsgBox', {
+      buttonMod: "flat-primary",
+      footerDirection: "row-reverse",
+      footerJustify: "start"
+   });
+
+   // show all borders on all grids
+   Localization.override('cx/widgets/Grid', {
+      showBorder: true
+   });
+
+
+   // material icons added
+   Icon.registerFactory((name, props) => {
+      return VDOM.createElement('i', {
+         ...props,
+         className: 'material-icons ' + (props.className || '')
+      }, name)
+   });
+
+   Icon.unregister('close');
+   Icon.unregister('folder');
+
+   Icon.register('calendar', (props: Record<string, unknown>) => Icon.render('date_range', props));
+   Icon.register('drop-down', (props: Record<string, unknown>) => Icon.render('keyboard_arrow_down', props));
+   Icon.register('sort-asc', (props: Record<string, unknown>) => Icon.render('arrow_upward', props));
+   Icon.register('folder-open', (props: Record<string, unknown>) => Icon.render('folder_open', props));
+   Icon.register('file', (props: Record<string, unknown>) => Icon.render('insert_drive_file', props));
+
+   Icon.register('forward', (props: Record<string, unknown>) => {
+      return <svg
+         {...props}
+         viewBox="0 0 24 24">
+         <path fill="currentColor"
+               strokeWidth="0"
+               stroke="currentColor"
+               d="M11.59 16.34l4.58-4.59-4.58-4.59L13 5.75l6 6-6 6z"/>
+
+         <path fill="currentColor"
+               strokeWidth="0"
+               stroke="currentColor"
+               d="M4.59 16.34l4.58-4.59-4.58-4.59L6 5.75l6 6-6 6z"/>
+      </svg>
+   });
+}
+
+applyThemeOverrides();
+
+export function enableMaterialLabelPlacement() {
+   Localization.override('cx/widgets/Field', {
+      labelPlacement: "material"
+   });
+   Localization.override('cx/widgets/LabeledContainer', {
+      labelPlacement: "material"
+   });
+}
+
+export function enableMaterialHelpPlacement() {
+   Localization.override('cx/widgets/Field', {
+      helpPlacement: "material",
+      validationMode: "help"
+   });
+}
\ No newline at end of file
diff --git a/packages/cx-theme-material/src/variables.scss b/packages/cx-theme-material/src/variables.scss
index c4659cc61..5629a436d 100644
--- a/packages/cx-theme-material/src/variables.scss
+++ b/packages/cx-theme-material/src/variables.scss
@@ -1,4 +1,6 @@
 /* prettier-ignore */
+@use "sass:map";
+
 //THEME SPECIFIC VARIABLES
 // pick theme color scheme
 $primary-color-blue: #2196f3 !default;
@@ -359,8 +361,8 @@ $cx-button-mods: cx-deep-map-merge(
             box-shadow: none,
          ),
          hover:
-            map-merge(
-               map-get($cx-list-item, hover),
+            map.merge(
+               map.get($cx-list-item, hover),
                (
                   box-shadow: none,
                   border-color: transparent,
@@ -386,8 +388,8 @@ $cx-button-mods: cx-deep-map-merge(
             box-shadow: none,
          ),
          hover:
-            map-merge(
-               map-get($cx-list-item, hover),
+            map.merge(
+               map.get($cx-list-item, hover),
                (
                   box-shadow: none,
                   border-color: transparent,
@@ -659,7 +661,7 @@ $cx-section-mods: cx-deep-map-merge(
 );
 
 //MENU
-$cx-dropdown-styles: map-merge(
+$cx-dropdown-styles: map.merge(
    $cx-dropdown-styles,
    (
       font-size: $cx-default-box-font-size + 1px,
@@ -670,7 +672,7 @@ $cx-dropdown-styles: map-merge(
    )
 );
 
-$cx-menu-state-style-map: map-merge(
+$cx-menu-state-style-map: map.merge(
    $cx-menu-state-style-map,
    (
       default: (
diff --git a/packages/cx-theme-material/src/widgets.scss b/packages/cx-theme-material/src/widgets.scss
index d6cce61b6..f658587b6 100644
--- a/packages/cx-theme-material/src/widgets.scss
+++ b/packages/cx-theme-material/src/widgets.scss
@@ -1,7 +1,9 @@
-$block: map-get($cx-besm, block);
-$element: map-get($cx-besm, element);
-$state: map-get($cx-besm, state);
-$mod: map-get($cx-besm, mod);
+@use "sass:map";
+
+$block: map.get($cx-besm, block);
+$element: map.get($cx-besm, element);
+$state: map.get($cx-besm, state);
+$mod: map.get($cx-besm, mod);
 
 //SECTION
 @if (cx-included("cx/widgets/Section")) {
diff --git a/packages/cx-theme-material/tsconfig.json b/packages/cx-theme-material/tsconfig.json
new file mode 100644
index 000000000..4cc684f62
--- /dev/null
+++ b/packages/cx-theme-material/tsconfig.json
@@ -0,0 +1,34 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "jsx": "react-jsx",
+      "jsxImportSource": "cx",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx/*": ["../cx/build/*"],
+         "cx/jsx-runtime": ["../cx/jsx-runtime"]
+      },
+      "outDir": "./build",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "removeComments": false
+   },
+   "exclude": ["dist", "build"],
+   "include": ["src"]
+}
diff --git a/packages/cx-theme-packed-dark/build.js b/packages/cx-theme-packed-dark/build.js
index 83afb782c..6c00b5599 100644
--- a/packages/cx-theme-packed-dark/build.js
+++ b/packages/cx-theme-packed-dark/build.js
@@ -6,6 +6,7 @@ const getPathResolver = require("cx-build-tools/getPathResolver"),
 
 let theme = getPathResolver(resolvePath(__dirname));
 let themeSrc = getPathResolver(theme("src"));
+let themeBuild = getPathResolver(theme("build"));
 
 async function build() {
    try {
@@ -18,7 +19,7 @@ async function build() {
                {
                   name: "index",
                   options: {
-                     input: [themeSrc("index.js")]
+                     input: [themeBuild("index.js")]
                   },
                   output: {}
                }
diff --git a/packages/cx-theme-packed-dark/package.json b/packages/cx-theme-packed-dark/package.json
index ac6f8afe7..8868b23e4 100644
--- a/packages/cx-theme-packed-dark/package.json
+++ b/packages/cx-theme-packed-dark/package.json
@@ -1,17 +1,37 @@
 {
    "name": "cx-theme-packed-dark",
-   "version": "24.4.1",
+   "version": "26.1.0",
    "description": "Packed dark theme CSS styles for Cx applications",
-   "main": "./dist/index.js",
+   "main": "./build/index.js",
+   "types": "./build/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./build/index.d.ts",
+         "default": "./build/index.js"
+      },
+      "./src/": "./src/",
+      "./build/": "./build/",
+      "./dist/": "./dist/"
+   },
+   "sideEffects": true,
    "author": "Codaxy",
    "license": "SEE LICENSE.md",
    "scripts": {
-      "build": "node build"
+      "build": "yarn compile && node build",
+      "compile": "tsc",
+      "check-types": "tsc --noEmit"
    },
    "files": [
       "README.md",
       "LICENSE.md",
       "src",
-      "dist"
-   ]
+      "dist",
+      "build"
+   ],
+   "peerDependencies": {
+      "cx": "*"
+   },
+   "devDependencies": {
+      "typescript": "^5.9.3"
+   }
 }
diff --git a/packages/cx-theme-packed-dark/src/index.js b/packages/cx-theme-packed-dark/src/index.ts
similarity index 100%
rename from packages/cx-theme-packed-dark/src/index.js
rename to packages/cx-theme-packed-dark/src/index.ts
diff --git a/packages/cx-theme-packed-dark/src/widgets.scss b/packages/cx-theme-packed-dark/src/widgets.scss
index bc1437ea0..beff233b8 100644
--- a/packages/cx-theme-packed-dark/src/widgets.scss
+++ b/packages/cx-theme-packed-dark/src/widgets.scss
@@ -1,7 +1,9 @@
-$block: map-get($cx-besm, block);
-$element: map-get($cx-besm, element);
-$state: map-get($cx-besm, state);
-$mod: map-get($cx-besm, mod);
+@use "sass:map";
+
+$block: map.get($cx-besm, block);
+$element: map.get($cx-besm, element);
+$state: map.get($cx-besm, state);
+$mod: map.get($cx-besm, mod);
 
 @if (cx-included("cx/widgets/Section")) {
    $section-mods: primary success warning error;
diff --git a/packages/cx-theme-packed-dark/tsconfig.json b/packages/cx-theme-packed-dark/tsconfig.json
new file mode 100644
index 000000000..f883e4b02
--- /dev/null
+++ b/packages/cx-theme-packed-dark/tsconfig.json
@@ -0,0 +1,31 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx/*": ["../cx/build/*"]
+      },
+      "outDir": "./build",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "removeComments": false
+   },
+   "exclude": ["dist", "build"],
+   "include": ["src"]
+}
diff --git a/packages/cx-theme-space-blue/build.js b/packages/cx-theme-space-blue/build.js
index 291981356..28e86b7b4 100644
--- a/packages/cx-theme-space-blue/build.js
+++ b/packages/cx-theme-space-blue/build.js
@@ -6,6 +6,7 @@ const getPathResolver = require("cx-build-tools/getPathResolver"),
 
 let theme = getPathResolver(resolvePath(__dirname));
 let themeSrc = getPathResolver(theme("src"));
+let themeBuild = getPathResolver(theme("build"));
 
 async function build() {
    try {
@@ -18,7 +19,7 @@ async function build() {
                {
                   name: "index",
                   options: {
-                     input: [themeSrc("index.js")]
+                     input: [themeBuild("index.js")]
                   },
                   output: {}
                }
diff --git a/packages/cx-theme-space-blue/package.json b/packages/cx-theme-space-blue/package.json
index 5e795e2e8..51f914de6 100644
--- a/packages/cx-theme-space-blue/package.json
+++ b/packages/cx-theme-space-blue/package.json
@@ -1,17 +1,37 @@
 {
    "name": "cx-theme-space-blue",
-   "version": "24.5.1",
+   "version": "26.1.0",
    "description": "Space Blue theme CSS styles for Cx applications",
-   "main": "./dist/index.js",
+   "main": "./build/index.js",
+   "types": "./build/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./build/index.d.ts",
+         "default": "./build/index.js"
+      },
+      "./src/": "./src/",
+      "./build/": "./build/",
+      "./dist/": "./dist/"
+   },
+   "sideEffects": true,
    "author": "Codaxy",
    "license": "SEE LICENSE.md",
    "scripts": {
-      "build": "node build"
+      "build": "yarn compile && node build",
+      "compile": "tsc",
+      "check-types": "tsc --noEmit"
    },
    "files": [
       "README.md",
       "LICENSE.md",
       "src",
-      "dist"
-   ]
+      "dist",
+      "build"
+   ],
+   "peerDependencies": {
+      "cx": "*"
+   },
+   "devDependencies": {
+      "typescript": "^5.9.3"
+   }
 }
diff --git a/packages/cx-theme-space-blue/src/index.js b/packages/cx-theme-space-blue/src/index.ts
similarity index 100%
rename from packages/cx-theme-space-blue/src/index.js
rename to packages/cx-theme-space-blue/src/index.ts
diff --git a/packages/cx-theme-space-blue/src/variables.scss b/packages/cx-theme-space-blue/src/variables.scss
index 3efe4ddba..0e54c5566 100644
--- a/packages/cx-theme-space-blue/src/variables.scss
+++ b/packages/cx-theme-space-blue/src/variables.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //THEME SPECIFIC VARIABLES
 $cx-theme-primary-color: #4dcbac !default;
 $cx-theme-primary-color-light: lighten($cx-theme-primary-color, 5);
@@ -479,7 +481,7 @@ $cx-section-mods: cx-deep-map-merge(
 );
 
 //MENU
-$cx-dropdown-styles: map-merge(
+$cx-dropdown-styles: map.merge(
    $cx-dropdown-styles,
    (
       background-color: $cx-default-background-color-lighter,
diff --git a/packages/cx-theme-space-blue/src/widgets.scss b/packages/cx-theme-space-blue/src/widgets.scss
index f49e29f7f..3bf172e58 100644
--- a/packages/cx-theme-space-blue/src/widgets.scss
+++ b/packages/cx-theme-space-blue/src/widgets.scss
@@ -1,14 +1,15 @@
+@use "sass:map";
 @import "~cx/src/index";
 
-$block: map-get($cx-besm, block);
-$element: map-get($cx-besm, element);
-$state: map-get($cx-besm, state);
-$mod: map-get($cx-besm, mod);
+$block: map.get($cx-besm, block);
+$element: map.get($cx-besm, element);
+$state: map.get($cx-besm, state);
+$mod: map.get($cx-besm, mod);
 
 // SECTION
-@if (cx-included('cx/widgets/Section')) {
+@if (cx-included("cx/widgets/Section")) {
    $section-mods: primary success warning error;
-   
+
    .#{$block}section.#{$mod}card.#{$mod}card {
       box-shadow: $cx-default-section-box-shadow;
    }
@@ -37,7 +38,7 @@ $mod: map-get($cx-besm, mod);
    }
 }
 
-@if (cx-included('cx/widgets/Calendar')) {
+@if (cx-included("cx/widgets/Calendar")) {
    // calendar
    .#{$block}calendar {
       .#{$element}calendar-day-names {
@@ -45,14 +46,14 @@ $mod: map-get($cx-besm, mod);
       }
 
       &.#{$state}disabled {
-         background-color: $cx-default-background-color-dark;    
+         background-color: $cx-default-background-color-dark;
          pointer-events: none;
-         opacity: .6;
+         opacity: 0.6;
       }
    }
 }
 
-@if (cx-included('cx/widgets/DateTimeField')) {
+@if (cx-included("cx/widgets/DateTimeField")) {
    .#{$block}datetimefield .#{$block}calendar {
       border-color: transparent !important;
    }
@@ -62,35 +63,35 @@ $mod: map-get($cx-besm, mod);
    }
 }
 
-@if (cx-should-include('cx/widgets/DateTimePicker')) {
+@if (cx-should-include("cx/widgets/DateTimePicker")) {
    .#{$element}wheel-option {
       border-color: transparent;
    }
 }
 
-@if (cx-included('cx/widgets/MonthField')) {
+@if (cx-included("cx/widgets/MonthField")) {
    .#{$block}monthfield .#{$block}monthpicker {
       border-color: transparent;
       box-shadow: none;
    }
 }
 
-
-// Monthpicker 
-@if (cx-included('cx/widgets/MonthPicker')) {
+// Monthpicker
+@if (cx-included("cx/widgets/MonthPicker")) {
    .#{$block}monthpicker {
       background-color: $cx-default-background-color-dark;
-      border-color: rgba(255,255,255, .4);
-      text-transform: uppercase; 
+      border-color: rgba(255, 255, 255, 0.4);
+      text-transform: uppercase;
 
       td {
-         border-top: 1px solid rgba(255,255,255, .2);
+         border-top: 1px solid rgba(255, 255, 255, 0.2);
       }
 
       tbody:not(:first-child) {
          tr:first-child {
-            th, td {
-               border-top: 1px solid rgba(255,255,255, .2);
+            th,
+            td {
+               border-top: 1px solid rgba(255, 255, 255, 0.2);
             }
          }
       }
@@ -103,25 +104,25 @@ $mod: map-get($cx-besm, mod);
          background-color: lighten($cx-default-background-color-dark, 5);
          border-color: #636363;
          color: $cx-disabled-text;
-      } 
-   } 
+      }
+   }
 }
 
-@if (cx-included('cx/widgets/ColorPicker')) {
+@if (cx-included("cx/widgets/ColorPicker")) {
    .#{$block}colorfield .#{$block}colorpicker {
       border-color: transparent !important;
    }
 }
 
 // lookupfield
-@if (cx-included('cx/widgets/LookupField')) {
+@if (cx-included("cx/widgets/LookupField")) {
    .#{$element}lookupfield-tag-clear {
       color: #d0da7a;
    }
 }
 
 // select
-@if (cx-included('cx/widgets/Select')) {
+@if (cx-included("cx/widgets/Select")) {
    .#{$block}select option {
       color: $cx-default-color;
       background-color: $cx-default-background-color-lighter;
@@ -129,7 +130,9 @@ $mod: map-get($cx-besm, mod);
 }
 
 //override for chrome mobile default press effect
-.#{$block}button, .#{$block}tab, .#{$block}menu {
+.#{$block}button,
+.#{$block}tab,
+.#{$block}menu {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
 
@@ -139,11 +142,11 @@ $mod: map-get($cx-besm, mod);
 }
 
 //progressbar
-@if (cx-included('cx/widgets/ProgressBar')) {
+@if (cx-included("cx/widgets/ProgressBar")) {
    .#{$block}progressbar {
       margin: 10px 0 0;
       border-radius: 25px;
-      box-shadow: inset 0 -1px 1px rgba(255,255,255, .2);
+      box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.2);
 
       .#{$element}progressbar-label {
          top: -16px;
@@ -153,43 +156,41 @@ $mod: map-get($cx-besm, mod);
       .#{$element}progressbar-indicator {
          // background-image: linear-gradient(to bottom, #77b6e0, #1e5f8a);
          border-radius: 25px;
-         box-shadow: inset 0 -1px 2px rgba(255,255,255, .3);
-       }
+         box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.3);
+      }
    }
 }
 
 //LIST
 .#{$block}list.#{$state}selectable {
    &.#{$mod}bordered {
-         border-color: rgba(#d9dfe3, .3);
+      border-color: rgba(#d9dfe3, 0.3);
 
-         & > .#{$element}list-item:not(:first-child) {
-            border-top-color: rgba(#d9dfe3, .3);
-         }
+      & > .#{$element}list-item:not(:first-child) {
+         border-top-color: rgba(#d9dfe3, 0.3);
+      }
    }
 }
 
 //GRID
 .#{$element}grid-data {
    .#{$state}selectable & {
-   
       &.#{$state}selected {
-        background-color: rgba($cx-theme-primary-color, .2);
+         background-color: rgba($cx-theme-primary-color, 0.2);
 
          &.#{$state}cursor {
-            background-color: rgba($cx-theme-primary-color, .2);
+            background-color: rgba($cx-theme-primary-color, 0.2);
             color: #d0da7a;
          }
-      }   
+      }
    }
 }
 
-.#{$element}grid-group-footer, .#{$element}grid-group-caption {
-
+.#{$element}grid-group-footer,
+.#{$element}grid-group-caption {
    td {
       color: #b2dfdb;
       line-height: $cx-default-grid-data-line-height;
-     
    }
 
    &:not(:first-child) {
@@ -199,7 +200,6 @@ $mod: map-get($cx-besm, mod);
    }
 }
 
-
 .#{$element}grid-group-caption {
    td {
       color: $cx-theme-primary-color-light;
@@ -247,5 +247,5 @@ $mod: map-get($cx-besm, mod);
 
 // switch
 .cxe-switch-handle:active {
-	background-color: lighten($cx-default-switch-handle-background-color, 5);
-}
\ No newline at end of file
+   background-color: lighten($cx-default-switch-handle-background-color, 5);
+}
diff --git a/packages/cx-theme-space-blue/tsconfig.json b/packages/cx-theme-space-blue/tsconfig.json
new file mode 100644
index 000000000..f883e4b02
--- /dev/null
+++ b/packages/cx-theme-space-blue/tsconfig.json
@@ -0,0 +1,31 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx/*": ["../cx/build/*"]
+      },
+      "outDir": "./build",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "removeComments": false
+   },
+   "exclude": ["dist", "build"],
+   "include": ["src"]
+}
diff --git a/packages/cx/.mocharc.json b/packages/cx/.mocharc.json
new file mode 100644
index 000000000..488d9507f
--- /dev/null
+++ b/packages/cx/.mocharc.json
@@ -0,0 +1,5 @@
+{
+   "loader": "ts-node/esm",
+   "extension": ["ts", "tsx"],
+   "spec": ["src/**/*.spec.*"]
+}
diff --git a/packages/cx/.npmignore b/packages/cx/.npmignore
index 41d35b142..23886d7c1 100644
--- a/packages/cx/.npmignore
+++ b/packages/cx/.npmignore
@@ -1,2 +1,2 @@
-build
+!build
 !dist
\ No newline at end of file
diff --git a/packages/cx/build.js b/packages/cx/build.js
new file mode 100644
index 000000000..97b125c6f
--- /dev/null
+++ b/packages/cx/build.js
@@ -0,0 +1,133 @@
+const buildJS = require("cx-build-tools/buildJS"),
+   buildSCSS = require("cx-build-tools/buildSCSS"),
+   copyFiles = require("cx-build-tools/copyFiles"),
+   getPathResolver = require("cx-build-tools/getPathResolver"),
+   fs = require("fs"),
+   resolvePath = getPathResolver(__dirname),
+   cxSrc = getPathResolver(resolvePath("./src")),
+   cxBuild = getPathResolver(resolvePath("./build"));
+
+const entries = [
+   {
+      name: "util",
+      options: {
+         input: cxBuild("util/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "data",
+
+      options: {
+         input: cxBuild("data/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "ui",
+      options: {
+         input: cxBuild("ui/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "widgets",
+      options: {
+         input: cxBuild("widgets/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "svg",
+      options: {
+         input: cxBuild("svg/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "charts",
+      options: {
+         input: cxBuild("charts/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "hooks",
+      options: {
+         input: cxBuild("hooks/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "jsx-runtime",
+      options: {
+         input: cxBuild("jsx-runtime.js"),
+      },
+      output: {},
+   },
+];
+
+const externalPaths = {
+   [cxBuild("./util/")]: "cx/util",
+   [cxBuild("./data/")]: "cx/data",
+   [cxBuild("./ui/")]: "cx/ui",
+   [cxBuild("./widgets")]: "cx/widgets",
+   [cxBuild("./charts")]: "cx/charts",
+   [cxBuild("./svg/")]: "cx/svg",
+   [cxBuild("./hooks/")]: "cx/hooks",
+   [cxBuild("./jsx-runtime")]: "cx/jsx-runtime",
+};
+
+(async function buildAll() {
+   console.log("Building cx...");
+   try {
+      let distPath = resolvePath("./dist");
+      if (!fs.existsSync(distPath)) {
+         fs.mkdirSync(distPath);
+      }
+
+      // // Copy SCSS files from src to build
+      // copyFiles(cxSrc("."), cxBuild("."), ".scss");
+
+      await Promise.all([
+         buildJS(resolvePath("./src"), resolvePath("./dist"), entries, externalPaths),
+         buildSCSS([resolvePath("../cx-build-tools/reset.scss")], resolvePath("./dist/reset.css")),
+         buildSCSS(
+            [
+               cxSrc("variables.scss"),
+               resolvePath("../cx-build-tools/divide.scss"),
+               cxSrc("widgets/index.scss"),
+               cxSrc("ui/index.scss"),
+            ],
+            resolvePath("./dist/widgets.css"),
+         ),
+         buildSCSS(
+            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("charts/index.scss")],
+            resolvePath("./dist/charts.css"),
+         ),
+         buildSCSS(
+            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("svg/index.scss")],
+            resolvePath("./dist/svg.css"),
+         ),
+      ]);
+   } catch (err) {
+      console.log("Build error.", err);
+   }
+
+   // console.log("Building cx-redux...");
+   // await build(
+   //    resolvePath("../../cx-redux/src"),
+   //    resolvePath("../../cx-redux/dist"),
+   //    [
+   //       {
+   //          name: "index",
+   //          options: {
+   //             input: [resolvePath("../../cx-redux/src/index.js")]
+   //          },
+   //          output: {}
+   //       }
+   //    ],
+   //    null,
+   //    ["redux", "cx/data"]
+   // );
+})();
diff --git a/packages/cx/build/index.js b/packages/cx/build/index.js
deleted file mode 100644
index 4757773d4..000000000
--- a/packages/cx/build/index.js
+++ /dev/null
@@ -1,120 +0,0 @@
-const buildJS = require("cx-build-tools/buildJS"),
-   buildSCSS = require("cx-build-tools/buildSCSS"),
-   getPathResolver = require("cx-build-tools/getPathResolver"),
-   fs = require("fs"),
-   resolvePath = getPathResolver(__dirname),
-   cxSrc = getPathResolver(resolvePath("../src"));
-
-const entries = [
-   {
-      name: "util",
-      options: {
-         input: cxSrc("util/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "data",
-
-      options: {
-         input: cxSrc("data/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "ui",
-      options: {
-         input: cxSrc("ui/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "widgets",
-      options: {
-         input: cxSrc("widgets/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "svg",
-      options: {
-         input: cxSrc("svg/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "charts",
-      options: {
-         input: cxSrc("charts/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "hooks",
-      options: {
-         input: cxSrc("hooks/index.js"),
-      },
-      output: {},
-   },
-];
-
-const externalPaths = {
-   [cxSrc("./util/")]: "cx/util",
-   [cxSrc("./data/")]: "cx/data",
-   [cxSrc("./ui/")]: "cx/ui",
-   [cxSrc("./widgets")]: "cx/widgets",
-   [cxSrc("./charts")]: "cx/charts",
-   [cxSrc("./svg/")]: "cx/svg",
-   [cxSrc("./hooks/")]: "cx/hooks",
-};
-
-(async function buildAll() {
-   console.log("Building cx...");
-   try {
-      let distPath = resolvePath("../dist");
-      if (!fs.existsSync(distPath)) {
-         fs.mkdirSync(distPath);
-      }
-
-      await Promise.all([
-         buildJS(resolvePath("../src"), resolvePath("../dist"), entries, externalPaths),
-         buildSCSS([resolvePath("../../cx-build-tools/reset.scss")], resolvePath("../dist/reset.css")),
-         buildSCSS(
-            [
-               cxSrc("variables.scss"),
-               resolvePath("../../cx-build-tools/divide.scss"),
-               cxSrc("widgets/index.scss"),
-               cxSrc("ui/index.scss"),
-            ],
-            resolvePath("../dist/widgets.css")
-         ),
-         buildSCSS(
-            [cxSrc("variables.scss"), resolvePath("../../cx-build-tools/divide.scss"), cxSrc("charts/index.scss")],
-            resolvePath("../dist/charts.css")
-         ),
-         buildSCSS(
-            [cxSrc("variables.scss"), resolvePath("../../cx-build-tools/divide.scss"), cxSrc("svg/index.scss")],
-            resolvePath("../dist/svg.css")
-         ),
-      ]);
-   } catch (err) {
-      console.log("Build error.", err);
-   }
-
-   // console.log("Building cx-redux...");
-   // await build(
-   //    resolvePath("../../cx-redux/src"),
-   //    resolvePath("../../cx-redux/dist"),
-   //    [
-   //       {
-   //          name: "index",
-   //          options: {
-   //             input: [resolvePath("../../cx-redux/src/index.js")]
-   //          },
-   //          output: {}
-   //       }
-   //    ],
-   //    null,
-   //    ["redux", "cx/data"]
-   // );
-})();
diff --git a/packages/cx/charts.d.ts b/packages/cx/charts.d.ts
deleted file mode 100644
index 0418506a9..000000000
--- a/packages/cx/charts.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './src/charts';
\ No newline at end of file
diff --git a/packages/cx/charts.js b/packages/cx/charts.js
deleted file mode 100644
index 3082fc889..000000000
--- a/packages/cx/charts.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/charts';
\ No newline at end of file
diff --git a/packages/cx/data.d.ts b/packages/cx/data.d.ts
deleted file mode 100644
index f6ef4678a..000000000
--- a/packages/cx/data.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './src/data';
\ No newline at end of file
diff --git a/packages/cx/data.js b/packages/cx/data.js
deleted file mode 100644
index abd622bf6..000000000
--- a/packages/cx/data.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/data';
\ No newline at end of file
diff --git a/packages/cx/hooks.d.ts b/packages/cx/hooks.d.ts
deleted file mode 100644
index 82420a6a1..000000000
--- a/packages/cx/hooks.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './src/hooks';
\ No newline at end of file
diff --git a/packages/cx/hooks.js b/packages/cx/hooks.js
deleted file mode 100644
index 4b63212a1..000000000
--- a/packages/cx/hooks.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/hooks';
\ No newline at end of file
diff --git a/packages/cx/index.js b/packages/cx/index.js
deleted file mode 100644
index 9dc969551..000000000
--- a/packages/cx/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as util from './util';
-import * as data from './data';
-import * as ui from './ui';
-import * as widgets from './widgets';
-import * as svg from './svg';
-import * as charts from './charts';
-import * as hooks from './hooks';
-
-export {
-   util,
-   data,
-   ui,
-   widgets,
-   svg,
-   charts,
-   hooks
-};
diff --git a/packages/cx/locale/de-de.js b/packages/cx/locale/de-de.js
deleted file mode 100644
index f80bdcf34..000000000
--- a/packages/cx/locale/de-de.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'de-de';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Dieses Feld wird benötigt.',
-   validatingText: 'Wird validiert...',
-   validationExceptionText: 'Bei der Eingabevalidierung ist ein Fehler aufgetreten. Überprüfen Sie das Log für weitere Details.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Wird geladen...',
-   queryErrorText: 'Bei der Abfrage der gesuchten Daten ist ein Felhler aufgetreten.',
-   noResultsText: 'Keine Ergebnisse gefunden.',
-   minQueryLengthMessageText: 'Geben Sie mindestens {0} Zeichen ein.'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Wählen Sie {0:d} oder vorher.',
-   maxExclusiveErrorText: 'Wählen Sie ein Datum vor dem {0:d}.',
-   minValueErrorText: 'Wählen Sie {0:d} oder später.',
-   minExclusiveErrorText: 'Wählen Sie ein Datum nach dem {0:d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Heute',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Ungültiges Datum eingegeben.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Geben Sie {0} oder weniger ein.',
-   maxExclusiveErrorText: 'Geben Sie eine Zahl kleiner als {0} ein.',
-   minValueErrorText: 'Geben Sie {0} oder mehr ein.',
-   minExclusiveErrorText: 'Geben Sie eine Zahl größer als {0} ein.',
-   inputErrorText: 'Ungültige Zahl eingegeben.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'Ungültige Eingabe.',
-   minLengthValidationErrorText: 'Bitte tragen Sie noch {[{0}-{1}]} Zeichen ein.',
-   maxLengthValidationErrorText: 'Benutzen Sie {0} oder weniger Zeichen.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Wird hochgeladen...'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Ja",
-   noText: "Nein"
-});
\ No newline at end of file
diff --git a/packages/cx/locale/en-us.js b/packages/cx/locale/en-us.js
deleted file mode 100644
index 8e056c09c..000000000
--- a/packages/cx/locale/en-us.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'en-us';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'This field is required.',
-   validatingText: 'Validation is in progress...',
-   validationExceptionText: 'Something went wrong during input validation. Check log for more details.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Loading...',
-   queryErrorText: 'Error occurred while querying for lookup data.',
-   noResultsText: 'No results found.',
-   minQueryLengthMessageText: 'Type in at least {0} character(s).'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Select {0:d} or before.',
-   maxExclusiveErrorText: 'Select a date before {0:d}.',
-   minValueErrorText: 'Select {0:d} or later.',
-   minExclusiveErrorText: 'Select a date after {0:d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Today',
-   startWithMonday: false
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Invalid date entered.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Enter {0} or less.',
-   maxExclusiveErrorText: 'Enter a number less than {0}.',
-   minValueErrorText: 'Enter {0} or more.',
-   minExclusiveErrorText: 'Enter a number greater than {0}.',
-   inputErrorText: 'Invalid number entered.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'The entered value is not valid.',
-   minLengthValidationErrorText: 'Enter {[{0}-{1}]} more character(s).',
-   maxLengthValidationErrorText: 'Use {0} characters or fewer.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Upload is in progress.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Yes",
-   noText: "No"
-});
\ No newline at end of file
diff --git a/packages/cx/locale/es-es.js b/packages/cx/locale/es-es.js
deleted file mode 100644
index d62a8f662..000000000
--- a/packages/cx/locale/es-es.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'es-es';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Este campo es requerido.',
-   validatingText: 'La validación está en progreso...',
-   validationExceptionText: 'Algo salió mal durante la validación de entrada. Revise el registro para más detalles.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Cargando...',
-   queryErrorText: 'Se produjo un error al consultar los datos de búsqueda.',
-   noResultsText: 'No se han encontrado resultados.',
-   minQueryLengthMessageText: 'Escriba al menos {0} caracteres.'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Seleccione {0: d} o antes.',
-   maxExclusiveErrorText: 'Seleccione una fecha antes {0:d}.',
-   minValueErrorText: 'Seleccione {0: d} o posterior',
-   minExclusiveErrorText: 'Seleccione una fecha después de {0: d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Hoy',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Fecha introducida no es válida.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Ingrese {0} o menos.',
-   maxExclusiveErrorText: 'Ingrese un número menor que {0}.',
-   minValueErrorText: 'Ingrese {0} o más.',
-   minExclusiveErrorText: 'Ingrese un número mayor que {0}.',
-   inputErrorText: 'Número inválido ingresado.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'El valor ingresado no es válido.',
-   minLengthValidationErrorText: 'Ingrese {[{0} - {1}]} más caracteres.',
-   maxLengthValidationErrorText: 'Use {0} caracteres o menos.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'La carga está en progreso.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Sí",
-   noText: "No"
-});
\ No newline at end of file
diff --git a/packages/cx/locale/fr-fr.js b/packages/cx/locale/fr-fr.js
deleted file mode 100644
index e50611af2..000000000
--- a/packages/cx/locale/fr-fr.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'fr-fr';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Ce champ est requis.',
-   validatingText: 'La validation est en cours ...',
-   validationExceptionText: "Une erreur s'est produite lors de la validation des entrées. Consultez le journal pour plus de détails."
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Chargement...',
-   queryErrorText: "Une erreur s'est produite lors de l'interrogation des données de recherche.",
-   noResultsText: 'Aucun résultat trouvé.',
-   minQueryLengthMessageText: 'Tapez au moins {0} caractère (s).'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Sélectionnez {0:d} ou avant.',
-   maxExclusiveErrorText: 'Sélectionnez une date avant {0:d}.',
-   minValueErrorText: 'Sélectionnez {0:d} ou plus tard.',
-   minExclusiveErrorText: 'Sélectionnez une date après {0:d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Aujourd\'hui',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Date invalide entrée.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Entrez {0} ou moins.',
-   maxExclusiveErrorText: 'Entrez un nombre inférieur à {0}.',
-   minValueErrorText: 'Entrez {0} ou plus.',
-   minExclusiveErrorText: 'Entrez un nombre supérieur à {0}.',
-   inputErrorText: 'Numéro invalide entré.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: "La valeur entrée n'est pas valide.",
-   minLengthValidationErrorText: 'Entrez {[{0} - {1}]} plus de caractères.',
-   maxLengthValidationErrorText: 'Utilisez {0} caractères ou moins.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Le téléchargement est en cours.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Oui",
-   noText: "Non"
-});
\ No newline at end of file
diff --git a/packages/cx/locale/nl-nl.js b/packages/cx/locale/nl-nl.js
deleted file mode 100644
index b3042b338..000000000
--- a/packages/cx/locale/nl-nl.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'nl-nl';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Dit veld is verplicht.',
-   validatingText: 'Validatie is bezig ...',
-   validationExceptionText: 'Er is een probleem opgetreden bij het valideren van de gegevens. Controleer het logboek voor meer details '
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Bezig met laden ...',
-   queryErrorText: 'Er is een fout opgetreden bij het weergeven van gegevens.',
-   noResultsText: 'Geen resultaten gevonden',
-   minQueryLengthMessageText: 'Voer minimaal {0} tekens in.'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'De geselecteerde datum is later dan de laatst toegestane datum {0: d}',
-   maxExclusiveErrorText: 'De geselecteerde datum moet vóór {0: d}',
-   minValueErrorText: 'De geselecteerde datum is eerder dan {0: d}',
-   minExclusiveErrorText: 'De geselecteerde datum moet later zijn dan {0: d}',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Vandaag',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Ongeldige datum.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Voer {0} of minder in.',
-   maxExclusiveErrorText: 'Voer een nummer in dat kleiner is dan {0}.',
-   minValueErrorText: 'Voer {0} of meer in.',
-   minExclusiveErrorText: 'Voer een getal in dat groter is dan {0}.',
-   inputErrorText: 'Ongeldig nummer.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'De ingevoerde waarde is ongeldig.',
-   minLengthValidationErrorText: 'Vul {[{0} - {1}]} extra karakters in.',
-   maxLengthValidationErrorText: 'Gebruik {0} tekens of minder.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Upload is bezig.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Ja",
-   noText: "Nee"
-});
\ No newline at end of file
diff --git a/packages/cx/locale/pt-pt.js b/packages/cx/locale/pt-pt.js
deleted file mode 100644
index 4c444ce96..000000000
--- a/packages/cx/locale/pt-pt.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'pt-pt';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Este campo é obrigatório.',
-   validatingText: 'A validação está em andamento ...',
-   validationExceptionText: 'Algo deu errado durante a validação de entrada. Verifique o log para mais detalhes.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Carregando...',
-   queryErrorText: 'Ocorreu um erro ao consultar os dados de pesquisa.',
-   noResultsText: 'Nenhum resultado encontrado.',
-   minQueryLengthMessageText: 'Digite pelo menos {0} caractere(s).'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Selecione {0:d} ou antes.',
-   maxExclusiveErrorText: 'Selecione uma data antes de {0:d}.',
-   minValueErrorText: 'Selecione {0:d} ou posterior.',
-   minExclusiveErrorText: 'Selecione uma data após {0:d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Hoje',
-   startWithMonday: false
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Data inválida inserida.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Digite {0} ou menos.',
-   maxExclusiveErrorText: 'Digite um número menor que {0}.',
-   minValueErrorText: 'Digite {0} ou mais.',
-   minExclusiveErrorText: 'Digite um número maior que {0}.',
-   inputErrorText: 'Número inválido digitado.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'O valor inserido não é válido.',
-   minLengthValidationErrorText: 'Digite {[{0}-{1}]} mais caractere(s).',
-   maxLengthValidationErrorText: 'Use {0} caracteres ou menos.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'O upload está em andamento.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Sim",
-   noText: "Não"
-});
\ No newline at end of file
diff --git a/packages/cx/locale/sr-latn-ba.js b/packages/cx/locale/sr-latn-ba.js
deleted file mode 100644
index 3c61f12b8..000000000
--- a/packages/cx/locale/sr-latn-ba.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Localization } from 'cx/ui';
-
-var c = 'sr-latn-ba';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Ovo polje je obavezno.',
-   validatingText: 'Validacija je u toku...',
-   validationExceptionText: 'Došlo je do problema prilikom validacije podataka. Provjerite log za više detalja.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Učitavanje...',
-   queryErrorText: 'Došlo je do greške kod pribavljanja podataka za prikaz.',
-   noResultsText: 'Rezultati nisu pronađeni.',
-   minQueryLengthMessageText: 'Unesite najmanje {0} karakter(a).'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Izabrani datum je kasniji od posljednjeg dozvoljenog datuma {0:d}',
-   maxExclusiveErrorText: 'Izabrani datum bi trebao biti prije {0:d}',
-   minValueErrorText: 'Izabrani datum je raniji od {0:d}',
-   minExclusiveErrorText: 'Izabrani datum bi trebao biti kasniji od {0:d}',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Danas',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Neispravan datum.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Unesite {0} ili manje.',
-   maxExclusiveErrorText: 'Unesite broj manji od {0}.',
-   minValueErrorText: 'Unesite {0} ili više.',
-   minExclusiveErrorText: 'Unesite broj veći od {0}.',
-   inputErrorText: 'Neispravan broj.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'Unesena vrijednost nije validna.',
-   minLengthValidationErrorText: 'Unesite {[{0}-{1}]} dodatnih karaktera.',
-   maxLengthValidationErrorText: 'Koristite {0} karaktera ili manje.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Otpremanje je u toku.'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Da",
-   noText: "Ne"
-});
\ No newline at end of file
diff --git a/packages/cx/manifest.js b/packages/cx/manifest.js
deleted file mode 100644
index 305e31b61..000000000
--- a/packages/cx/manifest.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/manifest');
\ No newline at end of file
diff --git a/packages/cx/package.json b/packages/cx/package.json
index 04329f478..594e48936 100644
--- a/packages/cx/package.json
+++ b/packages/cx/package.json
@@ -1,11 +1,65 @@
 {
    "name": "cx",
-   "version": "25.11.1",
+   "version": "26.1.0",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
-   "main": "index.js",
-   "jsnext:main": "src/index.js",
+   "exports": {
+      "./data": {
+         "types": "./build/data/index.d.ts",
+         "default": "./build/data/index.js"
+      },
+      "./data/*": "./build/data/*",
+      "./util": {
+         "types": "./build/util/index.d.ts",
+         "default": "./build/util/index.js"
+      },
+      "./util/*": "./build/util/*",
+      "./widgets": {
+         "types": "./build/widgets/index.d.ts",
+         "default": "./build/widgets/index.js"
+      },
+      "./widgets/*": "./build/widgets/*",
+      "./ui": {
+         "types": "./build/ui/index.d.ts",
+         "default": "./build/ui/index.js"
+      },
+      "./ui/*": "./build/ui/*",
+      "./hooks": {
+         "types": "./build/hooks/index.d.ts",
+         "default": "./build/hooks/index.js"
+      },
+      "./hooks/*": "./build/hooks/*",
+      "./svg": {
+         "types": "./build/svg/index.d.ts",
+         "default": "./build/svg/index.js"
+      },
+      "./svg/*": "./build/svg/*",
+      "./charts": {
+         "types": "./build/charts/index.d.ts",
+         "default": "./build/charts/index.js"
+      },
+      "./charts/*": "./build/charts/*",
+      "./jsx-runtime": "./build/jsx-runtime.js",
+      "./jsx-runtime.js": "./build/jsx-runtime.js",
+      "./jsx-dev-runtime": "./build/jsx-dev-runtime.js",
+      "./jsx-dev-runtime.js": "./build/jsx-dev-runtime.js",
+      "./build/*": "./build/*",
+      "./src/core": "./src/core.d.ts",
+      "./src/*": "./src/*",
+      "./sass/*": "./src/*",
+      "./locale/*": "./build/locale/*",
+      "./manifest": "./dist/manifest.js",
+      "./manifest.js": "./dist/manifest.js"
+   },
+   "sideEffects": [
+      "./src/widgets/icons/*.tsx",
+      "./src/widgets/icons/*.ts",
+      "./build/widgets/icons/*.js"
+   ],
    "scripts": {
-      "build": "node build/index"
+      "build": "yarn compile && node build",
+      "compile": "tsc -p tsconfig.compile.json",
+      "check-types": "tsc --noEmit",
+      "test": "ts-mocha -p tsconfig.mocha.json"
    },
    "author": "Codaxy",
    "license": "MIT",
@@ -14,19 +68,32 @@
    },
    "homepage": "https://cxjs.io",
    "dependencies": {
+      "@types/route-parser": "^0.1.7",
       "intl-io": "^0.4.4",
       "route-parser": "^0.0.5"
    },
    "peerDependencies": {
-      "@types/react": "*",
-      "react": "*",
-      "react-dom": "*"
+      "@types/react": ">=18",
+      "@types/react-dom": ">=18",
+      "cx-react": ">=26",
+      "react": ">=18",
+      "react-dom": ">=18"
    },
    "repository": {
       "type": "git",
-      "url": "git@github.com:codaxy/cxjs.git"
+      "url": "git+ssh://git@github.com/codaxy/cxjs.git"
    },
    "devDependencies": {
-      "react-test-renderer": "^18.3.1"
+      "@types/jest": "^30.0.0",
+      "@types/mocha": "^10.0.10",
+      "@types/node": "^25.0.3",
+      "@types/react-dom": "^19.2.3",
+      "@types/react-test-renderer": "^19.1.0",
+      "mocha": "^11.7.5",
+      "react-test-renderer": "^19.2.3",
+      "ts-mocha": "^11.1.0",
+      "ts-node": "^10.9.2",
+      "tsconfig-paths": "^4.2.0",
+      "typescript": "^5.9.3"
    }
 }
diff --git a/packages/cx/src/charts/Bar.d.ts b/packages/cx/src/charts/Bar.d.ts
deleted file mode 100644
index 50a4d254b..000000000
--- a/packages/cx/src/charts/Bar.d.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as Cx from '../core';
-import { ColumnBarBaseProps } from './ColumnBarBase';
-
-interface BarProps extends ColumnBarBaseProps {
-   
-   /** Base value. Default value is `0`.  */
-   x0?: Cx.NumberProp,
-   
-   /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp,
-
-   /** Set to true to auto calculate size and offset. Available only if the x axis is a category axis. */
-   autoSize?: Cx.BooleanProp,
-   
-   height?: Cx.NumberProp,
- 
-   /** Base CSS class to be applied to the element. Defaults to `bar`. */
-   baseClass?: string,
-
-   /** Tooltip configuration. For more info see Tooltips. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp,
-
-   /** Selection configuration. */
-   selection?: Cx.Config
-
-}
-
-export class Bar extends Cx.Widget<BarProps> {}
\ No newline at end of file
diff --git a/packages/cx/src/charts/Bar.js b/packages/cx/src/charts/Bar.js
deleted file mode 100644
index 5b1c73da9..000000000
--- a/packages/cx/src/charts/Bar.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {ColumnBarBase} from './ColumnBarBase';
-import {Rect} from '../svg/util/Rect';
-import {isDefined} from '../util/isDefined';
-
-export class Bar extends ColumnBarBase {
-
-   init() {
-      if (isDefined(this.height))
-         this.size = this.height;
-
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         x0: undefined,
-         size: undefined,
-         autoSize: undefined
-      });
-   }
-
-   checkValid(data) {
-      return data.y != null && data.x != null && data.x0 != null
-   }
-
-   explore(context, instance) {
-      let {data, xAxis, yAxis} = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName)
-         instance.colorMap.acknowledge(data.colorName);
-
-      if (!data.valid)
-         return;
-
-      if (data.active) {
-
-         yAxis.acknowledge(data.y, data.size, data.offset);
-
-         if (data.autoSize)
-            yAxis.book(data.y, data.stacked ? data.stack : data.name);
-
-         if (data.stacked) {
-            xAxis.stacknowledge(data.stack, data.y, data.x0);
-            xAxis.stacknowledge(data.stack, data.y, data.x);
-         }
-         else {
-            if (!this.hiddenBase)         
-               xAxis.acknowledge(data.x0);
-            xAxis.acknowledge(data.x);
-         }
-         super.explore(context, instance);
-      }
-   }
-
-   calculateRect(instance) {
-      let {data} = instance;
-      var {offset, size} = data;
-
-      if (data.autoSize) {
-         var [index, count] = instance.yAxis.locate(data.y, data.stacked ? data.stack : data.name);
-         offset = size / count * (index - count / 2 + 0.5);
-         size = size / count;
-      }
-      
-      var x1 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x0) : instance.xAxis.map(data.x0);
-      var x2 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x) : instance.xAxis.map(data.x);
-      var y1 = instance.yAxis.map(data.y, offset - size / 2);
-      var y2 = instance.yAxis.map(data.y, offset + size / 2);
-
-      var bounds = new Rect({
-         l: Math.min(x1, x2),
-         r: Math.max(x1, x2),
-         t: Math.min(y1, y2),
-         b: Math.max(y1, y2)
-      });
-
-      return bounds;
-   }
-}
-
-Bar.prototype.baseClass = 'bar';
-Bar.prototype.x0 = 0;
-Bar.prototype.size = 1;
-Bar.prototype.autoSize = false;
-Bar.prototype.legendShape = 'bar';
-Bar.prototype.hiddenBase = false;
-
-Widget.alias('bar', Bar);
\ No newline at end of file
diff --git a/packages/cx/src/charts/Bar.scss b/packages/cx/src/charts/Bar.scss
index 4b61acc6d..be92b54d6 100644
--- a/packages/cx/src/charts/Bar.scss
+++ b/packages/cx/src/charts/Bar.scss
@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-bar(
    $name: 'bar',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-rect {
       stroke-width: 1px;
diff --git a/packages/cx/src/charts/Bar.ts b/packages/cx/src/charts/Bar.ts
new file mode 100644
index 000000000..143a2fd18
--- /dev/null
+++ b/packages/cx/src/charts/Bar.ts
@@ -0,0 +1,114 @@
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarBase, ColumnBarBaseConfig, ColumnBarBaseInstance } from "./ColumnBarBase";
+import { Rect } from "../svg/util/Rect";
+import { isDefined } from "../util/isDefined";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp } from "../ui/Prop";
+
+export interface BarConfig extends ColumnBarBaseConfig {
+   /** Base value. Default value is `0`. */
+   x0?: NumberProp;
+
+   /** Size (height) of the bar in axis units. */
+   size?: NumberProp;
+
+   /** Set to true to auto calculate size and offset. Available only if the y axis is a category axis. */
+   autoSize?: BooleanProp;
+
+   /** Alias for size. */
+   height?: number;
+
+   /** Hide the base of the bar (x0). */
+   hiddenBase?: boolean;
+}
+
+export class Bar extends ColumnBarBase {
+   declare x0: number;
+   declare size: number;
+   declare autoSize: boolean;
+   declare height: number;
+   declare hiddenBase: boolean;
+
+   constructor(config: BarConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (isDefined(this.height)) this.size = this.height;
+
+      super.init();
+   }
+
+   declareData(...args: any[]): any {
+      return super.declareData(
+         {
+            x0: undefined,
+            size: undefined,
+            autoSize: undefined,
+         },
+         ...args,
+      );
+   }
+
+   checkValid(data: any): boolean {
+      return data.y != null && data.x != null && data.x0 != null;
+   }
+
+   explore(context: RenderingContext, instance: ColumnBarBaseInstance): void {
+      let { data, xAxis, yAxis } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (!data.valid) return;
+
+      if (data.active) {
+         yAxis.acknowledge(data.y, data.size, data.offset);
+
+         if (data.autoSize) yAxis.book(data.y, data.stacked ? data.stack : data.name);
+
+         if (data.stacked) {
+            xAxis.stacknowledge(data.stack, data.y, data.x0);
+            xAxis.stacknowledge(data.stack, data.y, data.x);
+         } else {
+            if (!this.hiddenBase) xAxis.acknowledge(data.x0);
+            xAxis.acknowledge(data.x);
+         }
+         super.explore(context, instance);
+      }
+   }
+
+   calculateRect(instance: ColumnBarBaseInstance): Rect {
+      let { data } = instance;
+      var { offset, size } = data;
+
+      if (data.autoSize) {
+         var [index, count] = instance.yAxis.locate(data.y, data.stacked ? data.stack : data.name);
+         offset = (size / count) * (index - count / 2 + 0.5);
+         size = size / count;
+      }
+
+      var x1 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x0) : instance.xAxis.map(data.x0);
+      var x2 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x) : instance.xAxis.map(data.x);
+      var y1 = instance.yAxis.map(data.y, offset - size / 2);
+      var y2 = instance.yAxis.map(data.y, offset + size / 2);
+
+      var bounds = new Rect({
+         l: Math.min(x1, x2),
+         r: Math.max(x1, x2),
+         t: Math.min(y1, y2),
+         b: Math.max(y1, y2),
+      });
+
+      return bounds;
+   }
+}
+
+Bar.prototype.baseClass = "bar";
+Bar.prototype.x0 = 0;
+Bar.prototype.size = 1;
+Bar.prototype.autoSize = false;
+Bar.prototype.legendShape = "bar";
+Bar.prototype.hiddenBase = false;
+
+Widget.alias("bar", Bar);
diff --git a/packages/cx/src/charts/BarGraph.d.ts b/packages/cx/src/charts/BarGraph.d.ts
deleted file mode 100644
index 3fddfbb86..000000000
--- a/packages/cx/src/charts/BarGraph.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as Cx from "../core";
-import { ColumnBarGraphBaseProps } from "./ColumnBarGraphBase";
-
-interface BarGraphProps extends ColumnBarGraphBaseProps {
-   /** Base CSS class to be applied to the element. Defaults to `bargraph`. */
-   baseClass?: string;
-
-   /**
-    * Name of the property which holds the base value.
-    * Default value is `false`, which means x0 value is not read from the data array.
-    */
-   x0Field?: string | false;
-}
-
-export class BarGraph extends Cx.Widget<BarGraphProps> {}
diff --git a/packages/cx/src/charts/BarGraph.js b/packages/cx/src/charts/BarGraph.js
deleted file mode 100644
index f5a0e065c..000000000
--- a/packages/cx/src/charts/BarGraph.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { ColumnBarGraphBase } from "./ColumnBarGraphBase";
-import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
-import { isArray } from "../util/isArray";
-
-export class BarGraph extends ColumnBarGraphBase {
-   explore(context, instance) {
-      super.explore(context, instance);
-
-      let { data, yAxis, xAxis } = instance;
-
-      if (isArray(data.data)) {
-         data.data.forEach((p) => {
-            var x0 = this.x0Field ? p[this.x0Field] : data.x0;
-            var y = p[this.yField];
-            var x = p[this.xField];
-
-            yAxis.acknowledge(y, data.size, data.offset);
-
-            if (data.autoSize) yAxis.book(y, data.stacked ? data.stack : data.name);
-
-            if (data.stacked) {
-               xAxis.stacknowledge(data.stack, y, x0);
-               xAxis.stacknowledge(data.stack, y, x);
-            } else {
-               if (!this.hiddenBase) xAxis.acknowledge(x0);
-               xAxis.acknowledge(x);
-            }
-         });
-      }
-   }
-
-   renderGraph(context, instance) {
-      var { data, yAxis, xAxis, store } = instance;
-
-      if (!isArray(data.data)) return false;
-
-      var isSelected = this.selection.getIsSelectedDelegate(store);
-
-      return data.data.map((p, i) => {
-         var { offset, size } = data;
-
-         var x0 = this.x0Field ? p[this.x0Field] : data.x0;
-         var y = p[this.yField];
-         var x = p[this.xField];
-
-         if (data.autoSize) {
-            var [index, count] = instance.yAxis.locate(y, data.stacked ? data.stack : data.name);
-            offset = (size / count) * (index - count / 2 + 0.5);
-            size = size / count;
-         }
-
-         var y1 = yAxis.map(y, offset - size / 2);
-         var y2 = yAxis.map(y, offset + size / 2);
-         var x1 = data.stacked ? xAxis.stack(data.stack, y, x0) : xAxis.map(x0);
-         var x2 = data.stacked ? xAxis.stack(data.stack, y, x) : xAxis.map(x);
-
-         var color = this.colorIndexField ? p[this.colorIndexField] : data.colorIndex;
-         var state = {
-            selected: isSelected(p, i),
-            selectable: !this.selection.isDummy,
-            [`color-${color}`]: color != null,
-         };
-
-         let mmove, mleave;
-
-         if (this.tooltip) {
-            mmove = (e) =>
-               tooltipMouseMove(e, instance, this.tooltip, {
-                  target: e.target.parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-            mleave = (e) =>
-               tooltipMouseLeave(e, instance, this.tooltip, {
-                  target: e.target.parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-         }
-
-         return (
-            <rect
-               key={i}
-               className={this.CSS.element(this.baseClass, "bar", state)}
-               onClick={(e) => {
-                  this.handleClick(e, instance, p, i);
-               }}
-               x={Math.min(x1, x2)}
-               y={Math.min(y1, y2)}
-               width={Math.abs(x2 - x1)}
-               height={Math.abs(y2 - y1)}
-               style={data.style}
-               onMouseMove={mmove}
-               onMouseLeave={mleave}
-               rx={data.borderRadius}
-            />
-         );
-      });
-   }
-}
-
-BarGraph.prototype.baseClass = "bargraph";
-BarGraph.prototype.x0Field = false;
-BarGraph.prototype.x0 = 0;
-BarGraph.prototype.legendShape = "bar";
-BarGraph.prototype.hiddenBase = false;
-BarGraph.prototype.borderRadius = 0;
-
-Widget.alias("bargraph", BarGraph);
diff --git a/packages/cx/src/charts/BarGraph.scss b/packages/cx/src/charts/BarGraph.scss
index de07a39bf..9d4c1688e 100644
--- a/packages/cx/src/charts/BarGraph.scss
+++ b/packages/cx/src/charts/BarGraph.scss
@@ -1,11 +1,12 @@
+@use "sass:map";
 
 @mixin cx-bargraph(
    $name: 'bargraph',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-bar {
       stroke-width: 1px;
diff --git a/packages/cx/src/charts/BarGraph.tsx b/packages/cx/src/charts/BarGraph.tsx
new file mode 100644
index 000000000..2ed207172
--- /dev/null
+++ b/packages/cx/src/charts/BarGraph.tsx
@@ -0,0 +1,145 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarGraphBase, ColumnBarGraphBaseConfig, ColumnBarGraphBaseInstance } from "./ColumnBarGraphBase";
+import { tooltipMouseMove, tooltipMouseLeave, TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
+import { isArray } from "../util/isArray";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp } from "../ui/Prop";
+
+export interface BarGraphConfig extends ColumnBarGraphBaseConfig {
+   /**
+    * Name of the property which holds the base value.
+    * Default value is `false`, which means x0 value is not read from the data array.
+    */
+   x0Field?: string | false;
+
+   /** Bar base value. Default value is `0`. */
+   x0?: NumberProp;
+
+   /** Hide the base of the bar (x0). */
+   hiddenBase?: boolean;
+
+   /** Tooltip configuration. */
+   tooltip?: any;
+}
+
+export interface BarGraphInstance extends ColumnBarGraphBaseInstance, TooltipParentInstance {}
+
+export class BarGraph extends ColumnBarGraphBase {
+   declare x0Field: string | false;
+   declare x0: number;
+   declare hiddenBase: boolean;
+   declare tooltip: any;
+
+   constructor(config: BarGraphConfig) {
+      super(config);
+   }
+
+   explore(context: RenderingContext, instance: BarGraphInstance): void {
+      super.explore(context, instance);
+
+      let { data, yAxis, xAxis } = instance;
+
+      if (isArray(data.data)) {
+         data.data.forEach((p: any) => {
+            var x0 = this.x0Field ? p[this.x0Field] : data.x0;
+            var y = p[this.yField];
+            var x = p[this.xField];
+
+            yAxis.acknowledge(y, data.size, data.offset);
+
+            if (data.autoSize) yAxis.book(y, data.stacked ? data.stack : data.name);
+
+            if (data.stacked) {
+               xAxis.stacknowledge(data.stack, y, x0);
+               xAxis.stacknowledge(data.stack, y, x);
+            } else {
+               if (!this.hiddenBase) xAxis.acknowledge(x0);
+               xAxis.acknowledge(x);
+            }
+         });
+      }
+   }
+
+   renderGraph(context: RenderingContext, instance: BarGraphInstance): React.ReactNode {
+      var { data, yAxis, xAxis, store } = instance;
+
+      if (!isArray(data.data)) return false;
+
+      var isSelected = this.selection.getIsSelectedDelegate(store);
+
+      return data.data.map((p: any, i: number) => {
+         var { offset, size } = data;
+
+         var x0 = this.x0Field ? p[this.x0Field] : data.x0;
+         var y = p[this.yField];
+         var x = p[this.xField];
+
+         if (data.autoSize) {
+            var [index, count] = instance.yAxis.locate(y, data.stacked ? data.stack : data.name);
+            offset = (size / count) * (index - count / 2 + 0.5);
+            size = size / count;
+         }
+
+         var y1 = yAxis.map(y, offset - size / 2);
+         var y2 = yAxis.map(y, offset + size / 2);
+         var x1 = data.stacked ? xAxis.stack(data.stack, y, x0) : xAxis.map(x0);
+         var x2 = data.stacked ? xAxis.stack(data.stack, y, x) : xAxis.map(x);
+
+         var color = this.colorIndexField ? p[this.colorIndexField as string] : data.colorIndex;
+         var state: Record<string, any> = {
+            selected: isSelected(p, i),
+            selectable: !this.selection.isDummy,
+            [`color-${color}`]: color != null,
+         };
+
+         let mmove: ((e: React.MouseEvent) => void) | undefined,
+            mleave: ((e: React.MouseEvent) => void) | undefined;
+
+         if (this.tooltip) {
+            mmove = (e) =>
+               tooltipMouseMove(e, instance, this.tooltip, {
+                  target: (e.target as any).parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+            mleave = (e) =>
+               tooltipMouseLeave(e, instance, this.tooltip, {
+                  target: (e.target as any).parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+         }
+
+         return (
+            <rect
+               key={i}
+               className={this.CSS.element(this.baseClass, "bar", state)}
+               onClick={(e) => {
+                  this.handleClick(e, instance, p, i);
+               }}
+               x={Math.min(x1, x2)}
+               y={Math.min(y1, y2)}
+               width={Math.abs(x2 - x1)}
+               height={Math.abs(y2 - y1)}
+               style={data.style}
+               onMouseMove={mmove}
+               onMouseLeave={mleave}
+               rx={data.borderRadius}
+            />
+         );
+      });
+   }
+}
+
+BarGraph.prototype.baseClass = "bargraph";
+BarGraph.prototype.x0Field = false;
+BarGraph.prototype.x0 = 0;
+BarGraph.prototype.legendShape = "bar";
+BarGraph.prototype.hiddenBase = false;
+BarGraph.prototype.borderRadius = 0;
+
+Widget.alias("bargraph", BarGraph);
diff --git a/packages/cx/src/charts/BubbleGraph.js b/packages/cx/src/charts/BubbleGraph.js
deleted file mode 100644
index b470fd840..000000000
--- a/packages/cx/src/charts/BubbleGraph.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {Selection} from '../ui/selection/Selection';
-import {CSS} from '../ui/CSS';
-import {isArray} from '../util/isArray';
-
-export class BubbleGraph extends Widget {
-   declareData() {
-
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(...arguments, {
-         data: undefined,
-         bubbleRadius: undefined,
-         bubbleStyle: {
-            structured: true
-         }
-      }, selection);
-   }
-   
-   init() {
-      this.selection = Selection.create(this.selection, {
-         records: this.data
-      });
-      super.init();
-   }
-
-   explore(context, instance) {
-      instance.axes = context.axes;
-      super.explore(context, instance);
-      var {data} = instance;
-      if (isArray(data.data)) {
-         data.data.forEach(p => {
-            instance.axes[this.xAxis].acknowledge(p[this.xField]);
-            instance.axes[this.yAxis].acknowledge(p[this.yField]);
-         });
-      }
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      if (instance.axes[this.xAxis].shouldUpdate || instance.axes[this.yAxis].shouldUpdate)
-         instance.markShouldUpdate(context);
-   }
-
-   render(context, instance, key) {
-      var {data} = instance;
-      return <g key={key} className={data.classNames}>
-         {this.renderData(context, instance)}
-      </g>;
-   }
-
-   renderData(context, instance) {
-      var {data, axes, store} = instance;
-
-      var xAxis = axes[this.xAxis];
-      var yAxis = axes[this.yAxis];
-
-      return isArray(data.data)
-         && data.data.map((p, i) => {
-            var selected = this.selection && this.selection.isSelected(store, p, i);
-            var classes = CSS.element(this.baseClass, 'bubble', {
-               selected: selected
-            });
-            return <circle key={i}
-                           className={classes}
-                           cx={xAxis.map(p[this.xField])}
-                           cy={yAxis.map(p[this.yField])}
-                           r={p[this.rField] || data.bubbleRadius}
-                           style={p.style || data.bubbleStyle}
-                           onClick={e=>{this.onBubbleClick(e, instance, i)}}
-               />
-         });
-   }
-
-   onBubbleClick(e, {data, store}, index) {
-      var bubble = data.data[index];
-      this.selection.select(store, bubble, index, {
-         toggle: e.ctrlKey
-      });
-   }
-}
-
-BubbleGraph.prototype.baseClass = 'bubblegraph';
-BubbleGraph.prototype.xAxis = 'x';
-BubbleGraph.prototype.yAxis = 'y';
-
-BubbleGraph.prototype.xField = 'x';
-BubbleGraph.prototype.yField = 'y';
-BubbleGraph.prototype.rField = 'r';
-
-BubbleGraph.prototype.bubbleRadius = 10;
-
-Widget.alias('bubble-graph', BubbleGraph);
\ No newline at end of file
diff --git a/packages/cx/src/charts/BubbleGraph.scss b/packages/cx/src/charts/BubbleGraph.scss
index e9ddee18c..f20f5893b 100644
--- a/packages/cx/src/charts/BubbleGraph.scss
+++ b/packages/cx/src/charts/BubbleGraph.scss
@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-bubblegraph(
    $name: 'bubblegraph',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
    }
diff --git a/packages/cx/src/charts/BubbleGraph.tsx b/packages/cx/src/charts/BubbleGraph.tsx
new file mode 100644
index 000000000..2ec40c1da
--- /dev/null
+++ b/packages/cx/src/charts/BubbleGraph.tsx
@@ -0,0 +1,165 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { Selection, SimpleSelection } from "../ui/selection/Selection";
+import type { KeySelection } from "../ui/selection/KeySelection";
+import type { PropertySelection } from "../ui/selection/PropertySelection";
+import { CSS } from "../ui/CSS";
+import { isArray } from "../util/isArray";
+import { Instance } from "../ui/Instance";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { Prop, StyleProp, DataRecord } from "../ui/Prop";
+import { Create } from "../util/Component";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface BubbleGraphConfig extends WidgetConfig {
+   /** Data array for the bubbles. */
+   data?: Prop<DataRecord[]>;
+
+   /** Default bubble radius. Default is 10. */
+   bubbleRadius?: number;
+
+   /** Style object applied to all bubbles. */
+   bubbleStyle?: StyleProp;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+
+   /** Name of the field in data objects that contains x values. Default is 'x'. */
+   xField?: string;
+
+   /** Name of the field in data objects that contains y values. Default is 'y'. */
+   yField?: string;
+
+   /** Name of the field in data objects that contains radius values. Default is 'r'. */
+   rField?: string;
+
+   /** Selection configuration. */
+   selection?: Create<typeof Selection> | Create<typeof KeySelection> | Create<typeof PropertySelection> | Create<typeof SimpleSelection>;
+}
+
+export interface BubbleGraphInstance extends Instance {
+   axes: { [key: string]: any };
+}
+
+export class BubbleGraph extends Widget<BubbleGraphConfig> {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare xField: string;
+   declare yField: string;
+   declare rField: string;
+   declare bubbleRadius: number;
+   declare selection: Selection;
+   declare data?: Prop<DataRecord[]>;
+
+   constructor(config?: BubbleGraphConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(
+         ...args,
+         {
+            data: undefined,
+            bubbleRadius: undefined,
+            bubbleStyle: {
+               structured: true,
+            },
+         },
+         selection,
+      );
+   }
+
+   init() {
+      this.selection = Selection.create(this.selection as Create<typeof Selection>, {
+         records: this.data,
+      });
+      super.init();
+   }
+
+   explore(context: ChartRenderingContext, instance: BubbleGraphInstance) {
+      instance.axes = context.axes!;
+      super.explore(context, instance);
+      var { data } = instance;
+      const d = data as any;
+      if (isArray(d.data)) {
+         d.data.forEach((p: DataRecord) => {
+            instance.axes[this.xAxis].acknowledge(p[this.xField]);
+            instance.axes[this.yAxis].acknowledge(p[this.yField]);
+         });
+      }
+   }
+
+   prepare(context: ChartRenderingContext, instance: BubbleGraphInstance) {
+      super.prepare?.(context, instance);
+      if (instance.axes[this.xAxis].shouldUpdate || (instance.axes as any)[this.yAxis].shouldUpdate)
+         instance.markShouldUpdate(context);
+   }
+
+   render(context: ChartRenderingContext, instance: BubbleGraphInstance, key: string): CxChild {
+      var { data } = instance;
+      return (
+         <g key={key} className={(data as any).classNames}>
+            {this.renderData(context, instance)}
+         </g>
+      );
+   }
+
+   renderData(context: ChartRenderingContext, instance: BubbleGraphInstance): any {
+      var { data, axes, store } = instance;
+      const d = data as any;
+
+      var xAxis = (axes as any)[this.xAxis];
+      var yAxis = (axes as any)[this.yAxis];
+
+      return (
+         isArray(d.data) &&
+         d.data.map((p: DataRecord, i: number) => {
+            var selected = this.selection && this.selection.isSelected(store, p, i);
+            var classes = CSS.element(this.baseClass, "bubble", {
+               selected: selected,
+            });
+            return (
+               <circle
+                  key={i}
+                  className={classes}
+                  cx={xAxis.map(p[this.xField])}
+                  cy={yAxis.map(p[this.yField])}
+                  r={(p as any)[this.rField] || d.bubbleRadius}
+                  style={(p as any).style || d.bubbleStyle}
+                  onClick={(e) => {
+                     this.onBubbleClick(e, instance, i);
+                  }}
+               />
+            );
+         })
+      );
+   }
+
+   onBubbleClick(e: React.MouseEvent, instance: BubbleGraphInstance, index: number) {
+      const { data, store } = instance;
+      const d = data as any;
+      var bubble = d.data[index];
+      this.selection.select(store, bubble, index, {
+         toggle: e.ctrlKey,
+      });
+   }
+}
+
+BubbleGraph.prototype.baseClass = "bubblegraph";
+BubbleGraph.prototype.xAxis = "x";
+BubbleGraph.prototype.yAxis = "y";
+
+BubbleGraph.prototype.xField = "x";
+BubbleGraph.prototype.yField = "y";
+BubbleGraph.prototype.rField = "r";
+
+BubbleGraph.prototype.bubbleRadius = 10;
+
+Widget.alias("bubble-graph", BubbleGraph);
diff --git a/packages/cx/src/charts/Chart.d.ts b/packages/cx/src/charts/Chart.d.ts
deleted file mode 100644
index e9e15df88..000000000
--- a/packages/cx/src/charts/Chart.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-
-interface ChartProps extends BoundedObjectProps {
-   /** Axis definition. Each key represent an axis, and each value hold axis configuration. */
-   axes?: Cx.Config;
-
-   /** Put axes over data series.  */
-   axesOnTop?: boolean;
-}
-
-export class Chart extends Cx.Widget<ChartProps> {}
diff --git a/packages/cx/src/charts/Chart.js b/packages/cx/src/charts/Chart.js
deleted file mode 100644
index 295a52fa3..000000000
--- a/packages/cx/src/charts/Chart.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Widget, VDOM, getContent } from "../ui/Widget";
-import { BoundedObject } from "../svg/BoundedObject";
-import { Axis } from "./axis/Axis";
-
-export class Chart extends BoundedObject {
-   init() {
-      super.init();
-
-      if (!this.axes) this.axes = {};
-
-      for (let axis in this.axes) {
-         this.axes[axis] = Axis.create(this.axes[axis]);
-      }
-   }
-
-   explore(context, instance) {
-      instance.calculators = { ...context.axes };
-
-      context.push("axes", instance.calculators);
-      instance.axes = {};
-
-      //axes need to be registered before children to be processed first
-      for (let axis in this.axes) {
-         let axisInstance = instance.getChild(context, this.axes[axis]);
-         if (axisInstance.scheduleExploreIfVisible(context)) {
-            instance.axes[axis] = axisInstance;
-            instance.calculators[axis] = this.axes[axis].report(context, axisInstance);
-         }
-      }
-
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("axes");
-
-      for (let axis in instance.axes) {
-         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
-      }
-   }
-
-   prepare(context, instance) {
-      context.push("axes", instance.calculators);
-      super.prepare(context, instance);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("axes");
-      super.prepareCleanup(context, instance);
-   }
-
-   render(context, instance, key) {
-      let axes = [];
-      for (let k in instance.axes) {
-         axes.push(getContent(instance.axes[k].render(context, key + "-axis-" + k)));
-      }
-
-      let result = [];
-
-      if (!this.axesOnTop) result.push(axes);
-
-      result.push(this.renderChildren(context, instance));
-
-      if (this.axesOnTop) result.push(axes);
-
-      return result;
-   }
-}
-
-Chart.prototype.anchors = "0 1 1 0";
-Chart.prototype.styled = true;
-Chart.prototype.isPureContainer = true;
-Chart.prototype.axesOnTop = false;
-
-Widget.alias("chart", Chart);
diff --git a/packages/cx/src/charts/Chart.ts b/packages/cx/src/charts/Chart.ts
new file mode 100644
index 000000000..65fa86dc7
--- /dev/null
+++ b/packages/cx/src/charts/Chart.ts
@@ -0,0 +1,108 @@
+import { Widget, VDOM, getContent } from "../ui/Widget";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance, SvgRenderingContext } from "../svg/BoundedObject";
+import { Axis } from "./axis/Axis";
+import type { NumericAxis } from "./axis/NumericAxis";
+import type { CategoryAxis } from "./axis/CategoryAxis";
+import type { TimeAxis } from "./axis/TimeAxis";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Create } from "../util/Component";
+
+/** Typed context interface for chart-related context properties */
+export interface ChartRenderingContext extends SvgRenderingContext {
+   axes?: Record<string, any>;
+}
+
+export interface ChartConfig extends BoundedObjectConfig {
+   /** Axis definition. Each key represent an axis, and each value hold axis configuration. */
+   axes?: Record<
+      string,
+      Create<typeof Axis> | Create<typeof NumericAxis> | Create<typeof CategoryAxis> | Create<typeof TimeAxis>
+   >;
+
+   /** Put axes over data series. */
+   axesOnTop?: boolean;
+}
+
+export interface ChartInstance extends BoundedObjectInstance {
+   calculators: Record<string, any>;
+   axes: Record<string, any>;
+}
+
+export class Chart extends BoundedObject<ChartConfig, ChartInstance> {
+   declare axes: Record<string, any>;
+   declare axesOnTop: boolean;
+
+   constructor(config?: ChartConfig) {
+      super(config);
+   }
+
+   init(): void {
+      super.init();
+
+      if (!this.axes) this.axes = {};
+
+      for (let axis in this.axes) {
+         this.axes[axis] = Axis.create(this.axes[axis]);
+      }
+   }
+
+   explore(context: ChartRenderingContext, instance: ChartInstance): void {
+      instance.calculators = { ...context.axes };
+
+      context.push("axes", instance.calculators);
+      instance.axes = {};
+
+      //axes need to be registered before children to be processed first
+      for (let axis in this.axes) {
+         let axisInstance = instance.getChild(context, this.axes[axis]);
+         if (axisInstance.scheduleExploreIfVisible(context)) {
+            instance.axes[axis] = axisInstance;
+            instance.calculators[axis] = this.axes[axis].report(context, axisInstance);
+         }
+      }
+
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.pop("axes");
+
+      for (let axis in instance.axes) {
+         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
+      }
+   }
+
+   prepare(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.push("axes", instance.calculators);
+      super.prepare(context, instance);
+   }
+
+   prepareCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.pop("axes");
+      super.prepareCleanup(context, instance);
+   }
+
+   render(context: ChartRenderingContext, instance: ChartInstance, key: string): any[] {
+      let axes = [];
+      for (let k in instance.axes) {
+         axes.push(getContent(instance.axes[k].render(context, key + "-axis-" + k)));
+      }
+
+      let result = [];
+
+      if (!this.axesOnTop) result.push(axes);
+
+      result.push(this.renderChildren(context, instance));
+
+      if (this.axesOnTop) result.push(axes);
+
+      return result;
+   }
+}
+
+Chart.prototype.anchors = "0 1 1 0";
+Chart.prototype.styled = true;
+Chart.prototype.isPureContainer = true;
+Chart.prototype.axesOnTop = false;
+
+Widget.alias("chart", Chart);
diff --git a/packages/cx/src/charts/ColorMap.d.ts b/packages/cx/src/charts/ColorMap.d.ts
deleted file mode 100644
index 68a42f47b..000000000
--- a/packages/cx/src/charts/ColorMap.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as Cx from "../core";
-import { PureContainer } from "../ui/PureContainer";
-
-interface ColorMapProps extends Cx.WidgetProps {
-   onGetCache?: string | (() => Cx.Record);
-   names?: Cx.Prop<string[]>;
-   step?: Cx.NumberProp;
-   offset?: Cx.NumberProp;
-   size?: Cx.NumberProp;
-}
-
-export class ColorMap extends Cx.Widget<ColorMapProps> {
-   static Scope: ColorMapScope;
-}
-
-export class ColorMapScope extends PureContainer {}
-
-export class ColorIndex {
-   acknowledge(name: string);
-   map(name: string): number;
-}
diff --git a/packages/cx/src/charts/ColorMap.js b/packages/cx/src/charts/ColorMap.js
deleted file mode 100644
index 8110f77aa..000000000
--- a/packages/cx/src/charts/ColorMap.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Widget } from '../ui/Widget';
-import { PureContainer } from '../ui/PureContainer';
-
-export class ColorMap extends Widget {
-   declareData() {
-      super.declareData(...arguments, {
-         names: undefined,
-         offset: undefined,
-         step: undefined,
-         size: undefined,
-      })
-   }
-
-   explore(context, instance) {
-      if (!context.colorMaps)
-         context.colorMaps = {};
-
-      context.getColorMap = (colorMap) => {
-         let map = context.colorMaps[colorMap];
-         if (!map) {
-            let cache = this.onGetCache ? instance.invoke("onGetCache") : {};
-            map = cache[colorMap];
-            if (!map) {
-               let { data } = instance;
-               map = context.colorMaps[colorMap] = cache[colorMap] = new ColorIndex({
-                  offset: data.offset,
-                  step: data.step,
-                  size: data.size
-               });
-            }
-            if (Array.isArray(instance.data.names))
-               instance.data.names.forEach(name => map.acknowledge(name));
-         }
-         return map;
-      }
-   }
-
-   render() {
-      return null;
-   }
-}
-
-ColorMap.prototype.offset = 0;
-ColorMap.prototype.step = null;
-ColorMap.prototype.size = 16;
-
-export class ColorMapScope extends PureContainer {
-   explore(context, instance) {
-      context.push('colorMaps', instance.colorMaps = {});
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop('colorMaps');
-   }
-
-   prepare(context, instance) {
-      context.push('colorMaps', instance.colorMaps);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop('colorMaps');
-   }
-}
-
-ColorMap.Scope = ColorMapScope;
-Widget.alias('color-map', ColorMap);
-
-export class ColorIndex {
-   constructor({ offset, step, size }) {
-      this.colorMap = {};
-      this.dirty = true;
-      this.offset = offset;
-      this.step = step;
-      this.size = size;
-   }
-
-   acknowledge(name) {
-      if (!(name in this.colorMap)) {
-         this.colorMap[name] = Object.keys(this.colorMap).length;
-         this.dirty = true;
-      }
-   }
-
-   map(name) {
-      if (this.dirty) {
-         this.dirty = false;
-         if (!this.step) {
-            let n = Object.keys(this.colorMap).length;
-            this.step = n > 0 ? this.size / n : 1;
-         }
-      }
-
-      let index = this.colorMap[name] || 0;
-      return Math.round(this.offset + this.step * index + this.size) % this.size;
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/charts/ColorMap.ts b/packages/cx/src/charts/ColorMap.ts
new file mode 100644
index 000000000..785b47e29
--- /dev/null
+++ b/packages/cx/src/charts/ColorMap.ts
@@ -0,0 +1,150 @@
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { PureContainer, PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Prop, NumberProp, DataRecord } from "../ui/Prop";
+
+export interface ColorMapConfig extends WidgetConfig {
+   /** A callback function used to get a cache object for storing color maps across renders. */
+   onGetCache?: string | (() => DataRecord);
+
+   /** An array of names to pre-register in the color map. */
+   names?: Prop<string[]>;
+
+   /** The step value for color indexing. If not specified, it's calculated based on the number of entries. */
+   step?: NumberProp;
+
+   /** The starting offset for color indexing. Default is 0. */
+   offset?: NumberProp;
+
+   /** The size of the color palette. Default is 16. */
+   size?: NumberProp;
+}
+
+export interface ColorMapInstance extends Instance {
+   colorMaps?: { [key: string]: ColorIndex };
+}
+
+export class ColorMap extends Widget<ColorMapConfig> {
+   declare offset: number;
+   declare step: number | null;
+   declare size: number;
+   declare onGetCache?: ColorMapConfig["onGetCache"];
+
+   static Scope: typeof ColorMapScope;
+
+   constructor(config?: ColorMapConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         names: undefined,
+         offset: undefined,
+         step: undefined,
+         size: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: Instance) {
+      if (!context.colorMaps) context.colorMaps = {};
+
+      context.getColorMap = (colorMap: string) => {
+         let map = (context.colorMaps as any)[colorMap] as ColorIndex | undefined;
+         if (!map) {
+            let cache: { [key: string]: ColorIndex } = this.onGetCache ? instance.invoke("onGetCache") : {};
+            map = cache[colorMap];
+            if (!map) {
+               let { data } = instance;
+               const d = data as any;
+               map = (context.colorMaps as any)[colorMap] = cache[colorMap] = new ColorIndex({
+                  offset: d.offset,
+                  step: d.step,
+                  size: d.size,
+               });
+            }
+            const names = (instance.data as any).names;
+            if (Array.isArray(names)) names.forEach((name: string) => map!.acknowledge(name));
+         }
+         return map;
+      };
+   }
+
+   render() {
+      return null;
+   }
+}
+
+ColorMap.prototype.offset = 0;
+ColorMap.prototype.step = null;
+ColorMap.prototype.size = 16;
+
+export interface ColorMapScopeConfig extends PureContainerConfig {}
+
+export class ColorMapScope extends PureContainerBase<ColorMapScopeConfig, ColorMapInstance> {
+   constructor(config?: ColorMapScopeConfig) {
+      super(config);
+   }
+
+   explore(context: RenderingContext, instance: ColorMapInstance) {
+      context.push("colorMaps", (instance.colorMaps = {}));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: ColorMapInstance) {
+      context.pop("colorMaps");
+   }
+
+   prepare(context: RenderingContext, instance: ColorMapInstance) {
+      context.push("colorMaps", instance.colorMaps);
+   }
+
+   prepareCleanup(context: RenderingContext, instance: ColorMapInstance) {
+      context.pop("colorMaps");
+   }
+}
+
+ColorMap.Scope = ColorMapScope;
+Widget.alias("color-map", ColorMap);
+
+export interface ColorIndexConfig {
+   offset: number;
+   step: number | null;
+   size: number;
+}
+
+export class ColorIndex {
+   colorMap: { [key: string]: number };
+   dirty: boolean;
+   offset: number;
+   step: number | null;
+   size: number;
+
+   constructor({ offset, step, size }: ColorIndexConfig) {
+      this.colorMap = {};
+      this.dirty = true;
+      this.offset = offset;
+      this.step = step;
+      this.size = size;
+   }
+
+   acknowledge(name: string) {
+      if (!(name in this.colorMap)) {
+         this.colorMap[name] = Object.keys(this.colorMap).length;
+         this.dirty = true;
+      }
+   }
+
+   map(name: string): number {
+      if (this.dirty) {
+         this.dirty = false;
+         if (!this.step) {
+            let n = Object.keys(this.colorMap).length;
+            this.step = n > 0 ? this.size / n : 1;
+         }
+      }
+
+      let index = this.colorMap[name] || 0;
+      return Math.round(this.offset + this.step! * index + this.size) % this.size;
+   }
+}
diff --git a/packages/cx/src/charts/Column.d.ts b/packages/cx/src/charts/Column.d.ts
deleted file mode 100644
index 64a59120a..000000000
--- a/packages/cx/src/charts/Column.d.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as Cx from "../core";
-import { ColumnBarBaseProps } from "./ColumnBarBase";
-
-interface ColumnProps extends ColumnBarBaseProps {
-   /** Column base value. Default value is `0`. */
-   y0?: Cx.NumberProp;
-
-   /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp;
-
-   /** Set to true to auto calculate size and offset. Available only if the x axis is a category axis. */
-   autoSize?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `column`. */
-   baseClass?: boolean;
-
-   width?: number;
-
-   /** Selection configuration. */
-   selection?: Config;
-
-   /** Tooltip configuration. For more info see Tooltips. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp;
-
-   /** Minimum column size in pixels. Useful for indicating very small values. Default value is 0.5. */
-   minPixelHeight?: number;
-}
-
-export class Column extends Cx.Widget<ColumnProps> {}
diff --git a/packages/cx/src/charts/Column.js b/packages/cx/src/charts/Column.js
deleted file mode 100644
index 7deee86c1..000000000
--- a/packages/cx/src/charts/Column.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { ColumnBarBase } from "./ColumnBarBase";
-import { Rect } from "../svg/util/Rect";
-import { isDefined } from "../util/isDefined";
-
-export class Column extends ColumnBarBase {
-   init() {
-      if (isDefined(this.width)) this.size = this.width;
-
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         y0: undefined,
-         size: undefined,
-         autoSize: undefined,
-      });
-   }
-
-   checkValid(data) {
-      return data.x != null && data.y != null && data.y0 != null;
-   }
-
-   explore(context, instance) {
-      let { data, xAxis, yAxis } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      if (!data.valid) return;
-
-      if (data.active) {
-         xAxis.acknowledge(data.x, data.size, data.offset);
-
-         if (data.autoSize) xAxis.book(data.x, data.stacked ? data.stack : data.name);
-
-         if (data.stacked) {
-            yAxis.stacknowledge(data.stack, data.x, data.y0);
-            yAxis.stacknowledge(data.stack, data.x, data.y);
-         } else {
-            if (!this.hiddenBase) yAxis.acknowledge(data.y0);
-            yAxis.acknowledge(data.y);
-         }
-         super.explore(context, instance);
-      }
-   }
-
-   calculateRect(instance) {
-      var { data } = instance;
-      var { offset, size } = data;
-
-      if (data.autoSize) {
-         var [index, count] = instance.xAxis.locate(data.x, data.stacked ? data.stack : data.name);
-         offset = (size / count) * (index - count / 2 + 0.5);
-         size = size / count;
-      }
-
-      var x1 = instance.xAxis.map(data.x, offset - size / 2);
-      var x2 = instance.xAxis.map(data.x, offset + size / 2);
-      var y1 = data.stacked ? instance.yAxis.stack(data.stack, data.x, data.y0) : instance.yAxis.map(data.y0);
-      var y2 = data.stacked ? instance.yAxis.stack(data.stack, data.x, data.y) : instance.yAxis.map(data.y);
-
-      if (Math.abs(y2 - y1) < this.minPixelHeight) {
-         if (y1 < y2) y2 = y1 + this.minPixelHeight;
-         else y2 = y1 - this.minPixelHeight;
-      }
-
-      var bounds = new Rect({
-         l: Math.min(x1, x2),
-         r: Math.max(x1, x2),
-         t: Math.min(y1, y2),
-         b: Math.max(y1, y2),
-      });
-
-      return bounds;
-   }
-}
-
-Column.prototype.baseClass = "column";
-Column.prototype.y0 = 0;
-Column.prototype.size = 1;
-Column.prototype.autoSize = false;
-Column.prototype.legendShape = "column";
-Column.prototype.hiddenBase = false;
-Column.prototype.minPixelHeight = 0.5;
-
-Widget.alias("column", Column);
diff --git a/packages/cx/src/charts/Column.scss b/packages/cx/src/charts/Column.scss
index 5ec7d0eff..0bad36707 100644
--- a/packages/cx/src/charts/Column.scss
+++ b/packages/cx/src/charts/Column.scss
@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-column(
    $name: 'column',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-rect {
       stroke-width: 1px;
diff --git a/packages/cx/src/charts/Column.ts b/packages/cx/src/charts/Column.ts
new file mode 100644
index 000000000..3eb3706af
--- /dev/null
+++ b/packages/cx/src/charts/Column.ts
@@ -0,0 +1,124 @@
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarBase, ColumnBarBaseConfig, ColumnBarBaseInstance } from "./ColumnBarBase";
+import { Rect } from "../svg/util/Rect";
+import { isDefined } from "../util/isDefined";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp } from "../ui/Prop";
+
+export interface ColumnConfig extends ColumnBarBaseConfig {
+   /** Column base value. Default value is `0`. */
+   y0?: NumberProp;
+
+   /** Size (width) of the column in axis units. */
+   size?: NumberProp;
+
+   /** Set to true to auto calculate size and offset. Available only if the x axis is a category axis. */
+   autoSize?: BooleanProp;
+
+   /** Alias for size. */
+   width?: number;
+
+   /** Minimum column size in pixels. Useful for indicating very small values. Default value is 0.5. */
+   minPixelHeight?: number;
+
+   /** Hide the base of the column (y0). */
+   hiddenBase?: boolean;
+}
+
+export class Column extends ColumnBarBase {
+   declare y0: number;
+   declare size: number;
+   declare autoSize: boolean;
+   declare width: number;
+   declare minPixelHeight: number;
+   declare hiddenBase: boolean;
+
+   constructor(config: ColumnConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (isDefined(this.width)) this.size = this.width;
+
+      super.init();
+   }
+
+   declareData(...args: any[]): any {
+      return super.declareData(
+         {
+            y0: undefined,
+            size: undefined,
+            autoSize: undefined,
+         },
+         ...args,
+      );
+   }
+
+   checkValid(data: any): boolean {
+      return data.x != null && data.y != null && data.y0 != null;
+   }
+
+   explore(context: RenderingContext, instance: ColumnBarBaseInstance): void {
+      let { data, xAxis, yAxis } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (!data.valid) return;
+
+      if (data.active) {
+         xAxis.acknowledge(data.x, data.size, data.offset);
+
+         if (data.autoSize) xAxis.book(data.x, data.stacked ? data.stack : data.name);
+
+         if (data.stacked) {
+            yAxis.stacknowledge(data.stack, data.x, data.y0);
+            yAxis.stacknowledge(data.stack, data.x, data.y);
+         } else {
+            if (!this.hiddenBase) yAxis.acknowledge(data.y0);
+            yAxis.acknowledge(data.y);
+         }
+         super.explore(context, instance);
+      }
+   }
+
+   calculateRect(instance: ColumnBarBaseInstance): Rect {
+      var { data } = instance;
+      var { offset, size } = data;
+
+      if (data.autoSize) {
+         var [index, count] = instance.xAxis.locate(data.x, data.stacked ? data.stack : data.name);
+         offset = (size / count) * (index - count / 2 + 0.5);
+         size = size / count;
+      }
+
+      var x1 = instance.xAxis.map(data.x, offset - size / 2);
+      var x2 = instance.xAxis.map(data.x, offset + size / 2);
+      var y1 = data.stacked ? instance.yAxis.stack(data.stack, data.x, data.y0) : instance.yAxis.map(data.y0);
+      var y2 = data.stacked ? instance.yAxis.stack(data.stack, data.x, data.y) : instance.yAxis.map(data.y);
+
+      if (Math.abs(y2 - y1) < this.minPixelHeight) {
+         if (y1 < y2) y2 = y1 + this.minPixelHeight;
+         else y2 = y1 - this.minPixelHeight;
+      }
+
+      var bounds = new Rect({
+         l: Math.min(x1, x2),
+         r: Math.max(x1, x2),
+         t: Math.min(y1, y2),
+         b: Math.max(y1, y2),
+      });
+
+      return bounds;
+   }
+}
+
+Column.prototype.baseClass = "column";
+Column.prototype.y0 = 0;
+Column.prototype.size = 1;
+Column.prototype.autoSize = false;
+Column.prototype.legendShape = "column";
+Column.prototype.hiddenBase = false;
+Column.prototype.minPixelHeight = 0.5;
+
+Widget.alias("column", Column);
diff --git a/packages/cx/src/charts/ColumnBarBase.d.ts b/packages/cx/src/charts/ColumnBarBase.d.ts
deleted file mode 100644
index 09ac2160b..000000000
--- a/packages/cx/src/charts/ColumnBarBase.d.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as Cx from "../core";
-
-interface ColumnBarBaseProps extends Cx.StyledContainerProps {
-   /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number>;
-
-   /** The `y` value binding or expression. */
-   y?: Cx.Prop<string | number>;
-
-   disabled?: Cx.BooleanProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-   offset?: Cx.NumberProp;
-
-   /** Border radius of the column/bar. */
-   borderRadius?: Cx.NumberProp;
-
-   /**
-    * Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    *  in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** A value used to identify the group of components participating in hover effect synchronization. */
-   hoverChannel?: string;
-
-   /** A value used to uniquely identify the record within the hover sync group. */
-   hoverId?: Cx.StringProp;
-}
-
-export class ColumnBarBase extends Cx.Widget<ColumnBarBaseProps> {}
diff --git a/packages/cx/src/charts/ColumnBarBase.js b/packages/cx/src/charts/ColumnBarBase.js
deleted file mode 100644
index efe06a9fb..000000000
--- a/packages/cx/src/charts/ColumnBarBase.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import { VDOM } from "../ui/Widget";
-import { PureContainer } from "../ui/PureContainer";
-import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
-import { Selection } from "../ui/selection/Selection";
-import { withHoverSync } from "../ui/HoverSync";
-
-export class ColumnBarBase extends PureContainer {
-   init() {
-      this.selection = Selection.create(this.selection);
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      return super.declareData(...arguments, selection, {
-         x: undefined,
-         y: undefined,
-         style: { structured: true },
-         class: { structured: true },
-         className: { structured: true },
-         disabled: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         colorName: undefined,
-         name: undefined,
-         active: true,
-         stacked: undefined,
-         stack: undefined,
-         offset: undefined,
-         hoverId: undefined,
-         borderRadius: undefined,
-         hidden: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      instance.axes = context.axes;
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-      instance.hoverSync = context.hoverSync;
-      var { data } = instance;
-      data.valid = this.checkValid(data);
-      if (!data.colorName && data.name) data.colorName = data.name;
-      super.prepareData(context, instance);
-   }
-
-   checkValid(data) {
-      return true;
-   }
-
-   prepare(context, instance) {
-      let { data, colorMap } = instance;
-
-      if (colorMap && data.colorName) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-
-      if (!data.valid) return;
-
-      if (data.active) {
-         instance.bounds = this.calculateRect(instance);
-         instance.cache("bounds", instance.bounds);
-         if (!instance.bounds.isEqual(instance.cached.bounds)) instance.markShouldUpdate(context);
-
-         context.push("parentRect", instance.bounds);
-         if (instance.xAxis.shouldUpdate || instance.yAxis.shouldUpdate) instance.markShouldUpdate(context);
-      }
-
-      if (data.name && context.addLegendEntry)
-         context.addLegendEntry(this.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            disabled: data.disabled,
-            selected: this.selection.isInstanceSelected(instance),
-            style: data.style,
-            shape: this.legendShape,
-            onClick: (e) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-   }
-
-   prepareCleanup(context, instance) {
-      let { data } = instance;
-      if (data.valid && data.active) context.pop("parentRect");
-   }
-
-   onLegendClick(e, instance) {
-      var allActions = this.legendAction == "auto";
-      var { data } = instance;
-      if (allActions || this.legendAction == "toggle") if (instance.set("active", !data.active)) return;
-
-      if (allActions || this.legendAction == "select") this.handleClick(e, instance);
-   }
-
-   calculateRect(context, instance) {
-      throw new Error("Abstract method.");
-   }
-
-   render(context, instance, key) {
-      let { data, bounds } = instance;
-
-      if (!data.active || !data.valid) return null;
-
-      return withHoverSync(
-         key,
-         instance.hoverSync,
-         this.hoverChannel,
-         data.hoverId,
-         ({ hover, onMouseMove, onMouseLeave, key }) => {
-            var stateMods = {
-               selected: this.selection.isInstanceSelected(instance),
-               disabled: data.disabled,
-               selectable: !this.selection.isDummy,
-               ["color-" + data.colorIndex]: data.colorIndex != null,
-               hover,
-            };
-
-            return (
-               <g className={data.classNames} key={key}>
-                  {!data.hidden && (
-                     <rect
-                        className={this.CSS.element(this.baseClass, "rect", stateMods)}
-                        style={data.style}
-                        x={bounds.l}
-                        y={bounds.t}
-                        width={bounds.width()}
-                        height={bounds.height()}
-                        rx={data.borderRadius}
-                        onMouseMove={(e) => {
-                           onMouseMove(e, instance);
-                           tooltipMouseMove(e, instance, this.tooltip);
-                        }}
-                        onMouseLeave={(e) => {
-                           onMouseLeave(e, instance);
-                           tooltipMouseLeave(e, instance, this.tooltip);
-                        }}
-                        onClick={(e) => {
-                           this.handleClick(e, instance);
-                        }}
-                     />
-                  )}
-                  {this.renderChildren(context, instance)}
-               </g>
-            );
-         },
-      );
-   }
-
-   handleClick(e, instance) {
-      if (!this.selection.isDummy) {
-         this.selection.selectInstance(instance, {
-            toggle: e.ctrlKey,
-         });
-         e.stopPropagation();
-         e.preventDefault();
-      }
-   }
-}
-
-ColumnBarBase.prototype.xAxis = "x";
-ColumnBarBase.prototype.yAxis = "y";
-ColumnBarBase.prototype.offset = 0;
-ColumnBarBase.prototype.legend = "legend";
-ColumnBarBase.prototype.legendAction = "auto";
-ColumnBarBase.prototype.active = true;
-ColumnBarBase.prototype.stacked = false;
-ColumnBarBase.prototype.stack = "stack";
-ColumnBarBase.prototype.legendShape = "rect";
-ColumnBarBase.prototype.styled = true;
-ColumnBarBase.prototype.hoverChannel = "default";
-ColumnBarBase.prototype.borderRadius = 0;
-ColumnBarBase.prototype.hidden = false;
diff --git a/packages/cx/src/charts/ColumnBarBase.tsx b/packages/cx/src/charts/ColumnBarBase.tsx
new file mode 100644
index 000000000..85fe55034
--- /dev/null
+++ b/packages/cx/src/charts/ColumnBarBase.tsx
@@ -0,0 +1,284 @@
+/** @jsxImportSource react */
+
+import { VDOM } from "../ui/Widget";
+import { StyledContainerBase, StyledContainerConfig } from "../ui/Container";
+import { tooltipMouseMove, tooltipMouseLeave, TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
+import { Selection } from "../ui/selection/Selection";
+import { withHoverSync } from "../ui/HoverSync";
+import { Prop, BooleanProp, NumberProp, StringProp } from "../ui/Prop";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Rect } from "../svg/util/Rect";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface ColumnBarBaseConfig extends StyledContainerConfig {
+   /** The `x` value binding or expression. */
+   x?: Prop<string | number>;
+
+   /** The `y` value binding or expression. */
+   y?: Prop<string | number>;
+
+   disabled?: BooleanProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: StringProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: BooleanProp;
+
+   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
+   stacked?: BooleanProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: StringProp;
+
+   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
+   offset?: NumberProp;
+
+   /** Border radius of the column/bar. */
+   borderRadius?: NumberProp;
+
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    */
+   xAxis?: string;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    *  in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    */
+   yAxis?: string;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
+
+   legendAction?: string;
+   legendShape?: string;
+
+   /** A value used to identify the group of components participating in hover effect synchronization. */
+   hoverChannel?: string;
+
+   /** A value used to uniquely identify the record within the hover sync group. */
+   hoverId?: StringProp;
+
+   /** Hide the bar/column rect. Used for stacked series where only top bar should be visible. */
+   hidden?: BooleanProp;
+
+   selection?: any;
+
+   tooltip?: any;
+}
+
+export interface ColumnBarBaseInstance extends Instance, TooltipParentInstance {
+   axes: Record<string, any>;
+   xAxis: any;
+   yAxis: any;
+   hoverSync: any;
+   colorMap: any;
+   bounds: Rect;
+}
+
+export class ColumnBarBase extends StyledContainerBase<ColumnBarBaseConfig> {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare offset: number;
+   declare legend: string | false;
+   declare legendAction: string;
+   declare active: boolean;
+   declare stacked: boolean;
+   declare stack: string;
+   declare legendShape: string;
+   declare hoverChannel: string;
+   declare borderRadius: number;
+   declare hidden: boolean;
+   declare selection: Selection;
+   declare tooltip: any;
+
+   constructor(config: ColumnBarBaseConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.selection = Selection.create(this.selection);
+      super.init();
+   }
+
+   declareData(...args: any[]): any {
+      var selection = this.selection.configureWidget(this);
+
+      return super.declareData(
+         selection,
+         {
+            x: undefined,
+            y: undefined,
+            style: { structured: true },
+            class: { structured: true },
+            className: { structured: true },
+            disabled: undefined,
+            colorIndex: undefined,
+            colorMap: undefined,
+            colorName: undefined,
+            name: undefined,
+            active: true,
+            stacked: undefined,
+            stack: undefined,
+            offset: undefined,
+            hoverId: undefined,
+            borderRadius: undefined,
+            hidden: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: ChartRenderingContext, instance: ColumnBarBaseInstance): void {
+      instance.axes = context.axes!;
+      instance.xAxis = context.axes![this.xAxis];
+      instance.yAxis = context.axes![this.yAxis];
+      instance.hoverSync = context.hoverSync;
+      var { data } = instance;
+      data.valid = this.checkValid(data);
+      if (!data.colorName && data.name) data.colorName = data.name;
+      super.prepareData(context, instance);
+   }
+
+   checkValid(data: any): boolean {
+      return true;
+   }
+
+   prepare(context: ChartRenderingContext, instance: ColumnBarBaseInstance): void {
+      let { data, colorMap } = instance;
+
+      if (colorMap && data.colorName) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (!data.valid) return;
+
+      if (data.active) {
+         instance.bounds = this.calculateRect(instance);
+         instance.cache("bounds", instance.bounds);
+         if (!instance.bounds.isEqual(instance.cached.bounds)) instance.markShouldUpdate(context);
+
+         context.push("parentRect", instance.bounds);
+         if (instance.xAxis.shouldUpdate || instance.yAxis.shouldUpdate) instance.markShouldUpdate(context);
+      }
+
+      if (data.name && context.addLegendEntry)
+         context.addLegendEntry(this.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            disabled: data.disabled,
+            selected: this.selection.isInstanceSelected(instance),
+            style: data.style,
+            shape: this.legendShape,
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+   }
+
+   prepareCleanup(context: ChartRenderingContext, instance: ColumnBarBaseInstance): void {
+      let { data } = instance;
+      if (data.valid && data.active) context.pop("parentRect");
+   }
+
+   onLegendClick(e: MouseEvent, instance: ColumnBarBaseInstance): void {
+      var allActions = this.legendAction == "auto";
+      var { data } = instance;
+      if (allActions || this.legendAction == "toggle") if (instance.set("active", !data.active)) return;
+
+      if (allActions || this.legendAction == "select") this.handleClick(e, instance);
+   }
+
+   calculateRect(instance: ColumnBarBaseInstance): Rect {
+      throw new Error("Abstract method.");
+   }
+
+   render(context: RenderingContext, instance: ColumnBarBaseInstance, key: string): React.ReactNode {
+      let { data, bounds } = instance;
+
+      if (!data.active || !data.valid) return null;
+
+      return withHoverSync(
+         key,
+         instance.hoverSync,
+         this.hoverChannel,
+         data.hoverId,
+         ({ hover, onMouseMove, onMouseLeave, key }: any) => {
+            var stateMods: Record<string, any> = {
+               selected: this.selection.isInstanceSelected(instance),
+               disabled: data.disabled,
+               selectable: !this.selection.isDummy,
+               ["color-" + data.colorIndex]: data.colorIndex != null,
+               hover,
+            };
+
+            return (
+               <g className={data.classNames} key={key}>
+                  {!data.hidden && (
+                     <rect
+                        className={this.CSS.element(this.baseClass, "rect", stateMods)}
+                        style={data.style}
+                        x={bounds.l}
+                        y={bounds.t}
+                        width={bounds.width()}
+                        height={bounds.height()}
+                        rx={data.borderRadius}
+                        onMouseMove={(e) => {
+                           onMouseMove(e, instance);
+                           tooltipMouseMove(e, instance, this.tooltip);
+                        }}
+                        onMouseLeave={(e) => {
+                           onMouseLeave(e, instance);
+                           tooltipMouseLeave(e, instance, this.tooltip);
+                        }}
+                        onClick={(e) => {
+                           this.handleClick(e, instance);
+                        }}
+                     />
+                  )}
+                  {this.renderChildren(context, instance)}
+               </g>
+            );
+         },
+      );
+   }
+
+   handleClick(e: MouseEvent | React.MouseEvent, instance: ColumnBarBaseInstance): void {
+      if (!this.selection.isDummy) {
+         this.selection.selectInstance(instance, {
+            toggle: e.ctrlKey,
+         });
+         e.stopPropagation();
+         e.preventDefault();
+      }
+   }
+}
+
+ColumnBarBase.prototype.xAxis = "x";
+ColumnBarBase.prototype.yAxis = "y";
+ColumnBarBase.prototype.offset = 0;
+ColumnBarBase.prototype.legend = "legend";
+ColumnBarBase.prototype.legendAction = "auto";
+ColumnBarBase.prototype.active = true;
+ColumnBarBase.prototype.stacked = false;
+ColumnBarBase.prototype.stack = "stack";
+ColumnBarBase.prototype.legendShape = "rect";
+ColumnBarBase.prototype.styled = true;
+ColumnBarBase.prototype.hoverChannel = "default";
+ColumnBarBase.prototype.borderRadius = 0;
+ColumnBarBase.prototype.hidden = false;
diff --git a/packages/cx/src/charts/ColumnBarGraphBase.d.ts b/packages/cx/src/charts/ColumnBarGraphBase.d.ts
deleted file mode 100644
index 727e2fb4f..000000000
--- a/packages/cx/src/charts/ColumnBarGraphBase.d.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as Cx from "../core";
-import { KeySelection, PropertySelection } from "../ui/selection";
-
-interface ColumnBarGraphBaseProps extends Cx.WidgetProps {
-   /**
-    * Data for the graph. Each entry should be an object with at least two properties
-    *  whose names should match the `xField` and `yField` values.
-    */
-   data?: Cx.RecordsProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp;
-
-   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-   offset?: Cx.NumberProp;
-
-   /** Set to true to auto-calculate size and offset. Available only if the x axis is a category axis. */
-   autoSize?: Cx.BooleanProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp;
-
-   /** Border radius of the column/bar. */
-   borderRadius?: Cx.NumberProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Name of the horizontal axis. The value should match one of the horizontal axes set
-    *  in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    *  Name of the vertical axis. The value should match one of the vertical axes set
-    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string;
-
-   /** Name of the property which holds the x value. Default value is `x`. */
-   xField?: string;
-
-   /** Name of the property which holds the y value. Default value is `y`. */
-   yField?: string;
-
-   colorIndexField?: boolean;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
-}
-
-export class ColumnBarGraphBase extends Cx.Widget<ColumnBarGraphBaseProps> {}
diff --git a/packages/cx/src/charts/ColumnBarGraphBase.js b/packages/cx/src/charts/ColumnBarGraphBase.js
deleted file mode 100644
index 025cb7335..000000000
--- a/packages/cx/src/charts/ColumnBarGraphBase.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { Selection } from "../ui/selection/Selection";
-
-export class ColumnBarGraphBase extends Widget {
-   init() {
-      this.selection = Selection.create(this.selection, {
-         records: this.data,
-      });
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(selection, ...arguments, {
-         data: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         colorName: undefined,
-         name: undefined,
-         size: undefined,
-         offset: undefined,
-         y0: undefined,
-         x0: undefined,
-         autoSize: undefined,
-         active: true,
-         stacked: undefined,
-         stack: undefined,
-         borderRadius: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-
-      var { data } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      super.explore(context, instance);
-   }
-
-   prepare(context, instance) {
-      let { data, colorMap, xAxis, yAxis } = instance;
-
-      if (colorMap && data.name) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-
-      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
-
-      if (data.name && context.addLegendEntry)
-         context.addLegendEntry(this.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            disabled: data.disabled,
-            selected: this.selection.isInstanceSelected(instance),
-            style: data.style,
-            shape: this.legendShape,
-            onClick: (e) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-   }
-
-   onLegendClick(e, instance) {
-      var allActions = this.legendAction == "auto";
-      var { data } = instance;
-      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
-   }
-
-   render(context, instance, key) {
-      var { data } = instance;
-      return (
-         <g key={key} className={data.classNames}>
-            {data.active && this.renderGraph(context, instance)}
-         </g>
-      );
-   }
-
-   handleClick(e, instance, point, index) {
-      if (this.onClick && instance.invoke("onClick", e, instance, point, index) === false) return;
-
-      if (!this.selection.isDummy) this.selection.select(instance.store, point, index, { toggle: e.ctrlKey });
-   }
-}
-
-ColumnBarGraphBase.prototype.xAxis = "x";
-ColumnBarGraphBase.prototype.yAxis = "y";
-ColumnBarGraphBase.prototype.xField = "x";
-ColumnBarGraphBase.prototype.yField = "y";
-ColumnBarGraphBase.prototype.colorIndexField = false;
-ColumnBarGraphBase.prototype.size = 1;
-ColumnBarGraphBase.prototype.legend = "legend";
-ColumnBarGraphBase.prototype.legendAction = "auto";
-ColumnBarGraphBase.prototype.legendShape = "rect";
-ColumnBarGraphBase.prototype.stack = "stack";
-ColumnBarGraphBase.prototype.stacked = false;
-ColumnBarGraphBase.prototype.autoSize = 0;
-ColumnBarGraphBase.prototype.offset = 0;
-ColumnBarGraphBase.prototype.styled = true;
-ColumnBarGraphBase.prototype.borderRadius = 0;
diff --git a/packages/cx/src/charts/ColumnBarGraphBase.tsx b/packages/cx/src/charts/ColumnBarGraphBase.tsx
new file mode 100644
index 000000000..e8a2b1443
--- /dev/null
+++ b/packages/cx/src/charts/ColumnBarGraphBase.tsx
@@ -0,0 +1,229 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp, RecordsProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface ColumnBarGraphBaseConfig extends WidgetConfig {
+   /**
+    * Data for the graph. Each entry should be an object with at least two properties
+    * whose names should match the `xField` and `yField` values.
+    */
+   data?: RecordsProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: StringProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Size (width) of the column in axis units. */
+   size?: NumberProp;
+
+   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
+   offset?: NumberProp;
+
+   /** Set to true to auto-calculate size and offset. Available only if the x axis is a category axis. */
+   autoSize?: BooleanProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: BooleanProp;
+
+   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
+   stacked?: BooleanProp;
+
+   /** Border radius of the column/bar. */
+   borderRadius?: NumberProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: StringProp;
+
+   /** Column/bar base value for y axis. */
+   y0?: NumberProp;
+
+   /** Column/bar base value for x axis. */
+   x0?: NumberProp;
+
+   /** Name of the horizontal axis. Default value is `x`. */
+   xAxis?: string;
+
+   /** Name of the vertical axis. Default value is `y`. */
+   yAxis?: string;
+
+   /** Name of the property which holds the x value. Default value is `x`. */
+   xField?: string;
+
+   /** Name of the property which holds the y value. Default value is `y`. */
+   yField?: string;
+
+   colorIndexField?: boolean | string;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
+
+   legendAction?: string;
+   legendShape?: string;
+
+   /** Selection configuration. */
+   selection?: any;
+
+   onClick?: (e: MouseEvent, instance: Instance, point: any, index: number) => void | false;
+}
+
+export interface ColumnBarGraphBaseInstance extends Instance {
+   xAxis: any;
+   yAxis: any;
+   colorMap: any;
+}
+
+export class ColumnBarGraphBase extends Widget<ColumnBarGraphBaseConfig> {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare xField: string;
+   declare yField: string;
+   declare colorIndexField: boolean | string;
+   declare size: number;
+   declare legend: string | false;
+   declare legendAction: string;
+   declare legendShape: string;
+   declare stack: string;
+   declare stacked: boolean;
+   declare autoSize: number | boolean;
+   declare offset: number;
+   declare borderRadius: number;
+   declare selection: Selection;
+   declare data: any;
+   declare onClick: ColumnBarGraphBaseConfig["onClick"];
+
+   constructor(config?: ColumnBarGraphBaseConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.selection = Selection.create(this.selection, {
+         records: this.data,
+      });
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(
+         selection,
+         {
+            data: undefined,
+            colorIndex: undefined,
+            colorMap: undefined,
+            colorName: undefined,
+            name: undefined,
+            size: undefined,
+            offset: undefined,
+            y0: undefined,
+            x0: undefined,
+            autoSize: undefined,
+            active: true,
+            stacked: undefined,
+            stack: undefined,
+            borderRadius: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: ColumnBarGraphBaseInstance): void {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: ChartRenderingContext, instance: ColumnBarGraphBaseInstance): void {
+      instance.xAxis = context.axes![this.xAxis];
+      instance.yAxis = context.axes![this.yAxis];
+
+      var { data } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      super.explore(context, instance);
+   }
+
+   prepare(context: ChartRenderingContext, instance: ColumnBarGraphBaseInstance): void {
+      let { data, colorMap, xAxis, yAxis } = instance;
+
+      if (colorMap && data.name) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
+
+      if (data.name && context.addLegendEntry)
+         context.addLegendEntry(this.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            disabled: data.disabled,
+            selected: this.selection.isInstanceSelected(instance),
+            style: data.style,
+            shape: this.legendShape,
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+   }
+
+   onLegendClick(e: MouseEvent, instance: ColumnBarGraphBaseInstance): void {
+      var allActions = this.legendAction == "auto";
+      var { data } = instance;
+      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
+   }
+
+   render(context: RenderingContext, instance: ColumnBarGraphBaseInstance, key: string): React.ReactNode {
+      var { data } = instance;
+      return (
+         <g key={key} className={data.classNames}>
+            {data.active && this.renderGraph(context, instance)}
+         </g>
+      );
+   }
+
+   renderGraph(context: RenderingContext, instance: ColumnBarGraphBaseInstance): React.ReactNode {
+      throw new Error("Abstract method");
+   }
+
+   handleClick(e: React.MouseEvent, instance: ColumnBarGraphBaseInstance, point: any, index: number): void {
+      if (this.onClick && instance.invoke("onClick", e, instance, point, index) === false) return;
+
+      if (!this.selection.isDummy) this.selection.select(instance.store, point, index, { toggle: e.ctrlKey });
+   }
+}
+
+ColumnBarGraphBase.prototype.xAxis = "x";
+ColumnBarGraphBase.prototype.yAxis = "y";
+ColumnBarGraphBase.prototype.xField = "x";
+ColumnBarGraphBase.prototype.yField = "y";
+ColumnBarGraphBase.prototype.colorIndexField = false;
+ColumnBarGraphBase.prototype.size = 1;
+ColumnBarGraphBase.prototype.legend = "legend";
+ColumnBarGraphBase.prototype.legendAction = "auto";
+ColumnBarGraphBase.prototype.legendShape = "rect";
+ColumnBarGraphBase.prototype.stack = "stack";
+ColumnBarGraphBase.prototype.stacked = false;
+ColumnBarGraphBase.prototype.autoSize = 0;
+ColumnBarGraphBase.prototype.offset = 0;
+ColumnBarGraphBase.prototype.styled = true;
+ColumnBarGraphBase.prototype.borderRadius = 0;
diff --git a/packages/cx/src/charts/ColumnGraph.d.ts b/packages/cx/src/charts/ColumnGraph.d.ts
deleted file mode 100644
index bc554aefa..000000000
--- a/packages/cx/src/charts/ColumnGraph.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as Cx from "../core";
-import { ColumnBarGraphBaseProps } from "./ColumnBarGraphBase";
-
-interface ColumnGraphProps extends ColumnBarGraphBaseProps {
-   /** Base CSS class to be applied to the element. Defaults to `columngraph`. */
-   baseClass?: string;
-
-   /**
-    * Name of the property which holds the base value.
-    * Default value is `false`, which means y0 value is not read from the data array.
-    */
-   y0Field?: string | false;
-
-   /** Column base value. Default value is `0`. */
-   y0?: Cx.NumberProp;
-}
-
-export class ColumnGraph extends Cx.Widget<ColumnGraphProps> {}
diff --git a/packages/cx/src/charts/ColumnGraph.js b/packages/cx/src/charts/ColumnGraph.js
deleted file mode 100644
index f69b51465..000000000
--- a/packages/cx/src/charts/ColumnGraph.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { ColumnBarGraphBase } from "./ColumnBarGraphBase";
-import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
-import { isArray } from "../util/isArray";
-
-export class ColumnGraph extends ColumnBarGraphBase {
-   explore(context, instance) {
-      super.explore(context, instance);
-
-      let { data, xAxis, yAxis } = instance;
-
-      if (isArray(data.data)) {
-         data.data.forEach((p, index) => {
-            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-            var x = p[this.xField];
-            var y = p[this.yField];
-
-            xAxis.acknowledge(x, data.size, data.offset);
-
-            if (data.autoSize) xAxis.book(x, data.stacked ? data.stack : data.name);
-
-            if (data.stacked) {
-               yAxis.stacknowledge(data.stack, x, y0);
-               yAxis.stacknowledge(data.stack, x, y);
-            } else {
-               if (!this.hiddenBase) yAxis.acknowledge(y0);
-               yAxis.acknowledge(y);
-            }
-         });
-      }
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      let { data } = instance;
-      if (context.pointReducer && isArray(data.data)) {
-         data.data.forEach((p, index) => {
-            context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
-         });
-      }
-   }
-
-   renderGraph(context, instance) {
-      var { data, xAxis, yAxis, store } = instance;
-      if (!isArray(data.data)) return false;
-
-      var isSelected = this.selection.getIsSelectedDelegate(store);
-
-      return data.data.map((p, i) => {
-         var { offset, size } = data;
-
-         var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-         var x = p[this.xField];
-         var y = p[this.yField];
-
-         if (data.autoSize) {
-            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
-            offset = (size / count) * (index - count / 2 + 0.5);
-            size = size / count;
-         }
-
-         var x1 = xAxis.map(x, offset - size / 2);
-         var x2 = xAxis.map(x, offset + size / 2);
-         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
-         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
-
-         var color = this.colorIndexField ? p[this.colorIndexField] : data.colorIndex;
-         var state = {
-            selected: isSelected(p, i),
-            selectable: !this.selection.isDummy,
-            [`color-${color}`]: color != null,
-         };
-
-         let mmove, mleave;
-
-         if (this.tooltip) {
-            mmove = (e) =>
-               tooltipMouseMove(e, instance, this.tooltip, {
-                  target: e.target.parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-            mleave = (e) =>
-               tooltipMouseLeave(e, instance, this.tooltip, {
-                  target: e.target.parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-         }
-
-         return (
-            <rect
-               key={i}
-               className={this.CSS.element(this.baseClass, "column", state)}
-               onClick={(e) => {
-                  this.handleClick(e, instance, p, i);
-               }}
-               x={Math.min(x1, x2)}
-               y={Math.min(y1, y2)}
-               width={Math.abs(x2 - x1)}
-               height={Math.abs(y2 - y1)}
-               style={data.style}
-               onMouseMove={mmove}
-               onMouseLeave={mleave}
-               rx={data.borderRadius}
-            />
-         );
-      });
-   }
-}
-
-ColumnGraph.prototype.baseClass = "columngraph";
-ColumnGraph.prototype.y0Field = false;
-ColumnGraph.prototype.y0 = 0;
-ColumnGraph.prototype.legendShape = "column";
-ColumnGraph.prototype.hiddenBase = false;
-
-Widget.alias("columngraph", ColumnGraph);
diff --git a/packages/cx/src/charts/ColumnGraph.scss b/packages/cx/src/charts/ColumnGraph.scss
index 4cc22234e..d89005e16 100644
--- a/packages/cx/src/charts/ColumnGraph.scss
+++ b/packages/cx/src/charts/ColumnGraph.scss
@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-columngraph(
    $name: 'columngraph',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-column {
       stroke-width: 1px;
diff --git a/packages/cx/src/charts/ColumnGraph.tsx b/packages/cx/src/charts/ColumnGraph.tsx
new file mode 100644
index 000000000..2d7ca3c36
--- /dev/null
+++ b/packages/cx/src/charts/ColumnGraph.tsx
@@ -0,0 +1,153 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarGraphBase, ColumnBarGraphBaseConfig, ColumnBarGraphBaseInstance } from "./ColumnBarGraphBase";
+import { tooltipMouseMove, tooltipMouseLeave, TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
+import { isArray } from "../util/isArray";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp } from "../ui/Prop";
+
+export interface ColumnGraphConfig extends ColumnBarGraphBaseConfig {
+   /**
+    * Name of the property which holds the base value.
+    * Default value is `false`, which means y0 value is not read from the data array.
+    */
+   y0Field?: string | false;
+
+   /** Column base value. Default value is `0`. */
+   y0?: NumberProp;
+
+   /** Hide the base of the column (y0). */
+   hiddenBase?: boolean;
+
+   /** Tooltip configuration. */
+   tooltip?: any;
+}
+
+export interface ColumnGraphInstance extends ColumnBarGraphBaseInstance, TooltipParentInstance {}
+
+export class ColumnGraph extends ColumnBarGraphBase {
+   declare y0Field: string | false;
+   declare y0: number;
+   declare hiddenBase: boolean;
+   declare tooltip: any;
+
+   constructor(config: ColumnGraphConfig) {
+      super(config);
+   }
+
+   explore(context: RenderingContext, instance: ColumnGraphInstance): void {
+      super.explore(context, instance);
+
+      let { data, xAxis, yAxis } = instance;
+
+      if (isArray(data.data)) {
+         data.data.forEach((p: any, index: number) => {
+            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
+            var x = p[this.xField];
+            var y = p[this.yField];
+
+            xAxis.acknowledge(x, data.size, data.offset);
+
+            if (data.autoSize) xAxis.book(x, data.stacked ? data.stack : data.name);
+
+            if (data.stacked) {
+               yAxis.stacknowledge(data.stack, x, y0);
+               yAxis.stacknowledge(data.stack, x, y);
+            } else {
+               if (!this.hiddenBase) yAxis.acknowledge(y0);
+               yAxis.acknowledge(y);
+            }
+         });
+      }
+   }
+
+   prepare(context: RenderingContext, instance: ColumnGraphInstance): void {
+      super.prepare(context, instance);
+      let { data } = instance;
+      if (context.pointReducer && isArray(data.data)) {
+         data.data.forEach((p: any, index: number) => {
+            context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
+         });
+      }
+   }
+
+   renderGraph(context: RenderingContext, instance: ColumnGraphInstance): React.ReactNode {
+      var { data, xAxis, yAxis, store } = instance;
+      if (!isArray(data.data)) return false;
+
+      var isSelected = this.selection.getIsSelectedDelegate(store);
+
+      return data.data.map((p: any, i: number) => {
+         var { offset, size } = data;
+
+         var y0 = this.y0Field ? p[this.y0Field] : data.y0;
+         var x = p[this.xField];
+         var y = p[this.yField];
+
+         if (data.autoSize) {
+            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
+            offset = (size / count) * (index - count / 2 + 0.5);
+            size = size / count;
+         }
+
+         var x1 = xAxis.map(x, offset - size / 2);
+         var x2 = xAxis.map(x, offset + size / 2);
+         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
+         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
+
+         var color = this.colorIndexField ? p[this.colorIndexField as string] : data.colorIndex;
+         var state: Record<string, any> = {
+            selected: isSelected(p, i),
+            selectable: !this.selection.isDummy,
+            [`color-${color}`]: color != null,
+         };
+
+         let mmove: ((e: React.MouseEvent) => void) | undefined,
+            mleave: ((e: React.MouseEvent) => void) | undefined;
+
+         if (this.tooltip) {
+            mmove = (e) =>
+               tooltipMouseMove(e, instance, this.tooltip, {
+                  target: (e.target as any).parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+            mleave = (e) =>
+               tooltipMouseLeave(e, instance, this.tooltip, {
+                  target: (e.target as any).parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+         }
+
+         return (
+            <rect
+               key={i}
+               className={this.CSS.element(this.baseClass, "column", state)}
+               onClick={(e) => {
+                  this.handleClick(e, instance, p, i);
+               }}
+               x={Math.min(x1, x2)}
+               y={Math.min(y1, y2)}
+               width={Math.abs(x2 - x1)}
+               height={Math.abs(y2 - y1)}
+               style={data.style}
+               onMouseMove={mmove}
+               onMouseLeave={mleave}
+               rx={data.borderRadius}
+            />
+         );
+      });
+   }
+}
+
+ColumnGraph.prototype.baseClass = "columngraph";
+ColumnGraph.prototype.y0Field = false;
+ColumnGraph.prototype.y0 = 0;
+ColumnGraph.prototype.legendShape = "column";
+ColumnGraph.prototype.hiddenBase = false;
+
+Widget.alias("columngraph", ColumnGraph);
diff --git a/packages/cx/src/charts/Grid.js b/packages/cx/src/charts/Grid.js
deleted file mode 100644
index 2583b2224..000000000
--- a/packages/cx/src/charts/Grid.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import {Gridlines} from './Gridlines';
-
-export const Grid = Gridlines;
-
-console.log('charts/Grid module is deprecated. Use Gridlines instead.');
diff --git a/packages/cx/src/charts/Grid.ts b/packages/cx/src/charts/Grid.ts
new file mode 100644
index 000000000..92ba7bc2f
--- /dev/null
+++ b/packages/cx/src/charts/Grid.ts
@@ -0,0 +1,5 @@
+import { Gridlines } from "./Gridlines";
+
+export const Grid = Gridlines;
+
+console.log("charts/Grid module is deprecated. Use Gridlines instead.");
diff --git a/packages/cx/src/charts/Gridlines.d.ts b/packages/cx/src/charts/Gridlines.d.ts
deleted file mode 100644
index e4d9200c0..000000000
--- a/packages/cx/src/charts/Gridlines.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as Cx from '../core';
-import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
-
-interface GridlinesProps extends BoundedObjectProps {
-   
-   /** 
-    * Name of the horizontal axis. The value should match one of the horizontal axes set 
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    * Set to `false` to hide the grid lines in x direction.
-    */
-   xAxis?: string | boolean,
-
-   /** 
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    * Set to `false` to hide the grid lines in y direction.
-    */
-   yAxis?: string | boolean,
-   
-   /** Base CSS class to be applied to the element. Defaults to `gridlines`. */
-   baseClass?: string
-
-}
-
-export class Gridlines extends Cx.Widget<GridlinesProps> {}
\ No newline at end of file
diff --git a/packages/cx/src/charts/Gridlines.js b/packages/cx/src/charts/Gridlines.js
deleted file mode 100644
index 697564fd5..000000000
--- a/packages/cx/src/charts/Gridlines.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import {BoundedObject} from '../svg/BoundedObject';
-import {VDOM} from '../ui/Widget';
-
-export class Gridlines extends BoundedObject {
-
-   explore(context, instance) {
-      super.explore(context, instance);
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      let {xAxis, yAxis} = instance;
-      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate))
-         instance.markShouldUpdate(context);
-   }
-
-   render(context, instance, key) {
-      let {data, xAxis, yAxis} = instance;
-      let {bounds} = data;
-      let path = '', xTicks, yTicks;
-
-      if (xAxis) {
-         xTicks = xAxis.mapGridlines();
-         xTicks.forEach(x => {
-            path += `M ${x} ${bounds.t} L ${x} ${bounds.b}`;
-         });
-      }
-
-      if (yAxis) {
-         yTicks = yAxis.mapGridlines();
-         yTicks.forEach(y => {
-            path += `M ${bounds.l} ${y} L ${bounds.r} ${y}`;
-         });
-      }
-
-      return <g key={key} className={data.classNames}>
-         <path style={data.style} d={path}/>
-      </g>
-   }
-}
-
-Gridlines.prototype.xAxis = 'x';
-Gridlines.prototype.yAxis = 'y';
-Gridlines.prototype.anchors = '0 1 1 0';
-Gridlines.prototype.baseClass = 'gridlines';
-
-BoundedObject.alias('gridlines', Gridlines);
\ No newline at end of file
diff --git a/packages/cx/src/charts/Gridlines.scss b/packages/cx/src/charts/Gridlines.scss
index 709eff8c7..f90e724a8 100644
--- a/packages/cx/src/charts/Gridlines.scss
+++ b/packages/cx/src/charts/Gridlines.scss
@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-gridlines(
    $name: 'gridlines',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       shape-rendering: crispEdges;
diff --git a/packages/cx/src/charts/Gridlines.tsx b/packages/cx/src/charts/Gridlines.tsx
new file mode 100644
index 000000000..44a8ea46d
--- /dev/null
+++ b/packages/cx/src/charts/Gridlines.tsx
@@ -0,0 +1,88 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { VDOM } from "../ui/Widget";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface GridlinesConfig extends BoundedObjectConfig {
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    * Set to `false` to hide the grid lines in x direction.
+    */
+   xAxis?: string | boolean;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    * Set to `false` to hide the grid lines in y direction.
+    */
+   yAxis?: string | boolean;
+
+   /** Base CSS class to be applied to the element. Defaults to `gridlines`. */
+   baseClass?: string;
+}
+
+export interface GridlinesInstance extends BoundedObjectInstance {
+   xAxis?: any;
+   yAxis?: any;
+}
+
+export class Gridlines extends BoundedObject<GridlinesConfig, GridlinesInstance> {
+   declare xAxis: string;
+   declare yAxis: string;
+   declare anchors: string;
+   declare baseClass: string;
+
+   constructor(config?: GridlinesConfig) {
+      super(config);
+   }
+
+   explore(context: ChartRenderingContext, instance: GridlinesInstance) {
+      super.explore(context, instance);
+      instance.xAxis = context.axes?.[this.xAxis];
+      instance.yAxis = context.axes?.[this.yAxis];
+   }
+
+   prepare(context: ChartRenderingContext, instance: GridlinesInstance) {
+      super.prepare(context, instance);
+      let { xAxis, yAxis } = instance;
+      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate)) instance.markShouldUpdate(context);
+   }
+
+   render(context: RenderingContext, instance: GridlinesInstance, key: string): CxChild {
+      let { data, xAxis, yAxis } = instance;
+      let { bounds } = data as any;
+      let path = "",
+         xTicks: number[],
+         yTicks: number[];
+
+      if (xAxis) {
+         xTicks = xAxis.mapGridlines();
+         xTicks.forEach((x) => {
+            path += `M ${x} ${bounds.t} L ${x} ${bounds.b}`;
+         });
+      }
+
+      if (yAxis) {
+         yTicks = yAxis.mapGridlines();
+         yTicks.forEach((y) => {
+            path += `M ${bounds.l} ${y} L ${bounds.r} ${y}`;
+         });
+      }
+
+      return (
+         <g key={key} className={(data as any).classNames}>
+            <path style={(data as any).style} d={path} />
+         </g>
+      );
+   }
+}
+
+Gridlines.prototype.xAxis = "x";
+Gridlines.prototype.yAxis = "y";
+Gridlines.prototype.anchors = "0 1 1 0";
+Gridlines.prototype.baseClass = "gridlines";
+
+BoundedObject.alias("gridlines", Gridlines);
diff --git a/packages/cx/src/charts/Legend.d.ts b/packages/cx/src/charts/Legend.d.ts
deleted file mode 100644
index 376def77c..000000000
--- a/packages/cx/src/charts/Legend.d.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as Cx from "../core";
-
-interface LegendProps extends Cx.HtmlElementProps {
-   /** Name of the legend. Default is `legend`. */
-   name?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `legend`. */
-   baseClass?: string;
-
-   /** Switch to vertical mode. */
-   vertical?: boolean;
-
-   /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number;
-
-   /** Shape size in pixels. Default value is 18. */
-   shapeSize?: number;
-
-   /** Default shape that will be applied to the all legend items. */
-   shape?: Cx.StringProp;
-
-   /** CSS style that will be applied to the legend entry. */
-   entryStyle?: Cx.StyleProp;
-
-   /** CSS class that will be applied to the legend entry. */
-   entryClass?: Cx.ClassProp;
-
-   /** CSS style that will be applied to the legend entry value segment. */
-   valueStyle?: Cx.StyleProp;
-
-   /** CSS class that will be applied to the legend entry value segment. */
-   valueClass?: Cx.ClassProp;
-
-   /** Set to true to show values. Mostly used for PieChart legends. */
-   showValues?: Cx.BooleanProp;
-
-   /** Format used for values, i.e. n;2 or currency. The default value is s.*/
-   valueFormat?: string;
-}
-
-export class Legend extends Cx.Widget<LegendProps> {
-   static Scope(): any;
-}
-
-export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}
diff --git a/packages/cx/src/charts/Legend.js b/packages/cx/src/charts/Legend.js
deleted file mode 100644
index 6b473a050..000000000
--- a/packages/cx/src/charts/Legend.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { PureContainer } from "../ui/PureContainer";
-import { getShape } from "./shapes";
-import { isUndefined } from "../util/isUndefined";
-import { isNonEmptyArray } from "../util/isNonEmptyArray";
-import { parseStyle } from "../util/parseStyle";
-import { withHoverSync } from "../ui/HoverSync";
-import { Format } from "../util/Format";
-
-export class Legend extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         shape: undefined,
-         entryStyle: { structured: true },
-         entryClass: { structured: true },
-         valueStyle: { structured: true },
-         valueClass: { structured: true },
-         showValues: undefined,
-      });
-   }
-
-   init() {
-      this.entryStyle = parseStyle(this.entryStyle);
-      this.valueStyle = parseStyle(this.valueStyle);
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = Object.assign(data.stateMods || {}, {
-         vertical: this.vertical,
-      });
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "shapeSize":
-         case "svgSize":
-         case "shape":
-         case "entryStyle":
-         case "entryClass":
-         case "valueStyle":
-         case "valueClass":
-         case "showValues":
-         case "valueFormat":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   explore(context, instance) {
-      if (!context.legends) context.legends = {};
-
-      instance.legends = context.legends;
-
-      context.addLegendEntry = (legendName, entry) => {
-         if (!legendName) return;
-
-         //case when all legends are scoped and new entry is added outside the scope
-         if (!context.legends) return;
-
-         let legend = context.legends[legendName];
-         if (!legend)
-            legend = context.legends[legendName] = {
-               entries: [],
-               names: {},
-            };
-
-         if (!legend.names[entry.name]) {
-            legend.entries.push(entry);
-            legend.names[entry.name] = entry;
-         }
-      };
-
-      super.explore(context, instance);
-   }
-
-   renderChildren(context, instance) {
-      const CSS = this.CSS;
-
-      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
-         list;
-
-      let { entryClass, entryStyle, shape, valueClass, valueStyle } = instance.data;
-      let valueFormatter = Format.parse(this.valueFormat);
-
-      let valueClasses = this.showValues ? CSS.expand(CSS.element(this.baseClass, "value"), valueClass) : null;
-      let entryTextClass = CSS.element(this.baseClass, "entry-text");
-
-      if (isNonEmptyArray(entries)) {
-         list = entries.map((e, i) =>
-            withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
-               <div
-                  key={i}
-                  className={CSS.expand(
-                     CSS.element(this.baseClass, "entry", {
-                        "color-root": true,
-                        hover,
-                        disabled: e.disabled,
-                        selected: e.selected,
-                     }),
-                     entryClass,
-                  )}
-                  style={entryStyle}
-                  onClick={e.onClick}
-                  onMouseMove={onMouseMove}
-                  onMouseLeave={onMouseLeave}
-               >
-                  {this.renderShape(e, shape)}
-                  <div className={entryTextClass}>{e.displayText || e.name}</div>
-                  {this.showValues && (
-                     <div className={valueClasses} style={valueStyle}>
-                        {valueFormatter(e.value)}
-                     </div>
-                  )}
-               </div>
-            )),
-         );
-      }
-
-      return [list, super.renderChildren(context, instance)];
-   }
-
-   renderShape(entry, legendEntriesShape) {
-      const className = this.CSS.element(this.baseClass, "shape", {
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      const shape = getShape(legendEntriesShape || entry.shape || "square");
-
-      // if the entry has a custom fill or stroke set, use it for both values
-      let style = { ...entry.style };
-      style.fill = style.fill ?? style.stroke;
-      style.stroke = style.stroke ?? style.fill;
-
-      return (
-         <svg
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
-               style,
-               className,
-            })}
-         </svg>
-      );
-   }
-}
-
-Legend.prototype.name = "legend";
-Legend.prototype.baseClass = "legend";
-Legend.prototype.vertical = false;
-Legend.prototype.memoize = false;
-Legend.prototype.shapeSize = 18;
-Legend.prototype.shape = null;
-Legend.prototype.svgSize = 20;
-Legend.prototype.showValues = false;
-Legend.prototype.valueFormat = "s";
-
-Widget.alias("legend", Legend);
-
-Legend.Scope = class extends PureContainer {
-   explore(context, instance) {
-      context.push("legends", (instance.legends = {}));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("legends");
-   }
-
-   prepare(context, instance) {
-      context.push("legends", instance.legends);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("legends");
-   }
-};
-
-export const LegendScope = Legend.Scope;
diff --git a/packages/cx/src/charts/Legend.scss b/packages/cx/src/charts/Legend.scss
index 8a1a42711..7e5fa69c8 100644
--- a/packages/cx/src/charts/Legend.scss
+++ b/packages/cx/src/charts/Legend.scss
@@ -1,7 +1,9 @@
+@use "sass:map";
+
 @mixin cx-legend($name: "legend", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       display: flex;
diff --git a/packages/cx/src/charts/Legend.tsx b/packages/cx/src/charts/Legend.tsx
new file mode 100644
index 000000000..b91006e76
--- /dev/null
+++ b/packages/cx/src/charts/Legend.tsx
@@ -0,0 +1,270 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../widgets/HtmlElement";
+import { PureContainer } from "../ui/PureContainer";
+import { getShape } from "./shapes";
+import { isUndefined } from "../util/isUndefined";
+import { isNonEmptyArray } from "../util/isNonEmptyArray";
+import { parseStyle } from "../util/parseStyle";
+import { withHoverSync } from "../ui/HoverSync";
+import { Format } from "../util/Format";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { StringProp, StyleProp, BooleanProp } from "../ui/Prop";
+
+export interface LegendEntryData {
+   name: string;
+   displayText?: string;
+   active?: boolean;
+   colorIndex?: number;
+   disabled?: boolean;
+   selected?: boolean;
+   style?: any;
+   shape?: string;
+   shapeSize?: number;
+   hoverSync?: any;
+   hoverChannel?: string;
+   hoverId?: any;
+   onClick?: (e: MouseEvent) => void;
+   value?: number;
+}
+
+
+export interface LegendConfig extends HtmlElementConfig {
+   /** Name of the legend. Default is `legend`. */
+   name?: string;
+
+   /** Default shape to use for all entries. */
+   shape?: StringProp;
+
+   /** Style applied to each entry. */
+   entryStyle?: StyleProp;
+
+   /** CSS class applied to each entry. */
+   entryClass?: StringProp;
+
+   /** Style applied to the value display. */
+   valueStyle?: StyleProp;
+
+   /** CSS class applied to the value display. */
+   valueClass?: StringProp;
+
+   /** Set to `true` to show values next to legend entries. */
+   showValues?: BooleanProp;
+
+   /** Format used for displaying values. Default is `s`. */
+   valueFormat?: string;
+
+   /** Set to `true` for vertical layout. */
+   vertical?: boolean;
+
+   /** Size of the shape in pixels. Default is `18`. */
+   shapeSize?: number;
+
+   /** Size of the SVG container in pixels. Default is `20`. */
+   svgSize?: number;
+}
+
+export interface LegendInstance extends HtmlElementInstance {
+   legends: Record<string, { entries: LegendEntryData[]; names: Record<string, LegendEntryData> }>;
+}
+
+export class Legend extends HtmlElement {
+   declare baseClass: string;
+   declare name: string;
+   declare vertical: boolean;
+   declare shapeSize: number;
+   declare shape: string | null;
+   declare svgSize: number;
+   declare showValues: boolean;
+   declare valueFormat: string;
+   declare entryStyle: any;
+   declare valueStyle: any;
+
+   static Scope: typeof PureContainer;
+
+   constructor(config: LegendConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         shape: undefined,
+         entryStyle: { structured: true },
+         entryClass: { structured: true },
+         valueStyle: { structured: true },
+         valueClass: { structured: true },
+         showValues: undefined,
+      });
+   }
+
+   init(): void {
+      this.entryStyle = parseStyle(this.entryStyle);
+      this.valueStyle = parseStyle(this.valueStyle);
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: LegendInstance): void {
+      let { data } = instance;
+      data.stateMods = Object.assign(data.stateMods || {}, {
+         vertical: this.vertical,
+      });
+      super.prepareData(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName: string): string | false {
+      switch (attrName) {
+         case "shapeSize":
+         case "svgSize":
+         case "shape":
+         case "entryStyle":
+         case "entryClass":
+         case "valueStyle":
+         case "valueClass":
+         case "showValues":
+         case "valueFormat":
+            return false;
+
+         default:
+            return super.isValidHtmlAttribute(attrName);
+      }
+   }
+
+   explore(context: RenderingContext, instance: LegendInstance): void {
+      if (!context.legends) context.legends = {};
+
+      instance.legends = context.legends;
+
+      context.addLegendEntry = (legendName: string | false, entry: LegendEntryData) => {
+         if (!legendName) return;
+
+         //case when all legends are scoped and new entry is added outside the scope
+         if (!context.legends) return;
+
+         let legend = context.legends[legendName];
+         if (!legend)
+            legend = context.legends[legendName] = {
+               entries: [],
+               names: {},
+            };
+
+         if (!legend.names[entry.name]) {
+            legend.entries.push(entry);
+            legend.names[entry.name] = entry;
+         }
+      };
+
+      super.explore(context, instance);
+   }
+
+   renderChildren(context: RenderingContext, instance: LegendInstance): React.ReactNode[] {
+      const CSS = this.CSS;
+
+      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
+         list: React.ReactNode;
+
+      let { entryClass, entryStyle, shape, valueClass, valueStyle } = instance.data;
+      let valueFormatter = Format.parse(this.valueFormat);
+
+      let valueClasses = this.showValues ? CSS.expand(CSS.element(this.baseClass, "value"), valueClass) : undefined;
+      let entryTextClass = CSS.element(this.baseClass, "entry-text");
+
+      if (isNonEmptyArray(entries)) {
+         list = entries.map((e: LegendEntryData, i: number) =>
+            withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
+               <div
+                  key={i}
+                  className={CSS.expand(
+                     CSS.element(this.baseClass, "entry", {
+                        "color-root": true,
+                        hover,
+                        disabled: e.disabled,
+                        selected: e.selected,
+                     }),
+                     entryClass,
+                  )}
+                  style={entryStyle}
+                  onClick={e.onClick as any}
+                  onMouseMove={onMouseMove}
+                  onMouseLeave={onMouseLeave}
+               >
+                  {this.renderShape(e, shape)}
+                  <div className={entryTextClass}>{e.displayText || e.name}</div>
+                  {this.showValues && (
+                     <div className={valueClasses} style={valueStyle}>
+                        {valueFormatter(e.value)}
+                     </div>
+                  )}
+               </div>
+            )),
+         );
+      }
+
+      return [list, super.renderChildren(context, instance)];
+   }
+
+   renderShape(entry: LegendEntryData, legendEntriesShape: string | null | undefined): React.ReactNode {
+      const className = this.CSS.element(this.baseClass, "shape", {
+         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+      });
+      const shape = getShape(legendEntriesShape || entry.shape || "square");
+
+      // if the entry has a custom fill or stroke set, use it for both values
+      let style = { ...entry.style };
+      style.fill = style.fill ?? style.stroke;
+      style.stroke = style.stroke ?? style.fill;
+
+      return (
+         <svg
+            className={this.CSS.element(this.baseClass, "svg")}
+            style={{
+               width: `${this.svgSize}px`,
+               height: `${this.svgSize}px`,
+            }}
+         >
+            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
+               style,
+               className,
+            })}
+         </svg>
+      );
+   }
+}
+
+Legend.prototype.name = "legend";
+Legend.prototype.baseClass = "legend";
+Legend.prototype.vertical = false;
+Legend.prototype.memoize = false;
+Legend.prototype.shapeSize = 18;
+Legend.prototype.shape = null;
+Legend.prototype.svgSize = 20;
+Legend.prototype.showValues = false;
+Legend.prototype.valueFormat = "s";
+
+Widget.alias("legend", Legend);
+
+interface LegendScopeInstance extends Instance {
+   legends: Record<string, { entries: LegendEntryData[]; names: Record<string, LegendEntryData> }>;
+}
+
+Legend.Scope = class extends PureContainer {
+   explore(context: RenderingContext, instance: LegendScopeInstance): void {
+      context.push("legends", (instance.legends = {}));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: LegendScopeInstance): void {
+      context.pop("legends");
+   }
+
+   prepare(context: RenderingContext, instance: LegendScopeInstance): void {
+      context.push("legends", instance.legends);
+   }
+
+   prepareCleanup(context: RenderingContext, instance: LegendScopeInstance): void {
+      context.pop("legends");
+   }
+};
+
+export const LegendScope = Legend.Scope;
diff --git a/packages/cx/src/charts/LegendEntry.d.ts b/packages/cx/src/charts/LegendEntry.d.ts
deleted file mode 100644
index c55066dcb..000000000
--- a/packages/cx/src/charts/LegendEntry.d.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as Cx from "../core";
-
-interface LegendEntryProps extends Cx.HtmlElementProps {
-   /** Indicate that entry is selected. */
-   selected?: Cx.BooleanProp;
-
-   /** Shape of the symbol. `square`, `circle`, `triangle` etc. */
-   shape?: Cx.StringProp;
-
-   /** Size of the symbol in pixels. Default value is `18`. */
-   size?: Cx.NumberProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string;
-
-   legendAction?: string;
-
-   /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number;
-
-   /**
-    * Applies to rectangular shapes. The horizontal corner radius of the rect. Defaults to ry if ry is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   rx?: Cx.StringProp | Cx.NumberProp;
-
-   /**
-    * Applies to rectangular shapes. The vertical corner radius of the rect. Defaults to rx if rx is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   ry?: Cx.StringProp | Cx.NumberProp;
-
-   /** Selection configuration. */
-   selection?: Cx.Config;
-}
-
-export class LegendEntry extends Cx.Widget<LegendEntryProps> {}
diff --git a/packages/cx/src/charts/LegendEntry.js b/packages/cx/src/charts/LegendEntry.js
deleted file mode 100644
index ef7127219..000000000
--- a/packages/cx/src/charts/LegendEntry.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { getShape } from "./shapes";
-import { Selection } from "../ui/selection/Selection";
-import { stopPropagation } from "../util/eventCallbacks";
-import { isUndefined } from "../util/isUndefined";
-import { Container } from "../ui/Container";
-
-export class LegendEntry extends Container {
-   init() {
-      this.selection = Selection.create(this.selection);
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(...arguments, selection, {
-         selected: undefined,
-         shape: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         colorName: undefined,
-         name: undefined,
-         active: true,
-         size: undefined,
-         rx: undefined,
-         ry: undefined,
-         text: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      var { data } = instance;
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-      super.explore(context, instance);
-   }
-
-   prepare(context, instance) {
-      var { data, colorMap } = instance;
-
-      if (colorMap && data.colorName) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-   }
-
-   handleClick(e, instance) {
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
-
-      e.stopPropagation();
-
-      var any = this.legendAction == "auto";
-
-      if (any || this.legendAction == "toggle") if (instance.set("active", !instance.data.active)) return;
-
-      if ((any || this.legendAction == "select") && !this.selection.isDummy) this.selection.selectInstance(instance);
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      let content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
-      return (
-         <div
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onClick={(e) => {
-               this.handleClick(e, instance);
-            }}
-         >
-            {this.renderShape(instance)}
-            {content != null && <div>{content}</div>}
-         </div>
-      );
-   }
-
-   renderShape(instance) {
-      var entry = instance.data;
-      var className = this.CSS.element(this.baseClass, "shape", {
-         disabled: entry.disabled,
-         selected: entry.selected || this.selection.isInstanceSelected(instance),
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      var shape = getShape(entry.shape || "square");
-
-      // if the entry has a custom fill or stroke set, use it for both values
-      let style = { ...entry.style };
-      style.fill = style.fill ?? style.stroke;
-      style.stroke = style.stroke ?? style.fill;
-
-      return (
-         <svg
-            key="svg"
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
-               style,
-               className,
-               rx: entry.rx,
-               ry: entry.ry,
-            })}
-         </svg>
-      );
-   }
-}
-
-LegendEntry.prototype.baseClass = "legendentry";
-LegendEntry.prototype.shape = "square";
-LegendEntry.prototype.legendAction = "auto";
-LegendEntry.prototype.size = 18;
-LegendEntry.prototype.svgSize = 20;
-LegendEntry.prototype.styled = true;
-
-Widget.alias("legend-entry", LegendEntry);
diff --git a/packages/cx/src/charts/LegendEntry.scss b/packages/cx/src/charts/LegendEntry.scss
index 4c9f48c20..1c93c4de9 100644
--- a/packages/cx/src/charts/LegendEntry.scss
+++ b/packages/cx/src/charts/LegendEntry.scss
@@ -1,7 +1,9 @@
+@use "sass:map";
+
 @mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       display: inline-flex;
diff --git a/packages/cx/src/charts/LegendEntry.tsx b/packages/cx/src/charts/LegendEntry.tsx
new file mode 100644
index 000000000..6353f1d3c
--- /dev/null
+++ b/packages/cx/src/charts/LegendEntry.tsx
@@ -0,0 +1,197 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { getShape } from "./shapes";
+import { Selection } from "../ui/selection/Selection";
+import { stopPropagation } from "../util/eventCallbacks";
+import { isUndefined } from "../util/isUndefined";
+import { Container, ContainerConfig } from "../ui/Container";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+
+export interface LegendEntryConfig extends ContainerConfig {
+   /** Set to `true` if the entry is selected. */
+   selected?: BooleanProp;
+
+   /** Shape to display. Default is `square`. */
+   shape?: StringProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: StringProp;
+
+   /** Name of the entry. */
+   name?: StringProp;
+
+   /** Used to indicate if an entry is active or not. */
+   active?: BooleanProp;
+
+   /** Size of the shape in pixels. Default is `18`. */
+   size?: NumberProp;
+
+   /** Horizontal border radius. */
+   rx?: NumberProp;
+
+   /** Vertical border radius. */
+   ry?: NumberProp;
+
+   /** Text content of the entry. */
+   text?: StringProp;
+
+   /** Action to perform on click. Default is `auto`. */
+   legendAction?: string;
+
+   /** Size of the SVG container in pixels. Default is `20`. */
+   svgSize?: number;
+
+   /** Selection configuration. */
+   selection?: any;
+
+   /** Click event handler. */
+   onClick?: (e: React.MouseEvent, instance: Instance) => void | false;
+}
+
+export interface LegendEntryInstance extends Instance {
+   colorMap: any;
+}
+
+export class LegendEntry extends Container {
+   declare baseClass: string;
+   declare shape: string;
+   declare legendAction: string;
+   declare size: number;
+   declare svgSize: number;
+   declare selection: Selection;
+   declare text: string;
+   declare onClick: LegendEntryConfig["onClick"];
+
+   constructor(config: LegendEntryConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.selection = Selection.create(this.selection);
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(...args, selection, {
+         selected: undefined,
+         shape: undefined,
+         colorIndex: undefined,
+         colorMap: undefined,
+         colorName: undefined,
+         name: undefined,
+         active: true,
+         size: undefined,
+         rx: undefined,
+         ry: undefined,
+         text: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: LegendEntryInstance): void {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: LegendEntryInstance): void {
+      var { data } = instance;
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+      super.explore(context, instance);
+   }
+
+   prepare(context: RenderingContext, instance: LegendEntryInstance): void {
+      var { data, colorMap } = instance;
+
+      if (colorMap && data.colorName) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+   }
+
+   handleClick(e: React.MouseEvent, instance: LegendEntryInstance): void {
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
+
+      e.stopPropagation();
+
+      var any = this.legendAction == "auto";
+
+      if (any || this.legendAction == "toggle") if (instance.set("active", !instance.data.active)) return;
+
+      if ((any || this.legendAction == "select") && !this.selection.isDummy) this.selection.selectInstance(instance);
+   }
+
+   render(context: RenderingContext, instance: LegendEntryInstance, key: string): React.ReactNode {
+      let { data } = instance;
+      let content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
+      return (
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onClick={(e) => {
+               this.handleClick(e, instance);
+            }}
+         >
+            {this.renderShape(instance)}
+            {content != null && <div>{content}</div>}
+         </div>
+      );
+   }
+
+   renderShape(instance: LegendEntryInstance): React.ReactNode {
+      var entry = instance.data;
+      var className = this.CSS.element(this.baseClass, "shape", {
+         disabled: entry.disabled,
+         selected: entry.selected || this.selection.isInstanceSelected(instance),
+         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+      });
+      var shape = getShape(entry.shape || "square");
+
+      // if the entry has a custom fill or stroke set, use it for both values
+      let style = { ...entry.style };
+      style.fill = style.fill ?? style.stroke;
+      style.stroke = style.stroke ?? style.fill;
+
+      return (
+         <svg
+            key="svg"
+            className={this.CSS.element(this.baseClass, "svg")}
+            style={{
+               width: `${this.svgSize}px`,
+               height: `${this.svgSize}px`,
+            }}
+         >
+            {shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
+               style,
+               className,
+               rx: entry.rx,
+               ry: entry.ry,
+            })}
+         </svg>
+      );
+   }
+}
+
+LegendEntry.prototype.baseClass = "legendentry";
+LegendEntry.prototype.shape = "square";
+LegendEntry.prototype.legendAction = "auto";
+LegendEntry.prototype.size = 18;
+LegendEntry.prototype.svgSize = 20;
+LegendEntry.prototype.styled = true;
+
+Widget.alias("legend-entry", LegendEntry);
diff --git a/packages/cx/src/charts/LineGraph.d.ts b/packages/cx/src/charts/LineGraph.d.ts
deleted file mode 100644
index 9f64e3281..000000000
--- a/packages/cx/src/charts/LineGraph.d.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as Cx from "../core";
-
-interface LineGraphProps extends Cx.WidgetProps {
-   /**
-    * Data for the graph. Each entry should be an object with at least two properties
-    * whose names should match the `xField` and `yField` values.
-    */
-   data?: Cx.RecordsProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /**
-    * Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
-    */
-   class?: Cx.ClassProp;
-
-   /**
-    * Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
-    */
-   className?: Cx.ClassProp;
-
-   /** Additional styles to be applied to the line element. */
-   lineStyle?: Cx.StyleProp;
-
-   /** Additional styles to be applied to the area below the line. */
-   areaStyle?: Cx.StyleProp;
-
-   /** Area switch. Default value is `false`. */
-   area?: Cx.BooleanProp;
-
-   /** Line switch. By default, the line is shown. Set to `false` to hide the line and draw only the area. */
-   line?: Cx.BooleanProp;
-
-   /** Base value used for area charts. Default value is `0`. */
-   y0?: Cx.NumberProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp;
-
-   /**
-    * Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string;
-
-   /** Name of the property which holds the x value. Default value is `x`. */
-   xField?: string;
-
-   /** Name of the property which holds the y value. Default value is `y`. */
-   yField?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `linegraph`. */
-   baseClass?: string;
-
-   /** Name of the property which holds the y0 value. Default value is `false`, which means y0 value is not read from the data array. */
-   y0Field?: string | false;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** Set to true to avoid forcing the vertical axis to accommodate y0 values. */
-   hiddenBase?: boolean;
-
-   /** Set to `true` to draw smoothed lines between data points using cubic Bézier curve.
-    * When enabled, the graph uses control points calculated from neighboring values to create smooth transitions between data points. */
-   smooth?: boolean;
-
-   /** Controls the intensity of the smoothing effect applied to Bézier curves when `smooth` is enabled.
-    * Accepts a number between `0` (straight lines) and `0.4` (maximum smoothing).
-    * Values outside this range are automatically clamped. Default value is `0.05`. */
-   smoothingRatio?: number;
-}
-
-export class LineGraph extends Cx.Widget<LineGraphProps> {}
diff --git a/packages/cx/src/charts/LineGraph.js b/packages/cx/src/charts/LineGraph.js
deleted file mode 100644
index a39f1c56d..000000000
--- a/packages/cx/src/charts/LineGraph.js
+++ /dev/null
@@ -1,300 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { isArray } from "../util/isArray";
-import { parseStyle } from "../util/parseStyle";
-
-export class LineGraph extends Widget {
-   declareData() {
-      super.declareData(...arguments, {
-         data: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         class: {
-            structured: true,
-         },
-         className: {
-            structured: true,
-         },
-         lineStyle: {
-            structured: true,
-         },
-         areaStyle: {
-            structured: true,
-         },
-         area: undefined,
-         line: undefined,
-         y0: undefined,
-         name: undefined,
-         active: true,
-         stack: undefined,
-         stacked: undefined,
-         smooth: undefined,
-         smoothingRatio: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      if (data.smooth && data.smoothingRatio != null) {
-         if (data.smoothingRatio < 0) data.smoothingRatio = 0;
-         if (data.smoothingRatio > 0.4) data.smoothingRatio = 0.4;
-      }
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      if (data.active) {
-         instance.axes = context.axes;
-         instance.xAxis = instance.axes[this.xAxis];
-         instance.yAxis = instance.axes[this.yAxis];
-         super.explore(context, instance);
-         if (isArray(data.data)) {
-            data.data.forEach((p, index) => {
-               let x = p[this.xField];
-               instance.xAxis.acknowledge(x);
-               if (data.stacked) {
-                  instance.yAxis.stacknowledge(data.stack, x, this.y0Field ? p[this.y0Field] : data.y0);
-                  instance.yAxis.stacknowledge(data.stack, x, p[this.yField]);
-               } else {
-                  instance.yAxis.acknowledge(p[this.yField]);
-                  if (data.area) {
-                     if (!this.hiddenBase) instance.yAxis.acknowledge(this.y0Field ? p[this.y0Field] : data.y0);
-                  }
-               }
-            });
-         }
-      }
-   }
-
-   prepare(context, instance) {
-      let { data, colorMap } = instance;
-
-      if (colorMap && data.colorName) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-
-      if (data.active) {
-         if (instance.axes[this.xAxis].shouldUpdate || instance.axes[this.yAxis].shouldUpdate)
-            instance.markShouldUpdate(context);
-      }
-
-      if (data.name && context.addLegendEntry) {
-         context.addLegendEntry(this.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            disabled: data.disabled,
-            style: {
-               ...parseStyle(data.style),
-               ...parseStyle(data.areaStyle),
-               ...parseStyle(data.lineStyle),
-            },
-            shape: this.legendShape,
-            onClick: (e) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-      }
-
-      if (data.active) {
-         if (context.pointReducer && isArray(data.data)) {
-            data.data.forEach((p, index) => {
-               if (data.area && this.y0Field)
-                  context.pointReducer(p[this.xField], p[this.y0Field], data.name, p, data.data, index);
-               context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
-            });
-         }
-      }
-
-      instance.lineSpans = this.calculateLineSpans(context, instance);
-   }
-
-   onLegendClick(e, instance) {
-      let allActions = this.legendAction == "auto";
-      let { data } = instance;
-      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
-   }
-
-   calculateLineSpans(context, instance) {
-      let { data, xAxis, yAxis } = instance;
-      let spans = [];
-      let span = [];
-
-      if (!data.active) return null;
-
-      isArray(data.data) &&
-         data.data.forEach((p) => {
-            let ax = p[this.xField],
-               ay = p[this.yField],
-               ay0 = this.y0Field ? p[this.y0Field] : data.y0,
-               x,
-               y,
-               y0;
-
-            if (ax != null && ay != null && ay0 != null) {
-               x = xAxis.map(ax);
-               y0 = data.stacked ? yAxis.stack(data.stack, ax, ay0) : yAxis.map(ay0);
-               y = data.stacked ? yAxis.stack(data.stack, ax, ay) : yAxis.map(ay);
-            }
-
-            if (x != null && y != null && y0 != null) span.push({ x, y, y0 });
-            else if (span.length > 0) {
-               spans.push(span);
-               span = [];
-            }
-         });
-
-      if (span.length > 0) spans.push(span);
-      return spans;
-   }
-
-   render(context, instance, key) {
-      let { data, lineSpans } = instance;
-
-      if (!lineSpans) return null;
-
-      let stateMods = {
-         ["color-" + data.colorIndex]: data.colorIndex != null,
-      };
-
-      let line, area;
-      const r = data.smoothingRatio;
-
-      let linePath = "";
-      if (data.line) {
-         lineSpans.forEach((span) => {
-            span.forEach((p, i) => {
-               linePath +=
-                  i == 0
-                     ? `M ${p.x} ${p.y}`
-                     : !data.smooth || span.length < 2
-                       ? `L ${p.x} ${p.y}`
-                       : this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r);
-            });
-         });
-
-         line = (
-            <path
-               className={this.CSS.element(this.baseClass, "line", stateMods)}
-               style={this.CSS.parseStyle(data.lineStyle)}
-               d={linePath}
-            />
-         );
-      }
-
-      if (data.area) {
-         let areaPath = "";
-         lineSpans.forEach((span) => {
-            let closePath = "";
-            span.forEach((p, i) => {
-               let segment = "";
-               if (i == 0) {
-                  segment = `M ${p.x} ${p.y}`;
-
-                  // closing point
-                  closePath =
-                     !data.smooth || span.length < 2
-                        ? `L ${p.x} ${p.y0}`
-                        : this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0");
-               } else {
-                  if (!data.smooth) {
-                     segment = `L ${p.x} ${p.y}`;
-                     closePath = `L ${p.x} ${p.y0}` + closePath;
-                  } else {
-                     segment = this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r, "y");
-
-                     // closing point
-                     if (i < span.length - 1)
-                        closePath = this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0") + closePath;
-                  }
-               }
-               areaPath += segment;
-            });
-
-            areaPath += `L ${span[span.length - 1].x} ${span[span.length - 1].y0}`;
-            areaPath += closePath;
-            areaPath += "Z";
-         });
-
-         area = (
-            <path
-               className={this.CSS.element(this.baseClass, "area", stateMods)}
-               style={this.CSS.parseStyle(data.areaStyle)}
-               d={areaPath}
-            />
-         );
-      }
-
-      return (
-         <g key={key} className={data.classNames}>
-            {line}
-            {area}
-         </g>
-      );
-   }
-
-   getCurvedPathSegment(p, points, i1, i2, j1, j2, r, yField = "y") {
-      const [sx, sy] = this.getControlPoint({ cp: points[i1], pp: points[i2], r, np: p, yField });
-      const [ex, ey] = this.getControlPoint({ cp: p, pp: points[j1], np: points[j2], r, reverse: true, yField });
-
-      return `C ${sx} ${sy}, ${ex} ${ey}, ${p.x} ${p[yField]}`;
-   }
-
-   getControlPoint({ cp, pp, np, r, reverse, yField = "y" }) {
-      // When 'current' is the first or last point of the array 'previous' or 'next' don't exist. Replace with 'current'.
-      const p = pp || cp;
-      const n = np || cp;
-
-      // Properties of the opposed-line
-      let { angle, length } = this.getLineInfo(p.x, p[yField], n.x, n[yField]);
-      // If it is end-control-point, add PI to the angle to go backward
-      angle = angle + (reverse ? Math.PI : 0);
-      length = length * r;
-      // The control point position is relative to the current point
-      const x = cp.x + Math.cos(angle) * length;
-      const y = cp[yField] + Math.sin(angle) * length;
-      return [x, y];
-   }
-
-   getLineInfo(p1x, p1y, p2x, p2y) {
-      const lengthX = p2x - p1x;
-      const lengthY = p2y - p1y;
-
-      return {
-         length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
-         angle: Math.atan2(lengthY, lengthX),
-      };
-   }
-}
-
-LineGraph.prototype.xAxis = "x";
-LineGraph.prototype.yAxis = "y";
-LineGraph.prototype.area = false;
-LineGraph.prototype.line = true;
-
-LineGraph.prototype.xField = "x";
-LineGraph.prototype.yField = "y";
-LineGraph.prototype.baseClass = "linegraph";
-LineGraph.prototype.y0 = 0;
-LineGraph.prototype.y0Field = false;
-LineGraph.prototype.active = true;
-LineGraph.prototype.legend = "legend";
-LineGraph.prototype.legendAction = "auto";
-LineGraph.prototype.legendShape = "rect";
-LineGraph.prototype.stack = "stack";
-LineGraph.prototype.hiddenBase = false;
-
-LineGraph.prototype.smooth = false;
-LineGraph.prototype.smoothingRatio = 0.05;
-
-Widget.alias("line-graph", LineGraph);
diff --git a/packages/cx/src/charts/LineGraph.scss b/packages/cx/src/charts/LineGraph.scss
index 9b49d4724..2191fc5f5 100644
--- a/packages/cx/src/charts/LineGraph.scss
+++ b/packages/cx/src/charts/LineGraph.scss
@@ -1,11 +1,12 @@
+@use "sass:map";
 
 @mixin cx-linegraph(
    $name: 'linegraph',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-line {
       stroke: gray;
diff --git a/packages/cx/src/charts/LineGraph.tsx b/packages/cx/src/charts/LineGraph.tsx
new file mode 100644
index 000000000..9d5c17bb5
--- /dev/null
+++ b/packages/cx/src/charts/LineGraph.tsx
@@ -0,0 +1,455 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { isArray } from "../util/isArray";
+import { parseStyle } from "../util/parseStyle";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp, RecordsProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+import { ClassProp } from "../ui/Prop";
+
+interface LinePoint {
+   x: number;
+   y: number;
+   y0: number;
+}
+
+export interface LineGraphConfig extends WidgetConfig {
+   /** Data for the graph. Each entry should be an object with at least two properties
+    * whose names should match the `xField` and `yField` values.
+    */
+   data?: RecordsProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: StringProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: BooleanProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: StringProp;
+
+   /** Indicate that values should be stacked on top of the other values. Default value is `false`. */
+   stacked?: BooleanProp;
+
+   /** Set to `true` to enable smooth (curved) line rendering. */
+   smooth?: BooleanProp;
+
+   /** Controls the curvature of smooth lines. Value should be between 0 and 0.4. Default is 0.05. */
+   smoothingRatio?: NumberProp;
+
+   /** Name of the horizontal axis. Default value is `x`. */
+   xAxis?: string;
+
+   /** Name of the vertical axis. Default value is `y`. */
+   yAxis?: string;
+
+   /** Name of the property which holds the x value. Default value is `x`. */
+   xField?: string;
+
+   /** Name of the property which holds the y value. Default value is `y`. */
+   yField?: string;
+
+   /** Name of the property which holds the base value. Default value is `false`, meaning y0 is used instead. */
+   y0Field?: string | false;
+
+   /** Base value. Default value is `0`. */
+   y0?: NumberProp;
+
+   /** Hide the base value. */
+   hiddenBase?: boolean;
+
+   /** Set to `true` to enable area rendering. */
+   area?: BooleanProp;
+
+   /** Set to `false` to disable line rendering. Default is `true`. */
+   line?: BooleanProp;
+
+   /** Style for the line element. */
+   lineStyle?: StyleProp;
+
+   /** Style for the area element. */
+   areaStyle?: StyleProp;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
+
+   /** Action to perform on legend item click. Default is `auto`. */
+   legendAction?: string;
+
+   /** Shape to use in legend. */
+   legendShape?: string;
+
+   /**
+    * Additional CSS classes to be applied to the field.
+    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+    */
+   class?: ClassProp;
+
+   /**
+    * Additional CSS classes to be applied to the field.
+    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+    */
+   className?: ClassProp;
+}
+
+export interface LineGraphInstance extends Instance {
+   xAxis: any;
+   yAxis: any;
+   axes: Record<string, any>;
+   colorMap: any;
+   lineSpans: LinePoint[][] | null;
+}
+
+export class LineGraph extends Widget {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare xField: string;
+   declare yField: string;
+   declare y0Field: string | false;
+   declare y0: number;
+   declare hiddenBase: boolean;
+   declare area: boolean;
+   declare line: boolean;
+   declare active: boolean;
+   declare legend: string | false;
+   declare legendAction: string;
+   declare legendShape: string;
+   declare stack: string;
+   declare smooth: boolean;
+   declare smoothingRatio: number;
+
+   constructor(config: LineGraphConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         data: undefined,
+         colorIndex: undefined,
+         colorMap: undefined,
+         class: {
+            structured: true,
+         },
+         className: {
+            structured: true,
+         },
+         lineStyle: {
+            structured: true,
+         },
+         areaStyle: {
+            structured: true,
+         },
+         area: undefined,
+         line: undefined,
+         y0: undefined,
+         name: undefined,
+         active: true,
+         stack: undefined,
+         stacked: undefined,
+         smooth: undefined,
+         smoothingRatio: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: LineGraphInstance): void {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      if (data.smooth && data.smoothingRatio != null) {
+         if (data.smoothingRatio < 0) data.smoothingRatio = 0;
+         if (data.smoothingRatio > 0.4) data.smoothingRatio = 0.4;
+      }
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: ChartRenderingContext, instance: LineGraphInstance): void {
+      let { data } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (data.active) {
+         instance.axes = context.axes!;
+         instance.xAxis = instance.axes[this.xAxis];
+         instance.yAxis = instance.axes[this.yAxis];
+         super.explore(context, instance);
+         if (isArray(data.data)) {
+            data.data.forEach((p: any) => {
+               let x = p[this.xField];
+               instance.xAxis.acknowledge(x);
+               if (data.stacked) {
+                  instance.yAxis.stacknowledge(data.stack, x, this.y0Field ? p[this.y0Field] : data.y0);
+                  instance.yAxis.stacknowledge(data.stack, x, p[this.yField]);
+               } else {
+                  instance.yAxis.acknowledge(p[this.yField]);
+                  if (data.area) {
+                     if (!this.hiddenBase) instance.yAxis.acknowledge(this.y0Field ? p[this.y0Field] : data.y0);
+                  }
+               }
+            });
+         }
+      }
+   }
+
+   prepare(context: ChartRenderingContext, instance: LineGraphInstance): void {
+      let { data, colorMap } = instance;
+
+      if (colorMap && data.colorName) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (data.active) {
+         if (instance.axes[this.xAxis].shouldUpdate || instance.axes[this.yAxis].shouldUpdate)
+            instance.markShouldUpdate(context);
+      }
+
+      if (data.name && context.addLegendEntry) {
+         context.addLegendEntry(this.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            disabled: data.disabled,
+            style: {
+               ...parseStyle(data.style),
+               ...parseStyle(data.areaStyle),
+               ...parseStyle(data.lineStyle),
+            },
+            shape: this.legendShape,
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+      }
+
+      if (data.active) {
+         if (context.pointReducer && isArray(data.data)) {
+            data.data.forEach((p: any, index: number) => {
+               if (data.area && this.y0Field)
+                  context.pointReducer(p[this.xField], p[this.y0Field], data.name, p, data.data, index);
+               context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
+            });
+         }
+      }
+
+      instance.lineSpans = this.calculateLineSpans(context, instance);
+   }
+
+   onLegendClick(e: MouseEvent, instance: LineGraphInstance): void {
+      let allActions = this.legendAction == "auto";
+      let { data } = instance;
+      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
+   }
+
+   calculateLineSpans(context: RenderingContext, instance: LineGraphInstance): LinePoint[][] | null {
+      let { data, xAxis, yAxis } = instance;
+      let spans: LinePoint[][] = [];
+      let span: LinePoint[] = [];
+
+      if (!data.active) return null;
+
+      isArray(data.data) &&
+         data.data.forEach((p: any) => {
+            let ax = p[this.xField],
+               ay = p[this.yField],
+               ay0 = this.y0Field ? p[this.y0Field] : data.y0,
+               x: number | undefined,
+               y: number | undefined,
+               y0: number | undefined;
+
+            if (ax != null && ay != null && ay0 != null) {
+               x = xAxis.map(ax);
+               y0 = data.stacked ? yAxis.stack(data.stack, ax, ay0) : yAxis.map(ay0);
+               y = data.stacked ? yAxis.stack(data.stack, ax, ay) : yAxis.map(ay);
+            }
+
+            if (x != null && y != null && y0 != null) span.push({ x, y, y0 });
+            else if (span.length > 0) {
+               spans.push(span);
+               span = [];
+            }
+         });
+
+      if (span.length > 0) spans.push(span);
+      return spans;
+   }
+
+   render(context: RenderingContext, instance: LineGraphInstance, key: string): React.ReactNode {
+      let { data, lineSpans } = instance;
+
+      if (!lineSpans) return null;
+
+      let stateMods: Record<string, boolean> = {
+         ["color-" + data.colorIndex]: data.colorIndex != null,
+      };
+
+      let line: React.ReactNode, area: React.ReactNode;
+      const r = data.smoothingRatio;
+
+      let linePath = "";
+      if (data.line) {
+         lineSpans.forEach((span) => {
+            span.forEach((p, i) => {
+               linePath +=
+                  i == 0
+                     ? `M ${p.x} ${p.y}`
+                     : !data.smooth || span.length < 2
+                       ? `L ${p.x} ${p.y}`
+                       : this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r);
+            });
+         });
+
+         line = (
+            <path
+               className={this.CSS.element(this.baseClass, "line", stateMods)}
+               style={this.CSS.parseStyle(data.lineStyle)}
+               d={linePath}
+            />
+         );
+      }
+
+      if (data.area) {
+         let areaPath = "";
+         lineSpans.forEach((span) => {
+            let closePath = "";
+            span.forEach((p, i) => {
+               let segment = "";
+               if (i == 0) {
+                  segment = `M ${p.x} ${p.y}`;
+
+                  // closing point
+                  closePath =
+                     !data.smooth || span.length < 2
+                        ? `L ${p.x} ${p.y0}`
+                        : this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0");
+               } else {
+                  if (!data.smooth) {
+                     segment = `L ${p.x} ${p.y}`;
+                     closePath = `L ${p.x} ${p.y0}` + closePath;
+                  } else {
+                     segment = this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r, "y");
+
+                     // closing point
+                     if (i < span.length - 1)
+                        closePath = this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0") + closePath;
+                  }
+               }
+               areaPath += segment;
+            });
+
+            areaPath += `L ${span[span.length - 1].x} ${span[span.length - 1].y0}`;
+            areaPath += closePath;
+            areaPath += "Z";
+         });
+
+         area = (
+            <path
+               className={this.CSS.element(this.baseClass, "area", stateMods)}
+               style={this.CSS.parseStyle(data.areaStyle)}
+               d={areaPath}
+            />
+         );
+      }
+
+      return (
+         <g key={key} className={data.classNames}>
+            {line}
+            {area}
+         </g>
+      );
+   }
+
+   getCurvedPathSegment(
+      p: LinePoint,
+      points: LinePoint[],
+      i1: number,
+      i2: number,
+      j1: number,
+      j2: number,
+      r: number,
+      yField: "y" | "y0" = "y",
+   ): string {
+      const [sx, sy] = this.getControlPoint({ cp: points[i1], pp: points[i2], r, np: p, yField });
+      const [ex, ey] = this.getControlPoint({ cp: p, pp: points[j1], np: points[j2], r, reverse: true, yField });
+
+      return `C ${sx} ${sy}, ${ex} ${ey}, ${p.x} ${p[yField]}`;
+   }
+
+   getControlPoint({
+      cp,
+      pp,
+      np,
+      r,
+      reverse,
+      yField = "y",
+   }: {
+      cp: LinePoint;
+      pp: LinePoint | undefined;
+      np: LinePoint | undefined;
+      r: number;
+      reverse?: boolean;
+      yField?: "y" | "y0";
+   }): [number, number] {
+      // When 'current' is the first or last point of the array 'previous' or 'next' don't exist. Replace with 'current'.
+      const p = pp || cp;
+      const n = np || cp;
+
+      // Properties of the opposed-line
+      let { angle, length } = this.getLineInfo(p.x, p[yField], n.x, n[yField]);
+      // If it is end-control-point, add PI to the angle to go backward
+      angle = angle + (reverse ? Math.PI : 0);
+      length = length * r;
+      // The control point position is relative to the current point
+      const x = cp.x + Math.cos(angle) * length;
+      const y = cp[yField] + Math.sin(angle) * length;
+      return [x, y];
+   }
+
+   getLineInfo(p1x: number, p1y: number, p2x: number, p2y: number): { length: number; angle: number } {
+      const lengthX = p2x - p1x;
+      const lengthY = p2y - p1y;
+
+      return {
+         length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+         angle: Math.atan2(lengthY, lengthX),
+      };
+   }
+}
+
+LineGraph.prototype.xAxis = "x";
+LineGraph.prototype.yAxis = "y";
+LineGraph.prototype.area = false;
+LineGraph.prototype.line = true;
+
+LineGraph.prototype.xField = "x";
+LineGraph.prototype.yField = "y";
+LineGraph.prototype.baseClass = "linegraph";
+LineGraph.prototype.y0 = 0;
+LineGraph.prototype.y0Field = false;
+LineGraph.prototype.active = true;
+LineGraph.prototype.legend = "legend";
+LineGraph.prototype.legendAction = "auto";
+LineGraph.prototype.legendShape = "rect";
+LineGraph.prototype.stack = "stack";
+LineGraph.prototype.hiddenBase = false;
+
+LineGraph.prototype.smooth = false;
+LineGraph.prototype.smoothingRatio = 0.05;
+LineGraph.prototype.styled = true;
+
+Widget.alias("line-graph", LineGraph);
diff --git a/packages/cx/src/charts/Marker.d.ts b/packages/cx/src/charts/Marker.d.ts
deleted file mode 100644
index 7a2c44a26..000000000
--- a/packages/cx/src/charts/Marker.d.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-
-interface MarkerProps extends BoundedObjectProps {
-   /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number | Date>;
-
-   /** The `y` value binding or expression. */
-   y?: Cx.Prop<string | number>;
-
-   /** Used to indicate if the data should affect axis span. */
-   affectsAxes?: Cx.BooleanProp;
-
-   /** Shape kind. `circle`, `square`, `triangle`, etc. */
-   shape?: Cx.StringProp;
-
-   disabled?: Cx.BooleanProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.Prop<string | number>;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   legendColorIndex?: Cx.NumberProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   xOffset?: number;
-   yOffset?: number;
-
-   /** Size of the shape in pixels. */
-   size?: Cx.NumberProp;
-
-   /**
-    * Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    *  in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `marker`. */
-   baseClass?: string;
-
-   /** Set to `true` to make the shape draggable along the X axis. */
-   draggableX?: boolean;
-
-   /** Set to `true` to make the shape draggable along the Y axis. */
-   draggableY?: boolean;
-
-   /** Set to `true` to make the shape draggable along the X and Y axis. */
-   draggable?: boolean;
-
-   /** Constrain the marker position to min/max values of the X axis during drag operations. */
-   constrainX?: boolean;
-
-   /** Constrain the marker position to min/max values of the Y axis during drag operations. */
-   constrainY?: boolean;
-
-   /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
-   constrain?: boolean;
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string;
-
-   legendAction?: string;
-
-   /** Tooltip configuration. For more info see Tooltips. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp;
-
-   /** Set to true to hide the marker. The marker will still participate in axis range calculations. */
-   hidden?: boolean;
-
-   /** Indicate that markers should be stacked horizontally. Default value is `false`. */
-   stackedX?: Cx.BooleanProp;
-
-   /** Indicate that markers should be stacked vertically. Default value is `false`. */
-   stackedY?: Cx.BooleanProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /**
-    * Applies to rectangular shapes. The horizontal corner radius of the rect. Defaults to ry if ry is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   rx?: Cx.StringProp | Cx.NumberProp;
-
-   /**
-    * Applies to rectangular shapes. The vertical corner radius of the rect. Defaults to rx if rx is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   ry?: Cx.StringProp | Cx.NumberProp;
-}
-
-export class Marker extends Cx.Widget<MarkerProps> {}
diff --git a/packages/cx/src/charts/Marker.js b/packages/cx/src/charts/Marker.js
deleted file mode 100644
index 928bec7a9..000000000
--- a/packages/cx/src/charts/Marker.js
+++ /dev/null
@@ -1,311 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-import {
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentWillUnmount,
-   tooltipParentWillReceiveProps,
-   tooltipParentDidMount,
-   tooltipParentDidUpdate,
-} from "../widgets/overlay/tooltip-ops";
-import { captureMouseOrTouch, getCursorPos } from "../widgets/overlay/captureMouse";
-import { closest } from "../util/DOM";
-import { Selection } from "../ui/selection/Selection";
-import { getShape } from "./shapes";
-import { getTopLevelBoundingClientRect } from "../util/getTopLevelBoundingClientRect";
-
-export class Marker extends BoundedObject {
-   init() {
-      this.selection = Selection.create(this.selection);
-
-      if (this.draggable) {
-         this.draggableX = true;
-         this.draggableY = true;
-      }
-
-      if (this.constrain) {
-         this.constrainX = true;
-         this.constrainY = true;
-      }
-
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      return super.declareData(...arguments, selection, {
-         x: undefined,
-         y: undefined,
-         size: undefined,
-         shape: undefined,
-         disabled: undefined,
-         colorMap: undefined,
-         colorIndex: undefined,
-         colorName: undefined,
-         legendColorIndex: undefined,
-         name: undefined,
-         active: true,
-         stack: undefined,
-         stackedX: undefined,
-         stackedY: undefined,
-         rx: undefined,
-         ry: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      instance.axes = context.axes;
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-      let { data } = instance;
-      data.selected = this.selection.isInstanceSelected(instance);
-      data.stateMods = {
-         selected: data.selected,
-         disabled: data.disabled,
-         selectable: !this.selection.isDummy,
-         "draggable-x": this.draggableX && !this.draggableY,
-         "draggable-y": this.draggableY && !this.draggableX,
-         "draggable-xy": this.draggableY && this.draggableX,
-      };
-      if (data.name && !data.colorName) data.colorName = data.name;
-      super.prepareData(context, instance);
-   }
-
-   calculateBounds(context, instance) {
-      let { data, xAxis, yAxis } = instance;
-
-      let x, y;
-
-      if (data.x == null || data.y == null) {
-         let bounds = super.calculateBounds(context, instance);
-         x = (bounds.l + bounds.r) / 2;
-         y = (bounds.t + bounds.b) / 2;
-      }
-
-      if (data.x != null) x = data.stackedX ? xAxis.stack(data.stack, data.y, data.x) : xAxis.map(data.x);
-
-      if (data.y != null) y = data.stackedY ? yAxis.stack(data.stack, data.x, data.y) : yAxis.map(data.y);
-
-      return new Rect({
-         l: x - data.size / 2,
-         r: x + data.size / 2,
-         t: y - data.size / 2,
-         b: y + data.size / 2,
-      });
-   }
-
-   explore(context, instance) {
-      let { data, xAxis, yAxis } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      if (data.active) {
-         if (this.affectsAxes) {
-            if (xAxis && data.x != null) {
-               if (data.stackedX) xAxis.stacknowledge(data.stack, data.y, data.x);
-               else xAxis.acknowledge(data.x, 0, this.xOffset);
-            }
-
-            if (yAxis && data.y != null) {
-               if (data.stackedY) yAxis.stacknowledge(data.stack, data.x, data.y);
-               else yAxis.acknowledge(data.y, 0, this.yOffset);
-            }
-         }
-         super.explore(context, instance);
-      }
-   }
-
-   prepare(context, instance) {
-      let { data, xAxis, yAxis, colorMap } = instance;
-
-      if (colorMap && data.colorName) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-
-      if (data.active) {
-         if (xAxis && xAxis.shouldUpdate) instance.markShouldUpdate(context);
-
-         if (yAxis && yAxis.shouldUpdate) instance.markShouldUpdate(context);
-
-         if (context.pointReducer) context.pointReducer(data.x, data.y, data.name, data);
-      }
-
-      super.prepare(context, instance);
-
-      if (data.name && context.addLegendEntry)
-         context.addLegendEntry(this.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.legendColorIndex || data.colorIndex,
-            disabled: data.disabled,
-            selected: data.selected,
-            style: data.style,
-            shape: data.shape,
-            onClick: (e) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-   }
-
-   onLegendClick(e, instance) {
-      let allActions = this.legendAction == "auto";
-      let { data } = instance;
-      if (allActions || this.legendAction == "toggle") if (instance.set("active", !data.active)) return;
-
-      if (allActions || this.legendAction == "select") this.handleClick(e, instance);
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-
-      if (!data.active || data.x === null || data.y === null) return null;
-
-      return (
-         <MarkerComponent key={key} instance={instance} data={instance.data} shouldUpdate={instance.shouldUpdate}>
-            {this.renderChildren(context, instance)}
-         </MarkerComponent>
-      );
-   }
-
-   handleMouseDown(e, instance) {
-      if (this.draggableX || this.draggableY) {
-         let svgEl = closest(e.target, (el) => el.tagName == "svg");
-         if (svgEl)
-            captureMouseOrTouch(
-               e,
-               (e, captureData) => {
-                  this.handleDragMove(e, instance, captureData);
-               },
-               null,
-               { svgEl, el: e.target },
-               e.target.style.cursor,
-            );
-      } else {
-         if (!this.selection.isDummy) this.selection.selectInstance(instance);
-      }
-   }
-
-   handleClick(e, instance) {
-      if (this.onClick) instance.invoke("onClick", e, instance);
-   }
-
-   handleDragMove(e, instance, captureData) {
-      let cursor = getCursorPos(e);
-      let svgBounds = getTopLevelBoundingClientRect(captureData.svgEl);
-      let { xAxis, yAxis } = instance;
-      if (this.draggableX && xAxis) {
-         let x = xAxis.trackValue(cursor.clientX - svgBounds.left, this.xOffset);
-         if (this.constrainX) x = xAxis.constrainValue(x);
-         instance.set("x", xAxis.encodeValue(x));
-      }
-      if (this.draggableY && yAxis) {
-         let y = yAxis.trackValue(cursor.clientY - svgBounds.top, this.yOffset);
-         if (this.constrainY) y = yAxis.constrainValue(y);
-         instance.set("y", yAxis.encodeValue(y));
-      }
-      tooltipMouseMove(e, instance, this.tooltip, { target: captureData.el });
-   }
-}
-
-Marker.prototype.xOffset = 0;
-Marker.prototype.yOffset = 0;
-Marker.prototype.size = 5;
-Marker.prototype.anchors = "0.5 0.5 0.5 0.5";
-
-Marker.prototype.xAxis = "x";
-Marker.prototype.yAxis = "y";
-
-Marker.prototype.baseClass = "marker";
-Marker.prototype.draggableX = false;
-Marker.prototype.draggableY = false;
-Marker.prototype.draggable = false;
-Marker.prototype.constrainX = false;
-Marker.prototype.constrainY = false;
-Marker.prototype.constrain = false;
-Marker.prototype.legend = "legend";
-Marker.prototype.legendAction = "auto";
-Marker.prototype.shape = "circle";
-Marker.prototype.styled = true;
-Marker.prototype.hidden = false;
-Marker.prototype.affectsAxes = true;
-Marker.prototype.stackedY = false;
-Marker.prototype.stackedX = false;
-Marker.prototype.stack = "stack";
-
-BoundedObject.alias("marker", Marker);
-
-class MarkerComponent extends VDOM.Component {
-   shouldComponentUpdate(props) {
-      return props.shouldUpdate;
-   }
-
-   render() {
-      let { instance, children, data } = this.props;
-      let { widget } = instance;
-      let { CSS, baseClass } = widget;
-      let { bounds, shape } = data;
-      let shapeRenderer = getShape(shape);
-      let shapeProps = {
-         className: CSS.element(baseClass, "shape", {
-            ["color-" + data.colorIndex]: data.colorIndex != null,
-            selected: data.selected,
-         }),
-         style: data.style,
-         cx: (bounds.l + bounds.r) / 2,
-         cy: (bounds.t + bounds.b) / 2,
-         r: data.size / 2,
-         onMouseMove: (e) => {
-            tooltipMouseMove(e, instance, widget.tooltip);
-         },
-         onMouseLeave: (e) => {
-            tooltipMouseLeave(e, instance, widget.tooltip);
-         },
-         onMouseDown: (e) => {
-            widget.handleMouseDown(e, instance);
-         },
-         onTouchStart: (e) => {
-            widget.handleMouseDown(e, instance);
-         },
-         onClick: (e) => {
-            widget.handleClick(e, instance);
-         },
-      };
-
-      if (shape == "rect" || shape == "square" || shape == "bar" || shape == "column") {
-         shapeProps.rx = data.rx;
-         shapeProps.ry = data.ry;
-      }
-
-      if (widget.tooltip) {
-         shapeProps.ref = (c) => {
-            this.el = c;
-         };
-      }
-
-      return (
-         <g className={data.classNames}>
-            {!widget.hidden &&
-               shapeRenderer((bounds.l + bounds.r) / 2, (bounds.t + bounds.b) / 2, data.size, shapeProps)}
-            {children}
-         </g>
-      );
-   }
-
-   componentWillUnmount() {
-      tooltipParentWillUnmount(this.props.instance);
-   }
-   UNSAFE_componentWillReceiveProps(props) {
-      tooltipParentWillReceiveProps(this.el, props.instance, props.instance.widget.tooltip);
-   }
-   componentDidMount() {
-      tooltipParentDidMount(this.el, this.props.instance, this.props.instance.widget.tooltip);
-   }
-
-   componentDidUpdate() {
-      tooltipParentDidUpdate(this.el, this.props.instance, this.props.instance.widget.tooltip);
-   }
-}
diff --git a/packages/cx/src/charts/Marker.scss b/packages/cx/src/charts/Marker.scss
index 67addc79f..b6f6628f9 100644
--- a/packages/cx/src/charts/Marker.scss
+++ b/packages/cx/src/charts/Marker.scss
@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-marker(
    $name: 'marker',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-shape {
       fill: rgb(128, 128, 128);
diff --git a/packages/cx/src/charts/Marker.tsx b/packages/cx/src/charts/Marker.tsx
new file mode 100644
index 000000000..f6bcda8b3
--- /dev/null
+++ b/packages/cx/src/charts/Marker.tsx
@@ -0,0 +1,483 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM } from "../ui/Widget";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import {
+   tooltipMouseMove,
+   tooltipMouseLeave,
+   tooltipParentWillUnmount,
+   tooltipParentWillReceiveProps,
+   tooltipParentDidMount,
+   tooltipParentDidUpdate,
+   TooltipParentInstance,
+   TooltipConfig,
+} from "../widgets/overlay/tooltip-ops";
+import { captureMouseOrTouch, getCursorPos } from "../widgets/overlay/captureMouse";
+import { closest } from "../util/DOM";
+import { Selection } from "../ui/selection/Selection";
+import { getShape } from "./shapes";
+import { getTopLevelBoundingClientRect } from "../util/getTopLevelBoundingClientRect";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp, StructuredProp } from "../ui/Prop";
+import { Instance } from "../ui/Instance";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface MarkerConfig extends BoundedObjectConfig {
+   /** The `x` value binding or expression. */
+   x?: NumberProp | StringProp;
+
+   /** The `y` value binding or expression. */
+   y?: NumberProp;
+
+   /** Used to indicate if the data should affect axis span. */
+   affectsAxes?: boolean;
+
+   /** Shape kind. `circle`, `square`, `triangle`, etc. */
+   shape?: StringProp;
+
+   /** Disabled state. */
+   disabled?: BooleanProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp | StringProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: StringProp;
+
+   /** Color index to use for the legend entry. */
+   legendColorIndex?: NumberProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: BooleanProp;
+
+   /** X offset. */
+   xOffset?: number;
+
+   /** Y offset. */
+   yOffset?: number;
+
+   /** Size of the shape in pixels. */
+   size?: NumberProp;
+
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    */
+   xAxis?: string;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    *  in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    */
+   yAxis?: string;
+
+   /** Set to `true` to make the shape draggable along the X axis. */
+   draggableX?: boolean;
+
+   /** Set to `true` to make the shape draggable along the Y axis. */
+   draggableY?: boolean;
+
+   /** Set to `true` to make the shape draggable along the X and Y axis. */
+   draggable?: boolean;
+
+   /** Constrain the marker position to min/max values of the X axis during drag operations. */
+   constrainX?: boolean;
+
+   /** Constrain the marker position to min/max values of the Y axis during drag operations. */
+   constrainY?: boolean;
+
+   /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
+   constrain?: boolean;
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: string;
+
+   /** Action to perform on legend item click. Default is `auto`. */
+   legendAction?: string;
+
+   /** Tooltip configuration. For more info see Tooltips. */
+   tooltip?: StringProp | StructuredProp;
+
+   /** Set to true to hide the marker. The marker will still participate in axis range calculations. */
+   hidden?: boolean;
+
+   /** Indicate that markers should be stacked horizontally. Default value is `false`. */
+   stackedX?: BooleanProp;
+
+   /** Indicate that markers should be stacked vertically. Default value is `false`. */
+   stackedY?: BooleanProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: StringProp;
+
+   /**
+    * Applies to rectangular shapes. The horizontal corner radius of the rect. Defaults to ry if ry is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   rx?: StringProp | NumberProp;
+
+   /**
+    * Applies to rectangular shapes. The vertical corner radius of the rect. Defaults to rx if rx is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   ry?: StringProp | NumberProp;
+
+   /** Selection configuration. */
+   selection?: any;
+
+   /** Click event handler. */
+   onClick?: (e: React.MouseEvent, instance: Instance) => void;
+}
+
+export interface MarkerInstance extends BoundedObjectInstance, TooltipParentInstance {
+   axes: Record<string, any>;
+   xAxis: any;
+   yAxis: any;
+   colorMap: any;
+}
+
+export class Marker extends BoundedObject {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare xOffset: number;
+   declare yOffset: number;
+   declare size: number;
+   declare draggableX: boolean;
+   declare draggableY: boolean;
+   declare draggable: boolean;
+   declare constrainX: boolean;
+   declare constrainY: boolean;
+   declare constrain: boolean;
+   declare legend: string;
+   declare legendAction: string;
+   declare shape: string;
+   declare hidden: boolean;
+   declare affectsAxes: boolean;
+   declare stackedY: boolean;
+   declare stackedX: boolean;
+   declare stack: string;
+   declare selection: Selection;
+   declare tooltip: TooltipConfig;
+   declare onClick: MarkerConfig["onClick"];
+
+   constructor(config: MarkerConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.selection = Selection.create(this.selection);
+
+      if (this.draggable) {
+         this.draggableX = true;
+         this.draggableY = true;
+      }
+
+      if (this.constrain) {
+         this.constrainX = true;
+         this.constrainY = true;
+      }
+
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(...args, selection, {
+         x: undefined,
+         y: undefined,
+         size: undefined,
+         shape: undefined,
+         disabled: undefined,
+         colorMap: undefined,
+         colorIndex: undefined,
+         colorName: undefined,
+         legendColorIndex: undefined,
+         name: undefined,
+         active: true,
+         stack: undefined,
+         stackedX: undefined,
+         stackedY: undefined,
+         rx: undefined,
+         ry: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: MarkerInstance): void {
+      instance.axes = context.axes;
+      instance.xAxis = context.axes[this.xAxis];
+      instance.yAxis = context.axes[this.yAxis];
+      let { data } = instance;
+      data.selected = this.selection.isInstanceSelected(instance);
+      data.stateMods = {
+         selected: data.selected,
+         disabled: data.disabled,
+         selectable: !this.selection.isDummy,
+         "draggable-x": this.draggableX && !this.draggableY,
+         "draggable-y": this.draggableY && !this.draggableX,
+         "draggable-xy": this.draggableY && this.draggableX,
+      };
+      if (data.name && !data.colorName) data.colorName = data.name;
+      super.prepareData(context, instance);
+   }
+
+   calculateBounds(context: RenderingContext, instance: MarkerInstance): Rect {
+      let { data, xAxis, yAxis } = instance;
+
+      let x!: number, y!: number;
+
+      if (data.x == null || data.y == null) {
+         let bounds = super.calculateBounds(context, instance);
+         x = (bounds.l + bounds.r) / 2;
+         y = (bounds.t + bounds.b) / 2;
+      }
+
+      if (data.x != null) x = data.stackedX ? xAxis.stack(data.stack, data.y, data.x) : xAxis.map(data.x);
+
+      if (data.y != null) y = data.stackedY ? yAxis.stack(data.stack, data.x, data.y) : yAxis.map(data.y);
+
+      return new Rect({
+         l: x - data.size / 2,
+         r: x + data.size / 2,
+         t: y - data.size / 2,
+         b: y + data.size / 2,
+      });
+   }
+
+   explore(context: RenderingContext, instance: MarkerInstance): void {
+      let { data, xAxis, yAxis } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (data.active) {
+         if (this.affectsAxes) {
+            if (xAxis && data.x != null) {
+               if (data.stackedX) xAxis.stacknowledge(data.stack, data.y, data.x);
+               else xAxis.acknowledge(data.x, 0, this.xOffset);
+            }
+
+            if (yAxis && data.y != null) {
+               if (data.stackedY) yAxis.stacknowledge(data.stack, data.x, data.y);
+               else yAxis.acknowledge(data.y, 0, this.yOffset);
+            }
+         }
+         super.explore(context, instance);
+      }
+   }
+
+   prepare(context: RenderingContext, instance: MarkerInstance): void {
+      let { data, xAxis, yAxis, colorMap } = instance;
+
+      if (colorMap && data.colorName) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (data.active) {
+         if (xAxis && xAxis.shouldUpdate) instance.markShouldUpdate(context);
+
+         if (yAxis && yAxis.shouldUpdate) instance.markShouldUpdate(context);
+
+         if (context.pointReducer) context.pointReducer(data.x, data.y, data.name, data);
+      }
+
+      super.prepare(context, instance);
+
+      if (data.name && context.addLegendEntry)
+         context.addLegendEntry(this.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.legendColorIndex || data.colorIndex,
+            disabled: data.disabled,
+            selected: data.selected,
+            style: data.style,
+            shape: data.shape,
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+   }
+
+   onLegendClick(e: MouseEvent, instance: MarkerInstance): void {
+      let allActions = this.legendAction == "auto";
+      let { data } = instance;
+      if (allActions || this.legendAction == "toggle") if (instance.set("active", !data.active)) return;
+
+      if (allActions || this.legendAction == "select") this.handleClick(e as unknown as React.MouseEvent, instance);
+   }
+
+   render(context: RenderingContext, instance: MarkerInstance, key: string): React.ReactNode {
+      let { data } = instance;
+
+      if (!data.active || data.x === null || data.y === null) return null;
+
+      return (
+         <MarkerComponent key={key} instance={instance} data={instance.data} shouldUpdate={instance.shouldUpdate}>
+            {this.renderChildren(context, instance)}
+         </MarkerComponent>
+      );
+   }
+
+   handleMouseDown(e: React.MouseEvent | React.TouchEvent, instance: MarkerInstance): void {
+      if (this.draggableX || this.draggableY) {
+         let svgEl = closest(e.target as Element, (el) => el.tagName == "svg");
+         if (svgEl)
+            captureMouseOrTouch(
+               e,
+               (e, captureData) => {
+                  this.handleDragMove(e, instance, captureData);
+               },
+               undefined,
+               { svgEl, el: e.target },
+               (e.target as HTMLElement).style.cursor
+            );
+      } else {
+         if (!this.selection.isDummy) this.selection.selectInstance(instance);
+      }
+   }
+
+   handleClick(e: React.MouseEvent, instance: MarkerInstance): void {
+      if (this.onClick) instance.invoke("onClick", e, instance);
+   }
+
+   handleDragMove(e: MouseEvent | TouchEvent, instance: MarkerInstance, captureData: any): void {
+      let cursor = getCursorPos(e);
+      let svgBounds = getTopLevelBoundingClientRect(captureData.svgEl);
+      let { xAxis, yAxis } = instance;
+      if (this.draggableX && xAxis) {
+         let x = xAxis.trackValue(cursor.clientX - svgBounds.left, this.xOffset);
+         if (this.constrainX) x = xAxis.constrainValue(x);
+         instance.set("x", xAxis.encodeValue(x));
+      }
+      if (this.draggableY && yAxis) {
+         let y = yAxis.trackValue(cursor.clientY - svgBounds.top, this.yOffset);
+         if (this.constrainY) y = yAxis.constrainValue(y);
+         instance.set("y", yAxis.encodeValue(y));
+      }
+      tooltipMouseMove(e, instance, this.tooltip, { target: captureData.el });
+   }
+}
+
+Marker.prototype.xOffset = 0;
+Marker.prototype.yOffset = 0;
+Marker.prototype.size = 5;
+Marker.prototype.anchors = "0.5 0.5 0.5 0.5";
+
+Marker.prototype.xAxis = "x";
+Marker.prototype.yAxis = "y";
+
+Marker.prototype.baseClass = "marker";
+Marker.prototype.draggableX = false;
+Marker.prototype.draggableY = false;
+Marker.prototype.draggable = false;
+Marker.prototype.constrainX = false;
+Marker.prototype.constrainY = false;
+Marker.prototype.constrain = false;
+Marker.prototype.legend = "legend";
+Marker.prototype.legendAction = "auto";
+Marker.prototype.shape = "circle";
+Marker.prototype.styled = true;
+Marker.prototype.hidden = false;
+Marker.prototype.affectsAxes = true;
+Marker.prototype.stackedY = false;
+Marker.prototype.stackedX = false;
+Marker.prototype.stack = "stack";
+
+BoundedObject.alias("marker", Marker);
+
+interface MarkerComponentProps {
+   instance: MarkerInstance;
+   data: any;
+   shouldUpdate?: boolean;
+   children?: React.ReactNode;
+}
+
+class MarkerComponent extends VDOM.Component<MarkerComponentProps> {
+   declare el: SVGElement | null;
+
+   shouldComponentUpdate(props: MarkerComponentProps): boolean {
+      return props.shouldUpdate ?? true;
+   }
+
+   render(): React.ReactNode {
+      let { instance, children, data } = this.props;
+      let widget = instance.widget as Marker;
+      let { CSS, baseClass } = widget;
+      let { bounds, shape } = data;
+      let shapeRenderer = getShape(shape);
+      let shapeProps: Record<string, any> = {
+         className: CSS.element(baseClass, "shape", {
+            ["color-" + data.colorIndex]: data.colorIndex != null,
+            selected: data.selected,
+         }),
+         style: data.style,
+         cx: (bounds.l + bounds.r) / 2,
+         cy: (bounds.t + bounds.b) / 2,
+         r: data.size / 2,
+         onMouseMove: (e: React.MouseEvent) => {
+            tooltipMouseMove(e, instance, widget.tooltip);
+         },
+         onMouseLeave: (e: React.MouseEvent) => {
+            tooltipMouseLeave(e, instance, widget.tooltip);
+         },
+         onMouseDown: (e: React.MouseEvent) => {
+            widget.handleMouseDown(e, instance);
+         },
+         onTouchStart: (e: React.TouchEvent) => {
+            widget.handleMouseDown(e, instance);
+         },
+         onClick: (e: React.MouseEvent) => {
+            widget.handleClick(e, instance);
+         },
+      };
+
+      if (shape == "rect" || shape == "square" || shape == "bar" || shape == "column") {
+         shapeProps.rx = data.rx;
+         shapeProps.ry = data.ry;
+      }
+
+      if (widget.tooltip) {
+         shapeProps.ref = (c: SVGElement | null) => {
+            this.el = c;
+         };
+      }
+
+      return (
+         <g className={data.classNames}>
+            {!widget.hidden &&
+               shapeRenderer((bounds.l + bounds.r) / 2, (bounds.t + bounds.b) / 2, data.size, shapeProps)}
+            {children}
+         </g>
+      );
+   }
+
+   componentWillUnmount(): void {
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   UNSAFE_componentWillReceiveProps(props: MarkerComponentProps): void {
+      let widget = props.instance.widget as Marker;
+      tooltipParentWillReceiveProps(this.el!, props.instance, widget.tooltip);
+   }
+
+   componentDidMount(): void {
+      let widget = this.props.instance.widget as Marker;
+      tooltipParentDidMount(this.el!, this.props.instance, widget.tooltip);
+   }
+
+   componentDidUpdate(): void {
+      let widget = this.props.instance.widget as Marker;
+      tooltipParentDidUpdate(this.el!, this.props.instance, widget.tooltip);
+   }
+}
diff --git a/packages/cx/src/charts/MarkerLine.d.ts b/packages/cx/src/charts/MarkerLine.d.ts
deleted file mode 100644
index 3f4a3e41c..000000000
--- a/packages/cx/src/charts/MarkerLine.d.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-
-interface MarkerLineProps extends BoundedObjectProps {
-   /** The `x1` value binding or expression. */
-   x1?: Cx.Prop<number | string | Date>;
-
-   /** The `y1` value binding or expression. */
-   y1?: Cx.NumberProp;
-
-   /** The `x2` value binding or expression. */
-   x2?: Cx.Prop<number | string | Date>;
-
-   /** The `y2` value binding or expression. */
-   y2?: Cx.NumberProp;
-
-   /** Used to indicate if the data should affect axis span. */
-   affectsAxes?: Cx.BooleanProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: Cx.StringProp;
-
-   /** Shared `x1` and `x2` value binding or expression. */
-   x?: Cx.Prop<number | string | Date>;
-
-   /** Shared `y1` and `y2` value binding or expression. */
-   y?: Cx.NumberProp;
-
-   /**
-    * Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    *  in the axes configuration if the parent Chart component. Default value is y.
-    */
-   yAxis?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `markerline`. */
-   baseClass?: string;
-
-   legendAction?: string;
-}
-
-export class MarkerLine extends Cx.Widget<MarkerLineProps> {}
diff --git a/packages/cx/src/charts/MarkerLine.js b/packages/cx/src/charts/MarkerLine.js
deleted file mode 100644
index 1a3c28e20..000000000
--- a/packages/cx/src/charts/MarkerLine.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import {BoundedObject} from '../svg/BoundedObject';
-import {VDOM} from '../ui/Widget';
-import {isDefined} from '../util/isDefined';
-import {Rect} from '../svg/util/Rect';
-
-export class MarkerLine extends BoundedObject {
-
-   init() {
-      if (isDefined(this.x))
-         this.x1 = this.x2 = this.x;
-         
-      if (isDefined(this.y))
-         this.y1 = this.y2 = this.y;
-
-      super.init()
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         x1: undefined,
-         y1: undefined,
-         x2: undefined,
-         y2: undefined,
-         colorIndex: undefined,
-         active: true,
-         name: undefined,
-         legend: undefined
-      })
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      let xAxis = (instance.xAxis = context.axes[this.xAxis]);
-      let yAxis = (instance.yAxis = context.axes[this.yAxis]);
-
-      if (data.active) {
-         if (this.affectsAxes) {
-            if (data.x1 != null) xAxis.acknowledge(data.x1);
-
-            if (data.x2 != null) xAxis.acknowledge(data.x2);
-
-            if (data.y1 != null) yAxis.acknowledge(data.y1);
-
-            if (data.y2 != null) yAxis.acknowledge(data.y2);
-         }
-
-         super.explore(context, instance);
-      }
-   }
-
-   prepare(context, instance) {
-      let {data, xAxis, yAxis} = instance;
-
-      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate))
-         instance.markShouldUpdate(context);
-
-      super.prepare(context, instance);
-
-      if (data.name && data.legend && context.addLegendEntry)
-         context.addLegendEntry(data.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            style: data.style,
-            shape: 'line',
-            onClick: e=> { this.onLegendClick(e, instance) }
-         });
-   }
-
-   calculateBounds(context, instance) {
-      let {data, xAxis, yAxis} = instance;
-      let bounds = super.calculateBounds(context, instance);
-
-      let x1 = bounds.l, x2 = bounds.r, y1 = bounds.t, y2 = bounds.b;
-
-      if (data.x1 != null)
-         x1 = xAxis.map(data.x1);
-
-      if (data.x2 != null)
-         x2 = xAxis.map(data.x2);
-
-      if (data.y1 != null)
-         y1 = yAxis.map(data.y1);
-
-      if (data.y2 != null)
-         y2 = yAxis.map(data.y2);
-
-      bounds.l = Math.min(x1, x2);
-      bounds.t = Math.min(y1, y2);
-      bounds.r = Math.max(x1, x2);
-      bounds.b = Math.max(y1, y2);
-
-      instance.x1 = x1;
-      instance.x2 = x2;
-      instance.y1 = y1;
-      instance.y2 = y2;
-
-      return bounds;
-   }
-
-   render(context, instance, key) {
-      let {data, x1, x2, y1, y2} = instance;
-
-      if (!data.active || data.x1 === null || data.x2 === null || data.y1 === null || data.y2 === null)
-         return null;
-
-      let stateMods = {
-         ['color-' + data.colorIndex]: data.colorIndex != null
-      };
-
-      return <g key={key} className={data.classNames}>
-         <line className={this.CSS.element(this.baseClass, 'line', stateMods)} style={data.style} x1={x1} y1={y1} x2={x2} y2={y2} />
-         {this.renderChildren(context, instance)}
-      </g>
-   }
-}
-
-MarkerLine.prototype.xAxis = 'x';
-MarkerLine.prototype.yAxis = 'y';
-MarkerLine.prototype.anchors = '0 1 1 0';
-MarkerLine.prototype.baseClass = 'markerline';
-MarkerLine.prototype.legend = 'legend';
-MarkerLine.prototype.legendAction = 'auto';
-MarkerLine.prototype.affectsAxes = true;
-
-BoundedObject.alias('marker-line', MarkerLine);
-
diff --git a/packages/cx/src/charts/MarkerLine.scss b/packages/cx/src/charts/MarkerLine.scss
index c31584bf6..221caeddc 100644
--- a/packages/cx/src/charts/MarkerLine.scss
+++ b/packages/cx/src/charts/MarkerLine.scss
@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-markerline(
    $name: 'markerline',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-line {
       stroke: rgb(128, 128, 128);
diff --git a/packages/cx/src/charts/MarkerLine.tsx b/packages/cx/src/charts/MarkerLine.tsx
new file mode 100644
index 000000000..ad5a21bfa
--- /dev/null
+++ b/packages/cx/src/charts/MarkerLine.tsx
@@ -0,0 +1,214 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { VDOM } from "../ui/Widget";
+import { isDefined } from "../util/isDefined";
+import { Rect } from "../svg/util/Rect";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface MarkerLineConfig extends BoundedObjectConfig {
+   /** X coordinate for vertical line. */
+   x?: NumberProp;
+
+   /** Y coordinate for horizontal line. */
+   y?: NumberProp;
+
+   /** Starting X coordinate. */
+   x1?: NumberProp;
+
+   /** Starting Y coordinate. */
+   y1?: NumberProp;
+
+   /** Ending X coordinate. */
+   x2?: NumberProp;
+
+   /** Ending Y coordinate. */
+   y2?: NumberProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to indicate if the line is active or not. */
+   active?: BooleanProp;
+
+   /** Name of the line as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: StringProp;
+
+   /** Name of the horizontal axis. Default value is `x`. */
+   xAxis?: string;
+
+   /** Name of the vertical axis. Default value is `y`. */
+   yAxis?: string;
+
+   /** Set to `false` to prevent the line from affecting axis bounds. */
+   affectsAxes?: boolean;
+
+   /** Action to perform on legend item click. Default is `auto`. */
+   legendAction?: string;
+}
+
+export interface MarkerLineInstance extends BoundedObjectInstance {
+   xAxis: any;
+   yAxis: any;
+   x1: number;
+   y1: number;
+   x2: number;
+   y2: number;
+}
+
+export class MarkerLine extends BoundedObject {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare legend: string;
+   declare legendAction: string;
+   declare affectsAxes: boolean;
+   declare x: number;
+   declare y: number;
+   declare x1: number;
+   declare x2: number;
+   declare y1: number;
+   declare y2: number;
+
+   constructor(config: MarkerLineConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (isDefined(this.x)) this.x1 = this.x2 = this.x;
+
+      if (isDefined(this.y)) this.y1 = this.y2 = this.y;
+
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         x1: undefined,
+         y1: undefined,
+         x2: undefined,
+         y2: undefined,
+         colorIndex: undefined,
+         active: true,
+         name: undefined,
+         legend: undefined
+      });
+   }
+
+   explore(context: RenderingContext, instance: MarkerLineInstance): void {
+      let { data } = instance;
+
+      let xAxis = (instance.xAxis = context.axes[this.xAxis]);
+      let yAxis = (instance.yAxis = context.axes[this.yAxis]);
+
+      if (data.active) {
+         if (this.affectsAxes) {
+            if (data.x1 != null) xAxis.acknowledge(data.x1);
+
+            if (data.x2 != null) xAxis.acknowledge(data.x2);
+
+            if (data.y1 != null) yAxis.acknowledge(data.y1);
+
+            if (data.y2 != null) yAxis.acknowledge(data.y2);
+         }
+
+         super.explore(context, instance);
+      }
+   }
+
+   prepare(context: RenderingContext, instance: MarkerLineInstance): void {
+      let { data, xAxis, yAxis } = instance;
+
+      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate)) instance.markShouldUpdate(context);
+
+      super.prepare(context, instance);
+
+      if (data.name && data.legend && context.addLegendEntry)
+         context.addLegendEntry(data.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            style: data.style,
+            shape: "line",
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+   }
+
+   calculateBounds(context: RenderingContext, instance: MarkerLineInstance): Rect {
+      let { data, xAxis, yAxis } = instance;
+      let bounds = super.calculateBounds(context, instance);
+
+      let x1 = bounds.l,
+         x2 = bounds.r,
+         y1 = bounds.t,
+         y2 = bounds.b;
+
+      if (data.x1 != null) x1 = xAxis.map(data.x1);
+
+      if (data.x2 != null) x2 = xAxis.map(data.x2);
+
+      if (data.y1 != null) y1 = yAxis.map(data.y1);
+
+      if (data.y2 != null) y2 = yAxis.map(data.y2);
+
+      bounds.l = Math.min(x1, x2);
+      bounds.t = Math.min(y1, y2);
+      bounds.r = Math.max(x1, x2);
+      bounds.b = Math.max(y1, y2);
+
+      instance.x1 = x1;
+      instance.x2 = x2;
+      instance.y1 = y1;
+      instance.y2 = y2;
+
+      return bounds;
+   }
+
+   onLegendClick(e: MouseEvent, instance: MarkerLineInstance): void {
+      let allActions = this.legendAction == "auto";
+      let { data } = instance;
+      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
+   }
+
+   render(context: RenderingContext, instance: MarkerLineInstance, key: string): React.ReactNode {
+      let { data, x1, x2, y1, y2 } = instance;
+
+      if (!data.active || data.x1 === null || data.x2 === null || data.y1 === null || data.y2 === null) return null;
+
+      let stateMods: Record<string, boolean> = {
+         ["color-" + data.colorIndex]: data.colorIndex != null,
+      };
+
+      return (
+         <g key={key} className={data.classNames}>
+            <line
+               className={this.CSS.element(this.baseClass, "line", stateMods)}
+               style={data.style}
+               x1={x1}
+               y1={y1}
+               x2={x2}
+               y2={y2}
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+MarkerLine.prototype.xAxis = 'x';
+MarkerLine.prototype.yAxis = 'y';
+MarkerLine.prototype.anchors = '0 1 1 0';
+MarkerLine.prototype.baseClass = 'markerline';
+MarkerLine.prototype.legend = 'legend';
+MarkerLine.prototype.legendAction = 'auto';
+MarkerLine.prototype.affectsAxes = true;
+
+BoundedObject.alias('marker-line', MarkerLine);
+
diff --git a/packages/cx/src/charts/MouseTracker.d.ts b/packages/cx/src/charts/MouseTracker.d.ts
deleted file mode 100644
index fb9fbc063..000000000
--- a/packages/cx/src/charts/MouseTracker.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as Cx from '../core';
-import { BoundedObjectProps } from '../svg/BoundedObject';
-
-interface MouseTrackerProps extends BoundedObjectProps {
-   
-   /** The binding that is used to store the mouse x coordinate. */
-   x?: Cx.NumberProp,
-
-   /** The binding that is used to store the mouse y coordinate. */
-   y?: Cx.NumberProp,
-   
-   /** Base CSS class to be applied to the element. Defaults to `mousetracker`. */
-   baseClass?: string
-
-}
-
-export class MouseTracker extends Cx.Widget<MouseTrackerProps> {}
\ No newline at end of file
diff --git a/packages/cx/src/charts/MouseTracker.js b/packages/cx/src/charts/MouseTracker.js
deleted file mode 100644
index 577494bc1..000000000
--- a/packages/cx/src/charts/MouseTracker.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import {BoundedObject} from "../svg/BoundedObject";
-import {VDOM} from '../ui/VDOM';
-import {tooltipMouseMove, tooltipMouseLeave} from '../widgets/overlay/tooltip-ops';
-import {closest} from '../util/DOM';
-import {getTopLevelBoundingClientRect} from "../util/getTopLevelBoundingClientRect";
-
-export class MouseTracker extends BoundedObject {
-   declareData() {
-      return super.declareData(...arguments, {
-         x: undefined,
-         y: undefined
-      });
-   }
-
-   explore(context, instance) {
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-      super.explore(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data} = instance;
-      let {bounds} = data;
-      if (!bounds.valid())
-         return null;
-
-      return (
-         <g
-            key={key}
-            className={data.classNames}
-            onMouseMove={e => {
-               this.handleMouseMove(e, instance)
-            }}
-            onMouseLeave={e => {
-               this.handleMouseLeave(e, instance)
-            }}
-         >
-            <rect
-               x={bounds.l}
-               y={bounds.t}
-               width={bounds.width()}
-               height={bounds.height()}
-               fill="transparent"
-               strokeWidth="0"
-            />
-            {this.renderChildren(context, instance)}
-         </g>
-      )
-   }
-
-   handleMouseMove(e, instance) {
-      let {xAxis, yAxis} = instance;
-      let svgEl = closest(e.target, el => el.tagName == 'svg');
-      let bounds = getTopLevelBoundingClientRect(svgEl);
-
-      if (xAxis)
-         instance.set('x', xAxis.trackValue(e.clientX - bounds.left));
-
-      if (yAxis)
-         instance.set('y', yAxis.trackValue(e.clientY - bounds.top));
-
-      tooltipMouseMove(e, instance, instance.widget.tooltip);
-   }
-
-   handleMouseLeave(e, instance) {
-      let {xAxis, yAxis} = instance;
-
-      tooltipMouseLeave(e, instance, instance.widget.tooltip);
-
-      if (xAxis)
-         instance.set('x', null);
-
-      if (yAxis)
-         instance.set('y', null);
-   }
-}
-
-MouseTracker.prototype.xAxis = 'x';
-MouseTracker.prototype.yAxis = 'y';
-MouseTracker.prototype.anchors = '0 1 1 0';
-MouseTracker.prototype.baseClass = "mousetracker";
\ No newline at end of file
diff --git a/packages/cx/src/charts/MouseTracker.tsx b/packages/cx/src/charts/MouseTracker.tsx
new file mode 100644
index 000000000..d357f6357
--- /dev/null
+++ b/packages/cx/src/charts/MouseTracker.tsx
@@ -0,0 +1,112 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { VDOM } from "../ui/VDOM";
+import { tooltipMouseMove, tooltipMouseLeave, TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
+import { closest } from "../util/DOM";
+import { getTopLevelBoundingClientRect } from "../util/getTopLevelBoundingClientRect";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { NumberProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface MouseTrackerConfig extends BoundedObjectConfig {
+   /** The binding that is used to store the mouse x coordinate. */
+   x?: NumberProp;
+
+   /** The binding that is used to store the mouse y coordinate. */
+   y?: NumberProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `mousetracker`. */
+   baseClass?: string;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+}
+
+export interface MouseTrackerInstance extends BoundedObjectInstance, TooltipParentInstance {
+   xAxis?: any;
+   yAxis?: any;
+}
+
+export class MouseTracker extends BoundedObject<MouseTrackerConfig, MouseTrackerInstance> {
+   declare xAxis: string;
+   declare yAxis: string;
+   declare anchors: string;
+   declare baseClass: string;
+
+   constructor(config?: MouseTrackerConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         x: undefined,
+         y: undefined,
+      });
+   }
+
+   explore(context: ChartRenderingContext, instance: MouseTrackerInstance) {
+      instance.xAxis = context.axes?.[this.xAxis];
+      instance.yAxis = context.axes?.[this.yAxis];
+      super.explore(context, instance);
+   }
+
+   render(context: RenderingContext, instance: MouseTrackerInstance, key: string): CxChild {
+      let { data } = instance;
+      let { bounds } = data as any;
+      if (!bounds.valid()) return null;
+
+      return (
+         <g
+            key={key}
+            className={(data as any).classNames}
+            onMouseMove={(e) => {
+               this.handleMouseMove(e, instance);
+            }}
+            onMouseLeave={(e) => {
+               this.handleMouseLeave(e, instance);
+            }}
+         >
+            <rect
+               x={bounds.l}
+               y={bounds.t}
+               width={bounds.width()}
+               height={bounds.height()}
+               fill="transparent"
+               strokeWidth="0"
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+
+   handleMouseMove(e: React.MouseEvent, instance: MouseTrackerInstance) {
+      let { xAxis, yAxis } = instance;
+      let svgEl = closest(e.target as Element, (el) => el.tagName == "svg");
+      let bounds = getTopLevelBoundingClientRect(svgEl!);
+
+      if (xAxis) instance.set("x", xAxis.trackValue(e.clientX - bounds.left));
+
+      if (yAxis) instance.set("y", yAxis.trackValue(e.clientY - bounds.top));
+
+      tooltipMouseMove(e, instance, (instance.widget as any).tooltip);
+   }
+
+   handleMouseLeave(e: React.MouseEvent, instance: MouseTrackerInstance) {
+      let { xAxis, yAxis } = instance;
+
+      tooltipMouseLeave(e, instance, (instance.widget as any).tooltip);
+
+      if (xAxis) instance.set("x", null);
+
+      if (yAxis) instance.set("y", null);
+   }
+}
+
+MouseTracker.prototype.xAxis = "x";
+MouseTracker.prototype.yAxis = "y";
+MouseTracker.prototype.anchors = "0 1 1 0";
+MouseTracker.prototype.baseClass = "mousetracker";
diff --git a/packages/cx/src/charts/Pie.js b/packages/cx/src/charts/Pie.js
deleted file mode 100644
index 2b7051f1c..000000000
--- a/packages/cx/src/charts/Pie.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import {PieChart, PieSlice} from './PieChart';
-
-import {debug} from '../util/Debug';
-
-debug('The Pie class is deprecated. Please use PieChart instead.')
-
-export const Pie = PieChart;
-Pie.Slice = PieSlice;
diff --git a/packages/cx/src/charts/Pie.ts b/packages/cx/src/charts/Pie.ts
new file mode 100644
index 000000000..9cbda2817
--- /dev/null
+++ b/packages/cx/src/charts/Pie.ts
@@ -0,0 +1,8 @@
+import { PieChart, PieSlice } from "./PieChart";
+
+import { debug } from "../util/Debug";
+
+debug("The Pie class is deprecated. Please use PieChart instead.");
+
+export const Pie = PieChart as typeof PieChart & { Slice: typeof PieSlice };
+Pie.Slice = PieSlice;
diff --git a/packages/cx/src/charts/PieChart.d.ts b/packages/cx/src/charts/PieChart.d.ts
deleted file mode 100644
index 4dfcd2df2..000000000
--- a/packages/cx/src/charts/PieChart.d.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-import { PropertySelection, KeySelection } from "../ui/selection";
-
-interface PieChartProps extends BoundedObjectProps {
-   /** Angle in degrees. Default is `360` which represents the full circle. */
-   angle?: Cx.NumberProp;
-
-   /** Start angle in degrees. Indicates the starting point of the first stack. Default is `0`. */
-   startAngle?: Cx.NumberProp;
-
-   /** When set to `true`, stacks are rendered in clock wise direction. */
-   clockwise?: Cx.BooleanProp;
-
-   /** Gap between slices in pixels. Default is `0` which means there is no gap. */
-   gap?: Cx.NumberProp;
-}
-
-export class PieChart extends Cx.Widget<PieChartProps> {}
-
-interface PieSliceProps extends Cx.StyledContainerProps {
-   /** Used to indicate whether an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /**
-    * Inner pie radius in percents of the maximum available radius.
-    *  If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is 0.
-    */
-   r0?: Cx.NumberProp;
-
-   /**
-    * Outer pie radius in percents of the maximum available radius.
-    * If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is 50.
-    */
-   r?: Cx.NumberProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Value in pixels to be used to explode the pie. */
-   offset?: Cx.NumberProp;
-
-   value?: Cx.NumberProp;
-   disabled?: Cx.BooleanProp;
-   innerPointRadius?: Cx.NumberProp;
-   outerPointRadius?: Cx.NumberProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Multi-level pie charts consist of multiple stacks. Assign a unique name to each level. Default is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: Cx.StringProp;
-
-   percentageRaidus?: boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to `pieslice`. */
-   baseClass?: string;
-
-   legendAction?: string;
-
-   /** Text to be displayed in the legend. The default is copying the `name` value.  */
-   legendDisplayText?: Cx.StringProp;
-
-   /** Tooltip configuration. For more info see Tooltips. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp;
-
-   /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
-
-   /** A value used to identify the group of components participating in hover effect synchronization. */
-   hoverChannel?: string;
-
-   /** A value used to uniquely identify the record within the hover sync group. */
-   hoverId?: Cx.StringProp;
-
-   /** Border radius of the slice. Default is 0. */
-   borderRadius?: Cx.NumberProp;
-
-   /** Border radius of the slice. Default is 0. */
-   br?: Cx.NumberProp;
-}
-
-export class PieSlice extends Cx.Widget<PieSliceProps> {}
diff --git a/packages/cx/src/charts/PieChart.js b/packages/cx/src/charts/PieChart.js
deleted file mode 100644
index 3928a91c2..000000000
--- a/packages/cx/src/charts/PieChart.js
+++ /dev/null
@@ -1,530 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { Container } from "../ui/Container";
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-import { Selection } from "../ui/selection/Selection";
-import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
-import { isNumber } from "../util/isNumber";
-import { shallowEquals } from "../util/shallowEquals";
-import { withHoverSync } from "../ui/HoverSync";
-
-export class PieChart extends BoundedObject {
-   declareData() {
-      super.declareData(...arguments, {
-         angle: undefined,
-         startAngle: undefined,
-         clockwise: undefined,
-         gap: undefined,
-      });
-   }
-
-   explore(context, instance) {
-      if (!instance.pie) instance.pie = new PieCalculator();
-      let { data } = instance;
-      instance.pie.reset(data.angle, data.startAngle, data.clockwise, data.gap);
-
-      context.push("pie", instance.pie);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("pie");
-   }
-
-   prepare(context, instance) {
-      this.prepareBounds(context, instance);
-      let { data, pie } = instance;
-      pie.measure(data.bounds);
-      let hash = pie.hash();
-      instance.cache("hash", hash);
-      pie.shouldUpdate = !shallowEquals(hash, instance.cached.hash);
-      if (!pie.shouldUpdate) instance.markShouldUpdate(context);
-      super.prepare(context, instance);
-   }
-}
-
-PieChart.prototype.anchors = "0 1 1 0";
-
-class PieCalculator {
-   reset(angle, startAngle, clockwise, gap) {
-      if (angle == 360) angle = 359.99; // really hacky way to draw full circles
-      this.angleTotal = (angle / 180) * Math.PI;
-      this.startAngle = (startAngle / 180) * Math.PI;
-      this.clockwise = clockwise;
-      this.gap = gap;
-      this.stacks = {};
-   }
-
-   acknowledge(stack, value, r, r0, percentageRadius) {
-      let s = this.stacks[stack];
-      if (!s) s = this.stacks[stack] = { total: 0, r0s: this.gap > 0 ? [] : null, r0ps: this.gap > 0 ? [] : null };
-      if (value > 0) {
-         s.total += value;
-         if (this.gap > 0 && r0 > 0)
-            if (percentageRadius) s.r0ps.push(r0);
-            else s.r0s.push(r0);
-      }
-   }
-
-   hash() {
-      return {
-         angleTotal: this.angleTotal,
-         startAngle: this.startAngle,
-         clockwise: this.clockwise,
-         stacks: Object.keys(this.stacks)
-            .map((s) => `${this.stacks[s].angleFactor}`)
-            .join(":"),
-         cx: this.cx,
-         cy: this.cy,
-         R: this.R,
-         gap: this.gap,
-      };
-   }
-
-   measure(rect) {
-      this.R = Math.max(0, Math.min(rect.width(), rect.height())) / 2;
-      for (let s in this.stacks) {
-         let stack = this.stacks[s];
-         let gapAngleTotal = 0;
-         stack.gap = this.gap;
-         if (this.gap > 0) {
-            // gap cannot be larger of two times the smallest r0
-            for (let index = 0; index < stack.r0s.length; index++)
-               if (2 * stack.r0s[index] < stack.gap) stack.gap = 2 * stack.r0s[index];
-            for (let index = 0; index < stack.r0ps.length; index++) {
-               let r0 = (stack.r0ps[index] * this.R) / 100;
-               if (2 * r0 < stack.gap) stack.gap = 2 * r0;
-            }
-         }
-         while (stack.gap > 0) {
-            for (let index = 0; index < stack.r0s.length; index++)
-               gapAngleTotal += 2 * Math.asin(stack.gap / stack.r0s[index] / 2);
-
-            for (let index = 0; index < stack.r0ps.length; index++)
-               gapAngleTotal += 2 * Math.asin(stack.gap / ((stack.r0ps[index] * this.R) / 100) / 2);
-
-            if (gapAngleTotal < 0.25 * this.angleTotal) break;
-            stack.gap = stack.gap * 0.95;
-            gapAngleTotal = 0;
-         }
-         if (gapAngleTotal == 0) stack.gap = 0;
-         stack.angleFactor = stack.total > 0 ? (this.angleTotal - gapAngleTotal) / stack.total : 0;
-         stack.lastAngle = this.startAngle;
-      }
-      this.cx = (rect.l + rect.r) / 2;
-      this.cy = (rect.t + rect.b) / 2;
-   }
-
-   map(stack, value, r, r0, percentageRadius) {
-      if (percentageRadius) {
-         r = (r * this.R) / 100;
-         r0 = (r0 * this.R) / 100;
-      }
-      let s = this.stacks[stack];
-      let angle = value * s.angleFactor;
-      let startAngle = s.lastAngle;
-      let clockFactor = this.clockwise ? -1 : 1;
-      let gapAngle = r0 > 0 && s.gap > 0 ? 2 * Math.asin(s.gap / r0 / 2) : 0;
-      s.lastAngle += clockFactor * (angle + gapAngle);
-      let endAngle = startAngle + clockFactor * (angle + gapAngle);
-
-      return {
-         startAngle,
-         endAngle: startAngle + clockFactor * (angle + gapAngle),
-         angle,
-         midAngle: (startAngle + endAngle) / 2,
-         gap: s.gap,
-         cx: this.cx,
-         cy: this.cy,
-         R: this.R,
-      };
-   }
-}
-
-function createSvgArc(cx, cy, r0 = 0, r, startAngle, endAngle, br = 0, gap = 0) {
-   let gap2 = gap / 2;
-
-   if (startAngle > endAngle) {
-      let s = startAngle;
-      startAngle = endAngle;
-      endAngle = s;
-   }
-
-   let path = [];
-   // limit br size based on r and r0
-   if (br > (r - r0) / 2) br = (r - r0) / 2;
-
-   if (br > 0) {
-      if (r0 > 0) {
-         let innerBr = br;
-         let innerSmallArcAngle = Math.asin((br + gap2) / (r0 + br));
-
-         // adjust br according to the available area
-         if (innerSmallArcAngle > (endAngle - startAngle) / 2) {
-            innerSmallArcAngle = (endAngle - startAngle) / 2;
-            let sin = Math.sin(innerSmallArcAngle);
-            innerBr = Math.max((r0 * sin - gap2) / (1 - sin), 0);
-         }
-
-         let innerHipDiagonal = (r0 + innerBr) * Math.cos(innerSmallArcAngle);
-
-         let innerSmallArc1XFrom = cx + Math.cos(endAngle) * innerHipDiagonal + Math.cos(endAngle - Math.PI / 2) * gap2;
-         let innerSmallArc1YFrom = cy - Math.sin(endAngle) * innerHipDiagonal - Math.sin(endAngle - Math.PI / 2) * gap2;
-
-         // move from the first small inner arc
-         path.push(move(innerSmallArc1XFrom, innerSmallArc1YFrom));
-
-         let innerSmallArc1XTo = cx + Math.cos(endAngle - innerSmallArcAngle) * r0;
-         let innerSmallArc1YTo = cy - Math.sin(endAngle - innerSmallArcAngle) * r0;
-
-         // add first small inner arc
-         path.push(arc(innerBr, innerBr, 0, 0, 0, innerSmallArc1XTo, innerSmallArc1YTo));
-
-         // SECOND ARC
-
-         let innerArcXTo = cx + Math.cos(startAngle + innerSmallArcAngle) * r0;
-         let innerArcYTo = cy - Math.sin(startAngle + innerSmallArcAngle) * r0;
-         // add large inner arc
-         path.push(
-            arc(
-               r0,
-               r0,
-               0,
-               largeArcFlag(endAngle - innerSmallArcAngle - startAngle - innerSmallArcAngle),
-               1,
-               innerArcXTo,
-               innerArcYTo,
-            ),
-         );
-
-         let innerSmallArc2XTo =
-            cx + Math.cos(startAngle) * innerHipDiagonal + Math.cos(startAngle + Math.PI / 2) * gap2;
-         let innerSmallArc2YTo =
-            cy - Math.sin(startAngle) * innerHipDiagonal - Math.sin(startAngle + Math.PI / 2) * gap2;
-         // add second small inner arc
-         path.push(arc(innerBr, innerBr, 0, 0, 0, innerSmallArc2XTo, innerSmallArc2YTo));
-      } else {
-         path.push(move(cx, cy));
-      }
-
-      let outerBr = br;
-      let outerSmallArcAngle = Math.asin((br + gap2) / (r - br));
-
-      // tweak br according to the available area
-      if (outerSmallArcAngle > (endAngle - startAngle) / 2) {
-         outerSmallArcAngle = (endAngle - startAngle) / 2;
-         let sin = Math.sin(outerSmallArcAngle);
-         outerBr = Math.max((r * sin - gap2) / (1 + sin), 0);
-      }
-
-      let outerHipDiagonal = Math.cos(outerSmallArcAngle) * (r - outerBr);
-
-      let outerSmallArc1XFrom =
-         cx + Math.cos(startAngle) * outerHipDiagonal + Math.cos(startAngle + Math.PI / 2) * gap2;
-      let outerSmallArc1YFrom =
-         cy - Math.sin(startAngle) * outerHipDiagonal - Math.sin(startAngle + Math.PI / 2) * gap2;
-
-      let outerSmallArc1XTo = cx + Math.cos(startAngle + outerSmallArcAngle) * r;
-      let outerSmallArc1YTo = cy - Math.sin(startAngle + outerSmallArcAngle) * r;
-
-      let outerLargeArcXTo = cx + Math.cos(endAngle - outerSmallArcAngle) * r;
-      let outerLargeArcYTo = cy - Math.sin(endAngle - outerSmallArcAngle) * r;
-
-      let outerSmallArc2XTo = cx + Math.cos(endAngle) * outerHipDiagonal + Math.cos(endAngle - Math.PI / 2) * gap2;
-      let outerSmallArc2YTo = cy - Math.sin(endAngle) * outerHipDiagonal - Math.sin(endAngle - Math.PI / 2) * gap2;
-
-      path.push(
-         line(outerSmallArc1XFrom, outerSmallArc1YFrom),
-         arc(outerBr, outerBr, 0, 0, 0, outerSmallArc1XTo, outerSmallArc1YTo),
-         arc(
-            r,
-            r,
-            0,
-            largeArcFlag(endAngle - outerSmallArcAngle - startAngle - outerSmallArcAngle),
-            0,
-            outerLargeArcXTo,
-            outerLargeArcYTo,
-         ),
-         arc(outerBr, outerBr, 0, 0, 0, outerSmallArc2XTo, outerSmallArc2YTo),
-      );
-   } else {
-      if (r0 > 0) {
-         let innerGapAngle = r0 > 0 && gap2 > 0 ? Math.asin(gap2 / r0) : 0;
-         let innerStartAngle = startAngle + innerGapAngle;
-         let innerEndAngle = endAngle - innerGapAngle;
-         let startX = cx + Math.cos(innerEndAngle) * r0;
-         let startY = cy - Math.sin(innerEndAngle) * r0;
-         path.push(move(startX, startY));
-
-         let innerArcToX = cx + Math.cos(innerStartAngle) * r0;
-         let innerArcToY = cy - Math.sin(innerStartAngle) * r0;
-
-         path.push(arc(r0, r0, 0, largeArcFlag(innerStartAngle - innerEndAngle), 1, innerArcToX, innerArcToY));
-      } else {
-         path.push(move(cx, cy));
-      }
-
-      let outerGapAngle = r > 0 && gap2 > 0 ? Math.asin(gap2 / r) : 0;
-      let outerStartAngle = startAngle + outerGapAngle;
-      let outerEndAngle = endAngle - outerGapAngle;
-      let lineToX = cx + Math.cos(outerStartAngle) * r;
-      let lineToY = cy - Math.sin(outerStartAngle) * r;
-      path.push(line(lineToX, lineToY));
-
-      let arcToX = cx + Math.cos(outerEndAngle) * r;
-      let arcToY = cy - Math.sin(outerEndAngle) * r;
-      path.push(arc(r, r, 0, largeArcFlag(outerEndAngle - outerStartAngle), 0, arcToX, arcToY));
-   }
-
-   path.push(z());
-   return path.join(" ");
-}
-
-PieChart.prototype.anchors = "0 1 1 0";
-PieChart.prototype.angle = 360;
-PieChart.prototype.startAngle = 0;
-PieChart.prototype.gap = 0;
-
-Widget.alias("pie-slice");
-export class PieSlice extends Container {
-   init() {
-      this.selection = Selection.create(this.selection);
-      if (this.borderRadius) this.br = this.borderRadius;
-      super.init();
-   }
-
-   declareData() {
-      let selection = this.selection.configureWidget(this);
-      super.declareData(...arguments, selection, {
-         active: true,
-         r0: undefined,
-         r: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         colorName: undefined,
-         offset: undefined,
-         value: undefined,
-         disabled: undefined,
-         innerPointRadius: undefined,
-         outerPointRadius: undefined,
-         name: undefined,
-         stack: undefined,
-         legend: undefined,
-         hoverId: undefined,
-         br: undefined,
-         legendDisplayText: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      instance.pie = context.pie;
-      if (!instance.pie) throw new Error("Pie.Slice must be placed inside a Pie.");
-
-      let { data } = instance;
-
-      instance.valid = isNumber(data.value) && data.value > 0;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      instance.hoverSync = context.hoverSync;
-
-      if (instance.valid && data.active) {
-         instance.pie.acknowledge(data.stack, data.value, data.r, data.r0, this.percentageRadius);
-         super.explore(context, instance);
-      }
-   }
-
-   prepare(context, instance) {
-      let { data, segment, pie, colorMap } = instance;
-
-      if (colorMap && data.colorName) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-
-      if (instance.valid && data.active) {
-         let seg = pie.map(data.stack, data.value, data.r, data.r0, this.percentageRadius);
-
-         if (
-            !segment ||
-            instance.shouldUpdate ||
-            seg.startAngle != segment.startAngle ||
-            seg.endAngle != segment.endAngle ||
-            pie.shouldUpdate
-         ) {
-            if (data.offset > 0) {
-               seg.ox = seg.cx + Math.cos(seg.midAngle) * data.offset;
-               seg.oy = seg.cy - Math.sin(seg.midAngle) * data.offset;
-            } else {
-               seg.ox = seg.cx;
-               seg.oy = seg.cy;
-            }
-
-            seg.radiusMultiplier = 1;
-            if (this.percentageRadius) seg.radiusMultiplier = seg.R / 100;
-
-            let innerR = data.innerPointRadius != null ? data.innerPointRadius : data.r0;
-            let outerR = data.outerPointRadius != null ? data.outerPointRadius : data.r;
-
-            let ix = seg.ox + Math.cos(seg.midAngle) * innerR * seg.radiusMultiplier;
-            let iy = seg.oy - Math.sin(seg.midAngle) * innerR * seg.radiusMultiplier;
-            let ox = seg.ox + Math.cos(seg.midAngle) * outerR * seg.radiusMultiplier;
-            let oy = seg.oy - Math.sin(seg.midAngle) * outerR * seg.radiusMultiplier;
-
-            instance.segment = seg;
-            instance.bounds = new Rect({
-               l: ix,
-               r: ox,
-               t: iy,
-               b: oy,
-            });
-
-            instance.markShouldUpdate(context);
-         }
-
-         context.push("parentRect", instance.bounds);
-      }
-
-      if (data.name && data.legend && context.addLegendEntry)
-         context.addLegendEntry(data.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            disabled: data.disabled,
-            selected: this.selection.isInstanceSelected(instance),
-            style: data.style,
-            shape: this.legendShape,
-            hoverId: data.hoverId,
-            hoverChannel: this.hoverChannel,
-            hoverSync: instance.hoverSync,
-            displayText: data.legendDisplayText,
-            value: data.value,
-            onClick: (e) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-   }
-
-   prepareCleanup(context, instance) {
-      if (instance.valid && instance.data.active) {
-         context.pop("parentRect");
-      }
-   }
-
-   onLegendClick(e, instance) {
-      let allActions = this.legendAction == "auto";
-      let { data } = instance;
-      if (allActions || this.legendAction == "toggle") if (instance.set("active", !data.active)) return;
-
-      if (allActions || this.legendAction == "select") this.handleClick(e, instance);
-   }
-
-   render(context, instance, key) {
-      let { segment, data } = instance;
-      if (!instance.valid || !data.active) return null;
-
-      return withHoverSync(
-         key,
-         instance.hoverSync,
-         this.hoverChannel,
-         data.hoverId,
-         ({ hover, onMouseMove, onMouseLeave }) => {
-            let stateMods = {
-               selected: this.selection.isInstanceSelected(instance),
-               disabled: data.disabled,
-               selectable: !this.selection.isDummy,
-               [`color-${data.colorIndex}`]: data.colorIndex != null,
-               hover,
-            };
-
-            let d = createSvgArc(
-               segment.ox,
-               segment.oy,
-               data.r0 * segment.radiusMultiplier,
-               data.r * segment.radiusMultiplier,
-               segment.startAngle,
-               segment.endAngle,
-               data.br,
-               segment.gap,
-            );
-
-            return (
-               <g key={key} className={data.classNames}>
-                  <path
-                     className={this.CSS.element(this.baseClass, "slice", stateMods)}
-                     style={data.style}
-                     d={d}
-                     onMouseMove={(e) => {
-                        onMouseMove(e, instance);
-                        tooltipMouseMove(e, instance, this.tooltip);
-                     }}
-                     onMouseLeave={(e) => {
-                        onMouseLeave(e, instance);
-                        tooltipMouseLeave(e, instance, this.tooltip);
-                     }}
-                     onClick={(e) => {
-                        this.handleClick(e, instance);
-                     }}
-                  />
-                  {this.renderChildren(context, instance)}
-               </g>
-            );
-         },
-      );
-   }
-
-   handleClick(e, instance) {
-      if (!this.selection.isDummy) {
-         this.selection.selectInstance(instance, {
-            toggle: e.ctrlKey,
-         });
-         e.stopPropagation();
-         e.preventDefault();
-      }
-   }
-}
-
-function move(x, y) {
-   return `M ${x} ${y}`;
-}
-
-function line(x, y) {
-   return `L ${x} ${y}`;
-}
-
-function z() {
-   return "Z";
-}
-
-function arc(rx, ry, xRotation, largeArc, sweep, x, y) {
-   return `A ${rx} ${ry} ${xRotation} ${largeArc} ${sweep} ${x} ${y}`;
-}
-
-function largeArcFlag(angle) {
-   return angle > Math.PI || angle < -Math.PI ? 1 : 0;
-}
-
-PieSlice.prototype.offset = 0;
-PieSlice.prototype.r0 = 0;
-PieSlice.prototype.r = 50;
-PieSlice.prototype.percentageRadius = true;
-PieSlice.prototype.baseClass = "pieslice";
-PieSlice.prototype.legend = "legend";
-PieSlice.prototype.active = true;
-PieSlice.prototype.stack = "stack";
-PieSlice.prototype.legendAction = "auto";
-PieSlice.prototype.legendShape = "circle";
-PieSlice.prototype.hoverChannel = "default";
-PieSlice.prototype.styled = true;
-PieSlice.prototype.br = 0;
-
-Widget.alias("pie-chart", PieChart);
diff --git a/packages/cx/src/charts/PieChart.scss b/packages/cx/src/charts/PieChart.scss
index e25614917..2ab5097fe 100644
--- a/packages/cx/src/charts/PieChart.scss
+++ b/packages/cx/src/charts/PieChart.scss
@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-pieslice(
    $name: 'pieslice',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-slice {
       stroke-width: 0;
diff --git a/packages/cx/src/charts/PieChart.tsx b/packages/cx/src/charts/PieChart.tsx
new file mode 100644
index 000000000..0666812ec
--- /dev/null
+++ b/packages/cx/src/charts/PieChart.tsx
@@ -0,0 +1,717 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { Container, ContainerConfig, StyledContainerConfig } from "../ui/Container";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { Selection, SimpleSelection } from "../ui/selection/Selection";
+import type { KeySelection } from "../ui/selection/KeySelection";
+import type { PropertySelection } from "../ui/selection/PropertySelection";
+import { tooltipMouseMove, tooltipMouseLeave, TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
+import { isNumber } from "../util/isNumber";
+import { shallowEquals } from "../util/shallowEquals";
+import { withHoverSync } from "../ui/HoverSync";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+import { CreateConfig } from "../util/Component";
+
+export interface PieChartConfig extends BoundedObjectConfig {
+   /** Total angle of the pie chart in degrees. Default is `360`. */
+   angle?: NumberProp;
+
+   /** Starting angle in degrees. Default is `0`. */
+   startAngle?: NumberProp;
+
+   /** Set to `true` for clockwise direction. */
+   clockwise?: BooleanProp;
+
+   /** Gap between slices in pixels. Default is `0`. */
+   gap?: NumberProp;
+}
+
+export interface PieChartInstance extends BoundedObjectInstance {
+   pie: PieCalculator;
+}
+
+export class PieChart extends BoundedObject {
+   declare angle: number;
+   declare startAngle: number;
+   declare gap: number;
+
+   constructor(config: PieChartConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         angle: undefined,
+         startAngle: undefined,
+         clockwise: undefined,
+         gap: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: PieChartInstance): void {
+      if (!instance.pie) instance.pie = new PieCalculator();
+      let { data } = instance;
+      instance.pie.reset(data.angle, data.startAngle, data.clockwise, data.gap);
+
+      context.push("pie", instance.pie);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: PieChartInstance): void {
+      context.pop("pie");
+   }
+
+   prepare(context: RenderingContext, instance: PieChartInstance): void {
+      this.prepareBounds(context, instance);
+      let { data, pie } = instance;
+      pie.measure(data.bounds);
+      let hash = pie.hash();
+      instance.cache("hash", hash);
+      pie.shouldUpdate = !shallowEquals(hash, instance.cached.hash);
+      if (!pie.shouldUpdate) instance.markShouldUpdate(context);
+      super.prepare(context, instance);
+   }
+}
+
+PieChart.prototype.anchors = "0 1 1 0";
+
+interface PieStack {
+   total: number;
+   r0s: number[] | null;
+   r0ps: number[] | null;
+   gap: number;
+   angleFactor: number;
+   lastAngle: number;
+}
+
+export interface PieSegment {
+   startAngle: number;
+   endAngle: number;
+   angle: number;
+   midAngle: number;
+   gap: number;
+   cx: number;
+   cy: number;
+   R: number;
+   ox?: number;
+   oy?: number;
+   radiusMultiplier?: number;
+}
+
+class PieCalculator {
+   angleTotal: number = 0;
+   startAngle: number = 0;
+   clockwise: boolean = false;
+   gap: number = 0;
+   stacks: Record<string, PieStack> = {};
+   cx: number = 0;
+   cy: number = 0;
+   R: number = 0;
+   shouldUpdate: boolean = false;
+
+   reset(angle: number, startAngle: number, clockwise: boolean, gap: number): void {
+      if (angle == 360) angle = 359.99; // really hacky way to draw full circles
+      this.angleTotal = (angle / 180) * Math.PI;
+      this.startAngle = (startAngle / 180) * Math.PI;
+      this.clockwise = clockwise;
+      this.gap = gap;
+      this.stacks = {};
+   }
+
+   acknowledge(stack: string, value: number, r: number, r0: number, percentageRadius: boolean): void {
+      let s = this.stacks[stack];
+      if (!s)
+         s = this.stacks[stack] = {
+            total: 0,
+            r0s: this.gap > 0 ? [] : null,
+            r0ps: this.gap > 0 ? [] : null,
+            gap: 0,
+            angleFactor: 0,
+            lastAngle: 0,
+         };
+      if (value > 0) {
+         s.total += value;
+         if (this.gap > 0 && r0 > 0)
+            if (percentageRadius) s.r0ps!.push(r0);
+            else s.r0s!.push(r0);
+      }
+   }
+
+   hash(): Record<string, any> {
+      return {
+         angleTotal: this.angleTotal,
+         startAngle: this.startAngle,
+         clockwise: this.clockwise,
+         stacks: Object.keys(this.stacks)
+            .map((s) => `${this.stacks[s].angleFactor}`)
+            .join(":"),
+         cx: this.cx,
+         cy: this.cy,
+         R: this.R,
+         gap: this.gap,
+      };
+   }
+
+   measure(rect: Rect): void {
+      this.R = Math.max(0, Math.min(rect.width(), rect.height())) / 2;
+      for (let s in this.stacks) {
+         let stack = this.stacks[s];
+         let gapAngleTotal = 0;
+         stack.gap = this.gap;
+         if (this.gap > 0) {
+            // gap cannot be larger of two times the smallest r0
+            for (let index = 0; index < stack.r0s!.length; index++)
+               if (2 * stack.r0s![index] < stack.gap) stack.gap = 2 * stack.r0s![index];
+            for (let index = 0; index < stack.r0ps!.length; index++) {
+               let r0 = (stack.r0ps![index] * this.R) / 100;
+               if (2 * r0 < stack.gap) stack.gap = 2 * r0;
+            }
+         }
+         while (stack.gap > 0) {
+            for (let index = 0; index < stack.r0s!.length; index++)
+               gapAngleTotal += 2 * Math.asin(stack.gap / stack.r0s![index] / 2);
+
+            for (let index = 0; index < stack.r0ps!.length; index++)
+               gapAngleTotal += 2 * Math.asin(stack.gap / ((stack.r0ps![index] * this.R) / 100) / 2);
+
+            if (gapAngleTotal < 0.25 * this.angleTotal) break;
+            stack.gap = stack.gap * 0.95;
+            gapAngleTotal = 0;
+         }
+         if (gapAngleTotal == 0) stack.gap = 0;
+         stack.angleFactor = stack.total > 0 ? (this.angleTotal - gapAngleTotal) / stack.total : 0;
+         stack.lastAngle = this.startAngle;
+      }
+      this.cx = (rect.l + rect.r) / 2;
+      this.cy = (rect.t + rect.b) / 2;
+   }
+
+   map(stack: string, value: number, r: number, r0: number, percentageRadius: boolean): PieSegment {
+      if (percentageRadius) {
+         r = (r * this.R) / 100;
+         r0 = (r0 * this.R) / 100;
+      }
+      let s = this.stacks[stack];
+      let angle = value * s.angleFactor;
+      let startAngle = s.lastAngle;
+      let clockFactor = this.clockwise ? -1 : 1;
+      let gapAngle = r0 > 0 && s.gap > 0 ? 2 * Math.asin(s.gap / r0 / 2) : 0;
+      s.lastAngle += clockFactor * (angle + gapAngle);
+      let endAngle = startAngle + clockFactor * (angle + gapAngle);
+
+      return {
+         startAngle,
+         endAngle: startAngle + clockFactor * (angle + gapAngle),
+         angle,
+         midAngle: (startAngle + endAngle) / 2,
+         gap: s.gap,
+         cx: this.cx,
+         cy: this.cy,
+         R: this.R,
+      };
+   }
+}
+
+function createSvgArc(
+   cx: number,
+   cy: number,
+   r0: number = 0,
+   r: number,
+   startAngle: number,
+   endAngle: number,
+   br: number = 0,
+   gap: number = 0,
+): string {
+   let gap2 = gap / 2;
+
+   if (startAngle > endAngle) {
+      let s = startAngle;
+      startAngle = endAngle;
+      endAngle = s;
+   }
+
+   let path = [];
+   // limit br size based on r and r0
+   if (br > (r - r0) / 2) br = (r - r0) / 2;
+
+   if (br > 0) {
+      if (r0 > 0) {
+         let innerBr = br;
+         let innerSmallArcAngle = Math.asin((br + gap2) / (r0 + br));
+
+         // adjust br according to the available area
+         if (innerSmallArcAngle > (endAngle - startAngle) / 2) {
+            innerSmallArcAngle = (endAngle - startAngle) / 2;
+            let sin = Math.sin(innerSmallArcAngle);
+            innerBr = Math.max((r0 * sin - gap2) / (1 - sin), 0);
+         }
+
+         let innerHipDiagonal = (r0 + innerBr) * Math.cos(innerSmallArcAngle);
+
+         let innerSmallArc1XFrom = cx + Math.cos(endAngle) * innerHipDiagonal + Math.cos(endAngle - Math.PI / 2) * gap2;
+         let innerSmallArc1YFrom = cy - Math.sin(endAngle) * innerHipDiagonal - Math.sin(endAngle - Math.PI / 2) * gap2;
+
+         // move from the first small inner arc
+         path.push(move(innerSmallArc1XFrom, innerSmallArc1YFrom));
+
+         let innerSmallArc1XTo = cx + Math.cos(endAngle - innerSmallArcAngle) * r0;
+         let innerSmallArc1YTo = cy - Math.sin(endAngle - innerSmallArcAngle) * r0;
+
+         // add first small inner arc
+         path.push(arc(innerBr, innerBr, 0, 0, 0, innerSmallArc1XTo, innerSmallArc1YTo));
+
+         // SECOND ARC
+
+         let innerArcXTo = cx + Math.cos(startAngle + innerSmallArcAngle) * r0;
+         let innerArcYTo = cy - Math.sin(startAngle + innerSmallArcAngle) * r0;
+         // add large inner arc
+         path.push(
+            arc(
+               r0,
+               r0,
+               0,
+               largeArcFlag(endAngle - innerSmallArcAngle - startAngle - innerSmallArcAngle),
+               1,
+               innerArcXTo,
+               innerArcYTo,
+            ),
+         );
+
+         let innerSmallArc2XTo =
+            cx + Math.cos(startAngle) * innerHipDiagonal + Math.cos(startAngle + Math.PI / 2) * gap2;
+         let innerSmallArc2YTo =
+            cy - Math.sin(startAngle) * innerHipDiagonal - Math.sin(startAngle + Math.PI / 2) * gap2;
+         // add second small inner arc
+         path.push(arc(innerBr, innerBr, 0, 0, 0, innerSmallArc2XTo, innerSmallArc2YTo));
+      } else {
+         path.push(move(cx, cy));
+      }
+
+      let outerBr = br;
+      let outerSmallArcAngle = Math.asin((br + gap2) / (r - br));
+
+      // tweak br according to the available area
+      if (outerSmallArcAngle > (endAngle - startAngle) / 2) {
+         outerSmallArcAngle = (endAngle - startAngle) / 2;
+         let sin = Math.sin(outerSmallArcAngle);
+         outerBr = Math.max((r * sin - gap2) / (1 + sin), 0);
+      }
+
+      let outerHipDiagonal = Math.cos(outerSmallArcAngle) * (r - outerBr);
+
+      let outerSmallArc1XFrom =
+         cx + Math.cos(startAngle) * outerHipDiagonal + Math.cos(startAngle + Math.PI / 2) * gap2;
+      let outerSmallArc1YFrom =
+         cy - Math.sin(startAngle) * outerHipDiagonal - Math.sin(startAngle + Math.PI / 2) * gap2;
+
+      let outerSmallArc1XTo = cx + Math.cos(startAngle + outerSmallArcAngle) * r;
+      let outerSmallArc1YTo = cy - Math.sin(startAngle + outerSmallArcAngle) * r;
+
+      let outerLargeArcXTo = cx + Math.cos(endAngle - outerSmallArcAngle) * r;
+      let outerLargeArcYTo = cy - Math.sin(endAngle - outerSmallArcAngle) * r;
+
+      let outerSmallArc2XTo = cx + Math.cos(endAngle) * outerHipDiagonal + Math.cos(endAngle - Math.PI / 2) * gap2;
+      let outerSmallArc2YTo = cy - Math.sin(endAngle) * outerHipDiagonal - Math.sin(endAngle - Math.PI / 2) * gap2;
+
+      path.push(
+         line(outerSmallArc1XFrom, outerSmallArc1YFrom),
+         arc(outerBr, outerBr, 0, 0, 0, outerSmallArc1XTo, outerSmallArc1YTo),
+         arc(
+            r,
+            r,
+            0,
+            largeArcFlag(endAngle - outerSmallArcAngle - startAngle - outerSmallArcAngle),
+            0,
+            outerLargeArcXTo,
+            outerLargeArcYTo,
+         ),
+         arc(outerBr, outerBr, 0, 0, 0, outerSmallArc2XTo, outerSmallArc2YTo),
+      );
+   } else {
+      if (r0 > 0) {
+         let innerGapAngle = r0 > 0 && gap2 > 0 ? Math.asin(gap2 / r0) : 0;
+         let innerStartAngle = startAngle + innerGapAngle;
+         let innerEndAngle = endAngle - innerGapAngle;
+         let startX = cx + Math.cos(innerEndAngle) * r0;
+         let startY = cy - Math.sin(innerEndAngle) * r0;
+         path.push(move(startX, startY));
+
+         let innerArcToX = cx + Math.cos(innerStartAngle) * r0;
+         let innerArcToY = cy - Math.sin(innerStartAngle) * r0;
+
+         path.push(arc(r0, r0, 0, largeArcFlag(innerStartAngle - innerEndAngle), 1, innerArcToX, innerArcToY));
+      } else {
+         path.push(move(cx, cy));
+      }
+
+      let outerGapAngle = r > 0 && gap2 > 0 ? Math.asin(gap2 / r) : 0;
+      let outerStartAngle = startAngle + outerGapAngle;
+      let outerEndAngle = endAngle - outerGapAngle;
+      let lineToX = cx + Math.cos(outerStartAngle) * r;
+      let lineToY = cy - Math.sin(outerStartAngle) * r;
+      path.push(line(lineToX, lineToY));
+
+      let arcToX = cx + Math.cos(outerEndAngle) * r;
+      let arcToY = cy - Math.sin(outerEndAngle) * r;
+      path.push(arc(r, r, 0, largeArcFlag(outerEndAngle - outerStartAngle), 0, arcToX, arcToY));
+   }
+
+   path.push(z());
+   return path.join(" ");
+}
+
+PieChart.prototype.anchors = "0 1 1 0";
+PieChart.prototype.angle = 360;
+PieChart.prototype.startAngle = 0;
+PieChart.prototype.gap = 0;
+
+export interface PieSliceConfig extends StyledContainerConfig {
+   /** Used to indicate if a slice is active or not. Inactive slices are not rendered. */
+   active?: BooleanProp;
+
+   /** Inner radius of the slice. Default is `0`. */
+   r0?: NumberProp;
+
+   /** Outer radius of the slice. Default is `50`. */
+   r?: NumberProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: StringProp;
+
+   /** Offset of the slice from the center. */
+   offset?: NumberProp;
+
+   /** Value represented by the slice. */
+   value?: NumberProp;
+
+   /** Set to `true` to disable the slice. */
+   disabled?: BooleanProp;
+
+   /** Inner radius for point calculations. */
+   innerPointRadius?: NumberProp;
+
+   /** Outer radius for point calculations. */
+   outerPointRadius?: NumberProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Stack name. Default is `stack`. */
+   stack?: StringProp;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: StringProp;
+
+   /** ID used for hover synchronization. */
+   hoverId?: StringProp;
+
+   /** Border radius for rounded corners. */
+   br?: NumberProp;
+
+   /** Alias for br (border radius). */
+   borderRadius?: number;
+
+   /** Text to display in the legend. */
+   legendDisplayText?: StringProp;
+
+   /** Set to `true` to use percentage-based radius. Default is `true`. */
+   percentageRadius?: boolean;
+
+   /** Shape to use in legend. Default is `circle`. */
+   legendShape?: string;
+
+   /** Action to perform on legend item click. Default is `auto`. */
+   legendAction?: string;
+
+   /** Hover channel for hover synchronization. Default is `default`. */
+   hoverChannel?: string;
+
+   /** Selection configuration. */
+   selection?: CreateConfig<typeof Selection> | CreateConfig<typeof KeySelection> | CreateConfig<typeof PropertySelection> | CreateConfig<typeof SimpleSelection>;
+
+   /** Tooltip configuration. */
+   tooltip?: any;
+}
+
+export interface PieSliceInstance extends Instance, TooltipParentInstance {
+   pie: PieCalculator;
+   valid: boolean;
+   colorMap: any;
+   hoverSync: any;
+   segment: PieSegment;
+   bounds: Rect;
+}
+
+Widget.alias("pie-slice");
+export class PieSlice extends Container {
+   declare baseClass: string;
+   declare offset: number;
+   declare r0: number;
+   declare r: number;
+   declare percentageRadius: boolean;
+   declare legend: string;
+   declare active: boolean;
+   declare stack: string;
+   declare legendAction: string;
+   declare legendShape: string;
+   declare hoverChannel: string;
+   declare br: number;
+   declare borderRadius: number;
+   declare selection: Selection;
+   declare tooltip: any;
+
+   constructor(config: PieSliceConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.selection = Selection.create(this.selection);
+      if (this.borderRadius) this.br = this.borderRadius;
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      let selection = this.selection.configureWidget(this);
+      super.declareData(...args, selection, {
+         active: true,
+         r0: undefined,
+         r: undefined,
+         colorIndex: undefined,
+         colorMap: undefined,
+         colorName: undefined,
+         offset: undefined,
+         value: undefined,
+         disabled: undefined,
+         innerPointRadius: undefined,
+         outerPointRadius: undefined,
+         name: undefined,
+         stack: undefined,
+         legend: undefined,
+         hoverId: undefined,
+         br: undefined,
+         legendDisplayText: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: PieSliceInstance): void {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: PieSliceInstance): void {
+      instance.pie = context.pie;
+      if (!instance.pie) throw new Error("Pie.Slice must be placed inside a Pie.");
+
+      let { data } = instance;
+
+      instance.valid = isNumber(data.value) && data.value > 0;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      instance.hoverSync = context.hoverSync;
+
+      if (instance.valid && data.active) {
+         instance.pie.acknowledge(data.stack, data.value, data.r, data.r0, this.percentageRadius);
+         super.explore(context, instance);
+      }
+   }
+
+   prepare(context: RenderingContext, instance: PieSliceInstance): void {
+      let { data, segment, pie, colorMap } = instance;
+
+      if (colorMap && data.colorName) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (instance.valid && data.active) {
+         let seg = pie.map(data.stack, data.value, data.r, data.r0, this.percentageRadius);
+
+         if (
+            !segment ||
+            instance.shouldUpdate ||
+            seg.startAngle != segment.startAngle ||
+            seg.endAngle != segment.endAngle ||
+            pie.shouldUpdate
+         ) {
+            if (data.offset > 0) {
+               seg.ox = seg.cx + Math.cos(seg.midAngle) * data.offset;
+               seg.oy = seg.cy - Math.sin(seg.midAngle) * data.offset;
+            } else {
+               seg.ox = seg.cx;
+               seg.oy = seg.cy;
+            }
+
+            seg.radiusMultiplier = 1;
+            if (this.percentageRadius) seg.radiusMultiplier = seg.R / 100;
+
+            let innerR = data.innerPointRadius != null ? data.innerPointRadius : data.r0;
+            let outerR = data.outerPointRadius != null ? data.outerPointRadius : data.r;
+
+            let ix = seg.ox! + Math.cos(seg.midAngle) * innerR * seg.radiusMultiplier;
+            let iy = seg.oy! - Math.sin(seg.midAngle) * innerR * seg.radiusMultiplier;
+            let ox = seg.ox! + Math.cos(seg.midAngle) * outerR * seg.radiusMultiplier;
+            let oy = seg.oy! - Math.sin(seg.midAngle) * outerR * seg.radiusMultiplier;
+
+            instance.segment = seg;
+            instance.bounds = new Rect({
+               l: ix,
+               r: ox,
+               t: iy,
+               b: oy,
+            });
+
+            instance.markShouldUpdate(context);
+         }
+
+         context.push("parentRect", instance.bounds);
+      }
+
+      if (data.name && data.legend && context.addLegendEntry)
+         context.addLegendEntry(data.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            disabled: data.disabled,
+            selected: this.selection.isInstanceSelected(instance),
+            style: data.style,
+            shape: this.legendShape,
+            hoverId: data.hoverId,
+            hoverChannel: this.hoverChannel,
+            hoverSync: instance.hoverSync,
+            displayText: data.legendDisplayText,
+            value: data.value,
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+   }
+
+   prepareCleanup(context: RenderingContext, instance: PieSliceInstance): void {
+      if (instance.valid && instance.data.active) {
+         context.pop("parentRect");
+      }
+   }
+
+   onLegendClick(e: MouseEvent | React.MouseEvent, instance: PieSliceInstance): void {
+      let allActions = this.legendAction == "auto";
+      let { data } = instance;
+      if (allActions || this.legendAction == "toggle") if (instance.set("active", !data.active)) return;
+
+      if (allActions || this.legendAction == "select") this.handleClick(e as React.MouseEvent, instance);
+   }
+
+   render(context: RenderingContext, instance: PieSliceInstance, key: string): React.ReactNode {
+      let { segment, data } = instance;
+      if (!instance.valid || !data.active) return null;
+
+      return withHoverSync(
+         key,
+         instance.hoverSync,
+         this.hoverChannel,
+         data.hoverId,
+         ({ hover, onMouseMove, onMouseLeave }) => {
+            let stateMods: Record<string, any> = {
+               selected: this.selection.isInstanceSelected(instance),
+               disabled: data.disabled,
+               selectable: !this.selection.isDummy,
+               [`color-${data.colorIndex}`]: data.colorIndex != null,
+               hover,
+            };
+
+            let d = createSvgArc(
+               segment.ox!,
+               segment.oy!,
+               data.r0 * segment.radiusMultiplier!,
+               data.r * segment.radiusMultiplier!,
+               segment.startAngle,
+               segment.endAngle,
+               data.br,
+               segment.gap,
+            );
+
+            return (
+               <g key={key} className={data.classNames}>
+                  <path
+                     className={this.CSS.element(this.baseClass, "slice", stateMods)}
+                     style={data.style}
+                     d={d}
+                     onMouseMove={(e) => {
+                        onMouseMove(e, instance);
+                        tooltipMouseMove(e, instance, this.tooltip);
+                     }}
+                     onMouseLeave={(e) => {
+                        onMouseLeave(e, instance);
+                        tooltipMouseLeave(e, instance, this.tooltip);
+                     }}
+                     onClick={(e) => {
+                        this.handleClick(e, instance);
+                     }}
+                  />
+                  {this.renderChildren(context, instance)}
+               </g>
+            );
+         },
+      );
+   }
+
+   handleClick(e: React.MouseEvent, instance: PieSliceInstance): void {
+      if (!this.selection.isDummy) {
+         this.selection.selectInstance(instance, {
+            toggle: e.ctrlKey,
+         });
+         e.stopPropagation();
+         e.preventDefault();
+      }
+   }
+}
+
+function move(x: number, y: number): string {
+   return `M ${x} ${y}`;
+}
+
+function line(x: number, y: number): string {
+   return `L ${x} ${y}`;
+}
+
+function z(): string {
+   return "Z";
+}
+
+function arc(rx: number, ry: number, xRotation: number, largeArc: number, sweep: number, x: number, y: number): string {
+   return `A ${rx} ${ry} ${xRotation} ${largeArc} ${sweep} ${x} ${y}`;
+}
+
+function largeArcFlag(angle: number): number {
+   return angle > Math.PI || angle < -Math.PI ? 1 : 0;
+}
+
+PieSlice.prototype.offset = 0;
+PieSlice.prototype.r0 = 0;
+PieSlice.prototype.r = 50;
+PieSlice.prototype.percentageRadius = true;
+PieSlice.prototype.baseClass = "pieslice";
+PieSlice.prototype.legend = "legend";
+PieSlice.prototype.active = true;
+PieSlice.prototype.stack = "stack";
+PieSlice.prototype.legendAction = "auto";
+PieSlice.prototype.legendShape = "circle";
+PieSlice.prototype.hoverChannel = "default";
+PieSlice.prototype.styled = true;
+PieSlice.prototype.br = 0;
+
+Widget.alias("pie-chart", PieChart);
diff --git a/packages/cx/src/charts/PieLabel.d.ts b/packages/cx/src/charts/PieLabel.d.ts
deleted file mode 100644
index 419c8b9ea..000000000
--- a/packages/cx/src/charts/PieLabel.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObjectProps } from "../svg/BoundedObject";
-
-interface PieLabelProps extends BoundedObjectProps {
-   /** Distance in pixels, for which the labels will be separated from the pie chart. Default value is 100px. */
-   distance: Cx.NumberProp;
-
-   /**
-    * Index of the color in the default color palette.
-    */
-   lineColorIndex?: Cx.NumberProp;
-
-   /** A color used to paint the guideline. */
-   lineStroke?: Cx.StringProp;
-
-   /** CSS class applied to the line element. */
-   lineClass?: Cx.StringProp;
-
-   /** CSS style applied to the line element. */
-   lineStyle?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `pielabel`. */
-   baseClass?: string;
-}
-
-export class PieLabel extends Cx.Widget<PieLabelProps> {}
diff --git a/packages/cx/src/charts/PieLabel.js b/packages/cx/src/charts/PieLabel.js
deleted file mode 100644
index 4065503b2..000000000
--- a/packages/cx/src/charts/PieLabel.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { VDOM } from "../ui/Widget";
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-import { parseStyle } from "../util/parseStyle";
-
-export class PieLabel extends BoundedObject {
-   init() {
-      this.lineStyle = parseStyle(this.lineStyle);
-      super.init();
-   }
-
-   declareData(...args) {
-      super.declareData(...args, {
-         distance: undefined,
-         lineStyle: { structured: true },
-         lineStroke: undefined,
-         lineClass: { structured: true },
-         lineColorIndex: undefined,
-      });
-   }
-
-   calculateBounds(context, instance) {
-      var { data } = instance;
-      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-      instance.originalBounds = bounds;
-      instance.actualBounds = context.placePieLabel(bounds, data.distance);
-      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      if (!context.registerPieLabel)
-         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
-      let right = instance.parentRect.r > instance.parentRect.l;
-      context.push("textDirection", right ? "right" : "left");
-      context.registerPieLabel(instance);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("textDirection");
-   }
-
-   render(context, instance, key) {
-      let { originalBounds, actualBounds, data } = instance;
-
-      return (
-         <g key={key} className={data.classNames}>
-            <line
-               className={this.CSS.element(
-                  this.baseClass,
-                  "line",
-                  data.lineColorIndex != null && "color-" + data.lineColorIndex
-               )}
-               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
-               y1={(actualBounds.t + actualBounds.b) / 2}
-               x2={(originalBounds.l + originalBounds.r) / 2}
-               y2={(originalBounds.t + originalBounds.b) / 2}
-               stroke={data.lineStroke}
-               style={data.lineStyle}
-            />
-            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
-               {this.renderChildren(context, instance)}
-            </g>
-         </g>
-      );
-   }
-}
-
-PieLabel.prototype.distance = 100;
-PieLabel.prototype.baseClass = "pielabel";
-PieLabel.prototype.styled = true;
diff --git a/packages/cx/src/charts/PieLabel.tsx b/packages/cx/src/charts/PieLabel.tsx
new file mode 100644
index 000000000..cb2d1822b
--- /dev/null
+++ b/packages/cx/src/charts/PieLabel.tsx
@@ -0,0 +1,106 @@
+/** @jsxImportSource react */
+
+import { VDOM } from "../ui/Widget";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { parseStyle } from "../util/parseStyle";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, StringProp, StyleProp } from "../ui/Prop";
+
+export interface PieLabelConfig extends BoundedObjectConfig {
+   /** Distance from the pie center. Default is `100`. */
+   distance?: NumberProp;
+
+   /** Style for the connecting line. */
+   lineStyle?: StyleProp;
+
+   /** Stroke color for the connecting line. */
+   lineStroke?: StringProp;
+
+   /** CSS class for the connecting line. */
+   lineClass?: StringProp;
+
+   /** Color index for the connecting line. */
+   lineColorIndex?: NumberProp;
+}
+
+export interface PieLabelInstance extends BoundedObjectInstance {
+   originalBounds: Rect;
+   actualBounds: Rect;
+   parentRect: Rect;
+}
+
+export class PieLabel extends BoundedObject {
+   declare baseClass: string;
+   declare distance: number;
+   declare lineStyle: any;
+
+   constructor(config: PieLabelConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.lineStyle = parseStyle(this.lineStyle);
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         distance: undefined,
+         lineStyle: { structured: true },
+         lineStroke: undefined,
+         lineClass: { structured: true },
+         lineColorIndex: undefined,
+      });
+   }
+
+   calculateBounds(context: RenderingContext, instance: PieLabelInstance): Rect {
+      var { data } = instance;
+      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+      instance.originalBounds = bounds;
+      instance.actualBounds = context.placePieLabel(bounds, data.distance);
+      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
+   }
+
+   prepare(context: RenderingContext, instance: PieLabelInstance): void {
+      super.prepare(context, instance);
+      if (!context.registerPieLabel)
+         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
+      let right = instance.parentRect.r > instance.parentRect.l;
+      context.push("textDirection", right ? "right" : "left");
+      context.registerPieLabel(instance);
+   }
+
+   prepareCleanup(context: RenderingContext, instance: PieLabelInstance): void {
+      context.pop("textDirection");
+   }
+
+   render(context: RenderingContext, instance: PieLabelInstance, key: string): React.ReactNode {
+      let { originalBounds, actualBounds, data } = instance;
+
+      return (
+         <g key={key} className={data.classNames}>
+            <line
+               className={this.CSS.element(
+                  this.baseClass,
+                  "line",
+                  data.lineColorIndex != null && "color-" + data.lineColorIndex,
+               )}
+               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
+               y1={(actualBounds.t + actualBounds.b) / 2}
+               x2={(originalBounds.l + originalBounds.r) / 2}
+               y2={(originalBounds.t + originalBounds.b) / 2}
+               stroke={data.lineStroke}
+               style={data.lineStyle}
+            />
+            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
+               {this.renderChildren(context, instance)}
+            </g>
+         </g>
+      );
+   }
+}
+
+PieLabel.prototype.distance = 100;
+PieLabel.prototype.baseClass = "pielabel";
+PieLabel.prototype.styled = true;
diff --git a/packages/cx/src/charts/PieLabelsContainer.d.ts b/packages/cx/src/charts/PieLabelsContainer.d.ts
deleted file mode 100644
index 203340c3b..000000000
--- a/packages/cx/src/charts/PieLabelsContainer.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Widget } from "cx/src/core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-
-interface PieLabelsContainerProps extends BoundedObjectProps {}
-
-export class PieLabelsContainer extends Widget<PieLabelsContainerProps> {}
diff --git a/packages/cx/src/charts/PieLabelsContainer.js b/packages/cx/src/charts/PieLabelsContainer.js
deleted file mode 100644
index d31efa478..000000000
--- a/packages/cx/src/charts/PieLabelsContainer.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-
-export class PieLabelsContainer extends BoundedObject {
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      let { bounds } = instance.data;
-      let cx2 = bounds.l + bounds.r;
-
-      context.push("placePieLabel", (labelBounds, distance) => {
-         let clone = new Rect(labelBounds);
-         let w = clone.r - clone.l;
-         if (clone.l + clone.r > cx2) {
-            clone.r = Math.min(clone.r + distance, bounds.r);
-            clone.l = clone.r - w;
-         } else {
-            clone.l = Math.max(bounds.l, clone.l - distance);
-            clone.r = clone.l + w;
-         }
-         return clone;
-      });
-
-      instance.leftLabels = [];
-      instance.rightLabels = [];
-
-      context.push("registerPieLabel", (label) => {
-         if (label.actualBounds.l + label.actualBounds.r < cx2) instance.leftLabels.push(label);
-         else instance.rightLabels.push(label);
-      });
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("placePieLabel");
-      context.pop("registerPieLabel");
-      super.prepareCleanup(context, instance);
-      this.distributeLabels(instance.leftLabels, instance);
-      this.distributeLabels(instance.rightLabels, instance);
-   }
-
-   distributeLabels(labels, instance) {
-      labels.sort((a, b) => a.actualBounds.t + a.actualBounds.b - (b.actualBounds.t + b.actualBounds.b));
-      let totalHeight = labels.reduce((h, l) => h + l.actualBounds.height(), 0);
-      let { bounds } = instance.data;
-      let avgHeight = Math.min(totalHeight, bounds.height()) / labels.length;
-      let at = bounds.t;
-      for (let i = 0; i < labels.length; i++) {
-         let ab = labels[i].actualBounds;
-         ab.t = Math.max(at, Math.min(ab.t, bounds.b - (labels.length - i) * avgHeight));
-         ab.b = ab.t + avgHeight;
-         at = ab.b;
-      }
-   }
-}
-
-PieLabelsContainer.prototype.anchors = "0 1 1 0";
diff --git a/packages/cx/src/charts/PieLabelsContainer.ts b/packages/cx/src/charts/PieLabelsContainer.ts
new file mode 100644
index 000000000..6971702ec
--- /dev/null
+++ b/packages/cx/src/charts/PieLabelsContainer.ts
@@ -0,0 +1,68 @@
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { RenderingContext } from "../ui/RenderingContext";
+import { PieLabelInstance } from "./PieLabel";
+
+export interface PieLabelsContainerConfig extends BoundedObjectConfig {}
+
+export interface PieLabelsContainerInstance extends BoundedObjectInstance {
+   leftLabels: PieLabelInstance[];
+   rightLabels: PieLabelInstance[];
+}
+
+export class PieLabelsContainer extends BoundedObject {
+   constructor(config: PieLabelsContainerConfig) {
+      super(config);
+   }
+
+   prepare(context: RenderingContext, instance: PieLabelsContainerInstance): void {
+      super.prepare(context, instance);
+      let { bounds } = instance.data;
+      let cx2 = bounds.l + bounds.r;
+
+      context.push("placePieLabel", (labelBounds: Rect, distance: number): Rect => {
+         let clone = new Rect(labelBounds);
+         let w = clone.r - clone.l;
+         if (clone.l + clone.r > cx2) {
+            clone.r = Math.min(clone.r + distance, bounds.r);
+            clone.l = clone.r - w;
+         } else {
+            clone.l = Math.max(bounds.l, clone.l - distance);
+            clone.r = clone.l + w;
+         }
+         return clone;
+      });
+
+      instance.leftLabels = [];
+      instance.rightLabels = [];
+
+      context.push("registerPieLabel", (label: PieLabelInstance): void => {
+         if (label.actualBounds.l + label.actualBounds.r < cx2) instance.leftLabels.push(label);
+         else instance.rightLabels.push(label);
+      });
+   }
+
+   prepareCleanup(context: RenderingContext, instance: PieLabelsContainerInstance): void {
+      context.pop("placePieLabel");
+      context.pop("registerPieLabel");
+      super.prepareCleanup(context, instance);
+      this.distributeLabels(instance.leftLabels, instance);
+      this.distributeLabels(instance.rightLabels, instance);
+   }
+
+   distributeLabels(labels: PieLabelInstance[], instance: PieLabelsContainerInstance): void {
+      labels.sort((a, b) => a.actualBounds.t + a.actualBounds.b - (b.actualBounds.t + b.actualBounds.b));
+      let totalHeight = labels.reduce((h, l) => h + l.actualBounds.height(), 0);
+      let { bounds } = instance.data;
+      let avgHeight = Math.min(totalHeight, bounds.height()) / labels.length;
+      let at = bounds.t;
+      for (let i = 0; i < labels.length; i++) {
+         let ab = labels[i].actualBounds;
+         ab.t = Math.max(at, Math.min(ab.t, bounds.b - (labels.length - i) * avgHeight));
+         ab.b = ab.t + avgHeight;
+         at = ab.b;
+      }
+   }
+}
+
+PieLabelsContainer.prototype.anchors = "0 1 1 0";
diff --git a/packages/cx/src/charts/Range.d.ts b/packages/cx/src/charts/Range.d.ts
deleted file mode 100644
index f00914568..000000000
--- a/packages/cx/src/charts/Range.d.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as Cx from '../core';
-import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
-
-interface RangeProps extends BoundedObjectProps {
-   
-   /** The `x1` value binding or expression. */
-   x1?: Cx.NumberProp,
-
-   /** The `y1` value binding or expression. */
-   y1?: Cx.NumberProp,
-   
-   /** The `x2` value binding or expression. */
-   x2?: Cx.NumberProp,
-
-   /** The `y2` value binding or expression. */
-   y2?: Cx.NumberProp,
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp,
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp,
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp,
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: Cx.StringProp,
-
-   invisible?: boolean,
-
-   /**
-    *  Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string,
-
-   /** 
-    * Name of the vertical axis. The value should match one of the vertical axes set 
-    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string,
-   
-   xSize?: number,
-   ySize?: number,
-   xOffset?: number,
-   yOffset?: number,
-
-   /** Base CSS class to be applied to the element. Defaults to `range`. */
-   baseClass?: string,
-
-   /** Set to `true` to make the range draggable along the X axis. */
-   draggableX?: boolean,
-
-   /** Set to `true` to make the range draggable along the Y axis. */
-   draggableY?: boolean,
-
-   /** Set to `true` to make the range draggable along the X and Y axis. */
-   draggable?: boolean,
-
-   /** Constrain the range position to min/max values of the X axis during drag operations. */
-   constrainX?: boolean,
-
-   /** Constrain the range position to min/max values of the Y axis during drag operations. */
-   constrainY?: boolean,
-
-   /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
-   constrain?: boolean,
-   
-   legendAction?: string,
-   hidden?: boolean
-   
-}
-
-export class Range extends Cx.Widget<RangeProps> {}
\ No newline at end of file
diff --git a/packages/cx/src/charts/Range.js b/packages/cx/src/charts/Range.js
deleted file mode 100644
index 4ff353e0d..000000000
--- a/packages/cx/src/charts/Range.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import {BoundedObject} from '../svg/BoundedObject';
-import {VDOM} from '../ui/Widget';
-import {captureMouseOrTouch, getCursorPos} from '../widgets/overlay/captureMouse';
-import {closest} from '../util/DOM';
-import {getTopLevelBoundingClientRect} from "../util/getTopLevelBoundingClientRect";
-
-export class Range extends BoundedObject {
-   declareData() {
-      super.declareData(...arguments, {
-         x1: undefined,
-         y1: undefined,
-         x2: undefined,
-         y2: undefined,
-         colorIndex: undefined,
-         active: true,
-         name: undefined,
-         legend: undefined
-      })
-   }
-
-   explore(context, instance) {
-      var {data} = instance;
-      var xAxis = instance.xAxis = context.axes[this.xAxis];
-      var yAxis = instance.yAxis = context.axes[this.yAxis];
-
-      if (data.active) {
-         if (xAxis) {
-            if (data.x1 != null)
-               instance.xAxis.acknowledge(data.x1, this.xSize, this.xOffset);
-
-            if (data.x2 != null)
-               instance.xAxis.acknowledge(data.x2, this.xSize, this.xOffset);
-         }
-
-         if (yAxis) {
-            if (data.y1 != null)
-               instance.yAxis.acknowledge(data.y1, this.ySize, this.yOffset);
-
-            if (data.y2 != null)
-               instance.yAxis.acknowledge(data.y2, this.ySize, this.yOffset);
-         }
-
-         super.explore(context, instance);
-      }
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-
-      var {data, xAxis, yAxis} = instance;
-
-      if (xAxis && xAxis.shouldUpdate)
-         instance.markShouldUpdate(context);
-
-      if (yAxis && yAxis.shouldUpdate)
-         instance.markShouldUpdate(context);
-
-      if (data.name && data.legend && context.addLegendEntry)
-         context.addLegendEntry(data.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            style: data.style,
-            shape: 'rect',
-            onClick: e => {
-               this.onLegendClick(e, instance)
-            }
-         });
-   }
-
-   onLegendClick(e, instance) {
-      var allActions = this.legendAction == 'auto';
-      var {data} = instance;
-      if (allActions || this.legendAction == 'toggle')
-         instance.set('active', !data.active);
-   }
-
-   calculateBounds(context, instance) {
-      var bounds = super.calculateBounds(context, instance);
-      var {data, xAxis, yAxis} = instance;
-
-      if (data.x1 != null)
-         bounds.l = xAxis.map(data.x1, this.xOffset - this.xSize / 2);
-
-      if (data.x2 != null)
-         bounds.r = xAxis.map(data.x2,this.xOffset + this.xSize / 2);
-
-      if (data.y1 != null)
-         bounds.t = yAxis.map(data.y1, this.yOffset - this.ySize / 2);
-
-      if (data.y2 != null)
-         bounds.b = yAxis.map(data.y2, this.yOffset + this.ySize / 2);
-
-      return bounds;
-   }
-
-   render(context, instance, key) {
-      var {data} = instance;
-
-      if (!data.active)
-         return null;
-
-      var {bounds} = data;
-      var x1 = Math.min(bounds.l, bounds.r),
-         y1 = Math.min(bounds.t, bounds.b),
-         x2 = Math.max(bounds.l, bounds.r),
-         y2 = Math.max(bounds.t, bounds.b);
-
-      var stateMods = {
-         ['color-' + data.colorIndex]: data.colorIndex != null
-      };
-
-      return <g key={key} className={data.classNames}>
-         {
-            !this.hidden && <rect className={this.CSS.element(this.baseClass, 'rect', stateMods)}
-                                  style={data.style}
-                                  x={x1}
-                                  y={y1}
-                                  width={x2 - x1}
-                                  height={y2 - y1}
-                                  onMouseDown={e=>this.handleMouseDown(e, instance)}
-                                  onTouchStart={e=>this.handleMouseDown(e, instance)}
-            />
-         }
-         {this.renderChildren(context, instance)}
-      </g>
-   }
-
-   handleClick(e, instance) {
-      if (this.onClick)
-         instance.invoke("onClick", e, instance);
-   }
-
-   handleMouseDown(e, instance) {
-      if (this.draggableX || this.draggableY) {
-         var svgEl = closest(e.target, el => el.tagName == 'svg');
-         var svgBounds = getTopLevelBoundingClientRect(svgEl);
-         var cursor = getCursorPos(e);
-         var {data, xAxis, yAxis} = instance;
-
-         var captureData = {
-            svgBounds,
-            start: {
-               x1: data.x1,
-               x2: data.x2,
-               y1: data.y1,
-               y2: data.y2
-            }
-         };
-
-         if (this.draggableX && xAxis)
-            captureData.start.x = xAxis.trackValue(cursor.clientX - svgBounds.left, this.xOffset, this.constrainX);
-
-         if (this.draggableY && yAxis)
-            captureData.start.y = yAxis.trackValue(cursor.clientY - svgBounds.top, this.yOffset, this.constrainY);
-
-         if (svgEl)
-            captureMouseOrTouch(e, (e, captureData) => {
-               this.handleDragMove(e, instance, captureData);
-            }, null, captureData, e.target.style.cursor);
-      }
-   }
-
-   handleDragMove(e, instance, captureData) {
-      var cursor = getCursorPos(e);
-      var {xAxis, yAxis} = instance;
-      var {svgBounds, start} = captureData;
-      if (this.draggableX && xAxis) {
-         var dist = xAxis.trackValue(cursor.clientX - svgBounds.left, this.xOffset, this.constrainX) - captureData.start.x;
-         var x1v = xAxis.decodeValue(captureData.start.x1);
-         var x2v = xAxis.decodeValue(captureData.start.x2);
-         if (this.constrainX) {
-            if (dist > 0)
-               dist = Math.min(xAxis.constrainValue(x2v + dist) - x2v, dist);
-            else
-               dist = Math.max(xAxis.constrainValue(x1v + dist) - x1v, dist);
-         }
-         instance.set('x1', xAxis.encodeValue(x1v + dist));
-         instance.set('x2', xAxis.encodeValue(x2v + dist));
-      }
-
-      if (this.draggableY && yAxis) {
-         var dist = yAxis.trackValue(cursor.clientY - svgBounds.left, this.yOffset, this.constrainY) - captureData.start.y;
-         var y1v = yAxis.decodeValue(captureData.start.y1);
-         var y2v = yAxis.decodeValue(captureData.start.y2);
-         if (this.constrainY)
-            dist = Math.max(yAxis.constrainValue(y1v + dist) - y1v, Math.min(yAxis.constrainValue(y2v + dist) - y2v, dist));
-         instance.set('y1', yAxis.encodeValue(y1v + dist));
-         instance.set('y2', yAxis.encodeValue(y2v + dist));
-      }
-   }
-}
-
-Range.prototype.invisible = false;
-Range.prototype.xAxis = 'x';
-Range.prototype.yAxis = 'y';
-Range.prototype.xSize = 0;
-Range.prototype.ySize = 0;
-Range.prototype.xOffset = 0;
-Range.prototype.yOffset = 0;
-Range.prototype.anchors = '0 1 1 0';
-Range.prototype.baseClass = 'range';
-Range.prototype.legend = 'legend';
-Range.prototype.legendAction = 'auto';
-
-BoundedObject.alias('range', Range);
\ No newline at end of file
diff --git a/packages/cx/src/charts/Range.scss b/packages/cx/src/charts/Range.scss
index 91acf0eb4..13db4188a 100644
--- a/packages/cx/src/charts/Range.scss
+++ b/packages/cx/src/charts/Range.scss
@@ -1,11 +1,12 @@
+@use "sass:map";
 
 @mixin cx-range(
    $name: 'range',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-rect {
       stroke-width: 0;
diff --git a/packages/cx/src/charts/Range.tsx b/packages/cx/src/charts/Range.tsx
new file mode 100644
index 000000000..069fbd107
--- /dev/null
+++ b/packages/cx/src/charts/Range.tsx
@@ -0,0 +1,318 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { VDOM } from "../ui/Widget";
+import { captureMouseOrTouch, getCursorPos } from "../widgets/overlay/captureMouse";
+import { closest } from "../util/DOM";
+import { getTopLevelBoundingClientRect } from "../util/getTopLevelBoundingClientRect";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Rect } from "../svg/util/Rect";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+import { Instance } from "../ui/Instance";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface RangeConfig extends BoundedObjectConfig {
+   /** The `x1` value binding or expression. */
+   x1?: NumberProp;
+
+   /** The `y1` value binding or expression. */
+   y1?: NumberProp;
+
+   /** The `x2` value binding or expression. */
+   x2?: NumberProp;
+
+   /** The `y2` value binding or expression. */
+   y2?: NumberProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: BooleanProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: StringProp;
+
+   /** Set to `true` to hide the range rectangle. */
+   invisible?: boolean;
+
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    */
+   xAxis?: string;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    */
+   yAxis?: string;
+
+   /** X size. */
+   xSize?: number;
+
+   /** Y size. */
+   ySize?: number;
+
+   /** X offset. */
+   xOffset?: number;
+
+   /** Y offset. */
+   yOffset?: number;
+
+   /** Set to `true` to make the range draggable along the X axis. */
+   draggableX?: boolean;
+
+   /** Set to `true` to make the range draggable along the Y axis. */
+   draggableY?: boolean;
+
+   /** Set to `true` to make the range draggable along the X and Y axis. */
+   draggable?: boolean;
+
+   /** Constrain the range position to min/max values of the X axis during drag operations. */
+   constrainX?: boolean;
+
+   /** Constrain the range position to min/max values of the Y axis during drag operations. */
+   constrainY?: boolean;
+
+   /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
+   constrain?: boolean;
+
+   /** Action to perform on legend item click. Default is `auto`. */
+   legendAction?: string;
+
+   /** Set to `true` to hide the range. */
+   hidden?: boolean;
+
+   /** Click event handler. */
+   onClick?: (e: React.MouseEvent, instance: Instance) => void;
+}
+
+export interface RangeInstance extends BoundedObjectInstance {
+   xAxis: any;
+   yAxis: any;
+}
+
+export class Range extends BoundedObject {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare xSize: number;
+   declare ySize: number;
+   declare xOffset: number;
+   declare yOffset: number;
+   declare legend: string;
+   declare legendAction: string;
+   declare invisible: boolean;
+   declare hidden: boolean;
+   declare draggableX: boolean;
+   declare draggableY: boolean;
+   declare constrainX: boolean;
+   declare constrainY: boolean;
+   declare onClick: RangeConfig["onClick"];
+
+   constructor(config: RangeConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         x1: undefined,
+         y1: undefined,
+         x2: undefined,
+         y2: undefined,
+         colorIndex: undefined,
+         active: true,
+         name: undefined,
+         legend: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: RangeInstance): void {
+      var { data } = instance;
+      var xAxis = (instance.xAxis = context.axes[this.xAxis]);
+      var yAxis = (instance.yAxis = context.axes[this.yAxis]);
+
+      if (data.active) {
+         if (xAxis) {
+            if (data.x1 != null) instance.xAxis.acknowledge(data.x1, this.xSize, this.xOffset);
+
+            if (data.x2 != null) instance.xAxis.acknowledge(data.x2, this.xSize, this.xOffset);
+         }
+
+         if (yAxis) {
+            if (data.y1 != null) instance.yAxis.acknowledge(data.y1, this.ySize, this.yOffset);
+
+            if (data.y2 != null) instance.yAxis.acknowledge(data.y2, this.ySize, this.yOffset);
+         }
+
+         super.explore(context, instance);
+      }
+   }
+
+   prepare(context: RenderingContext, instance: RangeInstance): void {
+      super.prepare(context, instance);
+
+      var { data, xAxis, yAxis } = instance;
+
+      if (xAxis && xAxis.shouldUpdate) instance.markShouldUpdate(context);
+
+      if (yAxis && yAxis.shouldUpdate) instance.markShouldUpdate(context);
+
+      if (data.name && data.legend && context.addLegendEntry)
+         context.addLegendEntry(data.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            style: data.style,
+            shape: "rect",
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+   }
+
+   onLegendClick(e: MouseEvent, instance: RangeInstance): void {
+      var allActions = this.legendAction == "auto";
+      var { data } = instance;
+      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
+   }
+
+   calculateBounds(context: RenderingContext, instance: RangeInstance): Rect {
+      var bounds = super.calculateBounds(context, instance);
+      var { data, xAxis, yAxis } = instance;
+
+      if (data.x1 != null) bounds.l = xAxis.map(data.x1, this.xOffset - this.xSize / 2);
+
+      if (data.x2 != null) bounds.r = xAxis.map(data.x2, this.xOffset + this.xSize / 2);
+
+      if (data.y1 != null) bounds.t = yAxis.map(data.y1, this.yOffset - this.ySize / 2);
+
+      if (data.y2 != null) bounds.b = yAxis.map(data.y2, this.yOffset + this.ySize / 2);
+
+      return bounds;
+   }
+
+   render(context: RenderingContext, instance: RangeInstance, key: string): React.ReactNode {
+      var { data } = instance;
+
+      if (!data.active) return null;
+
+      var { bounds } = data;
+      var x1 = Math.min(bounds.l, bounds.r),
+         y1 = Math.min(bounds.t, bounds.b),
+         x2 = Math.max(bounds.l, bounds.r),
+         y2 = Math.max(bounds.t, bounds.b);
+
+      var stateMods: Record<string, boolean> = {
+         ["color-" + data.colorIndex]: data.colorIndex != null,
+      };
+
+      return (
+         <g key={key} className={data.classNames}>
+            {!this.hidden && (
+               <rect
+                  className={this.CSS.element(this.baseClass, "rect", stateMods)}
+                  style={data.style}
+                  x={x1}
+                  y={y1}
+                  width={x2 - x1}
+                  height={y2 - y1}
+                  onMouseDown={(e) => this.handleMouseDown(e, instance)}
+                  onTouchStart={(e) => this.handleMouseDown(e, instance)}
+               />
+            )}
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+
+   handleClick(e: React.MouseEvent, instance: RangeInstance): void {
+      if (this.onClick) instance.invoke("onClick", e, instance);
+   }
+
+   handleMouseDown(e: React.MouseEvent | React.TouchEvent, instance: RangeInstance): void {
+      if (this.draggableX || this.draggableY) {
+         var svgEl = closest(e.target as Element, (el) => el.tagName == "svg");
+         var svgBounds = getTopLevelBoundingClientRect(svgEl!);
+         var cursor = getCursorPos(e);
+         var { data, xAxis, yAxis } = instance;
+
+         var captureData: any = {
+            svgBounds,
+            start: {
+               x1: data.x1,
+               x2: data.x2,
+               y1: data.y1,
+               y2: data.y2,
+            },
+         };
+
+         if (this.draggableX && xAxis)
+            captureData.start.x = xAxis.trackValue(cursor.clientX - svgBounds.left, this.xOffset, this.constrainX);
+
+         if (this.draggableY && yAxis)
+            captureData.start.y = yAxis.trackValue(cursor.clientY - svgBounds.top, this.yOffset, this.constrainY);
+
+         if (svgEl)
+            captureMouseOrTouch(
+               e,
+               (e, captureData) => {
+                  this.handleDragMove(e, instance, captureData);
+               },
+               undefined,
+               captureData,
+               (e.target as HTMLElement).style.cursor
+            );
+      }
+   }
+
+   handleDragMove(e: MouseEvent | TouchEvent, instance: RangeInstance, captureData: any): void {
+      var cursor = getCursorPos(e);
+      var { xAxis, yAxis } = instance;
+      var { svgBounds, start } = captureData;
+      if (this.draggableX && xAxis) {
+         var dist =
+            xAxis.trackValue(cursor.clientX - svgBounds.left, this.xOffset, this.constrainX) - captureData.start.x;
+         var x1v = xAxis.decodeValue(captureData.start.x1);
+         var x2v = xAxis.decodeValue(captureData.start.x2);
+         if (this.constrainX) {
+            if (dist > 0) dist = Math.min(xAxis.constrainValue(x2v + dist) - x2v, dist);
+            else dist = Math.max(xAxis.constrainValue(x1v + dist) - x1v, dist);
+         }
+         instance.set("x1", xAxis.encodeValue(x1v + dist));
+         instance.set("x2", xAxis.encodeValue(x2v + dist));
+      }
+
+      if (this.draggableY && yAxis) {
+         var dist =
+            yAxis.trackValue(cursor.clientY - svgBounds.left, this.yOffset, this.constrainY) - captureData.start.y;
+         var y1v = yAxis.decodeValue(captureData.start.y1);
+         var y2v = yAxis.decodeValue(captureData.start.y2);
+         if (this.constrainY)
+            dist = Math.max(
+               yAxis.constrainValue(y1v + dist) - y1v,
+               Math.min(yAxis.constrainValue(y2v + dist) - y2v, dist)
+            );
+         instance.set("y1", yAxis.encodeValue(y1v + dist));
+         instance.set("y2", yAxis.encodeValue(y2v + dist));
+      }
+   }
+}
+
+Range.prototype.invisible = false;
+Range.prototype.xAxis = "x";
+Range.prototype.yAxis = "y";
+Range.prototype.xSize = 0;
+Range.prototype.ySize = 0;
+Range.prototype.xOffset = 0;
+Range.prototype.yOffset = 0;
+Range.prototype.anchors = "0 1 1 0";
+Range.prototype.baseClass = "range";
+Range.prototype.legend = "legend";
+Range.prototype.legendAction = "auto";
+
+BoundedObject.alias("range", Range);
diff --git a/packages/cx/src/charts/RangeMarker.d.ts b/packages/cx/src/charts/RangeMarker.d.ts
deleted file mode 100644
index 5a2c2541b..000000000
--- a/packages/cx/src/charts/RangeMarker.d.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as Cx from "../core";
-
-interface RangeMarkerProps extends Cx.StyledContainerProps {
-   /** The `x` value binding or expression. */
-   x?: Cx.NumberProp;
-
-   /** The `y` value binding or expression. */
-   y?: Cx.NumberProp;
-
-   /** The shape of marker, Could be `min`, `max`, `line`. Default to `line`. */
-   shape?: Cx.StringProp;
-
-   /** Switch to vertical mode. */
-   vertical?: Cx.BooleanProp;
-
-   /** Size of the range marker. */
-   size?: Cx.NumberProp;
-
-   /** Style object applied to the range marker. */
-   lineStyle?: Cx.StyleProp;
-
-   /** Class object applied to the range marker. */
-   lineClass?: Cx.StyleProp;
-
-   /** Size of vertical or horizontal caps. */
-   capSize?: Cx.NumberProp;
-
-   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
-   laneOffset?: Cx.NumberProp;
-
-   /** Inflate the range marker.*/
-   inflate?: Cx.NumberProp;
-}
-
-export class RangeMarker extends Cx.Widget<RangeMarkerProps> {}
diff --git a/packages/cx/src/charts/RangeMarker.js b/packages/cx/src/charts/RangeMarker.js
deleted file mode 100644
index c33a2b36c..000000000
--- a/packages/cx/src/charts/RangeMarker.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-import { Widget, VDOM } from "../ui/Widget";
-import { parseStyle } from "../util/parseStyle";
-
-export class RangeMarker extends BoundedObject {
-   declareData() {
-      super.declareData(...arguments, {
-         x: undefined,
-         y: undefined,
-         shape: undefined,
-         vertical: undefined,
-         size: undefined,
-         laneOffset: undefined,
-         lineStyle: { structured: true },
-         lineClass: { structured: true },
-         capSize: undefined,
-         inflate: undefined,
-      });
-   }
-
-   init() {
-      this.lineStyle = parseStyle(this.lineStyle);
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      instance.axes = context.axes;
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { data, xAxis, yAxis } = instance;
-
-      if (this.affectsAxes) {
-         if (xAxis && data.x != null) xAxis.acknowledge(data.x, 0, 0);
-         if (yAxis && data.y != null) yAxis.acknowledge(data.y, 0, 0);
-      }
-
-      super.explore(context, instance);
-   }
-
-   calculateBounds(context, instance) {
-      let { data, xAxis, yAxis } = instance;
-
-      let l, r, t, b;
-
-      if (data.x == null || data.y == null) {
-         return super.calculateBounds(context, instance);
-      }
-
-      if (!this.vertical) {
-         l = xAxis.map(data.x, data.laneOffset - data.size / 2) - data.inflate;
-         r = xAxis.map(data.x, data.laneOffset + data.size / 2) + data.inflate;
-         t = b = yAxis.map(data.y);
-         if (data.shape == "max") {
-            b += data.capSize;
-         } else if (data.shape == "min") {
-            t -= data.capSize;
-         }
-      } else {
-         l = r = xAxis.map(data.x);
-         t = yAxis.map(data.y, data.laneOffset - data.size / 2) + data.inflate;
-         b = yAxis.map(data.y, data.laneOffset + data.size / 2) - data.inflate;
-         if (data.shape == "max") {
-            l -= data.capSize;
-         } else if (data.shape == "min") {
-            r += data.capSize;
-         }
-      }
-
-      return new Rect({
-         l,
-         r,
-         t,
-         b,
-      });
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-   }
-
-   render(context, instance, key) {
-      var { data } = instance;
-      let { CSS, baseClass } = this;
-      let { bounds, shape } = data;
-
-      let path = "";
-      if (this.vertical) {
-         switch (shape) {
-            default:
-            case "line":
-               path += `M ${bounds.r} ${bounds.t} `;
-               path += `L ${bounds.r} ${bounds.b}`;
-               break;
-            case "max":
-               path += `M ${bounds.l} ${bounds.t} `;
-               path += `L ${bounds.r} ${bounds.t}`;
-               path += `L ${bounds.r} ${bounds.b}`;
-               path += `L ${bounds.l} ${bounds.b}`;
-               break;
-            case "min":
-               path += `M ${bounds.r} ${bounds.t} `;
-               path += `L ${bounds.l} ${bounds.t}`;
-               path += `L ${bounds.l} ${bounds.b}`;
-               path += `L ${bounds.r} ${bounds.b}`;
-               break;
-         }
-      } else {
-         switch (shape) {
-            default:
-            case "line":
-               path += `M ${bounds.r} ${bounds.t} `;
-               path += `L ${bounds.l} ${bounds.t}`;
-               break;
-            case "max":
-               path += `M ${bounds.l} ${bounds.b} `;
-               path += `L ${bounds.l} ${bounds.t}`;
-               path += `L ${bounds.r} ${bounds.t}`;
-               path += `L ${bounds.r} ${bounds.b}`;
-               break;
-            case "min":
-               path += `M ${bounds.l} ${bounds.t} `;
-               path += `L ${bounds.l} ${bounds.b}`;
-               path += `L ${bounds.r} ${bounds.b}`;
-               path += `L ${bounds.r} ${bounds.t}`;
-               break;
-         }
-      }
-
-      return (
-         <g key={key} className={data.classNames} style={data.style}>
-            <path
-               d={path}
-               className={CSS.expand(CSS.element(baseClass, "path"), data.lineClass)}
-               style={data.lineStyle}
-            />
-            {this.renderChildren(context, instance)}
-         </g>
-      );
-   }
-}
-
-RangeMarker.prototype.baseClass = "rangemarker";
-RangeMarker.prototype.xAxis = "x";
-RangeMarker.prototype.yAxis = "y";
-
-RangeMarker.prototype.shape = "line";
-RangeMarker.prototype.vertical = false;
-RangeMarker.prototype.size = 1;
-RangeMarker.prototype.laneOffset = 0;
-RangeMarker.prototype.capSize = 5;
-RangeMarker.prototype.inflate = 0;
-RangeMarker.prototype.affectsAxes = true;
-
-Widget.alias("range-marker", RangeMarker);
diff --git a/packages/cx/src/charts/RangeMarker.scss b/packages/cx/src/charts/RangeMarker.scss
index 2328ff3a2..55d4fed48 100644
--- a/packages/cx/src/charts/RangeMarker.scss
+++ b/packages/cx/src/charts/RangeMarker.scss
@@ -1,7 +1,9 @@
+@use "sass:map";
+
 @mixin cx-rangemarker($name: "rangemarker", $besm: $cx-besm, $range-marker-color: $cx-default-range-marker-color) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-path {
       stroke: $range-marker-color;
diff --git a/packages/cx/src/charts/RangeMarker.tsx b/packages/cx/src/charts/RangeMarker.tsx
new file mode 100644
index 000000000..65d1f9586
--- /dev/null
+++ b/packages/cx/src/charts/RangeMarker.tsx
@@ -0,0 +1,233 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { Widget, VDOM } from "../ui/Widget";
+import { parseStyle } from "../util/parseStyle";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface RangeMarkerConfig extends BoundedObjectConfig {
+   /** The `x` value binding or expression. */
+   x?: NumberProp;
+
+   /** The `y` value binding or expression. */
+   y?: NumberProp;
+
+   /** The shape of marker, Could be `min`, `max`, `line`. Default to `line`. */
+   shape?: StringProp;
+
+   /** Switch to vertical mode. */
+   vertical?: BooleanProp;
+
+   /** Size of the range marker. */
+   size?: NumberProp;
+
+   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+   laneOffset?: NumberProp;
+
+   /** Style object applied to the range marker. */
+   lineStyle?: StyleProp;
+
+   /** Class object applied to the range marker. */
+   lineClass?: StringProp;
+
+   /** Size of vertical or horizontal caps. */
+   capSize?: NumberProp;
+
+   /** Inflate the range marker. */
+   inflate?: NumberProp;
+
+   /** Set to `true` to allow the range marker to affect axis bounds. */
+   affectsAxes?: boolean;
+
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    */
+   xAxis?: string;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    */
+   yAxis?: string;
+}
+
+export interface RangeMarkerInstance extends BoundedObjectInstance {
+   axes: Record<string, any>;
+   xAxis: any;
+   yAxis: any;
+}
+
+export class RangeMarker extends BoundedObject {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare shape: string;
+   declare vertical: boolean;
+   declare size: number;
+   declare laneOffset: number;
+   declare capSize: number;
+   declare inflate: number;
+   declare affectsAxes: boolean;
+   declare lineStyle: any;
+
+   constructor(config: RangeMarkerConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         x: undefined,
+         y: undefined,
+         shape: undefined,
+         vertical: undefined,
+         size: undefined,
+         laneOffset: undefined,
+         lineStyle: { structured: true },
+         lineClass: { structured: true },
+         capSize: undefined,
+         inflate: undefined,
+      });
+   }
+
+   init(): void {
+      this.lineStyle = parseStyle(this.lineStyle);
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: RangeMarkerInstance): void {
+      instance.axes = context.axes;
+      instance.xAxis = context.axes[this.xAxis];
+      instance.yAxis = context.axes[this.yAxis];
+      super.prepareData(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: RangeMarkerInstance): void {
+      let { data, xAxis, yAxis } = instance;
+
+      if (this.affectsAxes) {
+         if (xAxis && data.x != null) xAxis.acknowledge(data.x, 0, 0);
+         if (yAxis && data.y != null) yAxis.acknowledge(data.y, 0, 0);
+      }
+
+      super.explore(context, instance);
+   }
+
+   calculateBounds(context: RenderingContext, instance: RangeMarkerInstance): Rect {
+      let { data, xAxis, yAxis } = instance;
+
+      let l: number, r: number, t: number, b: number;
+
+      if (data.x == null || data.y == null) {
+         return super.calculateBounds(context, instance);
+      }
+
+      if (!this.vertical) {
+         l = xAxis.map(data.x, data.laneOffset - data.size / 2) - data.inflate;
+         r = xAxis.map(data.x, data.laneOffset + data.size / 2) + data.inflate;
+         t = b = yAxis.map(data.y);
+         if (data.shape == "max") {
+            b += data.capSize;
+         } else if (data.shape == "min") {
+            t -= data.capSize;
+         }
+      } else {
+         l = r = xAxis.map(data.x);
+         t = yAxis.map(data.y, data.laneOffset - data.size / 2) + data.inflate;
+         b = yAxis.map(data.y, data.laneOffset + data.size / 2) - data.inflate;
+         if (data.shape == "max") {
+            l -= data.capSize;
+         } else if (data.shape == "min") {
+            r += data.capSize;
+         }
+      }
+
+      return new Rect({
+         l,
+         r,
+         t,
+         b,
+      });
+   }
+
+   prepare(context: RenderingContext, instance: RangeMarkerInstance): void {
+      super.prepare(context, instance);
+   }
+
+   render(context: RenderingContext, instance: RangeMarkerInstance, key: string): React.ReactNode {
+      var { data } = instance;
+      let { CSS, baseClass } = this;
+      let { bounds, shape } = data;
+
+      let path = "";
+      if (this.vertical) {
+         switch (shape) {
+            default:
+            case "line":
+               path += `M ${bounds.r} ${bounds.t} `;
+               path += `L ${bounds.r} ${bounds.b}`;
+               break;
+            case "max":
+               path += `M ${bounds.l} ${bounds.t} `;
+               path += `L ${bounds.r} ${bounds.t}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               path += `L ${bounds.l} ${bounds.b}`;
+               break;
+            case "min":
+               path += `M ${bounds.r} ${bounds.t} `;
+               path += `L ${bounds.l} ${bounds.t}`;
+               path += `L ${bounds.l} ${bounds.b}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               break;
+         }
+      } else {
+         switch (shape) {
+            default:
+            case "line":
+               path += `M ${bounds.r} ${bounds.t} `;
+               path += `L ${bounds.l} ${bounds.t}`;
+               break;
+            case "max":
+               path += `M ${bounds.l} ${bounds.b} `;
+               path += `L ${bounds.l} ${bounds.t}`;
+               path += `L ${bounds.r} ${bounds.t}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               break;
+            case "min":
+               path += `M ${bounds.l} ${bounds.t} `;
+               path += `L ${bounds.l} ${bounds.b}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               path += `L ${bounds.r} ${bounds.t}`;
+               break;
+         }
+      }
+
+      return (
+         <g key={key} className={data.classNames} style={data.style}>
+            <path
+               d={path}
+               className={CSS.expand(CSS.element(baseClass, "path"), data.lineClass)}
+               style={data.lineStyle}
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+RangeMarker.prototype.baseClass = "rangemarker";
+RangeMarker.prototype.xAxis = "x";
+RangeMarker.prototype.yAxis = "y";
+
+RangeMarker.prototype.shape = "line";
+RangeMarker.prototype.vertical = false;
+RangeMarker.prototype.size = 1;
+RangeMarker.prototype.laneOffset = 0;
+RangeMarker.prototype.capSize = 5;
+RangeMarker.prototype.inflate = 0;
+RangeMarker.prototype.affectsAxes = true;
+
+Widget.alias("range-marker", RangeMarker);
diff --git a/packages/cx/src/charts/ScatterGraph.d.ts b/packages/cx/src/charts/ScatterGraph.d.ts
deleted file mode 100644
index 64bc3b93f..000000000
--- a/packages/cx/src/charts/ScatterGraph.d.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as Cx from "../core";
-import { PropertySelection, KeySelection } from "../ui/selection";
-
-interface ScatterGraphProps extends Cx.StyledContainerProps {
-   /**
-    * Data for the graph. Each entry should be an object with at least two properties
-    * whose names should match the `xField` and `yField` values.
-    */
-   data?: Cx.RecordsProp;
-
-   /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp;
-
-   shape?: Cx.StringProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `scattergraph`. */
-   baseClass?: string;
-
-   /**
-    * Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string;
-
-   /** Name of the property which holds the x value. Default value is `x`. */
-   xField?: string;
-
-   /** Name of the property which holds the y value. Default value is `y`. */
-   yField?: string;
-
-   /** Name of the property which holds the size value. Do not set if `size` is used. */
-   sizeField?: string | false;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-
-   /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
-}
-
-export class ScatterGraph extends Cx.Widget<ScatterGraphProps> {}
diff --git a/packages/cx/src/charts/ScatterGraph.js b/packages/cx/src/charts/ScatterGraph.js
deleted file mode 100644
index 2eb9b22ba..000000000
--- a/packages/cx/src/charts/ScatterGraph.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { Selection } from "../ui/selection/Selection";
-import { CSS } from "../ui/CSS";
-import { getShape } from "./shapes";
-import { isArray } from "../util/isArray";
-
-export class ScatterGraph extends Widget {
-   init() {
-      this.selection = Selection.create(this.selection, {
-         records: this.data,
-      });
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(
-         ...arguments,
-         {
-            data: undefined,
-            size: undefined,
-            shape: undefined,
-            colorIndex: undefined,
-            colorMap: undefined,
-            colorName: undefined,
-            name: undefined,
-            active: true,
-         },
-         selection,
-      );
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      super.explore(context, instance);
-
-      var xAxis = (instance.xAxis = context.axes[this.xAxis]);
-      var yAxis = (instance.yAxis = context.axes[this.yAxis]);
-
-      var { data } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      if (data.active && isArray(data.data)) {
-         data.data.forEach((p) => {
-            xAxis.acknowledge(p[this.xField]);
-            yAxis.acknowledge(p[this.yField]);
-         });
-      }
-   }
-
-   prepare(context, instance) {
-      var { data, xAxis, yAxis, colorMap } = instance;
-
-      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
-
-      if (colorMap && data.name) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-
-      if (data.name && context.addLegendEntry)
-         context.addLegendEntry(this.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            disabled: data.disabled,
-            style: data.style,
-            shape: data.shape,
-            onClick: (e) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-
-      if (data.active) {
-         if (context.pointReducer && isArray(data.data)) {
-            data.data.forEach((p, index) => {
-               context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
-            });
-         }
-      }
-   }
-
-   onLegendClick(e, instance) {
-      var allActions = this.legendAction == "auto";
-      var { data } = instance;
-      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
-   }
-
-   render(context, instance, key) {
-      var { data } = instance;
-      return (
-         <g key={key} className={data.classNames}>
-            {this.renderData(context, instance)}
-         </g>
-      );
-   }
-
-   renderData(context, instance) {
-      var { data, xAxis, yAxis, store } = instance;
-
-      if (!data.active) return null;
-
-      var shape = getShape(data.shape);
-
-      var isSelected = this.selection.getIsSelectedDelegate(store);
-
-      return (
-         isArray(data.data) &&
-         data.data.map((p, i) => {
-            var classes = CSS.element(this.baseClass, "shape", {
-               selected: isSelected(p, i),
-               selectable: !this.selection.isDummy,
-               [`color-${data.colorIndex}`]: data.colorIndex != null,
-            });
-
-            var cx = xAxis.map(p[this.xField]),
-               cy = yAxis.map(p[this.yField]),
-               size = this.sizeField ? p[this.sizeField] : data.size;
-
-            return shape(cx, cy, size, {
-               key: i,
-               className: classes,
-               style: p.style || data.style,
-               onClick: (e) => {
-                  this.handleItemClick(e, instance, i);
-               },
-            });
-         })
-      );
-   }
-
-   handleItemClick(e, { data, store }, index) {
-      var bubble = data.data[index];
-      this.selection.select(store, bubble, index, {
-         toggle: e.ctrlKey,
-      });
-   }
-}
-
-ScatterGraph.prototype.baseClass = "scattergraph";
-ScatterGraph.prototype.xAxis = "x";
-ScatterGraph.prototype.yAxis = "y";
-
-ScatterGraph.prototype.xField = "x";
-ScatterGraph.prototype.yField = "y";
-ScatterGraph.prototype.sizeField = false;
-ScatterGraph.prototype.shape = "circle";
-
-ScatterGraph.prototype.size = 10;
-ScatterGraph.prototype.legend = "legend";
-ScatterGraph.prototype.legendAction = "auto";
-ScatterGraph.prototype.styled = true;
-
-Widget.alias("scatter-graph", ScatterGraph);
diff --git a/packages/cx/src/charts/ScatterGraph.scss b/packages/cx/src/charts/ScatterGraph.scss
index b55d0479d..1093c5f14 100644
--- a/packages/cx/src/charts/ScatterGraph.scss
+++ b/packages/cx/src/charts/ScatterGraph.scss
@@ -1,11 +1,13 @@
+@use "sass:map";
+
 
 @mixin cx-scattergraph(
    $name: 'scattergraph',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-shape {
       fill: rgb(128, 128, 128);
diff --git a/packages/cx/src/charts/ScatterGraph.tsx b/packages/cx/src/charts/ScatterGraph.tsx
new file mode 100644
index 000000000..aa1dc2ddb
--- /dev/null
+++ b/packages/cx/src/charts/ScatterGraph.tsx
@@ -0,0 +1,245 @@
+/** @jsxImportSource react */
+
+import { CSS } from "../ui/CSS";
+import { Instance } from "../ui/Instance";
+import { BooleanProp, NumberProp, RecordsProp, StringProp } from "../ui/Prop";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Widget, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
+import { isArray } from "../util/isArray";
+import type { ChartRenderingContext } from "./Chart";
+import { getShape } from "./shapes";
+
+export interface ScatterGraphConfig extends WidgetConfig, WidgetStyleConfig {
+   /** Data for the graph. Each entry should be an object with at least two properties
+    * whose names should match the `xField` and `yField` values.
+    */
+   data?: RecordsProp;
+
+   /** Size of the scatter points. */
+   size?: NumberProp;
+
+   /** Shape of the scatter points. Default is `circle`. */
+   shape?: StringProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: StringProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: BooleanProp;
+
+   /** Name of the horizontal axis. Default value is `x`. */
+   xAxis?: string;
+
+   /** Name of the vertical axis. Default value is `y`. */
+   yAxis?: string;
+
+   /** Name of the property which holds the x value. Default value is `x`. */
+   xField?: string;
+
+   /** Name of the property which holds the y value. Default value is `y`. */
+   yField?: string;
+
+   /** Name of the property which holds the size value. */
+   sizeField?: string | false;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
+
+   /** Action to perform on legend item click. Default is `auto`. */
+   legendAction?: string;
+
+   /** Selection configuration. */
+   selection?: any;
+}
+
+export interface ScatterGraphInstance extends Instance {
+   xAxis: any;
+   yAxis: any;
+   colorMap: any;
+}
+
+export class ScatterGraph extends Widget {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare xField: string;
+   declare yField: string;
+   declare sizeField: string | false;
+   declare size: number;
+   declare shape: string;
+   declare legend: string | false;
+   declare legendAction: string;
+   declare selection: Selection;
+   declare data: any;
+
+   constructor(config: ScatterGraphConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.selection = Selection.create(this.selection, {
+         records: this.data,
+      });
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(
+         ...args,
+         {
+            data: undefined,
+            size: undefined,
+            shape: undefined,
+            colorIndex: undefined,
+            colorMap: undefined,
+            colorName: undefined,
+            name: undefined,
+            active: true,
+         },
+         selection,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: ScatterGraphInstance): void {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: ChartRenderingContext, instance: ScatterGraphInstance): void {
+      super.explore(context, instance);
+
+      var xAxis = (instance.xAxis = context.axes![this.xAxis]);
+      var yAxis = (instance.yAxis = context.axes![this.yAxis]);
+
+      var { data } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (data.active && isArray(data.data)) {
+         data.data.forEach((p: any) => {
+            xAxis.acknowledge(p[this.xField]);
+            yAxis.acknowledge(p[this.yField]);
+         });
+      }
+   }
+
+   prepare(context: ChartRenderingContext, instance: ScatterGraphInstance): void {
+      var { data, xAxis, yAxis, colorMap } = instance;
+
+      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
+
+      if (colorMap && data.name) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (data.name && context.addLegendEntry)
+         context.addLegendEntry(this.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            disabled: data.disabled,
+            style: data.style,
+            shape: data.shape,
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+
+      if (data.active) {
+         if (context.pointReducer && isArray(data.data)) {
+            data.data.forEach((p: any, index: number) => {
+               context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
+            });
+         }
+      }
+   }
+
+   onLegendClick(e: MouseEvent, instance: ScatterGraphInstance): void {
+      var allActions = this.legendAction == "auto";
+      var { data } = instance;
+      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
+   }
+
+   render(context: RenderingContext, instance: ScatterGraphInstance, key: string): React.ReactNode {
+      var { data } = instance;
+      return (
+         <g key={key} className={data.classNames}>
+            {this.renderData(context, instance)}
+         </g>
+      );
+   }
+
+   renderData(context: RenderingContext, instance: ScatterGraphInstance): React.ReactNode {
+      var { data, xAxis, yAxis, store } = instance;
+
+      if (!data.active) return null;
+
+      var shape = getShape(data.shape);
+
+      var isSelected = this.selection.getIsSelectedDelegate(store);
+
+      return (
+         isArray(data.data) &&
+         data.data.map((p: any, i: number) => {
+            var classes = CSS.element(this.baseClass, "shape", {
+               selected: isSelected(p, i),
+               selectable: !this.selection.isDummy,
+               [`color-${data.colorIndex}`]: data.colorIndex != null,
+            });
+
+            var cx = xAxis.map(p[this.xField]),
+               cy = yAxis.map(p[this.yField]),
+               size = this.sizeField ? p[this.sizeField as string] : data.size;
+
+            return shape(cx, cy, size, {
+               key: i,
+               className: classes,
+               style: p.style || data.style,
+               onClick: (e: React.MouseEvent) => {
+                  this.handleItemClick(e, instance, i);
+               },
+            });
+         })
+      );
+   }
+
+   handleItemClick(e: React.MouseEvent, { data, store }: ScatterGraphInstance, index: number): void {
+      var bubble = data.data[index];
+      this.selection.select(store, bubble, index, {
+         toggle: e.ctrlKey,
+      });
+   }
+}
+
+ScatterGraph.prototype.baseClass = "scattergraph";
+ScatterGraph.prototype.xAxis = "x";
+ScatterGraph.prototype.yAxis = "y";
+
+ScatterGraph.prototype.xField = "x";
+ScatterGraph.prototype.yField = "y";
+ScatterGraph.prototype.sizeField = false;
+ScatterGraph.prototype.shape = "circle";
+
+ScatterGraph.prototype.size = 10;
+ScatterGraph.prototype.legend = "legend";
+ScatterGraph.prototype.legendAction = "auto";
+ScatterGraph.prototype.styled = true;
+
+Widget.alias("scatter-graph", ScatterGraph);
diff --git a/packages/cx/src/charts/Swimlane.d.ts b/packages/cx/src/charts/Swimlane.d.ts
deleted file mode 100644
index a7194925f..000000000
--- a/packages/cx/src/charts/Swimlane.d.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObjectProps } from "../svg";
-
-interface SwimlaneProps extends BoundedObjectProps {
-   /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number>;
-
-   /** The `y` value binding or expression. */
-   y?: Cx.Prop<string | number>;
-
-   /** Represents a swimlane size. */
-   size?: Cx.NumberProp;
-
-   /** Switch to vertical swimlanes. */
-   vertical?: boolean;
-
-   /**The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
-   laneOffset?: Cx.NumberProp;
-
-   /** Style object applied to the swimlanes. */
-   laneStyle?: StyleProp;
-}
-
-export class Swimlane extends Cx.Widget<SwimlaneProps> {}
diff --git a/packages/cx/src/charts/Swimlane.js b/packages/cx/src/charts/Swimlane.js
deleted file mode 100644
index 59a2c5031..000000000
--- a/packages/cx/src/charts/Swimlane.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import { BoundedObject } from "../svg/BoundedObject";
-import { parseStyle } from "../util/parseStyle";
-import { VDOM } from "../ui/Widget";
-import { Rect } from "../svg/util/Rect";
-
-export class Swimlane extends BoundedObject {
-   init() {
-      this.laneStyle = parseStyle(this.laneStyle);
-      super.init();
-   }
-
-   declareData(...args) {
-      super.declareData(...args, {
-         size: undefined,
-         laneOffset: undefined,
-         laneStyle: { structured: true },
-         vertical: undefined,
-         x: undefined,
-         y: undefined,
-      });
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-      super.explore(context, instance);
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-
-      if (data.vertical) {
-         instance.xAxis.acknowledge(data.x, data.size, data.laneOffset);
-      } else {
-         instance.yAxis.acknowledge(data.y, data.size, data.laneOffset);
-      }
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      instance.bounds = this.calculateRect(instance);
-      instance.cache("bounds", instance.bounds);
-      if (!instance.bounds.isEqual(instance.cached.bounds)) instance.markShouldUpdate(context);
-
-      context.push("parentRect", instance.bounds);
-   }
-
-   calculateRect(instance) {
-      var { data } = instance;
-      var { size, laneOffset } = data;
-
-      if (data.vertical) {
-         var x1 = instance.xAxis.map(data.x, laneOffset - size / 2);
-         var x2 = instance.xAxis.map(data.x, laneOffset + size / 2);
-         var bounds = new Rect({
-            l: Math.min(x1, x2),
-            r: Math.max(x1, x2),
-            t: data.bounds.t,
-            b: data.bounds.b,
-         });
-      } else {
-         var y1 = instance.yAxis.map(data.y, laneOffset - size / 2);
-         var y2 = instance.yAxis.map(data.y, laneOffset + size / 2);
-         var bounds = new Rect({
-            l: data.bounds.l,
-            r: data.bounds.r,
-            t: Math.min(y1, y2),
-            b: Math.max(y1, y2),
-         });
-      }
-
-      return bounds;
-   }
-
-   render(context, instance, key) {
-      let { data, xAxis, yAxis, bounds } = instance;
-      let { CSS, baseClass } = this;
-
-      let axis = this.vertical ? xAxis : yAxis;
-      if (!axis) return null;
-
-      let min, max, valueFunction;
-      if (axis.scale) {
-         min = axis.scale.min;
-         max = axis.scale.max;
-         let clamp = (value) => [Math.max(min, Math.min(max, value)), 0];
-         valueFunction = (value, offset) => clamp(value + offset);
-      } else if (axis.valueList) {
-         min = 0;
-         max = axis.valueList.length;
-         valueFunction = (value, offset) => [axis.valueList[value], offset];
-      }
-      if (!(min < max)) return null;
-
-      let rectClass = CSS.element(baseClass, "lane");
-
-      if (this.vertical) {
-         let c1 = axis.map(...valueFunction(data.x, -data.size / 2 + data.laneOffset));
-         let c2 = axis.map(...valueFunction(data.x, +data.size / 2 + data.laneOffset));
-         return (
-            <g key={key} className={data.classNames}>
-               <rect
-                  key={key}
-                  x={bounds.l}
-                  y={bounds.t}
-                  height={bounds.b - bounds.t}
-                  width={Math.abs(c1 - c2)}
-                  className={rectClass}
-                  style={data.laneStyle}
-               />
-               {this.renderChildren(context, instance)};
-            </g>
-         );
-      } else {
-         let c1 = axis.map(...valueFunction(data.y, -data.size / 2 + data.laneOffset));
-         let c2 = axis.map(...valueFunction(data.y, +data.size / 2 + data.laneOffset));
-         return (
-            <g key={key} className={data.classNames}>
-               <rect
-                  key={key}
-                  x={bounds.l}
-                  y={bounds.t}
-                  width={bounds.r - bounds.l}
-                  height={Math.abs(c1 - c2)}
-                  className={rectClass}
-                  style={data.laneStyle}
-               />
-               {this.renderChildren(context, instance)};
-            </g>
-         );
-      }
-   }
-}
-
-Swimlane.prototype.xAxis = "x";
-Swimlane.prototype.yAxis = "y";
-Swimlane.prototype.anchors = "0 1 1 0";
-Swimlane.prototype.baseClass = "swimlane";
-Swimlane.prototype.size = 0.5;
-Swimlane.prototype.laneOffset = 0;
-Swimlane.prototype.vertical = false;
-
-BoundedObject.alias("swimlane", Swimlane);
diff --git a/packages/cx/src/charts/Swimlane.scss b/packages/cx/src/charts/Swimlane.scss
index 2e9b4ea51..dba9f3ae4 100644
--- a/packages/cx/src/charts/Swimlane.scss
+++ b/packages/cx/src/charts/Swimlane.scss
@@ -1,7 +1,9 @@
+@use "sass:map";
+
 @mixin cx-swimlane($name: "swimlane", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-lane {
       fill: $lane-color;
diff --git a/packages/cx/src/charts/Swimlane.tsx b/packages/cx/src/charts/Swimlane.tsx
new file mode 100644
index 000000000..91037f0e1
--- /dev/null
+++ b/packages/cx/src/charts/Swimlane.tsx
@@ -0,0 +1,195 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { parseStyle } from "../util/parseStyle";
+import { VDOM } from "../ui/Widget";
+import { Rect } from "../svg/util/Rect";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { Prop, NumberProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface SwimlaneConfig extends BoundedObjectConfig {
+   /** The `x` value binding or expression. */
+   x?: Prop<string | number>;
+
+   /** The `y` value binding or expression. */
+   y?: Prop<string | number>;
+
+   /** Represents a swimlane size. */
+   size?: NumberProp;
+
+   /** Switch to vertical swimlanes. */
+   vertical?: boolean;
+
+   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+   laneOffset?: NumberProp;
+
+   /** Style object applied to the swimlanes. */
+   laneStyle?: StyleProp;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+}
+
+export interface SwimlaneInstance extends BoundedObjectInstance {
+   xAxis?: any;
+   yAxis?: any;
+   bounds?: Rect;
+}
+
+export class Swimlane extends BoundedObject<SwimlaneConfig, SwimlaneInstance> {
+   declare xAxis: string;
+   declare yAxis: string;
+   declare anchors: string;
+   declare baseClass: string;
+   declare size: number;
+   declare laneOffset: number;
+   declare vertical: boolean;
+   declare laneStyle: any;
+   declare CSS: any;
+
+   constructor(config?: SwimlaneConfig) {
+      super(config);
+   }
+
+   init() {
+      this.laneStyle = parseStyle(this.laneStyle);
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         size: undefined,
+         laneOffset: undefined,
+         laneStyle: { structured: true },
+         vertical: undefined,
+         x: undefined,
+         y: undefined,
+      });
+   }
+
+   explore(context: ChartRenderingContext, instance: SwimlaneInstance) {
+      let { data } = instance;
+      super.explore(context, instance);
+      instance.xAxis = context.axes?.[this.xAxis];
+      instance.yAxis = context.axes?.[this.yAxis];
+
+      const d = data as any;
+      if (d.vertical) {
+         instance.xAxis.acknowledge(d.x, d.size, d.laneOffset);
+      } else {
+         instance.yAxis.acknowledge(d.y, d.size, d.laneOffset);
+      }
+   }
+
+   prepare(context: RenderingContext, instance: SwimlaneInstance) {
+      super.prepare(context, instance);
+      instance.bounds = this.calculateRect(instance);
+      instance.cache("bounds", instance.bounds);
+      if (!instance.bounds.isEqual((instance.cached as any).bounds)) instance.markShouldUpdate(context);
+
+      context.push("parentRect", instance.bounds);
+   }
+
+   calculateRect(instance: SwimlaneInstance): Rect {
+      var { data } = instance;
+      const d = data as any;
+      var { size, laneOffset } = d;
+      let bounds: Rect;
+
+      if (d.vertical) {
+         var x1 = instance.xAxis.map(d.x, laneOffset - size / 2);
+         var x2 = instance.xAxis.map(d.x, laneOffset + size / 2);
+         bounds = new Rect({
+            l: Math.min(x1, x2),
+            r: Math.max(x1, x2),
+            t: d.bounds.t,
+            b: d.bounds.b,
+         });
+      } else {
+         var y1 = instance.yAxis.map(d.y, laneOffset - size / 2);
+         var y2 = instance.yAxis.map(d.y, laneOffset + size / 2);
+         bounds = new Rect({
+            l: d.bounds.l,
+            r: d.bounds.r,
+            t: Math.min(y1, y2),
+            b: Math.max(y1, y2),
+         });
+      }
+
+      return bounds;
+   }
+
+   render(context: RenderingContext, instance: SwimlaneInstance, key: string): CxChild {
+      let { data, xAxis, yAxis, bounds } = instance;
+      let { CSS, baseClass } = this;
+      const d = data as any;
+
+      let axis = this.vertical ? xAxis : yAxis;
+      if (!axis) return null;
+
+      let min: number, max: number, valueFunction: (value: any, offset: number) => [any, number];
+      if (axis.scale) {
+         min = axis.scale.min;
+         max = axis.scale.max;
+         let clamp = (value: number): [number, number] => [Math.max(min, Math.min(max, value)), 0];
+         valueFunction = (value, offset) => clamp(value + offset);
+      } else if (axis.valueList) {
+         min = 0;
+         max = axis.valueList.length;
+         valueFunction = (value, offset) => [axis.valueList[value], offset];
+      }
+      if (!(min! < max!)) return null;
+
+      let rectClass = CSS.element(baseClass, "lane");
+
+      if (this.vertical) {
+         let c1 = axis.map(...valueFunction!(d.x, -d.size / 2 + d.laneOffset));
+         let c2 = axis.map(...valueFunction!(d.x, +d.size / 2 + d.laneOffset));
+         return (
+            <g key={key} className={d.classNames}>
+               <rect
+                  key={key}
+                  x={bounds!.l}
+                  y={bounds!.t}
+                  height={bounds!.b - bounds!.t}
+                  width={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={d.laneStyle}
+               />
+               {this.renderChildren(context, instance)};
+            </g>
+         );
+      } else {
+         let c1 = axis.map(...valueFunction!(d.y, -d.size / 2 + d.laneOffset));
+         let c2 = axis.map(...valueFunction!(d.y, +d.size / 2 + d.laneOffset));
+         return (
+            <g key={key} className={d.classNames}>
+               <rect
+                  key={key}
+                  x={bounds!.l}
+                  y={bounds!.t}
+                  width={bounds!.r - bounds!.l}
+                  height={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={d.laneStyle}
+               />
+               {this.renderChildren(context, instance)};
+            </g>
+         );
+      }
+   }
+}
+
+Swimlane.prototype.xAxis = "x";
+Swimlane.prototype.yAxis = "y";
+Swimlane.prototype.anchors = "0 1 1 0";
+Swimlane.prototype.baseClass = "swimlane";
+Swimlane.prototype.size = 0.5;
+Swimlane.prototype.laneOffset = 0;
+Swimlane.prototype.vertical = false;
+
+BoundedObject.alias("swimlane", Swimlane);
diff --git a/packages/cx/src/charts/Swimlanes.d.ts b/packages/cx/src/charts/Swimlanes.d.ts
deleted file mode 100644
index 5b627a607..000000000
--- a/packages/cx/src/charts/Swimlanes.d.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-
-interface SwimlanesProps extends BoundedObjectProps {
-   /**
-    * Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    * Set to `false` to hide the grid lines in x direction.
-    */
-   xAxis?: string | boolean;
-
-   /**
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    * Set to `false` to hide the grid lines in y direction.
-    */
-   yAxis?: string | boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to `swimlanes`. */
-   baseClass?: string;
-
-   /** Represents a swimlane size. */
-   size?: Cx.NumberProp;
-
-   /**
-    * Represents a swimlane step. Define a step on which a swimlane will be rendered. (eg. step 2 will render
-    * every second swimlane in the chart.)
-    */
-   step?: Cx.NumberProp;
-
-   /** Switch to vertical swimlanes. */
-   vertical?: boolean;
-
-   /**The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
-   laneOffset?: Cx.NumberProp;
-
-   /** Style object applied to the swimlanes. */
-   laneStyle?: StyleProp;
-}
-
-export class Swimlanes extends Cx.Widget<SwimlanesProps> {}
diff --git a/packages/cx/src/charts/Swimlanes.js b/packages/cx/src/charts/Swimlanes.js
deleted file mode 100644
index 0192ccace..000000000
--- a/packages/cx/src/charts/Swimlanes.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { BoundedObject } from "../svg/BoundedObject";
-import { parseStyle } from "../util/parseStyle";
-import { VDOM } from "../ui/Widget";
-
-export class Swimlanes extends BoundedObject {
-   init() {
-      this.laneStyle = parseStyle(this.laneStyle);
-      super.init();
-   }
-   declareData(...args) {
-      super.declareData(...args, {
-         size: undefined,
-         step: undefined,
-         laneOffset: undefined,
-         laneStyle: { structured: true },
-      });
-   }
-
-   explore(context, instance) {
-      super.explore(context, instance);
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      let { xAxis, yAxis } = instance;
-      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate)) instance.markShouldUpdate(context);
-   }
-
-   render(context, instance, key) {
-      let { data, xAxis, yAxis } = instance;
-      let { bounds } = data;
-      let { CSS, baseClass } = this;
-
-      if (data.step <= 0 || data.size <= 0) return;
-
-      let axis = this.vertical ? xAxis : yAxis;
-
-      if (!axis) return null;
-
-      let min, max, valueFunction;
-
-      if (axis.scale) {
-         min = axis.scale.min;
-         max = axis.scale.max;
-         let clamp = (value) => [Math.max(min, Math.min(max, value)), 0];
-         valueFunction = (value, offset) => clamp(value + offset);
-      } else if (axis.valueList) {
-         min = 0;
-         max = axis.valueList.length;
-         valueFunction = (value, offset) => [axis.valueList[value], offset];
-      }
-
-      if (!(min < max)) return null;
-
-      let rects = [];
-
-      let at = Math.ceil(min / data.step) * data.step;
-      let index = 0;
-
-      let rectClass = CSS.element(baseClass, "lane");
-
-      while (at - data.size / 2 < max) {
-         let c1 = axis.map(...valueFunction(at, -data.size / 2 + data.laneOffset));
-         let c2 = axis.map(...valueFunction(at, +data.size / 2 + data.laneOffset));
-         if (this.vertical) {
-            rects.push(
-               <rect
-                  key={index++}
-                  y={bounds.t}
-                  x={Math.min(c1, c2)}
-                  height={bounds.b - bounds.t}
-                  width={Math.abs(c1 - c2)}
-                  className={rectClass}
-                  style={data.laneStyle}
-               />,
-            );
-         } else {
-            rects.push(
-               <rect
-                  key={index++}
-                  x={bounds.l}
-                  y={Math.min(c1, c2)}
-                  width={bounds.r - bounds.l}
-                  height={Math.abs(c1 - c2)}
-                  className={rectClass}
-                  style={data.laneStyle}
-               />,
-            );
-         }
-
-         at += data.step;
-      }
-
-      return (
-         <g key={key} className={data.classNames}>
-            {rects}
-         </g>
-      );
-   }
-}
-
-Swimlanes.prototype.xAxis = "x";
-Swimlanes.prototype.yAxis = "y";
-Swimlanes.prototype.anchors = "0 1 1 0";
-Swimlanes.prototype.baseClass = "swimlanes";
-Swimlanes.prototype.size = 0.5;
-Swimlanes.prototype.laneOffset = 0;
-Swimlanes.prototype.step = 1;
-Swimlanes.prototype.vertical = false;
-Swimlanes.prototype.styled = true;
-
-BoundedObject.alias("swimlanes", Swimlanes);
diff --git a/packages/cx/src/charts/Swimlanes.scss b/packages/cx/src/charts/Swimlanes.scss
index 71bf6130d..45b824adc 100644
--- a/packages/cx/src/charts/Swimlanes.scss
+++ b/packages/cx/src/charts/Swimlanes.scss
@@ -1,7 +1,9 @@
+@use "sass:map";
+
 @mixin cx-swimlanes($name: "swimlanes", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$element}#{$name}-lane {
       fill: $lane-color;
diff --git a/packages/cx/src/charts/Swimlanes.tsx b/packages/cx/src/charts/Swimlanes.tsx
new file mode 100644
index 000000000..34b3b32e9
--- /dev/null
+++ b/packages/cx/src/charts/Swimlanes.tsx
@@ -0,0 +1,179 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { parseStyle } from "../util/parseStyle";
+import { VDOM } from "../ui/Widget";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { NumberProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface SwimlanesConfig extends BoundedObjectConfig {
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    * Set to `false` to hide the grid lines in x direction.
+    */
+   xAxis?: string | boolean;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    * Set to `false` to hide the grid lines in y direction.
+    */
+   yAxis?: string | boolean;
+
+   /** Base CSS class to be applied to the element. Defaults to `swimlanes`. */
+   baseClass?: string;
+
+   /** Represents a swimlane size. */
+   size?: NumberProp;
+
+   /**
+    * Represents a swimlane step. Define a step on which a swimlane will be rendered. (eg. step 2 will render
+    * every second swimlane in the chart.)
+    */
+   step?: NumberProp;
+
+   /** Switch to vertical swimlanes. */
+   vertical?: boolean;
+
+   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+   laneOffset?: NumberProp;
+
+   /** Style object applied to the swimlanes. */
+   laneStyle?: StyleProp;
+}
+
+export interface SwimlanesInstance extends BoundedObjectInstance {
+   xAxis?: any;
+   yAxis?: any;
+}
+
+export class Swimlanes extends BoundedObject<SwimlanesConfig, SwimlanesInstance> {
+   declare xAxis: string;
+   declare yAxis: string;
+   declare anchors: string;
+   declare baseClass: string;
+   declare size: number;
+   declare laneOffset: number;
+   declare step: number;
+   declare vertical: boolean;
+   declare styled: boolean;
+   declare laneStyle: any;
+   declare CSS: any;
+
+   constructor(config?: SwimlanesConfig) {
+      super(config);
+   }
+
+   init() {
+      this.laneStyle = parseStyle(this.laneStyle);
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         size: undefined,
+         step: undefined,
+         laneOffset: undefined,
+         laneStyle: { structured: true },
+      });
+   }
+
+   explore(context: ChartRenderingContext, instance: SwimlanesInstance) {
+      super.explore(context, instance);
+      instance.xAxis = context.axes?.[this.xAxis];
+      instance.yAxis = context.axes?.[this.yAxis];
+   }
+
+   prepare(context: RenderingContext, instance: SwimlanesInstance) {
+      super.prepare(context, instance);
+      let { xAxis, yAxis } = instance;
+      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate)) instance.markShouldUpdate(context);
+   }
+
+   render(context: RenderingContext, instance: SwimlanesInstance, key: string): CxChild {
+      let { data, xAxis, yAxis } = instance;
+      const d = data as any;
+      let { bounds } = d;
+      let { CSS, baseClass } = this;
+
+      if (d.step <= 0 || d.size <= 0) return null;
+
+      let axis = this.vertical ? xAxis : yAxis;
+
+      if (!axis) return null;
+
+      let min: number, max: number, valueFunction: (value: number, offset: number) => [any, number];
+
+      if (axis.scale) {
+         min = axis.scale.min;
+         max = axis.scale.max;
+         let clamp = (value: number): [number, number] => [Math.max(min, Math.min(max, value)), 0];
+         valueFunction = (value, offset) => clamp(value + offset);
+      } else if (axis.valueList) {
+         min = 0;
+         max = axis.valueList.length;
+         valueFunction = (value, offset) => [axis.valueList[value], offset];
+      }
+
+      if (!(min! < max!)) return null;
+
+      let rects: React.ReactElement[] = [];
+
+      let at = Math.ceil(min! / d.step) * d.step;
+      let index = 0;
+
+      let rectClass = CSS.element(baseClass, "lane");
+
+      while (at - d.size / 2 < max!) {
+         let c1 = axis.map(...valueFunction!(at, -d.size / 2 + d.laneOffset));
+         let c2 = axis.map(...valueFunction!(at, +d.size / 2 + d.laneOffset));
+         if (this.vertical) {
+            rects.push(
+               <rect
+                  key={index++}
+                  y={bounds.t}
+                  x={Math.min(c1, c2)}
+                  height={bounds.b - bounds.t}
+                  width={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={d.laneStyle}
+               />
+            );
+         } else {
+            rects.push(
+               <rect
+                  key={index++}
+                  x={bounds.l}
+                  y={Math.min(c1, c2)}
+                  width={bounds.r - bounds.l}
+                  height={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={d.laneStyle}
+               />
+            );
+         }
+
+         at += d.step;
+      }
+
+      return (
+         <g key={key} className={d.classNames}>
+            {rects}
+         </g>
+      );
+   }
+}
+
+Swimlanes.prototype.xAxis = "x";
+Swimlanes.prototype.yAxis = "y";
+Swimlanes.prototype.anchors = "0 1 1 0";
+Swimlanes.prototype.baseClass = "swimlanes";
+Swimlanes.prototype.size = 0.5;
+Swimlanes.prototype.laneOffset = 0;
+Swimlanes.prototype.step = 1;
+Swimlanes.prototype.vertical = false;
+Swimlanes.prototype.styled = true;
+
+BoundedObject.alias("swimlanes", Swimlanes);
diff --git a/packages/cx/src/charts/axis/Axis.d.ts b/packages/cx/src/charts/axis/Axis.d.ts
deleted file mode 100644
index 072ddb692..000000000
--- a/packages/cx/src/charts/axis/Axis.d.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { Instance } from "./../../ui/Instance.d";
-import * as Cx from "../../core";
-import { BoundedObject, BoundedObjectProps } from "../../svg/BoundedObject";
-
-export interface AxisProps extends BoundedObjectProps {
-   /** Set to `true` for vertical axes. */
-   vertical?: boolean;
-
-   /** Used as a secondary axis. Displayed at the top/right. */
-   secondary?: boolean;
-
-   /** When set to `true`, the values are displayed in descending order. */
-   inverted?: Cx.BooleanProp;
-
-   /** When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved. */
-   hidden?: boolean;
-
-   /** Size of the axis tick line. Defaults to 3. */
-   tickSize?: number;
-
-   /** Distance between ticks and the axis. Default is 0. Use negative values for offset to make ticks appear on both sides of the axis. */
-   tickOffset?: number;
-
-   /** The smallest distance between two ticks on the axis. Defaults to 25. */
-   minTickDistance?: number;
-
-   /** The smallest distance between two labels on the vertical axis. Defaults to 40. */
-   minLabelDistanceVertical?: number;
-
-   /** The smallest distance between two labels on the horizontal axis. Defaults to 50.  */
-   minLabelDistanceHorizontal?: number;
-
-   /** Distance between labels and the axis. Defaults to 10. */
-   labelOffset?: number | string;
-
-   /** Label rotation angle in degrees. */
-   labelRotation?: Cx.Prop<number | string>;
-
-   /** Label text-anchor value. Allowed values are start, end and middle. Default value is set based on the value of vertical and secondary flags. */
-   labelAnchor?: "start" | "end" | "middle" | "auto";
-
-   /** Horizontal text offset. */
-   labelDx?: number | string;
-
-   /** Vertical text offset which can be used for vertical alignment. */
-   labelDy?: number | string;
-
-   /** Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`. */
-   labelWrap?: boolean;
-
-   /**
-    * Used for vertical adjustment of multi-line labels. Default value is `auto` which means
-    * that value is initialized based on axis configuration. Value `0` means that label will grow towards
-    * the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen.
-    * `-0.5` will make labels vertically centered.
-    */
-   labelLineCountDyFactor?: number | string;
-
-   /**
-    * Used for vertical adjustment of multi-line labels. Default value is 1 which means
-    * that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.
-    */
-   labelLineHeight?: number | string;
-
-   /** If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`. */
-   labelMaxLineLength?: number;
-
-   /** Set to true to hide the axis labels. */
-   hideLabels?: boolean;
-
-   /** Set to true to hide the axis line. */
-   hideLine?: boolean;
-
-   /** Set to true to hide the axis ticks. */
-   hideTicks?: boolean;
-
-   /** Additional CSS style to be applied to the axis line. */
-   lineStyle?: Cx.StyleProp;
-
-   /** Additional CSS style to be applied to the axis ticks. */
-   tickStyle?: Cx.StyleProp;
-
-   /** Additional CSS style to be applied to the axis labels. */
-   labelStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be applied to the axis line. */
-   lineClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied to the axis ticks. */
-   tickClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied to the axis labels. */
-   labelClass?: Cx.ClassProp;
-
-   onMeasured?: (info: any, instance: Instance) => void;
-
-   /** A function used to create a formatter function for axis labels. See Complex Labels example in the CxJS documentation for more info. */
-   onCreateLabelFormatter?:
-      | string
-      | ((
-           context: any,
-           instance: Instance,
-        ) => (
-           formattedValue: string,
-           value: any,
-           { tickIndex, serieIndex }: { tickIndex: number; serieIndex: number },
-        ) => { text: string; style?: any; className?: string }[]);
-
-   /** Distance between the even labels and the axis. */
-   alternateLabelOffset?: number | string;
-}
-
-export class Axis extends BoundedObject {}
diff --git a/packages/cx/src/charts/axis/Axis.js b/packages/cx/src/charts/axis/Axis.js
deleted file mode 100644
index 5ef772b93..000000000
--- a/packages/cx/src/charts/axis/Axis.js
+++ /dev/null
@@ -1,288 +0,0 @@
-import { BoundedObject } from "../../svg/BoundedObject";
-import { VDOM } from "../../ui/Widget";
-import { isUndefined } from "../../util/isUndefined";
-import { parseStyle } from "../../util/parseStyle";
-
-export class Axis extends BoundedObject {
-   init() {
-      if (this.labelAnchor == "auto") this.labelAnchor = this.vertical ? (this.secondary ? "start" : "end") : "middle";
-
-      if (this.labelDx == "auto") this.labelDx = 0;
-
-      if (this.labelDy == "auto") this.labelDy = this.vertical ? "0.4em" : this.secondary ? 0 : "0.8em";
-
-      if (isUndefined(this.minLabelDistance))
-         this.minLabelDistance = this.vertical ? this.minLabelDistanceVertical : this.minLabelDistanceHorizontal;
-
-      if (this.labelLineCountDyFactor == "auto")
-         this.labelLineCountDyFactor = this.vertical ? -this.labelLineHeight / 2 : this.secondary ? -1 : 0;
-
-      this.lineStyle = parseStyle(this.lineStyle);
-      this.tickStyle = parseStyle(this.tickStyle);
-      this.labelStyle = parseStyle(this.labelStyle);
-
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            anchors: undefined,
-            hideLabels: undefined,
-            hideLine: undefined,
-            hideTicks: undefined,
-            labelRotation: undefined,
-            labelAnchor: undefined,
-            lineStyle: undefined,
-            lineClass: undefined,
-            labelStyle: undefined,
-            labelClass: undefined,
-            tickStyle: undefined,
-            tickClass: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(context, instance);
-      if (this.onCreateLabelFormatter)
-         instance.labelFormatter = instance.invoke("onCreateLabelFormatter", context, instance);
-   }
-
-   report(context, instance) {
-      return instance.calculator;
-   }
-
-   reportData(context, instance) {}
-
-   renderTicksAndLabels(context, instance, valueFormatter, minLabelDistance) {
-      if (this.hidden) return false;
-
-      var { data, calculator, labelFormatter } = instance;
-      var { bounds } = data;
-      let { CSS, baseClass } = this;
-      var size = calculator.findTickSize(minLabelDistance);
-
-      var labelClass = CSS.expand(CSS.element(baseClass, "label"), data.labelClass);
-      var offsetClass = CSS.element(baseClass, "label-offset");
-
-      var x1,
-         y1,
-         x2,
-         y2,
-         tickSize = this.tickSize,
-         tickOffset = this.tickOffset;
-
-      if (this.vertical) {
-         x1 = x2 = this.secondary ? bounds.r : bounds.l;
-         y1 = bounds.b;
-         y2 = bounds.t;
-      } else {
-         x1 = bounds.l;
-         x2 = bounds.r;
-         y1 = y2 = this.secondary ? bounds.t : bounds.b;
-      }
-
-      var res = [null, null];
-
-      if (!data.hideLine) {
-         res[0] = (
-            <line
-               key="line"
-               className={CSS.expand(CSS.element(baseClass, "line"), data.lineClass)}
-               style={data.lineStyle}
-               x1={x1}
-               y1={y1}
-               x2={x2}
-               y2={y2}
-            />
-         );
-      }
-
-      var t = [];
-      if (!!size && !data.hideLabels) {
-         var ticks = calculator.getTicks([size]);
-         ticks.forEach((serie, si) => {
-            serie.forEach((v, i) => {
-               var s = calculator.map(v);
-
-               if (this.secondary) {
-                  x1 = this.vertical ? bounds.r + tickOffset : s;
-                  y1 = this.vertical ? s : bounds.t - tickOffset;
-                  x2 = this.vertical ? bounds.r + tickOffset + tickSize : s;
-                  y2 = this.vertical ? s : bounds.t - tickOffset - tickSize;
-               } else {
-                  x1 = this.vertical ? bounds.l - tickOffset : s;
-                  y1 = this.vertical ? s : bounds.b + tickOffset;
-                  x2 = this.vertical ? bounds.l - tickOffset - tickSize : s;
-                  y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
-               }
-
-               if (!this.useGridlineTicks) t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
-
-               var x, y;
-               let labelOffset =
-                  this.alternateLabelOffset != null && i % 2 == 1 ? this.alternateLabelOffset : this.labelOffset;
-
-               if (this.secondary) {
-                  x = this.vertical ? bounds.r + labelOffset : s;
-                  y = this.vertical ? s : bounds.t - labelOffset;
-               } else {
-                  x = this.vertical ? bounds.l - labelOffset : s;
-                  y = this.vertical ? s : bounds.b + labelOffset;
-               }
-
-               var transform = data.labelRotation ? `rotate(${data.labelRotation} ${x} ${y})` : null;
-               var formattedValue = valueFormatter(v);
-               var lines = labelFormatter
-                  ? labelFormatter(formattedValue, v, { tickIndex: si, serieIndex: i })
-                  : this.wrapLines(formattedValue);
-               res.push(
-                  <text
-                     key={`label-${si}-${i}`}
-                     className={labelClass}
-                     style={data.labelStyle}
-                     x={x}
-                     y={y}
-                     textAnchor={data.labelAnchor}
-                     transform={transform}
-                  >
-                     {this.renderLabels(lines, x, this.labelDy, this.labelDx, offsetClass)}
-                  </text>,
-               );
-            });
-         });
-      }
-
-      if (!data.hideTicks) {
-         if (this.useGridlineTicks) {
-            let gridlines = calculator.mapGridlines();
-            gridlines.forEach((s, i) => {
-               if (this.secondary) {
-                  x1 = this.vertical ? bounds.r + tickOffset : s;
-                  y1 = this.vertical ? s : bounds.t - tickOffset;
-                  x2 = this.vertical ? bounds.r + tickOffset + tickSize : s;
-                  y2 = this.vertical ? s : bounds.t - tickOffset - tickSize;
-               } else {
-                  x1 = this.vertical ? bounds.l - tickOffset : s;
-                  y1 = this.vertical ? s : bounds.b + tickOffset;
-                  x2 = this.vertical ? bounds.l - tickOffset - tickSize : s;
-                  y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
-               }
-               t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
-            });
-         }
-
-         res[1] = (
-            <path
-               key="ticks"
-               className={CSS.expand(CSS.element(baseClass, "ticks"), data.tickClass)}
-               style={data.tickStyle}
-               d={t.join(" ")}
-            />
-         );
-      }
-
-      return res;
-   }
-
-   wrapLines(str) {
-      if (!this.labelWrap || typeof str != "string") return [{ text: str }];
-
-      let parts = str.split(" ");
-      if (parts.length == 0) return null;
-
-      let lines = [];
-      let line = null;
-      for (let i = 0; i < parts.length; i++) {
-         if (!line) line = parts[i];
-         else if (parts[i].length + line.length < this.labelMaxLineLength) line += " " + parts[i];
-         else {
-            lines.push({ text: line });
-            line = parts[i];
-         }
-      }
-      lines.push({ text: line });
-      return lines;
-   }
-
-   renderLabels(lines, x, dy, dx, offsetClass) {
-      let offset = this.labelLineCountDyFactor * (lines.length - 1);
-      let result = [];
-
-      if (lines.length > 1 && dy != null) {
-         result.push(
-            <tspan key={-2} className={offsetClass} dy={dy}>
-               _
-            </tspan>,
-         );
-      }
-
-      lines.forEach((p, i) => {
-         let data =
-            p.data != null
-               ? Object.entries(p.data).reduce((acc, [key, val]) => {
-                    acc[`data-${key}`] = val;
-                    return acc;
-                 }, {})
-               : null;
-         result.push(
-            <tspan
-               key={i}
-               dy={lines.length > 1 ? `${i == 0 ? offset : this.labelLineHeight}em` : dy}
-               x={x}
-               style={p.style}
-               className={p.className}
-               dx={dx}
-               {...data}
-            >
-               {p.text}
-            </tspan>,
-         );
-      });
-      return result;
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      var { bounds } = instance.data;
-      var [a, b] = !this.vertical ? [bounds.l, bounds.r] : [bounds.b, bounds.t];
-      instance.calculator.measure(a, b);
-      if (this.onMeasured) instance.invoke("onMeasured", instance.calculator.hash(), instance);
-      if (!instance.calculator.isSame(instance.cached.axis)) instance.markShouldUpdate(context);
-   }
-
-   cleanup(context, instance) {
-      var { cached, calculator } = instance;
-      cached.axis = calculator.hash();
-   }
-}
-
-Axis.prototype.anchors = "0 1 1 0";
-Axis.prototype.styled = true;
-Axis.prototype.vertical = false;
-Axis.prototype.secondary = false;
-Axis.prototype.inverted = false;
-Axis.prototype.hidden = false;
-Axis.prototype.hideLabels = false;
-Axis.prototype.hideTicks = false;
-Axis.prototype.hideLine = false;
-
-Axis.prototype.tickSize = 3;
-Axis.prototype.tickOffset = 0;
-Axis.prototype.minTickDistance = 25;
-Axis.prototype.minLabelDistanceVertical = 40;
-Axis.prototype.minLabelDistanceHorizontal = 50;
-Axis.prototype.labelOffset = 10;
-Axis.prototype.alternateLabelOffset = null;
-Axis.prototype.labelRotation = 0;
-Axis.prototype.labelAnchor = "auto";
-Axis.prototype.labelDx = "auto";
-Axis.prototype.labelDy = "auto";
-Axis.prototype.labelWrap = false;
-Axis.prototype.labelLineCountDyFactor = "auto";
-Axis.prototype.labelLineHeight = 1;
-Axis.prototype.labelMaxLineLength = 10;
-
-Axis.namespace = "ui.svg.chart.axis";
diff --git a/packages/cx/src/charts/axis/Axis.tsx b/packages/cx/src/charts/axis/Axis.tsx
new file mode 100644
index 000000000..498cfb6f4
--- /dev/null
+++ b/packages/cx/src/charts/axis/Axis.tsx
@@ -0,0 +1,444 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../../svg/BoundedObject";
+import { VDOM } from "../../ui/Widget";
+import { isUndefined } from "../../util/isUndefined";
+import { parseStyle } from "../../util/parseStyle";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, StyleProp, ClassProp, Prop } from "../../ui/Prop";
+
+export interface AxisConfig extends BoundedObjectConfig {
+   /** Set to `true` for vertical axes. */
+   vertical?: boolean;
+
+   /** Used as a secondary axis. Displayed at the top/right. */
+   secondary?: boolean;
+
+   /** When set to `true`, the values are displayed in descending order. */
+   inverted?: BooleanProp;
+
+   /** When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved. */
+   hidden?: boolean;
+
+   /** Size of the axis tick line. Defaults to 3. */
+   tickSize?: number;
+
+   /** Distance between ticks and the axis. Default is 0. Use negative values for offset to make ticks appear on both sides of the axis. */
+   tickOffset?: number;
+
+   /** The smallest distance between two ticks on the axis. Defaults to 25. */
+   minTickDistance?: number;
+
+   /** The smallest distance between two labels on the vertical axis. Defaults to 40. */
+   minLabelDistanceVertical?: number;
+
+   /** The smallest distance between two labels on the horizontal axis. Defaults to 50.  */
+   minLabelDistanceHorizontal?: number;
+
+   /** Distance between labels and the axis. Defaults to 10. */
+   labelOffset?: number | string;
+
+   /** Label rotation angle in degrees. */
+   labelRotation?: Prop<number | string>;
+
+   /** Label text-anchor value. Allowed values are start, end and middle. Default value is set based on the value of vertical and secondary flags. */
+   labelAnchor?: "start" | "end" | "middle" | "auto";
+
+   /** Horizontal text offset. */
+   labelDx?: number | string;
+
+   /** Vertical text offset which can be used for vertical alignment. */
+   labelDy?: number | string;
+
+   /** Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`. */
+   labelWrap?: boolean;
+
+   /**
+    * Used for vertical adjustment of multi-line labels. Default value is `auto` which means
+    * that value is initialized based on axis configuration. Value `0` means that label will grow towards
+    * the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen.
+    * `-0.5` will make labels vertically centered.
+    */
+   labelLineCountDyFactor?: number | string;
+
+   /**
+    * Used for vertical adjustment of multi-line labels. Default value is 1 which means
+    * that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.
+    */
+   labelLineHeight?: number | string;
+
+   /** If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`. */
+   labelMaxLineLength?: number;
+
+   /** Set to true to hide the axis labels. */
+   hideLabels?: boolean;
+
+   /** Set to true to hide the axis line. */
+   hideLine?: boolean;
+
+   /** Set to true to hide the axis ticks. */
+   hideTicks?: boolean;
+
+   /** Additional CSS style to be applied to the axis line. */
+   lineStyle?: StyleProp;
+
+   /** Additional CSS style to be applied to the axis ticks. */
+   tickStyle?: StyleProp;
+
+   /** Additional CSS style to be applied to the axis labels. */
+   labelStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the axis line. */
+   lineClass?: ClassProp;
+
+   /** Additional CSS class to be applied to the axis ticks. */
+   tickClass?: ClassProp;
+
+   /** Additional CSS class to be applied to the axis labels. */
+   labelClass?: ClassProp;
+
+   onMeasured?: (info: any, instance: Instance) => void;
+
+   /** A function used to create a formatter function for axis labels. */
+   onCreateLabelFormatter?:
+      | string
+      | ((
+           context: any,
+           instance: Instance,
+        ) => (
+           formattedValue: string,
+           value: any,
+           info: { tickIndex: number; serieIndex: number },
+        ) => { text: string; style?: any; className?: string }[]);
+
+   /** Distance between the even labels and the axis. */
+   alternateLabelOffset?: number | string;
+
+   useGridlineTicks?: boolean;
+}
+
+export interface AxisInstance extends BoundedObjectInstance {
+   calculator: any;
+   labelFormatter?: any;
+   cached: { axis?: any };
+}
+
+export class Axis extends BoundedObject<AxisConfig, AxisInstance> {
+   declare baseClass: string;
+   declare vertical: boolean;
+   declare secondary: boolean;
+   declare inverted: boolean;
+   declare hidden: boolean;
+   declare hideLabels: boolean;
+   declare hideTicks: boolean;
+   declare hideLine: boolean;
+   declare tickSize: number;
+   declare tickOffset: number;
+   declare minTickDistance: number;
+   declare minLabelDistance: number;
+   declare minLabelDistanceVertical: number;
+   declare minLabelDistanceHorizontal: number;
+   declare labelOffset: number;
+   declare alternateLabelOffset: number | null;
+   declare labelRotation: number;
+   declare labelAnchor: string;
+   declare labelDx: number | string;
+   declare labelDy: number | string;
+   declare labelWrap: boolean;
+   declare labelLineCountDyFactor: number | string;
+   declare labelLineHeight: number;
+   declare labelMaxLineLength: number;
+   declare lineStyle: any;
+   declare tickStyle: any;
+   declare labelStyle: any;
+   declare useGridlineTicks: boolean;
+   declare onCreateLabelFormatter: AxisConfig["onCreateLabelFormatter"];
+   declare onMeasured: AxisConfig["onMeasured"];
+
+   constructor(config?: AxisConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.labelAnchor == "auto") this.labelAnchor = this.vertical ? (this.secondary ? "start" : "end") : "middle";
+
+      if (this.labelDx == "auto") this.labelDx = 0;
+
+      if (this.labelDy == "auto") this.labelDy = this.vertical ? "0.4em" : this.secondary ? 0 : "0.8em";
+
+      if (isUndefined(this.minLabelDistance))
+         this.minLabelDistance = this.vertical ? this.minLabelDistanceVertical : this.minLabelDistanceHorizontal;
+
+      if (this.labelLineCountDyFactor == "auto")
+         this.labelLineCountDyFactor = this.vertical ? -this.labelLineHeight / 2 : this.secondary ? -1 : 0;
+
+      this.lineStyle = parseStyle(this.lineStyle);
+      this.tickStyle = parseStyle(this.tickStyle);
+      this.labelStyle = parseStyle(this.labelStyle);
+
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(
+         {
+            anchors: undefined,
+            hideLabels: undefined,
+            hideLine: undefined,
+            hideTicks: undefined,
+            labelRotation: undefined,
+            labelAnchor: undefined,
+            lineStyle: undefined,
+            lineClass: undefined,
+            labelStyle: undefined,
+            labelClass: undefined,
+            tickStyle: undefined,
+            tickClass: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: AxisInstance): void {
+      super.prepareData(context, instance);
+      if (this.onCreateLabelFormatter)
+         instance.labelFormatter = instance.invoke("onCreateLabelFormatter", context, instance);
+   }
+
+   report(context: RenderingContext, instance: AxisInstance): any {
+      return instance.calculator;
+   }
+
+   reportData(context: RenderingContext, instance: AxisInstance): void {}
+
+   renderTicksAndLabels(context: RenderingContext, instance: AxisInstance, valueFormatter: (v: any) => string, minLabelDistance: number): any {
+      if (this.hidden) return false;
+
+      var { data, calculator, labelFormatter } = instance;
+      var { bounds } = data;
+      let { CSS, baseClass } = this;
+      var size = calculator.findTickSize(minLabelDistance);
+
+      var labelClass = CSS.expand(CSS.element(baseClass, "label"), data.labelClass);
+      var offsetClass = CSS.element(baseClass, "label-offset");
+
+      var x1,
+         y1,
+         x2,
+         y2,
+         tickSize = this.tickSize,
+         tickOffset = this.tickOffset;
+
+      if (this.vertical) {
+         x1 = x2 = this.secondary ? bounds.r : bounds.l;
+         y1 = bounds.b;
+         y2 = bounds.t;
+      } else {
+         x1 = bounds.l;
+         x2 = bounds.r;
+         y1 = y2 = this.secondary ? bounds.t : bounds.b;
+      }
+
+      var res: any[] = [null, null];
+
+      if (!data.hideLine) {
+         res[0] = (
+            <line
+               key="line"
+               className={CSS.expand(CSS.element(baseClass, "line"), data.lineClass)}
+               style={data.lineStyle}
+               x1={x1}
+               y1={y1}
+               x2={x2}
+               y2={y2}
+            />
+         );
+      }
+
+      var t: string[] = [];
+      if (!!size && !data.hideLabels) {
+         var ticks = calculator.getTicks([size]);
+         ticks.forEach((serie: any[], si: number) => {
+            serie.forEach((v: any, i: number) => {
+               var s = calculator.map(v);
+
+               if (this.secondary) {
+                  x1 = this.vertical ? bounds.r + tickOffset : s;
+                  y1 = this.vertical ? s : bounds.t - tickOffset;
+                  x2 = this.vertical ? bounds.r + tickOffset + tickSize : s;
+                  y2 = this.vertical ? s : bounds.t - tickOffset - tickSize;
+               } else {
+                  x1 = this.vertical ? bounds.l - tickOffset : s;
+                  y1 = this.vertical ? s : bounds.b + tickOffset;
+                  x2 = this.vertical ? bounds.l - tickOffset - tickSize : s;
+                  y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
+               }
+
+               if (!this.useGridlineTicks) t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+
+               var x, y;
+               let labelOffset =
+                  this.alternateLabelOffset != null && i % 2 == 1 ? this.alternateLabelOffset : this.labelOffset;
+
+               if (this.secondary) {
+                  x = this.vertical ? bounds.r + labelOffset : s;
+                  y = this.vertical ? s : bounds.t - labelOffset;
+               } else {
+                  x = this.vertical ? bounds.l - labelOffset : s;
+                  y = this.vertical ? s : bounds.b + labelOffset;
+               }
+
+               var transform = data.labelRotation ? `rotate(${data.labelRotation} ${x} ${y})` : undefined;
+               var formattedValue = valueFormatter(v);
+               var lines = labelFormatter
+                  ? labelFormatter(formattedValue, v, { tickIndex: si, serieIndex: i })
+                  : this.wrapLines(formattedValue);
+               res.push(
+                  <text
+                     key={`label-${si}-${i}`}
+                     className={labelClass}
+                     style={data.labelStyle}
+                     x={x}
+                     y={y}
+                     textAnchor={data.labelAnchor}
+                     transform={transform}
+                  >
+                     {this.renderLabels(lines, x, this.labelDy, this.labelDx, offsetClass)}
+                  </text>,
+               );
+            });
+         });
+      }
+
+      if (!data.hideTicks) {
+         if (this.useGridlineTicks) {
+            let gridlines = calculator.mapGridlines();
+            gridlines.forEach((s: number, i: number) => {
+               if (this.secondary) {
+                  x1 = this.vertical ? bounds.r + tickOffset : s;
+                  y1 = this.vertical ? s : bounds.t - tickOffset;
+                  x2 = this.vertical ? bounds.r + tickOffset + tickSize : s;
+                  y2 = this.vertical ? s : bounds.t - tickOffset - tickSize;
+               } else {
+                  x1 = this.vertical ? bounds.l - tickOffset : s;
+                  y1 = this.vertical ? s : bounds.b + tickOffset;
+                  x2 = this.vertical ? bounds.l - tickOffset - tickSize : s;
+                  y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
+               }
+               t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+            });
+         }
+
+         res[1] = (
+            <path
+               key="ticks"
+               className={CSS.expand(CSS.element(baseClass, "ticks"), data.tickClass)}
+               style={data.tickStyle}
+               d={t.join(" ")}
+            />
+         );
+      }
+
+      return res;
+   }
+
+   wrapLines(str: any): { text: string; style?: any; className?: string }[] | null {
+      if (!this.labelWrap || typeof str != "string") return [{ text: str }];
+
+      let parts = str.split(" ");
+      if (parts.length == 0) return null;
+
+      let lines: { text: string }[] = [];
+      let line: string | null = null;
+      for (let i = 0; i < parts.length; i++) {
+         if (!line) line = parts[i];
+         else if (parts[i].length + line.length < this.labelMaxLineLength) line += " " + parts[i];
+         else {
+            lines.push({ text: line });
+            line = parts[i];
+         }
+      }
+      if (line) lines.push({ text: line });
+      return lines;
+   }
+
+   renderLabels(lines: { text: string; style?: any; className?: string; data?: Record<string, any> }[], x: number, dy: number | string, dx: number | string, offsetClass: string): React.ReactNode[] {
+      let offset = (this.labelLineCountDyFactor as number) * (lines.length - 1);
+      let result = [];
+
+      if (lines.length > 1 && dy != null) {
+         result.push(
+            <tspan key={-2} className={offsetClass} dy={dy}>
+               _
+            </tspan>,
+         );
+      }
+
+      lines.forEach((p, i) => {
+         let data =
+            p.data != null
+               ? Object.entries(p.data).reduce((acc, [key, val]) => {
+                    acc[`data-${key}`] = val;
+                    return acc;
+                 }, {} as Record<string, any>)
+               : null;
+         result.push(
+            <tspan
+               key={i}
+               dy={lines.length > 1 ? `${i == 0 ? offset : this.labelLineHeight}em` : dy}
+               x={x}
+               style={p.style}
+               className={p.className}
+               dx={dx}
+               {...data}
+            >
+               {p.text}
+            </tspan>,
+         );
+      });
+      return result;
+   }
+
+   prepare(context: RenderingContext, instance: AxisInstance): void {
+      super.prepare(context, instance);
+      var { bounds } = instance.data;
+      var [a, b] = !this.vertical ? [bounds.l, bounds.r] : [bounds.b, bounds.t];
+      instance.calculator.measure(a, b);
+      if (this.onMeasured) instance.invoke("onMeasured", instance.calculator.hash(), instance);
+      if (!instance.calculator.isSame(instance.cached.axis)) instance.markShouldUpdate(context);
+   }
+
+   cleanup(context: RenderingContext, instance: AxisInstance): void {
+      var { cached, calculator } = instance;
+      cached.axis = calculator.hash();
+   }
+}
+
+Axis.prototype.anchors = "0 1 1 0";
+Axis.prototype.styled = true;
+Axis.prototype.vertical = false;
+Axis.prototype.secondary = false;
+Axis.prototype.inverted = false;
+Axis.prototype.hidden = false;
+Axis.prototype.hideLabels = false;
+Axis.prototype.hideTicks = false;
+Axis.prototype.hideLine = false;
+
+Axis.prototype.tickSize = 3;
+Axis.prototype.tickOffset = 0;
+Axis.prototype.minTickDistance = 25;
+Axis.prototype.minLabelDistanceVertical = 40;
+Axis.prototype.minLabelDistanceHorizontal = 50;
+Axis.prototype.labelOffset = 10;
+Axis.prototype.alternateLabelOffset = null;
+Axis.prototype.labelRotation = 0;
+Axis.prototype.labelAnchor = "auto";
+Axis.prototype.labelDx = "auto";
+Axis.prototype.labelDy = "auto";
+Axis.prototype.labelWrap = false;
+Axis.prototype.labelLineCountDyFactor = "auto";
+Axis.prototype.labelLineHeight = 1;
+Axis.prototype.labelMaxLineLength = 10;
+
+Axis.namespace = "ui.svg.chart.axis";
diff --git a/packages/cx/src/charts/axis/CategoryAxis.d.ts b/packages/cx/src/charts/axis/CategoryAxis.d.ts
deleted file mode 100644
index 6bd261d7f..000000000
--- a/packages/cx/src/charts/axis/CategoryAxis.d.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as Cx from "../../core";
-import { AxisProps } from "./Axis";
-
-interface CategoryAxisProps extends AxisProps {
-   /** Uniform axes provide exact size and offset for all entries, while non-uniform axes adapt their size and offset to the number of entries under each category. */
-   uniform?: Cx.BooleanProp;
-
-   /** Names corresponding the given `values`. For example, `values` may be 0 .. 11 and `names` could be Jan .. Dec. */
-   names?: Cx.Prop<any[] | Cx.Config>;
-
-   /** Values used to initialize the axis. If an object is provided, keys are used for values and values are used for names. */
-   values?: Cx.Prop<any[] | Cx.Config>;
-
-   /** Sometimes, there is not enough data and each category takes a lot of space. `minSize` can be used to add fake entries up to the specified number, so everything looks normal. */
-   minSize?: Cx.NumberProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `categoryaxis`. */
-   baseClass?: string;
-
-   /** Output value that can be used to calculate chart dimensions based on discovered category values. */
-   categoryCount?: Binding | Cx.AccessorChain<number> | Cx.GetSet<number>;
-
-   /** Set to true to show ticks aligned with gridlines instead of labels. Default is false. */
-   useGridlineTicks?: boolean;
-
-   /** Additional label formatting. No format is set by default, values appear as is. Useful when values are not strings or string values that are too long.*/
-   format?: Cx.StringProp;
-}
-
-export class CategoryAxis extends Cx.Widget<CategoryAxisProps> {}
diff --git a/packages/cx/src/charts/axis/CategoryAxis.js b/packages/cx/src/charts/axis/CategoryAxis.js
deleted file mode 100644
index c0ed1d796..000000000
--- a/packages/cx/src/charts/axis/CategoryAxis.js
+++ /dev/null
@@ -1,241 +0,0 @@
-import { Axis } from "./Axis";
-import { VDOM } from "../../ui/Widget";
-import { isUndefined } from "../../util/isUndefined";
-import { isArray } from "../../util/isArray";
-import { Format } from "../../util/Format";
-
-export class CategoryAxis extends Axis {
-   declareData() {
-      super.declareData(...arguments, {
-         inverted: undefined,
-         uniform: undefined,
-         names: undefined,
-         values: undefined,
-         minSize: undefined,
-         categoryCount: undefined,
-         format: undefined,
-      });
-   }
-
-   initInstance(context, instance) {
-      instance.calculator = new CategoryScale();
-   }
-
-   explore(context, instance) {
-      super.explore(context, instance);
-      var { values, names, inverted, uniform, minSize } = instance.data;
-      instance.calculator.reset(inverted, uniform, values, names, minSize, this.minTickDistance, this.minLabelDistance);
-   }
-
-   reportData(context, instance) {
-      instance.set("categoryCount", instance.calculator.valueList.length);
-   }
-
-   render(context, instance, key) {
-      var { data, calculator } = instance;
-
-      if (!data.bounds.valid()) return null;
-
-      let labelGetter = (v) => calculator.names[v] ?? v;
-      let labelFormatter = labelGetter;
-      if (data.format) {
-         let formatter = Format.parse(data.format);
-         labelFormatter = (v) => formatter(labelGetter(v));
-      }
-      return (
-         <g key={key} className={data.classNames} style={data.style}>
-            {this.renderTicksAndLabels(context, instance, labelFormatter)}
-         </g>
-      );
-   }
-}
-
-CategoryAxis.prototype.baseClass = "categoryaxis";
-CategoryAxis.prototype.anchors = "0 1 1 0";
-CategoryAxis.prototype.vertical = false;
-CategoryAxis.prototype.inverted = false;
-CategoryAxis.prototype.uniform = false;
-CategoryAxis.prototype.labelOffset = 10;
-CategoryAxis.prototype.labelRotation = 0;
-CategoryAxis.prototype.labelAnchor = "auto";
-CategoryAxis.prototype.labelDx = "auto";
-CategoryAxis.prototype.labelDy = "auto";
-CategoryAxis.prototype.minSize = 1;
-CategoryAxis.prototype.minLabelDistanceHorizontal = 0;
-CategoryAxis.prototype.minLabelDistanceVertical = 0;
-CategoryAxis.prototype.minTickDistance = 0;
-
-Axis.alias("category", CategoryAxis);
-
-class CategoryScale {
-   reset(inverted, uniform, values, names, minSize, minTickDistance, minLabelDistance) {
-      this.padding = 0.5;
-      delete this.min;
-      delete this.max;
-      delete this.minValue;
-      delete this.maxValue;
-      this.minSize = minSize;
-      this.valuesMap = {};
-      this.valueList = [];
-      this.inverted = inverted;
-      this.uniform = uniform;
-      this.valueStacks = {};
-      this.names = {};
-      this.minTickDistance = minTickDistance;
-      this.minLabelDistance = minLabelDistance;
-
-      if (values) {
-         if (isArray(values)) values.forEach((v) => this.acknowledge(v));
-         else if (typeof values == "object")
-            for (var k in values) {
-               this.acknowledge(k);
-               this.names[k] = values[k];
-            }
-      }
-
-      if (names) {
-         if (isArray(names)) {
-            values = values || [];
-            names.forEach((name, index) => {
-               var value = values[index];
-               this.names[value != null ? value : index] = name;
-            });
-         } else this.names = names;
-      }
-   }
-
-   decodeValue(n) {
-      return n;
-   }
-
-   encodeValue(v) {
-      return v;
-   }
-
-   map(v, offset = 0) {
-      var index = this.valuesMap[v] || 0;
-
-      return this.origin + (index + offset - this.min + this.padding) * this.factor;
-   }
-
-   measure(a, b) {
-      this.a = a;
-      this.b = b;
-
-      if (this.min == null) this.min = this.minValue || 0;
-
-      if (this.max == null) this.max = !isNaN(this.maxValue) ? this.maxValue : 100;
-
-      var sign = this.inverted ? -1 : 1;
-
-      if (this.max - this.min + 1 < this.minSize) {
-         this.factor = (sign * (this.b - this.a)) / this.minSize;
-         this.origin = (this.b + this.a) * 0.5 - (this.factor * (this.max - this.min + 1)) / 2;
-      } else {
-         this.factor = (sign * (this.b - this.a)) / (this.max - this.min + 2 * this.padding);
-         this.origin = (this.a * (1 + sign)) / 2 + (this.b * (1 - sign)) / 2; //a || b
-      }
-
-      this.tickSizes = [];
-      let tickMultiplier = [1, 2, 5];
-      let absFactor = Math.abs(this.factor);
-      for (let base = 1; base < 10000 && this.tickSizes.length < 2; base *= 10) {
-         for (let m of tickMultiplier) {
-            if (base * m * absFactor >= this.minTickDistance && this.tickSizes.length == 0)
-               this.tickSizes.push(base * m);
-            if (base * m * absFactor >= this.minLabelDistance) {
-               this.tickSizes.push(base * m);
-               break;
-            }
-         }
-      }
-   }
-
-   hash() {
-      return {
-         origin: this.origin,
-         factor: this.factor,
-         min: this.min,
-         minSize: this.minSize,
-         padding: this.padding,
-         values: this.valueList.join(":"),
-         names: JSON.stringify(this.names),
-      };
-   }
-
-   isSame(x) {
-      var h = this.hash();
-      var same = x && !Object.keys(h).some((k) => x[k] !== h[k]);
-      this.shouldUpdate = !same;
-      return same;
-   }
-
-   acknowledge(value, width = 0, offset = 0) {
-      var index = this.valuesMap[value];
-      if (isUndefined(index)) {
-         index = this.valueList.length;
-         this.valueList.push(value);
-         this.valuesMap[value] = index;
-      }
-
-      if (this.minValue == null || index < this.minValue) {
-         this.minValue = index;
-         this.padding = Math.max(this.padding, Math.abs(offset - width / 2));
-      }
-
-      if (this.maxValue == null || index > this.maxValue) {
-         this.maxValue = index;
-         this.padding = Math.max(this.padding, Math.abs(offset + width / 2));
-      }
-   }
-
-   book(value, name) {
-      if (this.uniform) value = 0;
-
-      var stack = this.valueStacks[value];
-      if (!stack)
-         stack = this.valueStacks[value] = {
-            index: {},
-            count: 0,
-         };
-      if (!stack.index.hasOwnProperty(name)) stack.index[name] = stack.count++;
-   }
-
-   locate(value, name) {
-      if (this.uniform) value = 0;
-
-      var stack = this.valueStacks[value];
-      if (!stack) return [0, 1];
-
-      return [stack.index[name], stack.count];
-   }
-
-   trackValue(v, offset = 0, constrain = false) {
-      let index = Math.round((v - this.origin) / this.factor - offset + this.min - this.padding);
-      if (index < this.min) index = this.min;
-      if (index > this.max) index = this.max;
-      return this.valueList[index];
-   }
-
-   findTickSize(minPxDist) {
-      for (let tickSize of this.tickSizes) if (tickSize * Math.abs(this.factor) >= minPxDist) return tickSize;
-      return 1;
-   }
-
-   getTickSizes() {
-      return this.tickSizes;
-   }
-
-   getTicks(tickSizes) {
-      return tickSizes.map((size) => this.valueList.filter((_, i) => i % size == 0));
-   }
-
-   mapGridlines() {
-      let result = [];
-      if (this.tickSizes.length == 0) return result;
-      let step = this.tickSizes[0];
-      for (let index = this.min; index <= this.max + 1; index += step)
-         result.push(this.origin + (index - 0.5 - this.min + this.padding) * this.factor);
-      return result;
-   }
-}
diff --git a/packages/cx/src/charts/axis/CategoryAxis.scss b/packages/cx/src/charts/axis/CategoryAxis.scss
index ad6a7fdad..e1d14c788 100644
--- a/packages/cx/src/charts/axis/CategoryAxis.scss
+++ b/packages/cx/src/charts/axis/CategoryAxis.scss
@@ -1,11 +1,13 @@
+@use "sass:map";
+
 
 @mixin cx-categoryaxis(
    $name: 'categoryaxis',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       @include cxb-axis();
diff --git a/packages/cx/src/charts/axis/CategoryAxis.tsx b/packages/cx/src/charts/axis/CategoryAxis.tsx
new file mode 100644
index 000000000..09d5840cf
--- /dev/null
+++ b/packages/cx/src/charts/axis/CategoryAxis.tsx
@@ -0,0 +1,313 @@
+/** @jsxImportSource react */
+
+import { Axis, AxisConfig, AxisInstance } from "./Axis";
+import { VDOM } from "../../ui/Widget";
+import { isUndefined } from "../../util/isUndefined";
+import { isArray } from "../../util/isArray";
+import { Format } from "../../util/Format";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { BooleanProp, NumberProp, StringProp, Prop } from "../../ui/Prop";
+import { Binding } from "../../data/Binding";
+import { GetSet } from "../../ui/Prop";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+
+export interface CategoryAxisConfig extends AxisConfig {
+   /** Uniform axes provide exact size and offset for all entries. */
+   uniform?: BooleanProp;
+
+   /** Names corresponding the given `values`. */
+   names?: Prop<any[] | Record<string, any>>;
+
+   /** Values used to initialize the axis. */
+   values?: Prop<any[] | Record<string, any>>;
+
+   /** Min number of entries. */
+   minSize?: NumberProp;
+
+   /** Base CSS class. Defaults to `categoryaxis`. */
+   baseClass?: string;
+
+   /** Output value for category count. */
+   categoryCount?: Binding | AccessorChain<number> | GetSet<number>;
+
+   /** Show ticks aligned with gridlines. */
+   useGridlineTicks?: boolean;
+
+   /** Additional label formatting. */
+   format?: StringProp;
+}
+
+export class CategoryAxis extends Axis {
+   declare uniform: boolean;
+   declare minSize: number;
+
+   constructor(config: CategoryAxisConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(
+         {
+            inverted: undefined,
+            uniform: undefined,
+            names: undefined,
+            values: undefined,
+            minSize: undefined,
+            categoryCount: undefined,
+            format: undefined,
+         },
+         ...args,
+      );
+   }
+
+   initInstance(context: RenderingContext, instance: AxisInstance): void {
+      instance.calculator = new CategoryScale();
+   }
+
+   explore(context: RenderingContext, instance: AxisInstance): void {
+      super.explore(context, instance);
+      var { values, names, inverted, uniform, minSize } = instance.data;
+      instance.calculator.reset(inverted, uniform, values, names, minSize, this.minTickDistance, this.minLabelDistance);
+   }
+
+   reportData(context: RenderingContext, instance: AxisInstance): void {
+      instance.set("categoryCount", instance.calculator.valueList.length);
+   }
+
+   render(context: RenderingContext, instance: AxisInstance, key: string): React.ReactNode {
+      var { data, calculator } = instance;
+
+      if (!data.bounds.valid()) return null;
+
+      let labelGetter = (v: any) => calculator.names[v] ?? v;
+      let labelFormatter = labelGetter;
+      if (data.format) {
+         let formatter = Format.parse(data.format);
+         labelFormatter = (v: any) => formatter(labelGetter(v));
+      }
+      return (
+         <g key={key} className={data.classNames} style={data.style}>
+            {this.renderTicksAndLabels(context, instance, labelFormatter, this.minLabelDistance)}
+         </g>
+      );
+   }
+}
+
+CategoryAxis.prototype.baseClass = "categoryaxis";
+CategoryAxis.prototype.anchors = "0 1 1 0";
+CategoryAxis.prototype.vertical = false;
+CategoryAxis.prototype.inverted = false;
+CategoryAxis.prototype.uniform = false;
+CategoryAxis.prototype.labelOffset = 10;
+CategoryAxis.prototype.labelRotation = 0;
+CategoryAxis.prototype.labelAnchor = "auto";
+CategoryAxis.prototype.labelDx = "auto";
+CategoryAxis.prototype.labelDy = "auto";
+CategoryAxis.prototype.minSize = 1;
+CategoryAxis.prototype.minLabelDistanceHorizontal = 0;
+CategoryAxis.prototype.minLabelDistanceVertical = 0;
+CategoryAxis.prototype.minTickDistance = 0;
+
+Axis.alias("category", CategoryAxis);
+
+class CategoryScale {
+   padding: number;
+   min?: number;
+   max?: number;
+   minValue?: number;
+   maxValue?: number;
+   minSize: number;
+   valuesMap: Record<string, number>;
+   valueList: any[];
+   inverted: boolean;
+   uniform: boolean;
+   valueStacks: Record<string, { index: Record<string, number>; count: number }>;
+   names: Record<string, any>;
+   minTickDistance: number;
+   minLabelDistance: number;
+   origin: number;
+   factor: number;
+   tickSizes: number[];
+   a: number;
+   b: number;
+   shouldUpdate: boolean;
+
+   reset(
+      inverted: boolean,
+      uniform: boolean,
+      values: any,
+      names: any,
+      minSize: number,
+      minTickDistance: number,
+      minLabelDistance: number,
+   ): void {
+      this.padding = 0.5;
+      this.min = undefined;
+      this.max = undefined;
+      this.minValue = undefined;
+      this.maxValue = undefined;
+      this.minSize = minSize;
+      this.valuesMap = {};
+      this.valueList = [];
+      this.inverted = inverted;
+      this.uniform = uniform;
+      this.valueStacks = {};
+      this.names = {};
+      this.minTickDistance = minTickDistance;
+      this.minLabelDistance = minLabelDistance;
+
+      if (values) {
+         if (isArray(values)) values.forEach((v: any) => this.acknowledge(v));
+         else if (typeof values == "object")
+            for (var k in values) {
+               this.acknowledge(k);
+               this.names[k] = values[k];
+            }
+      }
+
+      if (names) {
+         if (isArray(names)) {
+            values = values || [];
+            names.forEach((name: any, index: number) => {
+               var value = values[index];
+               this.names[value != null ? value : index] = name;
+            });
+         } else this.names = names;
+      }
+   }
+
+   decodeValue(n: any): any {
+      return n;
+   }
+
+   encodeValue(v: any): any {
+      return v;
+   }
+
+   map(v: any, offset: number = 0): number {
+      var index = this.valuesMap[v] || 0;
+
+      return this.origin + (index + offset - this.min! + this.padding) * this.factor;
+   }
+
+   measure(a: number, b: number): void {
+      this.a = a;
+      this.b = b;
+
+      if (this.min == null) this.min = this.minValue || 0;
+
+      if (this.max == null) this.max = this.maxValue != null && !isNaN(this.maxValue) ? this.maxValue : 100;
+
+      var sign = this.inverted ? -1 : 1;
+
+      if (this.max! - this.min! + 1 < this.minSize) {
+         this.factor = (sign * (this.b - this.a)) / this.minSize;
+         this.origin = (this.b + this.a) * 0.5 - (this.factor * (this.max! - this.min! + 1)) / 2;
+      } else {
+         this.factor = (sign * (this.b - this.a)) / (this.max! - this.min! + 2 * this.padding);
+         this.origin = (this.a * (1 + sign)) / 2 + (this.b * (1 - sign)) / 2; //a || b
+      }
+
+      this.tickSizes = [];
+      let tickMultiplier = [1, 2, 5];
+      let absFactor = Math.abs(this.factor);
+      for (let base = 1; base < 10000 && this.tickSizes.length < 2; base *= 10) {
+         for (let m of tickMultiplier) {
+            if (base * m * absFactor >= this.minTickDistance && this.tickSizes.length == 0)
+               this.tickSizes.push(base * m);
+            if (base * m * absFactor >= this.minLabelDistance) {
+               this.tickSizes.push(base * m);
+               break;
+            }
+         }
+      }
+   }
+
+   hash(): Record<string, any> {
+      return {
+         origin: this.origin,
+         factor: this.factor,
+         min: this.min,
+         minSize: this.minSize,
+         padding: this.padding,
+         values: this.valueList.join(":"),
+         names: JSON.stringify(this.names),
+      };
+   }
+
+   isSame(x: any): boolean {
+      var h = this.hash();
+      var same = x && !Object.keys(h).some((k) => x[k] !== h[k]);
+      this.shouldUpdate = !same;
+      return same;
+   }
+
+   acknowledge(value: any, width: number = 0, offset: number = 0): void {
+      var index = this.valuesMap[value];
+      if (isUndefined(index)) {
+         index = this.valueList.length;
+         this.valueList.push(value);
+         this.valuesMap[value] = index;
+      }
+
+      if (this.minValue == null || index < this.minValue) {
+         this.minValue = index;
+         this.padding = Math.max(this.padding, Math.abs(offset - width / 2));
+      }
+
+      if (this.maxValue == null || index > this.maxValue) {
+         this.maxValue = index;
+         this.padding = Math.max(this.padding, Math.abs(offset + width / 2));
+      }
+   }
+
+   book(value: any, name: string): void {
+      if (this.uniform) value = 0;
+
+      var stack = this.valueStacks[value];
+      if (!stack)
+         stack = this.valueStacks[value] = {
+            index: {},
+            count: 0,
+         };
+      if (!stack.index.hasOwnProperty(name)) stack.index[name] = stack.count++;
+   }
+
+   locate(value: any, name: string): [number, number] {
+      if (this.uniform) value = 0;
+
+      var stack = this.valueStacks[value];
+      if (!stack) return [0, 1];
+
+      return [stack.index[name], stack.count];
+   }
+
+   trackValue(v: number, offset: number = 0, constrain: boolean = false): any {
+      let index = Math.round((v - this.origin) / this.factor - offset + this.min! - this.padding);
+      if (index < this.min!) index = this.min!;
+      if (index > this.max!) index = this.max!;
+      return this.valueList[index];
+   }
+
+   findTickSize(minPxDist: number): number {
+      for (let tickSize of this.tickSizes) if (tickSize * Math.abs(this.factor) >= minPxDist) return tickSize;
+      return 1;
+   }
+
+   getTickSizes(): number[] {
+      return this.tickSizes;
+   }
+
+   getTicks(tickSizes: number[]): any[][] {
+      return tickSizes.map((size) => this.valueList.filter((_, i) => i % size == 0));
+   }
+
+   mapGridlines(): number[] {
+      let result: number[] = [];
+      if (this.tickSizes.length == 0) return result;
+      let step = this.tickSizes[0];
+      for (let index = this.min!; index <= this.max! + 1; index += step)
+         result.push(this.origin + (index - 0.5 - this.min! + this.padding) * this.factor);
+      return result;
+   }
+}
diff --git a/packages/cx/src/charts/axis/NumericAxis.d.ts b/packages/cx/src/charts/axis/NumericAxis.d.ts
deleted file mode 100644
index b5ba9a690..000000000
--- a/packages/cx/src/charts/axis/NumericAxis.d.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as Cx from "../../core";
-import { AxisProps } from "./Axis";
-
-interface NumericAxisProps extends AxisProps {
-   /** Minimum value. */
-   min?: Cx.NumberProp;
-
-   /** Maximum value. */
-   max?: Cx.NumberProp;
-
-   /** Set to `true` to normalize the input range. */
-   normalized?: Cx.BooleanProp;
-
-   /** Number used to divide values before rendering axis labels. Default value is `1`. */
-   labelDivisor?: Cx.NumberProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `numericaxis`. */
-   baseClass?: string;
-
-   tickDivisions?: Array<number[]>;
-
-   /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
-   snapToTicks?: 0 | 1 | 2;
-
-   /** Value format. Default is `n`. */
-   format?: Cx.StringProp;
-
-   /** Size of a zone reserved for labels for both lower and upper end of the axis. */
-   deadZone?: Cx.NumberProp;
-
-   /** Size of a zone reserved for labels near the upper (higher) end of the axis.  */
-   upperDeadZone?: Cx.NumberProp;
-
-   /** Size of a zone reserved for labels near the lower end of the axis.   */
-   lowerDeadZone?: Cx.NumberProp;
-
-   /** Specifies minimum value increment between labels. Useful when formatting is not flexible enough, i.e. set to 1 for integer axes to avoid duplicate labels. */
-   minLabelTickSize?: number;
-}
-
-export class NumericAxis extends Cx.Widget<NumericAxisProps> {
-   static XY(): {
-      x: { type: NumericAxis };
-      y: { type: NumericAxis; vertical: true };
-   };
-}
diff --git a/packages/cx/src/charts/axis/NumericAxis.js b/packages/cx/src/charts/axis/NumericAxis.js
deleted file mode 100644
index 089f8d029..000000000
--- a/packages/cx/src/charts/axis/NumericAxis.js
+++ /dev/null
@@ -1,351 +0,0 @@
-import { Axis } from "./Axis";
-import { VDOM } from "../../ui/Widget";
-import { Stack } from "./Stack";
-import { Format } from "../../util/Format";
-import { isNumber } from "../../util/isNumber";
-
-export class NumericAxis extends Axis {
-   init() {
-      if (this.deadZone) {
-         this.lowerDeadZone = this.deadZone;
-         this.upperDeadZone = this.deadZone;
-      }
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         min: undefined,
-         max: undefined,
-         normalized: undefined,
-         inverted: undefined,
-         labelDivisor: undefined,
-         format: undefined,
-         lowerDeadZone: undefined,
-         upperDeadZone: undefined,
-      });
-   }
-
-   initInstance(context, instance) {
-      instance.calculator = new NumericScale();
-   }
-
-   explore(context, instance) {
-      super.explore(context, instance);
-      let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } = instance.data;
-      instance.calculator.reset(
-         min,
-         max,
-         this.snapToTicks,
-         this.tickDivisions,
-         this.minTickDistance,
-         this.minTickStep,
-         this.minLabelDistance,
-         this.minLabelTickSize,
-         normalized,
-         inverted,
-         lowerDeadZone,
-         upperDeadZone,
-      );
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-
-      if (!data.bounds.valid()) return null;
-
-      let baseFormatter = Format.parse(data.format);
-      let formatter = data.labelDivisor != 1 ? (v) => baseFormatter(v / data.labelDivisor) : baseFormatter;
-
-      return (
-         <g key={key} className={data.classNames} style={data.style}>
-            {this.renderTicksAndLabels(context, instance, formatter, this.minLabelDistance)}
-         </g>
-      );
-   }
-
-   static XY() {
-      return {
-         x: { type: NumericAxis },
-         y: { type: NumericAxis, vertical: true },
-      };
-   }
-}
-
-NumericAxis.prototype.baseClass = "numericaxis";
-NumericAxis.prototype.tickDivisions = [
-   [1, 2, 10, 20, 100],
-   [1, 5, 10, 20, 100],
-];
-
-NumericAxis.prototype.snapToTicks = 1;
-NumericAxis.prototype.normalized = false;
-NumericAxis.prototype.format = "n";
-NumericAxis.prototype.labelDivisor = 1;
-NumericAxis.prototype.minLabelTickSize = 0;
-NumericAxis.prototype.minTickStep = 0;
-
-Axis.alias("numeric", NumericAxis);
-
-class NumericScale {
-   reset(
-      min,
-      max,
-      snapToTicks,
-      tickDivisions,
-      minTickDistance,
-      minTickStep,
-      minLabelDistance,
-      minLabelTickSize,
-      normalized,
-      inverted,
-      lowerDeadZone,
-      upperDeadZone,
-   ) {
-      this.min = min;
-      this.max = max;
-      this.snapToTicks = snapToTicks;
-      this.tickDivisions = tickDivisions;
-      this.minLabelDistance = minLabelDistance;
-      this.minLabelTickSize = minLabelTickSize;
-      this.minTickDistance = minTickDistance;
-      this.minTickStep = minTickStep;
-      this.tickSizes = [];
-      this.normalized = normalized;
-      this.inverted = inverted;
-      delete this.minValue;
-      delete this.maxValue;
-      this.stacks = {};
-      this.lowerDeadZone = lowerDeadZone || 0;
-      this.upperDeadZone = upperDeadZone || 0;
-   }
-
-   map(v, offset = 0) {
-      return this.origin + (v + offset - this.scale.min + this.scale.minPadding) * this.scale.factor;
-   }
-
-   decodeValue(n) {
-      return n;
-   }
-
-   encodeValue(v) {
-      return v;
-   }
-
-   constrainValue(v) {
-      return Math.max(this.scale.min, Math.min(this.scale.max, v));
-   }
-
-   trackValue(v, offset = 0, constrain = false) {
-      let value = (v - this.origin) / this.scale.factor - offset + this.scale.min - this.scale.minPadding;
-      if (constrain) value = this.constrainValue(v);
-      return value;
-   }
-
-   hash() {
-      let r = {
-         origin: this.origin,
-         factor: this.scale.factor,
-         min: this.scale.min,
-         max: this.scale.max,
-         minPadding: this.scale.minPadding,
-         maxPadding: this.scale.maxPadding,
-      };
-      r.stacks = Object.keys(this.stacks)
-         .map((s) => this.stacks[s].info?.join(","))
-         .join(":");
-      return r;
-   }
-
-   isSame(x) {
-      let hash = this.hash();
-      let same = x && !Object.keys(hash).some((k) => x[k] !== hash[k]);
-      this.shouldUpdate = !same;
-      return same;
-   }
-
-   measure(a, b) {
-      this.a = a;
-      this.b = b;
-
-      if (this.minValue != null && this.min == null) this.min = this.minValue;
-      if (this.maxValue != null && this.max == null) this.max = this.maxValue;
-
-      for (let s in this.stacks) {
-         let info = this.stacks[s].measure(this.normalized);
-         let [min, max, invalid] = info;
-         if (this.min == null || min < this.min) this.min = min;
-         if (this.max == null || max > this.max) this.max = max;
-         this.stacks[s].info = info;
-      }
-
-      if (this.min == null) this.min = 0;
-      if (this.max == null) this.max = this.normalized ? 1 : 100;
-
-      if (this.min == this.max) {
-         if (this.min == 0) {
-            this.min = -1;
-            this.max = 1;
-         } else {
-            let delta = Math.abs(this.min) * 0.1;
-            this.min -= delta;
-            this.max += delta;
-         }
-      }
-
-      this.origin = this.inverted ? this.b : this.a;
-
-      this.scale = this.getScale();
-
-      this.calculateTicks();
-   }
-
-   getScale(tickSizes) {
-      let { min, max } = this;
-      let smin = min;
-      let smax = max;
-
-      let tickSize;
-      if (tickSizes && isNumber(this.snapToTicks) && tickSizes.length > 0) {
-         tickSize = tickSizes[Math.min(tickSizes.length - 1, this.snapToTicks)];
-         smin = Math.floor(smin / tickSize) * tickSize;
-         smax = Math.ceil(smax / tickSize) * tickSize;
-      } else {
-         if (this.minValue === min) smin = this.minValuePadded;
-         if (this.maxValue === max) smax = this.maxValuePadded;
-      }
-
-      let minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded) : 0;
-      let maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded - smax) : 0;
-
-      let sign = this.b > this.a ? 1 : -1;
-
-      let factor =
-         smin < smax
-            ? (Math.abs(this.b - this.a) - this.lowerDeadZone - this.upperDeadZone) /
-              (smax - smin + minPadding + maxPadding)
-            : 0;
-
-      if (factor < 0) factor = 0;
-
-      if (factor > 0 && (this.lowerDeadZone > 0 || this.upperDeadZone > 0)) {
-         while (factor * (min - smin) < this.lowerDeadZone) smin -= this.lowerDeadZone / factor;
-
-         while (factor * (smax - max) < this.upperDeadZone) smax += this.upperDeadZone / factor;
-
-         if (tickSize > 0 && isNumber(this.snapToTicks)) {
-            smin = Math.floor(smin / tickSize) * tickSize;
-            smax = Math.ceil(smax / tickSize) * tickSize;
-            minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded) : 0;
-            maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded - smax) : 0;
-         }
-
-         factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
-      }
-
-      return {
-         factor: sign * (this.inverted ? -factor : factor),
-         min: smin,
-         max: smax,
-         minPadding,
-         maxPadding,
-      };
-   }
-
-   acknowledge(value, width = 0, offset = 0) {
-      if (value == null) return;
-
-      if (this.minValue == null || value < this.minValue) {
-         this.minValue = value;
-         this.minValuePadded = value + offset - width / 2;
-      }
-      if (this.maxValue == null || value > this.maxValue) {
-         this.maxValue = value;
-         this.maxValuePadded = value + offset + width / 2;
-      }
-   }
-
-   getStack(name) {
-      let s = this.stacks[name];
-      if (!s) s = this.stacks[name] = new Stack();
-      return s;
-   }
-
-   stacknowledge(name, ordinal, value) {
-      return this.getStack(name).acknowledge(ordinal, value);
-   }
-
-   stack(name, ordinal, value) {
-      let v = this.getStack(name).stack(ordinal, value);
-      return v != null ? this.map(v) : null;
-   }
-
-   findTickSize(minPxDist) {
-      return this.tickSizes.find((a) => a >= this.minLabelTickSize && a * Math.abs(this.scale.factor) >= minPxDist);
-   }
-
-   getTickSizes() {
-      return this.tickSizes;
-   }
-
-   calculateTicks() {
-      let dist = this.minLabelDistance / Math.abs(this.scale.factor);
-      let unit = Math.pow(10, Math.floor(Math.log10(dist)));
-
-      let bestLabelDistance = Infinity;
-      let bestTicks = [];
-      let bestScale = this.scale;
-
-      for (let i = 0; i < this.tickDivisions.length; i++) {
-         let divs = this.tickDivisions[i];
-         let tickSizes = divs.filter((ts) => ts >= this.minTickStep).map((ts) => ts * unit);
-         let scale = this.getScale(tickSizes);
-         tickSizes.forEach((size, level) => {
-            let labelDistance = size * Math.abs(scale.factor);
-            if (labelDistance >= this.minLabelDistance && labelDistance < bestLabelDistance) {
-               bestScale = scale;
-               bestTicks = tickSizes;
-               bestLabelDistance = labelDistance;
-            }
-         });
-      }
-      this.scale = bestScale;
-      this.tickSizes = bestTicks.filter(
-         (ts) => ts >= this.minTickStep && ts * Math.abs(bestScale.factor) >= this.minTickDistance,
-      );
-      if (this.tickSizes.length > 0) {
-         let max = this.tickSizes[this.tickSizes.length - 1];
-         this.tickSizes.push(2 * max);
-         this.tickSizes.push(5 * max);
-         this.tickSizes.push(10 * max);
-         let min = this.tickSizes[0];
-         let dist = min * Math.abs(bestScale.factor) >= this.minTickDistance;
-         if (min / 10 >= this.minTickStep && dist / 10 >= this.minTickDistance) this.tickSizes.splice(0, 0, min / 10);
-         else if (min / 5 >= this.minTickStep && dist / 5 >= this.minTickDistance) this.tickSizes.splice(0, 0, min / 5);
-         else if (min / 2 >= this.minTickStep && dist / 2 >= this.minTickDistance) this.tickSizes.splice(0, 0, min / 2);
-      }
-   }
-
-   getTicks(tickSizes) {
-      return tickSizes.map((size) => {
-         let start = Math.ceil((this.scale.min - this.scale.minPadding) / size);
-         let end = Math.floor((this.scale.max + this.scale.maxPadding) / size);
-         let result = [];
-         for (let i = start; i <= end; i++) result.push(i * size + 0);
-         return result;
-      });
-   }
-
-   mapGridlines() {
-      let size = this.tickSizes[0];
-      let start = Math.ceil((this.scale.min - this.scale.minPadding) / size);
-      let end = Math.floor((this.scale.max + this.scale.maxPadding) / size);
-      let result = [];
-      for (let i = start; i <= end; i++) result.push(this.map(i * size));
-      return result;
-   }
-
-   book() {
-      Console.warn("NumericAxis does not support the autoSize flag for column and bar graphs.");
-   }
-}
diff --git a/packages/cx/src/charts/axis/NumericAxis.scss b/packages/cx/src/charts/axis/NumericAxis.scss
index 30760c180..9dc0d19cc 100644
--- a/packages/cx/src/charts/axis/NumericAxis.scss
+++ b/packages/cx/src/charts/axis/NumericAxis.scss
@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-numericaxis(
    $name: 'numericaxis',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       @include cxb-axis();
diff --git a/packages/cx/src/charts/axis/NumericAxis.tsx b/packages/cx/src/charts/axis/NumericAxis.tsx
new file mode 100644
index 000000000..bdc541c31
--- /dev/null
+++ b/packages/cx/src/charts/axis/NumericAxis.tsx
@@ -0,0 +1,437 @@
+/** @jsxImportSource react */
+
+import { Axis, AxisConfig, AxisInstance } from "./Axis";
+import { VDOM } from "../../ui/Widget";
+import { Stack } from "./Stack";
+import { Format } from "../../util/Format";
+import { isNumber } from "../../util/isNumber";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp } from "../../ui/Prop";
+import { Console } from "../../util/Console";
+
+export interface NumericAxisConfig extends AxisConfig {
+   /** Minimum value. */
+   min?: NumberProp;
+
+   /** Maximum value. */
+   max?: NumberProp;
+
+   /** Set to `true` to normalize the input range. */
+   normalized?: BooleanProp;
+
+   /** Number used to divide values before rendering axis labels. Default value is `1`. */
+   labelDivisor?: NumberProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `numericaxis`. */
+   baseClass?: string;
+
+   tickDivisions?: Array<number[]>;
+
+   /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
+   snapToTicks?: 0 | 1 | 2;
+
+   /** Value format. Default is `n`. */
+   format?: StringProp;
+
+   /** Size of a zone reserved for labels for both lower and upper end of the axis. */
+   deadZone?: NumberProp;
+
+   /** Size of a zone reserved for labels near the upper (higher) end of the axis.  */
+   upperDeadZone?: NumberProp;
+
+   /** Size of a zone reserved for labels near the lower end of the axis.   */
+   lowerDeadZone?: NumberProp;
+
+   /** Specifies minimum value increment between labels. Useful when formatting is not flexible enough, i.e. set to 1 for integer axes to avoid duplicate labels. */
+   minLabelTickSize?: number;
+
+   minTickStep?: number;
+}
+
+export class NumericAxis extends Axis {
+   declare deadZone: number;
+   declare lowerDeadZone: number;
+   declare upperDeadZone: number;
+   declare snapToTicks: number;
+   declare tickDivisions: number[][];
+   declare minLabelTickSize: number;
+   declare minTickStep: number;
+   declare format: string;
+   declare labelDivisor: number;
+   declare normalized: boolean;
+
+   constructor(config: NumericAxisConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.deadZone) {
+         this.lowerDeadZone = this.deadZone;
+         this.upperDeadZone = this.deadZone;
+      }
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(
+         {
+            min: undefined,
+            max: undefined,
+            normalized: undefined,
+            inverted: undefined,
+            labelDivisor: undefined,
+            format: undefined,
+            lowerDeadZone: undefined,
+            upperDeadZone: undefined,
+         },
+         ...args,
+      );
+   }
+
+   initInstance(context: RenderingContext, instance: AxisInstance): void {
+      instance.calculator = new NumericScale();
+   }
+
+   explore(context: RenderingContext, instance: AxisInstance): void {
+      super.explore(context, instance);
+      let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } = instance.data;
+      instance.calculator.reset(
+         min,
+         max,
+         this.snapToTicks,
+         this.tickDivisions,
+         this.minTickDistance,
+         this.minTickStep,
+         this.minLabelDistance,
+         this.minLabelTickSize,
+         normalized,
+         inverted,
+         lowerDeadZone,
+         upperDeadZone,
+      );
+   }
+
+   render(context: RenderingContext, instance: AxisInstance, key: string): React.ReactNode {
+      let { data } = instance;
+
+      if (!data.bounds.valid()) return null;
+
+      let baseFormatter = Format.parse(data.format);
+      let formatter = data.labelDivisor != 1 ? (v: number) => baseFormatter(v / data.labelDivisor) : baseFormatter;
+
+      return (
+         <g key={key} className={data.classNames} style={data.style}>
+            {this.renderTicksAndLabels(context, instance, formatter, this.minLabelDistance)}
+         </g>
+      );
+   }
+
+   static XY() {
+      return {
+         x: { type: NumericAxis },
+         y: { type: NumericAxis, vertical: true },
+      };
+   }
+}
+
+NumericAxis.prototype.baseClass = "numericaxis";
+NumericAxis.prototype.tickDivisions = [
+   [1, 2, 10, 20, 100],
+   [1, 5, 10, 20, 100],
+];
+
+NumericAxis.prototype.snapToTicks = 1;
+NumericAxis.prototype.normalized = false;
+NumericAxis.prototype.format = "n";
+NumericAxis.prototype.labelDivisor = 1;
+NumericAxis.prototype.minLabelTickSize = 0;
+NumericAxis.prototype.minTickStep = 0;
+
+Axis.alias("numeric", NumericAxis);
+
+class NumericScale {
+   min: number;
+   max: number;
+   snapToTicks: number;
+   tickDivisions: number[][];
+   minLabelDistance: number;
+   minLabelTickSize: number;
+   minTickDistance: number;
+   minTickStep: number;
+   tickSizes: number[];
+   normalized: boolean;
+   inverted: boolean;
+   minValue?: number;
+   maxValue?: number;
+   minValuePadded: number;
+   maxValuePadded: number;
+   stacks: Record<string, Stack>;
+   lowerDeadZone: number;
+   upperDeadZone: number;
+   origin: number;
+   scale: { factor: number; min: number; max: number; minPadding: number; maxPadding: number };
+   a: number;
+   b: number;
+   shouldUpdate: boolean;
+
+   reset(
+      min: number,
+      max: number,
+      snapToTicks: number,
+      tickDivisions: number[][],
+      minTickDistance: number,
+      minTickStep: number,
+      minLabelDistance: number,
+      minLabelTickSize: number,
+      normalized: boolean,
+      inverted: boolean,
+      lowerDeadZone: number,
+      upperDeadZone: number,
+   ): void {
+      this.min = min;
+      this.max = max;
+      this.snapToTicks = snapToTicks;
+      this.tickDivisions = tickDivisions;
+      this.minLabelDistance = minLabelDistance;
+      this.minLabelTickSize = minLabelTickSize;
+      this.minTickDistance = minTickDistance;
+      this.minTickStep = minTickStep;
+      this.tickSizes = [];
+      this.normalized = normalized;
+      this.inverted = inverted;
+      delete this.minValue;
+      delete this.maxValue;
+      this.stacks = {};
+      this.lowerDeadZone = lowerDeadZone || 0;
+      this.upperDeadZone = upperDeadZone || 0;
+   }
+
+   map(v: number, offset: number = 0): number {
+      return this.origin + (v + offset - this.scale.min + this.scale.minPadding) * this.scale.factor;
+   }
+
+   decodeValue(n: number): number {
+      return n;
+   }
+
+   encodeValue(v: number): number {
+      return v;
+   }
+
+   constrainValue(v: number): number {
+      return Math.max(this.scale.min, Math.min(this.scale.max, v));
+   }
+
+   trackValue(v: number, offset: number = 0, constrain: boolean = false): number {
+      let value = (v - this.origin) / this.scale.factor - offset + this.scale.min - this.scale.minPadding;
+      if (constrain) value = this.constrainValue(v);
+      return value;
+   }
+
+   hash(): any {
+      let r: any = {
+         origin: this.origin,
+         factor: this.scale.factor,
+         min: this.scale.min,
+         max: this.scale.max,
+         minPadding: this.scale.minPadding,
+         maxPadding: this.scale.maxPadding,
+      };
+      r.stacks = Object.keys(this.stacks)
+         .map((s) => this.stacks[s].info?.join(","))
+         .join(":");
+      return r;
+   }
+
+   isSame(x: any): boolean {
+      let hash = this.hash();
+      let same = x && !Object.keys(hash).some((k) => x[k] !== hash[k]);
+      this.shouldUpdate = !same;
+      return same;
+   }
+
+   measure(a: number, b: number): void {
+      this.a = a;
+      this.b = b;
+
+      if (this.minValue != null && this.min == null) this.min = this.minValue;
+      if (this.maxValue != null && this.max == null) this.max = this.maxValue;
+
+      for (let s in this.stacks) {
+         let info = this.stacks[s].measure(this.normalized);
+         let [min, max] = info;
+         if (this.min == null || min < this.min) this.min = min;
+         if (this.max == null || max > this.max) this.max = max;
+         this.stacks[s].info = info;
+      }
+
+      if (this.min == null) this.min = 0;
+      if (this.max == null) this.max = this.normalized ? 1 : 100;
+
+      if (this.min == this.max) {
+         if (this.min == 0) {
+            this.min = -1;
+            this.max = 1;
+         } else {
+            let delta = Math.abs(this.min) * 0.1;
+            this.min -= delta;
+            this.max += delta;
+         }
+      }
+
+      this.origin = this.inverted ? this.b : this.a;
+
+      this.scale = this.getScale();
+
+      this.calculateTicks();
+   }
+
+   getScale(tickSizes?: number[]): { factor: number; min: number; max: number; minPadding: number; maxPadding: number } {
+      let { min, max } = this;
+      let smin = min;
+      let smax = max;
+
+      let tickSize;
+      if (tickSizes && isNumber(this.snapToTicks) && tickSizes.length > 0) {
+         tickSize = tickSizes[Math.min(tickSizes.length - 1, this.snapToTicks)];
+         smin = Math.floor(smin / tickSize) * tickSize;
+         smax = Math.ceil(smax / tickSize) * tickSize;
+      } else {
+         if (this.minValue === min) smin = this.minValuePadded;
+         if (this.maxValue === max) smax = this.maxValuePadded;
+      }
+
+      let minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded) : 0;
+      let maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded - smax) : 0;
+
+      let sign = this.b > this.a ? 1 : -1;
+
+      let factor =
+         smin < smax
+            ? (Math.abs(this.b - this.a) - this.lowerDeadZone - this.upperDeadZone) /
+              (smax - smin + minPadding + maxPadding)
+            : 0;
+
+      if (factor < 0) factor = 0;
+
+      if (factor > 0 && (this.lowerDeadZone > 0 || this.upperDeadZone > 0)) {
+         while (factor * (min - smin) < this.lowerDeadZone) smin -= this.lowerDeadZone / factor;
+
+         while (factor * (smax - max) < this.upperDeadZone) smax += this.upperDeadZone / factor;
+
+         if (tickSize! > 0 && isNumber(this.snapToTicks)) {
+            smin = Math.floor(smin / tickSize!) * tickSize!;
+            smax = Math.ceil(smax / tickSize!) * tickSize!;
+            minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded) : 0;
+            maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded - smax) : 0;
+         }
+
+         factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
+      }
+
+      return {
+         factor: sign * (this.inverted ? -factor : factor),
+         min: smin,
+         max: smax,
+         minPadding,
+         maxPadding,
+      };
+   }
+
+   acknowledge(value: number, width: number = 0, offset: number = 0): void {
+      if (value == null) return;
+
+      if (this.minValue == null || value < this.minValue) {
+         this.minValue = value;
+         this.minValuePadded = value + offset - width / 2;
+      }
+      if (this.maxValue == null || value > this.maxValue) {
+         this.maxValue = value;
+         this.maxValuePadded = value + offset + width / 2;
+      }
+   }
+
+   getStack(name: string): Stack {
+      let s = this.stacks[name];
+      if (!s) s = this.stacks[name] = new Stack();
+      return s;
+   }
+
+   stacknowledge(name: string, ordinal: any, value: any): any {
+      return this.getStack(name).acknowledge(ordinal, value);
+   }
+
+   stack(name: string, ordinal: any, value: any): number | null {
+      let v = this.getStack(name).stack(ordinal, value);
+      return v != null ? this.map(v) : null;
+   }
+
+   findTickSize(minPxDist: number): number | undefined {
+      return this.tickSizes.find((a) => a >= this.minLabelTickSize && a * Math.abs(this.scale.factor) >= minPxDist);
+   }
+
+   getTickSizes(): number[] {
+      return this.tickSizes;
+   }
+
+   calculateTicks(): void {
+      let dist = this.minLabelDistance / Math.abs(this.scale.factor);
+      let unit = Math.pow(10, Math.floor(Math.log10(dist)));
+
+      let bestLabelDistance = Infinity;
+      let bestTicks: number[] = [];
+      let bestScale = this.scale;
+
+      for (let i = 0; i < this.tickDivisions.length; i++) {
+         let divs = this.tickDivisions[i];
+         let tickSizes = divs.filter((ts) => ts >= this.minTickStep).map((ts) => ts * unit);
+         let scale = this.getScale(tickSizes);
+         tickSizes.forEach((size, level) => {
+            let labelDistance = size * Math.abs(scale.factor);
+            if (labelDistance >= this.minLabelDistance && labelDistance < bestLabelDistance) {
+               bestScale = scale;
+               bestTicks = tickSizes;
+               bestLabelDistance = labelDistance;
+            }
+         });
+      }
+      this.scale = bestScale;
+      this.tickSizes = bestTicks.filter(
+         (ts) => ts >= this.minTickStep && ts * Math.abs(bestScale.factor) >= this.minTickDistance,
+      );
+      if (this.tickSizes.length > 0) {
+         let max = this.tickSizes[this.tickSizes.length - 1];
+         this.tickSizes.push(2 * max);
+         this.tickSizes.push(5 * max);
+         this.tickSizes.push(10 * max);
+         let min = this.tickSizes[0];
+         let minDist = min * Math.abs(bestScale.factor);
+         if (min / 10 >= this.minTickStep && minDist / 10 >= this.minTickDistance) this.tickSizes.splice(0, 0, min / 10);
+         else if (min / 5 >= this.minTickStep && minDist / 5 >= this.minTickDistance) this.tickSizes.splice(0, 0, min / 5);
+         else if (min / 2 >= this.minTickStep && minDist / 2 >= this.minTickDistance) this.tickSizes.splice(0, 0, min / 2);
+      }
+   }
+
+   getTicks(tickSizes: number[]): number[][] {
+      return tickSizes.map((size) => {
+         let start = Math.ceil((this.scale.min - this.scale.minPadding) / size);
+         let end = Math.floor((this.scale.max + this.scale.maxPadding) / size);
+         let result: number[] = [];
+         for (let i = start; i <= end; i++) result.push(i * size + 0);
+         return result;
+      });
+   }
+
+   mapGridlines(): number[] {
+      let size = this.tickSizes[0];
+      let start = Math.ceil((this.scale.min - this.scale.minPadding) / size);
+      let end = Math.floor((this.scale.max + this.scale.maxPadding) / size);
+      let result: number[] = [];
+      for (let i = start; i <= end; i++) result.push(this.map(i * size));
+      return result;
+   }
+
+   book(): void {
+      Console.warn("NumericAxis does not support the autoSize flag for column and bar graphs.");
+   }
+}
diff --git a/packages/cx/src/charts/axis/Stack.d.ts b/packages/cx/src/charts/axis/Stack.d.ts
deleted file mode 100644
index 936c89ad4..000000000
--- a/packages/cx/src/charts/axis/Stack.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export class Stack {
-
-   reset() : void;
-
-   acknowledge(ordinal: string, value?: number) : void;
-   
-   measure(normalized: boolean) : [number, number];
-
-   stack(ordinal: string, value?: number) : number | null;
-
-}
\ No newline at end of file
diff --git a/packages/cx/src/charts/axis/Stack.js b/packages/cx/src/charts/axis/Stack.js
deleted file mode 100644
index e730893ec..000000000
--- a/packages/cx/src/charts/axis/Stack.js
+++ /dev/null
@@ -1,55 +0,0 @@
-export class Stack {
-   constructor() {
-      this.reset();
-   }
-
-   reset() {
-      this.stacks = {};
-      this.values = {};
-      this.normalized = false;
-      this.invalid = {};
-   }
-
-   acknowledge(ordinal, value) {
-      if (value != null) {
-         let s = this.stacks[ordinal];
-         if (!s) this.stacks[ordinal] = s = { total: 0, min: 0, max: 0 };
-         s.total += value;
-         if (s.total < s.min) s.min = s.total;
-         if (s.total > s.max) s.max = s.total;
-      } else {
-         this.invalid[ordinal] = true;
-      }
-   }
-
-   measure(normalized) {
-      if (normalized) {
-         this.normalized = true;
-         return [0, 1];
-      }
-
-      let max = 0,
-         min = 0;
-      for (let key in this.stacks) {
-         if (this.stacks[key].max > max) max = this.stacks[key].max;
-         if (this.stacks[key].min < min) min = this.stacks[key].min;
-      }
-      return [min, max];
-   }
-
-   stack(ordinal, value) {
-      if (value == null || this.invalid[ordinal]) return null;
-
-      let base = this.values[ordinal] || 0;
-
-      let result = (this.values[ordinal] = base + value);
-
-      if (!this.normalized) return result;
-
-      let total = this.stacks[ordinal].total;
-
-      if (total > 0) return result / total;
-
-      return null;
-   }
-}
diff --git a/packages/cx/src/charts/axis/Stack.ts b/packages/cx/src/charts/axis/Stack.ts
new file mode 100644
index 000000000..6eac2b4d4
--- /dev/null
+++ b/packages/cx/src/charts/axis/Stack.ts
@@ -0,0 +1,61 @@
+export class Stack {
+   stacks: Record<string, { total: number; min: number; max: number }>;
+   values: Record<string, number>;
+   normalized: boolean;
+   invalid: Record<string, boolean>;
+   info?: any[];
+
+   constructor() {
+      this.reset();
+   }
+
+   reset(): void {
+      this.stacks = {};
+      this.values = {};
+      this.normalized = false;
+      this.invalid = {};
+   }
+
+   acknowledge(ordinal: string, value: number | null): void {
+      if (value != null) {
+         let s = this.stacks[ordinal];
+         if (!s) this.stacks[ordinal] = s = { total: 0, min: 0, max: 0 };
+         s.total += value;
+         if (s.total < s.min) s.min = s.total;
+         if (s.total > s.max) s.max = s.total;
+      } else {
+         this.invalid[ordinal] = true;
+      }
+   }
+
+   measure(normalized: boolean): [number, number] {
+      if (normalized) {
+         this.normalized = true;
+         return [0, 1];
+      }
+
+      let max = 0,
+         min = 0;
+      for (let key in this.stacks) {
+         if (this.stacks[key].max > max) max = this.stacks[key].max;
+         if (this.stacks[key].min < min) min = this.stacks[key].min;
+      }
+      return [min, max];
+   }
+
+   stack(ordinal: string, value: number | null): number | null {
+      if (value == null || this.invalid[ordinal]) return null;
+
+      let base = this.values[ordinal] || 0;
+
+      let result = (this.values[ordinal] = base + value);
+
+      if (!this.normalized) return result;
+
+      let total = this.stacks[ordinal].total;
+
+      if (total > 0) return result / total;
+
+      return null;
+   }
+}
diff --git a/packages/cx/src/charts/axis/TimeAxis.d.ts b/packages/cx/src/charts/axis/TimeAxis.d.ts
deleted file mode 100644
index cf4566449..000000000
--- a/packages/cx/src/charts/axis/TimeAxis.d.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as Cx from "../../core";
-import { AxisProps } from "./Axis";
-
-interface TimeAxisProps extends AxisProps {
-   /** Minimum value. */
-   min?: Cx.NumberProp;
-
-   /** Maximum value. */
-   max?: Cx.NumberProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `timeaxis`. */
-   baseClass?: string;
-
-   /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
-   snapToTicks?: 0 | 1 | 2 | false;
-
-   tickDivisions?: { [prop: string]: Array<number[]> };
-   minLabelDistance?: number;
-   minTickUnit?: string;
-
-   /** Set to true to apply precise label distances from minLabelDistanceFormatOverride based on the resolved label format. */
-   useLabelDistanceFormatOverrides?: boolean;
-
-   /** Mapping of formats to label distances, i.e. { "datetime;YYYYMM": 80 } */
-   minLabelDistanceFormatOverride?: Record<string, number>;
-
-   /** Axis labels format string override. */
-   format?: string;
-}
-
-export class TimeAxis extends Cx.Widget<TimeAxisProps> {}
diff --git a/packages/cx/src/charts/axis/TimeAxis.js b/packages/cx/src/charts/axis/TimeAxis.js
deleted file mode 100644
index ee7927aa8..000000000
--- a/packages/cx/src/charts/axis/TimeAxis.js
+++ /dev/null
@@ -1,611 +0,0 @@
-import { Axis } from "./Axis";
-import { VDOM } from "../../ui/Widget";
-import { Stack } from "./Stack";
-import { Format } from "../../ui/Format";
-import { isNumber } from "../../util/isNumber";
-import { zeroTime } from "../../util/date/zeroTime";
-import { Console } from "../../util/Console";
-import { parseDateInvariant } from "../../util";
-
-Format.registerFactory("yearOrMonth", (format) => {
-   let year = Format.parse("datetime;yyyy");
-   let month = Format.parse("datetime;MMM");
-   return function (date) {
-      let d = parseDateInvariant(date);
-      if (d.getMonth() == 0) return year(d);
-      else return month(d);
-   };
-});
-
-Format.registerFactory("monthOrDay", (format) => {
-   let month = Format.parse("datetime;MMM");
-   let day = Format.parse("datetime;dd");
-   return function (date) {
-      let d = parseDateInvariant(date);
-      if (d.getDate() == 1) return month(d);
-      else return day(d);
-   };
-});
-
-export class TimeAxis extends Axis {
-   init() {
-      if (this.labelAnchor == "auto") this.labelAnchor = this.vertical ? (this.secondary ? "start" : "end") : "start";
-
-      if (this.labelDx == "auto") this.labelDx = this.vertical ? 0 : "5px";
-
-      if (this.deadZone) {
-         this.lowerDeadZone = this.deadZone;
-         this.upperDeadZone = this.deadZone;
-      }
-
-      this.minLabelDistanceFormatOverride = {
-         ...this.minLabelDistanceFormatOverrideDefaults,
-         ...this.minLabelDistanceFormatOverride,
-      };
-
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         anchors: undefined,
-         min: undefined,
-         max: undefined,
-         inverted: undefined,
-         lowerDeadZone: undefined,
-         upperDeadZone: undefined,
-      });
-   }
-
-   initInstance(context, instance) {
-      instance.calculator = new TimeScale();
-   }
-
-   explore(context, instance) {
-      super.explore(context, instance);
-      let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } = instance.data;
-      instance.calculator.reset(
-         min,
-         max,
-         this.snapToTicks,
-         this.tickDivisions,
-         Math.max(1, this.minTickDistance),
-         Math.max(1, this.minLabelDistance),
-         normalized,
-         inverted,
-         this.minTickUnit,
-         lowerDeadZone,
-         upperDeadZone,
-         this.decode,
-         this.useLabelDistanceFormatOverrides ? this.minLabelDistanceFormatOverride : {},
-         this.format,
-      );
-   }
-
-   render(context, instance, key) {
-      let { data, cached, calculator } = instance;
-
-      cached.axis = calculator.hash();
-
-      if (!data.bounds.valid()) return null;
-
-      let format = calculator.resolvedFormat;
-      let minLabelDistance = calculator.resolvedMinLabelDistance;
-      let formatter = Format.parse(format);
-
-      return (
-         <g key={key} className={data.classNames} style={data.style}>
-            {this.renderTicksAndLabels(context, instance, formatter, minLabelDistance)}
-         </g>
-      );
-   }
-}
-
-Axis.alias("time", TimeAxis);
-
-TimeAxis.prototype.baseClass = "timeaxis";
-TimeAxis.prototype.tickDivisions = {
-   second: [[1, 5, 15, 30]],
-   minute: [[1, 5, 15, 30]],
-   hour: [
-      [1, 2, 4, 8],
-      [1, 3, 6, 12],
-   ],
-   day: [[1]],
-   week: [[1]],
-   month: [[1, 3, 6]],
-   year: [
-      [1, 2, 10],
-      [1, 5, 10],
-      [5, 10, 50],
-      [10, 50, 100],
-   ],
-};
-
-const TimeFormats = {
-   fullDateAndTime: "datetime;yyyy MMM dd HH mm ss n",
-   shortMonthDate: "datetime;yyyy MMM dd",
-};
-
-TimeAxis.prototype.snapToTicks = 0;
-TimeAxis.prototype.tickSize = 15;
-TimeAxis.prototype.minLabelDistance = 60;
-TimeAxis.prototype.minTickDistance = 60;
-TimeAxis.prototype.minTickUnit = "second";
-TimeAxis.prototype.useLabelDistanceFormatOverrides = false;
-TimeAxis.prototype.minLabelDistanceFormatOverrideDefaults = {
-   [TimeFormats.fullDateAndTime]: 150,
-   [TimeFormats.shortMonthDate]: 90,
-};
-
-function monthNumber(date) {
-   return date.getFullYear() * 12 + date.getMonth() + (date.getDate() - 1) / 31;
-}
-
-function yearNumber(date) {
-   return monthNumber(date) / 12;
-}
-
-const milliSeconds = {
-   second: 1000,
-   minute: 60 * 1000,
-   hour: 3600 * 1000,
-   day: 3600 * 24 * 1000,
-   week: 3600 * 24 * 7 * 1000,
-   month: 3600 * 24 * 30 * 1000,
-   year: 3600 * 24 * 365 * 1000,
-};
-
-class TimeScale {
-   reset(
-      min,
-      max,
-      snapToTicks,
-      tickDivisions,
-      minTickDistance,
-      minLabelDistance,
-      normalized,
-      inverted,
-      minTickUnit,
-      lowerDeadZone,
-      upperDeadZone,
-      decode,
-      minLabelDistanceFormatOverride,
-      format,
-   ) {
-      this.dateCache = {};
-      this.min = min != null ? this.decodeValue(min) : null;
-      this.max = max != null ? this.decodeValue(max) : null;
-      this.snapToTicks = snapToTicks;
-      this.tickDivisions = tickDivisions;
-      this.minLabelDistance = minLabelDistance;
-      this.minTickDistance = minTickDistance;
-      this.tickSizes = [];
-      this.normalized = normalized;
-      this.minTickUnit = minTickUnit;
-      this.inverted = inverted;
-      this.lowerDeadZone = lowerDeadZone || 0;
-      this.upperDeadZone = upperDeadZone || 0;
-      delete this.minValue;
-      delete this.maxValue;
-      delete this.minValuePadded;
-      delete this.maxValuePadded;
-      this.stacks = {};
-      this.decode = decode;
-      this.minLabelDistanceFormatOverride = minLabelDistanceFormatOverride;
-      this.format = format;
-   }
-
-   decodeValue(date) {
-      if (date instanceof Date) return date.getTime();
-
-      switch (typeof date) {
-         case "string":
-            let v = this.dateCache[date];
-            if (!v) {
-               if (this.decode) date = this.decode(date);
-               v = this.dateCache[date] = parseDateInvariant(date).getTime();
-            }
-            return v;
-
-         case "number":
-            return parseDateInvariant(date).getTime();
-      }
-   }
-
-   encodeValue(v) {
-      return new Date(v).toISOString();
-   }
-
-   getFormat(unit, scale) {
-      switch (unit) {
-         case "year":
-            return "datetime;yyyy";
-
-         case "month":
-            if (new Date(scale.min).getFullYear() != new Date(scale.max).getFullYear()) return "yearOrMonth";
-            return "datetime;yyyy MMM";
-
-         case "week":
-            return "datetime;MMMdd";
-
-         case "day":
-            if (
-               new Date(scale.min).getFullYear() != new Date(scale.max).getFullYear() ||
-               new Date(scale.min).getMonth() != new Date(scale.max).getMonth()
-            )
-               return "monthOrDay";
-
-            return TimeFormats.shortMonthDate;
-
-         case "hour":
-            return "datetime;HH mm n";
-
-         case "minute":
-            return "datetime;HH mm n";
-
-         case "second":
-            return "datetime;mm ss";
-
-         default:
-            return TimeFormats.fullDateAndTime;
-      }
-   }
-
-   map(v, offset = 0) {
-      return this.origin + (this.decodeValue(v) + offset - this.scale.min + this.scale.minPadding) * this.scale.factor;
-   }
-
-   constrainValue(v) {
-      return Math.max(this.scale.min, Math.min(this.scale.max, v));
-   }
-
-   trackValue(v, offset = 0, constrain = false) {
-      let value = (v - this.origin) / this.scale.factor - offset + this.scale.min - this.scale.minPadding;
-      if (constrain) value = this.constrainValue(value);
-      return value;
-   }
-
-   hash() {
-      let r = {
-         origin: this.origin,
-         factor: this.scale.factor,
-         min: this.scale.min,
-         max: this.scale.max,
-         minPadding: this.scale.minPadding,
-         maxPadding: this.scale.maxPadding,
-      };
-      r.stacks = Object.keys(this.stacks)
-         .map((s) => this.stacks[s].info.join(","))
-         .join(":");
-      return r;
-   }
-
-   isSame(x) {
-      let hash = this.hash();
-      let same = x && !Object.keys(hash).some((k) => x[k] !== hash[k]);
-      this.shouldUpdate = !same;
-      return same;
-   }
-
-   measure(a, b) {
-      this.a = a;
-      this.b = b;
-
-      for (let s in this.stacks) {
-         let info = this.stacks[s].measure(this.normalized);
-         let [min, max, invalid] = info;
-         if (this.minValue == null || min < this.minValue) this.minValue = min;
-         if (this.max == null || max > this.maxValue) this.maxValue = max;
-         this.stacks[s].info = info;
-      }
-
-      if (this.min == null) {
-         if (this.minValue != null) this.min = this.minValue;
-         else this.min = 0;
-      }
-
-      if (this.max == null) {
-         if (this.maxValue != null) this.max = this.maxValue;
-         else this.max = this.normalized ? 1 : 100;
-      }
-
-      this.origin = this.inverted ? this.b : this.a;
-
-      this.calculateTicks();
-      if (this.scale == null) {
-         this.scale = this.getScale();
-      }
-   }
-
-   getTimezoneOffset(date) {
-      return date.getTimezoneOffset() * 60 * 1000;
-   }
-
-   getScale(tickSize, measure, minRange = 1000) {
-      let { min, max, upperDeadZone, lowerDeadZone } = this;
-
-      let smin = min;
-      let smax = max;
-
-      if (tickSize) {
-         let minDate = new Date(min);
-         let maxDate = new Date(max);
-
-         switch (measure) {
-            case "second":
-            case "minute":
-            case "hour":
-            case "day":
-            default:
-               let minOffset = this.getTimezoneOffset(minDate);
-               let maxOffset = this.getTimezoneOffset(maxDate);
-               let mondayOffset = 4 * milliSeconds.day; //new Date(0).getDay() => 4
-               smin = Math.floor((smin - minOffset - mondayOffset) / tickSize) * tickSize + minOffset + mondayOffset;
-               smax = Math.ceil((smax - maxOffset - mondayOffset) / tickSize) * tickSize + maxOffset + mondayOffset;
-               break;
-
-            case "month":
-               tickSize /= milliSeconds.month;
-               let minMonth = monthNumber(minDate);
-               let maxMonth = monthNumber(maxDate);
-               minMonth = Math.floor(minMonth / tickSize) * tickSize;
-               maxMonth = Math.ceil(maxMonth / tickSize) * tickSize;
-               smin = new Date(Math.floor(minMonth / 12), minMonth % 12, 1).getTime();
-               smax = new Date(Math.floor(maxMonth / 12), maxMonth % 12, 1).getTime();
-               break;
-
-            case "year":
-               tickSize /= milliSeconds.year;
-               let minYear = yearNumber(minDate);
-               let maxYear = yearNumber(maxDate);
-               minYear = Math.floor(minYear / tickSize) * tickSize;
-               maxYear = Math.ceil(maxYear / tickSize) * tickSize;
-               smin = new Date(minYear, 0, 1).getTime();
-               smax = new Date(maxYear, 0, 1).getTime();
-               break;
-         }
-      } else {
-         if (this.minValue == min) smin = this.minValuePadded;
-         if (this.maxValue == max) smax = this.maxValuePadded;
-      }
-
-      if (smax - smin < minRange) {
-         let delta = (minRange - (smax - smin)) / 2;
-         smin -= delta;
-         smax += delta;
-      }
-
-      //padding should be activated only if using min/max obtained from the data
-      let minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded) : 0;
-      let maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded - smax) : 0;
-
-      let factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
-      if (factor > 0 && (upperDeadZone > 0 || lowerDeadZone > 0)) {
-         smin -= lowerDeadZone / factor;
-         smax += upperDeadZone / factor;
-         minPadding = this.minValuePadded != null ? Math.max(0, smin - this.minValuePadded) : 0;
-         maxPadding = this.maxValuePadded != null ? Math.max(0, this.maxValuePadded - smax) : 0;
-         factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
-      }
-
-      let sign = this.b > this.a ? 1 : -1;
-
-      return {
-         factor: sign * (this.inverted ? -factor : factor),
-         min: smin,
-         max: smax,
-         minPadding,
-         maxPadding,
-      };
-   }
-
-   acknowledge(value, width = 0, offset = 0) {
-      value = this.decodeValue(value);
-      if (this.minValue == null || value + offset - width / 2 < this.minValuePadded) {
-         this.minValue = value;
-         this.minValuePadded = value + offset - width / 2;
-      }
-      if (this.maxValue == null || value + offset + width / 2 > this.maxValuePadded) {
-         this.maxValue = value;
-         this.maxValuePadded = value + offset + width / 2;
-      }
-   }
-
-   getStack(name) {
-      let s = this.stacks[name];
-      if (!s) s = this.stacks[name] = new Stack();
-      return s;
-   }
-
-   stacknowledge(name, ordinal, value) {
-      return this.getStack(name).acknowledge(ordinal, value);
-   }
-
-   stack(name, ordinal, value) {
-      let v = this.getStack(name).stack(ordinal, value);
-      return v != null ? this.map(v) : null;
-   }
-
-   findTickSize(minPxDist) {
-      return this.tickSizes.find(({ size, noLabels }) => !noLabels && size * Math.abs(this.scale.factor) >= minPxDist);
-   }
-
-   getTickSizes() {
-      return this.tickSizes;
-   }
-
-   calculateTicks() {
-      let minReached = false;
-
-      let minRange = 1000;
-
-      for (let unit in milliSeconds) {
-         if (!minReached) {
-            if (unit == this.minTickUnit) minReached = true;
-            else continue;
-         }
-
-         let unitSize = milliSeconds[unit];
-         let divisions = this.tickDivisions[unit];
-
-         if (this.tickSizes.length > 0) {
-            //add ticks from higher levels
-            this.tickSizes.push(...divisions[0].map((s) => ({ size: s * unitSize, measure: unit })));
-            break;
-         }
-
-         let bestLabelDistance = Infinity;
-         let bestMinLabelDistance = this.minLabelDistance;
-         let bestTicks = [];
-         let bestScale = null;
-         let bestFormat = null;
-
-         this.tickMeasure = unit;
-
-         for (let i = 0; i < divisions.length; i++) {
-            let divs = divisions[i];
-            for (let d = 0; d < divs.length; d++) {
-               //if (useSnapToTicks && d < Math.min(divs.length - 1, this.snapToTicks)) continue;
-               let tickSize = divs[d] * unitSize;
-               let scale = this.getScale(null, unit, tickSize);
-               let format = this.format ?? this.getFormat(unit, scale);
-               let minLabelDistance = this.minLabelDistanceFormatOverride[format] ?? this.minLabelDistance;
-               let labelDistance = tickSize * Math.abs(scale.factor);
-               if (labelDistance >= minLabelDistance && labelDistance < bestLabelDistance) {
-                  bestScale = scale;
-                  bestTicks = divs.map((s) => s * unitSize);
-                  bestLabelDistance = labelDistance;
-                  bestFormat = format;
-                  bestMinLabelDistance = minLabelDistance;
-                  minRange = tickSize;
-               }
-            }
-         }
-
-         this.scale = bestScale;
-         this.tickSizes = bestTicks
-            .filter((ts) => ts * Math.abs(bestScale.factor) >= this.minTickDistance)
-            .map((size) => ({ size, measure: this.tickMeasure }));
-         this.resolvedFormat = bestFormat;
-         this.resolvedMinLabelDistance = bestMinLabelDistance;
-      }
-
-      let lowerTickUnit = null;
-      switch (this.tickMeasure) {
-         case "year":
-            lowerTickUnit = "month";
-            break;
-         case "month":
-            lowerTickUnit = "day";
-            break;
-         case "week":
-            lowerTickUnit = "day";
-            break;
-         case "day":
-            lowerTickUnit = "hour";
-            break;
-         case "hour":
-            lowerTickUnit = "minute";
-            break;
-         case "minute":
-            lowerTickUnit = "second";
-            break;
-      }
-
-      if (lowerTickUnit && this.minTickUnit && milliSeconds[lowerTickUnit] < milliSeconds[this.minTickUnit])
-         lowerTickUnit = this.minTickUnit == this.tickMeasure ? null : this.minTickUnit;
-
-      if (lowerTickUnit != null && this.scale) {
-         let bestMinorTickSize = Infinity;
-         let divisions = this.tickDivisions[lowerTickUnit];
-         let unitSize = milliSeconds[lowerTickUnit];
-         for (let i = 0; i < divisions.length; i++) {
-            let divs = divisions[i];
-            for (let d = 0; d < divs.length; d++) {
-               let tickSize = divs[d] * unitSize;
-               if (tickSize * Math.abs(this.scale.factor) >= this.minTickDistance && tickSize < bestMinorTickSize) {
-                  bestMinorTickSize = tickSize;
-               }
-            }
-         }
-         if (bestMinorTickSize != Infinity) {
-            this.tickSizes.unshift({ size: bestMinorTickSize, measure: lowerTickUnit, noLabels: true });
-            if (this.tickSizes.length > 1) {
-               let labelStep = this.tickSizes[1].size;
-               let lowerScale = this.getScale(null, lowerTickUnit, minRange);
-               if (lowerScale.max - lowerScale.min >= labelStep) this.scale = lowerScale;
-            }
-         }
-      }
-
-      if (isNumber(this.snapToTicks) && this.snapToTicks >= 0 && this.tickSizes.length > 0) {
-         let tickSize = this.tickSizes[Math.min(this.tickSizes.length - 1, this.snapToTicks)];
-         this.scale = this.getScale(tickSize.size, tickSize.measure, minRange);
-      }
-   }
-
-   getTicks(tickSizes) {
-      return tickSizes.map(({ size, measure }) => {
-         let result = [],
-            start,
-            end,
-            minDate,
-            maxDate;
-         if (measure == "year") {
-            size /= milliSeconds.year;
-            minDate = new Date(this.scale.min - this.scale.minPadding);
-            maxDate = new Date(this.scale.max + this.scale.maxPadding);
-            start = Math.ceil(yearNumber(minDate) / size) * size;
-            end = Math.floor(yearNumber(maxDate) / size) * size;
-            for (let i = start; i <= end; i += size) result.push(new Date(i, 0, 1).getTime());
-         } else if (measure == "month") {
-            size /= milliSeconds.month;
-            minDate = new Date(this.scale.min - this.scale.minPadding);
-            maxDate = new Date(this.scale.max + this.scale.maxPadding);
-            start = Math.ceil(monthNumber(minDate) / size) * size;
-            end = Math.floor(monthNumber(maxDate) / size) * size;
-            for (let i = start; i <= end; i += size) result.push(new Date(Math.floor(i / 12), i % 12, 1).getTime());
-         } else if (measure == "day" || measure == "week") {
-            let multiplier = measure == "week" ? 7 : 1;
-            size /= milliSeconds.day;
-            minDate = new Date(this.scale.min - this.scale.minPadding);
-            maxDate = new Date(this.scale.max + this.scale.maxPadding);
-            let date = zeroTime(minDate);
-            while (date.getTime() < minDate.getTime()) date.setDate(date.getDate() + 1);
-            if (measure == "week") {
-               //start on monday
-               while (date.getDay() != 1) {
-                  date.setDate(date.getDate() + 1);
-               }
-            }
-            while (date.getTime() <= maxDate.getTime()) {
-               result.push(date);
-               date = new Date(date);
-               date.setDate(date.getDate() + multiplier);
-            }
-         } else {
-            let minOffset = this.getTimezoneOffset(new Date(this.scale.min - this.scale.minPadding));
-            let mondayOffset = 4 * milliSeconds.day;
-            let date =
-               Math.ceil((this.scale.min - this.scale.minPadding - minOffset - mondayOffset) / size) * size +
-               minOffset +
-               mondayOffset;
-            while (date <= this.scale.max + this.scale.maxPadding) {
-               result.push(date);
-               date += size;
-            }
-         }
-         return result;
-      });
-   }
-
-   mapGridlines() {
-      if (this.tickSizes.length == 0) return [];
-      return this.getTicks([this.tickSizes[0]])[0].map((x) => this.map(x));
-   }
-
-   book() {
-      Console.warn("TimeAxis does not support the autoSize flag for column and bar graphs.");
-   }
-}
diff --git a/packages/cx/src/charts/axis/TimeAxis.scss b/packages/cx/src/charts/axis/TimeAxis.scss
index b23f8a843..b43201a90 100644
--- a/packages/cx/src/charts/axis/TimeAxis.scss
+++ b/packages/cx/src/charts/axis/TimeAxis.scss
@@ -1,11 +1,12 @@
+@use "sass:map";
 
 @mixin cx-timeaxis(
    $name: 'timeaxis',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       @include cxb-axis();
diff --git a/packages/cx/src/charts/axis/TimeAxis.tsx b/packages/cx/src/charts/axis/TimeAxis.tsx
new file mode 100644
index 000000000..a7e394f85
--- /dev/null
+++ b/packages/cx/src/charts/axis/TimeAxis.tsx
@@ -0,0 +1,718 @@
+/** @jsxImportSource react */
+
+import { Axis, AxisConfig, AxisInstance } from "./Axis";
+import { VDOM } from "../../ui/Widget";
+import { Stack } from "./Stack";
+import { Format } from "../../ui/Format";
+import { isNumber } from "../../util/isNumber";
+import { zeroTime } from "../../util/date/zeroTime";
+import { Console } from "../../util/Console";
+import { parseDateInvariant } from "../../util";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, StringProp } from "../../ui/Prop";
+
+export interface TimeAxisConfig extends AxisConfig {
+   /** Minimum value. */
+   min?: NumberProp;
+
+   /** Maximum value. */
+   max?: NumberProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `timeaxis`. */
+   baseClass?: string;
+
+   /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
+   snapToTicks?: 0 | 1 | 2 | false;
+
+   tickDivisions?: Record<string, number[][]>;
+   minTickUnit?: string;
+
+   /** Set to true to apply precise label distances from minLabelDistanceFormatOverride based on the resolved label format. */
+   useLabelDistanceFormatOverrides?: boolean;
+
+   /** Mapping of formats to label distances, i.e. { "datetime;YYYYMM": 80 } */
+   minLabelDistanceFormatOverride?: Record<string, number>;
+   minLabelDistanceFormatOverrideDefaults?: Record<string, number>;
+
+   /** Axis labels format string override. */
+   format?: StringProp;
+
+   /** Custom date decoder function. */
+   decode?: (date: string) => string;
+
+   /** Size of a zone reserved for labels for both lower and upper end of the axis. */
+   deadZone?: number;
+
+   /** Size of a zone reserved for labels near the lower end of the axis. */
+   lowerDeadZone?: number;
+
+   /** Size of a zone reserved for labels near the upper (higher) end of the axis. */
+   upperDeadZone?: number;
+}
+
+Format.registerFactory("yearOrMonth", (format: string) => {
+   let year = Format.parse("datetime;yyyy");
+   let month = Format.parse("datetime;MMM");
+   return function (date: any): string {
+      let d = parseDateInvariant(date);
+      if (d.getMonth() == 0) return year(d);
+      else return month(d);
+   };
+});
+
+Format.registerFactory("monthOrDay", (format: string) => {
+   let month = Format.parse("datetime;MMM");
+   let day = Format.parse("datetime;dd");
+   return function (date: any): string {
+      let d = parseDateInvariant(date);
+      if (d.getDate() == 1) return month(d);
+      else return day(d);
+   };
+});
+
+export class TimeAxis extends Axis {
+   declare deadZone: number;
+   declare lowerDeadZone: number;
+   declare upperDeadZone: number;
+   declare snapToTicks: number | false;
+   declare tickDivisions: Record<string, number[][]>;
+   declare minTickUnit: string;
+   declare useLabelDistanceFormatOverrides: boolean;
+   declare minLabelDistanceFormatOverride: Record<string, number>;
+   declare minLabelDistanceFormatOverrideDefaults: Record<string, number>;
+   declare format: string;
+   declare decode: TimeAxisConfig["decode"];
+
+   constructor(config: TimeAxisConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.labelAnchor == "auto") this.labelAnchor = this.vertical ? (this.secondary ? "start" : "end") : "start";
+
+      if (this.labelDx == "auto") this.labelDx = this.vertical ? 0 : "5px";
+
+      if (this.deadZone) {
+         this.lowerDeadZone = this.deadZone;
+         this.upperDeadZone = this.deadZone;
+      }
+
+      this.minLabelDistanceFormatOverride = {
+         ...this.minLabelDistanceFormatOverrideDefaults,
+         ...this.minLabelDistanceFormatOverride,
+      };
+
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(
+         {
+            anchors: undefined,
+            min: undefined,
+            max: undefined,
+            inverted: undefined,
+            lowerDeadZone: undefined,
+            upperDeadZone: undefined,
+         },
+         ...args,
+      );
+   }
+
+   initInstance(context: RenderingContext, instance: AxisInstance): void {
+      instance.calculator = new TimeScale();
+   }
+
+   explore(context: RenderingContext, instance: AxisInstance): void {
+      super.explore(context, instance);
+      let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } = instance.data;
+      instance.calculator.reset(
+         min,
+         max,
+         this.snapToTicks,
+         this.tickDivisions,
+         Math.max(1, this.minTickDistance),
+         Math.max(1, this.minLabelDistance),
+         normalized,
+         inverted,
+         this.minTickUnit,
+         lowerDeadZone,
+         upperDeadZone,
+         this.decode,
+         this.useLabelDistanceFormatOverrides ? this.minLabelDistanceFormatOverride : {},
+         this.format,
+      );
+   }
+
+   render(context: RenderingContext, instance: AxisInstance, key: string): React.ReactNode {
+      let { data, cached, calculator } = instance;
+
+      cached.axis = calculator.hash();
+
+      if (!data.bounds.valid()) return null;
+
+      let format = calculator.resolvedFormat;
+      let minLabelDistance = calculator.resolvedMinLabelDistance;
+      let formatter = Format.parse(format);
+
+      return (
+         <g key={key} className={data.classNames} style={data.style}>
+            {this.renderTicksAndLabels(context, instance, formatter, minLabelDistance)}
+         </g>
+      );
+   }
+}
+
+Axis.alias("time", TimeAxis);
+
+TimeAxis.prototype.baseClass = "timeaxis";
+TimeAxis.prototype.tickDivisions = {
+   second: [[1, 5, 15, 30]],
+   minute: [[1, 5, 15, 30]],
+   hour: [
+      [1, 2, 4, 8],
+      [1, 3, 6, 12],
+   ],
+   day: [[1]],
+   week: [[1]],
+   month: [[1, 3, 6]],
+   year: [
+      [1, 2, 10],
+      [1, 5, 10],
+      [5, 10, 50],
+      [10, 50, 100],
+   ],
+};
+
+const TimeFormats = {
+   fullDateAndTime: "datetime;yyyy MMM dd HH mm ss n",
+   shortMonthDate: "datetime;yyyy MMM dd",
+};
+
+TimeAxis.prototype.snapToTicks = 0;
+TimeAxis.prototype.tickSize = 15;
+TimeAxis.prototype.minLabelDistance = 60;
+TimeAxis.prototype.minTickDistance = 60;
+TimeAxis.prototype.minTickUnit = "second";
+TimeAxis.prototype.useLabelDistanceFormatOverrides = false;
+TimeAxis.prototype.minLabelDistanceFormatOverrideDefaults = {
+   [TimeFormats.fullDateAndTime]: 150,
+   [TimeFormats.shortMonthDate]: 90,
+};
+
+function monthNumber(date: Date): number {
+   return date.getFullYear() * 12 + date.getMonth() + (date.getDate() - 1) / 31;
+}
+
+function yearNumber(date: Date): number {
+   return monthNumber(date) / 12;
+}
+
+const milliSeconds: Record<string, number> = {
+   second: 1000,
+   minute: 60 * 1000,
+   hour: 3600 * 1000,
+   day: 3600 * 24 * 1000,
+   week: 3600 * 24 * 7 * 1000,
+   month: 3600 * 24 * 30 * 1000,
+   year: 3600 * 24 * 365 * 1000,
+};
+
+interface TickSize {
+   size: number;
+   measure: string;
+   noLabels?: boolean;
+}
+
+interface TimeScaleRange {
+   factor: number;
+   min: number;
+   max: number;
+   minPadding: number;
+   maxPadding: number;
+}
+
+class TimeScale {
+   dateCache: Record<string, number>;
+   min: number | null;
+   max: number | null;
+   snapToTicks: number | false;
+   tickDivisions: Record<string, number[][]>;
+   minLabelDistance: number;
+   minTickDistance: number;
+   tickSizes: TickSize[];
+   normalized: boolean;
+   minTickUnit: string;
+   inverted: boolean;
+   lowerDeadZone: number;
+   upperDeadZone: number;
+   minValue?: number;
+   maxValue?: number;
+   minValuePadded?: number;
+   maxValuePadded?: number;
+   stacks: Record<string, Stack>;
+   decode?: (date: string) => string;
+   minLabelDistanceFormatOverride: Record<string, number>;
+   format: string;
+   origin: number;
+   scale: TimeScaleRange;
+   a: number;
+   b: number;
+   tickMeasure: string;
+   resolvedFormat: string | null;
+   resolvedMinLabelDistance: number;
+   shouldUpdate: boolean;
+
+   reset(
+      min: any,
+      max: any,
+      snapToTicks: number | false,
+      tickDivisions: Record<string, number[][]>,
+      minTickDistance: number,
+      minLabelDistance: number,
+      normalized: boolean,
+      inverted: boolean,
+      minTickUnit: string,
+      lowerDeadZone: number,
+      upperDeadZone: number,
+      decode: ((date: string) => string) | undefined,
+      minLabelDistanceFormatOverride: Record<string, number>,
+      format: string,
+   ): void {
+      this.dateCache = {};
+      this.min = min != null ? this.decodeValue(min) : null;
+      this.max = max != null ? this.decodeValue(max) : null;
+      this.snapToTicks = snapToTicks;
+      this.tickDivisions = tickDivisions;
+      this.minLabelDistance = minLabelDistance;
+      this.minTickDistance = minTickDistance;
+      this.tickSizes = [];
+      this.normalized = normalized;
+      this.minTickUnit = minTickUnit;
+      this.inverted = inverted;
+      this.lowerDeadZone = lowerDeadZone || 0;
+      this.upperDeadZone = upperDeadZone || 0;
+      this.minValue = undefined;
+      this.maxValue = undefined;
+      this.minValuePadded = undefined;
+      this.maxValuePadded = undefined;
+      this.stacks = {};
+      this.decode = decode;
+      this.minLabelDistanceFormatOverride = minLabelDistanceFormatOverride;
+      this.format = format;
+   }
+
+   decodeValue(date: any): number {
+      if (date instanceof Date) return date.getTime();
+
+      switch (typeof date) {
+         case "string":
+            let v = this.dateCache[date];
+            if (!v) {
+               if (this.decode) date = this.decode(date);
+               v = this.dateCache[date] = parseDateInvariant(date).getTime();
+            }
+            return v;
+
+         case "number":
+            return parseDateInvariant(date).getTime();
+      }
+      return 0;
+   }
+
+   encodeValue(v: number): string {
+      return new Date(v).toISOString();
+   }
+
+   getFormat(unit: string, scale: TimeScaleRange): string {
+      switch (unit) {
+         case "year":
+            return "datetime;yyyy";
+
+         case "month":
+            if (new Date(scale.min).getFullYear() != new Date(scale.max).getFullYear()) return "yearOrMonth";
+            return "datetime;yyyy MMM";
+
+         case "week":
+            return "datetime;MMMdd";
+
+         case "day":
+            if (
+               new Date(scale.min).getFullYear() != new Date(scale.max).getFullYear() ||
+               new Date(scale.min).getMonth() != new Date(scale.max).getMonth()
+            )
+               return "monthOrDay";
+
+            return TimeFormats.shortMonthDate;
+
+         case "hour":
+            return "datetime;HH mm n";
+
+         case "minute":
+            return "datetime;HH mm n";
+
+         case "second":
+            return "datetime;mm ss";
+
+         default:
+            return TimeFormats.fullDateAndTime;
+      }
+   }
+
+   map(v: any, offset: number = 0): number {
+      return this.origin + (this.decodeValue(v) + offset - this.scale.min + this.scale.minPadding) * this.scale.factor;
+   }
+
+   constrainValue(v: number): number {
+      return Math.max(this.scale.min, Math.min(this.scale.max, v));
+   }
+
+   trackValue(v: number, offset: number = 0, constrain: boolean = false): number {
+      let value = (v - this.origin) / this.scale.factor - offset + this.scale.min - this.scale.minPadding;
+      if (constrain) value = this.constrainValue(value);
+      return value;
+   }
+
+   hash(): Record<string, any> {
+      let r: any = {
+         origin: this.origin,
+         factor: this.scale.factor,
+         min: this.scale.min,
+         max: this.scale.max,
+         minPadding: this.scale.minPadding,
+         maxPadding: this.scale.maxPadding,
+      };
+      r.stacks = Object.keys(this.stacks)
+         .map((s) => this.stacks[s].info?.join(","))
+         .join(":");
+      return r;
+   }
+
+   isSame(x: any): boolean {
+      let hash = this.hash();
+      let same = x && !Object.keys(hash).some((k) => x[k] !== hash[k]);
+      this.shouldUpdate = !same;
+      return same;
+   }
+
+   measure(a: number, b: number): void {
+      this.a = a;
+      this.b = b;
+
+      for (let s in this.stacks) {
+         let info = this.stacks[s].measure(this.normalized);
+         let [min, max] = info;
+         if (this.minValue == null || min < this.minValue) this.minValue = min;
+         if (this.max == null || max > this.maxValue!) this.maxValue = max;
+         this.stacks[s].info = info;
+      }
+
+      if (this.min == null) {
+         if (this.minValue != null) this.min = this.minValue;
+         else this.min = 0;
+      }
+
+      if (this.max == null) {
+         if (this.maxValue != null) this.max = this.maxValue;
+         else this.max = this.normalized ? 1 : 100;
+      }
+
+      this.origin = this.inverted ? this.b : this.a;
+
+      this.calculateTicks();
+      if (this.scale == null) {
+         this.scale = this.getScale();
+      }
+   }
+
+   getTimezoneOffset(date: Date): number {
+      return date.getTimezoneOffset() * 60 * 1000;
+   }
+
+   getScale(tickSize?: number | null, measure?: string, minRange: number = 1000): TimeScaleRange {
+      let { min, max, upperDeadZone, lowerDeadZone } = this;
+
+      let smin: number = min!;
+      let smax: number = max!;
+
+      if (tickSize) {
+         let minDate = new Date(min!);
+         let maxDate = new Date(max!);
+
+         switch (measure) {
+            case "second":
+            case "minute":
+            case "hour":
+            case "day":
+            default:
+               let minOffset = this.getTimezoneOffset(minDate);
+               let maxOffset = this.getTimezoneOffset(maxDate);
+               let mondayOffset = 4 * milliSeconds.day; //new Date(0).getDay() => 4
+               smin = Math.floor((smin - minOffset - mondayOffset) / tickSize) * tickSize + minOffset + mondayOffset;
+               smax = Math.ceil((smax - maxOffset - mondayOffset) / tickSize) * tickSize + maxOffset + mondayOffset;
+               break;
+
+            case "month":
+               tickSize /= milliSeconds.month;
+               let minMonth = monthNumber(minDate);
+               let maxMonth = monthNumber(maxDate);
+               minMonth = Math.floor(minMonth / tickSize) * tickSize;
+               maxMonth = Math.ceil(maxMonth / tickSize) * tickSize;
+               smin = new Date(Math.floor(minMonth / 12), minMonth % 12, 1).getTime();
+               smax = new Date(Math.floor(maxMonth / 12), maxMonth % 12, 1).getTime();
+               break;
+
+            case "year":
+               tickSize /= milliSeconds.year;
+               let minYear = yearNumber(minDate);
+               let maxYear = yearNumber(maxDate);
+               minYear = Math.floor(minYear / tickSize) * tickSize;
+               maxYear = Math.ceil(maxYear / tickSize) * tickSize;
+               smin = new Date(minYear, 0, 1).getTime();
+               smax = new Date(maxYear, 0, 1).getTime();
+               break;
+         }
+      } else {
+         if (this.minValue == min) smin = this.minValuePadded!;
+         if (this.maxValue == max) smax = this.maxValuePadded!;
+      }
+
+      if (smax - smin < minRange) {
+         let delta = (minRange - (smax - smin)) / 2;
+         smin -= delta;
+         smax += delta;
+      }
+
+      //padding should be activated only if using min/max obtained from the data
+      let minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded!) : 0;
+      let maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded! - smax) : 0;
+
+      let factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
+      if (factor > 0 && (upperDeadZone > 0 || lowerDeadZone > 0)) {
+         smin -= lowerDeadZone / factor;
+         smax += upperDeadZone / factor;
+         minPadding = this.minValuePadded != null ? Math.max(0, smin - this.minValuePadded) : 0;
+         maxPadding = this.maxValuePadded != null ? Math.max(0, this.maxValuePadded - smax) : 0;
+         factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
+      }
+
+      let sign = this.b > this.a ? 1 : -1;
+
+      return {
+         factor: sign * (this.inverted ? -factor : factor),
+         min: smin,
+         max: smax,
+         minPadding,
+         maxPadding,
+      };
+   }
+
+   acknowledge(value: any, width: number = 0, offset: number = 0): void {
+      value = this.decodeValue(value);
+      if (this.minValue == null || value + offset - width / 2 < this.minValuePadded!) {
+         this.minValue = value;
+         this.minValuePadded = value + offset - width / 2;
+      }
+      if (this.maxValue == null || value + offset + width / 2 > this.maxValuePadded!) {
+         this.maxValue = value;
+         this.maxValuePadded = value + offset + width / 2;
+      }
+   }
+
+   getStack(name: string): Stack {
+      let s = this.stacks[name];
+      if (!s) s = this.stacks[name] = new Stack();
+      return s;
+   }
+
+   stacknowledge(name: string, ordinal: string, value: number | null): void {
+      return this.getStack(name).acknowledge(ordinal, value);
+   }
+
+   stack(name: string, ordinal: string, value: number | null): number | null {
+      let v = this.getStack(name).stack(ordinal, value);
+      return v != null ? this.map(v) : null;
+   }
+
+   findTickSize(minPxDist: number): TickSize | undefined {
+      return this.tickSizes.find(({ size, noLabels }) => !noLabels && size * Math.abs(this.scale.factor) >= minPxDist);
+   }
+
+   getTickSizes(): TickSize[] {
+      return this.tickSizes;
+   }
+
+   calculateTicks(): void {
+      let minReached = false;
+
+      let minRange = 1000;
+
+      for (let unit in milliSeconds) {
+         if (!minReached) {
+            if (unit == this.minTickUnit) minReached = true;
+            else continue;
+         }
+
+         let unitSize = milliSeconds[unit];
+         let divisions = this.tickDivisions[unit];
+
+         if (this.tickSizes.length > 0) {
+            //add ticks from higher levels
+            this.tickSizes.push(...divisions[0].map((s) => ({ size: s * unitSize, measure: unit })));
+            break;
+         }
+
+         let bestLabelDistance = Infinity;
+         let bestMinLabelDistance = this.minLabelDistance;
+         let bestTicks: number[] = [];
+         let bestScale: TimeScaleRange | null = null;
+         let bestFormat: string | null = null;
+
+         this.tickMeasure = unit;
+
+         for (let i = 0; i < divisions.length; i++) {
+            let divs = divisions[i];
+            for (let d = 0; d < divs.length; d++) {
+               //if (useSnapToTicks && d < Math.min(divs.length - 1, this.snapToTicks)) continue;
+               let tickSize = divs[d] * unitSize;
+               let scale = this.getScale(null, unit, tickSize);
+               let format = this.format ?? this.getFormat(unit, scale);
+               let minLabelDistance = this.minLabelDistanceFormatOverride[format] ?? this.minLabelDistance;
+               let labelDistance = tickSize * Math.abs(scale.factor);
+               if (labelDistance >= minLabelDistance && labelDistance < bestLabelDistance) {
+                  bestScale = scale;
+                  bestTicks = divs.map((s) => s * unitSize);
+                  bestLabelDistance = labelDistance;
+                  bestFormat = format;
+                  bestMinLabelDistance = minLabelDistance;
+                  minRange = tickSize;
+               }
+            }
+         }
+
+         this.scale = bestScale!;
+         this.tickSizes = bestTicks
+            .filter((ts) => ts * Math.abs(bestScale!.factor) >= this.minTickDistance)
+            .map((size) => ({ size, measure: this.tickMeasure }));
+         this.resolvedFormat = bestFormat;
+         this.resolvedMinLabelDistance = bestMinLabelDistance;
+      }
+
+      let lowerTickUnit: string | null = null;
+      switch (this.tickMeasure) {
+         case "year":
+            lowerTickUnit = "month";
+            break;
+         case "month":
+            lowerTickUnit = "day";
+            break;
+         case "week":
+            lowerTickUnit = "day";
+            break;
+         case "day":
+            lowerTickUnit = "hour";
+            break;
+         case "hour":
+            lowerTickUnit = "minute";
+            break;
+         case "minute":
+            lowerTickUnit = "second";
+            break;
+      }
+
+      if (lowerTickUnit && this.minTickUnit && milliSeconds[lowerTickUnit] < milliSeconds[this.minTickUnit])
+         lowerTickUnit = this.minTickUnit == this.tickMeasure ? null : this.minTickUnit;
+
+      if (lowerTickUnit != null && this.scale) {
+         let bestMinorTickSize = Infinity;
+         let divisions = this.tickDivisions[lowerTickUnit];
+         let unitSize = milliSeconds[lowerTickUnit];
+         for (let i = 0; i < divisions.length; i++) {
+            let divs = divisions[i];
+            for (let d = 0; d < divs.length; d++) {
+               let tickSize = divs[d] * unitSize;
+               if (tickSize * Math.abs(this.scale.factor) >= this.minTickDistance && tickSize < bestMinorTickSize) {
+                  bestMinorTickSize = tickSize;
+               }
+            }
+         }
+         if (bestMinorTickSize != Infinity) {
+            this.tickSizes.unshift({ size: bestMinorTickSize, measure: lowerTickUnit, noLabels: true });
+            if (this.tickSizes.length > 1) {
+               let labelStep = this.tickSizes[1].size;
+               let lowerScale = this.getScale(null, lowerTickUnit, minRange);
+               if (lowerScale.max - lowerScale.min >= labelStep) this.scale = lowerScale;
+            }
+         }
+      }
+
+      if (isNumber(this.snapToTicks) && this.snapToTicks >= 0 && this.tickSizes.length > 0) {
+         let tickSize = this.tickSizes[Math.min(this.tickSizes.length - 1, this.snapToTicks)];
+         this.scale = this.getScale(tickSize.size, tickSize.measure, minRange);
+      }
+   }
+
+   getTicks(tickSizes: TickSize[]): (number | Date)[][] {
+      return tickSizes.map(({ size, measure }) => {
+         let result: (number | Date)[] = [],
+            start: number,
+            end: number,
+            minDate: Date,
+            maxDate: Date;
+         if (measure == "year") {
+            size /= milliSeconds.year;
+            minDate = new Date(this.scale.min - this.scale.minPadding);
+            maxDate = new Date(this.scale.max + this.scale.maxPadding);
+            start = Math.ceil(yearNumber(minDate) / size) * size;
+            end = Math.floor(yearNumber(maxDate) / size) * size;
+            for (let i = start; i <= end; i += size) result.push(new Date(i, 0, 1).getTime());
+         } else if (measure == "month") {
+            size /= milliSeconds.month;
+            minDate = new Date(this.scale.min - this.scale.minPadding);
+            maxDate = new Date(this.scale.max + this.scale.maxPadding);
+            start = Math.ceil(monthNumber(minDate) / size) * size;
+            end = Math.floor(monthNumber(maxDate) / size) * size;
+            for (let i = start; i <= end; i += size) result.push(new Date(Math.floor(i / 12), i % 12, 1).getTime());
+         } else if (measure == "day" || measure == "week") {
+            let multiplier = measure == "week" ? 7 : 1;
+            size /= milliSeconds.day;
+            minDate = new Date(this.scale.min - this.scale.minPadding);
+            maxDate = new Date(this.scale.max + this.scale.maxPadding);
+            let date = zeroTime(minDate);
+            while (date.getTime() < minDate.getTime()) date.setDate(date.getDate() + 1);
+            if (measure == "week") {
+               //start on monday
+               while (date.getDay() != 1) {
+                  date.setDate(date.getDate() + 1);
+               }
+            }
+            while (date.getTime() <= maxDate.getTime()) {
+               result.push(date);
+               date = new Date(date);
+               date.setDate(date.getDate() + multiplier);
+            }
+         } else {
+            let minOffset = this.getTimezoneOffset(new Date(this.scale.min - this.scale.minPadding));
+            let mondayOffset = 4 * milliSeconds.day;
+            let date =
+               Math.ceil((this.scale.min - this.scale.minPadding - minOffset - mondayOffset) / size) * size +
+               minOffset +
+               mondayOffset;
+            while (date <= this.scale.max + this.scale.maxPadding) {
+               result.push(date);
+               date += size;
+            }
+         }
+         return result;
+      });
+   }
+
+   mapGridlines(): number[] {
+      if (this.tickSizes.length == 0) return [];
+      return this.getTicks([this.tickSizes[0]])[0].map((x) => this.map(x));
+   }
+
+   book(): void {
+      Console.warn("TimeAxis does not support the autoSize flag for column and bar graphs.");
+   }
+}
diff --git a/packages/cx/src/charts/axis/index.d.ts b/packages/cx/src/charts/axis/index.d.ts
deleted file mode 100644
index 721df104d..000000000
--- a/packages/cx/src/charts/axis/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './Axis';
-export * from './NumericAxis';
-export * from './CategoryAxis';
-export * from './TimeAxis';
\ No newline at end of file
diff --git a/packages/cx/src/charts/axis/index.js b/packages/cx/src/charts/axis/index.js
deleted file mode 100644
index 721df104d..000000000
--- a/packages/cx/src/charts/axis/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './Axis';
-export * from './NumericAxis';
-export * from './CategoryAxis';
-export * from './TimeAxis';
\ No newline at end of file
diff --git a/packages/cx/src/charts/axis/index.ts b/packages/cx/src/charts/axis/index.ts
new file mode 100644
index 000000000..2cede96fe
--- /dev/null
+++ b/packages/cx/src/charts/axis/index.ts
@@ -0,0 +1,4 @@
+export * from "./Axis";
+export * from "./NumericAxis";
+export * from "./CategoryAxis";
+export * from "./TimeAxis";
\ No newline at end of file
diff --git a/packages/cx/src/charts/helpers/MinMaxFinder.d.ts b/packages/cx/src/charts/helpers/MinMaxFinder.d.ts
deleted file mode 100644
index af2e7038d..000000000
--- a/packages/cx/src/charts/helpers/MinMaxFinder.d.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as Cx from "../../core";
-import { PointReducerProps } from "./PointReducer";
-
-interface MinMaxFinderProps extends PointReducerProps {
-   /* A binding used to receive the x value of the point with the minimum value */
-   minX?: Cx.Bind | Cx.AccessorChain<number>;
-
-   /* A binding used to receive the y value of the point with the minimum value */
-   minY?: Cx.Bind | Cx.AccessorChain<number>;
-
-   /* A binding used to receive the x value of the point with the maximum value */
-   maxX?: Cx.Bind | Cx.AccessorChain<number>;
-
-   /* A binding used to receive the x value of the point with the maximum value */
-   maxY?: Cx.Bind | Cx.AccessorChain<number>;
-
-   /* An object used for filtering data points. Available as accumulator.params inside the onMap function. */
-   params?: Cx.StructuredProp;
-}
-
-/** Find minimum and maximum points of a point series */
-export class MinMaxFinder extends Cx.Widget<MinMaxFinderProps> {}
diff --git a/packages/cx/src/charts/helpers/MinMaxFinder.js b/packages/cx/src/charts/helpers/MinMaxFinder.js
deleted file mode 100644
index e7c2c18ff..000000000
--- a/packages/cx/src/charts/helpers/MinMaxFinder.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { PointReducer } from "./PointReducer";
-
-export class MinMaxFinder extends PointReducer {
-   declareData() {
-      return super.declareData(...arguments, {
-         minX: undefined,
-         minY: undefined,
-         maxX: undefined,
-         maxY: undefined,
-         params: {
-            structured: true,
-         },
-      });
-   }
-
-   onInitAccumulator(acc, { data }) {
-      acc.params = data.params;
-      acc.min = { x: null, y: null };
-      acc.max = { x: null, y: null };
-   }
-
-   onMap(acc, x, y, name, p) {
-      if (y != null && (acc.max.y == null || acc.max.y < y)) acc.max = { x, y, p };
-
-      if (y != null && (acc.min.y == null || acc.min.y > y)) acc.min = { x, y, p };
-   }
-
-   onReduce(acc, instance) {
-      instance.set("minX", acc.min.x);
-      instance.set("minY", acc.min.y);
-      instance.set("minRecord", acc.min.p);
-      instance.set("maxX", acc.max.x);
-      instance.set("maxY", acc.max.y);
-      instance.set("maxRecord", acc.max.p);
-   }
-}
diff --git a/packages/cx/src/charts/helpers/MinMaxFinder.ts b/packages/cx/src/charts/helpers/MinMaxFinder.ts
new file mode 100644
index 000000000..9815505db
--- /dev/null
+++ b/packages/cx/src/charts/helpers/MinMaxFinder.ts
@@ -0,0 +1,66 @@
+import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
+import { Bind, StructuredProp } from "../../ui/Prop";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+
+export interface MinMaxAccumulator extends PointReducerAccumulator {
+   params: any;
+   min: { x: any; y: any; p?: any };
+   max: { x: any; y: any; p?: any };
+}
+
+export interface MinMaxFinderConfig extends PointReducerConfig {
+   /** A binding used to receive the x value of the point with the minimum value */
+   minX?: Bind | AccessorChain<number>;
+
+   /** A binding used to receive the y value of the point with the minimum value */
+   minY?: Bind | AccessorChain<number>;
+
+   /** A binding used to receive the x value of the point with the maximum value */
+   maxX?: Bind | AccessorChain<number>;
+
+   /** A binding used to receive the y value of the point with the maximum value */
+   maxY?: Bind | AccessorChain<number>;
+
+   /** An object used for filtering data points. Available as accumulator.params inside the onMap function. */
+   params?: StructuredProp;
+}
+
+/** Find minimum and maximum points of a point series */
+export class MinMaxFinder extends PointReducer<MinMaxAccumulator> {
+   constructor(config?: MinMaxFinderConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         minX: undefined,
+         minY: undefined,
+         maxX: undefined,
+         maxY: undefined,
+         params: {
+            structured: true,
+         },
+      });
+   }
+
+   onInitAccumulator = (acc: MinMaxAccumulator, { data }: PointReducerInstance<MinMaxAccumulator>) => {
+      acc.params = (data as any).params;
+      acc.min = { x: null, y: null };
+      acc.max = { x: null, y: null };
+   };
+
+   onMap = (acc: MinMaxAccumulator, x: any, y: any, name: string, p: any) => {
+      if (y != null && (acc.max.y == null || acc.max.y < y)) acc.max = { x, y, p };
+
+      if (y != null && (acc.min.y == null || acc.min.y > y)) acc.min = { x, y, p };
+   };
+
+   onReduce = (acc: MinMaxAccumulator, instance: PointReducerInstance<MinMaxAccumulator>) => {
+      instance.set("minX", acc.min.x);
+      instance.set("minY", acc.min.y);
+      instance.set("minRecord", acc.min.p);
+      instance.set("maxX", acc.max.x);
+      instance.set("maxY", acc.max.y);
+      instance.set("maxRecord", acc.max.p);
+   };
+}
diff --git a/packages/cx/src/charts/helpers/PointReducer.d.ts b/packages/cx/src/charts/helpers/PointReducer.d.ts
deleted file mode 100644
index 27fccea0a..000000000
--- a/packages/cx/src/charts/helpers/PointReducer.d.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui/Instance";
-
-export interface PointReducerProps extends Cx.PureContainerProps {
-   /** A callback function used to initialize the accumulator. */
-   onInitAccumulator?: (accumulator: Cx.Record, instance?: Instance) => void;
-
-   /** A callback function used to collect information about all data points. */
-   onMap?: (accumulator: Cx.Record, x?: number, y?: number, name?: string) => void;
-
-   /** A callback function used to process accumulated information and write results. */
-   onReduce?: (accumulator: Cx.Record, instance?: Instance) => void;
-
-   /** Parameters that trigger filter predicate re-creation. */
-   filterParams?: StructuredProp;
-
-   /** A callback function used to create a predicate for filtering points. */
-   onCreatePointFilter?: (
-      filterParams: any,
-      instance: Instance,
-   ) => (x: number, y: number, name: string, data: any, array?: any[], index?: number) => boolean;
-}
-
-export class PointReducer extends Cx.Widget<PointReducerProps> {}
diff --git a/packages/cx/src/charts/helpers/PointReducer.js b/packages/cx/src/charts/helpers/PointReducer.js
deleted file mode 100644
index 1456c9167..000000000
--- a/packages/cx/src/charts/helpers/PointReducer.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { PureContainer } from "../../ui/PureContainer";
-
-export class PointReducer extends PureContainer {
-   declareData() {
-      super.declareData(...arguments, {
-         filterParams: {
-            structured: true,
-         },
-      });
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(context, instance);
-
-      instance.resetAccumulator = () => {
-         let accumulator = {};
-         if (this.onInitAccumulator) {
-            instance.invoke("onInitAccumulator", accumulator, instance);
-            instance.accumulator = accumulator;
-         }
-      };
-
-      if (this.onCreatePointFilter)
-         instance.pointFilter = instance.invoke("onCreatePointFilter", instance.data.filterParams, instance);
-   }
-
-   explore(context, instance) {
-      instance.resetAccumulator();
-
-      let parentPointReducer = context.pointReducer;
-      instance.parentPointTracker = parentPointReducer;
-
-      let pointFilter = instance.pointFilter;
-      let accumulator = instance.accumulator;
-      let onMap = this.onMap && instance.getCallback("onMap");
-      instance.pointReducer = (x, y, name, data, array, index) => {
-         if (!pointFilter || pointFilter(x, y, name, data, array, index))
-            onMap(accumulator, x, y, name, data, array, index);
-         if (parentPointReducer) parentPointReducer(x, y, name, data, array, index);
-      };
-      instance.write = () => {
-         if (this.onReduce) instance.invoke("onReduce", accumulator, instance);
-      };
-
-      context.push("pointReducer", instance.pointReducer);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("pointReducer");
-   }
-
-   prepare(context, instance) {
-      context.push("pointReducer", instance.pointReducer);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("pointReducer");
-      instance.write();
-   }
-}
diff --git a/packages/cx/src/charts/helpers/PointReducer.ts b/packages/cx/src/charts/helpers/PointReducer.ts
new file mode 100644
index 000000000..ce53cba6e
--- /dev/null
+++ b/packages/cx/src/charts/helpers/PointReducer.ts
@@ -0,0 +1,135 @@
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { DataRecord, StructuredProp } from "../../ui/Prop";
+
+export type PointReducerFunction = (
+   x: any,
+   y: any,
+   name: string,
+   data: any,
+   array?: any[],
+   index?: number
+) => void;
+
+export interface PointReducerAccumulator {
+   [key: string]: any;
+}
+
+export interface PointReducerInstance<TAccumulator extends PointReducerAccumulator = PointReducerAccumulator>
+   extends Instance {
+   resetAccumulator: () => void;
+   pointFilter?: (x: any, y: any, name: string, data: any, array?: any[], index?: number) => boolean;
+   accumulator?: TAccumulator;
+   parentPointTracker?: PointReducerFunction;
+   pointReducer?: PointReducerFunction;
+   write?: () => void;
+}
+
+export interface PointReducerConfig extends PureContainerConfig {
+   /** A callback function used to initialize the accumulator. */
+   onInitAccumulator?: string | ((accumulator: DataRecord, instance?: Instance) => void);
+
+   /** A callback function used to collect information about all data points. */
+   onMap?:
+      | string
+      | ((accumulator: DataRecord, x?: any, y?: any, name?: string, data?: any, array?: any[], index?: number) => void);
+
+   /** A callback function used to process accumulated information and write results. */
+   onReduce?: string | ((accumulator: DataRecord, instance?: Instance) => void);
+
+   /** Parameters that trigger filter predicate re-creation. */
+   filterParams?: StructuredProp;
+
+   /** A callback function used to create a predicate for filtering points. */
+   onCreatePointFilter?:
+      | string
+      | ((
+           filterParams: any,
+           instance: Instance
+        ) => (x: number, y: number, name: string, data: any, array?: any[], index?: number) => boolean);
+}
+
+export class PointReducer<
+   TAccumulator extends PointReducerAccumulator = PointReducerAccumulator,
+> extends PureContainerBase<PointReducerConfig, PointReducerInstance<TAccumulator>> {
+   declare onCreatePointFilter?: PointReducerConfig["onCreatePointFilter"];
+   // These can be either config properties (string/function) or overridden methods in subclasses
+   declare onInitAccumulator?: (acc: TAccumulator, instance: PointReducerInstance<TAccumulator>) => void;
+   declare onMap?: (
+      acc: TAccumulator,
+      x: any,
+      y: any,
+      name: string,
+      data?: any,
+      array?: any[],
+      index?: number
+   ) => void;
+   declare onReduce?: (acc: TAccumulator, instance: PointReducerInstance<TAccumulator>) => void;
+
+   constructor(config?: PointReducerConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         filterParams: {
+            structured: true,
+         },
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      super.prepareData(context, instance);
+
+      instance.resetAccumulator = () => {
+         let accumulator = {} as TAccumulator;
+         if (this.onInitAccumulator) {
+            instance.invoke("onInitAccumulator", accumulator, instance);
+            instance.accumulator = accumulator;
+         }
+      };
+
+      if (this.onCreatePointFilter)
+         instance.pointFilter = instance.invoke(
+            "onCreatePointFilter",
+            (instance.data as any).filterParams,
+            instance
+         ) as PointReducerInstance<TAccumulator>["pointFilter"];
+   }
+
+   explore(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      instance.resetAccumulator();
+
+      let parentPointReducer = context.pointReducer as PointReducerFunction | undefined;
+      instance.parentPointTracker = parentPointReducer;
+
+      let pointFilter = instance.pointFilter;
+      let accumulator = instance.accumulator;
+      let onMap = this.onMap && instance.getCallback("onMap");
+      instance.pointReducer = (x, y, name, data, array, index) => {
+         if (!pointFilter || pointFilter(x, y, name, data, array, index))
+            onMap?.(accumulator, x, y, name, data, array, index);
+         if (parentPointReducer) parentPointReducer(x, y, name, data, array, index);
+      };
+      instance.write = () => {
+         if (this.onReduce) instance.invoke("onReduce", accumulator, instance);
+      };
+
+      context.push("pointReducer", instance.pointReducer);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      context.pop("pointReducer");
+   }
+
+   prepare(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      context.push("pointReducer", instance.pointReducer);
+   }
+
+   prepareCleanup(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      context.pop("pointReducer");
+      instance.write?.();
+   }
+}
diff --git a/packages/cx/src/charts/helpers/SnapPointFinder.d.ts b/packages/cx/src/charts/helpers/SnapPointFinder.d.ts
deleted file mode 100644
index 270f42d90..000000000
--- a/packages/cx/src/charts/helpers/SnapPointFinder.d.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as Cx from "../../core";
-import { PointReducerProps } from "./PointReducer";
-
-interface SnapPointFinderProps extends PointReducerProps {
-   /* Cursor X value. */
-   cursorX?: Cx.NumberProp;
-
-   /* Cursor Y value */
-   cursorY?: Cx.NumberProp;
-
-   /* A binding used to receive the x value of the nearest point.*/
-   snapX?: Cx.Bind | Cx.AccessorChain<number> | Cx.AccessorChain<string>;
-
-   /* A binding used to receive the y value of the nearest point. */
-   snapY?: Cx.Bind | Cx.AccessorChain<number> | Cx.AccessorChain<string>;
-
-   /* A binding used to receive the record prop */
-   snapRecord?: Cx.Prop<Cx.Record>;
-
-   /* Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
-   maxDistance?: number;
-
-   /* A function used to convert x values into numeric format. Commonly used with dates. */
-   convertX?: (value: number | string) => number;
-
-   /* A function used to convert y values into numeric format. Commonly used with dates. */
-   convertY?: (value: number | string) => number;
-}
-
-export class SnapPointFinder extends Cx.Widget<SnapPointFinderProps> {}
diff --git a/packages/cx/src/charts/helpers/SnapPointFinder.js b/packages/cx/src/charts/helpers/SnapPointFinder.js
deleted file mode 100644
index fdc02fa75..000000000
--- a/packages/cx/src/charts/helpers/SnapPointFinder.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { PointReducer } from "./PointReducer";
-
-export class SnapPointFinder extends PointReducer {
-   declareData() {
-      return super.declareData(...arguments, {
-         cursorX: undefined,
-         cursorY: undefined,
-         snapX: undefined,
-         snapY: undefined,
-         snapRecord: undefined,
-         maxDistance: undefined,
-      });
-   }
-
-   explore(context, instance) {
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-      super.explore(context, instance);
-   }
-
-   onInitAccumulator(acc, { data, xAxis, yAxis }) {
-      acc.cursor = {
-         x: data.cursorX,
-         y: data.cursorY,
-         mapped: false,
-      };
-      acc.dist = data.maxDistance > 0 ? Math.pow(data.maxDistance, 2) : Number.POSITIVE_INFINITY;
-      acc.snapX = null;
-      acc.snapY = null;
-      acc.xAxis = xAxis;
-      acc.yAxis = yAxis;
-   }
-
-   onMap(acc, x, y, name, p) {
-      let { xAxis, yAxis, cursor } = acc;
-
-      if (!cursor.mapped) {
-         cursor.mappedX = cursor.x != null ? xAxis?.map(this.convertX(cursor.x)) : null;
-         cursor.mappedY = cursor.y != null ? yAxis?.map(this.convertY(cursor.y)) : null;
-         cursor.mapped = true;
-      }
-
-      let d = null;
-      let cx = x != null ? xAxis?.map(this.convertX(x)) : null;
-      let cy = y != null ? yAxis?.map(this.convertY(y)) : null;
-
-      if (cursor.mappedX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - cursor.mappedX), 2);
-      if (cursor.mappedY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - cursor.mappedY), 2);
-
-      if (d != null && d < acc.dist) {
-         acc.dist = d;
-         acc.snapX = x;
-         acc.snapY = y;
-         acc.snapRecord = p;
-      }
-   }
-
-   onReduce(acc, instance) {
-      instance.set("snapX", acc.snapX);
-      instance.set("snapY", acc.snapY);
-      instance.set("snapRecord", acc.snapRecord);
-   }
-}
-
-SnapPointFinder.prototype.maxDistance = 50;
-SnapPointFinder.prototype.convertX = (x) => x;
-SnapPointFinder.prototype.convertY = (y) => y;
-SnapPointFinder.prototype.xAxis = "x";
-SnapPointFinder.prototype.yAxis = "y";
diff --git a/packages/cx/src/charts/helpers/SnapPointFinder.ts b/packages/cx/src/charts/helpers/SnapPointFinder.ts
new file mode 100644
index 000000000..60af1e844
--- /dev/null
+++ b/packages/cx/src/charts/helpers/SnapPointFinder.ts
@@ -0,0 +1,136 @@
+import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, Bind, Prop, DataRecord } from "../../ui/Prop";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+
+export interface SnapAccumulator extends PointReducerAccumulator {
+   cursor: {
+      x: number | null;
+      y: number | null;
+      mapped: boolean;
+      mappedX?: number | null;
+      mappedY?: number | null;
+   };
+   dist: number;
+   snapX: any;
+   snapY: any;
+   snapRecord?: any;
+   xAxis: any;
+   yAxis: any;
+}
+
+export interface SnapPointFinderInstance extends PointReducerInstance<SnapAccumulator> {
+   xAxis?: any;
+   yAxis?: any;
+}
+
+export interface SnapPointFinderConfig extends PointReducerConfig {
+   /** Cursor X value. */
+   cursorX?: NumberProp;
+
+   /** Cursor Y value */
+   cursorY?: NumberProp;
+
+   /** A binding used to receive the x value of the nearest point.*/
+   snapX?: Bind | AccessorChain<number> | AccessorChain<string>;
+
+   /** A binding used to receive the y value of the nearest point. */
+   snapY?: Bind | AccessorChain<number> | AccessorChain<string>;
+
+   /** A binding used to receive the record prop */
+   snapRecord?: Prop<DataRecord>;
+
+   /** Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
+   maxDistance?: number;
+
+   /** A function used to convert x values into numeric format. Commonly used with dates. */
+   convertX?: (value: number | string) => number;
+
+   /** A function used to convert y values into numeric format. Commonly used with dates. */
+   convertY?: (value: number | string) => number;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+}
+
+export class SnapPointFinder extends PointReducer<SnapAccumulator> {
+   declare maxDistance: number;
+   declare convertX: (value: any) => number;
+   declare convertY: (value: any) => number;
+   declare xAxis: string;
+   declare yAxis: string;
+
+   constructor(config?: SnapPointFinderConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         cursorX: undefined,
+         cursorY: undefined,
+         snapX: undefined,
+         snapY: undefined,
+         snapRecord: undefined,
+         maxDistance: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: SnapPointFinderInstance) {
+      instance.xAxis = (context.axes as any)?.[this.xAxis];
+      instance.yAxis = (context.axes as any)?.[this.yAxis];
+      super.explore(context, instance);
+   }
+
+   onInitAccumulator = (acc: SnapAccumulator, { data, xAxis, yAxis }: SnapPointFinderInstance) => {
+      const d = data as any;
+      acc.cursor = {
+         x: d.cursorX,
+         y: d.cursorY,
+         mapped: false,
+      };
+      acc.dist = d.maxDistance > 0 ? Math.pow(d.maxDistance, 2) : Number.POSITIVE_INFINITY;
+      acc.snapX = null;
+      acc.snapY = null;
+      acc.xAxis = xAxis;
+      acc.yAxis = yAxis;
+   };
+
+   onMap = (acc: SnapAccumulator, x: any, y: any, name: string, p: any) => {
+      let { xAxis, yAxis, cursor } = acc;
+
+      if (!cursor.mapped) {
+         cursor.mappedX = cursor.x != null ? xAxis?.map(this.convertX(cursor.x)) : null;
+         cursor.mappedY = cursor.y != null ? yAxis?.map(this.convertY(cursor.y)) : null;
+         cursor.mapped = true;
+      }
+
+      let d: number | null = null;
+      let cx = x != null ? xAxis?.map(this.convertX(x)) : null;
+      let cy = y != null ? yAxis?.map(this.convertY(y)) : null;
+
+      if (cursor.mappedX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - cursor.mappedX), 2);
+      if (cursor.mappedY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - cursor.mappedY), 2);
+
+      if (d != null && d < acc.dist) {
+         acc.dist = d;
+         acc.snapX = x;
+         acc.snapY = y;
+         acc.snapRecord = p;
+      }
+   };
+
+   onReduce = (acc: SnapAccumulator, instance: PointReducerInstance<SnapAccumulator>) => {
+      instance.set("snapX", acc.snapX);
+      instance.set("snapY", acc.snapY);
+      instance.set("snapRecord", acc.snapRecord);
+   };
+}
+
+SnapPointFinder.prototype.maxDistance = 50;
+SnapPointFinder.prototype.convertX = (x) => x;
+SnapPointFinder.prototype.convertY = (y) => y;
+SnapPointFinder.prototype.xAxis = "x";
+SnapPointFinder.prototype.yAxis = "y";
diff --git a/packages/cx/src/charts/helpers/ValueAtFinder.d.ts b/packages/cx/src/charts/helpers/ValueAtFinder.d.ts
deleted file mode 100644
index 3440d6a63..000000000
--- a/packages/cx/src/charts/helpers/ValueAtFinder.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as Cx from "../../core";
-import { PointReducerProps } from "./PointReducer";
-
-interface ValueAtFinderProps extends PointReducerProps {
-   /* X axis probe value. */
-   at?: Cx.NumberProp | Cx.StringProp;
-
-   /* A binding used to receive the measured y axis value */
-   value?: Cx.Bind | Cx.AccessorChain<number>;
-
-   /* A function used to convert x values into numeric format. Commonly used with dates. */
-   convert?: (value: number | string) => number;
-}
-
-/** Calculate value at a given point on the graph */
-export class ValueAtFinder extends Cx.Widget<ValueAtFinderProps> {}
diff --git a/packages/cx/src/charts/helpers/ValueAtFinder.js b/packages/cx/src/charts/helpers/ValueAtFinder.js
deleted file mode 100644
index e035cb191..000000000
--- a/packages/cx/src/charts/helpers/ValueAtFinder.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { PointReducer } from "./PointReducer";
-
-export class ValueAtFinder extends PointReducer {
-   declareData() {
-      return super.declareData(...arguments, {
-         at: undefined,
-         value: undefined,
-      });
-   }
-
-   onInitAccumulator(acc, { data }) {
-      acc.at = this.convert(data.at);
-   }
-
-   onMap(acc, x, y, name) {
-      let cx = this.convert(x);
-      let d = cx - acc.at;
-      if (d <= 0 && (!acc.left || acc.left.d < d)) {
-         acc.left = {
-            x: cx,
-            y,
-            d,
-         };
-      }
-      if (d >= 0 && (!acc.right || acc.right.d > d)) {
-         acc.right = {
-            x: cx,
-            y,
-            d,
-         };
-      }
-   }
-
-   onReduce(acc, instance) {
-      let y = null;
-      if (acc.left && acc.right) {
-         if (acc.left.x == acc.right.x) y = acc.left.y;
-         else if (acc.left.y != null && acc.right.y != null) {
-            y = acc.left.y + ((acc.right.y - acc.left.y) * (acc.at - acc.left.x)) / (acc.right.x - acc.left.x);
-         }
-      }
-      instance.set("value", y);
-   }
-}
-
-ValueAtFinder.prototype.convert = (x) => x;
diff --git a/packages/cx/src/charts/helpers/ValueAtFinder.ts b/packages/cx/src/charts/helpers/ValueAtFinder.ts
new file mode 100644
index 000000000..186732632
--- /dev/null
+++ b/packages/cx/src/charts/helpers/ValueAtFinder.ts
@@ -0,0 +1,72 @@
+import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
+import { NumberProp, StringProp, Bind } from "../../ui/Prop";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+
+export interface ValueAtAccumulator extends PointReducerAccumulator {
+   at: number;
+   left?: { x: number; y: number; d: number };
+   right?: { x: number; y: number; d: number };
+}
+
+export interface ValueAtFinderConfig extends PointReducerConfig {
+   /** X axis probe value. */
+   at?: NumberProp | StringProp;
+
+   /** A binding used to receive the measured y axis value */
+   value?: Bind | AccessorChain<number>;
+
+   /** A function used to convert x values into numeric format. Commonly used with dates. */
+   convert?: (value: number | string) => number;
+}
+
+/** Calculate value at a given point on the graph */
+export class ValueAtFinder extends PointReducer<ValueAtAccumulator> {
+   declare convert: (value: any) => number;
+
+   constructor(config?: ValueAtFinderConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         at: undefined,
+         value: undefined,
+      });
+   }
+
+   onInitAccumulator = (acc: ValueAtAccumulator, { data }: PointReducerInstance<ValueAtAccumulator>) => {
+      acc.at = this.convert((data as any).at);
+   };
+
+   onMap = (acc: ValueAtAccumulator, x: any, y: any, name: string) => {
+      let cx = this.convert(x);
+      let d = cx - acc.at;
+      if (d <= 0 && (!acc.left || acc.left.d < d)) {
+         acc.left = {
+            x: cx,
+            y,
+            d,
+         };
+      }
+      if (d >= 0 && (!acc.right || acc.right.d > d)) {
+         acc.right = {
+            x: cx,
+            y,
+            d,
+         };
+      }
+   };
+
+   onReduce = (acc: ValueAtAccumulator, instance: PointReducerInstance<ValueAtAccumulator>) => {
+      let y: number | null = null;
+      if (acc.left && acc.right) {
+         if (acc.left.x == acc.right.x) y = acc.left.y;
+         else if (acc.left.y != null && acc.right.y != null) {
+            y = acc.left.y + ((acc.right.y - acc.left.y) * (acc.at - acc.left.x)) / (acc.right.x - acc.left.x);
+         }
+      }
+      instance.set("value", y);
+   };
+}
+
+ValueAtFinder.prototype.convert = (x) => x;
diff --git a/packages/cx/src/charts/helpers/index.d.ts b/packages/cx/src/charts/helpers/index.d.ts
deleted file mode 100644
index ff5a2097a..000000000
--- a/packages/cx/src/charts/helpers/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './PointReducer';
-export * from './MinMaxFinder';
-export * from './SnapPointFinder';
-export * from './ValueAtFinder';
diff --git a/packages/cx/src/charts/helpers/index.js b/packages/cx/src/charts/helpers/index.js
deleted file mode 100644
index ff5a2097a..000000000
--- a/packages/cx/src/charts/helpers/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './PointReducer';
-export * from './MinMaxFinder';
-export * from './SnapPointFinder';
-export * from './ValueAtFinder';
diff --git a/packages/cx/src/charts/helpers/index.ts b/packages/cx/src/charts/helpers/index.ts
new file mode 100644
index 000000000..b2838fb56
--- /dev/null
+++ b/packages/cx/src/charts/helpers/index.ts
@@ -0,0 +1,4 @@
+export * from "./PointReducer";
+export * from "./MinMaxFinder";
+export * from "./SnapPointFinder";
+export * from "./ValueAtFinder";
diff --git a/packages/cx/src/charts/index.d.ts b/packages/cx/src/charts/index.d.ts
deleted file mode 100644
index d7ce86391..000000000
--- a/packages/cx/src/charts/index.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export * from "./Chart";
-export * from "./PieChart";
-export * from "./Pie";
-export * from "./PieLabel";
-export * from "./PieLabelsContainer";
-export * from "./Column";
-export * from "./Bar";
-export * from "./Legend";
-export * from "./LegendEntry";
-export * from "./ColorMap";
-export * from "./Marker";
-export * from "./MarkerLine";
-export * from "./Range";
-export * from "./Gridlines";
-export * from "./Swimlanes";
-export * from "./LineGraph";
-export * from "./ColumnGraph";
-export * from "./BarGraph";
-export * from "./ScatterGraph";
-export * from "./BubbleGraph";
-export * from "./shapes";
-export * from "./MouseTracker";
-export * from "./RangeMarker";
-export * from "./Swimlane";
-
-export * from "./axis/index";
-export * from "./helpers/index";
diff --git a/packages/cx/src/charts/index.js b/packages/cx/src/charts/index.ts
similarity index 100%
rename from packages/cx/src/charts/index.js
rename to packages/cx/src/charts/index.ts
diff --git a/packages/cx/src/charts/palette.scss b/packages/cx/src/charts/palette.scss
index 1994fbb80..9abf7811b 100644
--- a/packages/cx/src/charts/palette.scss
+++ b/packages/cx/src/charts/palette.scss
@@ -3,6 +3,8 @@
 //hover:100 700
 //selected: 300 900
 //disabled: 0 100
+@use "sass:map";
+@use "sass:list";
 
 $cx-default-palette-colors: rgba(244, 67, 54, 1) rgba(233, 30, 99, 1) rgba(156, 39, 176, 1) rgba(103, 58, 183, 1)
    rgba(63, 81, 181, 1) rgba(33, 150, 243, 1) rgba(3, 169, 244, 1) rgba(0, 188, 212, 1) rgba(0, 150, 136, 1)
@@ -36,12 +38,12 @@ $cx-default-palette-stroke-blacken: 10% !default;
    $palette-stroke-blacken: $cx-default-palette-stroke-blacken,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
-   @for $i from 1 through length($palette-colors) {
-      $c: nth($palette-colors, 1 + (($i - 1) * 1) % length($palette-colors));
+   @for $i from 1 through list.length($palette-colors) {
+      $c: list.nth($palette-colors, 1 + (($i - 1) * 1) % list.length($palette-colors));
 
       .#{$state}color-#{$i - 1} {
          $fill: cx-blacken(cx-whiten($c, $palette-fill-whiten), $palette-fill-blacken);
diff --git a/packages/cx/src/charts/shapes.d.ts b/packages/cx/src/charts/shapes.d.ts
deleted file mode 100644
index 081ac0c47..000000000
--- a/packages/cx/src/charts/shapes.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as Cx from '../core';
-
-type ShapeRender = (cx: number, cy: number, size: number, props?: Cx.Config, options?: Cx.Config) => JSX.Element;
-
-export function registerShape(name: string, callback: (cx: number, cy: number, size: number) => any);
-
-export function getShape(shapeName: string): string;
-
-export function getAvailableShapes(): string[];
-
-export const circle: ShapeRender;
-
-export const square: ShapeRender;
-
-export const bar: ShapeRender;
-
-export const column: ShapeRender;
-
-export const line: ShapeRender;
-
-export const vline: ShapeRender;
-
-export const triangle: ShapeRender;
\ No newline at end of file
diff --git a/packages/cx/src/charts/shapes.js b/packages/cx/src/charts/shapes.js
deleted file mode 100644
index 36c65e42e..000000000
--- a/packages/cx/src/charts/shapes.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import {VDOM} from '../ui/Widget';
-import {debug} from '../util/Debug';
-
-var shapes =  {};
-var warnings = {};
-
-export function registerShape(name, callback) {
-   shapes[name] = callback;
-}
-
-export function getShape(shapeName) {
-   if (shapes[shapeName])
-      return shapes[shapeName];
-
-   if (!warnings[shapeName]) {
-      warnings[shapeName] = true;
-      debug(`Unknown shape '${shapeName}'. Using square instead.`);
-   }
-
-   return shapes['square'];
-}
-
-export function getAvailableShapes() {
-   return Object.keys(shapes);
-}
-
-export function circle(cx, cy, size, props, options) {
-   return <circle {...props} cx={cx} cy={cy} r={size/2} />
-}
-registerShape('circle', circle);
-
-export function square(cx, cy, size, props, options) {
-   size *= 0.9;
-   return <rect {...props} x={cx-size/2} y={cy-size/2} width={size} height={size} />
-}
-registerShape('square', square);
-registerShape('rect', square);
-
-export function bar(cx, cy, size, props, options) {
-   size *= 0.9;
-   return <rect {...props} x={cx-size/2} y={cy-size/4} width={size} height={size/2} />
-}
-registerShape('bar', bar);
-
-export function column(cx, cy, size, props, options) {
-   size *= 0.9;
-   return <rect {...props} x={cx-size/4} y={cy-size/2} width={size/2} height={size} />
-}
-registerShape('column', column);
-
-export function line(cx, cy, size, props, options) {
-   size *= 0.9;
-   return <line {...props} x1={cx-size/2} y1={cy} x2={cx+size/2} y2={cy} />
-}
-registerShape('line', line);
-registerShape('hline', line);
-
-export function vline(cx, cy, size, props, options) {
-   size *= 0.9;
-   return <line {...props} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2}/>
-}
-registerShape('vline', vline);
-
-
-
-export function triangle(cx, cy, size, props, options) {
-   size *= 1.29;
-   var d = '';
-   var cos = Math.cos(Math.PI / 6);
-   var sin = Math.sin(Math.PI / 6);
-   d += `M ${cx} ${cy - size/2} `;
-   d += `L ${cx + cos * size / 2} ${cy + sin * size / 2} `;
-   d += `L ${cx - cos * size / 2} ${cy + sin * size / 2} `;
-   d += `Z`;
-   return <path {...props} d={d} />
-}
-
-registerShape('triangle', triangle);
-
diff --git a/packages/cx/src/charts/shapes.tsx b/packages/cx/src/charts/shapes.tsx
new file mode 100644
index 000000000..cb91087ad
--- /dev/null
+++ b/packages/cx/src/charts/shapes.tsx
@@ -0,0 +1,86 @@
+/** @jsxImportSource react */
+
+import { VDOM } from "../ui/Widget";
+import { debug } from "../util/Debug";
+import { Config } from "../ui/Prop";
+
+export type ShapeRender = (
+   cx: number,
+   cy: number,
+   size: number,
+   props?: Config,
+   options?: Config
+) => React.ReactElement;
+
+var shapes: { [key: string]: ShapeRender } = {};
+var warnings: { [key: string]: boolean } = {};
+
+export function registerShape(name: string, callback: ShapeRender): void {
+   shapes[name] = callback;
+}
+
+export function getShape(shapeName: string): ShapeRender {
+   if (shapes[shapeName]) return shapes[shapeName];
+
+   if (!warnings[shapeName]) {
+      warnings[shapeName] = true;
+      debug(`Unknown shape '${shapeName}'. Using square instead.`);
+   }
+
+   return shapes["square"];
+}
+
+export function getAvailableShapes(): string[] {
+   return Object.keys(shapes);
+}
+
+export function circle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   return <circle {...props} cx={cx} cy={cy} r={size / 2} />;
+}
+registerShape("circle", circle);
+
+export function square(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
+}
+registerShape("square", square);
+registerShape("rect", square);
+
+export function bar(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
+}
+registerShape("bar", bar);
+
+export function column(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
+}
+registerShape("column", column);
+
+export function line(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <line {...props} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
+}
+registerShape("line", line);
+registerShape("hline", line);
+
+export function vline(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <line {...props} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
+}
+registerShape("vline", vline);
+
+export function triangle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 1.29;
+   var d = "";
+   var cos = Math.cos(Math.PI / 6);
+   var sin = Math.sin(Math.PI / 6);
+   d += `M ${cx} ${cy - size / 2} `;
+   d += `L ${cx + (cos * size) / 2} ${cy + (sin * size) / 2} `;
+   d += `L ${cx - (cos * size) / 2} ${cy + (sin * size) / 2} `;
+   d += `Z`;
+   return <path {...props} d={d} />;
+}
+
+registerShape("triangle", triangle);
diff --git a/packages/cx/src/charts/variables.scss b/packages/cx/src/charts/variables.scss
index e3f558f26..ae6b92a94 100644
--- a/packages/cx/src/charts/variables.scss
+++ b/packages/cx/src/charts/variables.scss
@@ -1,9 +1,10 @@
+@use "sass:map";
 @import "axis/variables";
 
 $cx-default-swimlanes-lane-background-color: #f1f1f1;
 $cx-default-range-marker-color: #696969;
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/charts/Bar": "cx/charts/palette",
diff --git a/packages/cx/src/core.d.ts b/packages/cx/src/core.d.ts
index 9e20f5b42..594325f31 100644
--- a/packages/cx/src/core.d.ts
+++ b/packages/cx/src/core.d.ts
@@ -2,80 +2,73 @@ export = Cx;
 export as namespace Cx;
 
 import * as React from "react";
-
+import { Instance } from "./ui/Instance";
+import { RenderingContext } from "./ui/RenderingContext";
+import { AccessorChain as AccessorChainType } from "./data/createAccessorModelProxy";
+import { Selector as SelectorType } from "./data/Selector";
+import type {
+   Bind as BindType,
+   Tpl as TplType,
+   Expr as ExprType,
+   Binding as BindingType,
+   GetSet as GetSetType,
+   Prop as PropType,
+   StructuredSelector as StructuredSelectorType,
+   DataRecord,
+   Config as ConfigType,
+   StructuredProp as StructuredPropType,
+   StringProp as StringPropType,
+   StyleProp as StylePropType,
+   NumberProp as NumberPropType,
+   BooleanProp as BooleanPropType,
+   ClassProp as ClassPropType,
+   RecordsProp as RecordsPropType,
+   SortersProp as SortersPropType,
+   UnknownProp as UnknownPropType,
+   RecordAlias as RecordAliasType,
+   SortDirection as SortDirectionType,
+   Sorter as SorterType,
+   CollatorOptions as CollatorOptionsType,
+} from "./ui/Prop";
+
+/** @deprecated */
 declare namespace Cx {
-   type Bind = {
-      bind: string;
-      defaultValue?: any;
-      throttle?: number;
-      debounce?: number;
-   };
-
-   type Tpl = {
-      tpl: string;
-   };
-
-   type Expr = {
-      expr: string;
-      set?: (value: any, instance?: any) => boolean;
-      throttle?: number;
-      debounce?: number;
-   };
-
-   type Binding = Bind | Tpl | Expr;
-
-   type Selector<T> = (data: any) => T;
-
-   type GetSet<T> = {
-      get: Selector<T>;
-      set?: (value: T, instance?: any) => boolean;
-      throttle?: number;
-      debounce?: number;
-   };
-
-   interface StructuredSelector {
-      [prop: string]: Selector<any>;
-   }
+   // Re-export AccessorChain type from createAccessorModelProxy
+   type AccessorChain<M> = AccessorChainType<M>;
 
-   interface AccessorChainMethods {
-      toString(): string;
-      valueOf(): string;
-      nameOf(): string;
-   }
+   // Re-export Selector type from data/Selector
+   type Selector<T> = SelectorType<T>;
 
-   type AccessorChainMap<M> = { [prop in keyof M]: AccessorChain<M[prop]> };
+   // Re-export binding types from Prop.ts
+   type Bind = BindType;
+   type Tpl = TplType;
+   type Expr = ExprType;
+   type Binding = BindingType;
+   type GetSet<T> = GetSetType<T>;
 
-   type AccessorChain<M> = {
-      toString(): string;
-      valueOf(): string;
-      nameOf(): string;
-   } & Omit<AccessorChainMap<M>, keyof AccessorChainMethods>;
+   // Re-export types from Prop.ts
+   type Prop<T> = PropType<T>;
 
-   type Prop<T> = T | Binding | Selector<T> | AccessorChain<T> | GetSet<T>;
+   interface StructuredSelector extends StructuredSelectorType {}
 
-   interface Record {
-      [prop: string]: any;
-   }
+   interface Record extends DataRecord {}
 
-   interface Config {
-      [prop: string]: any;
-   }
+   interface Config extends ConfigType {}
 
-   interface StructuredProp {
-      [prop: string]: Prop<any>;
-   }
+   interface StructuredProp extends StructuredPropType {}
 
-   type StringProp = Prop<string>;
-   type StyleProp = Prop<string | React.CSSProperties> | StructuredProp;
-   type NumberProp = Prop<number>;
-   type BooleanProp = Prop<boolean>;
-   type ClassProp = Prop<string> | StructuredProp;
-   type RecordsProp = Prop<Record[]>;
-   type SortersProp = Prop<Sorter[]>;
-   type UnknownProp = Prop<unknown>;
+   type StringProp = StringPropType;
+   type StyleProp = StylePropType;
+   type NumberProp = NumberPropType;
+   type BooleanProp = BooleanPropType;
+   type ClassProp = ClassPropType;
+   type RecordsProp = RecordsPropType;
+   type SortersProp = SortersPropType;
+   type UnknownProp = UnknownPropType;
 
-   type RecordAlias = string | { toString(): string };
+   type RecordAlias = RecordAliasType;
 
+   /** @deprecated */
    interface WidgetProps {
       /** Inner layout used to display children inside the widget. */
       layout?: any;
@@ -119,6 +112,7 @@ declare namespace Cx {
       onDestroy?(): void;
    }
 
+   /** @deprecated */
    interface PureContainerProps extends WidgetProps {
       /** Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`. */
       ws?: boolean;
@@ -138,6 +132,7 @@ declare namespace Cx {
       plainText?: boolean;
    }
 
+   /** @deprecated */
    interface StyledContainerProps extends PureContainerProps {
       /**
        * Additional CSS classes to be applied to the element.
@@ -158,6 +153,7 @@ declare namespace Cx {
       styles?: StyleProp;
    }
 
+   /** @deprecated */
    interface HtmlElementProps extends StyledContainerProps {
       /** Id of the element */
       id?: Cx.StringProp | Cx.NumberProp;
@@ -168,143 +164,19 @@ declare namespace Cx {
       /** Tooltip configuration. */
       tooltip?: StringProp | StructuredProp;
 
-      onMouseDown?: string | ((event: MouseEvent, instance: any) => void);
-      onMouseMove?: string | ((event: MouseEvent, instance: any) => void);
-      onMouseUp?: string | ((event: MouseEvent, instance: any) => void);
-      onTouchStart?: string | ((event: TouchEvent, instance: any) => void);
-      onTouchMove?: string | ((event: TouchEvent, instance: any) => void);
-      onTouchEnd?: string | ((event: TouchEvent, instance: any) => void);
-      onClick?: string | ((event: MouseEvent, instance: any) => void);
-      onContextMenu?: string | ((event: MouseEvent, instance: any) => void);
-   }
-
-   type SortDirection = "ASC" | "DESC";
-
-   interface Sorter {
-      field?: string;
-      value?: (Record) => any;
-      direction: SortDirection;
-   }
-
-   interface CollatorOptions {
-      localeMatcher?: "lookup" | "best fit";
-      usage?: "sort" | "search";
-      sensitivity?: "base" | "accent" | "case" | "variant";
-      ignorePunctuation?: boolean;
-      numeric?: boolean;
-      caseFirst?: "upper" | "lower" | "false";
-   }
-
-   class Widget<P extends WidgetProps> {
-      props: P;
-      state: any;
-      context: any;
-      refs: any;
-
-      constructor(props: P);
-
-      render();
-
-      setState(state: any);
-
-      forceUpdate();
-
-      static create(typeAlias?: any, config?: Cx.Config, more?: Cx.Config): any;
-   }
-}
-
-declare global {
-   namespace JSX {
-      interface IntrinsicElements {
-         cx: any;
-      }
-
-      interface IntrinsicAttributes {
-         /** Inner layout used to display children inside the widget. */
-         layout?: any;
-
-         /** Outer (wrapper) layout used to display the widget in. */
-         outerLayout?: any;
-
-         /** Name of the ContentPlaceholder that should be used to display the widget. */
-         putInto?: string;
-
-         /** Name of the ContentPlaceholder that should be used to display the widget. */
-         contentFor?: string;
-
-         /** Controller. */
-         controller?: any;
-
-         /** Visibility of the widget. Defaults to `true`. */
-         visible?: Cx.BooleanProp;
-
-         /** Visibility of the widget. Defaults to `true`. */
-         if?: Cx.BooleanProp;
-
-         /** Appearance modifier. For example, mod="big" will add the CSS class `.cxm-big` to the block element. */
-         mod?: Cx.StringProp | Cx.Prop<string[]> | Cx.StructuredProp;
-
-         /** Cache render output. Default is `true`. */
-         memoize?: Cx.BooleanProp;
-
-         /** Tooltip configuration. */
-         tooltip?: Cx.StringProp | Cx.StructuredProp;
-      }
+      // onMouseDown?: string | ((event: MouseEvent, instance: any) => void);
+      // onMouseMove?: string | ((event: MouseEvent, instance: any) => void);
+      // onMouseUp?: string | ((event: MouseEvent, instance: any) => void);
+      // onTouchStart?: string | ((event: TouchEvent, instance: any) => void);
+      // onTouchMove?: string | ((event: TouchEvent, instance: any) => void);
+      // onTouchEnd?: string | ((event: TouchEvent, instance: any) => void);
+      // onClick?: string | ((event: MouseEvent, instance: any) => void);
+      // onContextMenu?: string | ((event: MouseEvent, instance: any) => void);
    }
 
-   interface JSON {
-      /* JSON doesn't support symbol keys, and number keys
-       * are coerced to strings, even in arrays */
-
-      /**
-       * Converts a JavaScript Object Notation (JSON) string into an object.
-       * @param text A valid JSON string.
-       * @param reviver A function that transforms the results. This function is called for each member of the object.
-       * If a member contains nested objects, the nested objects are transformed before the parent object is.
-       */
-      parse(text: string, reviver?: (this: unknown, key: string, value: unknown) => unknown): unknown;
+   type SortDirection = SortDirectionType;
 
-      /**
-       * Converts a JavaScript value to a JavaScript Object Notation (JSON) string.
-       * @param value A JavaScript value, usually an object or array, to be converted.
-       * @param replacer A function that transforms the results.
-       * @param space Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.
-       */
-      stringify(
-         text: unknown,
-         replacer?: (this: unknown, key: string, value: unknown) => unknown,
-         space?: string | number,
-      ): string;
-   }
-
-   interface ArrayConstructor {
-      isArray(a: unknown): a is unknown[];
-   }
-
-   interface Body {
-      json(): Promise<unknown>;
-   }
-}
-
-declare module "react" {
-   interface ClassAttributes<T> extends Cx.PureContainerProps {
-      class?: Cx.ClassProp;
-      styles?: Cx.StyleProp;
-      text?: Cx.StringProp | Cx.NumberProp;
-      innerText?: Cx.StringProp;
-      html?: Cx.StringProp;
-      innerHtml?: Cx.StringProp;
-      tooltip?: Cx.StringProp | Cx.StructuredProp;
-   }
-   namespace React {
-      interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
-         alt?: Cx.StringProp | undefined;
-         src?: Cx.StringProp | undefined;
-      }
-   }
+   interface Sorter extends SorterType {}
 
-   //this doesn't work, however, it would be nice if it does
-   // interface EventHandler<E extends React.SyntheticEvent<any>> {
-   //    (event: E, instance?: any): void;
-   // }
+   interface CollatorOptions extends CollatorOptionsType {}
 }
diff --git a/packages/cx/src/data/AggregateFunction.d.ts b/packages/cx/src/data/AggregateFunction.d.ts
deleted file mode 100644
index b9198bd1e..000000000
--- a/packages/cx/src/data/AggregateFunction.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-interface Aggregator {
-   process(value: number, weight?: number);
-   getResult(): number;
-}
-
-export class AggregateFunction {
-   static sum(): Aggregator;
-
-   static avg(): Aggregator;
-
-   static count(): Aggregator;
-
-   static distinct(): Aggregator;
-
-   static min(): Aggregator;
-
-   static max(): Aggregator;
-
-   static last(): Aggregator;
-}
diff --git a/packages/cx/src/data/AggregateFunction.js b/packages/cx/src/data/AggregateFunction.js
deleted file mode 100644
index f7dd57fa0..000000000
--- a/packages/cx/src/data/AggregateFunction.js
+++ /dev/null
@@ -1,145 +0,0 @@
-export class AggregateFunction {
-   static sum() {
-      return new Sum();
-   }
-
-   static avg() {
-      return new Avg();
-   }
-
-   static count() {
-      return new Count();
-   }
-
-   static distinct() {
-      return new Distinct();
-   }
-
-   static min() {
-      return new Min();
-   }
-
-   static max() {
-      return new Max();
-   }
-
-   static last() {
-      return new LastValue();
-   }
-}
-
-class Sum {
-   process(value) {
-      this.empty = false;
-      if (!isNaN(value)) this.result += value;
-      else this.invalid = true;
-   }
-
-   getResult() {
-      if (this.invalid) return null;
-      return this.result;
-   }
-}
-
-Sum.prototype.result = 0;
-Sum.prototype.empty = true;
-
-class Avg {
-   process(value, count = 1) {
-      this.empty = false;
-      if (!isNaN(value) && !isNaN(count)) {
-         this.result += value * count;
-         this.count += count;
-      } else this.invalid = true;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid || this.count == 0) return null;
-      return this.result / this.count;
-   }
-}
-
-Avg.prototype.result = 0;
-Avg.prototype.count = 0;
-Avg.prototype.empty = true;
-
-class Count {
-   process(value) {
-      if (value != null) this.result++;
-   }
-
-   getResult() {
-      return this.result;
-   }
-}
-
-Count.prototype.result = 0;
-
-class Distinct {
-   constructor() {
-      this.values = {};
-   }
-
-   process(value) {
-      if (value == null || this.values[value]) return;
-      this.values[value] = true;
-      this.empty = false;
-      this.result++;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid) return null;
-      return this.result;
-   }
-}
-
-Distinct.prototype.result = 0;
-Distinct.prototype.empty = true;
-
-class Max {
-   process(value) {
-      if (!isNaN(value)) {
-         if (this.empty) this.result = value;
-         else if (value > this.result) this.result = value;
-         this.empty = false;
-      } else if (value != null) this.invalid = true;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid) return null;
-      return this.result;
-   }
-}
-
-Max.prototype.result = 0;
-Max.prototype.empty = true;
-
-class Min {
-   process(value) {
-      if (!isNaN(value)) {
-         if (this.empty) this.result = value;
-         else if (value < this.result) this.result = value;
-         this.empty = false;
-      } else if (value != null) this.invalid = true;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid) return null;
-      return this.result;
-   }
-}
-
-Min.prototype.result = 0;
-Min.prototype.empty = true;
-
-class LastValue {
-   process(value) {
-      this.result = value;
-   }
-
-   getResult() {
-      return this.result;
-   }
-}
-
-LastValue.prototype.result = null;
diff --git a/packages/cx/src/data/AggregateFunction.ts b/packages/cx/src/data/AggregateFunction.ts
new file mode 100644
index 000000000..185cffaac
--- /dev/null
+++ b/packages/cx/src/data/AggregateFunction.ts
@@ -0,0 +1,171 @@
+export class AggregateFunction {
+   static sum() {
+      return new Sum();
+   }
+
+   static avg() {
+      return new Avg();
+   }
+
+   static count() {
+      return new Count();
+   }
+
+   static distinct() {
+      return new Distinct();
+   }
+
+   static min() {
+      return new Min();
+   }
+
+   static max() {
+      return new Max();
+   }
+
+   static last() {
+      return new LastValue();
+   }
+}
+
+class Sum {
+   result: number = 0;
+   empty: boolean = true;
+   invalid?: boolean;
+
+   process(value: number): void {
+      this.empty = false;
+      if (!isNaN(value)) this.result += value;
+      else this.invalid = true;
+   }
+
+   getResult() {
+      if (this.invalid) return null;
+      return this.result;
+   }
+}
+
+Sum.prototype.result = 0;
+Sum.prototype.empty = true;
+
+class Avg {
+   result: number = 0;
+   count: number = 0;
+   empty: boolean = true;
+   invalid?: boolean;
+
+   process(value: number, count: number = 1): void {
+      this.empty = false;
+      if (!isNaN(value) && !isNaN(count)) {
+         this.result += value * count;
+         this.count += count;
+      } else this.invalid = true;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid || this.count == 0) return null;
+      return this.result / this.count;
+   }
+}
+
+Avg.prototype.result = 0;
+Avg.prototype.count = 0;
+Avg.prototype.empty = true;
+
+class Count {
+   result: number = 0;
+
+   process(value: any): void {
+      if (value != null) this.result++;
+   }
+
+   getResult() {
+      return this.result;
+   }
+}
+
+Count.prototype.result = 0;
+
+class Distinct {
+   values: {[key: string]: boolean} = {};
+   empty: boolean = true;
+   result: number = 0;
+   invalid?: boolean;
+
+   constructor() {
+      this.values = {};
+   }
+
+   process(value: any): void {
+      if (value == null || this.values[value]) return;
+      this.values[value] = true;
+      this.empty = false;
+      this.result++;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid) return null;
+      return this.result;
+   }
+}
+
+Distinct.prototype.result = 0;
+Distinct.prototype.empty = true;
+
+class Max {
+   result: number = 0;
+   empty: boolean = true;
+   invalid?: boolean;
+
+   process(value: number): void {
+      if (!isNaN(value)) {
+         if (this.empty) this.result = value;
+         else if (value > this.result) this.result = value;
+         this.empty = false;
+      } else if (value != null) this.invalid = true;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid) return null;
+      return this.result;
+   }
+}
+
+Max.prototype.result = 0;
+Max.prototype.empty = true;
+
+class Min {
+   result: number = 0;
+   empty: boolean = true;
+   invalid?: boolean;
+
+   process(value: number): void {
+      if (!isNaN(value)) {
+         if (this.empty) this.result = value;
+         else if (value < this.result) this.result = value;
+         this.empty = false;
+      } else if (value != null) this.invalid = true;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid) return null;
+      return this.result;
+   }
+}
+
+Min.prototype.result = 0;
+Min.prototype.empty = true;
+
+class LastValue {
+   result: any = null;
+
+   process(value: any): void {
+      this.result = value;
+   }
+
+   getResult() {
+      return this.result;
+   }
+}
+
+LastValue.prototype.result = null;
diff --git a/packages/cx/src/data/ArrayElementView.d.ts b/packages/cx/src/data/ArrayElementView.d.ts
deleted file mode 100644
index 2b5e494df..000000000
--- a/packages/cx/src/data/ArrayElementView.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Accessor} from "./getAccessor";
-import {AugmentedViewBase} from "./AugmentedViewBase";
-
-export abstract class ArrayElementView extends AugmentedViewBase {
-   arrayAccessor: Accessor;
-   immutable: boolean;
-   recordAlias: string;
-   indexAlias: string;
-   lengthAlias: string;
-
-   setIndex(itemIndex: number): void;
-}
-
diff --git a/packages/cx/src/data/ArrayElementView.js b/packages/cx/src/data/ArrayElementView.js
deleted file mode 100644
index a1a262819..000000000
--- a/packages/cx/src/data/ArrayElementView.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { AugmentedViewBase } from "./AugmentedViewBase";
-import { isArray } from "../util/isArray";
-import { Binding } from "./Binding";
-
-export class ArrayElementView extends AugmentedViewBase {
-   constructor(config) {
-      super(config);
-      this.hasNestedAliases =
-         this.recordAlias.indexOf(".") >= 0 || this.indexAlias.indexOf(".") >= 0 || this.lengthAlias.indexOf(".") >= 0;
-      this.recordBinding = Binding.get(this.recordAlias);
-      if (this.hasNestedAliases) {
-         this.indexBinding = Binding.get(this.indexAlias);
-         this.lengthAlias = Binding.get(this.lengthAlias);
-      }
-   }
-
-   getExtraKeyBinding(key) {
-      if (!key.startsWith(this.recordAlias)) return null;
-      if (key.length == this.recordAlias.length || key[this.recordAlias.length] == ".") return this.recordBinding;
-      return null;
-   }
-
-   deleteExtraKeyValue(key) {
-      if (key != this.recordAlias) throw new Error(`Field ${key} cannot be deleted.`);
-      const array = this.arrayAccessor.get(this.store.getData());
-      if (!array) return false;
-      const newArray = [...array.slice(0, this.itemIndex), ...array.slice(this.itemIndex + 1)];
-      return this.arrayAccessor.set(newArray, this.store);
-   }
-
-   setExtraKeyValue(key, value) {
-      if (key != this.recordAlias) throw new Error(`Field ${key} is read-only.`);
-      const array = this.arrayAccessor.get(this.store.getData());
-      if (!array || value === array[this.itemIndex]) return false;
-      const newArray = [...array.slice(0, this.itemIndex), value, ...array.slice(this.itemIndex + 1)];
-      return this.arrayAccessor.set(newArray, this.store);
-   }
-
-   embedAugmentData(result, parentStoreData) {
-      let array = this.arrayAccessor.get(parentStoreData);
-      if (!isArray(array)) return;
-      if (!this.hasNestedAliases) {
-         result[this.recordAlias] = array[this.itemIndex];
-         result[this.indexAlias] = this.itemIndex;
-         result[this.lengthAlias] = array.length;
-      } else {
-         let copy = result;
-         copy = this.recordBinding.set(copy, array[this.itemIndex]);
-         copy = this.indexBinding.set(copy, this.itemIndex);
-         copy = this.lengthAlias.set(copy, array.length);
-         result[this.recordBinding.parts[0]] = copy[this.recordBinding.parts[0]];
-         result[this.indexBinding.parts[0]] = copy[this.indexBinding.parts[0]];
-         result[this.lengthAlias.parts[0]] = copy[this.lengthAlias.parts[0]];
-      }
-   }
-
-   setIndex(itemIndex) {
-      this.itemIndex = itemIndex;
-   }
-}
-
-ArrayElementView.prototype.recordAlias = "$record";
-ArrayElementView.prototype.indexAlias = "$index";
-ArrayElementView.prototype.lengthAlias = "$length";
diff --git a/packages/cx/src/data/ArrayElementView.spec.js b/packages/cx/src/data/ArrayElementView.spec.js
deleted file mode 100644
index cb2f50ec8..000000000
--- a/packages/cx/src/data/ArrayElementView.spec.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import assert from "assert";
-import { ArrayElementView } from "./ArrayElementView";
-import { getAccessor } from "./getAccessor";
-import { Store } from "./Store";
-
-describe("ArrayElementView", function () {
-   it("exposes the element as under the $record alias", function () {
-      let letters = [{ letter: "A" }, { letter: "B" }];
-      let store = new Store({ data: { letters } });
-      let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
-      let record = elementView.get("$record");
-      assert.equal(record, letters[1]);
-   });
-
-   it("changes of the $record are propagated", function () {
-      let letters = [{ letter: "A" }, { letter: "B" }];
-      let store = new Store({ data: { letters } });
-      let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
-      elementView.set("$record.letter", "C");
-      assert.deepEqual(store.get("letters"), [letters[0], { letter: "C" }]);
-   });
-
-   it("removes the element if the $record is deleted", function () {
-      let letters = [{ letter: "A" }, { letter: "B" }];
-      let store = new Store({ data: { letters } });
-      let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
-      elementView.delete("$record");
-      assert.deepEqual(store.get("letters"), [...letters[0]]);
-   });
-
-   it("exposes the element as under the given alias", function () {
-      let letters = [{ letter: "A" }, { letter: "B" }];
-      let store = new Store({ data: { letters } });
-      let elementView = new ArrayElementView({
-         store,
-         itemIndex: 1,
-         arrayAccessor: getAccessor({ bind: "letters" }),
-         recordAlias: "$letter",
-      });
-      let record = elementView.get("$letter");
-      assert.equal(record, letters[1]);
-   });
-
-   it("aliases allow nesting", function () {
-      let letters = [{ letter: "A" }, { letter: "B" }];
-      let store = new Store({ data: { letters } });
-      let elementView = new ArrayElementView({
-         store,
-         itemIndex: 1,
-         arrayAccessor: getAccessor({ bind: "letters" }),
-         recordAlias: "$iter.letter",
-         indexAlias: "$iter.index.letter",
-      });
-      let record = elementView.get("$iter.letter");
-      assert.equal(record, letters[1]);
-      assert.equal(elementView.get("$iter.index.letter"), 1);
-
-      elementView.set("$iter.letter.letter", "C");
-      assert.equal(store.get("letters.1.letter"), "C");
-   });
-
-   it("when immutable preserves the parent data object", function () {
-      let letters = [{ letter: "A" }, { letter: "B" }];
-      let store = new Store({ data: { letters } });
-      let elementView = new ArrayElementView({
-         store,
-         itemIndex: 1,
-         arrayAccessor: getAccessor({ bind: "letters" }),
-         immutable: true,
-      });
-      let record = elementView.get("$record");
-      assert.equal(record, letters[1]);
-      assert(!store.getData().hasOwnProperty("$record"));
-   });
-
-   it("respects the parent's store sealed flag", function () {
-      let letters = [{ letter: "A" }, { letter: "B" }];
-      let store = new Store({ data: { letters }, sealed: true });
-      let elementView = new ArrayElementView({
-         store,
-         itemIndex: 1,
-         arrayAccessor: getAccessor({ bind: "letters" }),
-      });
-      let record = elementView.get("$record");
-      assert.equal(record, letters[1]);
-      assert(!store.getData().hasOwnProperty("$record"));
-   });
-});
diff --git a/packages/cx/src/data/ArrayElementView.spec.ts b/packages/cx/src/data/ArrayElementView.spec.ts
new file mode 100644
index 000000000..573360d49
--- /dev/null
+++ b/packages/cx/src/data/ArrayElementView.spec.ts
@@ -0,0 +1,88 @@
+import assert from "assert";
+import { ArrayElementView } from "./ArrayElementView";
+import { getAccessor } from "./getAccessor";
+import { Store } from "./Store";
+
+describe("ArrayElementView", function () {
+   it("exposes the element as under the $record alias", function () {
+      let letters = [{ letter: "A" }, { letter: "B" }];
+      let store = new Store({ data: { letters } });
+      let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
+      let record = elementView.get("$record");
+      assert.equal(record, letters[1]);
+   });
+
+   it("changes of the $record are propagated", function () {
+      let letters = [{ letter: "A" }, { letter: "B" }];
+      let store = new Store({ data: { letters } });
+      let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
+      elementView.set("$record.letter", "C");
+      assert.deepEqual(store.get("letters"), [letters[0], { letter: "C" }]);
+   });
+
+   it("removes the element if the $record is deleted", function () {
+      let letters = [{ letter: "A" }, { letter: "B" }];
+      let store = new Store({ data: { letters } });
+      let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
+      elementView.delete("$record");
+      assert.deepEqual(store.get("letters"), [letters[0]]);
+   });
+
+   it("exposes the element as under the given alias", function () {
+      let letters = [{ letter: "A" }, { letter: "B" }];
+      let store = new Store({ data: { letters } });
+      let elementView = new ArrayElementView({
+         store,
+         itemIndex: 1,
+         arrayAccessor: getAccessor({ bind: "letters" }),
+         recordAlias: "$letter",
+      });
+      let record = elementView.get("$letter");
+      assert.equal(record, letters[1]);
+   });
+
+   it("aliases allow nesting", function () {
+      let letters = [{ letter: "A" }, { letter: "B" }];
+      let store = new Store({ data: { letters } });
+      let elementView = new ArrayElementView({
+         store,
+         itemIndex: 1,
+         arrayAccessor: getAccessor({ bind: "letters" }),
+         recordAlias: "$iter.letter",
+         indexAlias: "$iter.index.letter",
+      });
+      let record = elementView.get("$iter.letter");
+      assert.equal(record, letters[1]);
+      assert.equal(elementView.get("$iter.index.letter"), 1);
+
+      elementView.set("$iter.letter.letter", "C");
+      assert.equal(store.get("letters.1.letter"), "C");
+   });
+
+   it("when immutable preserves the parent data object", function () {
+      let letters = [{ letter: "A" }, { letter: "B" }];
+      let store = new Store({ data: { letters } });
+      let elementView = new ArrayElementView({
+         store,
+         itemIndex: 1,
+         arrayAccessor: getAccessor({ bind: "letters" }),
+         immutable: true,
+      });
+      let record = elementView.get("$record");
+      assert.equal(record, letters[1]);
+      assert(!store.getData().hasOwnProperty("$record"));
+   });
+
+   it("respects the parent's store sealed flag", function () {
+      let letters = [{ letter: "A" }, { letter: "B" }];
+      let store = new Store({ data: { letters }, sealed: true });
+      let elementView = new ArrayElementView({
+         store,
+         itemIndex: 1,
+         arrayAccessor: getAccessor({ bind: "letters" }),
+      });
+      let record = elementView.get("$record");
+      assert.equal(record, letters[1]);
+      assert(!store.getData().hasOwnProperty("$record"));
+   });
+});
diff --git a/packages/cx/src/data/ArrayElementView.ts b/packages/cx/src/data/ArrayElementView.ts
new file mode 100644
index 000000000..ec9298309
--- /dev/null
+++ b/packages/cx/src/data/ArrayElementView.ts
@@ -0,0 +1,90 @@
+import { AugmentedViewBase } from "./AugmentedViewBase";
+import { isArray } from "../util/isArray";
+import { Binding } from "./Binding";
+import { View } from "./View";
+
+export interface ArrayElementViewConfig {
+   store: View;
+   arrayAccessor: any;
+   immutable?: boolean;
+   recordAlias?: string;
+   indexAlias?: string;
+   lengthAlias?: string;
+   hasNestedAliases?: boolean;
+   recordBinding?: any;
+   indexBinding?: any;
+   lengthBinding?: any;
+   itemIndex: number;
+   sealed?: boolean;
+}
+
+export class ArrayElementView extends AugmentedViewBase {
+   declare arrayAccessor: any;
+   declare recordAlias: string;
+   declare indexAlias: string;
+   declare lengthAlias: string;
+   declare hasNestedAliases?: boolean;
+   declare recordBinding?: any;
+   declare indexBinding?: any;
+   declare lengthBinding?: any;
+   declare itemIndex: number;
+
+   constructor(config: ArrayElementViewConfig) {
+      super(config);
+      this.hasNestedAliases =
+         this.recordAlias.indexOf(".") >= 0 || this.indexAlias.indexOf(".") >= 0 || this.lengthAlias.indexOf(".") >= 0;
+      this.recordBinding = Binding.get(this.recordAlias);
+      if (this.hasNestedAliases) {
+         this.indexBinding = Binding.get(this.indexAlias);
+         this.lengthBinding = Binding.get(this.lengthAlias);
+      }
+   }
+
+   getExtraKeyBinding(key: string): any {
+      if (!key.startsWith(this.recordAlias)) return null;
+      if (key.length == this.recordAlias.length || key[this.recordAlias.length] == ".") return this.recordBinding;
+      return null;
+   }
+
+   deleteExtraKeyValue(key: string): boolean {
+      if (key != this.recordAlias) throw new Error(`Field ${key} cannot be deleted.`);
+      const array = this.arrayAccessor.get(this.store.getData());
+      if (!array) return false;
+      const newArray = [...array.slice(0, this.itemIndex), ...array.slice(this.itemIndex + 1)];
+      return this.arrayAccessor.set(newArray, this.store);
+   }
+
+   setExtraKeyValue(key: string, value: any): boolean {
+      if (key != this.recordAlias) throw new Error(`Field ${key} is read-only.`);
+      const array = this.arrayAccessor.get(this.store.getData());
+      if (!array || value === array[this.itemIndex]) return false;
+      const newArray = [...array.slice(0, this.itemIndex), value, ...array.slice(this.itemIndex + 1)];
+      return this.arrayAccessor.set(newArray, this.store);
+   }
+
+   embedAugmentData(result: any, parentStoreData: any): void {
+      let array = this.arrayAccessor.get(parentStoreData);
+      if (!isArray(array)) return;
+      if (!this.hasNestedAliases) {
+         result[this.recordAlias] = array[this.itemIndex];
+         result[this.indexAlias] = this.itemIndex;
+         result[this.lengthAlias] = array.length;
+      } else {
+         let copy = result;
+         copy = this.recordBinding.set(copy, array[this.itemIndex]);
+         copy = this.indexBinding.set(copy, this.itemIndex);
+         copy = this.lengthBinding.set(copy, array.length);
+         result[this.recordBinding.parts[0]] = copy[this.recordBinding.parts[0]];
+         result[this.indexBinding.parts[0]] = copy[this.indexBinding.parts[0]];
+         result[this.lengthBinding.parts[0]] = copy[this.lengthBinding.parts[0]];
+      }
+   }
+
+   setIndex(itemIndex: number): void {
+      this.itemIndex = itemIndex;
+   }
+}
+
+ArrayElementView.prototype.recordAlias = "$record";
+ArrayElementView.prototype.indexAlias = "$index";
+ArrayElementView.prototype.lengthAlias = "$length";
diff --git a/packages/cx/src/data/ArrayRef.d.ts b/packages/cx/src/data/ArrayRef.d.ts
deleted file mode 100644
index b4b906e59..000000000
--- a/packages/cx/src/data/ArrayRef.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {Ref} from "./Ref";
-
-export class ArrayRef<T = any> extends Ref<T[]> {
-   append(...args: T[]);
-
-   insert(index, ...args: T[]);
-
-   filter(predicate: (item: T, index?: number) => boolean);
-
-   move(fromIndex: number, toIndex: number);
-
-   clear();
-
-   sort(compare: (a: T, b: T) => number);
-}
\ No newline at end of file
diff --git a/packages/cx/src/data/ArrayRef.js b/packages/cx/src/data/ArrayRef.js
deleted file mode 100644
index e7fd89895..000000000
--- a/packages/cx/src/data/ArrayRef.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import {Ref} from "./Ref";
-import {append} from "./ops/append";
-import {moveElement} from "./ops/moveElement";
-import {insertElement} from "./ops/insertElement";
-
-export class ArrayRef extends Ref {
-   append(...args) {
-      this.update(append, ...args);
-   }
-
-   insert(index, ...args) {
-      this.update(insertElement, ...args)
-   }
-
-   filter(predicate) {
-      this.update(array => array.filter(a => predicate(a)));
-   }
-
-   move(fromIndex, toIndex) {
-      this.update(moveElement, fromIndex, toIndex);
-   }
-
-   clear() {
-      this.set([]);
-   }
-
-   sort(compare) {
-      let data = this.get();
-      if (!data)
-         return;
-      let x = [...data];
-      x.sort(compare);
-      this.set(x);
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/data/ArrayRef.ts b/packages/cx/src/data/ArrayRef.ts
new file mode 100644
index 000000000..4ad066c6f
--- /dev/null
+++ b/packages/cx/src/data/ArrayRef.ts
@@ -0,0 +1,35 @@
+import {Ref} from "./Ref";
+import {append} from "./ops/append";
+import {moveElement} from "./ops/moveElement";
+import {insertElement} from "./ops/insertElement";
+
+export class ArrayRef<T = any> extends Ref<T[]> {
+   append(...args: T[]): void {
+      this.update(append, ...args);
+   }
+
+   insert(index: number, ...args: T[]): void {
+      this.update(insertElement, ...args)
+   }
+
+   filter(predicate: (item: T, index?: number) => boolean): void {
+      this.update(array => array.filter(a => predicate(a)));
+   }
+
+   move(fromIndex: number, toIndex: number): void {
+      this.update(moveElement, fromIndex, toIndex);
+   }
+
+   clear(): void {
+      this.set([]);
+   }
+
+   sort(compare: (a: T, b: T) => number): void {
+      let data = this.get();
+      if (!data)
+         return;
+      let x = [...data];
+      x.sort(compare);
+      this.set(x);
+   }
+}
\ No newline at end of file
diff --git a/packages/cx/src/data/AugmentedViewBase.d.ts b/packages/cx/src/data/AugmentedViewBase.d.ts
deleted file mode 100644
index abe08e8ed..000000000
--- a/packages/cx/src/data/AugmentedViewBase.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { View, ViewConfig } from "./View";
-import * as Cx from "../core";
-
-export interface AugmentedViewBaseConfig extends ViewConfig {
-   immutable?: boolean;
-}
-
-export abstract class AugmentedViewBase extends View {
-   constructor(config: AugmentedViewBaseConfig);
-
-   protected abstract setExtraKeyValue(key: string, value: any): boolean;
-
-   protected abstract deleteExtraKeyValue(key: string): boolean;
-
-   protected abstract isExtraKey(key: string): boolean;
-
-   protected abstract embedAugmentData(result: Cx.Record, parentStoreData: Cx.Record): void;
-}
diff --git a/packages/cx/src/data/AugmentedViewBase.js b/packages/cx/src/data/AugmentedViewBase.js
deleted file mode 100644
index cf3acaabc..000000000
--- a/packages/cx/src/data/AugmentedViewBase.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { View } from "./View";
-import { Binding } from "./Binding";
-
-export class AugmentedViewBase extends View {
-   getData() {
-      if (this.sealed && this.meta.version === this.cache.version && this.meta === this.store.meta)
-         return this.cache.result;
-      let parentStoreData = this.store.getData();
-      let result = this.getBaseData(parentStoreData);
-      this.embedAugmentData(result, parentStoreData);
-      this.cache.result = result;
-      this.cache.parentStoreData = parentStoreData;
-      this.cache.version = this.meta.version;
-      this.meta = this.store.meta;
-      return this.cache.result;
-   }
-
-   getBaseData(parentStoreData) {
-      if (this.sealed || this.immutable || this.store.sealed) return { ...parentStoreData };
-      return parentStoreData;
-   }
-
-   embedAugmentData(result, parentStoreData) {
-      throw new Error("abstract");
-   }
-
-   isExtraKey(key) {
-      throw new Error("abstract");
-   }
-
-   // Stores which need to support nested aliases should override this method
-   getExtraKeyBinding(key) {
-      let binding = Binding.get(key);
-      return this.isExtraKey(binding.parts[0]) ? Binding.get(binding.parts[0]) : null;
-   }
-
-   setExtraKeyValue(key, value) {
-      throw new Error("abstract");
-   }
-
-   deleteExtraKeyValue(key) {
-      throw new Error("abstract");
-   }
-
-   setItem(path, value) {
-      let extraKeyBinding = this.getExtraKeyBinding(path);
-      if (extraKeyBinding) {
-         let binding = Binding.get(path);
-         let newValue = value;
-         if (binding.parts.length > extraKeyBinding.parts.length) {
-            let data = {};
-            this.embedAugmentData(data, this.store.getData());
-            let binding = Binding.get(path);
-            data = binding.set(data, value);
-            newValue = extraKeyBinding.value(data);
-         }
-         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
-      }
-      return super.setItem(path, value);
-   }
-
-   deleteItem(path) {
-      let extraKeyBinding = this.getExtraKeyBinding(path);
-      if (extraKeyBinding) {
-         if (path == extraKeyBinding.path) return this.deleteExtraKeyValue(extraKeyBinding.path);
-         let data = {};
-         this.embedAugmentData(data, this.store.getData());
-         let binding = Binding.get(path);
-         data = binding.delete(data);
-         let newValue = extraKeyBinding.value(data);
-         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
-      }
-      return super.deleteItem(path);
-   }
-}
-
-AugmentedViewBase.prototype.immutable = false;
diff --git a/packages/cx/src/data/AugmentedViewBase.ts b/packages/cx/src/data/AugmentedViewBase.ts
new file mode 100644
index 000000000..247d6c7a5
--- /dev/null
+++ b/packages/cx/src/data/AugmentedViewBase.ts
@@ -0,0 +1,88 @@
+import { View, ViewConfig } from "./View";
+import { Binding } from "./Binding";
+
+export interface AugmentedViewBaseConfig extends ViewConfig {
+   store: View<any>;
+}
+
+export class AugmentedViewBase<D = any> extends View<D> {
+   declare immutable: boolean;
+   declare store: View;
+
+   constructor(config: AugmentedViewBaseConfig) {
+      super(config);
+   }
+
+   getData() {
+      if (this.sealed && this.meta.version === this.cache.version && this.meta === this.store.meta)
+         return this.cache.result;
+      let parentStoreData = this.store.getData();
+      let result = this.getBaseData(parentStoreData);
+      this.embedAugmentData(result, parentStoreData);
+      this.cache.result = result;
+      this.cache.parentStoreData = parentStoreData;
+      this.cache.version = this.meta.version;
+      this.meta = this.store.meta;
+      return this.cache.result;
+   }
+
+   protected getBaseData(parentStoreData: any): any {
+      if (this.sealed || this.immutable || this.store.sealed) return { ...parentStoreData };
+      return parentStoreData;
+   }
+
+   protected embedAugmentData(result: any, parentStoreData: any): void {
+      throw new Error("abstract");
+   }
+
+   protected isExtraKey(key: string): boolean {
+      throw new Error("abstract");
+   }
+
+   // Stores which need to support nested aliases should override this method
+   protected getExtraKeyBinding(key: string): any {
+      let binding = Binding.get(key);
+      return this.isExtraKey(binding.parts[0]) ? Binding.get(binding.parts[0]) : null;
+   }
+
+   protected setExtraKeyValue(key: string, value: any): boolean {
+      throw new Error("abstract");
+   }
+
+   protected deleteExtraKeyValue(key: string): boolean {
+      throw new Error("abstract");
+   }
+
+   setItem(path: string, value: any): boolean {
+      let extraKeyBinding = this.getExtraKeyBinding(path);
+      if (extraKeyBinding) {
+         let binding = Binding.get(path);
+         let newValue = value;
+         if (binding.parts.length > extraKeyBinding.parts.length) {
+            let data = {};
+            this.embedAugmentData(data, this.store.getData());
+            let binding = Binding.get(path);
+            data = binding.set(data, value);
+            newValue = extraKeyBinding.value(data);
+         }
+         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
+      }
+      return super.setItem(path, value);
+   }
+
+   deleteItem(path: string): boolean {
+      let extraKeyBinding = this.getExtraKeyBinding(path);
+      if (extraKeyBinding) {
+         if (path == extraKeyBinding.path) return this.deleteExtraKeyValue(extraKeyBinding.path);
+         let data = {};
+         this.embedAugmentData(data, this.store.getData());
+         let binding = Binding.get(path);
+         data = binding.delete(data);
+         let newValue = extraKeyBinding.value(data);
+         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
+      }
+      return super.deleteItem(path);
+   }
+}
+
+AugmentedViewBase.prototype.immutable = false;
diff --git a/packages/cx/src/data/Binding.d.ts b/packages/cx/src/data/Binding.d.ts
deleted file mode 100644
index 9fbc5d3ff..000000000
--- a/packages/cx/src/data/Binding.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Record, AccessorChain, Bind } from "../core";
-
-export class Binding<V = any> {
-   constructor(path: string);
-
-   readonly path: string;
-
-   set(state: Record, value: V): Record;
-
-   delete(state: Record): Record;
-
-   value(state: Record): any;
-
-   static get(path: string): Binding;
-   static get(bind: Bind): Binding;
-   static get<V>(chain: AccessorChain<V>): Binding<V>;
-}
-
-export function isBinding(value: any): boolean;
diff --git a/packages/cx/src/data/Binding.js b/packages/cx/src/data/Binding.js
deleted file mode 100644
index 45f9d4da1..000000000
--- a/packages/cx/src/data/Binding.js
+++ /dev/null
@@ -1,76 +0,0 @@
-let bindingCache = {};
-import { isString } from "../util/isString";
-import { isObject } from "../util/isObject";
-import { isAccessorChain } from "./createAccessorModelProxy";
-
-export class Binding {
-   constructor(path) {
-      this.path = path;
-      this.parts = path.split(".");
-      let body = "return x";
-      for (let i = 0; i < this.parts.length; i++) body += '?.["' + this.parts[i] + '"]';
-      this.value = new Function("x", body);
-   }
-
-   set(state, value) {
-      let cv = this.value(state);
-      if (cv === value) return state;
-
-      let ns = Object.assign({}, state);
-      let o = ns;
-
-      for (let i = 0; i < this.parts.length; i++) {
-         let part = this.parts[i];
-         let no = i == this.parts.length - 1 ? value : Object.assign({}, o[part]);
-         o[part] = no;
-         o = no;
-      }
-
-      return ns;
-   }
-
-   delete(state) {
-      let ns = Object.assign({}, state);
-      let o = ns;
-      let part;
-
-      for (let i = 0; i < this.parts.length - 1; i++) {
-         part = this.parts[i];
-         let no = Object.assign({}, o[part]);
-         o[part] = no;
-         o = no;
-      }
-
-      part = this.parts[this.parts.length - 1];
-      if (!o.hasOwnProperty(part)) return state;
-
-      delete o[part];
-
-      return ns;
-   }
-
-   static get(path) {
-      if (isString(path)) {
-         let b = bindingCache[path];
-         if (b) return b;
-
-         b = new Binding(path);
-         bindingCache[path] = b;
-         return b;
-      }
-
-      if (isObject(path) && isString(path.bind)) return this.get(path.bind);
-
-      if (path instanceof Binding) return path;
-
-      if (isAccessorChain(path)) return this.get(path.toString());
-
-      throw new Error("Invalid binding definition provided.");
-   }
-}
-
-export function isBinding(value) {
-   if (isObject(value) && isString(value.bind)) return true;
-   if (value && value.isAccessorChain) return true;
-   return value instanceof Binding;
-}
diff --git a/packages/cx/src/data/Binding.spec.js b/packages/cx/src/data/Binding.spec.ts
similarity index 100%
rename from packages/cx/src/data/Binding.spec.js
rename to packages/cx/src/data/Binding.spec.ts
diff --git a/packages/cx/src/data/Binding.ts b/packages/cx/src/data/Binding.ts
new file mode 100644
index 000000000..72f366bae
--- /dev/null
+++ b/packages/cx/src/data/Binding.ts
@@ -0,0 +1,104 @@
+import { isString } from "../util/isString";
+import { isObject } from "../util/isObject";
+import { isAccessorChain } from "./createAccessorModelProxy";
+import { AccessorChain } from "./createAccessorModelProxy";
+import { hasStringAtKey, hasValueAtKey } from "../util/hasKey";
+
+let bindingCache: Record<string, Binding<any>> = {};
+
+export interface BindingObject {
+   bind: string;
+   defaultValue?: any;
+   throttle?: number;
+   debounce?: number;
+}
+
+export type BindingInput<T = any> = string | BindingObject | Binding<T> | AccessorChain<T>;
+
+export type ValueGetter<T> = (state: any) => T | undefined;
+
+export class Binding<T = any> {
+   public readonly path: string;
+   public readonly parts: readonly string[];
+   public readonly value: ValueGetter<T>;
+
+   constructor(path: string) {
+      this.path = path;
+      this.parts = path.split(".") as readonly string[];
+      let body = "return x";
+      for (let i = 0; i < this.parts.length; i++) body += '?.["' + this.parts[i] + '"]';
+      this.value = new Function("x", body) as ValueGetter<T>;
+   }
+
+   set<S extends Record<string, any> = any>(state: S, value: T): S {
+      const cv = this.value(state);
+      if (cv === value) return state;
+
+      const ns = Object.assign({}, state) as S;
+      let o: any = ns;
+
+      for (let i = 0; i < this.parts.length; i++) {
+         const part = this.parts[i];
+         const no = i === this.parts.length - 1 ? value : Object.assign({}, o[part]);
+         o[part] = no;
+         o = no;
+      }
+
+      return ns;
+   }
+
+   delete<S extends Record<string, any> = any>(state: S): S {
+      const ns = Object.assign({}, state) as S;
+      let o: any = ns;
+      let part: string;
+
+      for (let i = 0; i < this.parts.length - 1; i++) {
+         part = this.parts[i];
+         const no = Object.assign({}, o[part]);
+         o[part] = no;
+         o = no;
+      }
+
+      part = this.parts[this.parts.length - 1];
+      if (!o.hasOwnProperty(part)) return state;
+
+      delete o[part];
+
+      return ns;
+   }
+
+   static get<T = any>(path: BindingInput<T>): Binding<T> {
+      if (isString(path)) {
+         let b = bindingCache[path] as Binding<T> | undefined;
+         if (b) return b;
+
+         b = new Binding<T>(path);
+         bindingCache[path] = b;
+         return b;
+      }
+
+      if (isBindingObject(path)) return this.get<T>(path.bind);
+
+      if (path instanceof Binding) return path as Binding<T>;
+
+      if (isAccessorChain(path)) return this.get<T>((path as AccessorChain<T>).toString());
+
+      throw new Error("Invalid binding definition provided.");
+   }
+}
+
+export function isBinding(value: unknown): value is BindingInput {
+   if (isObject(value)) {
+      if (hasStringAtKey(value, "bind")) return true;
+      if (hasValueAtKey(value, "isAccessorChain", true)) return true;
+   }
+   return value instanceof Binding;
+}
+
+export type BindingValue<B> = B extends Binding<infer T> ? T : unknown;
+
+export function isBindingObject(value: unknown): value is BindingObject {
+   return isObject(value) && hasStringAtKey(value, "bind");
+}
+
+export { bindingCache };
diff --git a/packages/cx/src/data/ExposedRecordView.d.ts b/packages/cx/src/data/ExposedRecordView.d.ts
deleted file mode 100644
index 29a170d0f..000000000
--- a/packages/cx/src/data/ExposedRecordView.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {View, ViewConfig} from './View';
-
-interface ExposedRecordViewConfig extends ViewConfig {
-   itemIndex?: number;
-   immutable?: boolean;
-}
-
-export class ExposedRecordView extends View {
-   constructor(config?: ExposedRecordViewConfig);
-
-   setIndex(index: number);
-
-   setStore(store: View);
-}
diff --git a/packages/cx/src/data/ExposedRecordView.js b/packages/cx/src/data/ExposedRecordView.js
deleted file mode 100644
index e84642b8a..000000000
--- a/packages/cx/src/data/ExposedRecordView.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { View } from "./View";
-import { Binding } from "./Binding";
-
-export class ExposedRecordView extends View {
-   getData() {
-      if (
-         this.sealed &&
-         this.meta.version === this.cache.version &&
-         this.cache.itemIndex === this.itemIndex &&
-         this.meta === this.store.meta
-      )
-         return this.cache.result;
-
-      this.cache.result = this.embed(this.store.getData());
-      this.cache.version = this.meta.version;
-      this.cache.itemIndex = this.itemIndex;
-      this.meta = this.store.meta;
-      return this.cache.result;
-   }
-
-   embed(data) {
-      const collection = this.collectionBinding.value(data);
-      const record = collection[this.itemIndex];
-      const copy = this.sealed || this.immutable || this.store.sealed ? { ...data } : data;
-      copy[this.recordName] = record;
-      if (this.indexName) copy[this.indexName] = this.itemIndex;
-      return copy;
-   }
-
-   setIndex(index) {
-      this.itemIndex = index;
-   }
-
-   setItem(path, value) {
-      if (path == this.recordName || path.indexOf(this.recordName + ".") == 0) {
-         const storeData = this.store.getData();
-         const collection = this.collectionBinding.value(storeData);
-         const data = this.embed(storeData);
-         const d = Binding.get(path).set(data, value);
-         if (d === data) return false;
-         const record = d[this.recordName];
-         const newCollection = [
-            ...collection.slice(0, this.itemIndex),
-            record,
-            ...collection.slice(this.itemIndex + 1),
-         ];
-         return this.store.setItem(this.collectionBinding.path, newCollection);
-      }
-      return this.store.setItem(path, value);
-   }
-
-   deleteItem(path) {
-      let storeData, collection, newCollection;
-
-      if (path == this.recordName) {
-         storeData = this.store.getData();
-         collection = this.collectionBinding.value(storeData);
-         newCollection = [...collection.slice(0, this.itemIndex), ...collection.slice(this.itemIndex + 1)];
-         return this.store.setItem(this.collectionBinding.path, newCollection);
-      } else if (path.indexOf(this.recordName + ".") == 0) {
-         storeData = this.store.getData();
-         collection = this.collectionBinding.value(storeData);
-         const data = this.embed(storeData);
-         const d = Binding.get(path).delete(data);
-         if (d === data) return false;
-         const record = d[this.recordName];
-         newCollection = [...collection.slice(0, this.itemIndex), record, ...collection.slice(this.itemIndex + 1)];
-         return this.store.setItem(this.collectionBinding.path, newCollection);
-      }
-
-      return this.store.deleteItem(path);
-   }
-}
-
-ExposedRecordView.prototype.immutable = false;
diff --git a/packages/cx/src/data/ExposedRecordView.ts b/packages/cx/src/data/ExposedRecordView.ts
new file mode 100644
index 000000000..175a18952
--- /dev/null
+++ b/packages/cx/src/data/ExposedRecordView.ts
@@ -0,0 +1,95 @@
+import { View } from "./View";
+import { Binding } from "./Binding";
+
+export interface ExposedRecordViewConfig {
+   store: View;
+   itemIndex: number;
+   immutable?: boolean;
+   collectionBinding: any;
+   recordName: string;
+   indexName: string;
+}
+
+export class ExposedRecordView<D = any> extends View<D> {
+   declare store: View;
+   itemIndex: number;
+   immutable: boolean;
+   collectionBinding: Binding;
+   recordName: string;
+   indexName: string;
+
+   constructor(config: ExposedRecordViewConfig) {
+      super(config);
+   }
+
+   getData(): any {
+      if (
+         this.sealed &&
+         this.meta.version === this.cache.version &&
+         this.cache.itemIndex === this.itemIndex &&
+         this.meta === this.store.meta
+      )
+         return this.cache.result;
+
+      this.cache.result = this.embed(this.store.getData());
+      this.cache.version = this.meta.version;
+      this.cache.itemIndex = this.itemIndex;
+      this.meta = this.store.meta;
+      return this.cache.result;
+   }
+
+   embed(data: any) {
+      const collection = this.collectionBinding.value(data);
+      const record = collection[this.itemIndex];
+      const copy = this.sealed || this.immutable || this.store.sealed ? { ...data } : data;
+      copy[this.recordName] = record;
+      if (this.indexName) copy[this.indexName] = this.itemIndex;
+      return copy;
+   }
+
+   setIndex(index: number) {
+      this.itemIndex = index;
+   }
+
+   setItem(path: string, value: any) {
+      if (path == this.recordName || path.indexOf(this.recordName + ".") == 0) {
+         const storeData = this.store.getData();
+         const collection = this.collectionBinding.value(storeData);
+         const data = this.embed(storeData);
+         const d = Binding.get(path).set(data, value);
+         if (d === data) return false;
+         const record = d[this.recordName];
+         const newCollection = [
+            ...collection.slice(0, this.itemIndex),
+            record,
+            ...collection.slice(this.itemIndex + 1),
+         ];
+         return this.store.setItem(this.collectionBinding.path, newCollection);
+      }
+      return this.store.setItem(path, value);
+   }
+
+   deleteItem(path: string) {
+      let storeData, collection, newCollection;
+
+      if (path == this.recordName) {
+         storeData = this.store.getData();
+         collection = this.collectionBinding.value(storeData);
+         newCollection = [...collection.slice(0, this.itemIndex), ...collection.slice(this.itemIndex + 1)];
+         return this.store.setItem(this.collectionBinding.path, newCollection);
+      } else if (path.indexOf(this.recordName + ".") == 0) {
+         storeData = this.store.getData();
+         collection = this.collectionBinding.value(storeData);
+         const data = this.embed(storeData);
+         const d = Binding.get(path).delete(data);
+         if (d === data) return false;
+         const record = d[this.recordName];
+         newCollection = [...collection.slice(0, this.itemIndex), record, ...collection.slice(this.itemIndex + 1)];
+         return this.store.setItem(this.collectionBinding.path, newCollection);
+      }
+
+      return this.store.deleteItem(path);
+   }
+}
+
+ExposedRecordView.prototype.immutable = false;
diff --git a/packages/cx/src/data/ExposedValueView.d.ts b/packages/cx/src/data/ExposedValueView.d.ts
deleted file mode 100644
index 5636a001d..000000000
--- a/packages/cx/src/data/ExposedValueView.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { View, ViewConfig } from "./View";
-
-import { Binding } from "./Binding";
-
-interface ExposedValueViewConfig extends ViewConfig {
-   containerBinding: Binding;
-   recordName?: string;
-   immutable?: boolean;
-}
-
-export class ExposedValueView extends View {
-   constructor(config?: ExposedValueViewConfig);
-
-   setKey(key: string);
-
-   getKey(): string;
-
-   setStore(store: View);
-}
diff --git a/packages/cx/src/data/ExposedValueView.js b/packages/cx/src/data/ExposedValueView.js
deleted file mode 100644
index e6e78c003..000000000
--- a/packages/cx/src/data/ExposedValueView.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { View } from "./View";
-import { Binding } from "./Binding";
-
-export class ExposedValueView extends View {
-   getData() {
-      if (
-         this.sealed &&
-         this.meta.version === this.cache.version &&
-         this.cache.key === this.key &&
-         this.meta == this.store.meta
-      )
-         return this.cache.result;
-
-      let data = this.store.getData();
-      let container = this.containerBinding.value(data) || {};
-      let record = container[this.key];
-
-      this.cache.version = this.meta.version;
-      this.cache.key = this.key;
-      this.cache.result = this.sealed || this.immutable || this.store.sealed ? { ...data } : data;
-      this.cache.result[this.recordName] = record;
-      this.meta = this.store.meta;
-      return this.cache.result;
-   }
-
-   setKey(key) {
-      this.key = key;
-   }
-
-   getKey() {
-      return this.key;
-   }
-
-   setItem(path, value) {
-      if (path == this.recordName || path.indexOf(this.recordName + ".") == 0) {
-         var data = this.getData();
-         var d = Binding.get(path).set(data, value);
-         if (d === data) return false;
-         var container = this.containerBinding.value(d);
-         var record = d[this.recordName];
-         var newContainer = Object.assign({}, container);
-         newContainer[this.key] = record;
-         return this.store.setItem(this.containerBinding.path, newContainer);
-      }
-      return this.store.setItem(path, value);
-   }
-
-   deleteItem(path) {
-      var data, container, newContainer;
-
-      if (path == this.recordName) {
-         data = this.getData();
-         container = this.containerBinding.value(data);
-         if (!container || !container.hasOwnProperty(path)) return false;
-         newContainer = Object.assign({}, container);
-         delete newContainer[this.key];
-         this.store.set(this.containerBinding.path, newContainer);
-      } else if (path.indexOf(this.recordName + ".") == 0) {
-         data = this.getData();
-         var d = Binding.get(path).delete(data);
-         if (d === data) return false;
-         container = this.containerBinding.value(d);
-         var record = d[this.recordName];
-         newContainer = Object.assign({}, container);
-         newContainer[this.key] = record;
-         return this.store.setItem(this.containerBinding.path, newContainer);
-      }
-
-      return this.store.deleteItem(path);
-   }
-}
-
-ExposedValueView.prototype.immutable = false;
diff --git a/packages/cx/src/data/ExposedValueView.ts b/packages/cx/src/data/ExposedValueView.ts
new file mode 100644
index 000000000..5e105be71
--- /dev/null
+++ b/packages/cx/src/data/ExposedValueView.ts
@@ -0,0 +1,89 @@
+import { View, ViewConfig } from "./View";
+import { Binding } from "./Binding";
+
+export interface ExposedValueViewConfig extends ViewConfig {
+   containerBinding: Binding;
+   key?: string | null;
+   recordName?: string;
+}
+
+export class ExposedValueView extends View {
+   declare key: string;
+   declare containerBinding: Binding;
+   declare recordName: string;
+   declare immutable?: boolean;
+   declare store: View;
+
+   constructor(config: ExposedValueViewConfig) {
+      super(config);
+   }
+
+   getData(): any {
+      if (
+         this.sealed &&
+         this.meta.version === this.cache.version &&
+         this.cache.key === this.key &&
+         this.meta == this.store.meta
+      )
+         return this.cache.result;
+
+      let data = this.store.getData();
+      let container = this.containerBinding.value(data) || {};
+      let record = container[this.key];
+
+      this.cache.version = this.meta.version;
+      this.cache.key = this.key;
+      this.cache.result = this.sealed || this.immutable || this.store.sealed ? { ...data } : data;
+      this.cache.result[this.recordName] = record;
+      this.meta = this.store.meta;
+      return this.cache.result;
+   }
+
+   setKey(key: string) {
+      this.key = key;
+   }
+
+   getKey() {
+      return this.key;
+   }
+
+   setItem(path: string, value: any) {
+      if (path == this.recordName || path.indexOf(this.recordName + ".") == 0) {
+         var data = this.getData();
+         var d = Binding.get(path).set(data, value);
+         if (d === data) return false;
+         var container = this.containerBinding.value(d);
+         var record = d[this.recordName];
+         var newContainer = Object.assign({}, container);
+         newContainer[this.key] = record;
+         return this.store.setItem(this.containerBinding.path, newContainer);
+      }
+      return this.store.setItem(path, value);
+   }
+
+   deleteItem(path: string) {
+      var data, container, newContainer;
+
+      if (path == this.recordName) {
+         data = this.getData();
+         container = this.containerBinding.value(data);
+         if (!container || !container.hasOwnProperty(path)) return false;
+         newContainer = Object.assign({}, container);
+         delete newContainer[this.key];
+         this.store.set(this.containerBinding.path, newContainer);
+      } else if (path.indexOf(this.recordName + ".") == 0) {
+         data = this.getData();
+         var d = Binding.get(path).delete(data);
+         if (d === data) return false;
+         container = this.containerBinding.value(d);
+         var record = d[this.recordName];
+         newContainer = Object.assign({}, container);
+         newContainer[this.key] = record;
+         return this.store.setItem(this.containerBinding.path, newContainer);
+      }
+
+      return this.store.deleteItem(path);
+   }
+}
+
+ExposedValueView.prototype.immutable = false;
diff --git a/packages/cx/src/data/Expression.d.ts b/packages/cx/src/data/Expression.d.ts
deleted file mode 100644
index d0c083414..000000000
--- a/packages/cx/src/data/Expression.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Selector } from "../core";
-
-export function expression(str: string): Selector<any>;
-
-export class Expression {
-   static get(str: string): Selector<any>;
-
-   static compile(str: string): Selector<any>;
-
-   static registerHelper(name: string, helper);
-
-   static expandFatArrows: boolean;
-}
-
-export function invalidateExpressionCache(): void;
-
-export function setGetExpressionCacheCallback(callback: () => {}): void;
diff --git a/packages/cx/src/data/Expression.js b/packages/cx/src/data/Expression.js
deleted file mode 100644
index 84803d0a9..000000000
--- a/packages/cx/src/data/Expression.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import { computable } from "./computable";
-import { Format } from "../util/Format";
-import { Binding } from "./Binding";
-
-import { quoteStr } from "../util/quote";
-import { isFunction } from "../util/isFunction";
-import { isValidIdentifierName } from "../util/isValidIdentifierName";
-
-/*
-   Helper usage example
-
-   Expression.registerHelper('_', _);
-   let e = Expression.compile('_.min({data})');
- */
-
-let helpers = {},
-   helperNames = [],
-   helperValues = [],
-   expFatArrows = null;
-
-function getExpr(expr) {
-   if (expr.memoize) return expr;
-
-   function memoize() {
-      let lastValue,
-         lastRunBindings = {},
-         lastRunResults = {},
-         getters = {},
-         currentData,
-         len = -1;
-
-      let get = function (bindingWithFormat) {
-         let getter = getters[bindingWithFormat];
-         if (!getter) {
-            let binding = bindingWithFormat,
-               format;
-            let colonIndex = bindingWithFormat.indexOf(":");
-            if (colonIndex != -1) {
-               format = Format.parse(bindingWithFormat.substring(colonIndex + 1));
-               binding = bindingWithFormat.substring(0, colonIndex);
-            } else {
-               let nullSeparatorIndex = bindingWithFormat.indexOf(":");
-               if (nullSeparatorIndex != -1) {
-                  format = Format.parse(bindingWithFormat.substring(nullSeparatorIndex));
-                  binding = bindingWithFormat.substring(0, nullSeparatorIndex - 1);
-               }
-            }
-            let b = Binding.get(binding);
-            getter = (data) => {
-               let value = b.value(data);
-               lastRunBindings[len] = b.value;
-               lastRunResults[len] = value;
-               len++;
-               return value;
-            };
-
-            if (format) {
-               let valueGetter = getter;
-               getter = (data) => format(valueGetter(data));
-            }
-
-            getters[bindingWithFormat] = getter;
-         }
-         return getter(currentData);
-      };
-
-      return function (data) {
-         let i = 0;
-         for (; i < len; i++) if (lastRunBindings[i](data) !== lastRunResults[i]) break;
-         if (i !== len) {
-            len = 0;
-            currentData = data;
-            lastValue = expr(get);
-         }
-         return lastValue;
-      };
-   }
-
-   let result = memoize();
-   result.memoize = memoize;
-   return result;
-}
-
-export function expression(str) {
-   if (isFunction(str)) return getExpr(str);
-
-   let cache = getExpressionCache();
-   let r = cache[str];
-   if (r) return r;
-
-   let quote = false;
-
-   let termStart = -1,
-      curlyBrackets = 0,
-      percentExpression;
-
-   let fb = ["return ("];
-
-   let args = {};
-   let formats = [];
-   let subExprCount = 0;
-   let invalidNameCount = 0;
-
-   for (let i = 0; i < str.length; i++) {
-      let c = str[i];
-      switch (c) {
-         case "{":
-            if (curlyBrackets > 0 && !quote) curlyBrackets++;
-            else if (!quote && termStart < 0 && (str[i + 1] != "{" || str[i - 1] == "%")) {
-               termStart = i + 1;
-               curlyBrackets = 1;
-               percentExpression = str[i - 1] == "%";
-               if (percentExpression) fb.pop(); //%
-            } else if (termStart < 0 && (quote || str[i - 1] != "{")) fb.push(c);
-            break;
-
-         case "}":
-            if (termStart >= 0) {
-               if (quote) continue;
-               if (--curlyBrackets == 0) {
-                  let term = str.substring(termStart, i);
-                  let formatStart = 0;
-                  if (term[0] == "[") formatStart = term.indexOf("]");
-                  let colon = term.indexOf(":", formatStart > 0 ? formatStart : 0);
-                  let binding = colon == -1 ? term : term.substring(0, colon);
-                  let format = colon == -1 ? null : term.substring(colon + 1);
-                  if (colon == -1) {
-                     let nullSepIndex = binding.indexOf("|", formatStart);
-                     if (nullSepIndex != -1) {
-                        format = binding.substring(nullSepIndex);
-                        binding = binding.substring(0, nullSepIndex);
-                     }
-                  }
-                  let argName = binding.replace(/\./g, "_");
-                  if (!isValidIdentifierName(argName)) argName = "inv" + ++invalidNameCount;
-                  if (percentExpression || (binding[0] == "[" && binding[binding.length - 1] == "]")) {
-                     argName = `expr${++subExprCount}`;
-                     args[argName] = expression(percentExpression ? binding : binding.substring(1, binding.length - 1));
-                  } else args[argName] = binding;
-                  if (format) {
-                     let formatter = "fmt" + formats.length;
-                     fb.push(formatter, "(", argName, ", ", quoteStr(format), ")");
-                     formats.push(Format.parse(format));
-                  } else fb.push(argName);
-                  termStart = -1;
-               }
-            } else fb.push(c);
-
-            break;
-
-         case '"':
-         case "'":
-            if (!quote) quote = c;
-            else if (quote == c) {
-               let at = i - 1;
-               let slashCount = 0;
-               while (at >= 0 && str[at] === "\\") {
-                  slashCount++;
-                  at--;
-               }
-               if (slashCount % 2 == 0) quote = false;
-            }
-
-            if (curlyBrackets == 0) fb.push(c);
-
-            break;
-
-         default:
-            if (termStart < 0) fb.push(c);
-            break;
-      }
-   }
-
-   fb.push(")");
-
-   let body = fb.join("");
-
-   if (expFatArrows) body = expFatArrows(body);
-
-   //console.log(body);
-   let keys = Object.keys(args);
-
-   try {
-      let compute = new Function("fmt", ...formats.map((f, i) => "fmt" + i), ...helperNames, ...keys, body).bind(
-         Format,
-         Format.value,
-         ...formats,
-         ...helperValues,
-      );
-
-      let selector = computable(...keys.map((k) => args[k]), compute);
-      cache[str] = selector;
-      return selector;
-   } catch (err) {
-      throw new Error(`Failed to parse expression: '${str}'. Error: ${err.message}`);
-   }
-}
-
-export const Expression = {
-   get: function (str) {
-      return expression(str);
-   },
-
-   compile: function (str) {
-      return this.get(str).memoize();
-   },
-
-   registerHelper: function (name, helper) {
-      helpers[name] = helper;
-      helperNames = Object.keys(helpers);
-      helperValues = helperNames.map((n) => helpers[n]);
-   },
-};
-
-export function plugFatArrowExpansion(impl) {
-   expFatArrows = impl;
-}
-
-export function invalidateExpressionCache() {
-   expCache = {};
-}
-
-let expCache = {};
-
-let getExpressionCache = () => expCache;
-
-export function setGetExpressionCacheCallback(callback) {
-   getExpressionCache = callback;
-}
diff --git a/packages/cx/src/data/Expression.spec.js b/packages/cx/src/data/Expression.spec.js
deleted file mode 100644
index 2f40295e8..000000000
--- a/packages/cx/src/data/Expression.spec.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import { Expression } from "./Expression";
-import assert from "assert";
-import { StringTemplate } from "./StringTemplate";
-
-describe("Expression", function () {
-   describe("#compile()", function () {
-      it("returns a selector", function () {
-         let e = Expression.compile("{person.name}");
-         let state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Jim");
-      });
-
-      it("ignores bindings in strings", function () {
-         let e = Expression.compile('"{person.name}"');
-         let state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "{person.name}");
-      });
-
-      it("allows mixed curly braces in strings", () => {
-         let e = Expression.compile('"Hello {" + "person.name}"');
-         assert.equal(e(), "Hello {person.name}");
-      });
-
-      it("properly encodes quotes #1", function () {
-         let e = Expression.compile('"\'"');
-         let state = {};
-         assert.equal(e(state), "'");
-      });
-
-      it("properly encodes quotes #2", function () {
-         let e = Expression.compile('"\\""');
-         let state = {};
-         assert.equal(e(state), '"');
-      });
-
-      it("properly encodes quotes #3", function () {
-         let e = Expression.compile('"\\\\\\""');
-         let state = {};
-         assert.equal(e(state), '\\"');
-      });
-
-      it("properly encodes quotes #4", function () {
-         let e = Expression.compile('"\\\\"');
-         let state = {};
-         assert.equal(e(state), "\\");
-      });
-   });
-
-   describe("allow subexpressions", function () {
-      it("in square brackets", function () {
-         let e = Expression.compile("{[{person.name}]}");
-         let state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Jim");
-      });
-
-      it("in square brackets", function () {
-         let e = Expression.compile("{[{person.alias} || {person.name}]}");
-         let state = {
-            person: {
-               name: "Jim",
-               alias: "J",
-            },
-         };
-         assert.equal(e(state), "J");
-      });
-
-      it("prefixed with % sign", function () {
-         let e = Expression.compile("%{1+1}");
-         assert.equal(e(), "2");
-      });
-
-      it("can be formatted", function () {
-         let e = Expression.compile("{[1+1]:f;2}");
-         assert.equal(e(), "2.00");
-      });
-
-      it("n level deep", function () {
-         let e = Expression.compile("{[{[{[1+1]}]}]:f;2}");
-         assert.equal(e(), "2.00");
-      });
-
-      it("with complex math inside", function () {
-         let e = Expression.compile("%{{data}.reduce((a,b)=>a+b, 0):f;2}");
-         let state = {
-            data: [1, 2, 3],
-         };
-         assert.equal(e(state), "6.00");
-      });
-
-      it("with a conditional operator inside", function () {
-         let e = Expression.compile('{[true ? "T" : "F"]}');
-         assert.equal(e(), "T");
-      });
-
-      it("with string interpolation inside", function () {
-         let e = Expression.compile("{[`${{test}}`]}");
-         assert.equal(e({ test: "T" }), "T");
-      });
-   });
-
-   describe("are working", function () {
-      it("function expressions with get", function () {
-         let e = Expression.get((get) => get("a") + get("b"));
-         assert.equal(e({ a: 1, b: 2 }), 3);
-      });
-
-      it("are properly memoized", function () {
-         let inv = 0;
-         let e = Expression.get((get) => {
-            inv++;
-            return get("a") + get("b");
-         }).memoize();
-
-         assert.equal(e({ a: 1, b: 1 }), 2);
-         assert.equal(inv, 1);
-
-         assert.equal(e({ a: 1, b: 1 }), 2);
-         assert.equal(inv, 1);
-
-         assert.equal(e({ a: 1, b: 2 }), 3);
-         assert.equal(inv, 2);
-
-         assert.equal(e({ a: 1, b: 2 }), 3);
-         assert.equal(inv, 2);
-
-         assert.equal(e({ a: 2, b: 2 }), 4);
-         assert.equal(inv, 3);
-      });
-
-      it("formatting can be used inside bindings", function () {
-         let e = Expression.get((get) => get("name:prefix;Hello "));
-         assert(e({ name: "CxJS" }), "Hello CxJS");
-      });
-
-      it("allows using the fmt function inside", function () {
-         let e = Expression.compile('{[fmt({text}, "prefix;Hello ")]}');
-         assert.equal(e({ text: "CxJS" }), "Hello CxJS");
-      });
-
-      it("allows using dashes inside names", function () {
-         let e = Expression.compile("{framework-name}");
-         assert.equal(e({ "framework-name": "CxJS" }), "CxJS");
-      });
-
-      it("allows using spaces and other characters inside names", function () {
-         let e = Expression.compile("{1nv@lid js ident1fier}");
-         assert.equal(e({ "1nv@lid js ident1fier": "CxJS" }), "CxJS");
-      });
-
-      it("allows strings in subexpressions", () => {
-         let e = Expression.compile("{['1']}");
-         assert.equal(e(), "1");
-
-         let e2 = Expression.compile('%{"1"}');
-         assert.equal(e2(), "1");
-      });
-
-      it("allows string templates in nested expressions", () => {
-         Expression.registerHelper("tpl", StringTemplate.format);
-         let e = Expression.compile("tpl('{0:n;2} {1:p;2:wrap;(;)}', {value}, {percentage})");
-         assert.equal(e({ value: 1, percentage: 0.02 }), "1.00 (2.00%)");
-
-         let e2 = Expression.compile("{[tpl('{0:n;2} {1:p;2:wrap;(;)}', {value}, {percentage})]}");
-         assert.equal(e2({ value: 1, percentage: 0.02 }), "1.00 (2.00%)");
-
-         // we're going to need a better parser for this
-         // let e3 = Expression.compile("%{tpl('{0:n;2} {1:p;2:wrap;(;)}', {value}, {percentage})}");
-         // assert.equal(e3({ value: 1, percentage: 0.02 }), "1.00 (2.00%)");
-      });
-
-      it("string templates can be in the data", () => {
-         Expression.registerHelper("tpl", StringTemplate.format);
-         let e = Expression.compile("tpl({template}, {value}, {percentage})");
-         assert.equal(e({ value: 1, percentage: 0.02, template: "{0:n;2} {1:p;2:wrap;(;)}" }), "1.00 (2.00%)");
-      });
-
-      // it('are properly memoized with proxies', function () {
-      //    let inv = 0;
-      //    let e = Expression.get(d => { inv++; return d.a + d.b}).memoize();
-      //
-      //    assert.equal(e({ a: 1, b: 1 }), 2);
-      //    assert.equal(inv, 1);
-      //
-      //    assert.equal(e({ a: 1, b: 1 }), 2);
-      //    assert.equal(inv, 1);
-      //
-      //    assert.equal(e({ a: 1, b: 2 }), 3);
-      //    assert.equal(inv, 2);
-      //
-      //    assert.equal(e({ a: 1, b: 2 }), 3);
-      //    assert.equal(inv, 2);
-      //
-      //    assert.equal(e({ a: 2, b: 2 }), 4);
-      //    assert.equal(inv, 3);
-      // });
-      //
-      // it('are properly memoized with proxies and deep data', function () {
-      //    let inv = 0;
-      //    let e = Expression.get(d => { inv++; return d.v.a + d.v.b}).memoize();
-      //
-      //    assert.equal(e({ v: { a: 1, b: 1 }}), 2);
-      //    assert.equal(inv, 1);
-      //
-      //    assert.equal(e({ v: { a: 1, b: 1 }}), 2);
-      //    assert.equal(inv, 1);
-      //
-      //    assert.equal(e({ v: { a: 1, b: 2 }}), 3);
-      //    assert.equal(inv, 2);
-      //
-      //    assert.equal(e({ v: { a: 1, b: 2 }}), 3);
-      //    assert.equal(inv, 2);
-      //
-      //    assert.equal(e({ v: { a: 2, b: 2 }}), 4);
-      //    assert.equal(inv, 3);
-      // });
-   });
-});
diff --git a/packages/cx/src/data/Expression.spec.ts b/packages/cx/src/data/Expression.spec.ts
new file mode 100644
index 000000000..a1112812c
--- /dev/null
+++ b/packages/cx/src/data/Expression.spec.ts
@@ -0,0 +1,229 @@
+import { Expression } from "./Expression";
+import assert from "assert";
+import { StringTemplate } from "./StringTemplate";
+
+describe("Expression", function () {
+   describe("#compile()", function () {
+      it("returns a selector", function () {
+         let e = Expression.compile("{person.name}");
+         let state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Jim");
+      });
+
+      it("ignores bindings in strings", function () {
+         let e = Expression.compile('"{person.name}"');
+         let state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "{person.name}");
+      });
+
+      it("allows mixed curly braces in strings", () => {
+         let e = Expression.compile('"Hello {" + "person.name}"');
+         assert.equal(e({}), "Hello {person.name}");
+      });
+
+      it("properly encodes quotes #1", function () {
+         let e = Expression.compile('"\'"');
+         let state = {};
+         assert.equal(e(state), "'");
+      });
+
+      it("properly encodes quotes #2", function () {
+         let e = Expression.compile('"\\""');
+         let state = {};
+         assert.equal(e(state), '"');
+      });
+
+      it("properly encodes quotes #3", function () {
+         let e = Expression.compile('"\\\\\\""');
+         let state = {};
+         assert.equal(e(state), '\\"');
+      });
+
+      it("properly encodes quotes #4", function () {
+         let e = Expression.compile('"\\\\"');
+         let state = {};
+         assert.equal(e(state), "\\");
+      });
+   });
+
+   describe("allow subexpressions", function () {
+      it("in square brackets", function () {
+         let e = Expression.compile("{[{person.name}]}");
+         let state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Jim");
+      });
+
+      it("in square brackets", function () {
+         let e = Expression.compile("{[{person.alias} || {person.name}]}");
+         let state = {
+            person: {
+               name: "Jim",
+               alias: "J",
+            },
+         };
+         assert.equal(e(state), "J");
+      });
+
+      it("prefixed with % sign", function () {
+         let e = Expression.compile("%{1+1}");
+         assert.equal(e({}), "2");
+      });
+
+      it("can be formatted", function () {
+         let e = Expression.compile("{[1+1]:f;2}");
+         assert.equal(e({}), "2.00");
+      });
+
+      it("n level deep", function () {
+         let e = Expression.compile("{[{[{[1+1]}]}]:f;2}");
+         assert.equal(e({}), "2.00");
+      });
+
+      it("with complex math inside", function () {
+         let e = Expression.compile("%{{data}.reduce((a,b)=>a+b, 0):f;2}");
+         let state = {
+            data: [1, 2, 3],
+         };
+         assert.equal(e(state), "6.00");
+      });
+
+      it("with a conditional operator inside", function () {
+         let e = Expression.compile('{[true ? "T" : "F"]}');
+         assert.equal(e({}), "T");
+      });
+
+      it("with string interpolation inside", function () {
+         let e = Expression.compile("{[`${{test}}`]}");
+         assert.equal(e({ test: "T" }), "T");
+      });
+   });
+
+   describe("are working", function () {
+      it("function expressions with get", function () {
+         let e = Expression.get((get) => get("a") + get("b"));
+         assert.equal(e({ a: 1, b: 2 }), 3);
+      });
+
+      it("are properly memoized", function () {
+         let inv = 0;
+         let e = Expression.get((get) => {
+            inv++;
+            return get("a") + get("b");
+         }).memoize();
+
+         assert.equal(e({ a: 1, b: 1 }), 2);
+         assert.equal(inv, 1);
+
+         assert.equal(e({ a: 1, b: 1 }), 2);
+         assert.equal(inv, 1);
+
+         assert.equal(e({ a: 1, b: 2 }), 3);
+         assert.equal(inv, 2);
+
+         assert.equal(e({ a: 1, b: 2 }), 3);
+         assert.equal(inv, 2);
+
+         assert.equal(e({ a: 2, b: 2 }), 4);
+         assert.equal(inv, 3);
+      });
+
+      it("formatting can be used inside bindings", function () {
+         let e = Expression.get((get) => get("name:prefix;Hello "));
+         assert(e({ name: "CxJS" }), "Hello CxJS");
+      });
+
+      it("allows using the fmt function inside", function () {
+         let e = Expression.compile('{[fmt({text}, "prefix;Hello ")]}');
+         assert.equal(e({ text: "CxJS" }), "Hello CxJS");
+      });
+
+      it("allows using dashes inside names", function () {
+         let e = Expression.compile("{framework-name}");
+         assert.equal(e({ "framework-name": "CxJS" }), "CxJS");
+      });
+
+      it("allows using spaces and other characters inside names", function () {
+         let e = Expression.compile("{1nv@lid js ident1fier}");
+         assert.equal(e({ "1nv@lid js ident1fier": "CxJS" }), "CxJS");
+      });
+
+      it("allows strings in subexpressions", () => {
+         let e = Expression.compile("{['1']}");
+         assert.equal(e({}), "1");
+
+         let e2 = Expression.compile('%{"1"}');
+         assert.equal(e({}), "1");
+      });
+
+      it("allows string templates in nested expressions", () => {
+         Expression.registerHelper("tpl", StringTemplate.format);
+         let e = Expression.compile("tpl('{0:n;2} {1:p;2:wrap;(;)}', {value}, {percentage})");
+         assert.equal(e({ value: 1, percentage: 0.02 }), "1.00 (2.00%)");
+
+         let e2 = Expression.compile("{[tpl('{0:n;2} {1:p;2:wrap;(;)}', {value}, {percentage})]}");
+         assert.equal(e2({ value: 1, percentage: 0.02 }), "1.00 (2.00%)");
+
+         // we're going to need a better parser for this
+         // let e3 = Expression.compile("%{tpl('{0:n;2} {1:p;2:wrap;(;)}', {value}, {percentage})}");
+         // assert.equal(e3({ value: 1, percentage: 0.02 }), "1.00 (2.00%)");
+      });
+
+      it("string templates can be in the data", () => {
+         Expression.registerHelper("tpl", StringTemplate.format);
+         let e = Expression.compile("tpl({template}, {value}, {percentage})");
+         assert.equal(e({ value: 1, percentage: 0.02, template: "{0:n;2} {1:p;2:wrap;(;)}" }), "1.00 (2.00%)");
+      });
+
+      // it('are properly memoized with proxies', function () {
+      //    let inv = 0;
+      //    let e = Expression.get(d => { inv++; return d.a + d.b}).memoize();
+      //
+      //    assert.equal(e({ a: 1, b: 1 }), 2);
+      //    assert.equal(inv, 1);
+      //
+      //    assert.equal(e({ a: 1, b: 1 }), 2);
+      //    assert.equal(inv, 1);
+      //
+      //    assert.equal(e({ a: 1, b: 2 }), 3);
+      //    assert.equal(inv, 2);
+      //
+      //    assert.equal(e({ a: 1, b: 2 }), 3);
+      //    assert.equal(inv, 2);
+      //
+      //    assert.equal(e({ a: 2, b: 2 }), 4);
+      //    assert.equal(inv, 3);
+      // });
+      //
+      // it('are properly memoized with proxies and deep data', function () {
+      //    let inv = 0;
+      //    let e = Expression.get(d => { inv++; return d.v.a + d.v.b}).memoize();
+      //
+      //    assert.equal(e({ v: { a: 1, b: 1 }}), 2);
+      //    assert.equal(inv, 1);
+      //
+      //    assert.equal(e({ v: { a: 1, b: 1 }}), 2);
+      //    assert.equal(inv, 1);
+      //
+      //    assert.equal(e({ v: { a: 1, b: 2 }}), 3);
+      //    assert.equal(inv, 2);
+      //
+      //    assert.equal(e({ v: { a: 1, b: 2 }}), 3);
+      //    assert.equal(inv, 2);
+      //
+      //    assert.equal(e({ v: { a: 2, b: 2 }}), 4);
+      //    assert.equal(inv, 3);
+      // });
+   });
+});
diff --git a/packages/cx/src/data/Expression.ts b/packages/cx/src/data/Expression.ts
new file mode 100644
index 000000000..4cec12efb
--- /dev/null
+++ b/packages/cx/src/data/Expression.ts
@@ -0,0 +1,233 @@
+import { computable } from "./computable";
+import { Format } from "../util/Format";
+import { Binding } from "./Binding";
+
+import { quoteStr } from "../util/quote";
+import { isFunction } from "../util/isFunction";
+import { isValidIdentifierName } from "../util/isValidIdentifierName";
+import { MemoSelector, Selector } from "./Selector";
+
+/*
+   Helper usage example
+
+   Expression.registerHelper('_', _);
+   let e = Expression.compile('_.min({data})');
+ */
+
+let helpers: Record<string, any> = {},
+   helperNames: string[] = [],
+   helperValues: any[] = [],
+   expFatArrows: null | ((body: string) => string) = null;
+
+function getExpr(expr: Selector): MemoSelector {
+   if (expr.memoize) return expr as MemoSelector;
+
+   function memoize(): Selector {
+      let lastValue: any,
+         lastRunBindings: Record<string, Selector> = {},
+         lastRunResults: Record<string, any> = {},
+         getters: Record<string, Selector> = {},
+         currentData: any,
+         len = -1;
+
+      let get = function (bindingWithFormat: string) {
+         let getter = getters[bindingWithFormat];
+         if (!getter) {
+            let binding = bindingWithFormat,
+               format;
+            let colonIndex = bindingWithFormat.indexOf(":");
+            if (colonIndex != -1) {
+               format = Format.parse(bindingWithFormat.substring(colonIndex + 1));
+               binding = bindingWithFormat.substring(0, colonIndex);
+            } else {
+               let nullSeparatorIndex = bindingWithFormat.indexOf(":");
+               if (nullSeparatorIndex != -1) {
+                  format = Format.parse(bindingWithFormat.substring(nullSeparatorIndex));
+                  binding = bindingWithFormat.substring(0, nullSeparatorIndex - 1);
+               }
+            }
+            let b = Binding.get(binding);
+            getter = (data) => {
+               let value = b.value(data);
+               lastRunBindings[len] = b.value;
+               lastRunResults[len] = value;
+               len++;
+               return value;
+            };
+
+            if (format) {
+               let valueGetter = getter;
+               getter = (data) => format(valueGetter(data));
+            }
+
+            getters[bindingWithFormat] = getter;
+         }
+         return getter(currentData);
+      };
+
+      return function (data) {
+         let i = 0;
+         for (; i < len; i++) if (lastRunBindings[i](data) !== lastRunResults[i]) break;
+         if (i !== len) {
+            len = 0;
+            currentData = data;
+            lastValue = expr(get);
+         }
+         return lastValue;
+      };
+   }
+
+   let result: Selector = memoize();
+   result.memoize = memoize;
+   return result as MemoSelector;
+}
+
+export function expression(str: string | Selector): MemoSelector {
+   if (isFunction(str)) return getExpr(str);
+
+   let cache = getExpressionCache();
+   let r = cache[str];
+   if (r) return r;
+
+   let quote: string | false = false;
+
+   let termStart = -1,
+      curlyBrackets = 0,
+      percentExpression;
+
+   let fb = ["return ("];
+
+   let args: Record<string, string | Selector> = {};
+   let formats = [];
+   let subExprCount = 0;
+   let invalidNameCount = 0;
+
+   for (let i = 0; i < str.length; i++) {
+      let c = str[i];
+      switch (c) {
+         case "{":
+            if (curlyBrackets > 0 && !quote) curlyBrackets++;
+            else if (!quote && termStart < 0 && (str[i + 1] != "{" || str[i - 1] == "%")) {
+               termStart = i + 1;
+               curlyBrackets = 1;
+               percentExpression = str[i - 1] == "%";
+               if (percentExpression) fb.pop(); //%
+            } else if (termStart < 0 && (quote || str[i - 1] != "{")) fb.push(c);
+            break;
+
+         case "}":
+            if (termStart >= 0) {
+               if (quote) continue;
+               if (--curlyBrackets == 0) {
+                  let term = str.substring(termStart, i);
+                  let formatStart = 0;
+                  if (term[0] == "[") formatStart = term.indexOf("]");
+                  let colon = term.indexOf(":", formatStart > 0 ? formatStart : 0);
+                  let binding = colon == -1 ? term : term.substring(0, colon);
+                  let format = colon == -1 ? null : term.substring(colon + 1);
+                  if (colon == -1) {
+                     let nullSepIndex = binding.indexOf("|", formatStart);
+                     if (nullSepIndex != -1) {
+                        format = binding.substring(nullSepIndex);
+                        binding = binding.substring(0, nullSepIndex);
+                     }
+                  }
+                  let argName = binding.replace(/\./g, "_");
+                  if (!isValidIdentifierName(argName)) argName = "inv" + ++invalidNameCount;
+                  if (percentExpression || (binding[0] == "[" && binding[binding.length - 1] == "]")) {
+                     argName = `expr${++subExprCount}`;
+                     args[argName] = expression(percentExpression ? binding : binding.substring(1, binding.length - 1));
+                  } else args[argName] = binding;
+                  if (format) {
+                     let formatter = "fmt" + formats.length;
+                     fb.push(formatter, "(", argName, ", ", quoteStr(format), ")");
+                     formats.push(Format.parse(format));
+                  } else fb.push(argName);
+                  termStart = -1;
+               }
+            } else fb.push(c);
+
+            break;
+
+         case '"':
+         case "'":
+            if (!quote) quote = c;
+            else if (quote == c) {
+               let at = i - 1;
+               let slashCount = 0;
+               while (at >= 0 && str[at] === "\\") {
+                  slashCount++;
+                  at--;
+               }
+               if (slashCount % 2 == 0) quote = false;
+            }
+
+            if (curlyBrackets == 0) fb.push(c);
+
+            break;
+
+         default:
+            if (termStart < 0) fb.push(c);
+            break;
+      }
+   }
+
+   fb.push(")");
+
+   let body = fb.join("");
+
+   if (expFatArrows) body = expFatArrows(body);
+
+   //console.log(body);
+   let keys = Object.keys(args);
+
+   try {
+      let compute = new Function("fmt", ...formats.map((f, i) => "fmt" + i), ...helperNames, ...keys, body).bind(
+         Format,
+         Format.value,
+         ...formats,
+         ...helperValues,
+      );
+
+      let selector = computable(...keys.map((k) => args[k]), compute);
+      cache[str] = selector;
+      return selector;
+   } catch (err) {
+      throw new Error(`Failed to parse expression: '${str}'. ${err}`);
+   }
+}
+
+export type GetFunction = (bindingPath: string) => any;
+export type SelectorFunction = (get: GetFunction) => any;
+
+export const Expression = {
+   get: function (str: string | SelectorFunction): MemoSelector {
+      return expression(str);
+   },
+
+   compile: function (str: string | SelectorFunction): Selector {
+      return this.get(str).memoize();
+   },
+
+   registerHelper: function (name: string, helper: any) {
+      helpers[name] = helper;
+      helperNames = Object.keys(helpers);
+      helperValues = helperNames.map((n) => helpers[n]);
+   },
+};
+
+export function plugFatArrowExpansion(impl: (body: string) => string) {
+   expFatArrows = impl;
+}
+
+export function invalidateExpressionCache() {
+   expCache = {};
+}
+
+let expCache: Record<string, MemoSelector> = {};
+
+let getExpressionCache = () => expCache;
+
+export function setGetExpressionCacheCallback(callback: () => Record<string, MemoSelector>) {
+   getExpressionCache = callback;
+}
diff --git a/packages/cx/src/data/Grouper.d.ts b/packages/cx/src/data/Grouper.d.ts
deleted file mode 100644
index d4d439058..000000000
--- a/packages/cx/src/data/Grouper.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { StructuredProp, Record, StringProp } from '../core';
-
-interface GroupingResult {
-   key: Record,
-   name: string,
-   records: Record[],
-   indexes: number[],
-   aggregates: Record
-}
-
-export class Grouper {
-   constructor(key: StructuredProp, aggregates?: StructuredProp, dataGetter?: (any) => any, nameGetter?: StringProp);
-
-   reset();
-
-   process(record: Record, index: number): void;
-
-   processAll(records: Record[], indexes?: number[]): void;
-
-   getResults(): GroupingResult[]
-}
diff --git a/packages/cx/src/data/Grouper.js b/packages/cx/src/data/Grouper.js
deleted file mode 100644
index f719772d9..000000000
--- a/packages/cx/src/data/Grouper.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import { getSelector } from "./getSelector";
-import { AggregateFunction } from "./AggregateFunction";
-import { Binding } from "./Binding";
-
-/*
- 'column': {
-   index: 0,
-   sort: 'asc',
-   group: true
-   aggregate: 'count'
- }
- */
-
-export class Grouper {
-   constructor(key, aggregates, dataGetter, nameGetter) {
-      this.keys = Object.keys(key).map((keyField) => {
-         let isSimpleField = keyField.indexOf(".") === -1;
-         let keySetter;
-         if (isSimpleField) {
-            // use simple field setter wherever possible
-            keySetter = function set(result, value) {
-               result[keyField] = value;
-               return result;
-            };
-         } else {
-            // for complex paths, use deep setter
-            let binding = Binding.get(keyField);
-            keySetter = (result, value) => binding.set(result, value);
-         }
-         return {
-            name: keyField,
-            keySetter,
-            value: getSelector(key[keyField]),
-         };
-      });
-      if (nameGetter) this.nameGetter = getSelector(nameGetter);
-      this.dataGetter = dataGetter || ((x) => x);
-      this.aggregates =
-         aggregates &&
-         transformValues(aggregates, (prop) => {
-            if (!AggregateFunction[prop.type]) throw new Error(`Unknown aggregate function '${prop.type}'.`);
-
-            return {
-               value: getSelector(prop.value),
-               weight: getSelector(prop.weight ?? 1),
-               type: prop.type,
-            };
-         });
-      this.reset();
-   }
-
-   reset() {
-      this.groups = this.initGroup(this.keys.length == 0);
-   }
-
-   initGroup(leaf) {
-      if (!leaf) return {};
-
-      return {
-         records: [],
-         indexes: [],
-         aggregates:
-            this.aggregates &&
-            transformValues(this.aggregates, (prop) => {
-               let f = AggregateFunction[prop.type];
-               return {
-                  processor: f(),
-                  value: prop.value,
-                  weight: prop.weight,
-               };
-            }),
-      };
-   }
-
-   process(record, index) {
-      let data = this.dataGetter(record);
-      let key = this.keys.map((k) => k.value(data));
-      let g = this.groups;
-      for (let i = 0; i < key.length; i++) {
-         let sg = g[key[i]];
-         if (!sg) {
-            sg = g[key[i]] = this.initGroup(i + 1 == key.length);
-            if (this.nameGetter) sg.name = this.nameGetter(data);
-         }
-         g = sg;
-      }
-
-      g.records.push(record);
-      g.indexes.push(index);
-
-      if (g.aggregates) {
-         for (let k in g.aggregates)
-            g.aggregates[k].processor.process(g.aggregates[k].value(data), g.aggregates[k].weight(data));
-      }
-   }
-
-   processAll(records, indexes) {
-      if (indexes) {
-         for (let i = 0; i < records.length; i++) this.process(records[i], indexes[i]);
-      } else records.forEach((r, i) => this.process(r, i));
-   }
-
-   report(g, path, level, results) {
-      if (level == this.keys.length) {
-         let key = {};
-         this.keys.forEach((k, i) => {
-            key = k.keySetter(key, path[i]);
-         });
-         results.push({
-            key: key,
-            name: g.name,
-            records: g.records,
-            indexes: g.indexes,
-            aggregates: resolveKeyPaths(transformValues(g.aggregates, (p) => p.processor.getResult())),
-         });
-      } else {
-         Object.keys(g).forEach((k) => this.report(g[k], [...path, k], level + 1, results));
-      }
-   }
-
-   getResults() {
-      let g = this.groups;
-      let results = [];
-      this.report(g, [], 0, results);
-      return results;
-   }
-}
-
-// transform object values using a function
-function transformValues(o, f) {
-   let res = {};
-   for (let k in o) res[k] = f(o[k], k);
-   return res;
-}
-
-// transform keys like 'a.b.c' into nested objects
-function resolveKeyPaths(o) {
-   let res = {};
-   for (let k in o) {
-      if (k.indexOf(".") > 0) res = Binding.get(k).set(res, o[k]);
-      else res[k] = o[k];
-   }
-   return res;
-}
diff --git a/packages/cx/src/data/Grouper.spec.js b/packages/cx/src/data/Grouper.spec.ts
similarity index 100%
rename from packages/cx/src/data/Grouper.spec.js
rename to packages/cx/src/data/Grouper.spec.ts
diff --git a/packages/cx/src/data/Grouper.ts b/packages/cx/src/data/Grouper.ts
new file mode 100644
index 000000000..b8bff724f
--- /dev/null
+++ b/packages/cx/src/data/Grouper.ts
@@ -0,0 +1,158 @@
+import { getSelector } from "./getSelector";
+import { AggregateFunction } from "./AggregateFunction";
+import { Binding } from "./Binding";
+
+/*
+ 'column': {
+   index: 0,
+   sort: 'asc',
+   group: true
+   aggregate: 'count'
+ }
+ */
+
+export interface GroupResult {
+   key: any;
+   name?: any;
+   records: any[];
+   indexes: number[];
+   aggregates?: Record<string, any>;
+}
+
+export class Grouper {
+   keys: any[];
+   nameGetter?: any;
+   dataGetter: any;
+   aggregates?: any;
+   groups: any;
+
+   constructor(key: any, aggregates?: any, dataGetter?: any, nameGetter?: any) {
+      this.keys = Object.keys(key).map((keyField) => {
+         let isSimpleField = keyField.indexOf(".") === -1;
+         let keySetter;
+         if (isSimpleField) {
+            // use simple field setter wherever possible
+            keySetter = function set(result: any, value: any) {
+               result[keyField] = value;
+               return result;
+            };
+         } else {
+            // for complex paths, use deep setter
+            let binding = Binding.get(keyField);
+            keySetter = (result: any, value: any) => binding.set(result, value);
+         }
+         return {
+            name: keyField,
+            keySetter,
+            value: getSelector(key[keyField]),
+         };
+      });
+      if (nameGetter) this.nameGetter = getSelector(nameGetter);
+      this.dataGetter = dataGetter || ((x: any) => x);
+      this.aggregates =
+         aggregates &&
+         transformValues(aggregates, (prop) => {
+            if (!(prop.type in AggregateFunction)) throw new Error(`Unknown aggregate function '${prop.type}'.`);
+
+            return {
+               value: getSelector(prop.value),
+               weight: getSelector(prop.weight ?? 1),
+               type: prop.type,
+            };
+         });
+      this.reset();
+   }
+
+   reset() {
+      this.groups = this.initGroup(this.keys.length == 0);
+   }
+
+   initGroup(leaf: boolean) {
+      if (!leaf) return {};
+
+      return {
+         records: [],
+         indexes: [],
+         aggregates:
+            this.aggregates &&
+            transformValues(this.aggregates, (prop) => {
+               let f = (AggregateFunction as any)[prop.type];
+               return {
+                  processor: f(),
+                  value: prop.value,
+                  weight: prop.weight,
+               };
+            }),
+      };
+   }
+
+   process(record: any, index: number) {
+      let data = this.dataGetter(record);
+      let key = this.keys.map((k) => k.value(data));
+      let g = this.groups;
+      for (let i = 0; i < key.length; i++) {
+         let sg = g[key[i]];
+         if (!sg) {
+            sg = g[key[i]] = this.initGroup(i + 1 == key.length);
+            if (this.nameGetter) sg.name = this.nameGetter(data);
+         }
+         g = sg;
+      }
+
+      g.records.push(record);
+      g.indexes.push(index);
+
+      if (g.aggregates) {
+         for (let k in g.aggregates)
+            g.aggregates[k].processor.process(g.aggregates[k].value(data), g.aggregates[k].weight(data));
+      }
+   }
+
+   processAll(records: any[], indexes?: number[]) {
+      if (indexes) {
+         for (let i = 0; i < records.length; i++) this.process(records[i], indexes[i]);
+      } else records.forEach((r: any, i: number) => this.process(r, i));
+   }
+
+   report(g: any, path: any[], level: number, results: GroupResult[]) {
+      if (level == this.keys.length) {
+         let key = {};
+         this.keys.forEach((k: any, i: number) => {
+            key = k.keySetter(key, path[i]);
+         });
+         results.push({
+            key: key,
+            name: g.name,
+            records: g.records,
+            indexes: g.indexes,
+            aggregates: resolveKeyPaths(transformValues(g.aggregates, (p) => p.processor.getResult())),
+         });
+      } else {
+         Object.keys(g).forEach((k) => this.report(g[k], [...path, k], level + 1, results));
+      }
+   }
+
+   getResults(): GroupResult[] {
+      let g = this.groups;
+      let results: GroupResult[] = [];
+      this.report(g, [], 0, results);
+      return results;
+   }
+}
+
+// transform object values using a function
+function transformValues(o: Record<string, any>, f: (v: any, k?: string) => any): Record<string, any> {
+   let res: Record<string, any> = {};
+   for (let k in o) res[k] = f(o[k], k);
+   return res;
+}
+
+// transform keys like 'a.b.c' into nested objects
+function resolveKeyPaths(o: Record<string, any>) {
+   let res: Record<string, any> = {};
+   for (let k in o) {
+      if (k.indexOf(".") > 0) res = Binding.get(k).set(res, o[k]);
+      else res[k] = o[k];
+   }
+   return res;
+}
diff --git a/packages/cx/src/data/NestedDataView.d.ts b/packages/cx/src/data/NestedDataView.d.ts
deleted file mode 100644
index 293a869b8..000000000
--- a/packages/cx/src/data/NestedDataView.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AugmentedViewBase, AugmentedViewBaseConfig } from "./AugmentedViewBase";
-import { StructuredDataAccessor } from "./StructuredDataAccessor";
-
-export interface NestedDataViewConfig extends AugmentedViewBaseConfig {
-   nestedData?: StructuredDataAccessor;
-}
-
-export class NestedDataView extends AugmentedViewBase {
-   constructor(config: NestedDataViewConfig);
-   nestedData: StructuredDataAccessor;
-
-   protected setExtraKeyValue(key: string, value: any): boolean;
-
-   protected deleteExtraKeyValue(key: string): boolean;
-
-   protected isExtraKey(key: string): boolean;
-
-   protected embedAugmentData(result: Cx.Record, parentStoreData: Cx.Record): void;
-}
diff --git a/packages/cx/src/data/NestedDataView.js b/packages/cx/src/data/NestedDataView.js
deleted file mode 100644
index e180b21d7..000000000
--- a/packages/cx/src/data/NestedDataView.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { AugmentedViewBase } from "../data/AugmentedViewBase";
-
-export class NestedDataView extends AugmentedViewBase {
-   embedAugmentData(result, parentStoreData) {
-      if (this.nestedData) {
-         let nested = this.nestedData.getSelector()(parentStoreData);
-         for (let key in nested) result[key] = nested[key];
-      }
-   }
-
-   isExtraKey(key) {
-      return this.nestedData && this.nestedData.containsKey(key);
-   }
-
-   setExtraKeyValue(key, value) {
-      this.nestedData.setItem(key, value);
-   }
-
-   deleteExtraKeyValue(key) {
-      this.setExtraKeyValue(key, undefined);
-   }
-}
diff --git a/packages/cx/src/data/NestedDataView.ts b/packages/cx/src/data/NestedDataView.ts
new file mode 100644
index 000000000..3525ea60b
--- /dev/null
+++ b/packages/cx/src/data/NestedDataView.ts
@@ -0,0 +1,43 @@
+import { View, ViewConfig } from "./View";
+import { AugmentedViewBase } from "../data/AugmentedViewBase";
+
+export interface StructuredDataAccessor {
+   getSelector(): (data: object) => Record<string, any>;
+   get(): object;
+   setItem(key: string, value: any): boolean;
+   containsKey(key: string): boolean;
+   getKeys(): string[];
+}
+
+export interface NestedDataViewConfig extends ViewConfig {
+   nestedData?: StructuredDataAccessor;
+   store: View;
+}
+
+export class NestedDataView extends AugmentedViewBase {
+   declare nestedData?: StructuredDataAccessor;
+
+   constructor(config: NestedDataViewConfig) {
+      super(config);
+   }
+
+   protected embedAugmentData(result: Record<string, any>, parentStoreData: Record<string, any>): void {
+      if (this.nestedData) {
+         let nested = this.nestedData.getSelector()(parentStoreData);
+         for (let key in nested) result[key] = nested[key];
+      }
+   }
+
+   protected isExtraKey(key: string): boolean {
+      return !!this.nestedData && this.nestedData.containsKey(key);
+   }
+
+   protected setExtraKeyValue(key: string, value: any): boolean {
+      if (!this.nestedData) throw new Error("Internal error. This should not happen.");
+      return this.nestedData.setItem(key, value);
+   }
+
+   protected deleteExtraKeyValue(key: string): boolean {
+      return this.setExtraKeyValue(key, undefined);
+   }
+}
diff --git a/packages/cx/src/data/ReadOnlyDataView.d.ts b/packages/cx/src/data/ReadOnlyDataView.d.ts
deleted file mode 100644
index e16f257ce..000000000
--- a/packages/cx/src/data/ReadOnlyDataView.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {View, ViewConfig} from './View';
-
-interface ReadOnlyDataViewConfig extends ViewConfig {
-   data?: any;
-   immutable?: boolean;
-}
-
-export class ReadOnlyDataView extends View {
-   constructor(config?: ReadOnlyDataViewConfig);
-
-   setData(data: any);
-
-   setStore(store: View);
-}
diff --git a/packages/cx/src/data/ReadOnlyDataView.js b/packages/cx/src/data/ReadOnlyDataView.js
deleted file mode 100644
index 405611075..000000000
--- a/packages/cx/src/data/ReadOnlyDataView.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import {View} from './View';
-
-export class ReadOnlyDataView extends View {
-
-   getData() {
-      if (this.sealed && this.meta.version === this.cache.version && this.cache.data === this.data)
-         return this.cache.result;
-
-      let data = this.store.getData();
-      this.cache.result = this.sealed || this.immutable || this.store.sealed
-         ? Object.assign({}, data, this.getAdditionalData(data))
-         : Object.assign(data, this.getAdditionalData(data));
-      this.cache.version = this.meta.version;
-      this.cache.data = this.data;
-      return this.cache.result;
-   }
-
-   getAdditionalData() {
-      return this.data;
-   }
-
-   setData(data) {
-      this.data = data;
-   }
-}
-
-ReadOnlyDataView.prototype.immutable = false;
\ No newline at end of file
diff --git a/packages/cx/src/data/ReadOnlyDataView.ts b/packages/cx/src/data/ReadOnlyDataView.ts
new file mode 100644
index 000000000..445bb6cff
--- /dev/null
+++ b/packages/cx/src/data/ReadOnlyDataView.ts
@@ -0,0 +1,39 @@
+import { View, ViewConfig } from "./View";
+
+export interface ReadOnlyDataViewConfig extends ViewConfig {
+   data?: any;
+}
+
+export class ReadOnlyDataView extends View {
+   declare store: View;
+   declare data?: any;
+   declare immutable?: boolean;
+
+   constructor(config?: ReadOnlyDataViewConfig) {
+      super(config);
+   }
+
+   getData(): any {
+      if (this.sealed && this.meta.version === this.cache.version && this.cache.data === this.data)
+         return this.cache.result;
+
+      let data = this.store.getData();
+      this.cache.result =
+         this.sealed || this.immutable || this.store.sealed
+            ? Object.assign({}, data, this.getAdditionalData(data))
+            : Object.assign(data, this.getAdditionalData(data));
+      this.cache.version = this.meta.version;
+      this.cache.data = this.data;
+      return this.cache.result;
+   }
+
+   getAdditionalData(data?: any): any {
+      return this.data;
+   }
+
+   setData(data: any): void {
+      this.data = data;
+   }
+}
+
+ReadOnlyDataView.prototype.immutable = false;
diff --git a/packages/cx/src/data/Ref.d.ts b/packages/cx/src/data/Ref.d.ts
deleted file mode 100644
index 1d42a195d..000000000
--- a/packages/cx/src/data/Ref.d.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { View } from "./View";
-
-interface RefConfig {
-   store: View;
-   path: string;
-}
-
-export class Ref<T = any> {
-   constructor(config: RefConfig);
-
-   init(value: T): boolean;
-
-   set(value: T): boolean;
-
-   delete(): boolean;
-
-   get(): T;
-
-   toggle(): boolean;
-
-   update(updateFn: (currentValue: T, ...args) => T, ...args): boolean;
-
-   ref<ST = any>(path: string): Ref<ST>;
-}
diff --git a/packages/cx/src/data/Ref.js b/packages/cx/src/data/Ref.js
deleted file mode 100644
index d3249431f..000000000
--- a/packages/cx/src/data/Ref.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { isFunction } from "../util/isFunction";
-import { Component } from "../util/Component";
-import { Binding } from "./Binding";
-
-export class Ref extends Component {
-   constructor(config) {
-      super(config);
-      this.get = this.get.bind(this);
-      if (this.set) this.set = this.set.bind(this);
-   }
-
-   get() {
-      throw new Error("Ref's get method is not implemented.");
-   }
-
-   init(value) {
-      if (this.get() === undefined) this.set(value);
-   }
-
-   toggle() {
-      this.set(!this.get());
-   }
-
-   update(cb, ...args) {
-      this.set(cb(this.get(), ...args));
-   }
-
-   as(config) {
-      return Ref.create(config, {
-         get: this.get,
-         set: this.set,
-      });
-   }
-
-   ref(path) {
-      let binding = Binding.get(path);
-      return Ref.create({
-         get: () => binding.value(this.get()),
-         set: (value) => {
-            let data = this.get();
-            let newData = binding.set(data, value);
-            if (data === newData) return false;
-            return this.set(newData);
-         },
-      });
-   }
-
-   //allows the function to be passed as a selector, e.g. to computable or addTrigger
-   memoize() {
-      return this.get;
-   }
-}
-
-Ref.prototype.isRef = true;
-
-Ref.factory = function (alias, config, more) {
-   if (isFunction(alias)) {
-      let cfg = {
-         ...config,
-         ...more,
-      };
-
-      if (cfg.store) Object.assign(cfg, cfg.store.getMethods());
-
-      let result = alias(cfg);
-      if (result instanceof Ref) return result;
-
-      return this.create({
-         ...config,
-         ...more,
-         ...result,
-      });
-   }
-
-   return this.create({
-      ...config,
-      ...more,
-   });
-};
diff --git a/packages/cx/src/data/Ref.spec.js b/packages/cx/src/data/Ref.spec.js
deleted file mode 100644
index 30de5eedf..000000000
--- a/packages/cx/src/data/Ref.spec.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import assert from "assert";
-import { Store } from "./Store";
-import { Ref } from "./Ref";
-import { append } from "./ops/append";
-import { StoreRef } from "./StoreRef";
-
-const getStore = () => {
-   return new Store({
-      data: {
-         a: 3,
-         item: {
-            firstName: "Jack",
-         },
-         array: [],
-      },
-   });
-};
-
-describe("Ref", () => {
-   it("can init data", () => {
-      let store = getStore();
-      let b = store.ref("b", 1);
-      assert.equal(store.get("b"), 1);
-   });
-
-   it("can set data", () => {
-      let store = getStore();
-      let b = store.ref("b", 1);
-      b.set(2);
-      assert.equal(store.get("b"), 2);
-   });
-
-   it("can delete data", () => {
-      let store = getStore();
-      let b = store.ref("item");
-      b.delete();
-      assert.equal(store.get("item"), undefined);
-   });
-
-   it("can cast itself to a ref of another type", () => {
-      class ArrayRef extends StoreRef {
-         append(...args) {
-            this.update(append, ...args);
-         }
-      }
-      let store = getStore();
-      let array = store.ref("array").as(ArrayRef);
-      array.append(1, 2, 3);
-      assert.deepEqual(array.get(), [1, 2, 3]);
-   });
-
-   it("can extend itself in a functional way", () => {
-      let store = getStore();
-      let array = store.ref("array").as(({ update, set, path }) => ({
-         append(...args) {
-            update(path, append, ...args);
-         },
-
-         clear() {
-            set(path, []);
-         },
-      }));
-      array.append(1, 2, 3);
-      assert.deepEqual(array.get(), [1, 2, 3]);
-      array.clear();
-      assert.deepEqual(array.get(), []);
-   });
-
-   it("can get subrefs", () => {
-      let store = getStore();
-      let person = new Ref({
-         get: () => store.get("person"),
-         set: (value) => store.set("person", value),
-      });
-      let name = person.ref("name");
-      name.set("John");
-      assert.equal(name.get(), "John");
-   });
-});
diff --git a/packages/cx/src/data/Ref.spec.ts b/packages/cx/src/data/Ref.spec.ts
new file mode 100644
index 000000000..dfed5a124
--- /dev/null
+++ b/packages/cx/src/data/Ref.spec.ts
@@ -0,0 +1,79 @@
+import assert from "assert";
+import { Store } from "./Store";
+import { Ref } from "./Ref";
+import { append } from "./ops/append";
+import { StoreRef } from "./StoreRef";
+
+const getStore = () => {
+   return new Store({
+      data: {
+         a: 3,
+         item: {
+            firstName: "Jack",
+         },
+         array: [],
+      },
+   });
+};
+
+describe("Ref", () => {
+   it("can init data", () => {
+      let store = getStore();
+      let b = store.ref("b", 1);
+      assert.equal(store.get("b"), 1);
+   });
+
+   it("can set data", () => {
+      let store = getStore();
+      let b = store.ref("b", 1);
+      b.set(2);
+      assert.equal(store.get("b"), 2);
+   });
+
+   it("can delete data", () => {
+      let store = getStore();
+      let b = store.ref("item");
+      b.delete();
+      assert.equal(store.get("item"), undefined);
+   });
+
+   it("can cast itself to a ref of another type", () => {
+      class ArrayRef extends StoreRef {
+         append(...args: any[]) {
+            this.update(append, ...args);
+         }
+      }
+      let store = getStore();
+      let array = store.ref("array").as(ArrayRef);
+      (array as ArrayRef).append(1, 2, 3);
+      assert.deepEqual(array.get(), [1, 2, 3]);
+   });
+
+   it("can extend itself in a functional way", () => {
+      let store = getStore();
+      let array = store.ref("array").as(({ update, set, path }: { update: any; set: any; path: string }) => ({
+         append(...args: any[]) {
+            update(path, append, ...args);
+         },
+
+         clear() {
+            set(path, []);
+         },
+      }));
+      (array as any).append(1, 2, 3);
+      assert.deepEqual(array.get(), [1, 2, 3]);
+      (array as any).clear();
+      assert.deepEqual(array.get(), []);
+   });
+
+   it("can get subrefs", () => {
+      let store = getStore();
+      let person = new Ref({
+         get: () => store.get("person"),
+         set: (value) => store.set("person", value),
+      });
+      let name = person.ref("name");
+      name.set("John");
+      assert.equal(name.get(), "John");
+   });
+});
diff --git a/packages/cx/src/data/Ref.ts b/packages/cx/src/data/Ref.ts
new file mode 100644
index 000000000..7448e9b96
--- /dev/null
+++ b/packages/cx/src/data/Ref.ts
@@ -0,0 +1,104 @@
+import { isFunction } from "../util/isFunction";
+import { Component } from "../util/Component";
+import { Binding } from "./Binding";
+import { View } from "./View";
+import { CanMemoize } from "./Selector";
+
+export interface RefConfig<T> {
+   store?: View;
+   path?: string;
+   get?: () => T;
+   set?: (value: T) => boolean;
+}
+
+export class Ref<T = any> extends Component implements CanMemoize<T> {
+   declare isRef?: boolean;
+
+   constructor(config: RefConfig<T>) {
+      super(config);
+      this.get = this.get.bind(this);
+      if (this.set) this.set = this.set.bind(this);
+   }
+
+   get(): T {
+      throw new Error("Ref's get method is not implemented.");
+   }
+
+   set(value: T): boolean {
+      throw new Error("Ref's set method is not implemented.");
+   }
+
+   delete(): boolean {
+      throw new Error("Ref's delete method is not implemented.");
+   }
+
+   // Component.init() override - no-op for compatibility
+   init(): void;
+   // Initialize ref value if it's currently undefined
+   init(value: T): boolean;
+   init(value?: T): boolean | void {
+      if (value === undefined) return; // Component.init() compatibility
+      if (this.get() === undefined) return this.set(value);
+      return false;
+   }
+
+   toggle(): boolean {
+      return this.set(!this.get() as T);
+   }
+
+   update(cb: (currentValue: T, ...args: any[]) => T, ...args: any[]): boolean {
+      return this.set(cb(this.get(), ...args));
+   }
+
+   as(config: any): Ref {
+      return Ref.create(config, {
+         get: this.get,
+         set: this.set,
+      });
+   }
+
+   ref<ST = any>(path: string): Ref<ST> {
+      let binding = Binding.get(path);
+      return Ref.create({
+         get: () => binding.value(this.get()),
+         set: (value: any) => {
+            let data = this.get();
+            let newData = binding.set(data as Record<string, any>, value);
+            if (data === newData) return false;
+            return this.set(newData as T);
+         },
+      }) as Ref<ST>;
+   }
+
+   //allows the function to be passed as a selector, e.g. to computable or addTrigger
+   memoize(): () => T {
+      return this.get;
+   }
+}
+
+Ref.prototype.isRef = true;
+
+Ref.factory = function (alias: any, config?: any, more?: any): Ref {
+   if (isFunction(alias)) {
+      let cfg = {
+         ...config,
+         ...more,
+      };
+
+      if (cfg.store) Object.assign(cfg, cfg.store.getMethods());
+
+      let result = alias(cfg);
+      if (result instanceof Ref) return result;
+
+      return this.create({
+         ...config,
+         ...more,
+         ...result,
+      });
+   }
+
+   return this.create({
+      ...config,
+      ...more,
+   });
+};
diff --git a/packages/cx/src/data/Selector.ts b/packages/cx/src/data/Selector.ts
new file mode 100644
index 000000000..d5333ecfc
--- /dev/null
+++ b/packages/cx/src/data/Selector.ts
@@ -0,0 +1,10 @@
+export interface Selector<T = any> {
+   (data: any): T;
+   memoize?: (warmupData?: unknown) => Selector<T>;
+}
+
+export interface CanMemoize<T = any> {
+   memoize(warmupData?: unknown): Selector<T>;
+}
+
+export type MemoSelector<T = any> = Selector<T> & CanMemoize<T>;
diff --git a/packages/cx/src/data/Store.d.ts b/packages/cx/src/data/Store.d.ts
deleted file mode 100644
index 6a476d6e0..000000000
--- a/packages/cx/src/data/Store.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { View, ViewConfig } from "./View";
-
-interface StoreConfig<D = any> extends ViewConfig {
-   async?: boolean;
-   data?: D;
-}
-
-export class Store<D = any> extends View<D> {
-   constructor(config?: StoreConfig<D>);
-
-   unsubscribeAll(): void;
-
-   async: boolean;
-}
diff --git a/packages/cx/src/data/Store.js b/packages/cx/src/data/Store.js
deleted file mode 100644
index fd3fe5a74..000000000
--- a/packages/cx/src/data/Store.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import {Binding} from './Binding';
-import {SubscribableView} from './SubscribableView';
-
-export class Store extends SubscribableView {
-   constructor(config = {}) {
-      super(config);
-      this.data = config.data || {};
-      this.meta = {
-         version: 0
-      }
-   }
-
-   getData() {
-      return this.data;
-   }
-
-   setItem(path, value) {
-      let next = Binding.get(path).set(this.data, value);
-      if (next != this.data) {
-         this.data = next;
-         this.meta.version++;
-         this.notify(path);
-         return true;
-      }
-      return false;
-   }
-
-   deleteItem(path) {
-      let next = Binding.get(path).delete(this.data);
-      if (next != this.data) {
-         this.data = next;
-         this.meta.version++;
-         this.notify(path);
-         return true;
-      }
-      return false;
-   }
-
-   clear() {
-      this.data = {};
-      this.meta.version++;
-      this.notify();
-   }
-}
-
-Store.prototype.async = false;
diff --git a/packages/cx/src/data/Store.spec.js b/packages/cx/src/data/Store.spec.js
deleted file mode 100644
index e22522d5e..000000000
--- a/packages/cx/src/data/Store.spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import assert from 'assert';
-import {Store} from './Store';
-
-describe('Store', () => {
-
-   const getStore = () => {
-      return new Store({
-         data: {
-            a: 3,
-            item: {
-               firstName: 'Jack'
-            }
-         }
-      });
-   };
-
-   it('changes version on each update', ()=> {
-      let store = getStore();
-      store.set('a', 4);
-      assert.equal(store.getMeta().version, 1);
-   });
-});
diff --git a/packages/cx/src/data/Store.spec.ts b/packages/cx/src/data/Store.spec.ts
new file mode 100644
index 000000000..fa557c6cd
--- /dev/null
+++ b/packages/cx/src/data/Store.spec.ts
@@ -0,0 +1,22 @@
+import assert from 'assert';
+import { Store } from './Store';
+
+describe('Store', () => {
+
+   const getStore = () => {
+      return new Store({
+         data: {
+            a: 3,
+            item: {
+               firstName: 'Jack'
+            }
+         }
+      });
+   };
+
+   it('changes version on each update', ()=> {
+      let store = getStore();
+      store.set('a', 4);
+      assert.equal(store.getMeta().version, 1);
+   });
+});
diff --git a/packages/cx/src/data/Store.ts b/packages/cx/src/data/Store.ts
new file mode 100644
index 000000000..617765502
--- /dev/null
+++ b/packages/cx/src/data/Store.ts
@@ -0,0 +1,52 @@
+import { Binding } from "./Binding";
+import { SubscribableView, SubscribableViewConfig } from "./SubscribableView";
+
+export interface StoreConfig<D = any> extends Omit<SubscribableViewConfig, "store"> {
+   data?: D;
+}
+
+export class Store<D extends Record<string, any> = any> extends SubscribableView<D> {
+   data: D;
+
+   constructor(config: StoreConfig<D> = {}) {
+      super(config);
+      this.data = config.data ?? ({} as D);
+      this.meta = {
+         version: 0,
+      };
+   }
+
+   getData(): D {
+      return this.data;
+   }
+
+   setItem(path: string, value: any): boolean {
+      let next = Binding.get(path).set(this.data, value);
+      if (next != this.data) {
+         this.data = next;
+         this.meta.version++;
+         this.notify(path);
+         return true;
+      }
+      return false;
+   }
+
+   deleteItem(path: string): boolean {
+      let next = Binding.get(path).delete(this.data);
+      if (next != this.data) {
+         this.data = next;
+         this.meta.version++;
+         this.notify(path);
+         return true;
+      }
+      return false;
+   }
+
+   clear(): void {
+      this.data = {} as D;
+      this.meta.version++;
+      this.notify();
+   }
+}
+
+Store.prototype.async = false;
diff --git a/packages/cx/src/data/StoreProxy.d.ts b/packages/cx/src/data/StoreProxy.d.ts
deleted file mode 100644
index f963d4238..000000000
--- a/packages/cx/src/data/StoreProxy.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {View} from "./View";
-
-export class StoreProxy extends View {
-   constructor(getStore: () => View)
-}
\ No newline at end of file
diff --git a/packages/cx/src/data/StoreProxy.js b/packages/cx/src/data/StoreProxy.js
deleted file mode 100644
index 95863177f..000000000
--- a/packages/cx/src/data/StoreProxy.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import {View} from "./View";
-
-export class StoreProxy extends View {
-   constructor(getStore) {
-      super({
-         store: getStore()
-      });
-
-      Object.defineProperty(this, "store", {
-         get: getStore
-      });
-   }
-
-   getData() {
-      return this.store.getData();
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/data/StoreProxy.ts b/packages/cx/src/data/StoreProxy.ts
new file mode 100644
index 000000000..3fe110132
--- /dev/null
+++ b/packages/cx/src/data/StoreProxy.ts
@@ -0,0 +1,19 @@
+import { View } from "./View";
+
+export class StoreProxy extends View {
+   declare store: View;
+
+   constructor(getStore: () => View) {
+      super({
+         store: getStore(),
+      });
+
+      Object.defineProperty(this, "store", {
+         get: getStore,
+      });
+   }
+
+   getData(): any {
+      return this.store.getData();
+   }
+}
diff --git a/packages/cx/src/data/StoreRef.js b/packages/cx/src/data/StoreRef.js
deleted file mode 100644
index 2f7dba934..000000000
--- a/packages/cx/src/data/StoreRef.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { isAccessorChain } from "./createAccessorModelProxy";
-import { Ref } from "./Ref";
-
-export class StoreRef extends Ref {
-   constructor(config) {
-      super(config);
-      if (isAccessorChain(this.path)) this.path = this.path.toString();
-   }
-
-   get() {
-      return this.store.get(this.path);
-   }
-
-   set(value) {
-      return this.store.set(this.path, value);
-   }
-
-   init(value) {
-      return this.store.init(this.path, value);
-   }
-
-   toggle() {
-      return this.store.toggle(this.path);
-   }
-
-   delete() {
-      return this.store.delete(this.path);
-   }
-
-   update(...args) {
-      return this.store.update(this.path, ...args);
-   }
-
-   //allows the function to be passed as a selector, e.g. to computable or addTrigger
-   memoize() {
-      return this.get;
-   }
-
-   ref(path) {
-      return new StoreRef({
-         path: `${this.path}.${path}`,
-         store: this.store,
-      });
-   }
-
-   as(config) {
-      return StoreRef.create(config, {
-         path: this.path,
-         store: this.store,
-         get: this.get,
-         set: this.set,
-      });
-   }
-}
diff --git a/packages/cx/src/data/StoreRef.spec.js b/packages/cx/src/data/StoreRef.spec.js
deleted file mode 100644
index 2bcc5cbb9..000000000
--- a/packages/cx/src/data/StoreRef.spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import assert from "assert";
-import { Store } from "./Store";
-import { StoreRef } from "./StoreRef";
-
-const getStore = () => {
-   return new Store({
-      data: {
-         person: {
-            name: "Jack",
-         },
-      },
-   });
-};
-
-describe("StoreRef", () => {
-   it("can access child refs", () => {
-      let store = getStore();
-      let person = store.ref("person");
-      let name = person.ref("name");
-      assert.equal(name.get("person"), "Jack");
-      name.set("John");
-      assert.equal(name.get("person"), "John");
-   });
-});
diff --git a/packages/cx/src/data/StoreRef.spec.ts b/packages/cx/src/data/StoreRef.spec.ts
new file mode 100644
index 000000000..6e4ae10cc
--- /dev/null
+++ b/packages/cx/src/data/StoreRef.spec.ts
@@ -0,0 +1,24 @@
+import assert from "assert";
+import { Store } from "./Store";
+import { StoreRef } from "./StoreRef";
+
+const getStore = () => {
+   return new Store({
+      data: {
+         person: {
+            name: "Jack",
+         },
+      },
+   });
+};
+
+describe("StoreRef", () => {
+   it("can access child refs", () => {
+      let store = getStore();
+      let person = store.ref("person");
+      let name = person.ref("name");
+      assert.equal(name.get(), "Jack");
+      name.set("John");
+      assert.equal(name.get(), "John");
+   });
+});
diff --git a/packages/cx/src/data/StoreRef.ts b/packages/cx/src/data/StoreRef.ts
new file mode 100644
index 000000000..786431c7f
--- /dev/null
+++ b/packages/cx/src/data/StoreRef.ts
@@ -0,0 +1,66 @@
+import { isAccessorChain } from "./createAccessorModelProxy";
+import { Ref, RefConfig } from "./Ref";
+import { View } from "./View";
+
+interface StoreRefConfig<T> extends RefConfig<T> {
+   store: View;
+   path: string;
+}
+
+export class StoreRef<T = any> extends Ref<T> {
+   declare store: View;
+   declare path: string;
+
+   constructor(config: StoreRefConfig<T>) {
+      super(config);
+      if (isAccessorChain(this.path)) this.path = this.path.toString();
+   }
+
+   get() {
+      return this.store.get(this.path);
+   }
+
+   set(value: T): boolean {
+      return this.store.set(this.path, value);
+   }
+
+   init(): void;
+   init(value: T): boolean;
+   init(value?: T): boolean | void {
+      if (value === undefined) return;
+      return this.store.init(this.path, value);
+   }
+
+   toggle() {
+      return this.store.toggle(this.path);
+   }
+
+   delete() {
+      return this.store.delete(this.path);
+   }
+
+   update(cb: (currentValue: T, ...args: any[]) => T, ...args: any[]): boolean {
+      return this.store.update(this.path, cb, ...args);
+   }
+
+   //allows the function to be passed as a selector, e.g. to computable or addTrigger
+   memoize() {
+      return this.get;
+   }
+
+   ref<ST = any>(path: string): StoreRef<ST> {
+      return new StoreRef<ST>({
+         path: `${this.path}.${path}`,
+         store: this.store,
+      });
+   }
+
+   as(config: RefConfig<T>) {
+      return StoreRef.create(config, {
+         path: this.path,
+         store: this.store,
+         get: this.get,
+         set: this.set,
+      });
+   }
+}
diff --git a/packages/cx/src/data/StringTemplate.d.ts b/packages/cx/src/data/StringTemplate.d.ts
deleted file mode 100644
index 6fc87f638..000000000
--- a/packages/cx/src/data/StringTemplate.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Selector } from "../core";
-
-export function stringTemplate(str: string): Selector<string>;
-
-export class StringTemplate {
-   static get(str: string): Selector<string>;
-
-   static compile(str: string): Selector<string>;
-
-   static format(format: string, ...args): string;
-}
-
-export function invalidateStringTemplateCache(): void;
-
-export function setGetStringTemplateCacheCallback(callback: () => {}): void;
diff --git a/packages/cx/src/data/StringTemplate.js b/packages/cx/src/data/StringTemplate.js
deleted file mode 100644
index 727467781..000000000
--- a/packages/cx/src/data/StringTemplate.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { expression } from "./Expression";
-
-import { quoteStr } from "../util/quote";
-
-function plus(str) {
-   return str.length ? str + " + " : str;
-}
-
-export function stringTemplate(str) {
-   let tplCache = getTplCache();
-   let expr = tplCache[str];
-   if (expr) return expr;
-
-   expr = "";
-
-   let termStart = -1,
-      quoteStart = 0,
-      term,
-      bracketsOpen = 0,
-      percentSign;
-
-   for (let i = 0; i < str.length; i++) {
-      switch (str[i]) {
-         case "{":
-            if (termStart < 0) {
-               if (str[i + 1] == "{" && str[i - 1] != "%") {
-                  expr = plus(expr) + quoteStr(str.substring(quoteStart, i) + "{");
-                  i++;
-                  quoteStart = i + 1;
-               } else {
-                  termStart = i + 1;
-                  percentSign = str[i - 1] == "%";
-                  if (i > quoteStart) expr = plus(expr) + quoteStr(str.substring(quoteStart, percentSign ? i - 1 : i));
-                  bracketsOpen = 1;
-                  quoteStart = i; // for the case where the brackets are not closed
-               }
-            } else bracketsOpen++;
-            break;
-
-         case "}":
-            if (termStart >= 0) {
-               if (--bracketsOpen == 0) {
-                  term = str.substring(termStart, i);
-                  if (term.indexOf(":") == -1) {
-                     let nullSepIndex = term.indexOf("|");
-                     if (nullSepIndex == -1) term += ":s";
-                     else term = term.substring(0, nullSepIndex) + ":s" + term.substring(nullSepIndex);
-                  }
-                  expr = plus(expr) + (percentSign ? "%{" : "{") + term + "}";
-                  termStart = -1;
-                  quoteStart = i + 1;
-                  bracketsOpen = 0;
-               }
-            } else if (str[i + 1] == "}") {
-               expr = plus(expr) + quoteStr(str.substring(quoteStart, i) + "}");
-               i++;
-               quoteStart = i + 1;
-            }
-            break;
-      }
-   }
-
-   if (quoteStart < str.length || expr.length == 0) expr = plus(expr) + quoteStr(str.substring(quoteStart));
-
-   return (tplCache[str] = expression(expr));
-}
-
-export const StringTemplate = {
-   get: function (str) {
-      return stringTemplate(str);
-   },
-
-   compile: function (str) {
-      return stringTemplate(str).memoize();
-   },
-
-   format: function (format, ...args) {
-      return stringTemplate(format)(args);
-   },
-};
-
-let tplCache = {};
-
-let getTplCache = () => tplCache;
-
-export function invalidateStringTemplateCache() {
-   tplCache = {};
-}
-
-export function setGetStringTemplateCacheCallback(callback) {
-   getTplCache = callback;
-}
diff --git a/packages/cx/src/data/StringTemplate.spec.js b/packages/cx/src/data/StringTemplate.spec.js
deleted file mode 100644
index b5dc3672b..000000000
--- a/packages/cx/src/data/StringTemplate.spec.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import { StringTemplate } from "./StringTemplate";
-import assert from "assert";
-
-describe("StringTemplate", function () {
-   describe("#compile()", function () {
-      it("returns a selector", function () {
-         var e = StringTemplate.compile("Hello {person.name}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello Jim");
-      });
-
-      it("allows empty strings", function () {
-         let e = StringTemplate.compile("");
-         assert.equal(e(), "");
-      });
-
-      it("properly encodes ' and \"", function () {
-         var e = StringTemplate.compile('It\'s "working"!');
-         assert.equal(e({}), 'It\'s "working"!');
-      });
-
-      it("allows \\ before a binding", function () {
-         var e = StringTemplate.compile("t\\{person.name}");
-         assert.equal(e({ person: { name: "Ogi" } }), "t\\Ogi");
-      });
-
-      it("supports multi-line strings", function () {
-         var e = StringTemplate.compile("a\nb");
-         assert.equal(e(), "a\nb");
-
-         var e = StringTemplate.compile("a\r\nb");
-         assert.equal(e(), "a\r\nb");
-      });
-   });
-
-   describe("double brackets are used to escape brackets", function () {
-      it("double brackets are preserved", function () {
-         var e = StringTemplate.compile("Hello {{person.name}}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello {person.name}");
-      });
-
-      it("triple brackets are converted to single brackets and a binding", function () {
-         var e = StringTemplate.compile("Hello {{{person.name}}}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello {Jim}");
-      });
-
-      it("open brackets are ignored", function () {
-         var e = StringTemplate.compile("B { A");
-         assert.equal(e({}), "B { A");
-      });
-   });
-
-   describe("supports formatting", function () {
-      it("with colon", function () {
-         var e = StringTemplate.compile("{str:suffix;kg}");
-         assert.equal(e({ str: "5" }), "5kg");
-      });
-
-      it("with multiple formats", function () {
-         var e = StringTemplate.compile("{str:suffix;kg:wrap;(;)}");
-         assert.equal(e({ str: "5" }), "(5kg)");
-      });
-
-      it("with null values", function () {
-         var e = StringTemplate.compile("{str:suffix;kg:|N/A}");
-         assert.equal(e({ str: null }), "N/A");
-      });
-
-      it("of null values", function () {
-         var e = StringTemplate.compile("{str|N/A}");
-         assert.equal(e({ str: null }), "N/A");
-      });
-   });
-
-   describe("properly handles backslashes", function () {
-      it("in a string", function () {
-         var e = StringTemplate.compile("a\\b");
-         assert.equal(e(), "a\\b");
-      });
-
-      it("before a special character", function () {
-         var e = StringTemplate.compile("\\t");
-         assert.equal(e(), "\\t");
-      });
-   });
-
-   describe("supports expressions", function () {
-      it("using []", function () {
-         var e = StringTemplate.compile("1 + 2 = {[1+2]}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("using %", function () {
-         var e = StringTemplate.compile("1 + 2 = %{1+2}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with subexpressions", function () {
-         var e = StringTemplate.compile("1 + 2 = {[%{1+2}]}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with a conditional operator", function () {
-         var e = StringTemplate.compile("1 + 2 = {[true ? 3 : 2]:s}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with sub-expression formatting", function () {
-         var e = StringTemplate.compile("{[!!{person.age} ? {person.age:suffix; years old} : 'Age unknown']}");
-         var state = {
-            person: {
-               age: 32,
-            },
-         };
-         assert.equal(e(state), "32 years old");
-      });
-   });
-});
diff --git a/packages/cx/src/data/StringTemplate.spec.ts b/packages/cx/src/data/StringTemplate.spec.ts
new file mode 100644
index 000000000..20e2ad954
--- /dev/null
+++ b/packages/cx/src/data/StringTemplate.spec.ts
@@ -0,0 +1,132 @@
+import { StringTemplate } from "./StringTemplate";
+import assert from "assert";
+
+describe("StringTemplate", function () {
+   describe("#compile()", function () {
+      it("returns a selector", function () {
+         var e = StringTemplate.compile("Hello {person.name}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello Jim");
+      });
+
+      it("allows empty strings", function () {
+         let e = StringTemplate.compile("");
+         assert.equal(e({}), "");
+      });
+
+      it("properly encodes ' and \"", function () {
+         var e = StringTemplate.compile('It\'s "working"!');
+         assert.equal(e({}), 'It\'s "working"!');
+      });
+
+      it("allows \\ before a binding", function () {
+         var e = StringTemplate.compile("t\\{person.name}");
+         assert.equal(e({ person: { name: "Ogi" } }), "t\\Ogi");
+      });
+
+      it("supports multi-line strings", function () {
+         var e = StringTemplate.compile("a\nb");
+         assert.equal(e({}), "a\nb");
+
+         var e = StringTemplate.compile("a\r\nb");
+         assert.equal(e({}), "a\r\nb");
+      });
+   });
+
+   describe("double brackets are used to escape brackets", function () {
+      it("double brackets are preserved", function () {
+         var e = StringTemplate.compile("Hello {{person.name}}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello {person.name}");
+      });
+
+      it("triple brackets are converted to single brackets and a binding", function () {
+         var e = StringTemplate.compile("Hello {{{person.name}}}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello {Jim}");
+      });
+
+      it("open brackets are ignored", function () {
+         var e = StringTemplate.compile("B { A");
+         assert.equal(e({}), "B { A");
+      });
+   });
+
+   describe("supports formatting", function () {
+      it("with colon", function () {
+         var e = StringTemplate.compile("{str:suffix;kg}");
+         assert.equal(e({ str: "5" }), "5kg");
+      });
+
+      it("with multiple formats", function () {
+         var e = StringTemplate.compile("{str:suffix;kg:wrap;(;)}");
+         assert.equal(e({ str: "5" }), "(5kg)");
+      });
+
+      it("with null values", function () {
+         var e = StringTemplate.compile("{str:suffix;kg:|N/A}");
+         assert.equal(e({ str: null }), "N/A");
+      });
+
+      it("of null values", function () {
+         var e = StringTemplate.compile("{str|N/A}");
+         assert.equal(e({ str: null }), "N/A");
+      });
+   });
+
+   describe("properly handles backslashes", function () {
+      it("in a string", function () {
+         var e = StringTemplate.compile("a\\b");
+         assert.equal(e({}), "a\\b");
+      });
+
+      it("before a special character", function () {
+         var e = StringTemplate.compile("\\t");
+         assert.equal(e({}), "\\t");
+      });
+   });
+
+   describe("supports expressions", function () {
+      it("using []", function () {
+         var e = StringTemplate.compile("1 + 2 = {[1+2]}");
+         assert.equal(e({}), "1 + 2 = 3");
+      });
+
+      it("using %", function () {
+         var e = StringTemplate.compile("1 + 2 = %{1+2}");
+         assert.equal(e({}), "1 + 2 = 3");
+      });
+
+      it("with subexpressions", function () {
+         var e = StringTemplate.compile("1 + 2 = {[%{1+2}]}");
+         assert.equal(e({}), "1 + 2 = 3");
+      });
+
+      it("with a conditional operator", function () {
+         var e = StringTemplate.compile("1 + 2 = {[true ? 3 : 2]:s}");
+         assert.equal(e({}), "1 + 2 = 3");
+      });
+
+      it("with sub-expression formatting", function () {
+         var e = StringTemplate.compile("{[!!{person.age} ? {person.age:suffix; years old} : 'Age unknown']}");
+         var state = {
+            person: {
+               age: 32,
+            },
+         };
+         assert.equal(e(state), "32 years old");
+      });
+   });
+});
diff --git a/packages/cx/src/data/StringTemplate.ts b/packages/cx/src/data/StringTemplate.ts
new file mode 100644
index 000000000..249aa45c1
--- /dev/null
+++ b/packages/cx/src/data/StringTemplate.ts
@@ -0,0 +1,93 @@
+import { expression } from "./Expression";
+import { MemoSelector } from "./Selector";
+
+import { quoteStr } from "../util/quote";
+
+function plus(str: string) {
+   return str.length ? str + " + " : str;
+}
+
+export function stringTemplate(str: string): MemoSelector<string> {
+   let tplCache = getTplCache();
+   let cached = tplCache[str];
+   if (cached) return cached;
+
+   let expr = "";
+
+   let termStart = -1,
+      quoteStart = 0,
+      term: string,
+      bracketsOpen = 0,
+      percentSign: boolean = false;
+
+   for (let i = 0; i < str.length; i++) {
+      switch (str[i]) {
+         case "{":
+            if (termStart < 0) {
+               if (str[i + 1] == "{" && str[i - 1] != "%") {
+                  expr = plus(expr) + quoteStr(str.substring(quoteStart, i) + "{");
+                  i++;
+                  quoteStart = i + 1;
+               } else {
+                  termStart = i + 1;
+                  percentSign = str[i - 1] == "%";
+                  if (i > quoteStart) expr = plus(expr) + quoteStr(str.substring(quoteStart, percentSign ? i - 1 : i));
+                  bracketsOpen = 1;
+                  quoteStart = i; // for the case where the brackets are not closed
+               }
+            } else bracketsOpen++;
+            break;
+
+         case "}":
+            if (termStart >= 0) {
+               if (--bracketsOpen == 0) {
+                  term = str.substring(termStart, i);
+                  if (term.indexOf(":") == -1) {
+                     let nullSepIndex = term.indexOf("|");
+                     if (nullSepIndex == -1) term += ":s";
+                     else term = term.substring(0, nullSepIndex) + ":s" + term.substring(nullSepIndex);
+                  }
+                  expr = plus(expr) + (percentSign ? "%{" : "{") + term + "}";
+                  termStart = -1;
+                  quoteStart = i + 1;
+                  bracketsOpen = 0;
+               }
+            } else if (str[i + 1] == "}") {
+               expr = plus(expr) + quoteStr(str.substring(quoteStart, i) + "}");
+               i++;
+               quoteStart = i + 1;
+            }
+            break;
+      }
+   }
+
+   if (quoteStart < str.length || expr.length == 0) expr = plus(expr) + quoteStr(str.substring(quoteStart));
+
+   return (tplCache[str] = expression(expr));
+}
+
+export const StringTemplate = {
+   get: function (str: string) {
+      return stringTemplate(str);
+   },
+
+   compile: function (str: string) {
+      return stringTemplate(str).memoize();
+   },
+
+   format: function (format: string, ...args: any[]) {
+      return stringTemplate(format)(args);
+   },
+};
+
+let tplCache: Record<string, MemoSelector> = {};
+
+let getTplCache = () => tplCache;
+
+export function invalidateStringTemplateCache() {
+   tplCache = {};
+}
+
+export function setGetStringTemplateCacheCallback(callback: () => Record<string, MemoSelector>) {
+   getTplCache = callback;
+}
diff --git a/packages/cx/src/data/StructuredDataAccessor.d.ts b/packages/cx/src/data/StructuredDataAccessor.d.ts
deleted file mode 100644
index 722606b67..000000000
--- a/packages/cx/src/data/StructuredDataAccessor.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface StructuredDataAccessor {
-   getSelector(): (data: Cx.Record) => Cx.Record;
-   get(): Cx.Record;
-   setItem(key: string, value: any): boolean;
-   containsKey(key): string;
-   getKeys(): string[];
-}
diff --git a/packages/cx/src/data/StructuredSelector.d.ts b/packages/cx/src/data/StructuredSelector.d.ts
deleted file mode 100644
index 92b44bc7f..000000000
--- a/packages/cx/src/data/StructuredSelector.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { StructuredProp, Record, Selector } from "../core";
-import { View } from "./View";
-
-interface StructuredSelectorConfig {
-   props: StructuredProp;
-   values: Record;
-}
-
-export class StructuredSelector {
-   constructor(config: StructuredSelectorConfig);
-
-   init(store: View);
-
-   create(memoize: boolean = true): Selector<Record>;
-
-   createStoreSelector(): (store: View) => Record;
-}
diff --git a/packages/cx/src/data/StructuredSelector.js b/packages/cx/src/data/StructuredSelector.js
deleted file mode 100644
index 8e5cad3fe..000000000
--- a/packages/cx/src/data/StructuredSelector.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import { Binding } from "./Binding";
-import { Expression } from "./Expression";
-import { StringTemplate } from "./StringTemplate";
-import { createStructuredSelector } from "../data/createStructuredSelector";
-import { getSelector } from "../data/getSelector";
-import { isFunction } from "../util/isFunction";
-import { isUndefined } from "../util/isUndefined";
-import { isDefined } from "../util/isDefined";
-import { isArray } from "../util/isArray";
-import { isAccessorChain } from "./createAccessorModelProxy";
-import { isString } from "../util/isString";
-
-function defaultValue(pv) {
-   if (typeof pv == "object" && pv && pv.structured) return pv.defaultValue;
-
-   return pv;
-}
-
-function getSelectorConfig(props, values, nameMap) {
-   let functions = {},
-      structures = {},
-      defaultValues = {},
-      constants,
-      p,
-      v,
-      pv,
-      constant = true;
-
-   for (p in props) {
-      v = values[p];
-      pv = props[p];
-
-      if (isUndefined(v) && pv && (pv.bind || pv.tpl || pv.expr)) v = pv;
-
-      if (v === null) {
-         if (!constants) constants = {};
-         constants[p] = null;
-      } else if (typeof v == "object") {
-         if (v.bind) {
-            if (isUndefined(v.defaultValue) && v != pv) v.defaultValue = defaultValue(pv);
-            if (isDefined(v.defaultValue)) defaultValues[v.bind] = v.defaultValue;
-            nameMap[p] = v.bind;
-            functions[p] = Binding.get(v.bind).value;
-            constant = false;
-         } else if (v.expr) {
-            functions[p] = Expression.get(v.expr);
-            constant = false;
-         } else if (v.get) {
-            functions[p] = v.get;
-            constant = false;
-         } else if (isString(v.tpl)) {
-            functions[p] = StringTemplate.get(v.tpl);
-            constant = false;
-         } else if (pv && typeof pv == "object" && pv.structured) {
-            if (isArray(v)) functions[p] = getSelector(v);
-            else {
-               let s = getSelectorConfig(v, v, {});
-               structures[p] = s;
-               Object.assign(defaultValues, s.defaultValues);
-            }
-            constant = false;
-         } else {
-            if (!constants) constants = {};
-            constants[p] = v;
-         }
-      } else if (isFunction(v)) {
-         if (isAccessorChain(v)) {
-            let path = v.toString();
-            nameMap[p] = path;
-            functions[p] = Binding.get(path).value;
-         } else functions[p] = v;
-         constant = false;
-      } else {
-         if (isUndefined(v)) {
-            if (isUndefined(pv)) continue;
-            v = defaultValue(pv);
-         }
-
-         if (isUndefined(v)) continue;
-
-         if (!constants) constants = {};
-
-         constants[p] = v;
-      }
-   }
-
-   return {
-      functions,
-      structures,
-      defaultValues,
-      constants,
-      constant,
-   };
-}
-
-function createSelector({ functions, structures, constants, defaultValues }) {
-   let selector = {};
-
-   for (let n in functions) {
-      selector[n] = functions[n];
-   }
-
-   for (let n in structures) selector[n] = createSelector(structures[n]);
-
-   return createStructuredSelector(selector, constants);
-}
-
-export class StructuredSelector {
-   constructor({ props, values }) {
-      this.nameMap = {};
-      this.config = getSelectorConfig(props, values, this.nameMap);
-   }
-
-   init(store) {
-      store.init(this.config.defaultValues);
-   }
-
-   create(memoize = true) {
-      let selector = createSelector(this.config);
-      if (memoize && selector.memoize) return selector.memoize();
-      return selector;
-   }
-
-   createStoreSelector() {
-      if (this.config.constant) {
-         let result = { ...this.config.constants };
-         return () => result;
-      }
-      let selector = this.create();
-      return (store) => selector(store.getData());
-   }
-}
diff --git a/packages/cx/src/data/StructuredSelector.spec.js b/packages/cx/src/data/StructuredSelector.spec.js
deleted file mode 100644
index 9044fa5fa..000000000
--- a/packages/cx/src/data/StructuredSelector.spec.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { StructuredSelector } from "./StructuredSelector";
-import assert from "assert";
-import { createAccessorModelProxy } from "./createAccessorModelProxy";
-
-describe("StructuredSelector", function () {
-   describe("#create()", function () {
-      it("constants", function () {
-         var x = {};
-         var s = new StructuredSelector({
-            props: {
-               a: undefined,
-               b: undefined,
-            },
-            values: {
-               a: 1,
-               b: 2,
-            },
-         }).create(x);
-
-         assert.deepEqual(s(x), { a: 1, b: 2 });
-      });
-
-      it("bindings", function () {
-         var x = { a: 1, b: 2 };
-         var s = new StructuredSelector({
-            props: {
-               a: undefined,
-               b: undefined,
-            },
-            values: {
-               a: { bind: "b" },
-               b: { bind: "a" },
-            },
-         }).create(x);
-
-         assert.deepEqual(s(x), { a: 2, b: 1 });
-      });
-
-      it("templates", function () {
-         var x = { a: 1, b: 2 };
-         var s = new StructuredSelector({
-            props: {
-               a: undefined,
-               b: undefined,
-            },
-            values: {
-               a: { tpl: "b{a}" },
-               b: { tpl: "a{b}" },
-            },
-         }).create(x);
-
-         assert.deepEqual(s(x), { a: "b1", b: "a2" });
-      });
-
-      it("structured", function () {
-         var x = { a: 1, b: 2 };
-         var s = new StructuredSelector({
-            props: {
-               a: {
-                  structured: true,
-               },
-               b: undefined,
-            },
-            values: {
-               a: {
-                  x: { expr: "{a} == 1" },
-                  y: { expr: "{b} == 1" },
-               },
-               b: { tpl: "a{b}" },
-            },
-         }).create(x);
-
-         assert.deepEqual(s(x), { a: { x: true, y: false }, b: "a2" });
-      });
-   });
-
-   it("structures do not change if data doesn't change", function () {
-      var x = { a: 1, b: 2 };
-      var s = new StructuredSelector({
-         props: {
-            a: {
-               structured: true,
-            },
-         },
-         values: {
-            a: {
-               x: { expr: "{a} == 1" },
-               y: { expr: "{b} == 1" },
-            },
-            b: { tpl: "a{b}" },
-         },
-      }).create(x);
-
-      let r1 = s(x);
-      let r2 = s(x);
-
-      assert.equal(r1, r2);
-   });
-
-   it("structures do not change if data doesn't change", function () {
-      var x = { a: { b: 2 } };
-      var m = createAccessorModelProxy();
-      var s = new StructuredSelector({
-         props: {
-            b: undefined,
-         },
-         values: {
-            b: m.a.b,
-         },
-      }).create(x);
-      assert.deepEqual(s(x), { b: 2 });
-   });
-});
diff --git a/packages/cx/src/data/StructuredSelector.spec.ts b/packages/cx/src/data/StructuredSelector.spec.ts
new file mode 100644
index 000000000..7a146bae3
--- /dev/null
+++ b/packages/cx/src/data/StructuredSelector.spec.ts
@@ -0,0 +1,113 @@
+import { StructuredSelector } from "./StructuredSelector";
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+
+describe("StructuredSelector", function () {
+   describe("#create()", function () {
+      it("constants", function () {
+         var x = {};
+         var s = new StructuredSelector({
+            props: {
+               a: undefined,
+               b: undefined,
+            },
+            values: {
+               a: 1,
+               b: 2,
+            },
+         }).create();
+
+         assert.deepEqual(s(x), { a: 1, b: 2 });
+      });
+
+      it("bindings", function () {
+         var x = { a: 1, b: 2 };
+         var s = new StructuredSelector({
+            props: {
+               a: undefined,
+               b: undefined,
+            },
+            values: {
+               a: { bind: "b" },
+               b: { bind: "a" },
+            },
+         }).create();
+
+         assert.deepEqual(s(x), { a: 2, b: 1 });
+      });
+
+      it("templates", function () {
+         var x = { a: 1, b: 2 };
+         var s = new StructuredSelector({
+            props: {
+               a: undefined,
+               b: undefined,
+            },
+            values: {
+               a: { tpl: "b{a}" },
+               b: { tpl: "a{b}" },
+            },
+         }).create();
+
+         assert.deepEqual(s(x), { a: "b1", b: "a2" });
+      });
+
+      it("structured", function () {
+         var x = { a: 1, b: 2 };
+         var s = new StructuredSelector({
+            props: {
+               a: {
+                  structured: true,
+               },
+               b: undefined,
+            },
+            values: {
+               a: {
+                  x: { expr: "{a} == 1" },
+                  y: { expr: "{b} == 1" },
+               },
+               b: { tpl: "a{b}" },
+            },
+         }).create();
+
+         assert.deepEqual(s(x), { a: { x: true, y: false }, b: "a2" });
+      });
+   });
+
+   it("structures do not change if data doesn't change", function () {
+      var x = { a: 1, b: 2 };
+      var s = new StructuredSelector({
+         props: {
+            a: {
+               structured: true,
+            },
+         },
+         values: {
+            a: {
+               x: { expr: "{a} == 1" },
+               y: { expr: "{b} == 1" },
+            },
+            b: { tpl: "a{b}" },
+         },
+      }).create();
+
+      let r1 = s(x);
+      let r2 = s(x);
+
+      assert.equal(r1, r2);
+   });
+
+   it("accessor model proxy works", function () {
+      var x = { a: { b: 2 } };
+      var m = createAccessorModelProxy<typeof x>();
+      var s = new StructuredSelector({
+         props: {
+            b: undefined,
+         },
+         values: {
+            b: m.a.b,
+         },
+      }).create();
+      assert.deepEqual(s(x), { b: 2 });
+   });
+});
diff --git a/packages/cx/src/data/StructuredSelector.ts b/packages/cx/src/data/StructuredSelector.ts
new file mode 100644
index 000000000..b56731f4b
--- /dev/null
+++ b/packages/cx/src/data/StructuredSelector.ts
@@ -0,0 +1,146 @@
+import { Binding } from "./Binding";
+import { Expression } from "./Expression";
+import { StringTemplate } from "./StringTemplate";
+import { createStructuredSelector } from "../data/createStructuredSelector";
+import { getSelector } from "../data/getSelector";
+import { isFunction } from "../util/isFunction";
+import { isUndefined } from "../util/isUndefined";
+import { isDefined } from "../util/isDefined";
+import { isArray } from "../util/isArray";
+import { isAccessorChain } from "./createAccessorModelProxy";
+import { isString } from "../util/isString";
+import { View } from "./View";
+
+function defaultValue(pv: any) {
+   if (typeof pv == "object" && pv && pv.structured) return pv.defaultValue;
+
+   return pv;
+}
+
+function getSelectorConfig(props: any, values: any, nameMap: any) {
+   let functions: Record<string, any> = {},
+      structures: Record<string, any> = {},
+      defaultValues: Record<string, any> = {},
+      constants: Record<string, any> | undefined,
+      p: string,
+      v: any,
+      pv: any,
+      constant = true;
+
+   for (p in props) {
+      v = values[p];
+      pv = props[p];
+
+      if (isUndefined(v) && pv && (pv.bind || pv.tpl || pv.expr)) v = pv;
+
+      if (v === null) {
+         if (!constants) constants = {};
+         constants[p] = null;
+      } else if (typeof v == "object") {
+         if (v.bind) {
+            if (isUndefined(v.defaultValue) && v != pv) v.defaultValue = defaultValue(pv);
+            if (isDefined(v.defaultValue)) defaultValues[v.bind] = v.defaultValue;
+            nameMap[p] = v.bind;
+            functions[p] = Binding.get(v.bind).value;
+            constant = false;
+         } else if (v.expr) {
+            functions[p] = Expression.get(v.expr);
+            constant = false;
+         } else if (v.get) {
+            functions[p] = v.get;
+            constant = false;
+         } else if (isString(v.tpl)) {
+            functions[p] = StringTemplate.get(v.tpl);
+            constant = false;
+         } else if (pv && typeof pv == "object" && pv.structured) {
+            if (isArray(v)) functions[p] = getSelector(v);
+            else {
+               let s = getSelectorConfig(v, v, {});
+               structures[p] = s;
+               Object.assign(defaultValues, s.defaultValues);
+            }
+            constant = false;
+         } else {
+            if (!constants) constants = {};
+            constants[p] = v;
+         }
+      } else if (isFunction(v)) {
+         if (isAccessorChain(v)) {
+            let path = v.toString();
+            nameMap[p] = path;
+            functions[p] = Binding.get(path).value;
+         } else functions[p] = v;
+         constant = false;
+      } else {
+         if (isUndefined(v)) {
+            if (isUndefined(pv)) continue;
+            v = defaultValue(pv);
+         }
+
+         if (isUndefined(v)) continue;
+
+         if (!constants) constants = {};
+
+         constants[p] = v;
+      }
+   }
+
+   return {
+      functions,
+      structures,
+      defaultValues,
+      constants,
+      constant,
+   };
+}
+
+function createSelector({
+   functions,
+   structures,
+   constants,
+   defaultValues,
+}: {
+   functions: any;
+   structures: any;
+   constants: any;
+   defaultValues: any;
+}) {
+   let selector: Record<string, any> = {};
+
+   for (let n in functions) {
+      selector[n] = functions[n];
+   }
+
+   for (let n in structures) selector[n] = createSelector(structures[n]);
+
+   return createStructuredSelector(selector, constants);
+}
+
+export class StructuredSelector {
+   nameMap: Record<string, string>;
+   config: any;
+
+   constructor({ props, values }: { props: any; values: any }) {
+      this.nameMap = {};
+      this.config = getSelectorConfig(props, values, this.nameMap);
+   }
+
+   init(store: View) {
+      store.init(this.config.defaultValues);
+   }
+
+   create(memoize = true) {
+      let selector = createSelector(this.config);
+      if (memoize && selector.memoize) return selector.memoize();
+      return selector;
+   }
+
+   createStoreSelector() {
+      if (this.config.constant) {
+         let result = { ...this.config.constants };
+         return () => result;
+      }
+      let selector = this.create();
+      return (store: View) => selector(store.getData());
+   }
+}
diff --git a/packages/cx/src/data/SubscribableView.d.ts b/packages/cx/src/data/SubscribableView.d.ts
deleted file mode 100644
index 043247611..000000000
--- a/packages/cx/src/data/SubscribableView.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {View, ViewConfig} from './View';
-
-
-
-export class SubscribableView extends View {
-   constructor(config?: ViewConfig);
-
-   unsubscribeAll(): void;
-
-   async: boolean;
-}
diff --git a/packages/cx/src/data/SubscribableView.js b/packages/cx/src/data/SubscribableView.js
deleted file mode 100644
index 43ec41008..000000000
--- a/packages/cx/src/data/SubscribableView.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { View } from "./View";
-import { SubscriberList } from "../util/SubscriberList";
-
-export class SubscribableView extends View {
-   constructor(config) {
-      super(config);
-      this.subscribers = new SubscriberList();
-      this.changes = [];
-   }
-
-   subscribe(callback) {
-      return this.subscribers.subscribe(callback);
-   }
-
-   unsubscribeAll() {
-      this.subscribers.clear();
-   }
-
-   doNotify(path) {
-      if (this.notificationsSuspended) return;
-
-      if (!this.async) {
-         this.subscribers.notify([path]);
-      } else {
-         this.changes.push(path || "");
-         if (!this.scheduled) {
-            this.scheduled = true;
-            setTimeout(() => {
-               this.scheduled = false;
-               let changes = this.changes;
-               this.changes = [];
-               this.subscribers.notify(changes);
-            }, 0);
-         }
-      }
-   }
-
-   silently(callback) {
-      this.notificationsSuspended = (this.notificationsSuspended || 0) + 1;
-      let wasDirty = this.dirty,
-         dirty;
-      this.dirty = false;
-      try {
-         callback(this);
-      } finally {
-         this.notificationsSuspended--;
-         dirty = this.dirty;
-         this.dirty = wasDirty;
-      }
-      return dirty;
-   }
-}
-
-SubscribableView.prototype.async = false;
diff --git a/packages/cx/src/data/SubscribableView.ts b/packages/cx/src/data/SubscribableView.ts
new file mode 100644
index 000000000..0ffd8b220
--- /dev/null
+++ b/packages/cx/src/data/SubscribableView.ts
@@ -0,0 +1,63 @@
+import { View, ViewConfig } from "./View";
+import { SubscriberList } from "../util/SubscriberList";
+
+export interface SubscribableViewConfig extends ViewConfig {
+   async?: boolean;
+}
+
+export class SubscribableView<D> extends View<D> {
+   subscribers?: any;
+   changes: string[];
+   declare async: boolean;
+   scheduled: boolean;
+
+   constructor(config?: SubscribableViewConfig) {
+      super(config);
+      this.subscribers = new SubscriberList();
+      this.changes = [];
+   }
+
+   subscribe(callback: () => void) {
+      return this.subscribers.subscribe(callback);
+   }
+
+   unsubscribeAll() {
+      this.subscribers.clear();
+   }
+
+   doNotify(path: string) {
+      if (this.notificationsSuspended) return;
+
+      if (!this.async) {
+         this.subscribers.notify([path]);
+      } else {
+         this.changes.push(path || "");
+         if (!this.scheduled) {
+            this.scheduled = true;
+            setTimeout(() => {
+               this.scheduled = false;
+               let changes = this.changes;
+               this.changes = [];
+               this.subscribers.notify(changes);
+            }, 0);
+         }
+      }
+   }
+
+   silently(callback: (store?: View) => void) {
+      this.notificationsSuspended = (this.notificationsSuspended || 0) + 1;
+      let wasDirty = this.dirty,
+         dirty;
+      this.dirty = false;
+      try {
+         callback(this);
+      } finally {
+         this.notificationsSuspended--;
+         dirty = this.dirty;
+         this.dirty = wasDirty;
+      }
+      return dirty;
+   }
+}
+
+SubscribableView.prototype.async = false;
diff --git a/packages/cx/src/data/View.d.ts b/packages/cx/src/data/View.d.ts
deleted file mode 100644
index 344f101cd..000000000
--- a/packages/cx/src/data/View.d.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { AccessorChain } from "../core";
-import { Binding } from "./Binding";
-import { Ref } from "./Ref";
-
-declare type Path = string | Binding;
-
-export interface ViewConfig {
-   store?: View;
-
-   /* When set, the root data object of the parent store will be preserved (no virtual properties will be added), i.e. $record. */
-   immutable?: boolean;
-
-   /* When set, instructs the child views not to modify its data object (same effect as setting immutable on child stores). */
-   sealed?: boolean;
-}
-
-export interface ViewMethods<D = Record<string, any>> {
-   getData(): D;
-
-   init(path: Path, value: any): boolean;
-   init<V>(path: AccessorChain<V>, value: V): boolean;
-
-   set(path: Path, value: any): boolean;
-   set<T extends Record<string, any>>(changes: T): boolean;
-   set<V>(path: AccessorChain<V>, value: V): boolean;
-
-   get(path: Path): any;
-   get(paths: Path[]): any[];
-   get(...paths: Path[]): any[];
-   get<V>(path: AccessorChain<V>): V;
-   get<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): T;
-   get<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): T;
-
-   /**
-    * Removes data from the Store.
-    * @param paths - One or more paths to be deleted.
-    * @return {boolean}
-    */
-   delete(path: Path): boolean;
-   delete(paths: Path[]): boolean;
-   delete(...paths: Path[]): boolean;
-   delete<V>(path: AccessorChain<V>): boolean;
-   delete<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
-   delete<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
-
-   toggle(path: Path): boolean;
-
-   update(updateFn: (currentValue: D, ...args) => D, ...args): boolean;
-   update(path: Path, updateFn: (currentValue: any, ...args) => any, ...args): boolean;
-   update<V, A extends any[]>(
-      path: AccessorChain<V>,
-      updateFn: (currentValue: V, ...args: A) => V,
-      ...args: A
-   ): boolean;
-
-   /**
-    *  Mutates the content of the store using Immer
-    */
-   mutate(updateFn: (currentValue: D, ...args) => D, ...args): boolean;
-   mutate(path: Path, updateFn: (currentValue: any, ...args) => any, ...args): boolean;
-   mutate<V, A extends any[]>(
-      path: AccessorChain<V>,
-      updateFn: (currentValue: V, ...args: A) => void,
-      ...args: A
-   ): boolean;
-
-   ref<T = any>(path: string | AccessorChain<T>, defaultValue?: T): Ref<T>;
-}
-
-export class View<D = any> implements ViewMethods<D> {
-   constructor(config?: ViewConfig);
-
-   getData(): D;
-
-   init(path: Path, value: any): boolean;
-   init<V>(path: AccessorChain<V>, value: V): boolean;
-
-   set(path: Path, value: any): boolean;
-   set<T extends Record<string, any>>(changes: T): boolean;
-   set<V>(path: AccessorChain<V>, value: V): boolean;
-
-   /**
-    * Copies the value stored under the `from` path and saves it under the `to` path.
-    * @param from - Origin path.
-    * @param to - Destination path.
-    */
-   copy(from: Path, to: Path): boolean;
-   copy<V>(from: AccessorChain<V>, to: AccessorChain<V>): boolean;
-
-   move(from: Path, to: Path): boolean;
-   move<V>(from: AccessorChain<V>, to: AccessorChain<V>): boolean;
-
-   /**
-    * Removes data from the Store.
-    * @param paths - Any number or an array of paths to be deleted.
-    * @return {boolean}
-    */
-   delete(path: Path): boolean;
-   delete(paths: Path[]): boolean;
-   delete(...paths: Path[]): boolean;
-   delete<V>(path: AccessorChain<V>): boolean;
-   delete<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
-   delete<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
-
-   clear(): void;
-
-   get(path: Path): any;
-   get(paths: Path[]): any;
-   get(...paths: Path[]): any;
-   get<V>(path: AccessorChain<V>): V;
-   get<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): T;
-   get<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): T;
-
-   toggle(path: Path): boolean;
-   toggle(path: AccessorChain<boolean>): boolean;
-
-   update(updateFn: (currentValue: D, ...args) => any, ...args): boolean;
-   update(path: Path, updateFn: (currentValue: any, ...args) => any, ...args): boolean;
-   update<V, A extends any[]>(
-      path: AccessorChain<V>,
-      updateFn: (currentValue: V, ...args: A) => V,
-      ...args: A
-   ): boolean;
-
-   mutate(updateFn: (currentValue: D, ...args) => void, ...args): boolean;
-   mutate(path: Path, updateFn: (currentValue: any, ...args) => void, ...args): boolean;
-   mutate<V, A extends any[]>(
-      path: AccessorChain<V>,
-      updateFn: (currentValue: V, ...args: A) => void,
-      ...args: A
-   ): boolean;
-
-   /**
-    * `batch` method can be used to perform multiple Store operations silently
-    * and re-render the application only once afterwards. The Store instance
-    * is passed to the `callback` function.
-    * @param callback - Function that will perform multiple Store operations
-    * @return {boolean}
-    */
-   batch(callback: (store: View) => void): boolean;
-
-   silently(callback: () => void): boolean;
-
-   notify(path?: string): void;
-
-   subscribe(callback: (changes?) => void): () => void;
-
-   load(data: Record<string, any>): boolean;
-
-   dispatch(action): void;
-
-   getMethods(): ViewMethods;
-
-   ref<T = any>(path: string | AccessorChain<T>, defaultValue?: T): Ref<T>;
-}
diff --git a/packages/cx/src/data/View.js b/packages/cx/src/data/View.js
deleted file mode 100644
index 74f438952..000000000
--- a/packages/cx/src/data/View.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import { Binding } from "./Binding";
-import { isArray } from "../util/isArray";
-import { isDefined } from "../util/isDefined";
-import { StoreRef } from "./StoreRef";
-import { isObject } from "../util/isObject";
-import { isFunction } from "../util/isFunction";
-
-export class View {
-   constructor(config) {
-      Object.assign(this, config);
-      this.cache = {
-         version: -1,
-      };
-      if (this.store) this.setStore(this.store);
-   }
-
-   getData() {
-      throw new Error("abstract method");
-   }
-
-   init(path, value) {
-      if (typeof path == "object" && path != null) {
-         let changed = false;
-         for (let key in path)
-            if (path.hasOwnProperty(key) && this.get(key) === undefined && this.setItem(key, path[key])) changed = true;
-         return changed;
-      }
-      let binding = Binding.get(path);
-      if (this.get(binding.path) === undefined) return this.setItem(binding.path, value);
-      return false;
-   }
-
-   set(path, value) {
-      if (isObject(path)) {
-         let changed = false;
-         for (let key in path) if (path.hasOwnProperty(key) && this.setItem(key, path[key])) changed = true;
-         return changed;
-      }
-      let binding = Binding.get(path);
-      return this.setItem(binding.path, value);
-   }
-
-   copy(from, to) {
-      let value = this.get(from);
-      this.set(to, value);
-   }
-
-   move(from, to) {
-      this.batch(() => {
-         this.copy(from, to);
-         this.delete(from);
-      });
-   }
-
-   //protected
-   setItem(path, value) {
-      if (this.store) return this.store.setItem(path, value);
-      throw new Error("abstract method");
-   }
-
-   delete(path) {
-      if (arguments.length > 1) path = Array.from(arguments);
-      if (isArray(path)) return path.map((arg) => this.delete(arg)).some(Boolean);
-
-      let binding = Binding.get(path);
-      return this.deleteItem(binding.path);
-   }
-
-   //protected
-   deleteItem(path) {
-      if (this.store) return this.store.deleteItem(path);
-
-      throw new Error("abstract method");
-   }
-
-   clear() {
-      if (this.store) return this.store.clear();
-
-      throw new Error("abstract method");
-   }
-
-   get(path) {
-      let storeData = this.getData();
-
-      if (arguments.length > 1) path = Array.from(arguments);
-
-      if (isArray(path)) return path.map((arg) => Binding.get(arg).value(storeData));
-
-      return Binding.get(path).value(storeData);
-   }
-
-   toggle(path) {
-      return this.set(path, !this.get(path));
-   }
-
-   update(path, updateFn, ...args) {
-      if (arguments.length == 1 && isFunction(path))
-         return this.load(path.apply(null, [this.getData(), updateFn, ...args]));
-      return this.set(path, updateFn.apply(null, [this.get(path), ...args]));
-   }
-
-   batch(callback) {
-      let dirty = this.silently(callback);
-      if (dirty) this.notify();
-      return dirty;
-   }
-
-   silently(callback) {
-      if (this.store) return this.store.silently(callback);
-
-      throw new Error("abstract method");
-   }
-
-   notify(path) {
-      if (this.notificationsSuspended) this.dirty = true;
-      else this.doNotify(path);
-   }
-
-   doNotify(path) {
-      if (this.store) return this.store.notify(path);
-
-      throw new Error("abstract method");
-   }
-
-   subscribe(callback) {
-      if (this.store) return this.store.subscribe(callback);
-
-      throw new Error("abstract method");
-   }
-
-   load(data) {
-      return this.batch((store) => {
-         for (let key in data) store.set(key, data[key]);
-      });
-   }
-
-   dispatch(action) {
-      if (this.store) return this.store.dispatch(action);
-
-      throw new Error("The underlying store doesn't support dispatch.");
-   }
-
-   getMeta() {
-      return this.meta;
-   }
-
-   setStore(store) {
-      this.store = store;
-      this.meta = store.getMeta();
-   }
-
-   ref(path, defaultValue) {
-      if (isDefined(defaultValue)) this.init(path, defaultValue);
-      return StoreRef.create({
-         store: this,
-         path,
-      });
-   }
-
-   getMethods() {
-      return {
-         getData: this.getData.bind(this),
-         set: this.set.bind(this),
-         get: this.get.bind(this),
-         update: this.update.bind(this),
-         delete: this.delete.bind(this),
-         toggle: this.toggle.bind(this),
-         init: this.init.bind(this),
-         ref: this.ref.bind(this),
-         mutate: this.ref.bind(this),
-      };
-   }
-}
-
-View.prototype.sealed = false; //indicate that data should be copied before virtual items are added
-
-//Immer integration point
-View.prototype.mutate = function () {
-   throw new Error(
-      "Mutate requires Immer. Please install 'immer' and 'cx-immer' packages and enable store mutation by calling enableImmerMutate()."
-   );
-};
diff --git a/packages/cx/src/data/View.spec.js b/packages/cx/src/data/View.spec.ts
similarity index 100%
rename from packages/cx/src/data/View.spec.js
rename to packages/cx/src/data/View.spec.ts
diff --git a/packages/cx/src/data/View.ts b/packages/cx/src/data/View.ts
new file mode 100644
index 000000000..b8cb4f8cd
--- /dev/null
+++ b/packages/cx/src/data/View.ts
@@ -0,0 +1,289 @@
+import { Binding } from "./Binding";
+import { isArray } from "../util/isArray";
+import { isDefined } from "../util/isDefined";
+import { StoreRef } from "./StoreRef";
+import { isObject } from "../util/isObject";
+import { isFunction } from "../util/isFunction";
+import { AccessorChain } from "./createAccessorModelProxy";
+import { Ref } from "./Ref";
+
+type Path = string | Binding;
+
+export interface ViewConfig {
+   store?: View;
+   immutable?: boolean;
+   sealed?: boolean;
+}
+
+export interface ViewMethods<D = Record<string, any>> {
+   getData(): D;
+
+   init(path: Path, value: unknown): boolean;
+   init<V>(path: AccessorChain<V>, value: V): boolean;
+   init<T extends Record<string, unknown>>(initObject: T): boolean;
+
+   set(path: Path, value: any): boolean;
+   set<T extends Record<string, any>>(changes: T): boolean;
+   set<V>(path: AccessorChain<V>, value: V): boolean;
+
+   get(path: Path): any;
+   get(paths: Path[]): any[];
+   get(...paths: Path[]): any[];
+   get<V>(path: AccessorChain<V>): V;
+   get<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): T;
+   get<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): T;
+
+   /**
+    * Removes data from the Store.
+    * @param paths - One or more paths to be deleted.
+    * @return {boolean}
+    */
+   delete(path: Path): boolean;
+   delete(paths: Path[]): boolean;
+   delete(...paths: Path[]): boolean;
+   delete<V>(path: AccessorChain<V>): boolean;
+   delete<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
+   delete<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
+
+   toggle(path: Path): boolean;
+   toggle(path: AccessorChain<boolean>): boolean;
+
+   update(updateFn: (currentValue: D, ...args: any[]) => any, ...args: any): boolean;
+   update<A extends any[]>(path: Path, updateFn: (currentValue: any, ...args: A) => any, ...args: A): boolean;
+   update<V, A extends any[]>(
+      path: AccessorChain<V>,
+      updateFn: (currentValue: V, ...args: A) => V,
+      ...args: A
+   ): boolean;
+
+   /**
+    *  Mutates the content of the store using Immer
+    */
+   mutate(updateFn: (currentValue: D, ...args: any[]) => void, ...args: any[]): boolean;
+   mutate<A extends any[]>(path: Path, updateFn: (currentValue: any, ...args: A) => void, ...args: A): boolean;
+   mutate<V, A extends any[]>(
+      path: AccessorChain<V>,
+      updateFn: (currentValue: V, ...args: A) => void,
+      ...args: A
+   ): boolean;
+
+   ref<T = any>(path: string | AccessorChain<T>, defaultValue?: T): Ref<T>;
+}
+
+export class View<D = any> implements ViewMethods<D> {
+   declare store?: View;
+   declare meta: any;
+   declare sealed: boolean;
+   cache: { version: number; data?: any; result?: any; itemIndex?: number; key?: string; parentStoreData?: any };
+   notificationsSuspended: number = 0;
+   dirty: boolean = false;
+
+   constructor(config?: ViewConfig) {
+      Object.assign(this, config);
+      this.cache = {
+         version: -1,
+      };
+      if (this.store) this.setStore(this.store);
+   }
+
+   getData(): D {
+      throw new Error("abstract method");
+   }
+
+   init(path: Path, value: unknown): boolean;
+   init<V>(path: AccessorChain<V>, value: V): boolean;
+   init<T extends Record<string, unknown>>(initObject: T): boolean;
+   init(path: any, value?: any): boolean {
+      if (typeof path == "object" && path != null) {
+         let changed = false;
+         for (let key in path)
+            if (path.hasOwnProperty(key) && this.get(key) === undefined && this.setItem(key, path[key])) changed = true;
+         return changed;
+      }
+      let binding = Binding.get(path);
+      if (this.get(binding.path) === undefined) return this.setItem(binding.path, value);
+      return false;
+   }
+
+   set(path: Path, value: any): boolean;
+   set<T extends Record<string, any>>(changes: T): boolean;
+   set<V>(path: AccessorChain<V>, value: V): boolean;
+   set(path: any, value?: any): boolean {
+      if (typeof path == "object" && path != null) {
+         let changed = false;
+         for (let key in path) if (path.hasOwnProperty(key) && this.setItem(key, path[key])) changed = true;
+         return changed;
+      }
+      let binding = Binding.get(path);
+      return this.setItem(binding.path, value);
+   }
+
+   copy(from: Path, to: Path): boolean;
+   copy<V>(from: AccessorChain<V>, to: AccessorChain<V>): boolean;
+   copy(from: any, to: any): boolean {
+      let value = this.get(from);
+      return this.set(to, value);
+   }
+
+   move(from: Path, to: Path): boolean;
+   move<V>(from: AccessorChain<V>, to: AccessorChain<V>): boolean;
+   move(from: any, to: any): boolean {
+      return this.batch(() => {
+         this.copy(from, to);
+         this.delete(from);
+      });
+   }
+
+   //protected
+   setItem(path: string, value: any): boolean {
+      if (this.store) return this.store.setItem(path, value);
+      throw new Error("abstract method");
+   }
+
+   delete(path: Path): boolean;
+   delete(paths: Path[]): boolean;
+   delete(...paths: Path[]): boolean;
+   delete<V>(path: AccessorChain<V>): boolean;
+   delete<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
+   delete<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
+   delete(path?: any): boolean {
+      if (arguments.length > 1) path = Array.from(arguments);
+      if (isArray(path)) return path.map((arg) => this.delete(arg as Path)).some(Boolean);
+
+      let binding = Binding.get(path);
+      return this.deleteItem(binding.path);
+   }
+
+   //protected
+   deleteItem(path: string): boolean {
+      if (this.store) return this.store.deleteItem(path);
+
+      throw new Error("abstract method");
+   }
+
+   clear(): void {
+      if (this.store) return this.store.clear();
+
+      throw new Error("abstract method");
+   }
+
+   get(path: Path): any;
+   get(paths: Path[]): any[];
+   get(...paths: Path[]): any[];
+   get<V>(path: AccessorChain<V>): V;
+   get<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): T;
+   get<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): T;
+   get(path?: any, ...args: any[]): any {
+      let storeData = this.getData();
+
+      if (arguments.length > 1) path = Array.from(arguments);
+
+      if (isArray(path)) return path.map((arg) => Binding.get(arg as any).value(storeData));
+
+      return Binding.get(path).value(storeData);
+   }
+
+   toggle(path: Path): boolean;
+   toggle(path: AccessorChain<boolean>): boolean;
+   toggle(path: any): boolean {
+      return this.set(path, !this.get(path));
+   }
+
+   update(updateFn: (currentValue: D, ...args: any[]) => any, ...args: any): boolean;
+   update<A extends any[]>(path: Path, updateFn: (currentValue: any, ...args: A) => any, ...args: A): boolean;
+   update<V, A extends any[]>(
+      path: AccessorChain<V>,
+      updateFn: (currentValue: V, ...args: A) => V,
+      ...args: A
+   ): boolean;
+   update(path: any, updateFn?: any, ...args: any[]): boolean {
+      if (arguments.length == 1 && isFunction(path))
+         return this.load(path.apply(null, [this.getData(), updateFn, ...args]));
+      return this.set(path, updateFn.apply(null, [this.get(path), ...args]));
+   }
+
+   mutate(updateFn: (currentValue: D, ...args: any[]) => void, ...args: any[]): boolean;
+   mutate<A extends any[]>(path: Path, updateFn: (currentValue: any, ...args: A) => void, ...args: A): boolean;
+   mutate<V, A extends any[]>(
+      path: AccessorChain<V>,
+      updateFn: (currentValue: V, ...args: A) => void,
+      ...args: A
+   ): boolean;
+   mutate(path?: any, updateFn?: any, ...args: any[]): boolean {
+      throw new Error(
+         "Mutate requires Immer. Please install 'immer' and 'cx-immer' packages and enable store mutation by calling enableImmerMutate().",
+      );
+   }
+
+   batch(callback: (store?: View) => void): boolean {
+      let dirty = this.silently(callback);
+      if (dirty) this.notify();
+      return dirty;
+   }
+
+   silently(callback: (store?: View) => void): boolean {
+      if (this.store) return this.store.silently(callback);
+
+      throw new Error("abstract method");
+   }
+
+   notify(path?: string): void {
+      if (this.notificationsSuspended) this.dirty = true;
+      else this.doNotify(path);
+   }
+
+   doNotify(path?: string): void {
+      if (this.store) return this.store.notify(path);
+
+      throw new Error("abstract method");
+   }
+
+   subscribe(callback: (changes?: any) => void): () => void {
+      if (this.store) return this.store.subscribe(callback);
+
+      throw new Error("abstract method");
+   }
+
+   load(data: Record<string, any>): boolean {
+      return this.set(data);
+   }
+
+   dispatch(action: any): void {
+      if (this.store) return this.store.dispatch(action);
+
+      throw new Error("The underlying store doesn't support dispatch.");
+   }
+
+   getMeta() {
+      return this.meta;
+   }
+
+   setStore(store: View) {
+      this.store = store;
+      this.meta = store.getMeta();
+   }
+
+   ref<T = any>(path: string | AccessorChain<T>, defaultValue?: T): Ref<T> {
+      if (isDefined(defaultValue)) this.init(path as any, defaultValue);
+      return StoreRef.create({
+         store: this,
+         path,
+      }) as Ref<T>;
+   }
+
+   getMethods(): ViewMethods<D> {
+      return {
+         getData: this.getData.bind(this),
+         set: this.set.bind(this),
+         get: this.get.bind(this),
+         update: this.update.bind(this),
+         delete: this.delete.bind(this),
+         toggle: this.toggle.bind(this),
+         init: this.init.bind(this),
+         ref: this.ref.bind(this),
+         mutate: this.mutate.bind(this),
+      };
+   }
+}
+
+View.prototype.sealed = false; //indicate that data should be copied before virtual items are added
diff --git a/packages/cx/src/data/ZoomIntoPropertyView.d.ts b/packages/cx/src/data/ZoomIntoPropertyView.d.ts
deleted file mode 100644
index 178626525..000000000
--- a/packages/cx/src/data/ZoomIntoPropertyView.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {View, ViewConfig} from './View';
-import {Binding} from './Binding';
-
-interface ZoomIntoPropertyViewConfig extends ViewConfig {
-   rootName?: string,
-   binding: Binding
-}
-
-export class ZoomIntoPropertyView extends View {
-   constructor(config?: ZoomIntoPropertyViewConfig);
-}
diff --git a/packages/cx/src/data/ZoomIntoPropertyView.js b/packages/cx/src/data/ZoomIntoPropertyView.js
deleted file mode 100644
index 43168efa3..000000000
--- a/packages/cx/src/data/ZoomIntoPropertyView.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Binding } from "./Binding";
-import { NestedDataView } from "./NestedDataView";
-
-export class ZoomIntoPropertyView extends NestedDataView {
-   getBaseData(parentStoreData) {
-      let x = this.binding.value(parentStoreData);
-      if (x != null && typeof x != "object") throw new Error("Zoomed value must be an object.");
-      return {
-         ...x,
-      };
-   }
-
-   embedAugmentData(result, parentStoreData) {
-      result[this.rootName] = parentStoreData;
-      super.embedAugmentData(result, parentStoreData);
-   }
-
-   setItem(path, value) {
-      if (path.indexOf(this.rootName + ".") == 0) this.store.setItem(path.substring(this.rootName.length + 1), value);
-      else if (this.isExtraKey(Binding.get(path).parts[0]))
-         super.setItem(path, value);
-      else super.setItem(this.binding.path + "." + path, value);
-   }
-
-   deleteItem(path) {
-      if (path.indexOf(this.rootName + ".") == 0) this.store.deleteItem(path.substring(this.rootName.length + 1));
-      else if (this.isExtraKey(Binding.get(path).parts[0]))
-         super.deleteItem(path);
-      else super.deleteItem(this.binding.path + "." + path);
-   }
-}
-
-ZoomIntoPropertyView.prototype.rootName = "$root";
diff --git a/packages/cx/src/data/ZoomIntoPropertyView.spec.js b/packages/cx/src/data/ZoomIntoPropertyView.spec.js
deleted file mode 100644
index f1b178d65..000000000
--- a/packages/cx/src/data/ZoomIntoPropertyView.spec.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import assert from 'assert';
-
-import {Binding} from './Binding';
-import {Store} from './Store';
-import {ZoomIntoPropertyView} from './ZoomIntoPropertyView';
-
-describe('ZoomIntoPropertyView', () => {
-
-   const getZoom = () => {
-      let store = new Store({
-         data: {
-            a: 3,
-            item: {
-               firstName: 'Jack'
-            }
-         }
-      });
-
-      return new ZoomIntoPropertyView({
-         store: store,
-         binding: Binding.get('item')
-      });
-   };
-
-   it('allows direct access to properties of zoomed object', ()=> {
-      let zoom = getZoom();
-      assert.equal(zoom.get('firstName'), 'Jack');
-   });
-
-   it('allows access to outside data through $root', ()=> {
-      let zoom = getZoom();
-      assert.equal(zoom.get('$root.a'), 3);
-   });
-
-   it('correctly sets zoomed object', ()=> {
-      let zoom = getZoom();
-      zoom.set('firstName', 'Joe');
-      assert.equal(zoom.get('firstName'), 'Joe');
-   });
-
-   it('correctly sets zoomed values', ()=> {
-      let zoom = getZoom();
-      zoom.set('firstName', 'Joe');
-      assert.equal(zoom.get('firstName'), 'Joe');
-      assert.equal(zoom.get('$root.item.firstName'), 'Joe');
-   });
-
-   it('correctly sets outside values', ()=> {
-      let zoom = getZoom();
-      zoom.set('$root.a', 6);
-      assert.equal(zoom.get('$root.a'), 6);
-   });
-
-   it('correctly deletes zoomed values', ()=> {
-      let zoom = getZoom();
-      zoom.delete('firstName');
-      assert.equal(zoom.get('firstName'), undefined);
-   });
-
-   it('correctly deletes outside values', ()=> {
-      let zoom = getZoom();
-      zoom.delete('$root.a');
-      assert.equal(zoom.get('$root.a'), undefined);
-   });
-});
diff --git a/packages/cx/src/data/ZoomIntoPropertyView.spec.ts b/packages/cx/src/data/ZoomIntoPropertyView.spec.ts
new file mode 100644
index 000000000..5cb6a42e4
--- /dev/null
+++ b/packages/cx/src/data/ZoomIntoPropertyView.spec.ts
@@ -0,0 +1,64 @@
+import assert from "assert";
+
+import { Binding } from "./Binding";
+import { Store } from "./Store";
+import { ZoomIntoPropertyView } from "./ZoomIntoPropertyView";
+
+describe("ZoomIntoPropertyView", () => {
+   const getZoom = () => {
+      let store = new Store({
+         data: {
+            a: 3,
+            item: {
+               firstName: "Jack",
+            },
+         },
+      });
+
+      return new ZoomIntoPropertyView({
+         store: store,
+         binding: Binding.get("item"),
+      });
+   };
+
+   it("allows direct access to properties of zoomed object", () => {
+      let zoom = getZoom();
+      assert.equal(zoom.get("firstName"), "Jack");
+   });
+
+   it("allows access to outside data through $root", () => {
+      let zoom = getZoom();
+      assert.equal(zoom.get("$root.a"), 3);
+   });
+
+   it("correctly sets zoomed object", () => {
+      let zoom = getZoom();
+      zoom.set("firstName", "Joe");
+      assert.equal(zoom.get("firstName"), "Joe");
+   });
+
+   it("correctly sets zoomed values", () => {
+      let zoom = getZoom();
+      zoom.set("firstName", "Joe");
+      assert.equal(zoom.get("firstName"), "Joe");
+      assert.equal(zoom.get("$root.item.firstName"), "Joe");
+   });
+
+   it("correctly sets outside values", () => {
+      let zoom = getZoom();
+      zoom.set("$root.a", 6);
+      assert.equal(zoom.get("$root.a"), 6);
+   });
+
+   it("correctly deletes zoomed values", () => {
+      let zoom = getZoom();
+      zoom.delete("firstName");
+      assert.equal(zoom.get("firstName"), undefined);
+   });
+
+   it("correctly deletes outside values", () => {
+      let zoom = getZoom();
+      zoom.delete("$root.a");
+      assert.equal(zoom.get("$root.a"), undefined);
+   });
+});
diff --git a/packages/cx/src/data/ZoomIntoPropertyView.ts b/packages/cx/src/data/ZoomIntoPropertyView.ts
new file mode 100644
index 000000000..57ee73836
--- /dev/null
+++ b/packages/cx/src/data/ZoomIntoPropertyView.ts
@@ -0,0 +1,45 @@
+import { Binding } from "./Binding";
+import { NestedDataView, NestedDataViewConfig } from "./NestedDataView";
+
+export interface ZoomIntoPropertyViewConfig extends NestedDataViewConfig {
+   binding: Binding;
+   rootName?: string;
+}
+
+export class ZoomIntoPropertyView extends NestedDataView {
+   declare binding: Binding;
+   declare rootName: string;
+
+   constructor(config: ZoomIntoPropertyViewConfig) {
+      super(config);
+   }
+
+   protected getBaseData(parentStoreData: any): any {
+      let x = this.binding.value(parentStoreData);
+      if (x != null && typeof x != "object") throw new Error("Zoomed value must be an object.");
+      return {
+         ...x,
+      };
+   }
+
+   protected embedAugmentData(result: any, parentStoreData: any): void {
+      result[this.rootName] = parentStoreData;
+      super.embedAugmentData(result, parentStoreData);
+   }
+
+   setItem(path: string, value: any): boolean {
+      if (path.indexOf(this.rootName + ".") == 0)
+         return this.store.setItem(path.substring(this.rootName.length + 1), value);
+      if (this.isExtraKey(Binding.get(path).parts[0])) return super.setItem(path, value);
+      return super.setItem(this.binding.path + "." + path, value);
+   }
+
+   deleteItem(path: string): boolean {
+      if (path.indexOf(this.rootName + ".") == 0)
+         return this.store.deleteItem(path.substring(this.rootName.length + 1));
+      if (this.isExtraKey(Binding.get(path).parts[0])) return super.deleteItem(path);
+      return super.deleteItem(this.binding.path + "." + path);
+   }
+}
+
+ZoomIntoPropertyView.prototype.rootName = "$root";
diff --git a/packages/cx/src/data/comparer.d.ts b/packages/cx/src/data/comparer.d.ts
deleted file mode 100644
index 74e391f58..000000000
--- a/packages/cx/src/data/comparer.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {Sorter} from '../core';
-
-export function getComparer(sorters: Sorter[], dataAccessor?: (any) => any, compare?: (a: any, b: any) => number) : (a: any, b: any) => number;
-
-export function indexSorter(sorters: Sorter[], dataAccessor?: (any) => any, compare?: (a: any, b: any) => number) : (data: any[]) => number[];
-
-export function sorter(sorters: Sorter[], dataAccessor?: (any) => any, compare?: (a: any, b: any) => number) : (data: any[]) => any[];
diff --git a/packages/cx/src/data/comparer.js b/packages/cx/src/data/comparer.js
deleted file mode 100644
index 4313fe8db..000000000
--- a/packages/cx/src/data/comparer.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { getSelector } from "./getSelector";
-import { isDefined } from "../util/isDefined";
-import { defaultCompare } from "./defaultCompare";
-
-export function getComparer(sorters, dataAccessor, comparer) {
-   let resolvedSorters = (sorters || []).map((s) => {
-      let selector = isDefined(s.value) ? getSelector(s.value) : s.field ? (x) => x[s.field] : () => null;
-      return {
-         getter: dataAccessor ? (x) => selector(dataAccessor(x)) : selector,
-         factor: s.direction && s.direction[0].toLowerCase() == "d" ? -1 : 1,
-         compare: s.comparer || s.compare || comparer || defaultCompare,
-      };
-   });
-
-   return function (a, b) {
-      let d, av, bv;
-      for (let i = 0; i < resolvedSorters.length; i++) {
-         d = resolvedSorters[i];
-         av = d.getter(a);
-         bv = d.getter(b);
-
-         // show nulls always on the bottom
-         if (av == null) {
-            if (bv == null) continue;
-            else return 1;
-         }
-         if (bv == null) return -1;
-
-         let r = d.compare(av, bv);
-         if (r == 0) continue;
-         return d.factor * r;
-      }
-      return 0;
-   };
-}
-
-export function indexSorter(sorters, dataAccessor, compare) {
-   let cmp = getComparer(sorters, dataAccessor, compare);
-   return function (data) {
-      let result = Array.from({ length: data.length }, (v, k) => k);
-      result.sort((ia, ib) => cmp(data[ia], data[ib]));
-      return result;
-   };
-}
-
-export function sorter(sorters, dataAccessor, compare) {
-   let cmp = getComparer(sorters, dataAccessor, compare);
-
-   return function (data) {
-      let result = [...data];
-      result.sort(cmp);
-      return result;
-   };
-}
diff --git a/packages/cx/src/data/comparer.spec.js b/packages/cx/src/data/comparer.spec.ts
similarity index 100%
rename from packages/cx/src/data/comparer.spec.js
rename to packages/cx/src/data/comparer.spec.ts
diff --git a/packages/cx/src/data/comparer.ts b/packages/cx/src/data/comparer.ts
new file mode 100644
index 000000000..6e7fdf6cc
--- /dev/null
+++ b/packages/cx/src/data/comparer.ts
@@ -0,0 +1,78 @@
+import { getSelector } from "./getSelector";
+import { isDefined } from "../util/isDefined";
+import { defaultCompare } from "./defaultCompare";
+
+interface Sorter {
+   value?: any;
+   field?: string;
+   direction?: string;
+   comparer?: (a: any, b: any) => number;
+   compare?: (a: any, b: any) => number;
+}
+
+export function getComparer(
+   sorters: Sorter[],
+   dataAccessor?: (x: any) => any,
+   comparer?: (a: any, b: any) => number,
+): (a: any, b: any) => number {
+   let resolvedSorters = (sorters || []).map((s) => {
+      let selector = isDefined(s.value)
+         ? getSelector(s.value)
+         : s.field
+           ? (x: Record<string, any>) => x[s.field!]
+           : () => null;
+      return {
+         getter: dataAccessor ? (x: any) => selector(dataAccessor(x)) : selector,
+         factor: s.direction && s.direction[0].toLowerCase() == "d" ? -1 : 1,
+         compare: s.comparer || s.compare || comparer || defaultCompare,
+      };
+   });
+
+   return function (a, b) {
+      let d, av, bv;
+      for (let i = 0; i < resolvedSorters.length; i++) {
+         d = resolvedSorters[i];
+         av = d.getter(a);
+         bv = d.getter(b);
+
+         // show nulls always on the bottom
+         if (av == null) {
+            if (bv == null) continue;
+            else return 1;
+         }
+         if (bv == null) return -1;
+
+         let r = d.compare(av, bv);
+         if (r == 0) continue;
+         return d.factor * r;
+      }
+      return 0;
+   };
+}
+
+export function indexSorter(
+   sorters: Sorter[],
+   dataAccessor?: (x: any) => any,
+   compare?: (a: any, b: any) => number,
+): (data: any[]) => number[] {
+   let cmp = getComparer(sorters, dataAccessor, compare);
+   return function (data) {
+      let result = Array.from({ length: data.length }, (v, k) => k);
+      result.sort((ia, ib) => cmp(data[ia], data[ib]));
+      return result;
+   };
+}
+
+export function sorter(
+   sorters: Sorter[],
+   dataAccessor?: (x: any) => any,
+   compare?: (a: any, b: any) => number,
+): (data: any[]) => any[] {
+   let cmp = getComparer(sorters, dataAccessor, compare);
+
+   return function (data) {
+      let result = [...data];
+      result.sort(cmp);
+      return result;
+   };
+}
diff --git a/packages/cx/src/data/computable.d.ts b/packages/cx/src/data/computable.d.ts
deleted file mode 100644
index 79807ffdf..000000000
--- a/packages/cx/src/data/computable.d.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { AccessorChain, Record } from "../core";
-
-interface Computable<V = any> {
-   (data: Record): V;
-   memoize(warmupData?: Record): (data: Record) => any;
-}
-
-export function computable(callback: () => any): Computable;
-export function computable(p1: string, computeFn: (v1: any) => any): Computable;
-export function computable(p1: string, p2: string, computeFn: (v1: any, v2: any) => any): Computable;
-export function computable(
-   p1: string,
-   p2: string,
-   p3: string,
-   computeFn: (v1: any, v2: any, v3: any) => any
-): Computable;
-export function computable(
-   p1: string,
-   p2: string,
-   p3: string,
-   p4: string,
-   computeFn: (v1: any, v2: any, v3: any, v4: any) => any
-): Computable;
-export function computable(
-   p1: string,
-   p2: string,
-   p3: string,
-   p4: string,
-   p5: string,
-   computeFn: (v1: any, v2: any, v3: any, v4: any, v5: any) => any
-): Computable;
-export function computable(
-   p1: string,
-   p2: string,
-   p3: string,
-   p4: string,
-   p5: string,
-   p6: string,
-   computeFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any) => any
-): Computable;
-export function computable(
-   p1: string,
-   p2: string,
-   p3: string,
-   p4: string,
-   p5: string,
-   p6: string,
-   p7: string,
-   computeFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any) => any
-): Computable;
-export function computable(
-   p1: string,
-   p2: string,
-   p3: string,
-   p4: string,
-   p5: string,
-   p6: string,
-   p7: string,
-   p8: string,
-   computeFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any, v8: any) => any
-): Computable;
-
-export function computable<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Computable<R>;
-export function computable<V1, V2, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   compute: (v1: V1, v2: V2) => R
-): Computable<R>;
-
-export function computable<V1, V2, V3, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   arg3: AccessorChain<V3>,
-   compute: (v1: V1, v2: V2, v3: V3) => R
-): Computable<R>;
-
-export function computable<V1, V2, V3, V4, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   arg3: AccessorChain<V3>,
-   arg4: AccessorChain<V4>,
-   compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R
-): Computable<R>;
-
-export function computable<V1, V2, V3, V4, V5, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   arg3: AccessorChain<V3>,
-   arg4: AccessorChain<V4>,
-   arg5: AccessorChain<V5>,
-   compute: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5) => R
-): Computable<R>;
-
-export function computable<V1, V2, V3, V4, V5, V6, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   arg3: AccessorChain<V3>,
-   arg4: AccessorChain<V4>,
-   arg5: AccessorChain<V5>,
-   arg6: AccessorChain<V6>,
-   compute: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6) => R
-): Computable<R>;
-
-export function computable<V1, V2, V3, V4, V5, V6, V7, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   arg3: AccessorChain<V3>,
-   arg4: AccessorChain<V4>,
-   arg5: AccessorChain<V5>,
-   arg6: AccessorChain<V6>,
-   arg7: AccessorChain<V7>,
-   compute: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7) => R
-): Computable<R>;
-
-export function computable<V1, V2, V3, V4, V5, V6, V7, V8, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   arg3: AccessorChain<V3>,
-   arg4: AccessorChain<V4>,
-   arg5: AccessorChain<V5>,
-   arg6: AccessorChain<V6>,
-   arg7: AccessorChain<V7>,
-   arg8: AccessorChain<V8>,
-   compute: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7, v8: V8) => R
-): Computable<R>;
diff --git a/packages/cx/src/data/computable.js b/packages/cx/src/data/computable.js
deleted file mode 100644
index ceefdecc1..000000000
--- a/packages/cx/src/data/computable.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Binding } from "./Binding";
-import { isString } from "../util/isString";
-import { isFunction } from "../util/isFunction";
-import { isAccessorChain } from "./createAccessorModelProxy";
-
-export function computable(...selectorsAndCompute) {
-   if (selectorsAndCompute.length == 0)
-      throw new Error("computable requires at least a compute function to be passed in arguments.");
-
-   let compute = selectorsAndCompute[selectorsAndCompute.length - 1];
-   if (typeof compute != "function") throw new Error("Last argument to the computable function should be a function.");
-
-   let inputs = [],
-      a;
-
-   for (let i = 0; i + 1 < selectorsAndCompute.length; i++) {
-      a = selectorsAndCompute[i];
-      if (isString(a) || isAccessorChain(a)) inputs.push(Binding.get(a.toString()).value);
-      else if (a.memoize) inputs.push(a.memoize());
-      else if (isFunction(a)) inputs.push(a);
-      else throw new Error(`Invalid selector type '${typeof a}' received.`);
-   }
-
-   function memoize(warmupData) {
-      let lastValue,
-         lastArgs = warmupData && inputs.map((s) => s(warmupData));
-
-      return function (data) {
-         let dirty = false;
-
-         if (!lastArgs) {
-            lastArgs = Array.from({ length: inputs.length });
-            dirty = true;
-         }
-
-         for (let i = 0; i < inputs.length; i++) {
-            let v = inputs[i](data);
-            if (v === lastArgs[i]) continue;
-            lastArgs[i] = v;
-            dirty = true;
-         }
-
-         if (dirty) lastValue = compute.apply(null, lastArgs);
-
-         return lastValue;
-      };
-   }
-
-   let selector = (data) =>
-      compute.apply(
-         null,
-         inputs.map((s) => s(data))
-      );
-   selector.memoize = memoize;
-   return selector;
-}
diff --git a/packages/cx/src/data/computable.spec.js b/packages/cx/src/data/computable.spec.js
deleted file mode 100644
index 327d21e0a..000000000
--- a/packages/cx/src/data/computable.spec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { computable } from "./computable";
-import assert from "assert";
-import { createAccessorModelProxy } from "./createAccessorModelProxy";
-
-describe("computable", function () {
-   it("creates a selector", function () {
-      let state = { person: { name: "Joe" } };
-      let nameLength = computable("person.name", (name) => name.length);
-      assert.equal(nameLength(state), 3);
-   });
-
-   it("fires every time if not memoized", function () {
-      let state = { person: { name: "Joe" } };
-      let fired = 0;
-      let nameLength = computable("person.name", (name) => {
-         fired++;
-         return name.length;
-      });
-      assert.equal(nameLength(state), 3);
-      assert.equal(nameLength(state), 3);
-      assert.equal(fired, 2);
-   });
-
-   it("fires once if memoized and data has not changed", function () {
-      let state = { person: { name: "Joe" } };
-      let fired = 0;
-      let nameLength = computable("person.name", (name) => {
-         fired++;
-         return name.length;
-      }).memoize();
-      assert.equal(nameLength(state), 3);
-      assert.equal(nameLength(state), 3);
-      assert.equal(fired, 1);
-   });
-
-   //weird but that's how triggers work and
-   it("memoize with warmup data will not call compute", function () {
-      let state = { person: { name: "Joe" } };
-      let fired = 0;
-      let nameLength = computable("person.name", (name) => {
-         fired++;
-         return name.length;
-      }).memoize(state);
-      assert.equal(nameLength(state), undefined);
-      assert.equal(nameLength(state), undefined);
-      assert.equal(fired, 0);
-   });
-
-   it("works with accessors", function () {
-      var m = createAccessorModelProxy();
-      let state = { person: { name: "Joe" } };
-      let nameLength = computable(m.person.name, (name) => name.length);
-      assert.equal(nameLength(state), 3);
-   });
-});
diff --git a/packages/cx/src/data/computable.spec.ts b/packages/cx/src/data/computable.spec.ts
new file mode 100644
index 000000000..07b1de068
--- /dev/null
+++ b/packages/cx/src/data/computable.spec.ts
@@ -0,0 +1,87 @@
+import { computable } from "./computable";
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+
+describe("computable", function () {
+   it("creates a selector", function () {
+      let state = { person: { name: "Joe" } };
+      let nameLength = computable("person.name", (name: string) => name.length);
+      assert.equal(nameLength(state), 3);
+   });
+
+   it("fires every time if not memoized", function () {
+      let state = { person: { name: "Joe" } };
+      let fired = 0;
+      let nameLength = computable("person.name", (name: string) => {
+         fired++;
+         return name.length;
+      });
+      assert.equal(nameLength(state), 3);
+      assert.equal(nameLength(state), 3);
+      assert.equal(fired, 2);
+   });
+
+   it("fires once if memoized and data has not changed", function () {
+      let state = { person: { name: "Joe" } };
+      let fired = 0;
+      let nameLength = computable("person.name", (name: string) => {
+         fired++;
+         return name.length;
+      }).memoize();
+      assert.equal(nameLength(state), 3);
+      assert.equal(nameLength(state), 3);
+      assert.equal(fired, 1);
+   });
+
+   //weird but that's how triggers work and
+   it("memoize with warmup data will not call compute", function () {
+      let state = { person: { name: "Joe" } };
+      let fired = 0;
+      let nameLength = computable("person.name", (name: string) => {
+         fired++;
+         return name.length;
+      }).memoize(state);
+      assert.equal(nameLength(state), undefined);
+      assert.equal(nameLength(state), undefined);
+      assert.equal(fired, 0);
+   });
+
+   it("works with accessors", function () {
+      var m = createAccessorModelProxy<{ person: { name: string } }>();
+      let state = { person: { name: "Joe" } };
+      let nameLength = computable(m.person.name, (name) => {
+         // name should be inferred as string
+         const typedName: string = name;
+         // @ts-expect-error - name should not be number
+         const wrongType: number = name;
+         return typedName.length;
+      });
+      assert.equal(nameLength(state), 3);
+   });
+
+   it("works with array length accessor", function () {
+      var m = createAccessorModelProxy<{ items: string[] }>();
+      let state = { items: ["a", "b", "c"] };
+      let itemCount = computable(m.items.length, (length) => {
+         // length should be inferred as number
+         const typedLength: number = length;
+         // @ts-expect-error - length should not be string
+         const wrongType: string = length;
+         return typedLength;
+      });
+      assert.equal(itemCount(state), 3);
+   });
+
+   it("resolves AccessorChain<any> and nested properties to any", function () {
+      var m = createAccessorModelProxy<{ data: any }>();
+      let state = { data: { nested: { value: 42 } } };
+      let result = computable(m.data.nested.value, (value) => {
+         // value should be any, so all assignments should work
+         const asString: string = value;
+         const asNumber: number = value;
+         const asBoolean: boolean = value;
+         return value;
+      });
+      assert.equal(result(state), 42);
+   });
+});
diff --git a/packages/cx/src/data/computable.ts b/packages/cx/src/data/computable.ts
new file mode 100644
index 000000000..2b7552f9c
--- /dev/null
+++ b/packages/cx/src/data/computable.ts
@@ -0,0 +1,69 @@
+import { Binding } from "./Binding";
+import { isString } from "../util/isString";
+import { isFunction } from "../util/isFunction";
+import { AccessorChain, isAccessorChain } from "./createAccessorModelProxy";
+import { CanMemoize, MemoSelector, Selector } from "./Selector";
+import { Ref } from "./Ref";
+
+export type ComputableSelector<T = any> = string | Selector<T> | AccessorChain<T> | CanMemoize<T>;
+
+// Helper type to infer the value type from a selector, string, or accessor chain
+export type InferSelectorValue<T> =
+   T extends Selector<infer R> ? R : T extends AccessorChain<infer R> ? R : T extends string ? any : never;
+
+// Generic function with proper type inference for selectors
+export function computable<T extends ComputableSelector[], R>(
+   ...args: [...T, (...values: { [K in keyof T]: InferSelectorValue<T[K]> }) => R]
+): MemoSelector<R>;
+
+export function computable(...selectorsAndCompute: any[]): MemoSelector {
+   if (selectorsAndCompute.length == 0)
+      throw new Error("computable requires at least a compute function to be passed in arguments.");
+
+   let compute = selectorsAndCompute[selectorsAndCompute.length - 1];
+   if (typeof compute != "function") throw new Error("Last argument to the computable function should be a function.");
+
+   let inputs: Selector[] = [],
+      a;
+
+   for (let i = 0; i + 1 < selectorsAndCompute.length; i++) {
+      a = selectorsAndCompute[i];
+      if (isString(a) || isAccessorChain(a)) inputs.push(Binding.get(a.toString()).value);
+      else if (a.memoize) inputs.push(a.memoize());
+      else if (isFunction(a)) inputs.push(a);
+      else throw new Error(`Invalid selector type '${typeof a}' received.`);
+   }
+
+   function memoize(warmupData: any) {
+      let lastValue: any,
+         lastArgs = warmupData && inputs.map((s) => s(warmupData));
+
+      return function (data: any) {
+         let dirty = false;
+
+         if (!lastArgs) {
+            lastArgs = Array.from({ length: inputs.length });
+            dirty = true;
+         }
+
+         for (let i = 0; i < inputs.length; i++) {
+            let v = inputs[i](data);
+            if (v === lastArgs[i]) continue;
+            lastArgs[i] = v;
+            dirty = true;
+         }
+
+         if (dirty) lastValue = compute.apply(null, lastArgs);
+
+         return lastValue;
+      };
+   }
+
+   let selector: Selector = (data) =>
+      compute.apply(
+         null,
+         inputs.map((s) => s(data)),
+      );
+   selector.memoize = memoize;
+   return selector as MemoSelector;
+}
diff --git a/packages/cx/src/data/createAccessorModelProxy.d.ts b/packages/cx/src/data/createAccessorModelProxy.d.ts
deleted file mode 100644
index 675e6e434..000000000
--- a/packages/cx/src/data/createAccessorModelProxy.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { AccessorChain } from "../core";
-
-export function isAccessorChain(value: any): boolean;
-export function isAccessorChain<V>(value: any): value is AccessorChain<V>;
-
-export function createAccessorModelProxy<M>(basePath: string = ""): AccessorChain<M>;
diff --git a/packages/cx/src/data/createAccessorModelProxy.js b/packages/cx/src/data/createAccessorModelProxy.js
deleted file mode 100644
index fa7e36bb4..000000000
--- a/packages/cx/src/data/createAccessorModelProxy.js
+++ /dev/null
@@ -1,43 +0,0 @@
-const emptyFn = () => {};
-
-export function createAccessorModelProxy(chain = "") {
-   let lastOp = null;
-
-   const proxy = new Proxy(emptyFn, {
-      get: (_, name) => {
-         if (typeof name !== "string") return proxy;
-
-         switch (name) {
-            case "isAccessorChain":
-               return true;
-
-            case "toString":
-            case "valueOf":
-            case "nameOf":
-               lastOp = name;
-               return proxy;
-         }
-
-         let newChain = chain;
-         if (newChain.length > 0) newChain += ".";
-         newChain += name;
-         return createAccessorModelProxy(newChain);
-      },
-
-      apply() {
-         switch (lastOp) {
-            case "nameOf":
-               const lastDotIndex = chain.lastIndexOf(".");
-               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
-
-            default:
-               return chain;
-         }
-      },
-   });
-   return proxy;
-}
-
-export function isAccessorChain(value) {
-   return value != null && !!value.isAccessorChain;
-}
diff --git a/packages/cx/src/data/createAccessorModelProxy.spec.tsx b/packages/cx/src/data/createAccessorModelProxy.spec.tsx
index 181500e4e..528ccbe32 100644
--- a/packages/cx/src/data/createAccessorModelProxy.spec.tsx
+++ b/packages/cx/src/data/createAccessorModelProxy.spec.tsx
@@ -1,4 +1,6 @@
-import { createAccessorModelProxy } from "./createAccessorModelProxy";
+import { createAccessorModelProxy, AccessorChain } from "./createAccessorModelProxy";
+import { Prop, ResolvePropType } from "../ui/Prop";
+import { Widget, WidgetConfig } from "../ui/Widget";
 import assert from "assert";
 
 interface Model {
@@ -8,6 +10,13 @@ interface Model {
       streetNumber: number;
    };
    "@crazy": string;
+   users: User[];
+}
+
+interface User {
+   id: number;
+   name: string;
+   email: string;
 }
 
 describe("createAccessorModelProxy", () => {
@@ -41,4 +50,96 @@ describe("createAccessorModelProxy", () => {
       let model = createAccessorModelProxy<Model>();
       assert.strictEqual(model["@crazy"].nameOf(), "@crazy");
    });
+
+   it("AccessorChain<any> allows access to any property", () => {
+      // When using an untyped model (any), all property access should be allowed
+      let model = createAccessorModelProxy<any>();
+
+      // These should all be valid - no TypeScript errors
+      assert.strictEqual(model.foo.toString(), "foo");
+      assert.strictEqual(model.bar.baz.toString(), "bar.baz");
+      assert.strictEqual(model.deeply.nested.property.toString(), "deeply.nested.property");
+      assert.strictEqual(model.anyName.anyChild.anyGrandchild.toString(), "anyName.anyChild.anyGrandchild");
+   });
+
+   it("ResolvePropType extracts correct types from AccessorChain", () => {
+      let model = createAccessorModelProxy<Model>();
+
+      // ResolvePropType should extract the inner type from AccessorChain
+      type ResolvedString = ResolvePropType<typeof model.firstName>;
+      type ResolvedNumber = ResolvePropType<typeof model.address.streetNumber>;
+      type ResolvedUsers = ResolvePropType<typeof model.users>;
+
+      // These assignments verify the types are correctly inferred
+      // If types are wrong, TypeScript will error
+      const str: ResolvedString = "test";
+      const num: ResolvedNumber = 42;
+      const users: ResolvedUsers = [{ id: 1, name: "John", email: "john@example.com" }];
+
+      // Verify array element type is preserved
+      type UserArray = ResolvePropType<AccessorChain<User[]>>;
+      const userArray: UserArray = [{ id: 1, name: "Test", email: "test@test.com" }];
+
+      // Runtime assertion to make the test meaningful
+      assert.ok(true);
+   });
+
+   it("generic widget infers type from AccessorChain in JSX", () => {
+      let model = createAccessorModelProxy<Model>();
+
+      // Simulates a generic widget config like LookupFieldConfig<TOption>
+      interface GenericWidgetConfig<T = unknown> extends WidgetConfig {
+         items?: AccessorChain<T[]>;
+         onProcess?: (item: T) => void;
+      }
+
+      // Simulates a CxJS widget class
+      class GenericWidget<T = unknown> extends Widget<GenericWidgetConfig<T>> {}
+
+      // T should be inferred as User from model.users (AccessorChain<User[]>)
+      let widget = (
+         <cx>
+            <GenericWidget
+               items={model.users}
+               onProcess={(user) => {
+                  // user should be typed as User
+                  const id: number = user.id;
+                  const name: string = user.name;
+                  const email: string = user.email;
+               }}
+            />
+         </cx>
+      );
+
+      assert.ok(true);
+   });
+
+   it("generic widget infers type from Prop<T[]> in JSX", () => {
+      let model = createAccessorModelProxy<Model>();
+
+      // Uses Prop<T[]> like LookupFieldConfig does
+      interface GenericWidgetConfig<T = unknown> extends WidgetConfig {
+         items?: Prop<T[]>;
+         onProcess?: (item: T) => void;
+      }
+
+      class GenericWidget<T = unknown> extends Widget<GenericWidgetConfig<T>> {}
+
+      // T should be inferred as User from model.users (AccessorChain<User[]>)
+      let widget = (
+         <cx>
+            <GenericWidget
+               items={model.users}
+               onProcess={(user) => {
+                  // user should be typed as User
+                  const id: number = user.id;
+                  const name: string = user.name;
+                  const email: string = user.email;
+               }}
+            />
+         </cx>
+      );
+
+      assert.ok(true);
+   });
 });
diff --git a/packages/cx/src/data/createAccessorModelProxy.ts b/packages/cx/src/data/createAccessorModelProxy.ts
new file mode 100644
index 000000000..11581627f
--- /dev/null
+++ b/packages/cx/src/data/createAccessorModelProxy.ts
@@ -0,0 +1,66 @@
+interface AccessorChainMethods {
+   toString(): string;
+   valueOf(): unknown;
+   nameOf(): string;
+}
+
+type AccessorChainMap<M extends object> = {
+   [prop in Exclude<keyof M, keyof AccessorChainMethods>]: AccessorChain<M[prop]>;
+};
+
+// Check if a type is `any` using the intersection trick
+type IsAny<T> = 0 extends 1 & T ? true : false;
+
+export type AccessorChain<M> = {
+   toString(): string;
+   valueOf(): M | undefined;
+   nameOf(): string;
+} & (IsAny<M> extends true
+   ? { [key: string]: any } // Allow any property access for `any` type
+   : M extends object
+     ? AccessorChainMap<M>
+     : {});
+
+const emptyFn = () => {};
+
+export function createAccessorModelProxy<M>(chain: string = ""): AccessorChain<M> {
+   let lastOp: string | null = null;
+
+   const proxy = new Proxy(emptyFn, {
+      get: (_, name: string | symbol) => {
+         if (typeof name !== "string") return proxy;
+
+         switch (name) {
+            case "isAccessorChain":
+               return true;
+
+            case "toString":
+            case "valueOf":
+            case "nameOf":
+               lastOp = name;
+               return proxy;
+         }
+
+         let newChain = chain;
+         if (newChain.length > 0) newChain += ".";
+         newChain += name;
+         return createAccessorModelProxy(newChain);
+      },
+
+      apply(): string {
+         switch (lastOp) {
+            case "nameOf":
+               const lastDotIndex = chain.lastIndexOf(".");
+               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
+
+            default:
+               return chain;
+         }
+      },
+   });
+   return proxy as unknown as AccessorChain<M>;
+}
+
+export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
+   return value != null && !!(value as any).isAccessorChain;
+}
diff --git a/packages/cx/src/data/createStructuredSelector.d.ts b/packages/cx/src/data/createStructuredSelector.d.ts
deleted file mode 100644
index 9acd6659f..000000000
--- a/packages/cx/src/data/createStructuredSelector.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Record, StructuredSelector, Selector } from '../core';
-
-export function createStructuredSelector(selector: StructuredSelector, constants?: Record): Selector<Record>;
\ No newline at end of file
diff --git a/packages/cx/src/data/createStructuredSelector.js b/packages/cx/src/data/createStructuredSelector.js
deleted file mode 100644
index 877cdee00..000000000
--- a/packages/cx/src/data/createStructuredSelector.js
+++ /dev/null
@@ -1,43 +0,0 @@
-export function createStructuredSelector(selector, constants) {
-   let keys = Object.keys(selector);
-   if (keys.length == 0) return () => constants;
-
-   function memoize() {
-      let lastResult = Object.assign({}, constants);
-
-      let memoizedSelectors = {};
-
-      keys.forEach((key) => {
-         memoizedSelectors[key] = selector[key].memoize ? selector[key].memoize() : selector[key];
-         lastResult[key] = undefined;
-      });
-
-      return function (data) {
-         let result = lastResult,
-            k,
-            v,
-            i;
-         for (i = 0; i < keys.length; i++) {
-            k = keys[i];
-            v = memoizedSelectors[k](data);
-            if (result === lastResult) {
-               if (v === lastResult[k]) continue;
-               result = Object.assign({}, lastResult);
-            }
-            result[k] = v;
-         }
-         return (lastResult = result);
-      };
-   }
-
-   function evaluate(data) {
-      let result = Object.assign({}, constants);
-      for (let i = 0; i < keys.length; i++) {
-         result[keys[i]] = selector[keys[i]](data);
-      }
-      return result;
-   }
-
-   evaluate.memoize = memoize;
-   return evaluate;
-}
diff --git a/packages/cx/src/data/createStructuredSelector.spec.js b/packages/cx/src/data/createStructuredSelector.spec.js
deleted file mode 100644
index 1c59a73cd..000000000
--- a/packages/cx/src/data/createStructuredSelector.spec.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import {createStructuredSelector} from './createStructuredSelector';
-import assert from 'assert';
-import {getSelector} from "./getSelector";
-import {computable} from "./computable";
-
-describe('createStructuredSelector', function() {
-
-   it('works', function () {
-      let structure = {
-         name: getSelector({bind: "name"})
-      };
-      let state = {name: 'Joe'};
-      let selector = createStructuredSelector(structure);
-      assert.deepEqual(selector(state), {name: "Joe"});
-   });
-
-   it('does not memoize by default', function () {
-      let computes = 0;
-      let structure = {
-         name: computable("name", name => {
-            computes++;
-            return name;
-         })
-      };
-      let state = {name: 'Joe'};
-      let selector = createStructuredSelector(structure);
-      assert.deepEqual(selector(state), {name: "Joe"});
-      selector(state);
-      assert.deepEqual(computes, 2);
-   });
-
-   it('supports memoize', function () {
-      let computes = 0;
-      let structure = {
-         name: computable("name", name => {
-            computes++;
-            return name;
-         })
-      };
-      let state = {name: 'Joe'};
-      let selector = createStructuredSelector(structure).memoize();
-      assert.deepEqual(selector(state), {name: "Joe"});
-      selector(state);
-      assert.deepEqual(computes, 1);
-   });
-});
diff --git a/packages/cx/src/data/createStructuredSelector.spec.ts b/packages/cx/src/data/createStructuredSelector.spec.ts
new file mode 100644
index 000000000..f13377e05
--- /dev/null
+++ b/packages/cx/src/data/createStructuredSelector.spec.ts
@@ -0,0 +1,45 @@
+import { createStructuredSelector } from "./createStructuredSelector";
+import assert from "assert";
+import { getSelector } from "./getSelector";
+import { computable } from "./computable";
+
+describe("createStructuredSelector", function () {
+   it("works", function () {
+      let structure = {
+         name: getSelector({ bind: "name" }),
+      };
+      let state = { name: "Joe" };
+      let selector = createStructuredSelector(structure);
+      assert.deepEqual(selector(state), { name: "Joe" });
+   });
+
+   it("does not memoize by default", function () {
+      let computes = 0;
+      let structure = {
+         name: computable("name", (name) => {
+            computes++;
+            return name;
+         }),
+      };
+      let state = { name: "Joe" };
+      let selector = createStructuredSelector(structure);
+      assert.deepEqual(selector(state), { name: "Joe" });
+      selector(state);
+      assert.deepEqual(computes, 2);
+   });
+
+   it("supports memoize", function () {
+      let computes = 0;
+      let structure = {
+         name: computable("name", (name) => {
+            computes++;
+            return name;
+         }),
+      };
+      let state = { name: "Joe" };
+      let selector = createStructuredSelector(structure).memoize();
+      assert.deepEqual(selector(state), { name: "Joe" });
+      selector(state);
+      assert.deepEqual(computes, 1);
+   });
+});
diff --git a/packages/cx/src/data/createStructuredSelector.ts b/packages/cx/src/data/createStructuredSelector.ts
new file mode 100644
index 000000000..e8ae0c558
--- /dev/null
+++ b/packages/cx/src/data/createStructuredSelector.ts
@@ -0,0 +1,62 @@
+import { MemoSelector, Selector } from "./Selector";
+
+export interface StructuredSelectorConfig {
+   [prop: string]: Selector;
+}
+
+// Helper type to infer result type from selector config
+type InferStructuredSelectorResult<T extends StructuredSelectorConfig, C = {}> = {
+   [K in keyof T]: T[K] extends Selector<infer R> ? R : any;
+} & C;
+
+export function createStructuredSelector<S extends StructuredSelectorConfig, C extends Record<string, any> = {}>(
+   selector: S,
+   constants?: C,
+): MemoSelector<InferStructuredSelectorResult<S, C>> {
+   let keys = Object.keys(selector);
+   constants = constants ?? ({} as C);
+   if (keys.length == 0) {
+      let result: Selector = () => constants;
+      result.memoize = () => result;
+      return result as MemoSelector<InferStructuredSelectorResult<S, C>>;
+   }
+
+   function memoize() {
+      let lastResult: Record<string, any> = Object.assign({}, constants);
+
+      let memoizedSelectors: Record<string, Selector> = {};
+
+      keys.forEach((key) => {
+         memoizedSelectors[key] = selector[key].memoize ? selector[key].memoize() : selector[key];
+         lastResult[key] = undefined;
+      });
+
+      return function (data: any) {
+         let result = lastResult,
+            k,
+            v,
+            i;
+         for (i = 0; i < keys.length; i++) {
+            k = keys[i];
+            v = memoizedSelectors[k](data);
+            if (result === lastResult) {
+               if (v === lastResult[k]) continue;
+               result = Object.assign({}, lastResult);
+            }
+            result[k] = v;
+         }
+         return (lastResult = result);
+      };
+   }
+
+   let result: Selector = function evaluate(data: any) {
+      let result: Record<string, any> = Object.assign({}, constants);
+      for (let i = 0; i < keys.length; i++) {
+         result[keys[i]] = selector[keys[i]](data);
+      }
+      return result;
+   };
+
+   result.memoize = memoize;
+   return result as MemoSelector<InferStructuredSelectorResult<S, C>>;
+}
diff --git a/packages/cx/src/data/defaultCompare.d.ts b/packages/cx/src/data/defaultCompare.d.ts
deleted file mode 100644
index 8acd1eb27..000000000
--- a/packages/cx/src/data/defaultCompare.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function defaultCompare(av, bv) : number;
\ No newline at end of file
diff --git a/packages/cx/src/data/defaultCompare.js b/packages/cx/src/data/defaultCompare.js
deleted file mode 100644
index d899fb62d..000000000
--- a/packages/cx/src/data/defaultCompare.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export function defaultCompare(av, bv) {
-   if (av == null) {
-      if (bv == null)
-         return 0;
-      return -1;
-   }
-
-   if (bv == null || av > bv)
-      return 1;
-
-   if (av < bv)
-      return -1;
-
-   return 0;
-}
\ No newline at end of file
diff --git a/packages/cx/src/data/defaultCompare.ts b/packages/cx/src/data/defaultCompare.ts
new file mode 100644
index 000000000..aa56a5659
--- /dev/null
+++ b/packages/cx/src/data/defaultCompare.ts
@@ -0,0 +1,15 @@
+export function defaultCompare(av: any, bv: any): number {
+   if (av == null) {
+      if (bv == null)
+         return 0;
+      return -1;
+   }
+
+   if (bv == null || av > bv)
+      return 1;
+
+   if (av < bv)
+      return -1;
+
+   return 0;
+}
\ No newline at end of file
diff --git a/packages/cx/src/data/diff/diffArrays.d.ts b/packages/cx/src/data/diff/diffArrays.d.ts
deleted file mode 100644
index 5ccdf5c4b..000000000
--- a/packages/cx/src/data/diff/diffArrays.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Record } from '../../core';
-
-interface BeforeAfterPair {
-   before: Record,
-   after: Record
-}
-
-interface ArrayDiff {
-   added: Record[],
-   unchanged: Record[],
-   removed: Record[],
-   changed: BeforeAfterPair[]
-}
-
-export function diffArrays(oldArray: Record[], newArray: Record[], keyFn: (Record) => any) : ArrayDiff;
diff --git a/packages/cx/src/data/diff/diffArrays.js b/packages/cx/src/data/diff/diffArrays.js
deleted file mode 100644
index 3c9c0e7a2..000000000
--- a/packages/cx/src/data/diff/diffArrays.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import {isUndefined} from "../../util/isUndefined";
-
-export function diffArrays(oldArray, newArray, keyFn) {
-   if (!keyFn)
-      keyFn = e => e;
-
-   var map = new Map();
-
-   for (let i = 0; i < oldArray.length; i++)
-      map.set(keyFn(oldArray[i]), oldArray[i]);
-
-   var added = [],
-      changed = [],
-      unchanged = [];
-
-   for (let i = 0; i < newArray.length; i++) {
-      let el = newArray[i];
-      let k = keyFn(el);
-      let old = map.get(k);
-      if (isUndefined(old))
-         added.push(el);
-      else {
-         map.delete(k);
-         if (el == old)
-            unchanged.push(el);
-         else changed.push({
-            before: old,
-            after: el
-         });
-      }
-   }
-
-   var removed = Array.from(map.values());
-
-   return {
-      added,
-      changed,
-      unchanged,
-      removed
-   }
-}
diff --git a/packages/cx/src/data/diff/diffArrays.ts b/packages/cx/src/data/diff/diffArrays.ts
new file mode 100644
index 000000000..9fddee5e0
--- /dev/null
+++ b/packages/cx/src/data/diff/diffArrays.ts
@@ -0,0 +1,49 @@
+import { isUndefined } from "../../util/isUndefined";
+
+type KeyFn<T> = (item: T) => any;
+
+interface DiffResult<T> {
+   added: T[];
+   changed: { before: T; after: T }[];
+   unchanged: T[];
+   removed: T[];
+}
+
+export function diffArrays<T>(oldArray: T[], newArray: T[], keyFn: KeyFn<T> = (e) => e): DiffResult<T> {
+   const map = new Map<any, T>();
+
+   oldArray.forEach((item) => {
+      const key = keyFn(item);
+      map.set(key, item);
+   });
+
+   const added: T[] = [];
+   const changed: { before: T; after: T }[] = [];
+   const unchanged: T[] = [];
+
+   newArray.forEach((item) => {
+      const key = keyFn(item);
+      const oldItem = map.get(key);
+
+      if (isUndefined(oldItem)) {
+         added.push(item);
+      } else {
+         map.delete(key);
+
+         if (item === oldItem) {
+            unchanged.push(item);
+         } else {
+            changed.push({ before: oldItem, after: item });
+         }
+      }
+   });
+
+   const removed = Array.from(map.values());
+
+   return {
+      added,
+      changed,
+      unchanged,
+      removed,
+   };
+}
diff --git a/packages/cx/src/data/diff/diffs.spec.js b/packages/cx/src/data/diff/diffs.spec.js
deleted file mode 100644
index d9d49a3dc..000000000
--- a/packages/cx/src/data/diff/diffs.spec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import assert from 'assert';
-import {diffArrays} from './diffArrays';
-
-
-describe('diffArrays', function() {
-   it('should detect new elements', function () {
-      var a = [];
-      var b = [{k: 1}, {k: 2}]
-      var d = diffArrays(a, b);
-      assert.deepEqual(d, {
-         added: [{k: 1}, {k: 2}],
-         removed: [],
-         unchanged: [],
-         changed: []
-      });
-   });
-
-   it('should detect removed elements', function () {
-      var a = [];
-      var b = [{k: 1}, {k: 2}]
-      var d = diffArrays(b, a);
-      assert.deepEqual(d, {
-         removed: [{k: 1}, {k: 2}],
-         added: [],
-         unchanged: [],
-         changed: []
-      });
-   });
-
-   it('should detect changed elements', function () {
-      var a = [{k: 1, v: 2}];
-      var b = [{k: 1}, {k: 2}]
-      var d = diffArrays(a, b, x=>x.k);
-      assert.deepEqual(d, {
-         added: [{k: 2}],
-         removed: [],
-         unchanged: [],
-         changed: [{
-            after: {
-               k: 1
-            },
-            before: {
-               k: 1, v: 2
-            }
-         }]
-      });
-   });
-});
-
diff --git a/packages/cx/src/data/diff/diffs.spec.ts b/packages/cx/src/data/diff/diffs.spec.ts
new file mode 100644
index 000000000..e9bddaeec
--- /dev/null
+++ b/packages/cx/src/data/diff/diffs.spec.ts
@@ -0,0 +1,49 @@
+import assert from 'assert';
+import {diffArrays} from './diffArrays';
+
+
+describe('diffArrays', function() {
+   it('should detect new elements', function () {
+      var a: {k: number, v?: number}[] = [];
+      var b = [{k: 1}, {k: 2}]
+      var d = diffArrays(a, b);
+      assert.deepEqual(d, {
+         added: [{k: 1}, {k: 2}],
+         removed: [],
+         unchanged: [],
+         changed: []
+      });
+   });
+
+   it('should detect removed elements', function () {
+      var a: {k: number}[] = [];
+      var b = [{k: 1}, {k: 2}]
+      var d = diffArrays(b, a);
+      assert.deepEqual(d, {
+         removed: [{k: 1}, {k: 2}],
+         added: [],
+         unchanged: [],
+         changed: []
+      });
+   });
+
+   it('should detect changed elements', function () {
+      var a = [{k: 1, v: 2}];
+      var b = [{k: 1}, {k: 2}]
+      var d = diffArrays(a, b, x=>x.k);
+      assert.deepEqual(d, {
+         added: [{k: 2}],
+         removed: [],
+         unchanged: [],
+         changed: [{
+            after: {
+               k: 1
+            },
+            before: {
+               k: 1, v: 2
+            }
+         }]
+      });
+   });
+});
+
diff --git a/packages/cx/src/data/diff/index.d.ts b/packages/cx/src/data/diff/index.d.ts
deleted file mode 100644
index 34c357099..000000000
--- a/packages/cx/src/data/diff/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './diffArrays';
diff --git a/packages/cx/src/data/diff/index.js b/packages/cx/src/data/diff/index.js
deleted file mode 100644
index 34c357099..000000000
--- a/packages/cx/src/data/diff/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './diffArrays';
diff --git a/packages/cx/src/data/diff/index.ts b/packages/cx/src/data/diff/index.ts
new file mode 100644
index 000000000..12dbfe94e
--- /dev/null
+++ b/packages/cx/src/data/diff/index.ts
@@ -0,0 +1 @@
+export * from "./diffArrays";
diff --git a/packages/cx/src/data/enableFatArrowExpansion.d.ts b/packages/cx/src/data/enableFatArrowExpansion.d.ts
deleted file mode 100644
index a28a89b4d..000000000
--- a/packages/cx/src/data/enableFatArrowExpansion.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function enableFatArrowExpansion();
diff --git a/packages/cx/src/data/enableFatArrowExpansion.js b/packages/cx/src/data/enableFatArrowExpansion.js
deleted file mode 100644
index 8d0166693..000000000
--- a/packages/cx/src/data/enableFatArrowExpansion.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {expandFatArrows} from '../util/expandFatArrows';
-import {plugFatArrowExpansion} from './Expression';
-
-export function enableFatArrowExpansion() {
-   plugFatArrowExpansion(expandFatArrows);
-}
diff --git a/packages/cx/src/data/enableFatArrowExpansion.ts b/packages/cx/src/data/enableFatArrowExpansion.ts
new file mode 100644
index 000000000..9926017fe
--- /dev/null
+++ b/packages/cx/src/data/enableFatArrowExpansion.ts
@@ -0,0 +1,6 @@
+import { expandFatArrows } from '../util/expandFatArrows';
+import { plugFatArrowExpansion } from './Expression';
+
+export function enableFatArrowExpansion(): void {
+   plugFatArrowExpansion(expandFatArrows);
+}
diff --git a/packages/cx/src/data/getAccessor.d.ts b/packages/cx/src/data/getAccessor.d.ts
deleted file mode 100644
index 7f959e40b..000000000
--- a/packages/cx/src/data/getAccessor.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {View} from "./View";
-
-export interface Accessor {
-   get: (data: any) => any;
-   set?: (value: any, store: View) => boolean;
-   bindInstance?(instance: any): Accessor;
-}
-
-export function getAccessor(accessor) : Accessor;
\ No newline at end of file
diff --git a/packages/cx/src/data/getAccessor.js b/packages/cx/src/data/getAccessor.js
deleted file mode 100644
index 25f8d4312..000000000
--- a/packages/cx/src/data/getAccessor.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Binding, isBinding } from "./Binding";
-import { isSelector } from "./isSelector";
-import { getSelector } from "./getSelector";
-import { isObject } from "../util/isObject";
-import { isAccessorChain } from "./createAccessorModelProxy";
-
-/*
-   Accessor provides a common ground between refs and bindings.
-   Refs offer simplicity, bindings have better performance with more arguments.
-   Accessor works as a common interface which works with both patterns.
- */
-
-export function getAccessor(accessor, options) {
-   if (accessor == null) return null;
-
-   if (isObject(accessor)) {
-      if (accessor.isAccessor || accessor.isRef) return accessor;
-      if (isBinding(accessor)) {
-         let binding = Binding.get(accessor);
-         return {
-            get: binding.value,
-            set: (v, store) => store.set(binding.path, v),
-            isAccessor: true,
-         };
-      }
-   }
-
-   if (isAccessorChain(accessor)) {
-      let binding = Binding.get(accessor);
-      return {
-         get: binding.value,
-         set: (v, store) => store.set(binding.path, v),
-         isAccessor: true,
-      };
-   }
-
-   if (isSelector(accessor)) {
-      let selector = getSelector(accessor);
-      if (accessor && accessor.set)
-         return {
-            get: selector,
-            isAccessor: true,
-            bindInstance(instance) {
-               return {
-                  get: selector,
-                  set: (value) => accessor.set(value, instance),
-                  isAccessor: true,
-               };
-            },
-         };
-
-      return {
-         get: selector,
-         isAccessor: true,
-      };
-   }
-
-   return {
-      get: () => accessor,
-   };
-}
diff --git a/packages/cx/src/data/getAccessor.spec.js b/packages/cx/src/data/getAccessor.spec.js
deleted file mode 100644
index 0aed40921..000000000
--- a/packages/cx/src/data/getAccessor.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import assert from "assert";
-import { createAccessorModelProxy } from "./createAccessorModelProxy";
-import { getAccessor } from "./getAccessor";
-
-describe("getAccessor", function () {
-   it("works with accessor chains", function () {
-      let m = createAccessorModelProxy();
-      let accessor = getAccessor(m.a.b);
-      assert(typeof accessor.set == "function");
-   });
-});
diff --git a/packages/cx/src/data/getAccessor.spec.ts b/packages/cx/src/data/getAccessor.spec.ts
new file mode 100644
index 000000000..ed3faf224
--- /dev/null
+++ b/packages/cx/src/data/getAccessor.spec.ts
@@ -0,0 +1,11 @@
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+import { getAccessor } from "./getAccessor";
+
+describe("getAccessor", function () {
+   it("works with accessor chains", function () {
+      let m = createAccessorModelProxy<{ a: { b: any } }>();
+      let accessor = getAccessor(m.a.b);
+      assert(typeof accessor.set == "function");
+   });
+});
diff --git a/packages/cx/src/data/getAccessor.ts b/packages/cx/src/data/getAccessor.ts
new file mode 100644
index 000000000..24fa2fa81
--- /dev/null
+++ b/packages/cx/src/data/getAccessor.ts
@@ -0,0 +1,74 @@
+import { Binding, isBinding } from "./Binding";
+import { isSelector } from "./isSelector";
+import { getSelector } from "./getSelector";
+import { isObject } from "../util/isObject";
+import { AccessorChain, isAccessorChain } from "./createAccessorModelProxy";
+import { Prop } from "../ui/Prop";
+import { View } from "./View";
+
+/*
+   Accessor provides a common ground between refs and bindings.
+   Refs offer simplicity, bindings have better performance with more arguments.
+   Accessor works as a common interface which works with both patterns.
+ */
+
+export interface Accessor<T = any> {
+   get: (data: any) => T;
+   set?: (value: T, store: View) => boolean;
+   bindInstance?(instance: any): Accessor;
+   isAccessor?: boolean;
+   isRef?: boolean;
+}
+
+export function getAccessor<T = any>(accessor: Prop<T>): Accessor;
+export function getAccessor(accessor: Accessor): Accessor;
+
+export function getAccessor(accessor: any): Accessor | undefined {
+   if (accessor == null) return undefined;
+
+   if (isObject(accessor)) {
+      if ("isAccessor" in accessor || "isRef" in accessor) return accessor as Accessor;
+      if (isBinding(accessor)) {
+         let binding = Binding.get(accessor);
+         return {
+            get: binding.value,
+            set: (v, store) => store.set(binding.path, v),
+            isAccessor: true,
+         };
+      }
+   }
+
+   if (isAccessorChain(accessor)) {
+      let binding = Binding.get(accessor);
+      return {
+         get: binding.value,
+         set: (v, store) => store.set(binding.path, v),
+         isAccessor: true,
+      };
+   }
+
+   if (isSelector(accessor)) {
+      let selector = getSelector(accessor);
+      if (accessor && accessor.set)
+         return {
+            get: selector,
+            isAccessor: true,
+            bindInstance(instance) {
+               return {
+                  get: selector,
+                  set: (value) => accessor.set(value, instance),
+                  isAccessor: true,
+               };
+            },
+         };
+
+      return {
+         get: selector,
+         isAccessor: true,
+      };
+   }
+
+   return {
+      get: () => accessor,
+   };
+}
diff --git a/packages/cx/src/data/getSelector.d.ts b/packages/cx/src/data/getSelector.d.ts
deleted file mode 100644
index ce0874d6d..000000000
--- a/packages/cx/src/data/getSelector.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Selector } from '../core';
-
-export function getSelector(config: any) : Selector<any>;
diff --git a/packages/cx/src/data/getSelector.js b/packages/cx/src/data/getSelector.js
deleted file mode 100644
index 77a4e5764..000000000
--- a/packages/cx/src/data/getSelector.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Binding } from "./Binding";
-import { Expression } from "./Expression";
-import { StringTemplate } from "./StringTemplate";
-import { isArray } from "../util/isArray";
-import { createStructuredSelector } from "./createStructuredSelector";
-import { isSelector } from "./isSelector";
-import { isAccessorChain } from "./createAccessorModelProxy";
-import { isString } from "../util/isString";
-
-var undefinedF = () => undefined;
-var nullF = () => null;
-
-export function getSelector(config) {
-   if (config === undefined) return undefinedF;
-   if (config === null) return nullF;
-
-   switch (typeof config) {
-      case "object":
-         if (isArray(config)) {
-            let selectors = config.map((x) => getSelector(x));
-            return (data) => selectors.map((elementSelector) => elementSelector(data));
-         }
-
-         //toString converts accessor chains to binding paths
-         if (config.bind) return Binding.get(config.bind.toString()).value;
-
-         if (isString(config.tpl)) return StringTemplate.get(config.tpl);
-
-         if (config.expr) return Expression.get(config.expr);
-
-         if (config.get) return config.get;
-
-         let selectors = {};
-         let constants = {};
-
-         for (let key in config) {
-            if (isSelector(config[key])) selectors[key] = getSelector(config[key]);
-            else constants[key] = config[key];
-         }
-         return createStructuredSelector(selectors, constants);
-
-      case "function":
-         if (isAccessorChain(config)) return Binding.get(config.toString()).value;
-         return config;
-
-      default:
-         return () => config;
-   }
-}
diff --git a/packages/cx/src/data/getSelector.spec.js b/packages/cx/src/data/getSelector.spec.js
deleted file mode 100644
index 42401c1c5..000000000
--- a/packages/cx/src/data/getSelector.spec.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { getSelector } from "./getSelector";
-import assert from "assert";
-import { createAccessorModelProxy } from "./createAccessorModelProxy";
-
-describe("getSelector", function () {
-   it("array of selectors converts each element into a selector", function () {
-      let arraySelector = [{ bind: "name" }, { expr: "{name}" }];
-      let state = { name: "Joe" };
-      let selector = getSelector(arraySelector);
-      assert.deepEqual(selector(state), ["Joe", "Joe"]);
-   });
-
-   it("get can be used for selectors that have set defined too ", function () {
-      let selector = getSelector({ get: (data) => data.name, set: () => {} });
-      assert.deepEqual(selector({ name: "Jack" }), "Jack");
-   });
-
-   it("0 is a valid selector", function () {
-      let selector = getSelector(0);
-      assert.deepEqual(selector({}), 0);
-   });
-
-   it("false is a valid selector", function () {
-      let selector = getSelector(false);
-      assert.deepEqual(selector({}), false);
-   });
-
-   it("undefined is a valid selector", function () {
-      let selector = getSelector(undefined);
-      assert(selector({}) === undefined);
-   });
-
-   it("null is a valid selector", function () {
-      let selector = getSelector(null);
-      assert(selector({}) === null);
-   });
-
-   it("works with accessor chains", function () {
-      let m = createAccessorModelProxy();
-      let selector = getSelector(m.a.b);
-      assert(selector({ a: { b: 1 } }) === 1);
-   });
-});
diff --git a/packages/cx/src/data/getSelector.spec.ts b/packages/cx/src/data/getSelector.spec.ts
new file mode 100644
index 000000000..6f04cf98c
--- /dev/null
+++ b/packages/cx/src/data/getSelector.spec.ts
@@ -0,0 +1,43 @@
+import { getSelector } from "./getSelector";
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+
+describe("getSelector", function () {
+   it("array of selectors converts each element into a selector", function () {
+      let arraySelector = [{ bind: "name" }, { expr: "{name}" }];
+      let state = { name: "Joe" };
+      let selector = getSelector(arraySelector);
+      assert.deepEqual(selector(state), ["Joe", "Joe"]);
+   });
+
+   it("get can be used for selectors that have set defined too ", function () {
+      let selector = getSelector({ get: (data: any) => data.name, set: () => {} });
+      assert.deepEqual(selector({ name: "Jack" }), "Jack");
+   });
+
+   it("0 is a valid selector", function () {
+      let selector = getSelector(0);
+      assert.deepEqual(selector({}), 0);
+   });
+
+   it("false is a valid selector", function () {
+      let selector = getSelector(false);
+      assert.deepEqual(selector({}), false);
+   });
+
+   it("undefined is a valid selector", function () {
+      let selector = getSelector(undefined);
+      assert(selector({}) === undefined);
+   });
+
+   it("null is a valid selector", function () {
+      let selector = getSelector(null);
+      assert(selector({}) === null);
+   });
+
+   it("works with accessor chains", function () {
+      let m = createAccessorModelProxy<{ a: { b: any } }>();
+      let selector = getSelector(m.a.b);
+      assert(selector({ a: { b: 1 } }) === 1);
+   });
+});
diff --git a/packages/cx/src/data/getSelector.ts b/packages/cx/src/data/getSelector.ts
new file mode 100644
index 000000000..cef38b35c
--- /dev/null
+++ b/packages/cx/src/data/getSelector.ts
@@ -0,0 +1,66 @@
+import { expr } from "cx/ui";
+import { Binding } from "./Binding";
+import { Expression } from "./Expression";
+import { StringTemplate } from "./StringTemplate";
+import { isArray } from "../util/isArray";
+import { createStructuredSelector, StructuredSelectorConfig } from "./createStructuredSelector";
+import { isSelector } from "./isSelector";
+import { isAccessorChain } from "./createAccessorModelProxy";
+import { isString } from "../util/isString";
+import { hasKey, hasStringAtKey, hasFunctionAtKey } from "../util/hasKey";
+import { isFunction } from "../util";
+
+type Selector<T> = (data: any) => T;
+
+var undefinedF = () => undefined;
+var nullF = () => null;
+
+export function getSelector(config: unknown): Selector<any> {
+   if (config === undefined) return undefinedF;
+   if (config === null) return nullF;
+
+   switch (typeof config) {
+      case "object":
+         if (isArray(config)) {
+            let selectors = config.map((x) => getSelector(x));
+            return (data) => selectors.map((elementSelector) => elementSelector(data));
+         }
+
+         //toString converts accessor chains to binding paths
+         if (hasKey(config, "bind") && config.bind != null) return Binding.get(config.bind.toString()).value;
+
+         if (hasStringAtKey(config, "tpl")) return StringTemplate.get(config.tpl);
+
+         if (hasKey(config, "expr") && (isString(config.expr) || isFunction(config.expr)))
+            return Expression.get(config.expr as any);
+
+         if (hasFunctionAtKey(config, "get")) return config.get;
+
+         let selectors: StructuredSelectorConfig = {};
+         let constants: Record<string, any> = {};
+
+         let obj = config as Record<string, any>;
+         for (let key in obj) {
+            switch (typeof obj[key]) {
+               case "bigint":
+               case "boolean":
+               case "number":
+               case "string":
+                  constants[key] = obj[key];
+                  break;
+               default:
+                  if (isSelector(obj[key])) selectors[key] = getSelector(obj[key]);
+                  else constants[key] = obj[key];
+                  break;
+            }
+         }
+         return createStructuredSelector(selectors, constants);
+
+      case "function":
+         if (isAccessorChain(config)) return Binding.get(config.toString()).value;
+         return config as Selector<any>;
+
+      default:
+         return () => config;
+   }
+}
diff --git a/packages/cx/src/data/index.d.ts b/packages/cx/src/data/index.d.ts
deleted file mode 100644
index 42bfcf848..000000000
--- a/packages/cx/src/data/index.d.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export * from "./Binding";
-export * from "./Expression";
-export * from "./StringTemplate";
-export * from "./View";
-export * from "./SubscribableView";
-export * from "./Store";
-export * from "./ExposedRecordView";
-export * from "./ExposedValueView";
-export * from "./ReadOnlyDataView";
-export * from "./ZoomIntoPropertyView";
-export * from "./StructuredSelector";
-export * from "./computable";
-export * from "./getSelector";
-export * from "./isSelector";
-export * from "./Grouper";
-export * from "./comparer";
-export * from "./enableFatArrowExpansion";
-export * from "./ops/index";
-export * from "./diff/index";
-export * from "./Ref";
-export * from "./ArrayRef";
-export * from "./StoreProxy";
-export * from "./AugmentedViewBase";
-export * from "./ArrayElementView";
-export * from "./getAccessor";
-export * from "./defaultCompare";
-export * from "./NestedDataView";
-export * from "./StructuredDataAccessor";
-
-export * from "./createAccessorModelProxy";
diff --git a/packages/cx/src/data/index.js b/packages/cx/src/data/index.js
deleted file mode 100644
index ae6f5e056..000000000
--- a/packages/cx/src/data/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export * from './Binding';
-export * from './Expression';
-export * from './StringTemplate';
-export * from './View';
-export * from './SubscribableView';
-export * from './Store';
-export * from './ExposedRecordView';
-export * from './ExposedValueView';
-export * from './ReadOnlyDataView';
-export * from './ZoomIntoPropertyView';
-export * from './StructuredSelector';
-export * from './computable';
-export * from './getSelector';
-export * from './isSelector';
-export * from './Grouper';
-export * from './comparer';
-export * from './enableFatArrowExpansion';
-export * from './ops/index';
-export * from './diff/index';
-export * from './Ref';
-export * from './ArrayRef';
-export * from './StoreProxy';
-export * from "./AugmentedViewBase";
-export * from "./ArrayElementView";
-export * from "./getAccessor";
-export * from "./defaultCompare";
-export * from "./NestedDataView";
-
-export * from "./createAccessorModelProxy";
\ No newline at end of file
diff --git a/packages/cx/src/data/index.ts b/packages/cx/src/data/index.ts
new file mode 100644
index 000000000..7c08fe1d8
--- /dev/null
+++ b/packages/cx/src/data/index.ts
@@ -0,0 +1,30 @@
+export * from "./Binding";
+export * from "./Expression";
+export * from "./StringTemplate";
+export * from "./View";
+export * from "./SubscribableView";
+export * from "./Store";
+export * from "./ExposedRecordView";
+export * from "./ExposedValueView";
+export * from "./ReadOnlyDataView";
+export * from "./ZoomIntoPropertyView";
+export * from "./StructuredSelector";
+export * from "./computable";
+export * from "./getSelector";
+export * from "./isSelector";
+export * from "./Grouper";
+export * from "./comparer";
+export * from "./enableFatArrowExpansion";
+export * from "./ops/index";
+export * from "./diff/index";
+export * from "./Ref";
+export * from "./ArrayRef";
+export * from "./StoreProxy";
+export * from "./AugmentedViewBase";
+export * from "./ArrayElementView";
+export * from "./getAccessor";
+export * from "./defaultCompare";
+export * from "./NestedDataView";
+
+export * from "./createAccessorModelProxy";
+export * from "./Selector";
diff --git a/packages/cx/src/data/isSelector.d.ts b/packages/cx/src/data/isSelector.d.ts
deleted file mode 100644
index d5ec0e316..000000000
--- a/packages/cx/src/data/isSelector.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isSelector(config: any) : boolean;
diff --git a/packages/cx/src/data/isSelector.js b/packages/cx/src/data/isSelector.js
deleted file mode 100644
index 60fbcc800..000000000
--- a/packages/cx/src/data/isSelector.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export function isSelector(config) {
-
-   if (config == null)
-      return true;
-
-   switch (typeof config) {
-      case 'object':
-         if (config.type || config.$type)
-            return false;
-         return !!(config.bind || config.tpl || config.expr || config.get);
-
-      case 'function':
-         return true;
-
-      case 'string':
-         return true;
-
-      case 'number':
-         return true;
-
-      case 'boolean':
-         return true;
-   }
-
-   return false;
-}
diff --git a/packages/cx/src/data/isSelector.ts b/packages/cx/src/data/isSelector.ts
new file mode 100644
index 000000000..fbd140f82
--- /dev/null
+++ b/packages/cx/src/data/isSelector.ts
@@ -0,0 +1,26 @@
+export function isSelector(config: any): boolean {
+
+   if (config == null)
+      return true;
+
+   switch (typeof config) {
+      case 'object':
+         if (config.type || config.$type)
+            return false;
+         return !!(config.bind || config.tpl || config.expr || config.get);
+
+      case 'function':
+         return true;
+
+      case 'string':
+         return true;
+
+      case 'number':
+         return true;
+
+      case 'boolean':
+         return true;
+   }
+
+   return false;
+}
diff --git a/packages/cx/src/data/ops/append.d.ts b/packages/cx/src/data/ops/append.d.ts
deleted file mode 100644
index a3cbd6e4f..000000000
--- a/packages/cx/src/data/ops/append.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function append<T = any>(array: T[], ...items: T[]): T[];
diff --git a/packages/cx/src/data/ops/append.js b/packages/cx/src/data/ops/append.js
deleted file mode 100644
index c8a52851a..000000000
--- a/packages/cx/src/data/ops/append.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export function append(array, ...items) {
-   if (items.length == 0)
-      return array;
-   if (!array)
-      return items;
-   return [...array, ...items];
-}
diff --git a/packages/cx/src/data/ops/append.spec.js b/packages/cx/src/data/ops/append.spec.js
deleted file mode 100644
index 8867eccae..000000000
--- a/packages/cx/src/data/ops/append.spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Store} from '../Store';
-import {append} from './append';
-import assert from 'assert';
-
-describe('append', function() {
-   it('should add elements to an array', function () {
-      let store = new Store({
-         data: {
-            array: []
-         }
-      });
-
-      assert(store.update('array', append, 1));
-      assert.deepEqual(store.get('array'), [1]);
-   });
-
-   it('should work with undefined arrays', function () {
-      let store = new Store();
-      assert(store.update('array', append, 1));
-      assert.deepEqual(store.get('array'), [1]);
-   });
-
-   it('accepts multiple arguments', function () {
-      let store = new Store();
-      assert(store.update('array', append, 1, 2, 3));
-      assert.deepEqual(store.get('array'), [1, 2, 3]);
-   });
-});
diff --git a/packages/cx/src/data/ops/append.spec.ts b/packages/cx/src/data/ops/append.spec.ts
new file mode 100644
index 000000000..40df1b418
--- /dev/null
+++ b/packages/cx/src/data/ops/append.spec.ts
@@ -0,0 +1,28 @@
+import assert from 'assert';
+import { Store } from '../Store';
+import { append } from './append';
+
+describe('append', function() {
+   it('should add elements to an array', function () {
+      let store = new Store({
+         data: {
+            array: []
+         }
+      });
+
+      assert(store.update('array', append, 1));
+      assert.deepEqual(store.get('array'), [1]);
+   });
+
+   it('should work with undefined arrays', function () {
+      let store = new Store();
+      assert(store.update('array', append, 1));
+      assert.deepEqual(store.get('array'), [1]);
+   });
+
+   it('accepts multiple arguments', function () {
+      let store = new Store();
+      assert(store.update('array', append, 1, 2, 3));
+      assert.deepEqual(store.get('array'), [1, 2, 3]);
+   });
+});
diff --git a/packages/cx/src/data/ops/append.ts b/packages/cx/src/data/ops/append.ts
new file mode 100644
index 000000000..15971f1aa
--- /dev/null
+++ b/packages/cx/src/data/ops/append.ts
@@ -0,0 +1,5 @@
+export function append<T>(array: T[], ...items: T[]): T[] {
+   if (items.length === 0) return array ?? [];
+   if (!array) return items;
+   return [...array, ...items];
+}
diff --git a/packages/cx/src/data/ops/filter.d.ts b/packages/cx/src/data/ops/filter.d.ts
deleted file mode 100644
index 26bb4ffb9..000000000
--- a/packages/cx/src/data/ops/filter.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function filter<T = any>(array: T[], callback: (item: T, index: number, array: T[]) => boolean): T[];
diff --git a/packages/cx/src/data/ops/filter.js b/packages/cx/src/data/ops/filter.js
deleted file mode 100644
index d4d82c58d..000000000
--- a/packages/cx/src/data/ops/filter.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export function filter(array, callback) {
-   if (array == null)
-      return array;
-   let result = array.filter(callback);
-   if (result.length == array.length)
-      return array;
-   return result;
-}
diff --git a/packages/cx/src/data/ops/filter.spec.js b/packages/cx/src/data/ops/filter.spec.js
deleted file mode 100644
index 22cc79098..000000000
--- a/packages/cx/src/data/ops/filter.spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import {Store} from '../Store';
-import {filter} from './filter';
-import assert from 'assert';
-
-describe('filter', function() {
-   it('should filter array elements', function () {
-      let store = new Store({
-         data: {
-            array: [1, 2, 3]
-         }
-      });
-
-      assert(store.update('array', filter, x => x > 1));
-      assert.deepEqual(store.get('array'), [2, 3]);
-   });
-
-   it('should work with undefined arrays', function () {
-      let store = new Store();
-      assert.equal(false, store.update('array', filter, x => x > 1));
-      assert.deepEqual(store.get('array'), undefined);
-   });
-
-   it('returns same array if all elements satisfy condition', function () {
-      let array = [1, 2, 3];
-      let store = new Store({ data: { array }});
-      assert.equal(false, store.update('array', filter, x => x > 0));
-      assert(store.get('array') === array);
-   });
-});
diff --git a/packages/cx/src/data/ops/filter.spec.ts b/packages/cx/src/data/ops/filter.spec.ts
new file mode 100644
index 000000000..f5429a514
--- /dev/null
+++ b/packages/cx/src/data/ops/filter.spec.ts
@@ -0,0 +1,35 @@
+import assert from "assert";
+import { Store } from "../Store";
+import { filter } from "./filter";
+
+describe("filter", function () {
+   it("should filter array elements", function () {
+      let store = new Store({
+         data: {
+            array: [1, 2, 3],
+         },
+      });
+
+      assert(store.update("array", filter, (x: number) => x > 1));
+      assert.deepEqual(store.get("array"), [2, 3]);
+   });
+
+   it("should work with undefined arrays", function () {
+      let store = new Store();
+      assert.equal(
+         false,
+         store.update("array", filter, (x) => x > 1),
+      );
+      assert.deepEqual(store.get("array"), undefined);
+   });
+
+   it("returns same array if all elements satisfy condition", function () {
+      let array = [1, 2, 3];
+      let store = new Store({ data: { array } });
+      assert.equal(
+         false,
+         store.update("array", filter, (x) => x > 0),
+      );
+      assert(store.get("array") === array);
+   });
+});
diff --git a/packages/cx/src/data/ops/filter.ts b/packages/cx/src/data/ops/filter.ts
new file mode 100644
index 000000000..d826852be
--- /dev/null
+++ b/packages/cx/src/data/ops/filter.ts
@@ -0,0 +1,9 @@
+export function filter<T = any>(array: T[], callback: (item: T, index: number, array: T[]) => boolean): T[] {
+   if (array == null) return array;
+
+   const result = array.filter(callback);
+
+   if (result.length === array.length) return array;
+
+   return result;
+}
diff --git a/packages/cx/src/data/ops/findTreeNode.d.ts b/packages/cx/src/data/ops/findTreeNode.d.ts
deleted file mode 100644
index b37712414..000000000
--- a/packages/cx/src/data/ops/findTreeNode.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function findTreeNode<T = any>(array: T[], criteria: (item?: T) => boolean, childrenField?: string): T | false;
diff --git a/packages/cx/src/data/ops/findTreeNode.js b/packages/cx/src/data/ops/findTreeNode.js
deleted file mode 100644
index cbb06a105..000000000
--- a/packages/cx/src/data/ops/findTreeNode.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export function findTreeNode(array, criteria, childrenField = '$children') {
-   if (!Array.isArray(array))
-      return false;
-
-   for (let i = 0; i < array.length; i++) {
-      if (criteria(array[i]))
-         return array[i];
-
-      let child = findTreeNode(array[i][childrenField], criteria, childrenField);
-      if (child)
-         return child;
-   }
-
-   return false;
-}
diff --git a/packages/cx/src/data/ops/findTreeNode.spec.js b/packages/cx/src/data/ops/findTreeNode.spec.js
deleted file mode 100644
index 08cc8f448..000000000
--- a/packages/cx/src/data/ops/findTreeNode.spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Store} from '../Store';
-import {findTreeNode} from './findTreeNode';
-import assert from 'assert';
-
-describe('removeTreeNodes', function() {
-   it('removes all nodes that satisfy criteria', function () {
-      let array = [{
-         id: 'n1',
-         value: 1,
-         children: [{
-            id: 'n11',
-            value: 2
-         }, {
-            id: 'n12',
-            value: 3
-         }]
-      }];
-
-      let node = findTreeNode(array, x => x.value == 3, 'children');
-
-      assert(node);
-      assert.equal(node.value, 3)
-   });
-});
diff --git a/packages/cx/src/data/ops/findTreeNode.spec.ts b/packages/cx/src/data/ops/findTreeNode.spec.ts
new file mode 100644
index 000000000..58d70aea6
--- /dev/null
+++ b/packages/cx/src/data/ops/findTreeNode.spec.ts
@@ -0,0 +1,23 @@
+import assert from 'assert';
+import { findTreeNode } from './findTreeNode';
+
+describe('removeTreeNodes', function() {
+   it('removes all nodes that satisfy criteria', function () {
+      let array = [{
+         id: 'n1',
+         value: 1,
+         children: [{
+            id: 'n11',
+            value: 2
+         }, {
+            id: 'n12',
+            value: 3
+         }]
+      }];
+
+      let node = findTreeNode(array, x => x.value == 3, 'children');
+
+      assert(node);
+      assert.equal(node.value, 3)
+   });
+});
diff --git a/packages/cx/src/data/ops/findTreeNode.ts b/packages/cx/src/data/ops/findTreeNode.ts
new file mode 100644
index 000000000..57efc28c7
--- /dev/null
+++ b/packages/cx/src/data/ops/findTreeNode.ts
@@ -0,0 +1,14 @@
+export function findTreeNode<T = any>(array: T[], criteria: (node: T) => boolean, childrenField: keyof T): T | false {
+   if (!Array.isArray(array)) return false;
+
+   for (const node of array) {
+      if (criteria(node)) return node;
+
+      const children = node[childrenField] as T[];
+
+      const found = findTreeNode(children, criteria, childrenField);
+      if (found) return found;
+   }
+
+   return false;
+}
diff --git a/packages/cx/src/data/ops/findTreePath.d.ts b/packages/cx/src/data/ops/findTreePath.d.ts
deleted file mode 100644
index 4eab1b198..000000000
--- a/packages/cx/src/data/ops/findTreePath.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export function findTreePath<T>(
-   array: T[],
-   criteria: (item: T) => boolean,
-   childrenField = "$children",
-   currentPath: T[] = []
-): T[] | false;
diff --git a/packages/cx/src/data/ops/findTreePath.js b/packages/cx/src/data/ops/findTreePath.js
deleted file mode 100644
index c0f5da72e..000000000
--- a/packages/cx/src/data/ops/findTreePath.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export function findTreePath(array, criteria, childrenField = "$children", currentPath = []) {
-   if (!Array.isArray(array)) return false;
-
-   for (let i = 0; i < array.length; i++) {
-      currentPath.push(array[i]);
-
-      if (criteria(array[i])) return currentPath;
-
-      let childPath = findTreePath(array[i][childrenField], criteria, childrenField, currentPath);
-      if (childPath) return childPath;
-
-      currentPath.pop();
-   }
-
-   return false;
-}
diff --git a/packages/cx/src/data/ops/findTreePath.ts b/packages/cx/src/data/ops/findTreePath.ts
new file mode 100644
index 000000000..8bfb8239a
--- /dev/null
+++ b/packages/cx/src/data/ops/findTreePath.ts
@@ -0,0 +1,23 @@
+export function findTreePath<T = any>(
+   array: T[] | undefined,
+   criteria: (node: T) => boolean,
+   childrenField: keyof T = "$children" as keyof T,
+   currentPath: T[] = [],
+): T[] | false {
+   if (!Array.isArray(array)) return false;
+
+   for (const node of array) {
+      currentPath.push(node);
+
+      if (criteria(node)) return [...currentPath];
+
+      const children = node[childrenField] as T[] | undefined;
+
+      const childPath = findTreePath(children, criteria, childrenField, currentPath);
+      if (childPath) return childPath;
+
+      currentPath.pop();
+   }
+
+   return false;
+}
diff --git a/packages/cx/src/data/ops/index.d.ts b/packages/cx/src/data/ops/index.d.ts
deleted file mode 100644
index bc37e944e..000000000
--- a/packages/cx/src/data/ops/index.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from "./append";
-export * from "./merge";
-export * from "./filter";
-export * from "./updateArray";
-export * from "./updateTree";
-export * from "./removeTreeNodes";
-export * from "./findTreeNode";
-export * from "./moveElement";
-export * from "./insertElement";
-export * from "./findTreePath";
diff --git a/packages/cx/src/data/ops/index.js b/packages/cx/src/data/ops/index.ts
similarity index 100%
rename from packages/cx/src/data/ops/index.js
rename to packages/cx/src/data/ops/index.ts
diff --git a/packages/cx/src/data/ops/insertElement.d.ts b/packages/cx/src/data/ops/insertElement.d.ts
deleted file mode 100644
index b257d1e5c..000000000
--- a/packages/cx/src/data/ops/insertElement.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function insertElement<T = any>(array: T[], index: number, ...args: T[]): T[];
diff --git a/packages/cx/src/data/ops/insertElement.js b/packages/cx/src/data/ops/insertElement.js
deleted file mode 100644
index 2b18a4ea6..000000000
--- a/packages/cx/src/data/ops/insertElement.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function insertElement(array, index, ...args) {
-   return [...array.slice(0, index), ...args, ...array.slice(index)];
-}
\ No newline at end of file
diff --git a/packages/cx/src/data/ops/insertElement.ts b/packages/cx/src/data/ops/insertElement.ts
new file mode 100644
index 000000000..a87a5a908
--- /dev/null
+++ b/packages/cx/src/data/ops/insertElement.ts
@@ -0,0 +1,3 @@
+export function insertElement<T>(array: T[], index: number, ...elements: T[]): T[] {
+   return [...array.slice(0, index), ...elements, ...array.slice(index)];
+}
diff --git a/packages/cx/src/data/ops/merge.d.ts b/packages/cx/src/data/ops/merge.d.ts
deleted file mode 100644
index ef29f5c4c..000000000
--- a/packages/cx/src/data/ops/merge.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Record } from '../../core';
-
-export function merge(item: Record, data: Record) : Record;
diff --git a/packages/cx/src/data/ops/merge.js b/packages/cx/src/data/ops/merge.js
deleted file mode 100644
index a1e506dcd..000000000
--- a/packages/cx/src/data/ops/merge.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Binding} from '../Binding';
-
-export function merge(item, data) {
-   let result = item;
-   if (data)
-      for (let key in data)
-         result = Binding.get(key).set(result, data[key]);
-   return result;
-}
diff --git a/packages/cx/src/data/ops/merge.spec.js b/packages/cx/src/data/ops/merge.spec.js
deleted file mode 100644
index 806471ae3..000000000
--- a/packages/cx/src/data/ops/merge.spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import {Store} from '../Store';
-import {merge} from './merge';
-import assert from 'assert';
-
-describe('merge', function() {
-   it('performs multiple set operations', function () {
-      let store = new Store({
-         data: {
-            person: { firstName: 'John', lastName: 'Doe'}
-         }
-      });
-
-      assert(store.update('person', merge, { firstName: 'Johny', age: 18 }));
-      assert.deepEqual(store.get('person'), { firstName: 'Johny', lastName: 'Doe', age: 18 });
-   });
-
-   it('does not modify data if not necessary', function () {
-      let store = new Store({
-         data: {
-            person: { firstName: 'John', lastName: 'Doe'}
-         }
-      });
-
-      assert(store.update('person', merge, { firstName: 'John' }) == false);
-      assert.deepEqual(store.get('person'), { firstName: 'John', lastName: 'Doe' });
-   });
-});
diff --git a/packages/cx/src/data/ops/merge.spec.ts b/packages/cx/src/data/ops/merge.spec.ts
new file mode 100644
index 000000000..7c259ef10
--- /dev/null
+++ b/packages/cx/src/data/ops/merge.spec.ts
@@ -0,0 +1,27 @@
+import { Store } from "../Store";
+import { merge } from "./merge";
+import assert from "assert";
+
+describe("merge", function () {
+   it("performs multiple set operations", function () {
+      let store = new Store({
+         data: {
+            person: { firstName: "John", lastName: "Doe" },
+         },
+      });
+
+      assert(store.update("person", merge, { firstName: "Johny", age: 18 }));
+      assert.deepEqual(store.get("person"), { firstName: "Johny", lastName: "Doe", age: 18 });
+   });
+
+   it("does not modify data if not necessary", function () {
+      let store = new Store({
+         data: {
+            person: { firstName: "John", lastName: "Doe" },
+         },
+      });
+
+      assert(store.update("person", merge, { firstName: "John" }) == false);
+      assert.deepEqual(store.get("person"), { firstName: "John", lastName: "Doe" });
+   });
+});
diff --git a/packages/cx/src/data/ops/merge.ts b/packages/cx/src/data/ops/merge.ts
new file mode 100644
index 000000000..fce309f22
--- /dev/null
+++ b/packages/cx/src/data/ops/merge.ts
@@ -0,0 +1,13 @@
+import { Binding } from "../Binding";
+
+export function merge<T extends object>(item: T, data?: Partial<T>): T {
+   let result = item;
+
+   if (data) {
+      for (const key in data) {
+         result = Binding.get(key).set(result, data[key] as any);
+      }
+   }
+
+   return result;
+}
diff --git a/packages/cx/src/data/ops/moveElement.d.ts b/packages/cx/src/data/ops/moveElement.d.ts
deleted file mode 100644
index 5ad3cd408..000000000
--- a/packages/cx/src/data/ops/moveElement.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function moveElement<T>(array: T[], sourceIndex: number, targetIndex: number): T[];
diff --git a/packages/cx/src/data/ops/moveElement.js b/packages/cx/src/data/ops/moveElement.js
deleted file mode 100644
index 30dd6595c..000000000
--- a/packages/cx/src/data/ops/moveElement.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export function moveElement(array, sourceIndex, targetIndex) {
-   if (targetIndex == sourceIndex) return array;
-
-   let el = array[sourceIndex];
-   let res = [...array];
-   if (sourceIndex < targetIndex) {
-      for (let i = sourceIndex; i + 1 < targetIndex; i++) res[i] = res[i + 1];
-      targetIndex--;
-   } else {
-      for (let i = sourceIndex; i > targetIndex; i--) res[i] = res[i - 1];
-   }
-   res[targetIndex] = el;
-   return res;
-}
\ No newline at end of file
diff --git a/packages/cx/src/data/ops/moveElement.ts b/packages/cx/src/data/ops/moveElement.ts
new file mode 100644
index 000000000..0358fdcd2
--- /dev/null
+++ b/packages/cx/src/data/ops/moveElement.ts
@@ -0,0 +1,21 @@
+export function moveElement<T>(array: T[], sourceIndex: number, targetIndex: number): T[] {
+   if (sourceIndex === targetIndex) return array;
+
+   const result = [...array];
+   const element = result[sourceIndex];
+
+   if (sourceIndex < targetIndex) {
+      for (let i = sourceIndex; i < targetIndex - 1; i++) {
+         result[i] = result[i + 1];
+      }
+      result[targetIndex - 1] = result[targetIndex];
+      targetIndex--;
+   } else {
+      for (let i = sourceIndex; i > targetIndex; i--) {
+         result[i] = result[i - 1];
+      }
+   }
+
+   result[targetIndex] = element;
+   return result;
+}
diff --git a/packages/cx/src/data/ops/removeTreeNodes.d.ts b/packages/cx/src/data/ops/removeTreeNodes.d.ts
deleted file mode 100644
index 79065ed85..000000000
--- a/packages/cx/src/data/ops/removeTreeNodes.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function removeTreeNodes<T = any>(
-   array: T[],
-   criteria: (item?: T, index?: number) => boolean,
-   childrenField?: string
-): T[];
diff --git a/packages/cx/src/data/ops/removeTreeNodes.js b/packages/cx/src/data/ops/removeTreeNodes.js
deleted file mode 100644
index 149d9c0ff..000000000
--- a/packages/cx/src/data/ops/removeTreeNodes.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { updateTree } from "./updateTree";
-
-export function removeTreeNodes(array, criteria, childrenField = "$children") {
-   return updateTree(array, null, () => false, childrenField, criteria);
-}
diff --git a/packages/cx/src/data/ops/removeTreeNodes.spec.js b/packages/cx/src/data/ops/removeTreeNodes.spec.js
deleted file mode 100644
index 022626559..000000000
--- a/packages/cx/src/data/ops/removeTreeNodes.spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Store} from '../Store';
-import {removeTreeNodes} from './removeTreeNodes';
-import assert from 'assert';
-
-describe('removeTreeNodes', function() {
-   it('removes all nodes that satisfy criteria', function () {
-      let store = new Store({
-         data: {array: [{
-            id: 'n1',
-            value: 1,
-            children: [{
-               id: 'n11',
-               value: 2
-            }, {
-               id: 'n12',
-               value: 3
-            }]
-         }]}
-      });
-
-      assert(store.update('array', removeTreeNodes, x => x.value > 1, 'children'));
-      assert.deepEqual(store.get('array'), [{
-         id: 'n1',
-         value: 1,
-         children: []
-      }]);
-   });
-});
diff --git a/packages/cx/src/data/ops/removeTreeNodes.spec.ts b/packages/cx/src/data/ops/removeTreeNodes.spec.ts
new file mode 100644
index 000000000..5e5a371cf
--- /dev/null
+++ b/packages/cx/src/data/ops/removeTreeNodes.spec.ts
@@ -0,0 +1,37 @@
+import { Store } from "../Store";
+import { removeTreeNodes } from "./removeTreeNodes";
+import assert from "assert";
+
+describe("removeTreeNodes", function () {
+   it("removes all nodes that satisfy criteria", function () {
+      let store = new Store({
+         data: {
+            array: [
+               {
+                  id: "n1",
+                  value: 1,
+                  children: [
+                     {
+                        id: "n11",
+                        value: 2,
+                     },
+                     {
+                        id: "n12",
+                        value: 3,
+                     },
+                  ],
+               },
+            ],
+         },
+      });
+
+      assert(store.update("array", removeTreeNodes, (x: any) => x.value > 1, "children"));
+      assert.deepEqual(store.get("array"), [
+         {
+            id: "n1",
+            value: 1,
+            children: [],
+         },
+      ]);
+   });
+});
diff --git a/packages/cx/src/data/ops/removeTreeNodes.ts b/packages/cx/src/data/ops/removeTreeNodes.ts
new file mode 100644
index 000000000..cefd811aa
--- /dev/null
+++ b/packages/cx/src/data/ops/removeTreeNodes.ts
@@ -0,0 +1,15 @@
+import { updateTree } from "./updateTree";
+
+export function removeTreeNodes<T = any>(
+   array: T[] | undefined,
+   criteria: (node: T) => boolean,
+   childrenField: keyof T,
+): T[] | undefined {
+   return updateTree(
+      array,
+      (x) => x,
+      () => false,
+      childrenField,
+      criteria,
+   );
+}
diff --git a/packages/cx/src/data/ops/updateArray.d.ts b/packages/cx/src/data/ops/updateArray.d.ts
deleted file mode 100644
index 4256583a7..000000000
--- a/packages/cx/src/data/ops/updateArray.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export function updateArray<T>(
-    array: T[],
-    updateCallback: (item: T, index?: number) => T,
-    itemFilter?: (item: T, index?: number) => boolean,
-    removeFilter?: (item: T, index?: number) => boolean
-) : T[];
\ No newline at end of file
diff --git a/packages/cx/src/data/ops/updateArray.js b/packages/cx/src/data/ops/updateArray.js
deleted file mode 100644
index b6432f6c7..000000000
--- a/packages/cx/src/data/ops/updateArray.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export function updateArray(array, updateCallback, itemFilter, removeFilter) {
-   
-   if (!array)
-      return array;
-   
-   let newArray = [];
-   let dirty = false;
-   
-   for (let index = 0; index < array.length; index++) {
-      let item = array[index];
-      if (removeFilter && removeFilter(item, index)) {
-         dirty = true;
-         continue;
-      }
-      if (!itemFilter || itemFilter(item, index)) {
-         let newItem = updateCallback(item, index);
-         newArray.push(newItem);
-         if (newItem !== item)
-            dirty = true;
-      } else
-         newArray.push(item);
-   }
-   return dirty ? newArray : array;
-}
diff --git a/packages/cx/src/data/ops/updateArray.spec.js b/packages/cx/src/data/ops/updateArray.spec.js
deleted file mode 100644
index b284df61d..000000000
--- a/packages/cx/src/data/ops/updateArray.spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import {Store} from '../Store';
-import {updateArray} from './updateArray';
-import assert from 'assert';
-
-describe('updateArray', function() {
-   it('updates all elements that satisfy criteria', function () {
-      let store = new Store({
-         data: {array: [1, 2, 3, 4, 5, 6]}
-      });
-
-      assert(store.update('array', updateArray, x => x + 1, x => x > 3));
-      assert.deepEqual(store.get('array'), [1, 2, 3, 5, 6, 7]);
-   });
-
-   it('does not modify data if not necessary', function () {
-      let array = [1, 2, 3, 4, 5, 6];
-      let store = new Store({
-         data: {array}
-      });
-
-      assert(false === store.update('array', updateArray, x => x + 1, x => x > 10));
-      assert(store.get('array') === array);
-   });
-
-   it('works with null or undefined', function () {
-      let store = new Store();
-      assert(false === store.update('array', updateArray, x => x + 1, x => x > 0));
-   });
-
-   it('can remove elements given the criteria', function () {
-      let store = new Store({
-         data: {array: [1, 2, 3, 4, 5, 6]}
-      });
-
-      assert(store.update('array', updateArray, x => x + 1, x => x > 3, x => x <= 3));
-      assert.deepEqual(store.get('array'), [5, 6, 7]);
-   });
-});
diff --git a/packages/cx/src/data/ops/updateArray.spec.ts b/packages/cx/src/data/ops/updateArray.spec.ts
new file mode 100644
index 000000000..a78d84497
--- /dev/null
+++ b/packages/cx/src/data/ops/updateArray.spec.ts
@@ -0,0 +1,69 @@
+import { Store } from "../Store";
+import { updateArray } from "./updateArray";
+import assert from "assert";
+
+describe("updateArray", function () {
+   it("updates all elements that satisfy criteria", function () {
+      let store = new Store({
+         data: { array: [1, 2, 3, 4, 5, 6] },
+      });
+
+      assert(
+         store.update(
+            "array",
+            updateArray,
+            (x) => x + 1,
+            (x) => x > 3,
+         ),
+      );
+      assert.deepEqual(store.get("array"), [1, 2, 3, 5, 6, 7]);
+   });
+
+   it("does not modify data if not necessary", function () {
+      let array = [1, 2, 3, 4, 5, 6];
+      let store = new Store({
+         data: { array },
+      });
+
+      assert(
+         false ===
+            store.update(
+               "array",
+               updateArray,
+               (x) => x + 1,
+               (x) => x > 10,
+            ),
+      );
+      assert(store.get("array") === array);
+   });
+
+   it("works with null or undefined", function () {
+      let store = new Store();
+      assert(
+         false ===
+            store.update(
+               "array",
+               updateArray,
+               (x) => x + 1,
+               (x) => x > 0,
+            ),
+      );
+   });
+
+   it("can remove elements given the criteria", function () {
+      let store = new Store({
+         data: { array: [1, 2, 3, 4, 5, 6] },
+      });
+
+      assert(
+         store.update(
+            "array",
+            updateArray,
+            (x) => x + 1,
+            (x) => x > 3,
+            (x) => x <= 3,
+         ),
+      );
+      assert.deepEqual(store.get("array"), [5, 6, 7]);
+   });
+});
diff --git a/packages/cx/src/data/ops/updateArray.ts b/packages/cx/src/data/ops/updateArray.ts
new file mode 100644
index 000000000..9794160c7
--- /dev/null
+++ b/packages/cx/src/data/ops/updateArray.ts
@@ -0,0 +1,31 @@
+export function updateArray<T = any>(
+   array: T[] | undefined,
+   updateCallback: (item: T, index: number) => T,
+   itemFilter?: null | ((item: T, index: number) => boolean),
+   removeFilter?: (item: T, index: number) => boolean,
+): T[] | undefined {
+   if (!array) return array;
+
+   const newArray: T[] = [];
+   let dirty: boolean = false;
+
+   for (let index = 0; index < array.length; index++) {
+      const item = array[index];
+
+      if (removeFilter && removeFilter(item, index)) {
+         dirty = true;
+         continue;
+      }
+
+      if (!itemFilter || itemFilter(item, index)) {
+         const newItem = updateCallback(item, index);
+         newArray.push(newItem);
+
+         if (newItem !== item) dirty = true;
+      } else {
+         newArray.push(item);
+      }
+   }
+
+   return dirty ? newArray : array;
+}
diff --git a/packages/cx/src/data/ops/updateTree.d.ts b/packages/cx/src/data/ops/updateTree.d.ts
deleted file mode 100644
index f16960ddf..000000000
--- a/packages/cx/src/data/ops/updateTree.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function updateTree<T = any>(
-   array: T[],
-   updateCallback: (item?: T, index?: number) => T,
-   itemFilter?: (item?: T, index?: number) => boolean,
-   childrenField?: string,
-   removeFilter?: (item?: T, index?: number) => boolean
-): T[];
diff --git a/packages/cx/src/data/ops/updateTree.js b/packages/cx/src/data/ops/updateTree.js
deleted file mode 100644
index 49dd66e70..000000000
--- a/packages/cx/src/data/ops/updateTree.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { updateArray } from './updateArray';
-
-export function updateTree(array, updateCallback, itemFilter, childrenField, removeFilter) {
-   return updateArray(array, item => {
-      if (!itemFilter || itemFilter(item))
-         item = updateCallback(item);
-
-      let children = item[childrenField];
-      if (!Array.isArray(children))
-         return item;
-
-      let updatedChildren = updateTree(
-         children,
-         updateCallback,
-         itemFilter,
-         childrenField,
-         removeFilter
-      );
-
-      if (updatedChildren != children)
-         return { ...item, [childrenField]: updatedChildren };
-
-      return item;
-   }, null, removeFilter);
-}
diff --git a/packages/cx/src/data/ops/updateTree.spec.js b/packages/cx/src/data/ops/updateTree.spec.js
deleted file mode 100644
index b8e82a714..000000000
--- a/packages/cx/src/data/ops/updateTree.spec.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Store } from '../Store';
-import { updateTree } from './updateTree';
-import assert from 'assert';
-
-describe('updateTree', function () {
-   it('updates all nodes that satisfy criteria', function () {
-      let store = new Store({
-         data: {
-            array: [{
-               id: 'n1',
-               value: 1,
-               children: [{
-                  id: 'n11',
-                  value: 2
-               }, {
-                  id: 'n12',
-                  value: 3
-               }]
-            }]
-         }
-      });
-
-      assert(store.update('array', updateTree, x => ({ ...x, value: x.value + 1 }), x => x.value > 1, 'children'));
-      assert.deepEqual(store.get('array'), [{
-         id: 'n1',
-         value: 1,
-         children: [{
-            id: 'n11',
-            value: 3
-         }, {
-            id: 'n12',
-            value: 4
-         }]
-      }]);
-   });
-});
diff --git a/packages/cx/src/data/ops/updateTree.spec.ts b/packages/cx/src/data/ops/updateTree.spec.ts
new file mode 100644
index 000000000..ae658dbcb
--- /dev/null
+++ b/packages/cx/src/data/ops/updateTree.spec.ts
@@ -0,0 +1,54 @@
+import { Store } from "../Store";
+import { updateTree } from "./updateTree";
+import assert from "assert";
+
+describe("updateTree", function () {
+   it("updates all nodes that satisfy criteria", function () {
+      let store = new Store({
+         data: {
+            array: [
+               {
+                  id: "n1",
+                  value: 1,
+                  children: [
+                     {
+                        id: "n11",
+                        value: 2,
+                     },
+                     {
+                        id: "n12",
+                        value: 3,
+                     },
+                  ],
+               },
+            ],
+         },
+      });
+
+      assert(
+         store.update(
+            "array",
+            updateTree,
+            (x) => ({ ...x, value: x.value + 1 }),
+            (x) => x.value > 1,
+            "children",
+         ),
+      );
+      assert.deepEqual(store.get("array"), [
+         {
+            id: "n1",
+            value: 1,
+            children: [
+               {
+                  id: "n11",
+                  value: 3,
+               },
+               {
+                  id: "n12",
+                  value: 4,
+               },
+            ],
+         },
+      ]);
+   });
+});
diff --git a/packages/cx/src/data/ops/updateTree.ts b/packages/cx/src/data/ops/updateTree.ts
new file mode 100644
index 000000000..519bcf5f2
--- /dev/null
+++ b/packages/cx/src/data/ops/updateTree.ts
@@ -0,0 +1,23 @@
+import { updateArray } from "./updateArray";
+
+export function updateTree<T = any>(
+   array: T[] | undefined,
+   updateCallback: (item: T) => T,
+   itemFilter: ((item: T) => boolean) | null,
+   childrenField: keyof T,
+   removeFilter?: (item: T) => boolean,
+): T[] | undefined {
+   return updateArray(
+      array,
+      (item: T) => {
+         if (!itemFilter || itemFilter(item)) item = updateCallback(item);
+         const children = item[childrenField];
+         if (!Array.isArray(children)) return item;
+         const updatedChildren = updateTree(children, updateCallback, itemFilter, childrenField, removeFilter);
+         if (updatedChildren != children) return { ...item, [childrenField]: updatedChildren };
+         return item;
+      },
+      null,
+      removeFilter,
+   );
+}
diff --git a/packages/cx/src/data/test-types.ts b/packages/cx/src/data/test-types.ts
new file mode 100644
index 000000000..4119d111c
--- /dev/null
+++ b/packages/cx/src/data/test-types.ts
@@ -0,0 +1,7 @@
+import { AccessorChain } from "./createAccessorModelProxy";
+
+// Test what AccessorChain<string[]> looks like
+type Test1 = AccessorChain<string[]>;
+type Test2 = AccessorChain<string[]>["length"];
+
+// The issue: does AccessorChain properly map array properties?
diff --git a/packages/cx/src/hooks/createLocalStorageRef.d.ts b/packages/cx/src/hooks/createLocalStorageRef.d.ts
deleted file mode 100644
index 14ca3f2af..000000000
--- a/packages/cx/src/hooks/createLocalStorageRef.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Ref } from "../data";
-
-export function createLocalStorageRef(key: string): Ref<any>;
diff --git a/packages/cx/src/hooks/createLocalStorageRef.js b/packages/cx/src/hooks/createLocalStorageRef.js
deleted file mode 100644
index 690c8dc51..000000000
--- a/packages/cx/src/hooks/createLocalStorageRef.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useStore } from "./store";
-import { Ref } from "../data/Ref";
-
-export function createLocalStorageRef(key) {
-   let store = useStore();
-
-   return new Ref({
-      get() {
-         let json = localStorage.getItem(key);
-         if (!json) return localStorage.hasOwnProperty(key) ? null : undefined;
-         return JSON.parse(json);
-      },
-      set(value) {
-         if (value === undefined) localStorage.removeItem(key);
-         else localStorage.setItem(key, JSON.stringify(value));
-         store.meta.version++;
-         store.notify();
-      },
-   });
-}
diff --git a/packages/cx/src/hooks/createLocalStorageRef.ts b/packages/cx/src/hooks/createLocalStorageRef.ts
new file mode 100644
index 000000000..7310d4590
--- /dev/null
+++ b/packages/cx/src/hooks/createLocalStorageRef.ts
@@ -0,0 +1,21 @@
+import { useStore } from "./store";
+import { Ref } from "../data/Ref";
+
+export function createLocalStorageRef<T = any>(key: string): Ref<T> {
+   let store = useStore();
+
+   return new Ref<T>({
+      get(): T {
+         let json = localStorage.getItem(key);
+         if (!json) return localStorage.hasOwnProperty(key) ? (null as any) : (undefined as any);
+         return JSON.parse(json) as T;
+      },
+      set(value: T): boolean {
+         if (value === undefined) localStorage.removeItem(key);
+         else localStorage.setItem(key, JSON.stringify(value));
+         store.meta.version++;
+         store.notify();
+         return true;
+      },
+   });
+}
diff --git a/packages/cx/src/hooks/index.js b/packages/cx/src/hooks/index.js
deleted file mode 100644
index 5678843ba..000000000
--- a/packages/cx/src/hooks/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from "./store";
-export * from "./useEffect";
-export * from "./useInterval";
-export * from "./useTrigger";
-export * from "./useState";
-export * from "./createLocalStorageRef";
-export * from "./resolveCallback";
-export * from "./invokeCallback";
\ No newline at end of file
diff --git a/packages/cx/src/hooks/index.d.ts b/packages/cx/src/hooks/index.ts
similarity index 100%
rename from packages/cx/src/hooks/index.d.ts
rename to packages/cx/src/hooks/index.ts
diff --git a/packages/cx/src/hooks/invokeCallback.d.ts b/packages/cx/src/hooks/invokeCallback.d.ts
deleted file mode 100644
index a43b7feff..000000000
--- a/packages/cx/src/hooks/invokeCallback.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Instance } from "./../ui/Instance.d";
-import { isFunction } from "../util/isFunction";
-import { isString } from "../util/isString";
-
-export function invokeCallback(instance: Instance, callback: string | ((...args: any) => any), ...args: any[]): any;
diff --git a/packages/cx/src/hooks/invokeCallback.js b/packages/cx/src/hooks/invokeCallback.js
deleted file mode 100644
index 5f23ffe4d..000000000
--- a/packages/cx/src/hooks/invokeCallback.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { isFunction } from "../util/isFunction";
-import { isString } from "../util/isString";
-
-export function invokeCallback(instance, callback, ...args) {
-   if (isString(callback)) return instance.invokeControllerMethod(callback, ...args);
-   if (isFunction(callback)) return callback(...args);
-}
\ No newline at end of file
diff --git a/packages/cx/src/hooks/invokeCallback.spec.js b/packages/cx/src/hooks/invokeCallback.spec.js
deleted file mode 100644
index 6a9d91b3e..000000000
--- a/packages/cx/src/hooks/invokeCallback.spec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useTrigger } from "./useTrigger";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { Store } from "../data/Store";
-import renderer from "react-test-renderer";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { VDOM } from "../ui/VDOM";
-import { Cx } from "../ui/Cx";
-import assert from "assert";
-import { resolveCallback } from "./resolveCallback";
-import { invokeCallback } from "./invokeCallback";
-
-describe("invokeCallback", () => {
-   it("works with functions", () => {
-      const FComp = createFunctionalComponent(({ onTest }) => {
-         invokeCallback(null, onTest, "works");
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let value;
-      const component = renderer.create(<Cx widget={{ type: FComp, onTest: v => { value = v } }} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(value, "works");
-   });
-
-   it("works with controller methods", () => {
-      const FComp = createFunctionalComponent(({ onTest }) => {
-         return (
-            <cx>
-               <div onExplore={(context, instance) => { invokeCallback(instance, onTest, "works") }} />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let value;
-      const component = renderer.create(<Cx widget={{
-         type: FComp,
-         onTest: "onTest",
-         controller: {
-            onTest(v) { value = v }
-         }
-      }} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(value, "works");
-   });
-});
diff --git a/packages/cx/src/hooks/invokeCallback.spec.tsx b/packages/cx/src/hooks/invokeCallback.spec.tsx
new file mode 100644
index 000000000..ca7f1c64a
--- /dev/null
+++ b/packages/cx/src/hooks/invokeCallback.spec.tsx
@@ -0,0 +1,59 @@
+import assert from "assert";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { invokeCallback } from "./invokeCallback";
+
+describe("invokeCallback", () => {
+   it("works with functions", async () => {
+      const FComp = createFunctionalComponent(({ onTest }: { onTest: (v: any) => void }) => {
+         invokeCallback(null!, onTest, "works");
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let value;
+      const component = await createTestRenderer(store, {
+         type: FComp,
+         onTest: (v: any) => {
+            value = v;
+         },
+      });
+
+      component.toJSON();
+      assert.equal(value, "works");
+   });
+
+   it("works with controller methods", async () => {
+      const FComp = createFunctionalComponent(({ onTest }: { onTest: (v: any) => void }) => {
+         return (
+            <cx>
+               <div
+                  onExplore={(context, instance) => {
+                     invokeCallback(instance, onTest, "works");
+                  }}
+               />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let value;
+      const component = await createTestRenderer(store, {
+         type: FComp,
+         onTest: "onTest",
+         controller: {
+            onTest(v: any) {
+               value = v;
+            },
+         },
+      });
+
+      component.toJSON();
+      assert.equal(value, "works");
+   });
+});
diff --git a/packages/cx/src/hooks/invokeCallback.ts b/packages/cx/src/hooks/invokeCallback.ts
new file mode 100644
index 000000000..4a22adb00
--- /dev/null
+++ b/packages/cx/src/hooks/invokeCallback.ts
@@ -0,0 +1,8 @@
+import { isFunction } from "../util/isFunction";
+import { isString } from "../util/isString";
+import { Instance } from "../ui/Instance";
+
+export function invokeCallback(instance: Instance, callback: string | ((...args: any[]) => any), ...args: any[]): any {
+   if (isString(callback)) return instance.invokeControllerMethod(callback, ...args);
+   if (isFunction(callback)) return callback(...args);
+}
diff --git a/packages/cx/src/hooks/resolveCallback.d.ts b/packages/cx/src/hooks/resolveCallback.d.ts
deleted file mode 100644
index c3f7001f7..000000000
--- a/packages/cx/src/hooks/resolveCallback.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Instance } from "./../ui/Instance.d";
-
-export function resolveCallback(callback: string | ((...args) => any), instance?: Instance): (...args) => any;
diff --git a/packages/cx/src/hooks/resolveCallback.js b/packages/cx/src/hooks/resolveCallback.js
deleted file mode 100644
index 83031915d..000000000
--- a/packages/cx/src/hooks/resolveCallback.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { isFunction } from "../util/isFunction";
-import { isString } from "../util/isString";
-import { getCurrentInstance } from "../ui/createFunctionalComponent";
-
-export function resolveCallback(callback, instance) {
-   if (isFunction(callback))
-      return callback;
-   if (isString(callback)) {
-      if (!instance) instance = getCurrentInstance();
-      return (...args) => instance.invokeControllerMethod(callback, ...args);
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/hooks/resolveCallback.spec.js b/packages/cx/src/hooks/resolveCallback.spec.js
deleted file mode 100644
index dbc6760e1..000000000
--- a/packages/cx/src/hooks/resolveCallback.spec.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useTrigger } from "./useTrigger";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { Store } from "../data/Store";
-import renderer from "react-test-renderer";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { VDOM } from "../ui/VDOM";
-import { Cx } from "../ui/Cx";
-import assert from "assert";
-import { resolveCallback } from "./resolveCallback";
-
-describe("resolveCallback", () => {
-   it("works with functions", () => {
-      const FComp = createFunctionalComponent(({ onTest }) => {
-         let callback = resolveCallback(onTest);
-         callback("works");
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let value;
-      const component = renderer.create(<Cx widget={{ type: FComp, onTest: v => { value = v } }} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(value, "works");
-   });
-
-   it("works with controller methods", () => {
-      const FComp = createFunctionalComponent(({ onTest }) => {
-         let callback = resolveCallback(onTest);
-         return (
-            <cx>
-               <div onInit={() => { callback("works"); }} />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let value;
-      const component = renderer.create(<Cx widget={{
-         type: FComp,
-         onTest: "onTest",
-         controller: {
-            onTest(v) { value = v }
-         }
-      }} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(value, "works");
-   });
-});
diff --git a/packages/cx/src/hooks/resolveCallback.spec.tsx b/packages/cx/src/hooks/resolveCallback.spec.tsx
new file mode 100644
index 000000000..9402c9847
--- /dev/null
+++ b/packages/cx/src/hooks/resolveCallback.spec.tsx
@@ -0,0 +1,71 @@
+import assert from "assert";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { resolveCallback } from "./resolveCallback";
+
+describe("resolveCallback", () => {
+   it("works with functions", async () => {
+      const FComp = createFunctionalComponent(({ onTest }: { onTest: (value: string) => void }) => {
+         let callback = resolveCallback(onTest);
+         assert(typeof callback === "function");
+         callback("works");
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let value;
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <FComp
+               onTest={(v: string) => {
+                  value = v;
+               }}
+            />
+         </cx>,
+      );
+
+      component.toJSON();
+      assert.equal(value, "works");
+   });
+
+   it("works with controller methods", async () => {
+      const FComp = createFunctionalComponent(({ onTest }: { onTest: string | ((value: string) => void) }) => {
+         let callback = resolveCallback(onTest);
+         assert(typeof callback === "function");
+         return (
+            <cx>
+               <div
+                  onInit={() => {
+                     callback("works");
+                  }}
+               />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let value;
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <FComp
+               onTest="onTest"
+               controller={{
+                  onTest(v: string) {
+                     value = v;
+                  },
+               }}
+            />
+         </cx>,
+      );
+
+      component.toJSON();
+      assert.equal(value, "works");
+   });
+});
diff --git a/packages/cx/src/hooks/resolveCallback.ts b/packages/cx/src/hooks/resolveCallback.ts
new file mode 100644
index 000000000..601f7a141
--- /dev/null
+++ b/packages/cx/src/hooks/resolveCallback.ts
@@ -0,0 +1,16 @@
+import { isFunction } from "../util/isFunction";
+import { isString } from "../util/isString";
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { Instance } from "../ui/Instance";
+
+export function resolveCallback(
+   callback: string | ((...args: any[]) => any),
+   instance?: Instance,
+): ((...args: any[]) => any) | undefined {
+   if (isFunction(callback)) return callback;
+   if (isString(callback)) {
+      if (!instance) instance = getCurrentInstance();
+      return (...args: any[]) => instance!.invokeControllerMethod(callback, ...args);
+   }
+   return undefined;
+}
diff --git a/packages/cx/src/hooks/store.d.ts b/packages/cx/src/hooks/store.d.ts
deleted file mode 100644
index d98e13513..000000000
--- a/packages/cx/src/hooks/store.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Selector } from "../core";
-import { ViewMethods, View } from "../data";
-
-export function useStore(): View;
-
-export function useStoreMethods(): ViewMethods;
-
-export function ref(info: any): Selector<any>;
\ No newline at end of file
diff --git a/packages/cx/src/hooks/store.js b/packages/cx/src/hooks/store.js
deleted file mode 100644
index 11168491f..000000000
--- a/packages/cx/src/hooks/store.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { getCurrentInstance } from "../ui/createFunctionalComponent";
-import { getSelector } from "../data/getSelector";
-import { isObject } from "../util/isObject";
-import { expression } from "../data/Expression";
-import { stringTemplate } from "../data/StringTemplate";
-import { Ref } from "../data/Ref";
-
-export function useStore() {
-   return getCurrentInstance().store;
-}
-
-export function useStoreMethods() {
-   return getCurrentInstance().store.getMethods();
-}
-
-export function ref(info) {
-   if (isObject(info)) {
-      if (info.bind) return useStore().ref(info.bind, info.defaultValue);
-      if (info.get) return info;
-      if (info.expr) {
-         let store = useStore();
-         let selector = expression(info.expr).memoize();
-         return new Ref({ get: () => selector(store.getData()), set: info.set });
-      }
-      if (info.tpl) {
-         let store = useStore();
-         let selector = stringTemplate(info.tpl).memoize();
-         return new Ref({ get: () => selector(store.getData()), set: info.set });
-      }
-   }
-   return getSelector(info);
-}
diff --git a/packages/cx/src/hooks/store.spec.js b/packages/cx/src/hooks/store.spec.js
deleted file mode 100644
index eb0957c8a..000000000
--- a/packages/cx/src/hooks/store.spec.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ref } from "./store";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { Store } from "../data/Store";
-import renderer from "react-test-renderer";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { VDOM } from "../ui/VDOM";
-import { Cx } from "../ui/Cx";
-import assert from "assert";
-import { computable } from "../data";
-
-describe("ref", () => {
-   it("allows store references in functional components", () => {
-      const FComp = createFunctionalComponent(({}) => {
-         let testValue = ref({ bind: "x", defaultValue: 10 });
-         return (
-            <cx>
-               <div text={testValue} />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         children: ["10"],
-         props: {},
-      });
-   });
-
-   it("can be used to adapt any prop passed to a functional component", () => {
-      const FComp = createFunctionalComponent(({ value }) => {
-         return (
-            <cx>
-               <div text={computable(ref(value), (value) => `x${value}`)} />
-            </cx>
-         );
-      });
-
-      let store = new Store({ data: { value: 100 } });
-
-      function test(value, expectation) {
-         const component = renderer.create(
-            <Cx store={store} subscribe immediate>
-               <FComp value={value} />
-            </Cx>
-         );
-         let tree = component.toJSON();
-         assert.deepEqual(tree, {
-            type: "div",
-            children: [expectation],
-            props: {},
-         });
-      }
-
-      test({ bind: "value" }, "x100");
-      test({ expr: "{value}" }, "x100");
-      test({ tpl: "{value:n;2}" }, "x100.00");
-      test(200, "x200");
-      test(() => 500, "x500");
-      test(
-         computable("value", (value) => value + 100),
-         "x200"
-      );
-      test(null, "xnull");
-      test(undefined, "xundefined");
-      test(0, "x0");
-      test(false, "xfalse");
-   });
-});
diff --git a/packages/cx/src/hooks/store.spec.tsx b/packages/cx/src/hooks/store.spec.tsx
new file mode 100644
index 000000000..b48f44011
--- /dev/null
+++ b/packages/cx/src/hooks/store.spec.tsx
@@ -0,0 +1,67 @@
+import assert from "assert";
+import { Prop } from "../ui/Prop";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { computable } from "../data";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { ref } from "./store";
+
+describe("ref", () => {
+   it("allows store references in functional components", async () => {
+      const FComp = createFunctionalComponent(({}) => {
+         let testValue = ref({ bind: "x", defaultValue: 10 });
+         return (
+            <cx>
+               <div text={testValue} />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, FComp);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         children: ["10"],
+         props: {},
+      });
+   });
+
+   it("can be used to adapt any prop passed to a functional component", async () => {
+      const FComp = createFunctionalComponent(({ value }: { value: Prop<any> }) => {
+         return (
+            <cx>
+               <div text={computable(ref(value), (value) => `x${value}`)} />
+            </cx>
+         );
+      });
+
+      let store = new Store({ data: { value: 100 } });
+
+      async function test(value: Prop<any>, expectation: any) {
+         const component = await createTestRenderer(store, <FComp value={value} />);
+         let tree = component.toJSON();
+         assert.deepEqual(tree, {
+            type: "div",
+            children: [expectation],
+            props: {},
+         });
+      }
+
+      await test({ bind: "value" }, "x100");
+      await test({ expr: "{value}" }, "x100");
+      await test({ tpl: "{value:n;2}" }, "x100.00");
+      await test(200, "x200");
+      await test(() => 500, "x500");
+      await test(
+         computable("value", (value: string) => value + 100),
+         "x200",
+      );
+      await test(null, "xnull");
+      await test(undefined, "xundefined");
+      await test(0, "x0");
+      await test(false, "xfalse");
+   });
+});
diff --git a/packages/cx/src/hooks/store.ts b/packages/cx/src/hooks/store.ts
new file mode 100644
index 000000000..cb0df20cd
--- /dev/null
+++ b/packages/cx/src/hooks/store.ts
@@ -0,0 +1,46 @@
+import { Selector } from "../data/Selector";
+import { BindingObject, isBindingObject } from "../data/Binding";
+import { expression } from "../data/Expression";
+import { getSelector } from "../data/getSelector";
+import { Ref } from "../data/Ref";
+import { stringTemplate } from "../data/StringTemplate";
+import { View } from "../data/View";
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { GetSet, Prop } from "../ui/Prop";
+import { hasFunctionAtKey, hasStringAtKey } from "../util/hasKey";
+import { isObject } from "../util/isObject";
+
+export function useStore(): View {
+   return getCurrentInstance().store;
+}
+
+export function useStoreMethods(): ReturnType<View["getMethods"]> {
+   return getCurrentInstance().store.getMethods();
+}
+
+export type RefInput<T> = Prop<T> | Ref<T>;
+
+export function ref<T = any>(input: BindingObject): GetSet<T>;
+export function ref<T = any>(input: Ref<T>): GetSet<T>;
+export function ref<T = any>(input: Prop<T>): Selector<T>;
+export function ref<T = any>(info: unknown): GetSet<T> | Selector<T> {
+   if (isObject(info)) {
+      if (isBindingObject(info)) return useStore().ref(info.bind, info.defaultValue);
+      if (hasFunctionAtKey(info, "get")) return info as unknown as Ref<T>;
+      if (hasFunctionAtKey(info, "memoize")) return info as unknown as Selector<T>;
+      if (hasStringAtKey(info, "expr")) {
+         let store = useStore();
+         let selector = expression(info.expr).memoize();
+         return new Ref<T>({ get: () => selector(store.getData()), set: (info as any).set }) as unknown as Selector<T>;
+      }
+      if (hasStringAtKey(info, "tpl")) {
+         let store = useStore();
+         let selector = stringTemplate(info.tpl).memoize();
+         return new Ref<T>({
+            get: () => selector(store.getData()) as T,
+            set: (info as any).set,
+         }) as unknown as Selector<T>;
+      }
+   }
+   return getSelector(info);
+}
diff --git a/packages/cx/src/hooks/useEffect.d.ts b/packages/cx/src/hooks/useEffect.d.ts
deleted file mode 100644
index 696d48b12..000000000
--- a/packages/cx/src/hooks/useEffect.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function useEffect(callback: () => () => void): void;
-
-export function useCleanup(cleanupCallback: () => void): () => void;
\ No newline at end of file
diff --git a/packages/cx/src/hooks/useEffect.js b/packages/cx/src/hooks/useEffect.js
deleted file mode 100644
index 05c0d1319..000000000
--- a/packages/cx/src/hooks/useEffect.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {getCurrentInstance} from "../ui/createFunctionalComponent";
-
-export function useEffect(callback) {
-   let destroyCallback = callback();
-   if (destroyCallback)
-      getCurrentInstance().subscribeOnDestroy(destroyCallback);
-}
-
-export function useCleanup(cleanupCallback) {
-   let unsubscribe = getCurrentInstance().subscribeOnDestroy(cleanupCallback);
-   return () => {
-      unsubscribe();
-      cleanupCallback();
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/hooks/useEffect.ts b/packages/cx/src/hooks/useEffect.ts
new file mode 100644
index 000000000..4e697c070
--- /dev/null
+++ b/packages/cx/src/hooks/useEffect.ts
@@ -0,0 +1,14 @@
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+
+export function useEffect(callback: () => (() => void) | void): void {
+   let destroyCallback = callback();
+   if (destroyCallback) getCurrentInstance().subscribeOnDestroy(destroyCallback);
+}
+
+export function useCleanup(cleanupCallback: () => void): () => void {
+   let unsubscribe = getCurrentInstance().subscribeOnDestroy(cleanupCallback);
+   return () => {
+      unsubscribe();
+      cleanupCallback();
+   };
+}
diff --git a/packages/cx/src/hooks/useInterval.d.ts b/packages/cx/src/hooks/useInterval.d.ts
deleted file mode 100644
index ffa016625..000000000
--- a/packages/cx/src/hooks/useInterval.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function useInterval(callback: () => void, timeout: number): () => void;
\ No newline at end of file
diff --git a/packages/cx/src/hooks/useInterval.js b/packages/cx/src/hooks/useInterval.js
deleted file mode 100644
index a21ba84e3..000000000
--- a/packages/cx/src/hooks/useInterval.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import {useCleanup} from "./useEffect";
-
-export function useInterval(callback, timeout) {
-   let timer = setInterval(callback, timeout);
-   return useCleanup(() => {
-      clearInterval(timer);
-   });
-}
\ No newline at end of file
diff --git a/packages/cx/src/hooks/useInterval.ts b/packages/cx/src/hooks/useInterval.ts
new file mode 100644
index 000000000..f53124d71
--- /dev/null
+++ b/packages/cx/src/hooks/useInterval.ts
@@ -0,0 +1,8 @@
+import { useCleanup } from "./useEffect";
+
+export function useInterval(callback: () => void, timeout: number): () => void {
+   let timer = setInterval(callback, timeout);
+   return useCleanup(() => {
+      clearInterval(timer);
+   });
+}
diff --git a/packages/cx/src/hooks/useState.d.ts b/packages/cx/src/hooks/useState.d.ts
deleted file mode 100644
index 1c78f1717..000000000
--- a/packages/cx/src/hooks/useState.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Ref } from "../data";
-
-export function useState(defaultValue?: any): Ref<any>
\ No newline at end of file
diff --git a/packages/cx/src/hooks/useState.js b/packages/cx/src/hooks/useState.js
deleted file mode 100644
index e18ba65a9..000000000
--- a/packages/cx/src/hooks/useState.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { getCurrentInstance } from "../ui/createFunctionalComponent";
-import { Ref } from "../data/Ref";
-
-let key = 0;
-
-export function useState(defaultValue) {
-   let instance = getCurrentInstance();
-   let storeKey = '_state' + (++key);
-   instance.setState({
-      [storeKey]: defaultValue
-   });
-   return new Ref({
-      get: () => instance.state[storeKey],
-      set: value => instance.setState({ [storeKey]: value })
-   });
-}
\ No newline at end of file
diff --git a/packages/cx/src/hooks/useState.ts b/packages/cx/src/hooks/useState.ts
new file mode 100644
index 000000000..ce130ee52
--- /dev/null
+++ b/packages/cx/src/hooks/useState.ts
@@ -0,0 +1,20 @@
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { Ref } from "../data/Ref";
+
+let key: number = 0;
+
+export function useState<T = any>(defaultValue?: T): Ref<T> {
+   let instance = getCurrentInstance();
+   let storeKey = "_state" + ++key;
+   instance.setState({
+      [storeKey]: defaultValue,
+   });
+
+   return new Ref<T>({
+      get: (): T => instance.state[storeKey],
+      set: (value: T): boolean => {
+         instance.setState({ [storeKey]: value });
+         return true;
+      },
+   });
+}
diff --git a/packages/cx/src/hooks/useTrigger.d.ts b/packages/cx/src/hooks/useTrigger.d.ts
deleted file mode 100644
index b29d7350a..000000000
--- a/packages/cx/src/hooks/useTrigger.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Path } from "../data";
-
-export function addExploreCallback(callback: any): () => void;
-
-export function useTrigger(args: Array<Path>, callback: (...args) => void, autoRun?: boolean): () => void;
\ No newline at end of file
diff --git a/packages/cx/src/hooks/useTrigger.js b/packages/cx/src/hooks/useTrigger.js
deleted file mode 100644
index a7c70b4bd..000000000
--- a/packages/cx/src/hooks/useTrigger.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { getCurrentInstance } from "../ui/createFunctionalComponent";
-import { isArray } from "../util/isArray";
-import { computable } from "../data/computable";
-import { useStore } from "./store";
-
-export function addExploreCallback(callback) {
-   let instance = getCurrentInstance();
-   if (!instance.computables) instance.computables = [];
-   instance.computables.push(callback);
-   return () => {
-      instance.computables = instance.computables.filter((cb) => cb !== callback);
-   };
-}
-
-export function useTrigger(args, callback, autoRun) {
-   if (!isArray(args)) throw new Error("First argument to addTrigger should be an array.");
-   let store = useStore();
-   let selector = computable(...args, callback).memoize(!autoRun && store.getData());
-   return addExploreCallback(selector);
-}
diff --git a/packages/cx/src/hooks/useTrigger.spec.js b/packages/cx/src/hooks/useTrigger.spec.js
deleted file mode 100644
index 6b77d6e29..000000000
--- a/packages/cx/src/hooks/useTrigger.spec.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useTrigger } from "./useTrigger";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { Store } from "../data/Store";
-import renderer from "react-test-renderer";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { VDOM } from "../ui/VDOM";
-import { Cx } from "../ui/Cx";
-import assert from "assert";
-
-describe("useTrigger", () => {
-   it("works", () => {
-      let last = null;
-
-      const FComp = createFunctionalComponent(({ ...props }) => {
-         useTrigger(["test"], (test) => {
-            last = test;
-         });
-
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let test = store.ref("test", 1);
-
-      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(last, null); //trigger did not fire because it didn't receive true as the last argument
-
-      test.set(2);
-      component.toJSON();
-      assert.equal(last, 2);
-   });
-
-   it("fires immediately if the last argument is true", () => {
-      let last = null;
-
-      const FComp = createFunctionalComponent(({ ...props }) => {
-         useTrigger(
-            ["test"],
-            (test) => {
-               last = test;
-            },
-            true
-         );
-
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      let store = new Store();
-      let test = store.ref("test", 1);
-
-      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(last, 1);
-
-      test.set(2);
-      component.toJSON();
-      assert.equal(last, 2);
-   });
-
-   it("accepts refs as arguments", () => {
-      let last = null;
-
-      let store = new Store();
-      let test = store.ref("test", 1);
-
-      const FComp = createFunctionalComponent(({ ...props }) => {
-         useTrigger(
-            [test],
-            (test) => {
-               last = test;
-            },
-            true
-         );
-
-         return (
-            <cx>
-               <div />
-            </cx>
-         );
-      });
-
-      const component = renderer.create(<Cx widget={FComp} store={store} subscribe immediate />);
-
-      component.toJSON();
-      assert.equal(last, 1);
-
-      test.set(2);
-      component.toJSON();
-      assert.equal(last, 2);
-   });
-});
diff --git a/packages/cx/src/hooks/useTrigger.spec.tsx b/packages/cx/src/hooks/useTrigger.spec.tsx
new file mode 100644
index 000000000..3d3e82d1b
--- /dev/null
+++ b/packages/cx/src/hooks/useTrigger.spec.tsx
@@ -0,0 +1,105 @@
+import assert from "assert";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { useTrigger } from "./useTrigger";
+
+describe("useTrigger", () => {
+   it("works", async () => {
+      let last = null;
+
+      const FComp = createFunctionalComponent(({ ...props }) => {
+         useTrigger(["test"], (test) => {
+            last = test;
+         });
+
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let test = store.ref("test", 1);
+
+      const component = await createTestRenderer(store, FComp);
+
+      component.toJSON();
+      assert.equal(last, null); //trigger did not fire because it didn't receive true as the last argument
+
+      await act(async () => {
+         test.set(2);
+      });
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+
+   it("fires immediately if the last argument is true", async () => {
+      let last = null;
+
+      const FComp = createFunctionalComponent(({ ...props }) => {
+         useTrigger(
+            ["test"],
+            (test) => {
+               last = test;
+            },
+            true,
+         );
+
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      let store = new Store();
+      let test = store.ref("test", 1);
+
+      const component = await createTestRenderer(store, FComp);
+
+      component.toJSON();
+      assert.equal(last, 1);
+
+      await act(async () => {
+         test.set(2);
+      });
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+
+   it("accepts refs as arguments", async () => {
+      let last = null;
+
+      let store = new Store();
+      let test = store.ref("test", 1);
+
+      const FComp = createFunctionalComponent(({ ...props }) => {
+         useTrigger(
+            [test],
+            (test) => {
+               last = test;
+            },
+            true,
+         );
+
+         return (
+            <cx>
+               <div />
+            </cx>
+         );
+      });
+
+      const component = await createTestRenderer(store, FComp);
+
+      component.toJSON();
+      assert.equal(last, 1);
+
+      await act(async () => {
+         test.set(2);
+      });
+      component.toJSON();
+      assert.equal(last, 2);
+   });
+});
diff --git a/packages/cx/src/hooks/useTrigger.ts b/packages/cx/src/hooks/useTrigger.ts
new file mode 100644
index 000000000..39d35cceb
--- /dev/null
+++ b/packages/cx/src/hooks/useTrigger.ts
@@ -0,0 +1,26 @@
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { isArray } from "../util/isArray";
+import { computable, ComputableSelector } from "../data/computable";
+import { useStore } from "./store";
+
+export function addExploreCallback(callback: (...args: any[]) => any): () => void {
+   let instance = getCurrentInstance();
+   if (!instance.computables) instance.computables = [];
+   instance.computables.push(callback);
+   return () => {
+      if (instance.computables) {
+         instance.computables = instance.computables.filter((cb: unknown) => cb !== callback);
+      }
+   };
+}
+
+export function useTrigger(
+   args: ComputableSelector[],
+   callback: (...args: any[]) => void,
+   autoRun?: boolean,
+): () => void {
+   if (!isArray(args)) throw new Error("First argument to useTrigger should be an array.");
+   let store = useStore();
+   let selector = computable(...args, callback).memoize(!autoRun && store.getData());
+   return addExploreCallback(selector);
+}
diff --git a/packages/cx/src/index.js b/packages/cx/src/index.ts
similarity index 100%
rename from packages/cx/src/index.js
rename to packages/cx/src/index.ts
diff --git a/packages/cx/src/jsx-dev-runtime.ts b/packages/cx/src/jsx-dev-runtime.ts
new file mode 100644
index 000000000..1785fb0f3
--- /dev/null
+++ b/packages/cx/src/jsx-dev-runtime.ts
@@ -0,0 +1,4 @@
+import { jsx, jsxs } from "./jsx-runtime";
+
+export const jsxDEV = jsx;
+export const jsxsDEV = jsxs;
diff --git a/packages/cx/src/jsx-runtime.spec.tsx b/packages/cx/src/jsx-runtime.spec.tsx
new file mode 100644
index 000000000..47ab1a125
--- /dev/null
+++ b/packages/cx/src/jsx-runtime.spec.tsx
@@ -0,0 +1,431 @@
+import assert from "assert";
+import { Button } from "./widgets/Button";
+import { Widget, WidgetConfig } from "./ui/Widget";
+import { StringProp, NumberProp, BooleanProp } from "./core";
+
+// Minimal mock implementations to avoid side effects from importing real widgets
+
+interface TextFieldConfig extends WidgetConfig {
+   value?: StringProp;
+   placeholder?: StringProp;
+   disabled?: BooleanProp;
+   readOnly?: BooleanProp;
+   required?: BooleanProp;
+   minLength?: NumberProp;
+   maxLength?: NumberProp;
+   validationErrorText?: StringProp;
+}
+
+class TextField extends Widget<TextFieldConfig> {}
+
+interface NumberFieldConfig extends WidgetConfig {
+   value?: NumberProp;
+   placeholder?: StringProp;
+   minValue?: NumberProp;
+   maxValue?: NumberProp;
+   format?: StringProp;
+   disabled?: BooleanProp;
+   increment?: NumberProp;
+}
+
+class NumberField extends Widget<NumberFieldConfig> {}
+import { Checkbox } from "./widgets/form/Checkbox";
+import { bind } from "./ui/bind";
+import { expr } from "./ui/expr";
+import { createFunctionalComponent } from "./ui/createFunctionalComponent";
+
+/**
+ * These tests verify that widget props are correctly typed in JSX.
+ * Negative tests use @ts-expect-error to verify that incorrect types are rejected.
+ */
+
+describe("jsx-runtime type inference", () => {
+   describe("TextField", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <TextField
+                  value={bind("text")}
+                  placeholder="Enter text"
+                  disabled={false}
+                  readOnly={true}
+                  required={false}
+                  minLength={5}
+                  maxLength={100}
+               />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts binding for string props", () => {
+         const widget = (
+            <cx>
+               <TextField placeholder={bind("placeholder")} validationErrorText={bind("errorText")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts expressions for boolean props", () => {
+         const widget = (
+            <cx>
+               <TextField disabled={expr("{loading}")} readOnly={expr("{!editable}")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for placeholder (expects string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - placeholder should be StringProp, not a number */}
+               <TextField placeholder={123} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for minLength (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - minLength should be NumberProp, not a string */}
+               <TextField minLength="five" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for maxLength (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - maxLength should be NumberProp, not a string */}
+               <TextField maxLength="100" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for disabled (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - disabled should be BooleanProp, not a number */}
+               <TextField disabled={1} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for readOnly (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - readOnly should be BooleanProp, not a string */}
+               <TextField readOnly="true" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects non-existent properties", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - nonExistentProp does not exist on TextFieldConfig */}
+               <TextField nonExistentProp="value" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("NumberField", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <NumberField
+                  value={bind("amount")}
+                  placeholder="Enter amount"
+                  minValue={0}
+                  maxValue={1000}
+                  format="currency"
+                  disabled={false}
+               />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts bindings for number props", () => {
+         const widget = (
+            <cx>
+               <NumberField minValue={bind("minVal")} maxValue={bind("maxVal")} increment={bind("step")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for value (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - value should be NumberProp, not a literal string */}
+               <NumberField value="100" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for minValue (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - minValue should be NumberProp, not a string */}
+               <NumberField minValue="zero" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for maxValue (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - maxValue should be NumberProp, not a string */}
+               <NumberField maxValue="one thousand" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects boolean for increment (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - increment should be NumberProp, not a boolean */}
+               <NumberField increment={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for format (expects string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - format should be StringProp, not a number */}
+               <NumberField format={123} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("Button", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <Button text="Click me" disabled={false} pressed={true} icon="search" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts bindings for boolean props", () => {
+         const widget = (
+            <cx>
+               <Button disabled={bind("isLoading")} pressed={bind("isPressed")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts expressions for enabled prop", () => {
+         const widget = (
+            <cx>
+               <Button enabled={expr("!{isLoading}")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for disabled (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - disabled should be BooleanProp, not a string */}
+               <Button disabled="true" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for pressed (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - pressed should be BooleanProp, not a number */}
+               <Button pressed={1} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for icon (expects string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - icon should be StringProp, not a number */}
+               <Button icon={42} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects invalid type value", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - type should be "submit" | "button", not "reset" */}
+               <Button type="reset" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("Checkbox", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <Checkbox value={bind("checked")} text="Accept terms" disabled={false} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for value (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - value should be BooleanProp, not a string */}
+               <Checkbox value="checked" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for disabled (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - disabled should be BooleanProp, not a number */}
+               <Checkbox disabled={0} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("HtmlElement intrinsic elements", () => {
+      it("accepts correct prop types for div", () => {
+         const widget = (
+            <cx>
+               <div text="Hello" visible={true} class="container" style="padding: 10px" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts bindings for text prop", () => {
+         const widget = (
+            <cx>
+               <div text={bind("message")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts expressions for visible prop", () => {
+         const widget = (
+            <cx>
+               <div visible={expr("{showDiv}")} text="Conditional" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects boolean for text (expects string or number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - text should be StringProp | NumberProp, not a boolean */}
+               <div text={false} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for visible (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - visible should be BooleanProp, not a string */}
+               <div visible="true" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("Required props", () => {
+      interface RequiredPropsConfig {
+         title: string;
+         count: number;
+         optional?: boolean;
+      }
+
+      const ComponentWithRequiredProps = createFunctionalComponent<RequiredPropsConfig>(
+         ({ title, count, optional }) => (
+            <cx>
+               <div text={title} />
+               <div text={String(count)} />
+               {optional && <div text="optional shown" />}
+            </cx>
+         ),
+      );
+
+      it("accepts all required props provided", () => {
+         const widget = (
+            <cx>
+               <ComponentWithRequiredProps title="Hello" count={42} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts required props with optional prop", () => {
+         const widget = (
+            <cx>
+               <ComponentWithRequiredProps title="Hello" count={42} optional={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (title)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - title is required but missing */}
+               <ComponentWithRequiredProps count={42} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (count)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - count is required but missing */}
+               <ComponentWithRequiredProps title="Hello" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing all required props", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - title and count are required but missing */}
+               <ComponentWithRequiredProps optional={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+});
diff --git a/packages/cx/src/jsx-runtime.ts b/packages/cx/src/jsx-runtime.ts
new file mode 100644
index 000000000..d7f4588a6
--- /dev/null
+++ b/packages/cx/src/jsx-runtime.ts
@@ -0,0 +1,79 @@
+import type { ComponentClass, FunctionComponent, JSX as ReactJSX } from "react";
+import type { CxFunctionalComponent } from "./ui/createFunctionalComponent";
+import { Widget } from "./ui/Widget";
+import { isArray } from "./util/isArray";
+import { isString } from "./util/isString";
+import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
+import { ReactElementWrapper, ReactElementWrapperConfig } from "./widgets/ReactElementWrapper";
+
+export function jsx(typeName: any, props: any, key?: string): any {
+   if (isArray(typeName)) return typeName;
+
+   // if (isFunction(typeName) && isUndefined(props))
+   //    return createFunctionalComponent((config) => typeName(flattenProps(config)));
+
+   if (typeName.type || typeName.$type) return typeName;
+
+   if (props.children && isArray(props.children) && props.children.length == 0) props.children = null;
+
+   if (props.children && props.children.length == 1) props.children = props.children[0];
+
+   if (typeName == "cx") return props.children;
+
+   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) {
+      props.tag = typeName;
+      typeName = HtmlElement;
+   }
+   // React components (functions/classes without isComponentType and not CxJS functional components) should go through ReactElementWrapper
+   else if (typeof typeName === "function" && !typeName.isComponentType && !typeName.$isComponentFactory) {
+      props.componentType = typeName;
+      typeName = ReactElementWrapper;
+   }
+
+   return {
+      $type: typeName,
+      ...props,
+      jsxAttributes: props && Object.keys(props),
+   };
+}
+
+export const jsxs = jsx;
+
+type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
+
+type CxIntrinsicElements = {
+   [K in keyof ReactIntrinsicElements]: HtmlElementConfig<K>;
+};
+
+// Helper type to transform props for React components (but not CxJS functional components)
+// Uses a workaround to avoid TypeScript inference issues with conditional types in LibraryManagedAttributes
+// We use Omit to exclude componentType since it's added automatically by the jsx-runtime
+type TransformReactComponentProps<C, P> = [C] extends [CxFunctionalComponent<any>]
+   ? P // CxJS functional components already have proper types
+   : [C] extends [FunctionComponent<any>]
+     ? ReactElementWrapperConfig<P>
+     : [C] extends [ComponentClass<any>]
+       ? ReactElementWrapperConfig<P>
+       : P;
+
+export namespace JSX {
+   /**
+    * Base class for JSX element instances.
+    * All widgets must extend from Widget class or React.Component.
+    */
+   export type ElementClass = Widget<any> | React.Component<any, any>;
+
+   /**
+    * Intrinsic JSX elements (HTML-like tags).
+    * Supports HTML elements that map to HtmlElement widgets.
+    */
+   export interface IntrinsicElements extends CxIntrinsicElements {
+      cx: any;
+   }
+
+   /**
+    * Transform props for React function components used in CxJS JSX.
+    * Adds standard WidgetConfig properties and transforms React props to Prop<X>.
+    */
+   export type LibraryManagedAttributes<C, P> = TransformReactComponentProps<C, P>;
+}
diff --git a/packages/cx/src/locale/de-de.ts b/packages/cx/src/locale/de-de.ts
new file mode 100644
index 000000000..52aaadf2f
--- /dev/null
+++ b/packages/cx/src/locale/de-de.ts
@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "de-de";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Dieses Feld wird benötigt.",
+   validatingText: "Wird validiert...",
+   validationExceptionText:
+      "Bei der Eingabevalidierung ist ein Fehler aufgetreten. Überprüfen Sie das Log für weitere Details.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Wird geladen...",
+   queryErrorText: "Bei der Abfrage der gesuchten Daten ist ein Felhler aufgetreten.",
+   noResultsText: "Keine Ergebnisse gefunden.",
+   minQueryLengthMessageText: "Geben Sie mindestens {0} Zeichen ein.",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Wählen Sie {0:d} oder vorher.",
+   maxExclusiveErrorText: "Wählen Sie ein Datum vor dem {0:d}.",
+   minValueErrorText: "Wählen Sie {0:d} oder später.",
+   minExclusiveErrorText: "Wählen Sie ein Datum nach dem {0:d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Heute",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Ungültiges Datum eingegeben.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Geben Sie {0} oder weniger ein.",
+   maxExclusiveErrorText: "Geben Sie eine Zahl kleiner als {0} ein.",
+   minValueErrorText: "Geben Sie {0} oder mehr ein.",
+   minExclusiveErrorText: "Geben Sie eine Zahl größer als {0} ein.",
+   inputErrorText: "Ungültige Zahl eingegeben.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "Ungültige Eingabe.",
+   minLengthValidationErrorText: "Bitte tragen Sie noch {[{0}-{1}]} Zeichen ein.",
+   maxLengthValidationErrorText: "Benutzen Sie {0} oder weniger Zeichen.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Wird hochgeladen...",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Ja",
+   noText: "Nein",
+});
diff --git a/packages/cx/src/locale/en-us.ts b/packages/cx/src/locale/en-us.ts
new file mode 100644
index 000000000..3b4eb9745
--- /dev/null
+++ b/packages/cx/src/locale/en-us.ts
@@ -0,0 +1,75 @@
+import { Localization } from "../ui/Localization";
+
+const c = "en-us";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "This field is required.",
+   validatingText: "Validation is in progress...",
+   validationExceptionText: "Something went wrong during input validation. Check log for more details.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Loading...",
+   queryErrorText: "Error occurred while querying for lookup data.",
+   noResultsText: "No results found.",
+   minQueryLengthMessageText: "Type in at least {0} character(s).",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Select {0:d} or before.",
+   maxExclusiveErrorText: "Select a date before {0:d}.",
+   minValueErrorText: "Select {0:d} or later.",
+   minExclusiveErrorText: "Select a date after {0:d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Today",
+   startWithMonday: false,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Invalid date entered.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Enter {0} or less.",
+   maxExclusiveErrorText: "Enter a number less than {0}.",
+   minValueErrorText: "Enter {0} or more.",
+   minExclusiveErrorText: "Enter a number greater than {0}.",
+   inputErrorText: "Invalid number entered.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "The entered value is not valid.",
+   minLengthValidationErrorText: "Enter {[{0}-{1}]} more character(s).",
+   maxLengthValidationErrorText: "Use {0} characters or fewer.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Upload is in progress.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Yes",
+   noText: "No",
+});
diff --git a/packages/cx/src/locale/es-es.ts b/packages/cx/src/locale/es-es.ts
new file mode 100644
index 000000000..1091e9990
--- /dev/null
+++ b/packages/cx/src/locale/es-es.ts
@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "es-es";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Este campo es requerido.",
+   validatingText: "La validación está en progreso...",
+   validationExceptionText:
+      "Algo salió mal durante la validación de entrada. Revise el registro para más detalles.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Cargando...",
+   queryErrorText: "Se produjo un error al consultar los datos de búsqueda.",
+   noResultsText: "No se han encontrado resultados.",
+   minQueryLengthMessageText: "Escriba al menos {0} caracteres.",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Seleccione {0: d} o antes.",
+   maxExclusiveErrorText: "Seleccione una fecha antes {0:d}.",
+   minValueErrorText: "Seleccione {0: d} o posterior",
+   minExclusiveErrorText: "Seleccione una fecha después de {0: d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Hoy",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Fecha introducida no es válida.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Ingrese {0} o menos.",
+   maxExclusiveErrorText: "Ingrese un número menor que {0}.",
+   minValueErrorText: "Ingrese {0} o más.",
+   minExclusiveErrorText: "Ingrese un número mayor que {0}.",
+   inputErrorText: "Número inválido ingresado.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "El valor ingresado no es válido.",
+   minLengthValidationErrorText: "Ingrese {[{0} - {1}]} más caracteres.",
+   maxLengthValidationErrorText: "Use {0} caracteres o menos.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "La carga está en progreso.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Sí",
+   noText: "No",
+});
diff --git a/packages/cx/src/locale/fr-fr.ts b/packages/cx/src/locale/fr-fr.ts
new file mode 100644
index 000000000..73746399b
--- /dev/null
+++ b/packages/cx/src/locale/fr-fr.ts
@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "fr-fr";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Ce champ est requis.",
+   validatingText: "La validation est en cours ...",
+   validationExceptionText:
+      "Une erreur s'est produite lors de la validation des entrées. Consultez le journal pour plus de détails.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Chargement...",
+   queryErrorText: "Une erreur s'est produite lors de l'interrogation des données de recherche.",
+   noResultsText: "Aucun résultat trouvé.",
+   minQueryLengthMessageText: "Tapez au moins {0} caractère (s).",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Sélectionnez {0:d} ou avant.",
+   maxExclusiveErrorText: "Sélectionnez une date avant {0:d}.",
+   minValueErrorText: "Sélectionnez {0:d} ou plus tard.",
+   minExclusiveErrorText: "Sélectionnez une date après {0:d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Aujourd'hui",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Date invalide entrée.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Entrez {0} ou moins.",
+   maxExclusiveErrorText: "Entrez un nombre inférieur à {0}.",
+   minValueErrorText: "Entrez {0} ou plus.",
+   minExclusiveErrorText: "Entrez un nombre supérieur à {0}.",
+   inputErrorText: "Numéro invalide entré.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "La valeur entrée n'est pas valide.",
+   minLengthValidationErrorText: "Entrez {[{0} - {1}]} plus de caractères.",
+   maxLengthValidationErrorText: "Utilisez {0} caractères ou moins.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Le téléchargement est en cours.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Oui",
+   noText: "Non",
+});
diff --git a/packages/cx/src/locale/nl-nl.ts b/packages/cx/src/locale/nl-nl.ts
new file mode 100644
index 000000000..72c03f5a3
--- /dev/null
+++ b/packages/cx/src/locale/nl-nl.ts
@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "nl-nl";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Dit veld is verplicht.",
+   validatingText: "Validatie is bezig ...",
+   validationExceptionText:
+      "Er is een probleem opgetreden bij het valideren van de gegevens. Controleer het logboek voor meer details ",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Bezig met laden ...",
+   queryErrorText: "Er is een fout opgetreden bij het weergeven van gegevens.",
+   noResultsText: "Geen resultaten gevonden",
+   minQueryLengthMessageText: "Voer minimaal {0} tekens in.",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "De geselecteerde datum is later dan de laatst toegestane datum {0: d}",
+   maxExclusiveErrorText: "De geselecteerde datum moet vóór {0: d}",
+   minValueErrorText: "De geselecteerde datum is eerder dan {0: d}",
+   minExclusiveErrorText: "De geselecteerde datum moet later zijn dan {0: d}",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Vandaag",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Ongeldige datum.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Voer {0} of minder in.",
+   maxExclusiveErrorText: "Voer een nummer in dat kleiner is dan {0}.",
+   minValueErrorText: "Voer {0} of meer in.",
+   minExclusiveErrorText: "Voer een getal in dat groter is dan {0}.",
+   inputErrorText: "Ongeldig nummer.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "De ingevoerde waarde is ongeldig.",
+   minLengthValidationErrorText: "Vul {[{0} - {1}]} extra karakters in.",
+   maxLengthValidationErrorText: "Gebruik {0} tekens of minder.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Upload is bezig.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Ja",
+   noText: "Nee",
+});
diff --git a/packages/cx/src/locale/pt-pt.ts b/packages/cx/src/locale/pt-pt.ts
new file mode 100644
index 000000000..e0a481a43
--- /dev/null
+++ b/packages/cx/src/locale/pt-pt.ts
@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "pt-pt";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Este campo é obrigatório.",
+   validatingText: "A validação está em andamento ...",
+   validationExceptionText:
+      "Algo deu errado durante a validação de entrada. Verifique o log para mais detalhes.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Carregando...",
+   queryErrorText: "Ocorreu um erro ao consultar os dados de pesquisa.",
+   noResultsText: "Nenhum resultado encontrado.",
+   minQueryLengthMessageText: "Digite pelo menos {0} caractere(s).",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Selecione {0:d} ou antes.",
+   maxExclusiveErrorText: "Selecione uma data antes de {0:d}.",
+   minValueErrorText: "Selecione {0:d} ou posterior.",
+   minExclusiveErrorText: "Selecione uma data após {0:d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Hoje",
+   startWithMonday: false,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Data inválida inserida.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Digite {0} ou menos.",
+   maxExclusiveErrorText: "Digite um número menor que {0}.",
+   minValueErrorText: "Digite {0} ou mais.",
+   minExclusiveErrorText: "Digite um número maior que {0}.",
+   inputErrorText: "Número inválido digitado.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "O valor inserido não é válido.",
+   minLengthValidationErrorText: "Digite {[{0}-{1}]} mais caractere(s).",
+   maxLengthValidationErrorText: "Use {0} caracteres ou menos.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "O upload está em andamento.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Sim",
+   noText: "Não",
+});
diff --git a/packages/cx/src/locale/sr-latn-ba.ts b/packages/cx/src/locale/sr-latn-ba.ts
new file mode 100644
index 000000000..e578f4e1b
--- /dev/null
+++ b/packages/cx/src/locale/sr-latn-ba.ts
@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "sr-latn-ba";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Ovo polje je obavezno.",
+   validatingText: "Validacija je u toku...",
+   validationExceptionText:
+      "Došlo je do problema prilikom validacije podataka. Provjerite log za više detalja.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Učitavanje...",
+   queryErrorText: "Došlo je do greške kod pribavljanja podataka za prikaz.",
+   noResultsText: "Rezultati nisu pronađeni.",
+   minQueryLengthMessageText: "Unesite najmanje {0} karakter(a).",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Izabrani datum je kasniji od posljednjeg dozvoljenog datuma {0:d}",
+   maxExclusiveErrorText: "Izabrani datum bi trebao biti prije {0:d}",
+   minValueErrorText: "Izabrani datum je raniji od {0:d}",
+   minExclusiveErrorText: "Izabrani datum bi trebao biti kasniji od {0:d}",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Danas",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Neispravan datum.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Unesite {0} ili manje.",
+   maxExclusiveErrorText: "Unesite broj manji od {0}.",
+   minValueErrorText: "Unesite {0} ili više.",
+   minExclusiveErrorText: "Unesite broj veći od {0}.",
+   inputErrorText: "Neispravan broj.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "Unesena vrijednost nije validna.",
+   minLengthValidationErrorText: "Unesite {[{0}-{1}]} dodatnih karaktera.",
+   maxLengthValidationErrorText: "Koristite {0} karaktera ili manje.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Otpremanje je u toku.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Da",
+   noText: "Ne",
+});
diff --git a/packages/cx/src/svg/BoundedObject.d.ts b/packages/cx/src/svg/BoundedObject.d.ts
deleted file mode 100644
index 9cf6228db..000000000
--- a/packages/cx/src/svg/BoundedObject.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as Cx from '../core';
-//import {PureContainer} from '../ui/PureContainer';
-import {IRect} from './util/Rect';
-
-export interface BoundedObjectProps extends Cx.StyledContainerProps {
-   
-   /**
-    * Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge. 
-    * One aligns with the bottom/right edge. See Svg for more information.
-    */
-   anchors?: Cx.Prop<string | number | IRect>,
-   
-   /** Move boundaries specified by the offset. See Svg for more information. */
-   offset?: Cx.Prop<string | number | IRect>,
-
-   /** Apply margin to the given boundaries. See Svg for more information. */
-   margin?: Cx.Prop<string | number | IRect>,
-
-   /** Padding to be applied to the boundaries rectangle before passing to the children. */
-   padding?: Cx.Prop<string | number | IRect>,
-}
-
-export class BoundedObject extends Cx.Widget<BoundedObjectProps> {}
\ No newline at end of file
diff --git a/packages/cx/src/svg/BoundedObject.js b/packages/cx/src/svg/BoundedObject.js
deleted file mode 100644
index 0cbd65d3b..000000000
--- a/packages/cx/src/svg/BoundedObject.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {PureContainer} from '../ui/PureContainer';
-import {Rect} from './util/Rect';
-
-export class BoundedObject extends PureContainer {
-
-   declareData() {
-      return super.declareData({
-         anchors: undefined,
-         offset: undefined,
-         margin: undefined,
-         padding: undefined
-      }, ...arguments)
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(context, instance);
-      var {data} = instance;
-      data.anchors = Rect.convert(data.anchors);
-      data.offset = Rect.convert(data.offset);
-      data.margin = Rect.convertMargin(data.margin);
-      data.padding = Rect.convertMargin(data.padding);
-   }
-   
-   calculateBounds(context, instance) {
-      var {data} = instance;
-      return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-   }
-
-   prepareBounds(context, instance) {
-      var {data} = instance;
-      if (instance.shouldUpdate || !instance.cached.parentRect || !instance.cached.parentRect.isEqual(context.parentRect) || !data.bounds) {
-         if (!context.parentRect)
-            throw new Error('Parent bounds were not provided through the context.');
-         instance.parentRect = context.parentRect;
-         instance.cache('parentRect' , context.parentRect);
-         instance.markShouldUpdate(context);
-         data.bounds = this.calculateBounds(context, instance);
-         data.childrenBounds = Rect.add(data.bounds, data.padding);
-      }
-   }
-
-   prepare(context, instance) {
-      this.prepareBounds(context, instance);
-      context.push('parentRect', instance.data.childrenBounds);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop('parentRect');
-   }
-}
-
-BoundedObject.prototype.anchors = 0;
-BoundedObject.prototype.margin = 0;
-BoundedObject.prototype.offset = 0;
-BoundedObject.prototype.padding = 0;
-BoundedObject.prototype.isPureContainer = false;
-BoundedObject.prototype.styled = true;
-
diff --git a/packages/cx/src/svg/BoundedObject.ts b/packages/cx/src/svg/BoundedObject.ts
new file mode 100644
index 000000000..035917a41
--- /dev/null
+++ b/packages/cx/src/svg/BoundedObject.ts
@@ -0,0 +1,101 @@
+import { Instance } from "./../ui/Instance";
+import { StyledContainerConfig, ContainerBase } from "../ui/Container";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Prop } from "../ui/Prop";
+import { IRect, Rect } from "./util/Rect";
+
+/** Typed context interface for SVG/layout-related context properties */
+export interface SvgRenderingContext extends RenderingContext {
+   parentRect?: Rect;
+   inSvg?: boolean;
+   addClipRect?: (rect: Rect) => string;
+}
+
+export interface BoundedObjectConfig extends StyledContainerConfig {
+   /**
+    * Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge.
+    * One aligns with the bottom/right edge. See Svg for more information.
+    */
+   anchors?: Prop<string | number | IRect>;
+
+   /** Move boundaries specified by the offset. See Svg for more information. */
+   offset?: Prop<string | number | IRect>;
+
+   /** Apply margin to the given boundaries. See Svg for more information. */
+   margin?: Prop<string | number | IRect>;
+
+   /** Padding to be applied to the boundaries rectangle before passing to the children. */
+   padding?: Prop<string | number | IRect>;
+}
+
+export interface BoundedObjectInstance extends Instance {
+   parentRect?: any;
+}
+
+export class BoundedObject<
+   Config extends BoundedObjectConfig = BoundedObjectConfig,
+   InstanceType extends BoundedObjectInstance = BoundedObjectInstance,
+> extends ContainerBase<Config, InstanceType> {
+   declare anchors: any;
+   declare margin: any;
+   declare offset: any;
+   declare padding: any;
+
+   declareData(...args: any[]) {
+      return super.declareData(
+         {
+            anchors: undefined,
+            offset: undefined,
+            margin: undefined,
+            padding: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: InstanceType) {
+      super.prepareData(context, instance);
+      var { data } = instance;
+      data.anchors = Rect.convert(data.anchors);
+      data.offset = Rect.convert(data.offset);
+      data.margin = Rect.convertMargin(data.margin);
+      data.padding = Rect.convertMargin(data.padding);
+   }
+
+   calculateBounds(context: SvgRenderingContext, instance: InstanceType) {
+      var { data } = instance;
+      return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+   }
+
+   prepareBounds(context: SvgRenderingContext, instance: InstanceType) {
+      var { data } = instance;
+      if (
+         instance.shouldUpdate ||
+         !instance.cached.parentRect ||
+         !instance.cached.parentRect.isEqual(context.parentRect) ||
+         !data.bounds
+      ) {
+         if (!context.parentRect) throw new Error("Parent bounds were not provided through the context.");
+         instance.parentRect = context.parentRect;
+         instance.cache("parentRect", context.parentRect);
+         instance.markShouldUpdate(context);
+         data.bounds = this.calculateBounds(context, instance);
+         data.childrenBounds = Rect.add(data.bounds, data.padding);
+      }
+   }
+
+   prepare(context: SvgRenderingContext, instance: InstanceType) {
+      this.prepareBounds(context, instance);
+      context.push("parentRect", instance.data.childrenBounds);
+   }
+
+   prepareCleanup(context: SvgRenderingContext, instance: InstanceType) {
+      context.pop("parentRect");
+   }
+}
+
+BoundedObject.prototype.anchors = 0;
+BoundedObject.prototype.margin = 0;
+BoundedObject.prototype.offset = 0;
+BoundedObject.prototype.padding = 0;
+BoundedObject.prototype.styled = true;
diff --git a/packages/cx/src/svg/ClipRect.d.ts b/packages/cx/src/svg/ClipRect.d.ts
deleted file mode 100644
index 724498b6e..000000000
--- a/packages/cx/src/svg/ClipRect.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as Cx from '../core';
-import {BoundedObject, BoundedObjectProps} from './BoundedObject';
-
-// no new props defined in ClipRect, so inheriting BoundedObject directly
-export class ClipRect extends BoundedObject {}
\ No newline at end of file
diff --git a/packages/cx/src/svg/ClipRect.js b/packages/cx/src/svg/ClipRect.js
deleted file mode 100644
index 91dd204d6..000000000
--- a/packages/cx/src/svg/ClipRect.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {BoundedObject} from './BoundedObject';
-import {Rect} from './util/Rect';
-
-export class ClipRect extends BoundedObject {
-
-   prepareBounds(context, instance) {
-      super.prepareBounds(context, instance);
-      var {data} = instance;
-      data.clipId = context.addClipRect(data.bounds);
-   }
-
-   render(context, instance, key) {
-      var {data} = instance;
-      return <g key={key} clipPath={`url(#${data.clipId})`}>
-         {this.renderChildren(context, instance)}
-      </g>
-   }
-}
-
-ClipRect.prototype.anchors = '0 1 1 0';
-
-
diff --git a/packages/cx/src/svg/ClipRect.tsx b/packages/cx/src/svg/ClipRect.tsx
new file mode 100644
index 000000000..8ce5fe186
--- /dev/null
+++ b/packages/cx/src/svg/ClipRect.tsx
@@ -0,0 +1,29 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+
+export interface ClipRectConfig extends BoundedObjectConfig {}
+
+export class ClipRect extends BoundedObject {
+   constructor(config?: ClipRectConfig) {
+      super(config);
+   }
+
+   prepareBounds(context: RenderingContext, instance: Instance) {
+      super.prepareBounds(context, instance);
+      const { data } = instance;
+      data.clipId = context.addClipRect(data.bounds);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      const { data } = instance;
+      return (
+         <g key={key} clipPath={`url(#${data.clipId})`}>
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+ClipRect.prototype.anchors = "0 1 1 0";
diff --git a/packages/cx/src/svg/Ellipse.d.ts b/packages/cx/src/svg/Ellipse.d.ts
deleted file mode 100644
index bd9c74c4d..000000000
--- a/packages/cx/src/svg/Ellipse.d.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as Cx from '../core';
-import {TextualBoundedObject, TextualBoundedObjectProps} from './TextualBoundedObject';
-
-interface EllipseProps extends TextualBoundedObjectProps {
-   
-   /** 
-    * Index of the color in the default color palette. Setting this property will set 
-    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill 
-    * if they are not necessary. 
-    */
-   colorIndex?: Cx.NumberProp,
-
-   /** A color used to paint the box. */
-   fill?: Cx.StringProp,
-   
-   /** A color used to paint the outline of the box. */
-   stroke?: Cx.StringProp,
-
-   /** Base CSS class to be applied to the element. Defaults to `ellipse`. */
-   baseClass?: string
-
-}
-
-export class Ellipse extends Cx.Widget<EllipseProps> {}
\ No newline at end of file
diff --git a/packages/cx/src/svg/Ellipse.js b/packages/cx/src/svg/Ellipse.js
deleted file mode 100644
index 7f60be7fa..000000000
--- a/packages/cx/src/svg/Ellipse.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {TextualBoundedObject} from './TextualBoundedObject';
-
-export class Ellipse extends TextualBoundedObject {
-
-   declareData() {
-      super.declareData(...arguments, {
-         colorIndex: undefined,
-         fill: undefined,
-         stroke: undefined
-      })
-   }
-
-   render(context, instance, key) {
-      var {data} = instance;
-      var {bounds, colorIndex} = data;
-      if (!bounds.valid())
-         return false;
-      return <g key={key} className={data.classNames}>
-         <ellipse className={this.CSS.element(this.baseClass, 'rect', colorIndex!=null && 'color-'+colorIndex)}
-                  cx={(bounds.l+bounds.r)/2}
-                  cy={(bounds.t+bounds.b)/2}
-                  rx={bounds.width()/2}
-                  ry={bounds.height()/2}
-                  style={data.style}
-                  fill={data.fill}
-                  stroke={data.stroke}
-         />
-         {this.renderChildren(context, instance)}
-      </g>;
-   }
-}
-
-Ellipse.prototype.baseClass = 'ellipse';
-Ellipse.prototype.anchors = '0 1 1 0';
-
-Widget.alias('ellipse', Ellipse);
\ No newline at end of file
diff --git a/packages/cx/src/svg/Ellipse.tsx b/packages/cx/src/svg/Ellipse.tsx
new file mode 100644
index 000000000..62e7850f6
--- /dev/null
+++ b/packages/cx/src/svg/Ellipse.tsx
@@ -0,0 +1,69 @@
+/**@jsxImportSource react */
+import { Instance } from '../ui/Instance';
+import { RenderingContext } from '../ui/RenderingContext';
+import { Widget } from '../ui/Widget';
+import { NumberProp, StringProp } from '../ui/Prop';
+import { TextualBoundedObject, TextualBoundedObjectConfig } from './TextualBoundedObject';
+
+export interface EllipseConfig extends TextualBoundedObjectConfig {
+   /**
+    * Index of the color in the default color palette. Setting this property will set
+    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill
+    * if they are not necessary.
+    */
+   colorIndex?: NumberProp;
+
+   /** A color used to paint the box. */
+   fill?: StringProp;
+
+   /** A color used to paint the outline of the box. */
+   stroke?: StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `ellipse`. */
+   baseClass?: string;
+}
+
+export class Ellipse extends TextualBoundedObject {
+   declare baseClass: string;
+   declare colorIndex?: NumberProp;
+   declare fill?: StringProp;
+   declare stroke?: StringProp;
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         colorIndex: undefined,
+         fill: undefined,
+         stroke: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      const { data } = instance;
+      const { bounds, colorIndex } = data;
+      if (!bounds.valid()) return false;
+      return (
+         <g key={key} className={data.classNames}>
+            <ellipse
+               className={this.CSS.element(
+                  this.baseClass,
+                  'rect',
+                  colorIndex != null && 'color-' + colorIndex
+               )}
+               cx={(bounds.l + bounds.r) / 2}
+               cy={(bounds.t + bounds.b) / 2}
+               rx={bounds.width() / 2}
+               ry={bounds.height() / 2}
+               style={data.style}
+               fill={data.fill}
+               stroke={data.stroke}
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+Ellipse.prototype.baseClass = 'ellipse';
+Ellipse.prototype.anchors = '0 1 1 0';
+
+Widget.alias('ellipse', Ellipse);
\ No newline at end of file
diff --git a/packages/cx/src/svg/Line.d.ts b/packages/cx/src/svg/Line.d.ts
deleted file mode 100644
index 10f008d9e..000000000
--- a/packages/cx/src/svg/Line.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as Cx from '../core';
-import {TextualBoundedObject, TextualBoundedObjectProps} from './TextualBoundedObject';
-
-interface LineProps extends TextualBoundedObjectProps {
-   
-   /** 
-    * Index of the color in the default color palette. Setting this property will set 
-    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill 
-    * if they are not necessary. 
-    */
-   colorIndex?: Cx.NumberProp,
-   
-   /** A color used to paint the outline of the box. */
-   stroke?: Cx.StringProp,
-
-   /** Base CSS class to be applied to the element. Defaults to `line`. */
-   baseClass?: string
-
-}
-
-export class Line extends Cx.Widget<LineProps> {}
\ No newline at end of file
diff --git a/packages/cx/src/svg/Line.js b/packages/cx/src/svg/Line.js
deleted file mode 100644
index ba2d86e44..000000000
--- a/packages/cx/src/svg/Line.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {TextualBoundedObject} from './TextualBoundedObject';
-
-export class Line extends TextualBoundedObject {
-
-   declareData() {
-      super.declareData(...arguments, {
-         colorIndex: undefined,
-         stroke: undefined
-      })
-   }
-
-   render(context, instance, key) {
-      var {data, colorIndex} = instance;
-      var {bounds} = data;
-      return <g key={key} className={data.classNames}>
-         <line className={this.CSS.element(this.baseClass, 'line', colorIndex!=null && 'color-'+colorIndex)}
-               x1={bounds.l}
-               y1={bounds.t}
-               x2={bounds.r}
-               y2={bounds.b}
-               style={data.style}
-               stroke={data.stroke}
-         />
-         {this.renderChildren(context, instance)}
-      </g>;
-   }
-}
-
-Line.prototype.anchors = '0 1 1 0';
-Line.prototype.baseClass = 'line';
-
-Widget.alias('line', Line);
\ No newline at end of file
diff --git a/packages/cx/src/svg/Line.tsx b/packages/cx/src/svg/Line.tsx
new file mode 100644
index 000000000..f2d7f5196
--- /dev/null
+++ b/packages/cx/src/svg/Line.tsx
@@ -0,0 +1,58 @@
+/** @jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Widget } from "../ui/Widget";
+import { NumberProp, StringProp } from "../ui/Prop";
+import { TextualBoundedObject, TextualBoundedObjectConfig } from "./TextualBoundedObject";
+
+export interface LineConfig extends TextualBoundedObjectConfig {
+   /**
+    * Index of the color in the default color palette. Setting this property will set
+    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill
+    * if they are not necessary.
+    */
+   colorIndex?: NumberProp;
+
+   /** A color used to paint the outline of the box. */
+   stroke?: StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `line`. */
+   baseClass?: string;
+}
+
+export class Line extends TextualBoundedObject {
+   declare baseClass: string;
+   declare colorIndex?: NumberProp;
+   declare stroke?: StringProp;
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         colorIndex: undefined,
+         stroke: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance & { colorIndex: number }, key: string) {
+      const { data, colorIndex } = instance;
+      const { bounds } = data;
+      return (
+         <g key={key} className={data.classNames}>
+            <line
+               className={this.CSS.element(this.baseClass, "line", colorIndex != null && "color-" + colorIndex)}
+               x1={bounds.l}
+               y1={bounds.t}
+               x2={bounds.r}
+               y2={bounds.b}
+               style={data.style}
+               stroke={data.stroke}
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+Line.prototype.anchors = "0 1 1 0";
+Line.prototype.baseClass = "line";
+
+Widget.alias("line", Line);
diff --git a/packages/cx/src/svg/NonOverlappingRect.d.ts b/packages/cx/src/svg/NonOverlappingRect.d.ts
deleted file mode 100644
index e1a58a7b6..000000000
--- a/packages/cx/src/svg/NonOverlappingRect.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "./BoundedObject";
-
-// no new props defined in NonOverlappingRect, so inheriting BoundedObject directly
-export class NonOverlappingRect extends BoundedObject {}
diff --git a/packages/cx/src/svg/NonOverlappingRect.js b/packages/cx/src/svg/NonOverlappingRect.js
deleted file mode 100644
index a2c820caf..000000000
--- a/packages/cx/src/svg/NonOverlappingRect.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { BoundedObject } from "./BoundedObject";
-
-export class NonOverlappingRect extends BoundedObject {
-   prepare(context, instance) {
-      super.prepare(context, instance); //calculate bounds
-      if (!context.addNonOverlappingBoundingObject)
-         throw new Error("Components of type NonOverlappingRect can appaear only within a NonOverlappingRectGroup.");
-      context.addNonOverlappingBoundingObject(instance);
-   }
-
-   render(context, instance, key) {
-      if (instance.overlapping) return null;
-      return super.render(context, instance, key);
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/svg/NonOverlappingRect.ts b/packages/cx/src/svg/NonOverlappingRect.ts
new file mode 100644
index 000000000..1739814be
--- /dev/null
+++ b/packages/cx/src/svg/NonOverlappingRect.ts
@@ -0,0 +1,26 @@
+import { BoundedObject, BoundedObjectInstance, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+
+export interface NonOverlappingRectConfig extends BoundedObjectConfig {}
+
+export interface NonOverlappingRectInstance extends BoundedObjectInstance {
+   overlapping?: boolean;
+}
+
+export class NonOverlappingRect extends BoundedObject<NonOverlappingRectConfig, NonOverlappingRectInstance> {
+   constructor(config?: NonOverlappingRectConfig) {
+      super(config);
+   }
+
+   prepare(context: RenderingContext, instance: NonOverlappingRectInstance) {
+      super.prepare(context, instance); //calculate bounds
+      if (!context.addNonOverlappingBoundingObject)
+         throw new Error("Components of type NonOverlappingRect can appear only within a NonOverlappingRectGroup.");
+      context.addNonOverlappingBoundingObject(instance);
+   }
+
+   render(context: RenderingContext, instance: NonOverlappingRectInstance, key: string) {
+      if (instance.overlapping) return null;
+      return super.render(context, instance, key);
+   }
+}
diff --git a/packages/cx/src/svg/NonOverlappingRectGroup.d.ts b/packages/cx/src/svg/NonOverlappingRectGroup.d.ts
deleted file mode 100644
index 4906b6324..000000000
--- a/packages/cx/src/svg/NonOverlappingRectGroup.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PureContainer } from "./../ui/PureContainer";
-
-export class NonOverlappingRectGroup extends PureContainer {}
diff --git a/packages/cx/src/svg/NonOverlappingRectGroup.js b/packages/cx/src/svg/NonOverlappingRectGroup.js
deleted file mode 100644
index c649293b8..000000000
--- a/packages/cx/src/svg/NonOverlappingRectGroup.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { PureContainer } from "../ui/PureContainer";
-
-export class NonOverlappingRectGroup extends PureContainer {
-   prepare(context, instance) {
-      instance.nonOverlappingObjects = [];
-      context.push("addNonOverlappingBoundingObject", objectInstance => {
-         instance.nonOverlappingObjects.push(objectInstance);
-      });
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("addNonOverlappingBoundingObject");
-      instance.nonOverlappingObjects.sort((a, b) => (a.data.bounds.r - b.data.bounds.r));
-      let visibleObjects = [];
-      for (let item of instance.nonOverlappingObjects) {
-         let overlapping = false;
-         let at = visibleObjects.length - 1;
-         while (at >= 0 && visibleObjects[at].data.bounds.r > item.data.bounds.l) {
-            let r1 = visibleObjects[at].data.bounds;
-            let r2 = item.data.bounds;
-            let width = Math.min(r1.r, r2.r) - Math.max(r1.l, r2.l);
-            let height = Math.min(r1.b, r2.b) - Math.max(r1.t, r2.t);
-            if (width > 0 && height > 0) {
-               overlapping = true;
-               break;
-            }
-            at--;
-         }
-         if (item.overlapping !== overlapping) {
-            item.overlapping = overlapping;
-            item.markShouldUpdate(context);
-         }
-         if (!overlapping)
-            visibleObjects.push(item);
-      }
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/svg/NonOverlappingRectGroup.ts b/packages/cx/src/svg/NonOverlappingRectGroup.ts
new file mode 100644
index 000000000..3df6b18ec
--- /dev/null
+++ b/packages/cx/src/svg/NonOverlappingRectGroup.ts
@@ -0,0 +1,49 @@
+import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { NonOverlappingRectInstance } from "./NonOverlappingRect";
+
+export interface NonOverlappingRectGroupConfig extends PureContainerConfig {}
+
+interface NonOverlappingRectGroupInstance extends Instance {
+   nonOverlappingObjects: NonOverlappingRectInstance[];
+}
+
+export class NonOverlappingRectGroup extends PureContainerBase<NonOverlappingRectGroupConfig, NonOverlappingRectGroupInstance> {
+   constructor(config?: NonOverlappingRectGroupConfig) {
+      super(config);
+   }
+
+   prepare(context: RenderingContext, instance: NonOverlappingRectGroupInstance) {
+      instance.nonOverlappingObjects = [];
+      context.push("addNonOverlappingBoundingObject", (objectInstance: NonOverlappingRectInstance) => {
+         instance.nonOverlappingObjects.push(objectInstance);
+      });
+   }
+
+   prepareCleanup(context: RenderingContext, instance: NonOverlappingRectGroupInstance) {
+      context.pop("addNonOverlappingBoundingObject");
+      instance.nonOverlappingObjects.sort((a, b) => a.data.bounds.r - b.data.bounds.r);
+      let visibleObjects = [];
+      for (let item of instance.nonOverlappingObjects) {
+         let overlapping = false;
+         let at = visibleObjects.length - 1;
+         while (at >= 0 && visibleObjects[at].data.bounds.r > item.data.bounds.l) {
+            let r1 = visibleObjects[at].data.bounds;
+            let r2 = item.data.bounds;
+            let width = Math.min(r1.r, r2.r) - Math.max(r1.l, r2.l);
+            let height = Math.min(r1.b, r2.b) - Math.max(r1.t, r2.t);
+            if (width > 0 && height > 0) {
+               overlapping = true;
+               break;
+            }
+            at--;
+         }
+         if (item.overlapping !== overlapping) {
+            item.overlapping = overlapping;
+            item.markShouldUpdate(context);
+         }
+         if (!overlapping) visibleObjects.push(item);
+      }
+   }
+}
diff --git a/packages/cx/src/svg/Rectangle.d.ts b/packages/cx/src/svg/Rectangle.d.ts
deleted file mode 100644
index dc3441187..000000000
--- a/packages/cx/src/svg/Rectangle.d.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as Cx from '../core';
-import {TextualBoundedObject, TextualBoundedObjectProps} from './TextualBoundedObject';
-
-interface RectangleProps extends TextualBoundedObjectProps {
-
-   /**
-    * Index of the color in the default color palette. Setting this property will set
-    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill
-    * if they are not necessary.
-    */
-   colorIndex?: Cx.NumberProp,
-
-   /** A color used to paint the box. */
-   fill?: Cx.StringProp,
-
-   /** A color used to paint the outline of the box. */
-   stroke?: Cx.StringProp,
-
-   /** Base CSS class to be applied to the element. Defaults to `rectangle`. */
-   baseClass?: string;
-
-   /**
-    * The horizontal corner radius of the rect. Defaults to ry if it is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   rx?: Cx.StringProp | Cx.NumberProp;
-
-   /**
-    * The vertical corner radius of the rect. Defaults to rx if it is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   ry?: Cx.StringProp | Cx.NumberProp;
-}
-
-export class Rectangle extends Cx.Widget<RectangleProps> {}
\ No newline at end of file
diff --git a/packages/cx/src/svg/Rectangle.js b/packages/cx/src/svg/Rectangle.js
deleted file mode 100644
index 1fedca6a2..000000000
--- a/packages/cx/src/svg/Rectangle.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {TextualBoundedObject} from './TextualBoundedObject';
-
-export class Rectangle extends TextualBoundedObject {
-   declareData() {
-      super.declareData(...arguments, {
-         colorIndex: undefined,
-         fill: undefined,
-         stroke: undefined,
-         rx: undefined,
-         ry: undefined,
-      })
-   }
-
-   render(context, instance, key) {
-      var {data} = instance;
-      var {bounds, colorIndex} = data;
-      if (!bounds.valid())
-         return false;
-      return <g key={key} className={data.classNames}>
-         <rect className={this.CSS.element(this.baseClass, 'rect', colorIndex!=null && 'color-'+colorIndex)}
-               x={bounds.l}
-               y={bounds.t}
-               width={bounds.width()}
-               height={bounds.height()}
-               style={data.style}
-               fill={data.fill}
-               stroke={data.stroke}
-               rx={data.rx}
-               ry={data.ry}
-         />
-         {this.renderChildren(context, instance)}
-      </g>;
-   }
-}
-
-Rectangle.prototype.baseClass = 'rectangle';
-Rectangle.prototype.anchors = '0 1 1 0';
-Rectangle.prototype.rx = undefined;
-Rectangle.prototype.ry = undefined;
-
-Widget.alias('rectangle', Rectangle);
\ No newline at end of file
diff --git a/packages/cx/src/svg/Rectangle.tsx b/packages/cx/src/svg/Rectangle.tsx
new file mode 100644
index 000000000..2c4fc104b
--- /dev/null
+++ b/packages/cx/src/svg/Rectangle.tsx
@@ -0,0 +1,91 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from '../ui/Widget';
+import { TextualBoundedObject, TextualBoundedObjectConfig } from './TextualBoundedObject';
+import { RenderingContext } from '../ui/RenderingContext';
+import { Instance } from '../ui/Instance';
+import { NumberProp, StringProp } from '../ui/Prop';
+
+export interface RectangleConfig extends TextualBoundedObjectConfig {
+   /**
+    * Index of the color in the default color palette. Setting this property will set
+    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill
+    * if they are not necessary.
+    */
+   colorIndex?: NumberProp;
+
+   /** A color used to paint the box. */
+   fill?: StringProp;
+
+   /** A color used to paint the outline of the box. */
+   stroke?: StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `rectangle`. */
+   baseClass?: string;
+
+   /**
+    * The horizontal corner radius of the rect. Defaults to ry if it is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   rx?: StringProp | NumberProp;
+
+   /**
+    * The vertical corner radius of the rect. Defaults to rx if it is specified.
+    * Value type: <length>|<percentage>;
+    * If unit is not specified, it defaults to `px`.
+    */
+   ry?: StringProp | NumberProp;
+}
+
+export class Rectangle extends TextualBoundedObject {
+   declare baseClass: string;
+   declare colorIndex?: NumberProp;
+   declare fill?: StringProp;
+   declare stroke?: StringProp;
+   declare rx?: StringProp | NumberProp;
+   declare ry?: StringProp | NumberProp;
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         colorIndex: undefined,
+         fill: undefined,
+         stroke: undefined,
+         rx: undefined,
+         ry: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      const { data } = instance;
+      const { bounds, colorIndex } = data;
+      if (!bounds.valid()) return false;
+      return (
+         <g key={key} className={data.classNames}>
+            <rect
+               className={this.CSS.element(
+                  this.baseClass,
+                  'rect',
+                  colorIndex != null && 'color-' + colorIndex
+               )}
+               x={bounds.l}
+               y={bounds.t}
+               width={bounds.width()}
+               height={bounds.height()}
+               style={data.style}
+               fill={data.fill}
+               stroke={data.stroke}
+               rx={data.rx}
+               ry={data.ry}
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+Rectangle.prototype.baseClass = 'rectangle';
+Rectangle.prototype.anchors = '0 1 1 0';
+Rectangle.prototype.rx = undefined;
+Rectangle.prototype.ry = undefined;
+
+Widget.alias('rectangle', Rectangle);
\ No newline at end of file
diff --git a/packages/cx/src/svg/Svg.d.ts b/packages/cx/src/svg/Svg.d.ts
deleted file mode 100644
index b1f7aaa87..000000000
--- a/packages/cx/src/svg/Svg.d.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Instance } from "./../ui/Instance.d";
-import * as Cx from "../core";
-import { BoundedObjectProps } from "./BoundedObject";
-
-interface SvgProps extends BoundedObjectProps {
-   /** Set to `true` to automatically calculate width based on the measured height and `aspectRatio`. */
-   autoWidth?: boolean;
-
-   /** Set to `true` to automatically calculate height based on the measured width and `aspectRatio`. */
-   autoHeight?: boolean;
-
-   /**
-    * Aspect ratio of the the SVG element. Default value is `1.618`.
-    * This value doesn't have any effect unless `autoWidth` or `autoHeight` is set.
-    */
-   aspectRatio?: number;
-
-   /** Base CSS class to be applied to the element. Defaults to `svg`. */
-   baseClass?: string;
-
-   onMouseDown?(e: MouseEvent, instance: Instance);
-   onMouseUp?(e: MouseEvent, instance: Instance);
-   onMouseMove?(e: MouseEvent, instance: Instance);
-   onTouchStart?(e: TouchEvent, instance: Instance);
-   onTouchMove?(e: TouchEvent, instance: Instance);
-   onTouchEnd?(e: TouchEvent, instance: Instance);
-   onWheel?(e: WheelEvent, instance: Instance);
-   onWheelActive?(e: WheelEvent, instance: Instance);
-}
-
-// no new props defined in ClipRect, so inheriting BoundedObject directly
-export class Svg extends Cx.Widget<SvgProps> {}
diff --git a/packages/cx/src/svg/Svg.js b/packages/cx/src/svg/Svg.js
deleted file mode 100644
index bcd70f466..000000000
--- a/packages/cx/src/svg/Svg.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { BoundedObject } from "./BoundedObject";
-import { Rect } from "./util/Rect";
-import { ResizeManager } from "../ui/ResizeManager";
-import { addEventListenerWithOptions } from "../util/addEventListenerWithOptions";
-
-export class Svg extends BoundedObject {
-   initState(context, instance) {
-      var size = {
-         width: 0,
-         height: 0,
-      };
-      instance.state = { size };
-   }
-
-   explore(context, instance) {
-      context.push("inSvg", true);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("inSvg");
-   }
-
-   prepare(context, instance) {
-      var size = instance.state.size;
-
-      context.parentRect = new Rect({
-         l: 0,
-         t: 0,
-         r: size.width,
-         b: size.height,
-      });
-
-      instance.clipRects = {};
-      instance.clipRectId = 0;
-      context.push("addClipRect", (rect) => {
-         var id = `clip-${instance.id}-${++instance.clipRectId}`;
-         instance.clipRects[id] = rect;
-         return id;
-      });
-      context.push("inSvg", true);
-      super.prepare(context, instance);
-   }
-
-   prepareCleanup(context, instance) {
-      super.prepareCleanup(context, instance);
-      context.pop("addClipRect");
-      context.pop("inSvg");
-   }
-
-   render(context, instance, key) {
-      let eventHandlers = instance.getJsxEventProps();
-      if (eventHandlers) {
-         delete eventHandlers["onWheelActive"];
-      }
-      return (
-         <SvgComponent
-            key={key}
-            instance={instance}
-            data={instance.data}
-            options={context.options}
-            size={instance.state.size}
-            eventHandlers={eventHandlers}
-         >
-            {this.renderChildren(context, instance)}
-         </SvgComponent>
-      );
-   }
-}
-
-Svg.prototype.anchors = "0 1 1 0";
-Svg.prototype.baseClass = "svg";
-Svg.prototype.autoWidth = false;
-Svg.prototype.autoHeight = false;
-Svg.prototype.aspectRatio = 1.618;
-
-function sameSize(a, b) {
-   if (!a || !b) return false;
-
-   return a.width == b.width && a.height == b.height;
-}
-
-class SvgComponent extends VDOM.Component {
-   render() {
-      var { instance, data, size, children, eventHandlers } = this.props;
-      var { widget } = instance;
-
-      var defs = [];
-      for (var k in instance.clipRects) {
-         let cr = instance.clipRects[k];
-         defs.push(
-            <clipPath key={k} id={k}>
-               <rect x={cr.l} y={cr.t} width={Math.max(0, cr.width())} height={Math.max(0, cr.height())} />
-            </clipPath>
-         );
-      }
-
-      let style = data.style;
-      if (widget.autoHeight)
-         style = {
-            ...style,
-            height: `${size.height}px`,
-         };
-      if (widget.autoWidth)
-         style = {
-            ...style,
-            width: `${size.width}px`,
-         };
-
-      //parent div is needed because clientWidth doesn't work on the svg element in FF
-
-      return (
-         <div
-            ref={(el) => {
-               this.el = el;
-            }}
-            className={data.classNames}
-            style={style}
-            {...eventHandlers}
-         >
-            {size.width > 0 && size.height > 0 && (
-               <svg>
-                  <defs>{defs}</defs>
-                  {children}
-               </svg>
-            )}
-         </div>
-      );
-   }
-
-   onResize() {
-      let { instance } = this.props;
-      let { widget } = this.props.instance;
-
-      let size = {
-         width: this.el.clientWidth,
-         height: this.el.clientHeight,
-      };
-
-      if (widget.autoHeight) size.height = size.width / widget.aspectRatio;
-
-      if (widget.autoWidth) size.width = size.height * widget.aspectRatio;
-
-      if (!sameSize(instance.state.size, size))
-         instance.setState({
-            size: size,
-         });
-   }
-
-   componentDidMount() {
-      this.offResize = ResizeManager.trackElement(this.el, this.onResize.bind(this));
-      this.onResize();
-      if (this.props.instance.widget.onWheelActive) {
-         this.offWheelActive = addEventListenerWithOptions(
-            this.el,
-            "wheel",
-            (event) => {
-               let { instance } = this.props;
-               instance.invoke("onWheelActive", event, instance);
-            },
-            { passive: false }
-         );
-      }
-   }
-
-   componentDidUpdate() {
-      this.onResize();
-   }
-
-   componentWillUnmount() {
-      this.offResize && this.offResize();
-      this.offWheelActive && this.offWheelActive();
-   }
-}
-
-Widget.alias("svg", Svg);
diff --git a/packages/cx/src/svg/Svg.scss b/packages/cx/src/svg/Svg.scss
index b68064b87..dbf69b68c 100644
--- a/packages/cx/src/svg/Svg.scss
+++ b/packages/cx/src/svg/Svg.scss
@@ -1,12 +1,13 @@
+@use "sass:map";
 
 @mixin cx-svg(
    $name: 'svg',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       box-sizing: border-box;
diff --git a/packages/cx/src/svg/Svg.tsx b/packages/cx/src/svg/Svg.tsx
new file mode 100644
index 000000000..6de6dd1e0
--- /dev/null
+++ b/packages/cx/src/svg/Svg.tsx
@@ -0,0 +1,241 @@
+/** @jsxImportSource react */
+import { RenderingContext } from "../ui/RenderingContext";
+import { ResizeManager } from "../ui/ResizeManager";
+import { VDOM, Widget } from "../ui/Widget";
+import { addEventListenerWithOptions } from "../util/addEventListenerWithOptions";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance, SvgRenderingContext } from "./BoundedObject";
+import { Rect } from "./util/Rect";
+
+interface SvgInstance extends BoundedObjectInstance {
+   state: {
+      size: {
+         width: number;
+         height: number;
+      };
+   };
+   clipRects?: Record<string, Rect>;
+   clipRectId?: number;
+}
+
+export interface SvgConfig extends BoundedObjectConfig {
+   /** Set to `true` to automatically calculate width based on the measured height and `aspectRatio`. */
+   autoWidth?: boolean;
+
+   /** Set to `true` to automatically calculate height based on the measured width and `aspectRatio`. */
+   autoHeight?: boolean;
+
+   /**
+    * Aspect ratio of the the SVG element. Default value is `1.618`.
+    * This value doesn't have any effect unless `autoWidth` or `autoHeight` is set.
+    */
+   aspectRatio?: number;
+
+   /** Base CSS class to be applied to the element. Defaults to `svg`. */
+   baseClass?: string;
+
+   onMouseDown?(e: MouseEvent, instance: SvgInstance): void;
+   onMouseUp?(e: MouseEvent, instance: SvgInstance): void;
+   onMouseMove?(e: MouseEvent, instance: SvgInstance): void;
+   onTouchStart?(e: TouchEvent, instance: SvgInstance): void;
+   onTouchMove?(e: TouchEvent, instance: SvgInstance): void;
+   onTouchEnd?(e: TouchEvent, instance: SvgInstance): void;
+   onWheel?(e: WheelEvent, instance: SvgInstance): void;
+   onWheelActive?(e: WheelEvent, instance: SvgInstance): void;
+}
+
+export class Svg extends BoundedObject<SvgConfig, SvgInstance> {
+   declare autoWidth?: boolean;
+   declare autoHeight?: boolean;
+   declare aspectRatio?: number;
+   declare onWheelActive?: (e: WheelEvent, instance: SvgInstance) => void;
+
+   constructor(config?: SvgConfig) {
+      super(config);
+   }
+
+   initState(context: RenderingContext, instance: SvgInstance) {
+      const size = {
+         width: 0,
+         height: 0,
+      };
+      instance.state = { size };
+   }
+
+   explore(context: SvgRenderingContext, instance: SvgInstance) {
+      context.push("inSvg", true);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: SvgRenderingContext, instance: SvgInstance) {
+      context.pop("inSvg");
+   }
+
+   prepare(context: SvgRenderingContext, instance: SvgInstance) {
+      const size = instance.state.size;
+
+      context.parentRect = new Rect({
+         l: 0,
+         t: 0,
+         r: size.width,
+         b: size.height,
+      });
+
+      instance.clipRects = {};
+      instance.clipRectId = 0;
+      context.push("addClipRect", (rect: Rect) => {
+         const id = `clip-${instance.id}-${++instance.clipRectId!}`;
+         instance.clipRects![id] = rect;
+         return id;
+      });
+      context.push("inSvg", true);
+      super.prepare(context, instance);
+   }
+
+   prepareCleanup(context: SvgRenderingContext, instance: SvgInstance) {
+      super.prepareCleanup(context, instance);
+      context.pop("addClipRect");
+      context.pop("inSvg");
+   }
+
+   render(context: RenderingContext, instance: SvgInstance, key: string) {
+      let eventHandlers = instance.getJsxEventProps();
+      if (eventHandlers) {
+         delete eventHandlers["onWheelActive"];
+      }
+      return (
+         <SvgComponent
+            key={key}
+            instance={instance}
+            data={instance.data}
+            options={context.options}
+            size={instance.state.size}
+            eventHandlers={eventHandlers}
+         >
+            {this.renderChildren(context, instance)}
+         </SvgComponent>
+      );
+   }
+}
+
+Svg.prototype.anchors = "0 1 1 0";
+Svg.prototype.baseClass = "svg";
+Svg.prototype.autoWidth = false;
+Svg.prototype.autoHeight = false;
+Svg.prototype.aspectRatio = 1.618;
+
+function sameSize(a: { width: number; height: number } | null, b: { width: number; height: number } | null): boolean {
+   if (!a || !b) return false;
+
+   return a.width == b.width && a.height == b.height;
+}
+
+interface SvgComponentProps {
+   instance: SvgInstance;
+   data: any;
+   size: { width: number; height: number };
+   children: any;
+   eventHandlers?: any;
+   options?: any;
+}
+
+class SvgComponent extends VDOM.Component<SvgComponentProps> {
+   el?: HTMLDivElement;
+   offResize?: () => void;
+   offWheelActive?: () => void;
+
+   render() {
+      const { instance, data, size, children, eventHandlers } = this.props;
+      const { widget } = instance;
+
+      const defs: any[] = [];
+      for (const k in (instance as any).clipRects) {
+         let cr = (instance as any).clipRects[k];
+         defs.push(
+            <clipPath key={k} id={k}>
+               <rect x={cr.l} y={cr.t} width={Math.max(0, cr.width())} height={Math.max(0, cr.height())} />
+            </clipPath>,
+         );
+      }
+
+      let style = data.style;
+      if ((widget as any).autoHeight)
+         style = {
+            ...style,
+            height: `${size.height}px`,
+         };
+      if ((widget as any).autoWidth)
+         style = {
+            ...style,
+            width: `${size.width}px`,
+         };
+
+      //parent div is needed because clientWidth doesn't work on the svg element in FF
+
+      return (
+         <div
+            ref={(el) => {
+               this.el = el as HTMLDivElement;
+            }}
+            className={data.classNames}
+            style={style}
+            {...eventHandlers}
+         >
+            {size.width > 0 && size.height > 0 && (
+               <svg>
+                  <defs>{defs}</defs>
+                  {children}
+               </svg>
+            )}
+         </div>
+      );
+   }
+
+   onResize() {
+      const { instance } = this.props;
+      const { widget } = this.props.instance;
+
+      if (!this.el) return;
+
+      let size = {
+         width: this.el.clientWidth,
+         height: this.el.clientHeight,
+      };
+
+      if ((widget as any).autoHeight) size.height = size.width / (widget as any).aspectRatio;
+
+      if ((widget as any).autoWidth) size.width = size.height * (widget as any).aspectRatio;
+
+      if (!sameSize(instance.state.size, size))
+         instance.setState({
+            size: size,
+         });
+   }
+
+   componentDidMount() {
+      if (!this.el) return;
+      this.offResize = ResizeManager.trackElement(this.el, this.onResize.bind(this));
+      this.onResize();
+      if ((this.props.instance.widget as any).onWheelActive) {
+         this.offWheelActive = addEventListenerWithOptions(
+            this.el,
+            "wheel",
+            (event) => {
+               const { instance } = this.props;
+               instance.invoke("onWheelActive", event, instance);
+            },
+            { passive: false },
+         );
+      }
+   }
+
+   componentDidUpdate() {
+      this.onResize();
+   }
+
+   componentWillUnmount() {
+      this.offResize && this.offResize();
+      this.offWheelActive && this.offWheelActive();
+   }
+}
+
+Widget.alias("svg", Svg);
diff --git a/packages/cx/src/svg/Text.d.ts b/packages/cx/src/svg/Text.d.ts
deleted file mode 100644
index 0ac3cbed6..000000000
--- a/packages/cx/src/svg/Text.d.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "./BoundedObject";
-
-interface TextProps extends BoundedObjectProps {
-   /** Text to be displayed. */
-   value?: Cx.StringProp;
-
-   bind?: string;
-   tpl?: string;
-   expr?: string;
-
-   /** Offset along the x-axis. */
-   dx?: Cx.Prop<string | number>;
-
-   /**
-    * Offset along the y-axis. This property is commonly used for vertical text alignment.
-    * Set dy="0.8em" to align the text with the top and dy="0.4em" to center it vertically.
-    */
-   dy?: Cx.Prop<string | number>;
-
-   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   textAnchor?: Cx.StringProp;
-
-   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   ta?: Cx.StringProp;
-
-   /** Sets text-body color. */
-   fill?: Cx.StringProp;
-
-   /** Sets text-outline color. */
-   stroke?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `text`. */
-   baseClass?: string;
-
-   /** Set to true for the text to set the text anchor based on the direction of the parent element. See PieLabels example.  */
-   autoTextAnchor?: boolean;
-}
-
-export class Text extends Cx.Widget<TextProps> {}
diff --git a/packages/cx/src/svg/Text.js b/packages/cx/src/svg/Text.js
deleted file mode 100644
index e221de7c9..000000000
--- a/packages/cx/src/svg/Text.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { BoundedObject } from "./BoundedObject";
-
-export class Text extends BoundedObject {
-   declareData() {
-      return super.declareData(...arguments, {
-         value: undefined,
-         dx: undefined,
-         dy: undefined,
-         textAnchor: undefined,
-         fill: undefined,
-         stroke: undefined,
-      });
-   }
-
-   init() {
-      if (this.ta) this.textAnchor = this.ta;
-
-      if (this.bind) {
-         this.value = {
-            bind: this.bind,
-         };
-      } else if (this.tpl) {
-         this.value = {
-            tpl: this.tpl,
-         };
-      } else if (this.expr) {
-         this.value = {
-            expr: this.expr,
-         };
-      }
-
-      super.init();
-   }
-
-   prepare(context, instance) {
-      if (this.autoTextAnchor) {
-         instance.textAnchor =
-            context.textDirection == "right" ? "start" : context.textDirection == "left" ? "end" : this.textAnchor;
-         let changed = instance.cache("textAnchor", instance.textAnchor);
-         if (changed) instance.markShouldUpdate(context);
-      }
-
-      super.prepare(context, instance);
-   }
-
-   render(context, instance, key) {
-      var { data } = instance;
-      var { bounds } = data;
-
-      let textAnchor = this.autoTextAnchor ? instance.textAnchor : data.textAnchor;
-
-      return (
-         <text
-            key={key}
-            className={data.classNames}
-            x={this.autoTextAnchor && textAnchor == "end" ? bounds.r : bounds.l}
-            y={bounds.t}
-            dx={data.dx}
-            dy={data.dy}
-            textAnchor={textAnchor}
-            style={data.style}
-            fill={data.fill}
-            stroke={data.stroke}
-         >
-            {data.value}
-            {this.renderChildren(context, instance)}
-         </text>
-      );
-   }
-}
-
-Text.prototype.anchors = "0.5 0.5 0.5 0.5";
-Text.prototype.baseClass = "text";
-Text.prototype.autoTextAnchor = false;
-Text.prototype.autoAnchor = false;
-
-Widget.alias("svg.text", Text);
diff --git a/packages/cx/src/svg/Text.tsx b/packages/cx/src/svg/Text.tsx
new file mode 100644
index 000000000..094f176f2
--- /dev/null
+++ b/packages/cx/src/svg/Text.tsx
@@ -0,0 +1,134 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../ui/Widget";
+import { BoundedObject, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { Prop, StringProp } from "../ui/Prop";
+
+export interface TextConfig extends BoundedObjectConfig {
+   /** Text to be displayed. */
+   value?: StringProp;
+
+   bind?: string;
+   tpl?: string;
+   expr?: string;
+
+   /** Offset along the x-axis. */
+   dx?: Prop<string | number>;
+
+   /**
+    * Offset along the y-axis. This property is commonly used for vertical text alignment.
+    * Set dy="0.8em" to align the text with the top and dy="0.4em" to center it vertically.
+    */
+   dy?: Prop<string | number>;
+
+   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
+   textAnchor?: StringProp;
+
+   /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
+   ta?: StringProp;
+
+   /** Sets text-body color. */
+   fill?: StringProp;
+
+   /** Sets text-outline color. */
+   stroke?: StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `text`. */
+   baseClass?: string;
+
+   /** Set to true for the text to set the text anchor based on the direction of the parent element. See PieLabels example.  */
+   autoTextAnchor?: boolean;
+}
+
+export class Text extends BoundedObject<TextConfig> {
+   constructor(config?: TextConfig) {
+      super(config);
+   }
+
+   declare value?: StringProp;
+   declare bind?: string;
+   declare tpl?: string;
+   declare expr?: string;
+   declare dx?: Prop<string | number>;
+   declare dy?: Prop<string | number>;
+   declare textAnchor?: StringProp;
+   declare ta?: StringProp;
+   declare fill?: StringProp;
+   declare stroke?: StringProp;
+   declare autoTextAnchor?: boolean;
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         value: undefined,
+         dx: undefined,
+         dy: undefined,
+         textAnchor: undefined,
+         fill: undefined,
+         stroke: undefined,
+      });
+   }
+
+   init() {
+      if (this.ta) this.textAnchor = this.ta;
+
+      if (this.bind) {
+         this.value = {
+            bind: this.bind,
+         } as any;
+      } else if (this.tpl) {
+         this.value = {
+            tpl: this.tpl,
+         } as any;
+      } else if (this.expr) {
+         this.value = {
+            expr: this.expr,
+         } as any;
+      }
+
+      super.init();
+   }
+
+   prepare(context: RenderingContext, instance: Instance) {
+      if (this.autoTextAnchor) {
+         (instance as any).textAnchor =
+            context.textDirection == "right" ? "start" : context.textDirection == "left" ? "end" : this.textAnchor;
+         let changed = instance.cache("textAnchor", (instance as any).textAnchor);
+         if (changed) (instance as any).markShouldUpdate(context);
+      }
+
+      super.prepare(context, instance);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      const { data } = instance;
+      const { bounds } = data;
+
+      let textAnchor = this.autoTextAnchor ? (instance as any).textAnchor : data.textAnchor;
+
+      return (
+         <text
+            key={key}
+            className={data.classNames}
+            x={this.autoTextAnchor && textAnchor == "end" ? bounds.r : bounds.l}
+            y={bounds.t}
+            dx={data.dx}
+            dy={data.dy}
+            textAnchor={textAnchor}
+            style={data.style}
+            fill={data.fill}
+            stroke={data.stroke}
+         >
+            {data.value}
+            {this.renderChildren(context, instance)}
+         </text>
+      );
+   }
+}
+
+Text.prototype.anchors = "0.5 0.5 0.5 0.5";
+Text.prototype.baseClass = "text";
+Text.prototype.autoTextAnchor = false;
+(Text.prototype as any).autoAnchor = false;
+
+Widget.alias("svg.text", Text);
diff --git a/packages/cx/src/svg/TextualBoundedObject.d.ts b/packages/cx/src/svg/TextualBoundedObject.d.ts
deleted file mode 100644
index a93de2df2..000000000
--- a/packages/cx/src/svg/TextualBoundedObject.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as Cx from '../core';
-import {BoundedObject, BoundedObjectProps} from './BoundedObject';
-
-// no new props, but exporting for easier inheritance
-export interface TextualBoundedObjectProps extends BoundedObjectProps {}
-
-export class TextualBoundedObject extends BoundedObject {}
\ No newline at end of file
diff --git a/packages/cx/src/svg/TextualBoundedObject.js b/packages/cx/src/svg/TextualBoundedObject.js
deleted file mode 100644
index 21a7a0792..000000000
--- a/packages/cx/src/svg/TextualBoundedObject.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import {BoundedObject} from './BoundedObject';
-import {Text} from './Text';
-import {innerTextTrim} from '../util/innerTextTrim';
-
-export class TextualBoundedObject extends BoundedObject {
-   add(widget) {
-      if (typeof widget != 'string')
-         return super.add(...arguments);
-
-      if (this.trimWhitespace)
-         widget = innerTextTrim(widget);
-
-      if (!widget)
-         return;
-
-      return this.add({
-         type: Text,
-         value: widget,
-         textAnchor: 'middle',
-         dy: '0.4em'
-      });
-   }
-}
-
-
-
-
-
diff --git a/packages/cx/src/svg/TextualBoundedObject.ts b/packages/cx/src/svg/TextualBoundedObject.ts
new file mode 100644
index 000000000..307110df9
--- /dev/null
+++ b/packages/cx/src/svg/TextualBoundedObject.ts
@@ -0,0 +1,35 @@
+import {BoundedObject, BoundedObjectConfig} from './BoundedObject';
+import {Text} from './Text';
+import {innerTextTrim} from '../util/innerTextTrim';
+
+// no new props, but exporting for easier inheritance
+export interface TextualBoundedObjectConfig extends BoundedObjectConfig {}
+
+export class TextualBoundedObject extends BoundedObject {
+   constructor(config?: TextualBoundedObjectConfig) {
+      super(config);
+   }
+
+   add(widget: any): any {
+      if (typeof widget != 'string')
+         return super.add(...arguments);
+
+      if (this.trimWhitespace)
+         widget = innerTextTrim(widget);
+
+      if (!widget)
+         return;
+
+      return this.add({
+         type: Text,
+         value: widget,
+         textAnchor: 'middle',
+         dy: '0.4em'
+      });
+   }
+}
+
+
+
+
+
diff --git a/packages/cx/src/svg/index.d.ts b/packages/cx/src/svg/index.d.ts
deleted file mode 100644
index deef21828..000000000
--- a/packages/cx/src/svg/index.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from "./util/index";
-export * from "./BoundedObject";
-export * from "./TextualBoundedObject";
-export * from "./Svg";
-export * from "./Rectangle";
-export * from "./ClipRect";
-export * from "./Ellipse";
-export * from "./Line";
-export * from "./Text";
-export * from "./NonOverlappingRect";
-export * from "./NonOverlappingRectGroup";
diff --git a/packages/cx/src/svg/index.js b/packages/cx/src/svg/index.ts
similarity index 100%
rename from packages/cx/src/svg/index.js
rename to packages/cx/src/svg/index.ts
diff --git a/packages/cx/src/svg/util/Rect.d.ts b/packages/cx/src/svg/util/Rect.d.ts
deleted file mode 100644
index 1093f2655..000000000
--- a/packages/cx/src/svg/util/Rect.d.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-type RectMargin = string | Rect | Array<string | number>;
-
-export interface IRect {
-   l: number,
-   r: number,
-   t: number,
-   b: number
-}
-
-export class Rect implements IRect {
-
-   isRect: boolean;
-
-   l: number;
-   r: number;
-   t: number;
-   b: number;
-
-   constructor(config?: { t?: number, r?: number, b?: number, l?: number });
-
-   width() : number;
-
-   height() : number;
-
-   valid() : boolean;
-
-   makeValid() : Rect;
-
-   isEqual(r: Rect) : boolean;
-
-   static add(a: Rect, b: Rect) : Rect;
-
-   static multiply(a: Rect, b: Rect) : Rect;
-
-   static margin(r: Rect, m?: RectMargin) : Rect;
-
-   static convertMargin(m?: RectMargin) : Rect;
-
-   static convert(r?: RectMargin | number) : Rect;
-
-}
\ No newline at end of file
diff --git a/packages/cx/src/svg/util/Rect.js b/packages/cx/src/svg/util/Rect.js
deleted file mode 100644
index 82bdcd8ed..000000000
--- a/packages/cx/src/svg/util/Rect.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import {isNumber} from '../../util/isNumber';
-import {isArray} from '../../util/isArray';
-
-export class Rect {
-
-   constructor(config) {
-      Object.assign(this, config);
-   }
-
-   width() {
-      return this.r - this.l;
-   }
-
-   height() {
-      return this.b - this.t;
-   }
-
-   valid() {
-      return this.r > this.l && this.b > this.t;
-   }
-
-   makeValid() {
-      return new Rect({
-         l: Math.min(this.l, this.r),
-         r: Math.max(this.l, this.r),
-         t: Math.min(this.t, this.b),
-         b: Math.max(this.t, this.b)
-      })
-   }
-
-   isEqual(r) {
-
-      if (!r || !r.isRect)
-         return false;
-
-      return r.l == this.l
-         && r.r == this.r
-         && r.t == this.t
-         && r.b == this.b;
-   }
-
-   static add(a, b) {
-      return new Rect({
-         l: a.l + b.l,
-         t: a.t + b.t,
-         r: a.r + b.r,
-         b: a.b + b.b
-      });
-   }
-
-   static multiply(a, b) {
-      return new Rect({
-         l: a.l + (a.r - a.l) * b.l,
-         r: a.l + (a.r - a.l) * b.r,
-         t: a.t + (a.b - a.t) * b.t,
-         b: a.t + (a.b - a.t) * b.b
-      });
-   }
-
-   static margin(r, m) {
-      var mr = Rect.convertMargin(m);
-      return Rect.add(r, mr);
-   }
-
-   static convertMargin(m) {
-      if (!m)
-         return new Rect();
-
-      if (m.isRect)
-         return m;
-
-      if (isNumber(m))
-         return new Rect({l: m, t: m, r: -m, b: -m});
-
-      var m = Rect.convert(m);
-      m.b = -m.b;
-      m.r = -m.r;
-      return m;
-   }
-
-   static convert(r) {
-      if (!r)
-         return new Rect({l: 0, r: 0, t: 0, b: 0});
-
-      if (r.isRect)
-         return r;
-
-      if (typeof r === 'string')
-         r = r.split(' ');
-
-      if (isArray(r)) {
-         return new Rect({
-            t: parseFloat(r[0]),
-            r: parseFloat(r[1]),
-            b: parseFloat(r[2]),
-            l: parseFloat(r[3])
-         });
-      }
-
-      return new Rect(r);
-   }
-}
-
-Rect.prototype.isRect = true;
-
-Rect.prototype.l = 0; //left;
-Rect.prototype.r = 0; //right
-Rect.prototype.t = 0; //top
-Rect.prototype.b = 0; //bottom
\ No newline at end of file
diff --git a/packages/cx/src/svg/util/Rect.ts b/packages/cx/src/svg/util/Rect.ts
new file mode 100644
index 000000000..a60bcc650
--- /dev/null
+++ b/packages/cx/src/svg/util/Rect.ts
@@ -0,0 +1,105 @@
+import { isNumber } from "../../util/isNumber";
+import { isArray } from "../../util/isArray";
+
+type RectMargin = string | Rect | Array<string | number>;
+
+export interface IRect {
+   l: number;
+   r: number;
+   t: number;
+   b: number;
+}
+
+export class Rect implements IRect {
+   isRect: boolean = true;
+   l: number = 0; //left;
+   r: number = 0; //right
+   t: number = 0; //top
+   b: number = 0; //bottom
+
+   constructor(config?: { t?: number; r?: number; b?: number; l?: number }) {
+      Object.assign(this, config);
+   }
+
+   width(): number {
+      return this.r - this.l;
+   }
+
+   height(): number {
+      return this.b - this.t;
+   }
+
+   valid(): boolean {
+      return this.r > this.l && this.b > this.t;
+   }
+
+   makeValid(): Rect {
+      return new Rect({
+         l: Math.min(this.l, this.r),
+         r: Math.max(this.l, this.r),
+         t: Math.min(this.t, this.b),
+         b: Math.max(this.t, this.b),
+      });
+   }
+
+   isEqual(r?: Rect): boolean {
+      if (!r || !r.isRect) return false;
+
+      return r.l == this.l && r.r == this.r && r.t == this.t && r.b == this.b;
+   }
+
+   static add(a: Rect, b: Rect): Rect {
+      return new Rect({
+         l: a.l + b.l,
+         t: a.t + b.t,
+         r: a.r + b.r,
+         b: a.b + b.b,
+      });
+   }
+
+   static multiply(a: Rect, b: Rect): Rect {
+      return new Rect({
+         l: a.l + (a.r - a.l) * b.l,
+         r: a.l + (a.r - a.l) * b.r,
+         t: a.t + (a.b - a.t) * b.t,
+         b: a.t + (a.b - a.t) * b.b,
+      });
+   }
+
+   static margin(r: Rect, m?: RectMargin): Rect {
+      var mr = Rect.convertMargin(m);
+      return Rect.add(r, mr);
+   }
+
+   static convertMargin(m?: RectMargin): Rect {
+      if (!m) return new Rect();
+
+      if ((m as any).isRect) return m as Rect;
+
+      if (isNumber(m)) return new Rect({ l: m as number, t: m as number, r: -(m as number), b: -(m as number) });
+
+      var mr = Rect.convert(m);
+      mr.b = -mr.b;
+      mr.r = -mr.r;
+      return mr;
+   }
+
+   static convert(r?: RectMargin | number): Rect {
+      if (!r) return new Rect({ l: 0, r: 0, t: 0, b: 0 });
+
+      if ((r as any).isRect) return r as Rect;
+
+      if (typeof r === "string") r = r.split(" ");
+
+      if (isArray(r)) {
+         return new Rect({
+            t: parseFloat(r[0] as any),
+            r: parseFloat(r[1] as any),
+            b: parseFloat(r[2] as any),
+            l: parseFloat(r[3] as any),
+         });
+      }
+
+      return new Rect(r as any);
+   }
+}
diff --git a/packages/cx/src/svg/util/index.js b/packages/cx/src/svg/util/index.js
deleted file mode 100644
index 494f2358e..000000000
--- a/packages/cx/src/svg/util/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Rect';
\ No newline at end of file
diff --git a/packages/cx/src/svg/util/index.d.ts b/packages/cx/src/svg/util/index.ts
similarity index 100%
rename from packages/cx/src/svg/util/index.d.ts
rename to packages/cx/src/svg/util/index.ts
diff --git a/packages/cx/src/ui/CSS.d.ts b/packages/cx/src/ui/CSS.d.ts
deleted file mode 100644
index 0b27857d6..000000000
--- a/packages/cx/src/ui/CSS.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as Cx from '../core';
-
-export class CSS {
-
-   static resolve(...args): string[];
-
-   static block(baseClass: string, styleModifiers?: any, stateModifiers?: any): string;
-
-   static element(baseClass: string, elementClass: string, stateModifiers?: any): string;
-
-   static state(stateModifiers: any): string;
-
-   static expand(...args): string;
-
-   static parseStyle(str: string): Cx.Config;
-   static parseStyle(str: any): any;
-
-   static classPrefix: string;
-
-}
\ No newline at end of file
diff --git a/packages/cx/src/ui/CSS.js b/packages/cx/src/ui/CSS.js
deleted file mode 100644
index 2db1bec4c..000000000
--- a/packages/cx/src/ui/CSS.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { CSSHelper } from "./CSSHelper";
-import { parseStyle } from "../util/parseStyle";
-import { isArray } from "../util/isArray";
-
-function push(list, item) {
-   if (!item) return list;
-   if (!list) list = [];
-   list.push(item);
-   return list;
-}
-
-function pushMore(list, itemArray) {
-   if (!itemArray || itemArray.length == 0) return list;
-   if (!list) list = [];
-   list.push.apply(list, itemArray);
-   return list;
-}
-
-function pushMap(list, itemArray, mapF) {
-   return itemArray ? pushMore(list, itemArray.map(mapF)) : list;
-}
-
-function join(list) {
-   return list ? list.join(" ") : null;
-}
-
-export class CSS {
-   static resolve() {
-      let list, type, arg, i, key;
-
-      for (i = 0; i < arguments.length; i++) {
-         arg = arguments[i];
-         if (arg) {
-            type = typeof arg;
-            if (type == "string") list = push(list, arg);
-            else if (type == "object") {
-               if (isArray(arg)) list = pushMore(list, this.resolve(...arg));
-               else for (key in arg) if (arg[key]) list = push(list, key);
-            }
-         }
-      }
-      return list;
-   }
-
-   static block(baseClass, styleModifiers, stateModifiers) {
-      let list;
-      if (baseClass) list = push(list, this.classPrefix + "b-" + baseClass);
-      list = pushMap(list, this.resolve(styleModifiers), (m) => this.classPrefix + "m-" + m);
-      list = pushMap(list, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m);
-      return join(list);
-   }
-
-   static element(baseClass, elementClass, stateModifiers) {
-      let list;
-      if (baseClass && elementClass) list = push(list, this.classPrefix + "e-" + baseClass + "-" + elementClass);
-      list = pushMap(list, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m);
-      return join(list);
-   }
-
-   static state(stateModifiers) {
-      return join(pushMap(null, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m));
-   }
-
-   static mod(mods) {
-      return join(pushMap(null, this.resolve(mods), (m) => this.classPrefix + "m-" + m));
-   }
-
-   static expand() {
-      return join(this.resolve(...arguments));
-   }
-
-   static parseStyle(str) {
-      return parseStyle(str);
-   }
-}
-
-CSS.classPrefix = "cx";
-
-CSSHelper.alias("cx", CSS);
diff --git a/packages/cx/src/ui/CSS.ts b/packages/cx/src/ui/CSS.ts
new file mode 100644
index 000000000..53dbfc21b
--- /dev/null
+++ b/packages/cx/src/ui/CSS.ts
@@ -0,0 +1,87 @@
+import { CSSHelper } from "./CSSHelper";
+import { parseStyle } from "../util/parseStyle";
+import { isArray } from "../util/isArray";
+
+function push(list: any[] | undefined, item: any): any[] {
+   if (!item) return list || [];
+   if (!list) list = [];
+   list.push(item);
+   return list;
+}
+
+function pushMore(list: any[] | undefined, itemArray: any[]): any[] {
+   if (!itemArray || itemArray.length == 0) return list || [];
+   if (!list) list = [];
+   list.push.apply(list, itemArray);
+   return list;
+}
+
+function pushMap(list: any[] | undefined, itemArray: any[] | undefined, mapF: (item: any) => any): any[] | undefined {
+   return itemArray ? pushMore(list, itemArray.map(mapF)) : list;
+}
+
+function join(list: any[] | undefined): string | undefined {
+   return list ? list.join(" ") : undefined;
+}
+
+export class CSS {
+   public static classPrefix: string;
+
+   static resolve(...args: any[]): any[] {
+      let list: any[] | undefined = undefined,
+         type: string,
+         arg: any,
+         i: number,
+         key: string;
+
+      for (i = 0; i < args.length; i++) {
+         arg = args[i];
+         if (arg) {
+            type = typeof arg;
+            if (type == "string") list = push(list, arg);
+            else if (type == "object") {
+               if (isArray(arg)) list = pushMore(list, this.resolve(...arg));
+               else for (key in arg) if (arg[key]) list = push(list, key);
+            }
+         }
+      }
+      return list || [];
+   }
+
+   static block(baseClass: string, styleModifiers?: any, stateModifiers?: any): string;
+   static block(baseClass?: string, styleModifiers?: any, stateModifiers?: any): string | undefined {
+      let list: any[] | undefined;
+      if (baseClass) list = push(list, this.classPrefix + "b-" + baseClass);
+      list = pushMap(list, this.resolve(styleModifiers), (m) => this.classPrefix + "m-" + m);
+      list = pushMap(list, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m);
+      return join(list);
+   }
+
+   static element(baseClass: string, elementClass: string, stateModifiers?: any): string;
+   static element(baseClass?: string, elementClass?: string, stateModifiers?: any): string | undefined {
+      let list: any[] | undefined;
+      if (baseClass && elementClass) list = push(list, this.classPrefix + "e-" + baseClass + "-" + elementClass);
+      list = pushMap(list, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m);
+      return join(list);
+   }
+
+   static state(stateModifiers: any): string | undefined {
+      return join(pushMap(undefined, this.resolve(stateModifiers), (m) => this.classPrefix + "s-" + m));
+   }
+
+   static mod(mods: any): string | undefined {
+      return join(pushMap(undefined, this.resolve(mods), (m) => this.classPrefix + "m-" + m));
+   }
+
+   static expand(...args: any[]): string | undefined {
+      return join(this.resolve(...args));
+   }
+
+   static parseStyle(str: any): any {
+      return parseStyle(str);
+   }
+}
+
+CSS.classPrefix = "cx";
+
+CSSHelper.alias("cx", CSS);
diff --git a/packages/cx/src/ui/CSSHelper.d.ts b/packages/cx/src/ui/CSSHelper.d.ts
deleted file mode 100644
index 29ad9d53a..000000000
--- a/packages/cx/src/ui/CSSHelper.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as Cx from '../core';
-
-export class CSSHelper {
-
-   static get(code: string) : any;
-
-   static register(code?: string, helper?: any): void;
-
-   static alias(code?: string, helper?: any): void;
-   
-} 
\ No newline at end of file
diff --git a/packages/cx/src/ui/CSSHelper.js b/packages/cx/src/ui/CSSHelper.js
deleted file mode 100644
index 1e389f7e2..000000000
--- a/packages/cx/src/ui/CSSHelper.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var cssHelperCache = {};
-
-export class CSSHelper {
-   static get(code) {
-      var helper = cssHelperCache[code];
-      if (!helper)
-         throw new Error(`Unknown CSS helper '${code}'.`);
-      return helper;
-   }
-
-   static register(code, helper) {
-      cssHelperCache[code] = helper;
-   }
-
-   static alias(code, helper) {
-      cssHelperCache[code] = helper;
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/ui/CSSHelper.ts b/packages/cx/src/ui/CSSHelper.ts
new file mode 100644
index 000000000..7a6916547
--- /dev/null
+++ b/packages/cx/src/ui/CSSHelper.ts
@@ -0,0 +1,17 @@
+var cssHelperCache: { [key: string]: any } = {};
+
+export class CSSHelper {
+   static get(code: string): any {
+      var helper = cssHelperCache[code];
+      if (!helper) throw new Error(`Unknown CSS helper '${code}'.`);
+      return helper;
+   }
+
+   static register(code: string, helper: any): void {
+      cssHelperCache[code] = helper;
+   }
+
+   static alias(code: string, helper: any): void {
+      cssHelperCache[code] = helper;
+   }
+}
diff --git a/packages/cx/src/ui/Container.d.ts b/packages/cx/src/ui/Container.d.ts
deleted file mode 100644
index eea5cd5f3..000000000
--- a/packages/cx/src/ui/Container.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as Cx from '../core';
-import {Component} from '../util/Component';
-
-type Filter = string | Component;
-
-export class Container extends Cx.Widget<Cx.PureContainerProps> {
-
-   add(...args: Array<any>);
-   
-   clear();
-
-   addText(text: string);
-
-   find(filter: Filter, options?: Cx.Config) : any[];
-
-   findFirst(filter: Filter, options?: Cx.Config) : any;
-
-}
diff --git a/packages/cx/src/ui/Container.js b/packages/cx/src/ui/Container.js
deleted file mode 100644
index 11dd50bf9..000000000
--- a/packages/cx/src/ui/Container.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import { contentAppend, Widget } from "./Widget";
-import { StaticText } from "./StaticText";
-import { Text } from "./Text";
-import { innerTextTrim } from "../util/innerTextTrim";
-import { isString } from "../util/isString";
-import { isArray } from "../util/isArray";
-import { exploreChildren } from "./layout/exploreChildren";
-
-export class Container extends Widget {
-   init(context) {
-      if (typeof this.ws !== "undefined") this.preserveWhitespace = this.ws;
-
-      if (this.preserveWhitespace) this.trimWhitespace = false;
-
-      let items = this.items || this.children || [];
-      delete this.children;
-      this.items = [];
-
-      if (this.layout) {
-         let layout = Widget.create({ type: this.layout, items });
-         layout.init(context);
-         this.layout = null;
-         if (layout.noLayout) {
-            this.useParentLayout = true;
-            this.add(items);
-         } else {
-            this.add(layout);
-            this.layout = layout;
-         }
-      } else {
-         this.add(items);
-      }
-
-      super.init(context);
-   }
-
-   exploreItems(context, instance, items) {
-      instance.children = exploreChildren(context, instance, items, instance.cached.children, null, instance.store);
-      if (instance.cache("children", instance.children)) instance.markShouldUpdate(context);
-   }
-
-   explore(context, instance) {
-      super.explore(context, instance);
-      this.exploreItems(context, instance, this.items);
-   }
-
-   render(context, instance) {
-      return this.renderChildren(context, instance);
-   }
-
-   renderChildren(context, instance) {
-      let preserveComplexContent = this.useParentLayout;
-
-      function append(result, r) {
-         if (r == null) return;
-
-         //react element
-         if (!r.hasOwnProperty("content")) {
-            contentAppend(result, r);
-            return;
-         }
-
-         if (r.useParentLayout) return r.content.forEach((x) => append(result, x));
-
-         if (r.atomic || preserveComplexContent) {
-            result.push(r);
-         } else {
-            let first = true;
-            for (let k in r) if (contentAppend(result, r[k], !first)) first = false;
-         }
-      }
-
-      let result = [];
-      for (let i = 0; i < instance.children.length; i++) {
-         append(result, instance.children[i].vdom);
-      }
-
-      if (this.useParentLayout)
-         return {
-            useParentLayout: true,
-            content: result,
-         };
-
-      return result;
-   }
-
-   clear() {
-      if (this.layout) this.layout.clear();
-      else this.items = [];
-   }
-
-   add(...args) {
-      if (this.layout) return this.layout.add(...args);
-
-      args.forEach((a) => {
-         if (!a) return;
-         if (isArray(a)) a.forEach((c) => this.add(c));
-         else if (isString(a)) {
-            if (this.trimWhitespace) a = innerTextTrim(a);
-            if (a) this.addText(a);
-         } else if (a.isComponent) this.items.push(this.wrapItem(a));
-         else {
-            this.add(Widget.create(a, this.itemDefaults));
-         }
-      });
-   }
-
-   wrapItem(item) {
-      return item;
-   }
-
-   addText(text) {
-      if (this.plainText || text.indexOf("{") == -1 || text.indexOf("}") == -1)
-         this.add(Widget.create(StaticText, { text: text }));
-      else this.add(Widget.create(Text, { text: { tpl: text } }));
-   }
-
-   find(filter, options) {
-      if (!options) options = {};
-
-      if (!filter || !this.items) return [];
-
-      let alias = filter;
-
-      if (isString(filter)) filter = (w) => w.componentAlias == alias;
-
-      if (filter.isComponentType) filter = (w) => w instanceof alias;
-
-      let results = [];
-
-      for (let i = 0; i < this.items.length; i++) {
-         let w = this.items[i];
-
-         if (!w.initialized) w.init();
-
-         if (filter(w)) {
-            results.push(w);
-            if (options.first) break;
-         }
-
-         if (w.find) results.push(...w.find(filter, options));
-      }
-
-      return results;
-   }
-
-   findFirst(filter, options) {
-      return this.find(filter, { ...options, first: true })[0];
-   }
-}
-
-Container.prototype.trimWhitespace = true;
-Container.prototype.plainText = true;
-Container.prototype.styled = false;
diff --git a/packages/cx/src/ui/Container.tsx b/packages/cx/src/ui/Container.tsx
new file mode 100644
index 000000000..fe69b1471
--- /dev/null
+++ b/packages/cx/src/ui/Container.tsx
@@ -0,0 +1,216 @@
+import { contentAppend, Widget, WidgetConfig, WidgetStyleConfig } from "./Widget";
+import { ClassProp, ModProp, StyleProp } from "./Prop";
+import { StaticText } from "./StaticText";
+import { Text } from "./Text";
+import { innerTextTrim } from "../util/innerTextTrim";
+import { isString } from "../util/isString";
+import { isArray } from "../util/isArray";
+import { exploreChildren } from "./layout/exploreChildren";
+import { Instance } from "./Instance";
+import { CxChild, RenderingContext } from "./RenderingContext";
+import { Create } from "../util";
+
+export type ChildNode = Create<typeof Widget> | string | number | boolean | null | undefined;
+
+export interface ContainerConfig extends WidgetConfig {
+   /** Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`. */
+   ws?: boolean;
+
+   /** Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`. */
+   trimWhitespace?: boolean;
+
+   /** Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`. */
+   preserveWhitespace?: boolean;
+
+   /** List of child elements. */
+   items?: ChildNode | ChildNode[];
+
+   /** List of child elements. */
+   children?: ChildNode | ChildNode[];
+
+   plainText?: boolean;
+}
+
+export interface StyledContainerConfig extends ContainerConfig, WidgetStyleConfig {}
+
+// Base class for extending with custom Config types
+export class ContainerBase<
+   Config extends ContainerConfig = ContainerConfig,
+   InstanceType extends Instance = Instance,
+> extends Widget<Config, InstanceType> {
+   declare public ws?: boolean;
+   declare public preserveWhitespace?: boolean;
+   declare public trimWhitespace?: boolean;
+   declare public items: Widget[];
+   declare public children?: Widget[];
+   declare public layout?: Container | null;
+   declare public useParentLayout?: boolean;
+   declare public itemDefaults?: any;
+   declare public plainText?: boolean;
+
+   public init(context?: any): void {
+      if (typeof this.ws !== "undefined") this.preserveWhitespace = this.ws;
+
+      if (this.preserveWhitespace) this.trimWhitespace = false;
+
+      let items = this.items || this.children || [];
+      delete this.children;
+      this.items = [];
+
+      if (this.layout) {
+         let layout = Container.create(this.layout as Create<typeof Container>, { items });
+         layout.init(context);
+         this.layout = null;
+         if ("noLayout" in layout && (layout as any).noLayout) {
+            this.useParentLayout = true;
+            this.add(items);
+         } else {
+            this.add(layout);
+            this.layout = layout;
+         }
+      } else {
+         this.add(items);
+      }
+
+      super.init();
+   }
+
+   protected exploreItems(context: RenderingContext, instance: Instance, items: CxChild[]): void {
+      instance.children = exploreChildren(context, instance, items, instance.cached.children, null, instance.store);
+      if (instance.cache("children", instance.children)) instance.markShouldUpdate(context);
+   }
+
+   public explore(context: any, instance: any): void {
+      super.explore(context, instance);
+      this.exploreItems(context, instance, this.items!);
+   }
+
+   public render(context: any, instance: any, key: any): any {
+      return this.renderChildren(context, instance, key);
+   }
+
+   protected renderChildren(_context: any, instance: any, key?: string): any {
+      let preserveComplexContent = this.useParentLayout;
+
+      function append(result: any[], r: any): void {
+         if (r == null) return;
+
+         //react element
+         if (!r.hasOwnProperty("content")) {
+            contentAppend(result, r);
+            return;
+         }
+
+         if (r.useParentLayout) return r.content.forEach((x: any) => append(result, x));
+
+         if (r.atomic || preserveComplexContent) {
+            result.push(r);
+         } else {
+            let first = true;
+            for (let k in r) if (contentAppend(result, r[k], !first)) first = false;
+         }
+      }
+
+      let result: React.ReactNode[] = [];
+      for (let i = 0; i < instance.children.length; i++) {
+         append(result, instance.children[i].vdom);
+      }
+
+      if (this.useParentLayout)
+         return {
+            useParentLayout: true,
+            content: result,
+         };
+
+      return result;
+   }
+
+   public clear(): void {
+      if (this.layout) this.layout.clear();
+      else this.items = [];
+   }
+
+   public add(...args: any[]): void {
+      if (this.layout) return this.layout.add(...args);
+      for (let a of args) {
+         if (!a) continue;
+         if (isArray(a)) {
+            for (let c of a) this.add(c);
+         } else if (isString(a)) {
+            if (this.trimWhitespace) a = innerTextTrim(a);
+            if (a) this.addText(a);
+         } else if (a.isComponent) this.items.push(this.wrapItem(a));
+         else {
+            this.add(Widget.create(a, this.itemDefaults, {}));
+         }
+      }
+   }
+
+   protected wrapItem(item: any): any {
+      return item;
+   }
+
+   protected addText(text: string): void {
+      if (this.plainText || text.indexOf("{") == -1 || text.indexOf("}") == -1)
+         this.add(Widget.create(StaticText, { text: text }, {}));
+      else this.add(Widget.create(Text, { text: { tpl: text } }, {}));
+   }
+
+   public find(filter: any, options?: any): any[] {
+      if (!options) options = {};
+
+      if (!filter || !this.items) return [];
+
+      let alias = filter;
+
+      if (isString(filter)) filter = (w: any) => w.componentAlias == alias;
+
+      if (filter.isComponentType) filter = (w: any) => w instanceof alias;
+
+      let results = [];
+
+      for (let i = 0; i < this.items.length; i++) {
+         let w = this.items[i];
+
+         if (w && !w.initialized) w.init();
+
+         if (filter(w)) {
+            results.push(w);
+            if (options.first) break;
+         }
+
+         if (w && (w as any).find) results.push(...(w as any).find(filter, options));
+      }
+
+      return results;
+   }
+
+   public findFirst(filter: any, options?: any): any {
+      return this.find(filter, { ...options, first: true })[0];
+   }
+}
+
+ContainerBase.prototype.trimWhitespace = true;
+ContainerBase.prototype.plainText = true;
+ContainerBase.prototype.styled = false;
+
+// Closed type for direct usage - preserves ControllerProp ThisType
+export class Container extends ContainerBase<ContainerConfig, Instance> {}
+
+// Base class for styled containers with custom Config types
+export class StyledContainerBase<
+   Config extends StyledContainerConfig = StyledContainerConfig,
+   InstanceType extends Instance = Instance,
+> extends ContainerBase<Config, InstanceType> {
+   declare public class?: ClassProp;
+   declare public className?: ClassProp;
+   declare public style?: StyleProp;
+   declare public styles?: StyleProp;
+   declare public baseClass?: string;
+   declare public mod?: ModProp;
+}
+
+StyledContainerBase.prototype.styled = true;
+
+// Closed type for direct usage
+export class StyledContainer extends StyledContainerBase<StyledContainerConfig, Instance> {}
diff --git a/packages/cx/src/ui/ContentResolver.d.ts b/packages/cx/src/ui/ContentResolver.d.ts
deleted file mode 100644
index 4dbebdbda..000000000
--- a/packages/cx/src/ui/ContentResolver.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as Cx from "../core";
-
-interface ContentResolverProps extends Cx.PureContainerProps {
-   params?: Cx.Prop<any> | Cx.StructuredProp;
-   mode?: "replace" | "prepend" | "append";
-
-   onResolve?: (params, Instance) => any;
-
-   loading?: Cx.BooleanProp;
-}
-
-export class ContentResolver extends Cx.Widget<ContentResolverProps> {}
diff --git a/packages/cx/src/ui/ContentResolver.js b/packages/cx/src/ui/ContentResolver.js
deleted file mode 100644
index 4de4e4649..000000000
--- a/packages/cx/src/ui/ContentResolver.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import {PureContainer} from './PureContainer';
-import {isPromise} from '../util/isPromise';
-
-export class ContentResolver extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         params: {structured: true},
-         loading: undefined
-      })
-   }
-
-   init() {
-      super.init();
-      this.initialItems = this.layout ? this.layout.items : this.items;
-      this.clear();
-   }
-
-   initInstance(context, instance) {
-      instance.content = this.initialItems;
-      instance.cachedParams = {}; //unique value which will never pass the equality check
-   }
-
-   prepareData(context, instance) {
-      let {data} = instance;
-
-      if (data.params !== instance.cachedParams && this.onResolve) {
-         instance.cachedParams = data.params;
-         let content = instance.invoke("onResolve", data.params, instance);
-         if (isPromise(content)) {
-            instance.set('loading', true);
-            this.setContent(instance, null);
-            content.then(cnt => {
-               this.setContent(instance, cnt);
-               instance.setState({cacheBuster: {}});
-               instance.set('loading', false);
-            })
-         }
-         else
-            this.setContent(instance, content);
-      }
-   }
-
-   setContent(instance, content) {
-      if (content) {
-         this.clear();
-         switch (this.mode) {
-            case 'prepend':
-               this.add(content);
-               this.add(this.initialItems);
-               break;
-
-            case 'append':
-               this.add(this.initialItems);
-               this.add(content);
-               break;
-
-            case "replace":
-               this.add(content);
-               break;
-         }
-         instance.content = this.layout ? this.layout.items : this.items;
-         this.clear();
-      }
-      else
-         instance.content = this.initialItems;
-   }
-
-   explore(context, instance) {
-      //a little bit hacky
-      if (this.layout)
-         this.layout.items = instance.content;
-      else
-         this.items = instance.content;
-      super.explore(context, instance);
-   }
-}
-
-ContentResolver.prototype.mode = 'replace';
diff --git a/packages/cx/src/ui/ContentResolver.spec.tsx b/packages/cx/src/ui/ContentResolver.spec.tsx
new file mode 100644
index 000000000..533376b88
--- /dev/null
+++ b/packages/cx/src/ui/ContentResolver.spec.tsx
@@ -0,0 +1,585 @@
+import { ContentResolver } from "./ContentResolver";
+import { Store } from "../data/Store";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { bind } from "./bind";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+import { Prop } from "./Prop";
+import { stringTemplate } from "../data/StringTemplate";
+
+interface TestModel {
+   user: {
+      name: string;
+      age: number;
+      active: boolean;
+   };
+}
+
+describe("ContentResolver", () => {
+   it("resolves content based on params", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver params={{ name: bind("name") }} onResolve={(params) => <span text={params.name} />} />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            name: "Test",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Test"],
+            },
+         ],
+      });
+   });
+
+   it("re-resolves when params change", async () => {
+      let resolveCount = 0;
+
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={{ value: bind("value") }}
+                  onResolve={(params) => {
+                     resolveCount++;
+                     return <span text={String(params.value)} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: 1,
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["1"],
+            },
+         ],
+      });
+      assert.equal(resolveCount, 1);
+
+      await act(async () => {
+         store.set("value", 2);
+      });
+      tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["2"],
+            },
+         ],
+      });
+      assert.equal(resolveCount, 2);
+   });
+
+   it("does not re-resolve if params are unchanged", async () => {
+      let resolveCount = 0;
+
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={{ value: bind("value") }}
+                  onResolve={(params) => {
+                     resolveCount++;
+                     return <span text={String(params.value)} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: 1,
+            other: "a",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+      assert.equal(resolveCount, 1);
+
+      // Change unrelated data
+      store.set("other", "b");
+      component.toJSON();
+      assert.equal(resolveCount, 1);
+   });
+
+   it("supports literal values in params", async () => {
+      let receivedParams: any = null;
+
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={{ count: 42, name: "test" }}
+                  onResolve={(params) => {
+                     receivedParams = params;
+                     return <span text={`${params.name}: ${params.count}`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["test: 42"],
+            },
+         ],
+      });
+      assert.equal(receivedParams.count, 42);
+      assert.equal(receivedParams.name, "test");
+   });
+
+   it("supports mode=prepend", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver mode="prepend" params={{ show: true }} onResolve={() => <span>Prepended</span>}>
+                  <span>Original</span>
+               </ContentResolver>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Prepended"],
+            },
+            {
+               type: "span",
+               props: {},
+               children: ["Original"],
+            },
+         ],
+      });
+   });
+
+   it("supports mode=append", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver mode="append" params={{ show: true }} onResolve={() => <span>Appended</span>}>
+                  <span>Original</span>
+               </ContentResolver>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Original"],
+            },
+            {
+               type: "span",
+               props: {},
+               children: ["Appended"],
+            },
+         ],
+      });
+   });
+
+   it("supports mode=replace (default)", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver params={{ show: true }} onResolve={() => <span>Replaced</span>}>
+                  <span>Original</span>
+               </ContentResolver>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Replaced"],
+            },
+         ],
+      });
+   });
+
+   it("handles async resolution with Promise", async () => {
+      let resolvePromise: ((value: any) => void) | null = null;
+
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={{ id: bind("id") }}
+                  loading={bind("loading")}
+                  onResolve={(params) => {
+                     return new Promise((resolve) => {
+                        resolvePromise = resolve;
+                     });
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            id: 1,
+            loading: false,
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      // Initially loading should be true
+      assert.equal(store.get("loading"), true);
+
+      // Resolve the promise
+      resolvePromise!(<span>Loaded Content</span>);
+
+      // Wait for promise resolution
+      await new Promise((r) => setTimeout(r, 10));
+
+      // After resolution, loading should be false
+      assert.equal(store.get("loading"), false);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Loaded Content"],
+            },
+         ],
+      });
+   });
+
+   it("supports typed params with accessor chains", async () => {
+      const model = createAccessorModelProxy<TestModel>();
+
+      // This test verifies type inference works correctly.
+      // AccessorChain<T> resolves to T in the onResolve params.
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={{
+                     name: model.user.name,
+                     age: model.user.age,
+                     active: model.user.active,
+                  }}
+                  onResolve={(params) => {
+                     // TypeScript infers types from AccessorChain<T>:
+                     // params.name is string (from AccessorChain<string>)
+                     // params.age is number (from AccessorChain<number>)
+                     // params.active is boolean (from AccessorChain<boolean>)
+                     const name: string = params.name;
+                     const age: number = params.age;
+                     const active: boolean = params.active;
+                     return <span text={`${name} is ${age} years old and ${active ? "active" : "inactive"}`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            user: {
+               name: "John",
+               age: 30,
+               active: true,
+            },
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["John is 30 years old and active"],
+            },
+         ],
+      });
+   });
+
+   it("infers types from literal params", async () => {
+      // When using literal values, TypeScript can infer their types
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={{ count: 42, label: "items" }}
+                  onResolve={(params) => {
+                     // params.count is inferred as number
+                     // params.label is inferred as string
+                     const count: number = params.count;
+                     const label: string = params.label;
+                     return <span text={`${count} ${label}`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["42 items"],
+            },
+         ],
+      });
+   });
+
+   it("supports simple Prop params (non-structured)", async () => {
+      const model = createAccessorModelProxy<TestModel>();
+
+      // Test using a single AccessorChain as params instead of an object
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={model.user.name}
+                  onResolve={(name) => {
+                     // name should be typed as string (from AccessorChain<string>)
+                     const typedName: string = name;
+                     return <span text={`Hello, ${typedName}!`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            user: {
+               name: "Alice",
+               age: 25,
+               active: true,
+            },
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Hello, Alice!"],
+            },
+         ],
+      });
+   });
+
+   it("supports simple bind() as params", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={bind("count")}
+                  onResolve={(count) => {
+                     return <span text={`Count: ${count}`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            count: 42,
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Count: 42"],
+            },
+         ],
+      });
+   });
+
+   it("resolves Selector<string> | null to string | null", async () => {
+      const text: string | null = "Hello {user.name}";
+
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={{
+                     text: text ? stringTemplate(text) : null,
+                  }}
+                  onResolve={(params) => {
+                     // params.text should be string | null
+                     const typedText: string | null = params.text;
+                     // @ts-expect-error - params.text should not be 'any' or broader type
+                     const shouldFail: number = params.text;
+                     return <span text={typedText ?? "no text"} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            user: { name: "World", age: 30, active: true },
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "span", props: {}, children: ["Hello World"] }],
+      });
+   });
+
+   it("resolves Prop<string> to string (not any)", async () => {
+      const model = createAccessorModelProxy<TestModel>();
+
+      // When params is typed as Prop<string>, onResolve should receive string (not any)
+      // This tests that the union type Prop<T> correctly extracts T
+      const typedParam: Prop<string> = model.user.name;
+
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={typedParam}
+                  onResolve={(name) => {
+                     // name should be typed as string, not any
+                     const typedName: string = name;
+                     return <span text={`Hello, ${typedName}!`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            user: {
+               name: "Bob",
+               age: 35,
+               active: false,
+            },
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Hello, Bob!"],
+            },
+         ],
+      });
+   });
+});
diff --git a/packages/cx/src/ui/ContentResolver.ts b/packages/cx/src/ui/ContentResolver.ts
new file mode 100644
index 000000000..3d16ff698
--- /dev/null
+++ b/packages/cx/src/ui/ContentResolver.ts
@@ -0,0 +1,132 @@
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { isPromise } from "../util/isPromise";
+import { RenderingContext } from "./RenderingContext";
+import { BooleanProp, StructuredProp, ResolvePropType } from "./Prop";
+import { Instance } from "./Instance";
+
+/**
+ * Configuration for ContentResolver widget.
+ *
+ * The params type parameter enables type inference for the onResolve callback:
+ * - Literal values (numbers, strings, booleans) preserve their types
+ * - AccessorChain<T> resolves to T
+ * - Bind/Tpl/Expr resolve to any (type cannot be determined at compile time)
+ * - Structured props (objects) have each property resolved individually
+ *
+ * @example
+ * ```typescript
+ * // Structured params (object)
+ * <ContentResolver
+ *    params={{
+ *       count: 42,           // number
+ *       name: model.user.name // AccessorChain<string> -> string
+ *    }}
+ *    onResolve={(params) => {
+ *       // params.count is number, params.name is string
+ *    }}
+ * />
+ *
+ * // Simple param (single value)
+ * <ContentResolver
+ *    params={model.user.name}  // AccessorChain<string>
+ *    onResolve={(name) => {
+ *       // name is string
+ *    }}
+ * />
+ * ```
+ */
+export interface ContentResolverConfig<P = StructuredProp> extends PureContainerConfig {
+   /** Parameters that trigger content resolution when changed. Can be a structured object or a single Prop. */
+   params?: P;
+
+   /**
+    * Callback function that resolves content based on params. Can return content directly or a Promise.
+    * The params type is inferred from the params property - literal values and AccessorChain<T>
+    * preserve their types, while bindings (bind/tpl/expr) resolve to `any`.
+    */
+   onResolve?: string | ((params: ResolvePropType<P>, instance: Instance) => any);
+
+   /** How to combine resolved content with initial content. Default is 'replace'. */
+   mode?: "replace" | "prepend" | "append";
+
+   /** Indicates if content is being loaded. */
+   loading?: BooleanProp;
+}
+
+export class ContentResolver<P = StructuredProp> extends PureContainerBase<ContentResolverConfig<P>> {
+   constructor(config?: ContentResolverConfig<P>) {
+      super(config);
+   }
+
+   declare mode: "replace" | "prepend" | "append";
+   declare onResolve?: string | ((params: ResolvePropType<P>, instance: Instance) => any);
+   declare initialItems: any;
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         params: { structured: true },
+         loading: undefined,
+      });
+   }
+
+   init(): void {
+      super.init();
+      this.initialItems = this.layout ? this.layout.items : this.items;
+      this.clear();
+   }
+
+   initInstance(context: RenderingContext, instance: any): void {
+      instance.content = this.initialItems;
+      instance.cachedParams = {}; //unique value which will never pass the equality check
+   }
+
+   prepareData(context: RenderingContext, instance: any): void {
+      let { data } = instance;
+
+      if (data.params !== instance.cachedParams && this.onResolve) {
+         instance.cachedParams = data.params;
+         let content = instance.invoke("onResolve", data.params, instance);
+         if (isPromise(content)) {
+            instance.set("loading", true);
+            this.setContent(instance, null);
+            content.then((cnt: any) => {
+               this.setContent(instance, cnt);
+               instance.setState({ cacheBuster: {} });
+               instance.set("loading", false);
+            });
+         } else this.setContent(instance, content);
+      }
+   }
+
+   setContent(instance: any, content: any): void {
+      if (content) {
+         this.clear();
+         switch (this.mode) {
+            case "prepend":
+               this.add(content);
+               this.add(this.initialItems);
+               break;
+
+            case "append":
+               this.add(this.initialItems);
+               this.add(content);
+               break;
+
+            case "replace":
+               this.add(content);
+               break;
+         }
+         instance.content = this.layout ? this.layout.items : this.items;
+         this.clear();
+      } else instance.content = this.initialItems;
+   }
+
+   explore(context: RenderingContext, instance: any): void {
+      //a little bit hacky
+      if (this.layout) this.layout.items = instance.content;
+      else this.items = instance.content;
+      super.explore(context, instance);
+   }
+}
+
+ContentResolver.prototype.mode = "replace";
diff --git a/packages/cx/src/ui/Controller.d.ts b/packages/cx/src/ui/Controller.d.ts
deleted file mode 100644
index 9de56a641..000000000
--- a/packages/cx/src/ui/Controller.d.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-import * as Cx from "../core";
-
-import { View } from "../data/View";
-import { Instance } from "./Instance";
-
-export class Controller<D = any> {
-   onInit?(): void;
-
-   onExplore?(context?): void;
-
-   onPrepare?(context?): void;
-
-   onCleanup?(context?): void;
-
-   onDestroy?(): void;
-
-   init?(): void;
-
-   store: View<D>;
-   widget: any;
-   instance: Instance<D, Controller<D>>;
-
-   addTrigger<V1>(name: string, args: [Cx.AccessorChain<V1>], callback: (v1: V1) => void, autoRun?: boolean): void;
-   addTrigger<V1, V2>(
-      name: string,
-      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>],
-      callback: (v1: V1, v2: V2) => void,
-      autoRun?: boolean,
-   ): void;
-   addTrigger<V1, V2, V3>(
-      name: string,
-      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>],
-      callback: (v1: V1, v2: V2, v3: V3) => void,
-      autoRun?: boolean,
-   ): void;
-   addTrigger<V1, V2, V3, V4>(
-      name: string,
-      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>, Cx.AccessorChain<V4>],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4) => void,
-      autoRun?: boolean,
-   ): void;
-   addTrigger<V1, V2, V3, V4, V5>(
-      name: string,
-      args: [
-         Cx.AccessorChain<V1>,
-         Cx.AccessorChain<V2>,
-         Cx.AccessorChain<V3>,
-         Cx.AccessorChain<V4>,
-         Cx.AccessorChain<V5>,
-      ],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5) => void,
-      autoRun?: boolean,
-   ): void;
-   addTrigger<V1, V2, V3, V4, V5, V6>(
-      name: string,
-      args: [
-         Cx.AccessorChain<V1>,
-         Cx.AccessorChain<V2>,
-         Cx.AccessorChain<V3>,
-         Cx.AccessorChain<V4>,
-         Cx.AccessorChain<V5>,
-         Cx.AccessorChain<V6>,
-      ],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6) => void,
-      autoRun?: boolean,
-   ): void;
-   addTrigger<V1, V2, V3, V4, V5, V6, V7>(
-      name: string,
-      args: [
-         Cx.AccessorChain<V1>,
-         Cx.AccessorChain<V2>,
-         Cx.AccessorChain<V3>,
-         Cx.AccessorChain<V4>,
-         Cx.AccessorChain<V5>,
-         Cx.AccessorChain<V6>,
-         Cx.AccessorChain<V7>,
-      ],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7) => void,
-      autoRun?: boolean,
-   ): void;
-   addTrigger<V1, V2, V3, V4, V5, V6, V7, V8>(
-      name: string,
-      args: [
-         Cx.AccessorChain<V1>,
-         Cx.AccessorChain<V2>,
-         Cx.AccessorChain<V3>,
-         Cx.AccessorChain<V4>,
-         Cx.AccessorChain<V5>,
-         Cx.AccessorChain<V6>,
-         Cx.AccessorChain<V7>,
-         Cx.AccessorChain<V8>,
-      ],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7, v8: V8) => void,
-      autoRun?: boolean,
-   ): void;
-
-   addTrigger(
-      name: string,
-      args: (string | Cx.AccessorChain<any>)[],
-      callback: (...args) => void,
-      autoRun?: boolean,
-   ): void;
-
-   addComputable<V1, R>(path: Cx.AccessorChain<R>, args: [Cx.AccessorChain<V1>], callback: (v1: V1) => R): void;
-   addComputable<V1, V2, R>(
-      path: Cx.AccessorChain<R>,
-      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>],
-      callback: (v1: V1, v2: V2) => R,
-   ): void;
-   addComputable<V1, V2, V3, R>(
-      path: Cx.AccessorChain<R>,
-      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>],
-      callback: (v1: V1, v2: V2, v3: V3) => R,
-   ): void;
-   addComputable<V1, V2, V3, V4, R>(
-      path: Cx.AccessorChain<R>,
-      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>, Cx.AccessorChain<V4>],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4) => R,
-   ): void;
-   addComputable<V1, V2, V3, V4, V5, R>(
-      path: Cx.AccessorChain<R>,
-      args: [
-         Cx.AccessorChain<V1>,
-         Cx.AccessorChain<V2>,
-         Cx.AccessorChain<V3>,
-         Cx.AccessorChain<V4>,
-         Cx.AccessorChain<V5>,
-      ],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5) => R,
-   ): void;
-   addComputable<V1, V2, V3, V4, V5, V6, R>(
-      path: Cx.AccessorChain<R>,
-      args: [
-         Cx.AccessorChain<V1>,
-         Cx.AccessorChain<V2>,
-         Cx.AccessorChain<V3>,
-         Cx.AccessorChain<V4>,
-         Cx.AccessorChain<V5>,
-         Cx.AccessorChain<V6>,
-      ],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6) => R,
-   ): void;
-   addComputable<V1, V2, V3, V4, V5, V6, V7, R>(
-      path: Cx.AccessorChain<R>,
-      args: [
-         Cx.AccessorChain<V1>,
-         Cx.AccessorChain<V2>,
-         Cx.AccessorChain<V3>,
-         Cx.AccessorChain<V4>,
-         Cx.AccessorChain<V5>,
-         Cx.AccessorChain<V6>,
-         Cx.AccessorChain<V7>,
-      ],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7) => R,
-   ): void;
-   addComputable<V1, V2, V3, V4, V5, V6, V7, V8, R>(
-      path: Cx.AccessorChain<R>,
-      args: [
-         Cx.AccessorChain<V1>,
-         Cx.AccessorChain<V2>,
-         Cx.AccessorChain<V3>,
-         Cx.AccessorChain<V4>,
-         Cx.AccessorChain<V5>,
-         Cx.AccessorChain<V6>,
-         Cx.AccessorChain<V7>,
-         Cx.AccessorChain<V8>,
-      ],
-      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7, v8: V8) => R,
-   ): void;
-
-   addComputable(path: string, args: (string | Cx.AccessorChain<any>)[], callback: (...args) => any): void;
-
-   removeTrigger(name: string): void;
-
-   removeComputable(name: string): void;
-
-   /** Invoke a method found on a parent controller. */
-   invokeParentMethod(methodName: string, ...args: any[]);
-
-   /** Invoke a method of this controller. */
-   invokeMethod(methodName: string, ...args: any[]);
-}
diff --git a/packages/cx/src/ui/Controller.js b/packages/cx/src/ui/Controller.js
deleted file mode 100644
index 559e1c805..000000000
--- a/packages/cx/src/ui/Controller.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { computable } from "../data/computable";
-import { Component } from "../util/Component";
-import { isArray } from "../util/isArray";
-import { isFunction } from "../util/isFunction";
-import { StoreProxy } from "../data/StoreProxy";
-
-const computablePrefix = "computable-";
-const triggerPrefix = "trigger-";
-
-export class Controller extends Component {
-   init(context) {
-      if (!this.initialized) {
-         this.initialized = true;
-         if (this.onInit) this.onInit(context);
-      }
-   }
-
-   explore(context) {
-      let { store } = this.instance;
-      this.store = store; //in rare cases instance may change its store
-
-      if (!this.initialized) {
-         this.init(context);
-         //forgive if the developer forgets to call super.init()
-         this.initialized = true;
-      }
-
-      if (this.computables) {
-         for (let key in this.computables) {
-            let x = this.computables[key];
-            let v = x.selector(store.getData());
-            if (x.type == "computable") store.set(x.name, v);
-         }
-      }
-
-      if (this.onExplore) {
-         this.onExplore(context);
-      }
-   }
-
-   prepare(context) {
-      if (this.onPrepare) {
-         this.onPrepare(context);
-      }
-   }
-
-   cleanup(context) {
-      if (this.onCleanup) {
-         this.onCleanup(context);
-      }
-   }
-
-   addComputable(name, args, callback) {
-      if (!isArray(args)) throw new Error("Second argument to the addComputable method should be an array.");
-      let selector = computable(...args, callback).memoize();
-      if (!this.computables) this.computables = {};
-      this.computables[computablePrefix + name] = { name, selector, type: "computable" };
-   }
-
-   addTrigger(name, args, callback, autoRun) {
-      if (!isArray(args)) throw new Error("Second argument to the addTrigger method should be an array.");
-      let selector = computable(...args, callback).memoize(!autoRun && this.store.getData());
-      if (!this.computables) this.computables = {};
-      this.computables[triggerPrefix + name] = { name, selector, type: "trigger" };
-   }
-
-   removeTrigger(name) {
-      if (this.computables) delete this.computables[triggerPrefix + name];
-   }
-
-   removeComputable(name) {
-      if (this.computables) delete this.computables[computablePrefix + name];
-   }
-
-   invokeParentMethod(methodName, ...args) {
-      let parent = this.instance.parent;
-      return parent.invokeControllerMethod(methodName, ...args);
-   }
-
-   invokeMethod(methodName, ...args) {
-      return this.instance.invokeControllerMethod(methodName, ...args);
-   }
-}
-
-Controller.namespace = "ui.controller.";
-
-Controller.factory = function (alias, config, more) {
-   if (isFunction(alias)) {
-      let cfg = {
-         ...config,
-         ...more,
-      };
-
-      if (cfg.instance) {
-         //in rare cases instance.store may change, so we cannot rely on the store passed through configuration
-         cfg.store = new StoreProxy(() => cfg.instance.store);
-         Object.assign(cfg, cfg.store.getMethods());
-      }
-
-      let result = alias(cfg);
-      if (result instanceof Controller) return result;
-
-      return Controller.create({
-         ...config,
-         ...more,
-         ...result,
-      });
-   }
-
-   return Controller.create({
-      ...config,
-      ...more,
-   });
-};
diff --git a/packages/cx/src/ui/Controller.spec.js b/packages/cx/src/ui/Controller.spec.js
deleted file mode 100644
index 0283e2f7f..000000000
--- a/packages/cx/src/ui/Controller.spec.js
+++ /dev/null
@@ -1,415 +0,0 @@
-import { Cx } from './Cx';
-import { VDOM } from './Widget';
-import { HtmlElement } from '../widgets/HtmlElement';
-import { Store } from '../data/Store';
-import { Controller } from './Controller';
-
-import renderer from 'react-test-renderer';
-import assert from 'assert';
-
-describe('Controller', () => {
-
-   it('invokes lifetime methods', () => {
-
-      let init = 0,
-         prepare = 0,
-         explore = 0,
-         cleanup = 0;
-
-      class TestController extends Controller {
-         onInit() {
-            init++;
-         }
-
-         onExplore() {
-            explore++;
-         }
-
-         onPrepare() {
-            prepare++;
-         }
-
-         onCleanup() {
-            cleanup++;
-         }
-      }
-
-      let widget = <cx>
-         <div controller={TestController}/>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      let tree = component.toJSON();
-      assert.equal(init, 1);
-      assert.equal(explore, 1);
-      assert.equal(prepare, 1);
-      assert.equal(cleanup, 1);
-   });
-
-   it('widgets invoke controller methods specified as strings', () => {
-
-      let callback = 0;
-
-      class TestController extends Controller {
-         callback() {
-            ++callback;
-         }
-      }
-
-      class Cmp extends VDOM.Component {
-         render() {
-            return <div/>
-         }
-
-         componentDidMount() {
-            this.props.instance.invoke("onTest");
-         }
-      }
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <Cmp controller={TestController} onTest="callback"/>
-         </Cx>
-      );
-
-      let tree = component.toJSON();
-      assert.equal(callback, 1);
-   });
-
-   it('widgets can access controller methods specified in ancestor controllers', () => {
-
-      let callback1 = 0;
-      let callback2 = 0;
-
-      class TestController1 extends Controller {
-         callback1() {
-            ++callback1;
-         }
-      }
-
-      class TestController2 extends Controller {
-         callback2() {
-            ++callback2;
-         }
-      }
-
-      class Cmp extends VDOM.Component {
-         render() {
-            return <div/>
-         }
-
-         componentDidMount() {
-            this.props.instance.invoke("onTest");
-         }
-      }
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div controller={TestController1}>
-               <Cmp controller={TestController2} onTest="callback1"/>
-            </div>
-         </Cx>
-      );
-
-      let tree = component.toJSON();
-      assert.equal(callback1, 1);
-      assert.equal(callback2, 0);
-   });
-
-   it('ancestor controllers are initialized first', () => {
-
-      let order = [];
-
-      class TestController1 extends Controller {
-         onInit() {
-            order.push("1");
-         }
-      }
-
-      class TestController2 extends Controller {
-         onInit() {
-            order.push("2");
-         }
-      }
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div controller={TestController1}>
-               <div controller={TestController2}/>
-            </div>
-         </Cx>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(order, ["1", "2"]);
-   });
-
-   it('controllers on invisible elements are not initialized', () => {
-
-      let order = [];
-
-      class TestController1 extends Controller {
-         onInit() {
-            order.push("1");
-         }
-      }
-
-      class TestController2 extends Controller {
-         onInit() {
-            order.push("2");
-         }
-      }
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div controller={TestController1}>
-               <div visible={false} controller={TestController2}/>
-            </div>
-         </Cx>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(order, ["1"]);
-   });
-
-   it('invokes triggers and computables in order of definition', () => {
-      let log = [];
-
-      class TestController extends Controller {
-         onInit() {
-            this.addTrigger('t1', [], () => {
-               log.push('t1');
-            }, true);
-
-            this.addComputable('c1', [], () => {
-               log.push('c1');
-               return null;
-            });
-
-            this.addTrigger('t2', [], () => {
-               log.push('t2');
-            }, true)
-         }
-      }
-
-      let widget = <cx>
-         <div controller={TestController}/>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(log, ["t1", "c1", "t2"]);
-   });
-
-   it('is recreated if a component is hidden and shown', () => {
-      let initCount = 0;
-
-      class TestController extends Controller {
-         onInit() {
-            initCount++;
-         }
-      }
-
-      let store = new Store();
-      store.set('visible', true);
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div visible:bind="visible" controller={TestController}/>
-         </Cx>
-      );
-
-      let tree1 = component.toJSON();
-      assert.equal(initCount, 1);
-
-      store.set('visible', false);
-      let tree2 = component.toJSON();
-      assert.equal(tree2, null);
-
-      store.set('visible', true);
-      let tree3 = component.toJSON();
-      assert.equal(initCount, 2);
-   });
-
-   it('allows creation through a factory', () => {
-      let store = new Store({ data: { x: 0}});
-
-      const controllerFactory = ({store}) => {
-         return {
-            increment() {
-               store.update("x", x => x + 1);
-            }
-         }
-      };
-
-      let c = Controller.create(controllerFactory, {store});
-
-      c.increment();
-      assert.equal(store.get("x"), 1);
-   });
-
-   it('lifetime methods of a functional controller are properly invoked', () => {
-      let initCount = 0,
-         destroyCount = 0;
-
-      const testController = () => ({
-         onInit() {
-            initCount++;
-         },
-
-         onDestroy() {
-            destroyCount++;
-         }
-      });
-
-      let store = new Store();
-      store.set('visible', true);
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div visible:bind="visible" controller={testController}/>
-         </Cx>
-      );
-
-      let tree1 = component.toJSON();
-      assert.equal(initCount, 1);
-
-      store.set('visible', false);
-      let tree2 = component.toJSON();
-      assert.equal(destroyCount, 1);
-
-      store.set('visible', true);
-      let tree3 = component.toJSON();
-      assert.equal(initCount, 2);
-   });
-
-   it('widgets can easily define controller methods', () => {
-      let store = new Store({ data: { x: 0}});
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div
-               controller={{
-                  increment(count) {
-                     this.store.update("x", x => x + count);
-                  }
-               }}
-            >
-               <div
-                  controller={{
-                     onInit() {
-                        this.invokeParentMethod("increment", 1);
-                     }
-                  }}
-               />
-            </div>
-
-
-         </Cx>
-      );
-
-      let tree1 = component.toJSON();
-      assert.equal(store.get("x"), 1);
-   });
-
-   it('functional controllers get store methods through configuration', () => {
-      let store = new Store({ data: { x: 0}});
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div
-               controller={({update}) => ({
-                  increment(count) {
-                     update("x", x => x + count);
-                  }
-               })}
-            >
-               <div
-                  controller={{
-                     onInit() {
-                        this.invokeParentMethod("increment", 1);
-                     }
-                  }}
-               />
-            </div>
-         </Cx>
-      );
-
-      let tree1 = component.toJSON();
-      assert.equal(store.get("x"), 1);
-   });
-
-   it('addComputable accepts refs', () => {
-      let store = new Store({data: {x: 0}});
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div
-               controller={({ref}) => {
-                  let x = ref("x");
-                  return {
-                     onInit() {
-                        this.addComputable("y", [x], x => x + 1);
-                     }
-                  }
-               }}
-            />
-         </Cx>
-      );
-
-      let tree1 = component.toJSON();
-      assert.equal(store.get("y"), 1);
-   });
-
-   it('invokeParentMethod is invoked on parent instance', () => {
-
-      let testValid = [];
-
-      const TestController1 = {
-         onInit() {
-            this.test();
-         },
-         test() {
-            testValid.push(1);
-            this.invokeParentMethod('test', 2);
-         }
-      }
-
-      const TestController2 = {
-         test(val) {
-            testValid.push(val)
-         }
-      }
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div controller={TestController2}>
-               <div controller={TestController1}/>
-            </div>
-         </Cx>
-      );
-
-      // let tree = component.toJSON();
-      assert.deepStrictEqual(testValid, [1, 2]);
-   });
-});
\ No newline at end of file
diff --git a/packages/cx/src/ui/Controller.spec.tsx b/packages/cx/src/ui/Controller.spec.tsx
new file mode 100644
index 000000000..5a0771bc7
--- /dev/null
+++ b/packages/cx/src/ui/Controller.spec.tsx
@@ -0,0 +1,574 @@
+import { Store } from "../data/Store";
+import { Controller, ControllerConfig } from "./Controller";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import { VDOM, Widget, WidgetConfig } from "./Widget";
+import { Instance } from "./Instance";
+import { bind } from "./bind";
+import assert from "assert";
+import { RenderingContext } from "./RenderingContext";
+
+describe("Controller", () => {
+   it("invokes lifetime methods", async () => {
+      let init = 0,
+         prepare = 0,
+         explore = 0,
+         cleanup = 0;
+
+      class TestController extends Controller {
+         onInit() {
+            init++;
+         }
+
+         onExplore() {
+            explore++;
+         }
+
+         onPrepare() {
+            prepare++;
+         }
+
+         onCleanup() {
+            cleanup++;
+         }
+      }
+
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div controller={TestController} />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.equal(init, 1);
+      assert.equal(explore, 1);
+      assert.equal(prepare, 1);
+      assert.equal(cleanup, 1);
+   });
+
+   it("widgets invoke controller methods specified as strings", async () => {
+      let callback = 0;
+
+      class TestController extends Controller {
+         callback() {
+            ++callback;
+         }
+      }
+
+      interface CmpConfig extends WidgetConfig {
+         onTest: string;
+      }
+
+      class Cmp extends Widget<CmpConfig> {
+         render(context: RenderingContext, instance: Instance, key: string) {
+            instance.invoke("onTest");
+            return null;
+         }
+      }
+
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <Cmp controller={TestController} onTest="callback" />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.equal(callback, 1);
+   });
+
+   it("widgets can access controller methods specified in ancestor controllers", async () => {
+      let callback1 = 0;
+      let callback2 = 0;
+
+      class TestController1 extends Controller {
+         callback1() {
+            ++callback1;
+         }
+      }
+
+      class TestController2 extends Controller {
+         callback2() {
+            ++callback2;
+         }
+      }
+
+      interface CmpConfig extends WidgetConfig {
+         onTest: string;
+      }
+
+      class Cmp extends Widget<CmpConfig> {
+         render(context: RenderingContext, instance: Instance, key: string) {
+            instance.invoke("onTest");
+            return null;
+         }
+      }
+
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div controller={TestController1}>
+               <Cmp controller={TestController2} onTest="callback1" />
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.equal(callback1, 1);
+      assert.equal(callback2, 0);
+   });
+
+   it("ancestor controllers are initialized first", async () => {
+      let order: string[] = [];
+
+      class TestController1 extends Controller {
+         onInit() {
+            order.push("1");
+         }
+      }
+
+      class TestController2 extends Controller {
+         onInit() {
+            order.push("2");
+         }
+      }
+
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div controller={TestController1}>
+               <div controller={TestController2} />
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(order, ["1", "2"]);
+   });
+
+   it("controllers on invisible elements are not initialized", async () => {
+      let order: string[] = [];
+
+      class TestController1 extends Controller {
+         onInit() {
+            order.push("1");
+         }
+      }
+
+      class TestController2 extends Controller {
+         onInit() {
+            order.push("2");
+         }
+      }
+
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div controller={TestController1}>
+               <div visible={false} controller={TestController2} />
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(order, ["1"]);
+   });
+
+   it("invokes triggers and computables in order of definition", async () => {
+      let log: string[] = [];
+
+      class TestController extends Controller {
+         onInit() {
+            this.addTrigger(
+               "t1",
+               [],
+               () => {
+                  log.push("t1");
+               },
+               true,
+            );
+
+            this.addComputable("c1", [], () => {
+               log.push("c1");
+               return null;
+            });
+
+            this.addTrigger(
+               "t2",
+               [],
+               () => {
+                  log.push("t2");
+               },
+               true,
+            );
+         }
+      }
+
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div controller={TestController} />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(log, ["t1", "c1", "t2"]);
+   });
+
+   it("is recreated if a component is hidden and shown", async () => {
+      let initCount = 0;
+
+      class TestController extends Controller {
+         onInit() {
+            initCount++;
+         }
+      }
+
+      let store = new Store();
+      store.set("visible", true);
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div visible={bind("visible")} controller={TestController} />
+         </cx>,
+      );
+
+      let tree1 = component.toJSON();
+      assert.equal(initCount, 1);
+
+      await act(async () => {
+         store.set("visible", false);
+      });
+      let tree2 = component.toJSON();
+      assert.equal(tree2, null);
+
+      await act(async () => {
+         store.set("visible", true);
+      });
+      let tree3 = component.toJSON();
+      assert.equal(initCount, 2);
+   });
+
+   it("allows creation through a factory", () => {
+      let store = new Store({ data: { x: 0 } });
+
+      const controllerFactory = ({ store }: { store: Store }) => {
+         return {
+            increment() {
+               store.update("x", (x: number) => x + 1);
+            },
+         };
+      };
+
+      let c = Controller.create(controllerFactory, { store }) as any;
+
+      c.increment();
+      assert.equal(store.get("x"), 1);
+   });
+
+   it("lifetime methods of a functional controller are properly invoked", async () => {
+      let initCount = 0,
+         destroyCount = 0;
+
+      const testController = () => ({
+         onInit() {
+            initCount++;
+         },
+
+         onDestroy() {
+            destroyCount++;
+         },
+      });
+
+      let store = new Store();
+      store.set("visible", true);
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div visible={bind("visible")} controller={testController} />
+         </cx>,
+      );
+
+      let tree1 = component.toJSON();
+      assert.equal(initCount, 1);
+
+      await act(async () => {
+         store.set("visible", false);
+      });
+      let tree2 = component.toJSON();
+      assert.equal(destroyCount, 1);
+
+      await act(async () => {
+         store.set("visible", true);
+      });
+      let tree3 = component.toJSON();
+      assert.equal(initCount, 2);
+   });
+
+   it("widgets can easily define controller methods", async () => {
+      let store = new Store({ data: { x: 0 } });
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div
+               controller={{
+                  increment(count: number) {
+                     this.store.update("x", (x: number) => x + count);
+                  },
+               }}
+            >
+               <div
+                  controller={{
+                     onInit() {
+                        this.invokeParentMethod("increment", 1);
+                     },
+                  }}
+               />
+            </div>
+         </cx>,
+      );
+
+      let tree1 = component.toJSON();
+      assert.equal(store.get("x"), 1);
+   });
+
+   it("functional controllers get store methods through configuration", async () => {
+      let store = new Store({ data: { x: 0 } });
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div
+               controller={({ update }) => ({
+                  increment(count: number) {
+                     update("x", (x: number) => x + count);
+                  },
+               })}
+            >
+               <div
+                  controller={{
+                     onInit() {
+                        this.invokeParentMethod("increment", 1);
+                     },
+                  }}
+               />
+            </div>
+         </cx>,
+      );
+
+      let tree1 = component.toJSON();
+      assert.equal(store.get("x"), 1);
+   });
+
+   it("addComputable accepts refs", async () => {
+      let store = new Store({ data: { x: 0 } });
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div
+               controller={({ ref }) => {
+                  let x = ref("x");
+                  return {
+                     onInit() {
+                        this.addComputable("y", [x], (x: number) => x + 1);
+                     },
+                  };
+               }}
+            />
+         </cx>,
+      );
+
+      let tree1 = component.toJSON();
+      assert.equal(store.get("y"), 1);
+   });
+
+   it("invokeParentMethod is invoked on parent instance", async () => {
+      let testValid: number[] = [];
+
+      class TestController1 extends Controller {
+         onInit() {
+            this.test();
+         }
+         test() {
+            testValid.push(1);
+            this.invokeParentMethod("test", 2);
+         }
+      }
+
+      class TestController2 extends Controller {
+         test(val: number) {
+            testValid.push(val);
+         }
+      }
+
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div controller={TestController2}>
+               <div controller={TestController1} />
+            </div>
+         </cx>,
+      );
+
+      // let tree = component.toJSON();
+      assert.deepStrictEqual(testValid, [1, 2]);
+   });
+});
+
+describe("Controller types", () => {
+   // Type-level tests - these verify that types work correctly at compile time
+   // If these compile, the types are working
+
+   interface MyControllerConfig extends ControllerConfig {
+      customValue?: number;
+      customMethod?(): void;
+   }
+
+   class MyController extends Controller {
+      declare customValue: number;
+
+      constructor(config?: MyControllerConfig) {
+         super(config);
+      }
+
+      customMethod() {
+         return this.customValue * 2;
+      }
+   }
+
+   it("accepts Controller class directly", async () => {
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div controller={MyController} />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.ok(tree);
+   });
+
+   it("accepts config with type property", async () => {
+      let store = new Store();
+      let initCalled = false;
+
+      class TypedController extends Controller {
+         declare customValue: number;
+
+         constructor(config?: MyControllerConfig) {
+            super(config);
+         }
+
+         onInit() {
+            initCalled = true;
+            assert.equal(this.customValue, 42);
+         }
+      }
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div controller={{ type: TypedController, customValue: 42 }} />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.ok(tree);
+      assert.equal(initCalled, true);
+   });
+
+   it("accepts inline config object with ThisType", async () => {
+      let store = new Store({ data: { count: 0 } });
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div
+               controller={{
+                  onInit() {
+                     // This should have access to ControllerMethods via ThisType
+                     this.store.set("count", 1);
+                  },
+               }}
+            />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.equal(store.get("count"), 1);
+   });
+
+   it("accepts factory function", async () => {
+      let store = new Store({ data: { count: 0 } });
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div
+               controller={({ set }) => ({
+                  onInit() {
+                     set("count", 5);
+                  },
+               })}
+            />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.equal(store.get("count"), 5);
+   });
+
+   it("accepts CreateConfig with type and required properties", async () => {
+      let store = new Store({ data: { result: 0 } });
+
+      interface RequiredPropControllerConfig extends ControllerConfig {
+         multiplier: number; // Required property
+      }
+
+      class RequiredPropController extends Controller {
+         declare multiplier: number;
+
+         constructor(config?: RequiredPropControllerConfig) {
+            super(config);
+         }
+
+         onInit() {
+            this.store.set("result", 10 * this.multiplier);
+         }
+      }
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div
+               controller={{
+                  type: RequiredPropController,
+                  multiplier: 5,
+               }}
+            />
+         </cx>,
+      );
+
+      assert.equal(store.get("result"), 50);
+   });
+});
diff --git a/packages/cx/src/ui/Controller.ts b/packages/cx/src/ui/Controller.ts
new file mode 100644
index 000000000..377fe5919
--- /dev/null
+++ b/packages/cx/src/ui/Controller.ts
@@ -0,0 +1,202 @@
+import { computable, ComputableSelector, InferSelectorValue } from "../data/computable";
+import { Component, ComponentConstructor, ComponentConfigType } from "../util/Component";
+import { isArray } from "../util/isArray";
+import { isFunction } from "../util/isFunction";
+import { StoreProxy } from "../data/StoreProxy";
+import { RenderingContext } from "./RenderingContext";
+import { View, ViewMethods } from "../data/View";
+import { Widget } from "./Widget";
+import { Instance } from "./Instance";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+
+const computablePrefix = "computable-";
+const triggerPrefix = "trigger-";
+
+interface ComputableEntry {
+   name: string;
+   selector: any;
+   type: "computable" | "trigger";
+}
+
+// Controller methods interface for ThisType in config objects
+export interface ControllerMethods {
+   store: View;
+   instance: Instance;
+   widget?: Widget;
+   invokeParentMethod(method: string, ...args: any[]): any;
+   addTrigger<Selectors extends readonly ComputableSelector[]>(
+      name: string,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => any,
+      autoRun?: boolean,
+   ): void;
+   addComputable<T, Selectors extends readonly ComputableSelector[]>(
+      name: AccessorChain<T>,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => T,
+   ): void;
+   addComputable<Selectors extends readonly ComputableSelector[]>(
+      name: string,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => any,
+   ): void;
+}
+
+export interface BaseControllerConfig {
+   store?: View;
+   instance?: Instance;
+   widget?: Widget;
+
+   onInit?: (context: RenderingContext) => void;
+   onExplore?: (context: RenderingContext) => void;
+   onPrepare?: (context: RenderingContext) => void;
+   onCleanup?: (context: RenderingContext) => void;
+   onDestroy?: () => void;
+}
+
+// Controller config object type with Controller methods AND its own methods available on 'this'
+export type ControllerConfig<T extends BaseControllerConfig = BaseControllerConfig> = T &
+   ThisType<ControllerMethods & T>;
+
+/** Controller factory function type */
+export type ControllerFactory<T extends BaseControllerConfig = BaseControllerConfig> = (
+   config: ViewMethods,
+) => ControllerConfig<T>;
+
+export class Controller<D = any> extends Component implements ControllerMethods {
+   initialized?: boolean;
+   onInit?(context: RenderingContext): void;
+   onExplore?(context: RenderingContext): void;
+   onPrepare?(context: RenderingContext): void;
+   onCleanup?(context: RenderingContext): void;
+   onDestroy?(): void;
+   declare instance: Instance;
+   declare store: View<D>;
+   declare widget?: Widget;
+   computables?: Record<string, ComputableEntry>;
+
+   constructor(config?: BaseControllerConfig) {
+      super(config);
+   }
+
+   init(context?: RenderingContext): void {
+      if (!this.initialized) {
+         this.initialized = true;
+         if (this.onInit && context) this.onInit(context);
+      }
+   }
+
+   explore(context: RenderingContext): void {
+      let { store } = this.instance;
+      this.store = store; //in rare cases instance may change its store
+
+      if (!this.initialized) {
+         this.init(context);
+         //forgive if the developer forgets to call super.init()
+         this.initialized = true;
+      }
+
+      if (this.computables) {
+         for (let key in this.computables) {
+            let x = this.computables[key];
+            let v = x.selector(store.getData());
+            if (x.type == "computable") store.set(x.name, v);
+         }
+      }
+
+      if (this.onExplore) {
+         this.onExplore(context);
+      }
+   }
+
+   prepare(context: RenderingContext): void {
+      if (this.onPrepare) {
+         this.onPrepare(context);
+      }
+   }
+
+   cleanup(context: RenderingContext): void {
+      if (this.onCleanup) {
+         this.onCleanup(context);
+      }
+   }
+
+   addComputable<T, Selectors extends readonly ComputableSelector[]>(
+      name: AccessorChain<T>,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => T,
+   ): void;
+   addComputable<Selectors extends readonly ComputableSelector[]>(
+      name: string,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => any,
+   ): void;
+   addComputable(name: string | AccessorChain<any>, args: ComputableSelector[], callback: (...values: any[]) => any): void {
+      if (!isArray(args)) throw new Error("Second argument to the addComputable method should be an array.");
+      let selector = computable(...args, callback).memoize();
+      if (!this.computables) this.computables = {};
+      let nameStr = String(name);
+      this.computables[computablePrefix + nameStr] = { name: nameStr, selector, type: "computable" };
+   }
+
+   addTrigger<Selectors extends readonly ComputableSelector[]>(
+      name: string,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => any,
+      autoRun?: boolean,
+   ): void {
+      if (!isArray(args)) throw new Error("Second argument to the addTrigger method should be an array.");
+      let selector = computable(...args, callback).memoize(!autoRun && this.store.getData());
+      if (!this.computables) this.computables = {};
+      this.computables[triggerPrefix + name] = { name, selector, type: "trigger" };
+   }
+
+   removeTrigger(name: string): void {
+      if (this.computables) delete this.computables[triggerPrefix + name];
+   }
+
+   removeComputable(name: string): void {
+      if (this.computables) delete this.computables[computablePrefix + name];
+   }
+
+   invokeParentMethod(methodName: string, ...args: any[]): any {
+      let parent = this.instance.parent;
+      if (!parent) throw new Error("Cannot invoke a parent controller method as the instance does not have a parent.");
+      return parent.invokeControllerMethod(methodName, ...args);
+   }
+
+   invokeMethod(methodName: string, ...args: any[]): any {
+      return this.instance.invokeControllerMethod(methodName, ...args);
+   }
+}
+
+Controller.namespace = "ui.controller.";
+
+Controller.factory = function (alias: any, config?: any, more?: any) {
+   if (isFunction(alias)) {
+      let cfg = {
+         ...config,
+         ...more,
+      };
+
+      if (cfg.instance) {
+         //in rare cases instance.store may change, so we cannot rely on the store passed through configuration
+         cfg.store = new StoreProxy(() => cfg.instance.store);
+         Object.assign(cfg, cfg.store.getMethods());
+      }
+
+      let result = alias(cfg);
+      if (result instanceof Controller) return result;
+
+      return Controller.create({
+         ...config,
+         ...more,
+         ...result,
+      });
+   }
+
+   return Controller.create({
+      ...config,
+      ...more,
+   });
+};
diff --git a/packages/cx/src/ui/Culture.d.ts b/packages/cx/src/ui/Culture.d.ts
deleted file mode 100644
index 4b49e5f03..000000000
--- a/packages/cx/src/ui/Culture.d.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-declare type DateEncoding = (date: Date) => any;
-
-export class Culture {
-   static setCulture(cultureCode: string): void;
-
-   static setDefaultCurrency(currencyCode: string): void;
-
-   static setDefaultTimezone(timezone: string): void;
-
-   static readonly defaultCurrency: string;
-
-   static readonly culture: string;
-
-   static setNumberCulture(cultureCode: string): void;
-
-   static getNumberCulture(): any;
-
-   static setDateTimeCulture(cultureCode: string): void;
-
-   static getDateTimeCulture(): any;
-
-   static getDefaultDateEncoding(): DateEncoding;
-
-   static setDefaultDateEncoding(encoding: DateEncoding): void;
-
-   static invalidateCache(): void;
-}
-
-export interface CultureSpecs {
-   culture?: string;
-   numberCulture?: string;
-   dateTimeCulture?: string;
-   defaultCurrency?: string;
-   dateEncoding?: DateEncoding;
-   timezone?: string;
-}
-
-export interface CultureInfo {
-   culture: string;
-   numberCulture?: string;
-   dateTimeCulture?: string;
-   defaultCurrency: string;
-   dateEncoding: DateEncoding;
-   timezone?: string;
-}
-
-export function createCulture(cultureSpecs: CultureSpecs): CultureInfo;
-
-export function pushCulture(cultureSpecs: CultureInfo): void;
-
-export function popCulture(cultureSpecs?: CultureInfo): CultureInfo;
-
-export function getCurrentCultureCache(): any;
-
-export function getCurrentCulture(): CultureInfo;
-
-export function getDefaultCulture(): CultureInfo;
diff --git a/packages/cx/src/ui/Culture.js b/packages/cx/src/ui/Culture.js
deleted file mode 100644
index 057a7d755..000000000
--- a/packages/cx/src/ui/Culture.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import { NumberCulture, DateTimeCulture } from "intl-io";
-import { Localization } from "./Localization";
-import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
-import { invalidateExpressionCache } from "../data/Expression";
-import { invalidateStringTemplateCache } from "../data/StringTemplate";
-import { defaultCompare } from "../data/defaultCompare";
-import { Console } from "../util/Console";
-
-let stack = [
-   {
-      culture: "en",
-      numberCulture: null,
-      dateTimeCulture: null,
-      cache: {},
-      defaultCurrency: "USD",
-      dateEncoding: (date) => date.toISOString(),
-      timezone: null,
-   },
-];
-
-export function getDefaultCulture() {
-   return stack[0];
-}
-
-export function getCurrentCulture() {
-   return stack[stack.length - 1];
-}
-
-export function getCurrentCultureCache() {
-   return getCurrentCulture().cache;
-}
-
-export function pushCulture(cultureInfo) {
-   stack.push(cultureInfo);
-}
-
-export function createCulture(cultureSpecs) {
-   let current = getCurrentCulture();
-   let info = {
-      culture: current.culture,
-      dateEncoding: current.dateEncoding,
-      defaultCurrency: current.defaultCurrency,
-      cache: {},
-   };
-   for (let key in cultureSpecs) {
-      if (!cultureSpecs[key]) continue;
-      info[key] = cultureSpecs[key];
-   }
-   return info;
-}
-
-export function popCulture(cultureSpecs) {
-   if (stack.length == 1) throw new Error("Cannot pop the last culture object.");
-   if (cultureSpecs && stack[stack.length - 1] !== cultureSpecs) {
-      Console.warn("Popped culture object does not match the current one.");
-   }
-   return stack.pop();
-}
-
-export class Culture {
-   static setCulture(cultureCode) {
-      let cultureSpecs = getDefaultCulture();
-      cultureSpecs.culture = cultureCode;
-      cultureSpecs.cache = {};
-      Localization.setCulture(cultureCode);
-      this.invalidateCache();
-   }
-
-   static setNumberCulture(cultureCode) {
-      let cultureSpecs = getDefaultCulture();
-      cultureSpecs.numberCulture = cultureCode;
-      delete cultureSpecs.cache.numberCulture;
-      this.invalidateCache();
-   }
-
-   static setDateTimeCulture(cultureCode) {
-      let cultureSpecs = getDefaultCulture();
-      cultureSpecs.dateTimeCulture = cultureCode;
-      delete cultureSpecs.cache.dateTimeCulture;
-      this.invalidateCache();
-   }
-
-   static setDefaultCurrency(currencyCode) {
-      let cultureSpecs = getDefaultCulture();
-      cultureSpecs.defaultCurrency = currencyCode;
-      this.invalidateCache();
-   }
-
-   static setDefaultTimezone(timezone) {
-      let cultureSpecs = getDefaultCulture();
-      cultureSpecs.timezone = timezone;
-      this.invalidateCache();
-   }
-
-   static setDefaultDateEncoding(encoding) {
-      let cultureSpecs = getDefaultCulture();
-      cultureSpecs.dateEncoding = encoding;
-      this.invalidateCache();
-   }
-
-   static invalidateCache() {
-      GlobalCacheIdentifier.change();
-      invalidateExpressionCache();
-      invalidateStringTemplateCache();
-   }
-
-   static get defaultCurrency() {
-      return getCurrentCulture().defaultCurrency;
-   }
-
-   static get culture() {
-      return getCurrentCulture().culture;
-   }
-
-   static getNumberCulture() {
-      let { cache, numberCulture, culture } = getCurrentCulture();
-      if (!cache.numberCulture) cache.numberCulture = new NumberCulture(numberCulture ?? culture);
-      return cache.numberCulture;
-   }
-
-   static getDateTimeCulture() {
-      let { cache, dateTimeCulture, culture, timezone } = getCurrentCulture();
-      if (!cache.dateTimeCulture)
-         cache.dateTimeCulture = new DateTimeCulture(dateTimeCulture ?? culture, {
-            defaultTimezone: timezone,
-         });
-      return cache.dateTimeCulture;
-   }
-
-   static getDefaultDateEncoding() {
-      return getCurrentCulture().dateEncoding;
-   }
-
-   static getComparer(options) {
-      let { culture } = getCurrentCulture();
-      if (typeof Intl.Collator != "undefined") return new Intl.Collator(culture, options).compare;
-      return defaultCompare;
-   }
-}
diff --git a/packages/cx/src/ui/Culture.ts b/packages/cx/src/ui/Culture.ts
new file mode 100644
index 000000000..f9a64895f
--- /dev/null
+++ b/packages/cx/src/ui/Culture.ts
@@ -0,0 +1,159 @@
+// @ts-expect-error
+import { NumberCulture, DateTimeCulture } from "intl-io";
+import { Localization } from "./Localization";
+import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
+import { invalidateExpressionCache } from "../data/Expression";
+import { invalidateStringTemplateCache } from "../data/StringTemplate";
+import { defaultCompare } from "../data/defaultCompare";
+import { Console } from "../util/Console";
+
+export interface CultureInfo {
+   culture?: string;
+   numberCulture?: string | null;
+   dateTimeCulture?: string | null;
+   defaultCurrency?: string;
+   dateEncoding?: (date: Date) => string;
+   timezone?: string | null;
+}
+
+export interface ResolvedCultureInfo {
+   culture: string;
+   numberCulture?: string | null;
+   dateTimeCulture?: string | null;
+   cache: any;
+   defaultCurrency: string;
+   dateEncoding: (date: Date) => string;
+   timezone?: string | null;
+}
+
+let stack: ResolvedCultureInfo[] = [
+   {
+      culture: "en",
+      numberCulture: null,
+      dateTimeCulture: null,
+      cache: {},
+      defaultCurrency: "USD",
+      dateEncoding: (date: Date) => date.toISOString(),
+      timezone: null,
+   },
+];
+
+export function getDefaultCulture(): ResolvedCultureInfo {
+   return stack[0];
+}
+
+export function getCurrentCulture(): ResolvedCultureInfo {
+   return stack[stack.length - 1];
+}
+
+export function getCurrentCultureCache(): any {
+   return getCurrentCulture().cache;
+}
+
+export function pushCulture(cultureInfo: ResolvedCultureInfo): void {
+   stack.push(cultureInfo);
+}
+
+export function createCulture(cultureSpecs: Partial<CultureInfo>): ResolvedCultureInfo {
+   let current = getCurrentCulture();
+   let info: ResolvedCultureInfo = {
+      culture: current.culture,
+      dateEncoding: current.dateEncoding,
+      defaultCurrency: current.defaultCurrency,
+      cache: {},
+   };
+   for (let key in cultureSpecs) {
+      if (!(cultureSpecs as any)[key]) continue;
+      (info as any)[key] = (cultureSpecs as any)[key];
+   }
+   return info;
+}
+
+export function popCulture(cultureSpecs?: CultureInfo): CultureInfo | undefined {
+   if (stack.length == 1) throw new Error("Cannot pop the last culture object.");
+   if (cultureSpecs && stack[stack.length - 1] !== cultureSpecs) {
+      Console.warn("Popped culture object does not match the current one.");
+   }
+   return stack.pop();
+}
+
+export class Culture {
+   static setCulture(cultureCode: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.culture = cultureCode;
+      cultureSpecs.cache = {};
+      Localization.setCulture(cultureCode);
+      this.invalidateCache();
+   }
+
+   static setNumberCulture(cultureCode: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.numberCulture = cultureCode;
+      delete cultureSpecs.cache.numberCulture;
+      this.invalidateCache();
+   }
+
+   static setDateTimeCulture(cultureCode: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.dateTimeCulture = cultureCode;
+      delete cultureSpecs.cache.dateTimeCulture;
+      this.invalidateCache();
+   }
+
+   static setDefaultCurrency(currencyCode: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.defaultCurrency = currencyCode;
+      this.invalidateCache();
+   }
+
+   static setDefaultTimezone(timezone: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.timezone = timezone;
+      this.invalidateCache();
+   }
+
+   static setDefaultDateEncoding(encoding: (date: Date) => string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.dateEncoding = encoding;
+      this.invalidateCache();
+   }
+
+   static invalidateCache(): void {
+      GlobalCacheIdentifier.change();
+      invalidateExpressionCache();
+      invalidateStringTemplateCache();
+   }
+
+   static get defaultCurrency(): string | undefined {
+      return getCurrentCulture().defaultCurrency;
+   }
+
+   static get culture(): string | undefined {
+      return getCurrentCulture().culture;
+   }
+
+   static getNumberCulture(): NumberCulture {
+      let { cache, numberCulture, culture } = getCurrentCulture();
+      if (!cache!.numberCulture) cache!.numberCulture = new NumberCulture(numberCulture ?? culture);
+      return cache!.numberCulture;
+   }
+
+   static getDateTimeCulture(): DateTimeCulture {
+      let { cache, dateTimeCulture, culture, timezone } = getCurrentCulture();
+      if (!cache!.dateTimeCulture)
+         cache!.dateTimeCulture = new DateTimeCulture(dateTimeCulture ?? culture, {
+            defaultTimezone: timezone,
+         });
+      return cache!.dateTimeCulture;
+   }
+
+   static getDefaultDateEncoding(): (date: Date) => string {
+      return getCurrentCulture().dateEncoding;
+   }
+
+   static getComparer(options?: Intl.CollatorOptions): (a: any, b: any) => number {
+      let { culture } = getCurrentCulture();
+      if (typeof Intl.Collator != "undefined") return new Intl.Collator(culture, options).compare;
+      return defaultCompare;
+   }
+}
diff --git a/packages/cx/src/ui/Cx.d.ts b/packages/cx/src/ui/Cx.d.ts
deleted file mode 100644
index 1bfaaaf7e..000000000
--- a/packages/cx/src/ui/Cx.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { View } from "../data/View";
-import { Instance } from "./Instance";
-
-interface CxProps {
-   widget?: Cx.Config,
-   store?: View,
-   instance?: Instance,
-   parentInstance?: Instance,
-   subscribe?: boolean,
-   immediate?: boolean,
-   deferredUntilIdle?: boolean,
-   idleTimeout?: number,
-   options?: any,
-   onError?: (error: Error, instance: Instance, info: any) => void
-}
-
-export class Cx extends React.Component<CxProps, any> { }
diff --git a/packages/cx/src/ui/Cx.js b/packages/cx/src/ui/Cx.js
deleted file mode 100644
index be843b0b7..000000000
--- a/packages/cx/src/ui/Cx.js
+++ /dev/null
@@ -1,325 +0,0 @@
-import { Widget, VDOM, getContent } from "./Widget";
-import { Instance } from "./Instance";
-import { RenderingContext } from "./RenderingContext";
-import { debug, appDataFlag } from "../util/Debug";
-import { Timing, now, appLoopFlag, vdomRenderFlag } from "../util/Timing";
-import { isBatchingUpdates, notifyBatchedUpdateStarting, notifyBatchedUpdateCompleted } from "./batchUpdates";
-import { shallowEquals } from "../util/shallowEquals";
-import { PureContainer } from "./PureContainer";
-import { onIdleCallback } from "../util/onIdleCallback";
-import { getCurrentCulture, pushCulture, popCulture } from "./Culture";
-
-export class Cx extends VDOM.Component {
-   constructor(props) {
-      super(props);
-
-      if (props.instance) {
-         this.widget = props.instance.widget;
-         this.store = props.instance.store;
-      } else {
-         this.widget = PureContainer.create({ items: props.widget || props.items });
-
-         if (props.parentInstance) {
-            this.parentInstance = props.parentInstance;
-            this.store = props.store || this.parentInstance.store;
-         } else {
-            this.parentInstance = new Instance(this.widget, 0, null, props.store);
-            this.store = props.store;
-         }
-
-         if (!this.store) throw new Error("Cx component requires a store.");
-      }
-
-      this.state = {
-         deferToken: 0,
-      };
-
-      if (props.subscribe) {
-         this.unsubscribe = this.store.subscribe(this.update.bind(this));
-         this.state.data = this.store.getData();
-      }
-
-      this.flags = {};
-      this.renderCount = 0;
-
-      if (props.onError) this.componentDidCatch = this.componentDidCatchHandler.bind(this);
-
-      this.forceUpdateCallback = this.forceUpdate.bind(this);
-
-      this.deferCounter = 0;
-      this.waitForIdle();
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      let newStore = props.instance ? props.instance.store : props.store ? props.store : props.parentInstance.store;
-
-      if (newStore != this.store) {
-         this.store = newStore;
-         if (this.unsubscribe) this.unsubscribe();
-         if (props.subscribe) this.unsubscribe = this.store.subscribe(this.update.bind(this));
-      }
-
-      if (props.subscribe) {
-         let data = this.store.getData();
-         if (data !== this.state.data) {
-            this.waitForIdle();
-            this.setState({ data });
-         }
-      }
-   }
-
-   getInstance() {
-      if (this.props.instance) return this.props.instance;
-
-      if (this.instance && this.instance.widget === this.widget) {
-         if (this.instance.parentStore != this.store) this.instance.setParentStore(this.store);
-         return this.instance;
-      }
-
-      if (this.widget && this.parentInstance)
-         return (this.instance = this.parentInstance.getDetachedChild(this.widget, 0, this.store));
-
-      throw new Error("Could not resolve a widget instance in the Cx component.");
-   }
-
-   render() {
-      if (this.props.deferredUntilIdle && this.state.deferToken < this.deferCounter) return null;
-
-      let cultureInfo = this.props.cultureInfo ?? getCurrentCulture();
-
-      return (
-         <CxContext
-            instance={this.getInstance()}
-            flags={this.flags}
-            options={this.props.options}
-            buster={++this.renderCount}
-            contentFactory={this.props.contentFactory}
-            forceUpdate={this.forceUpdateCallback}
-            cultureInfo={cultureInfo}
-         />
-      );
-   }
-
-   componentDidMount() {
-      this.componentDidUpdate();
-
-      if (this.props.options && this.props.options.onPipeUpdate)
-         this.props.options.onPipeUpdate(this.update.bind(this));
-   }
-
-   componentDidUpdate() {
-      if (this.flags.dirty) {
-         this.update();
-      }
-   }
-
-   update() {
-      let data = this.store.getData();
-      debug(appDataFlag, data);
-      if (this.flags.preparing) this.flags.dirty = true;
-      else if (isBatchingUpdates() || this.props.immediate) {
-         notifyBatchedUpdateStarting();
-         this.setState({ data: data }, notifyBatchedUpdateCompleted);
-      } else {
-         //in standard mode sequential store commands are batched
-         if (!this.pendingUpdateTimer) {
-            notifyBatchedUpdateStarting();
-            this.pendingUpdateTimer = setTimeout(() => {
-               delete this.pendingUpdateTimer;
-               this.setState({ data: data }, notifyBatchedUpdateCompleted);
-            }, 0);
-         }
-      }
-   }
-
-   waitForIdle() {
-      if (!this.props.deferredUntilIdle) return;
-
-      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
-
-      let token = ++this.deferCounter;
-      this.unsubscribeIdleRequest = onIdleCallback(
-         () => {
-            this.setState({ deferToken: token });
-         },
-         {
-            timeout: this.props.idleTimeout || 30000,
-         },
-      );
-   }
-
-   componentWillUnmount() {
-      if (this.pendingUpdateTimer) clearTimeout(this.pendingUpdateTimer);
-      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
-      if (this.unsubscribe) this.unsubscribe();
-      if (this.props.options && this.props.options.onPipeUpdate) this.props.options.onPipeUpdate(null);
-   }
-
-   shouldComponentUpdate(props, state) {
-      if (props.deferredUntilIdle && state.deferToken != this.deferCounter) return false;
-
-      return (
-         state !== this.state ||
-         !props.params ||
-         !shallowEquals(props.params, this.props.params) ||
-         props.instance !== this.props.instance ||
-         props.widget !== this.props.widget ||
-         props.store !== this.props.store ||
-         props.parentInstance !== this.props.parentInstance ||
-         props.cultureInfo !== this.props.cultureInfo
-      );
-   }
-
-   componentDidCatchHandler(error, info) {
-      this.flags.preparing = false;
-      this.props.onError(error, this.getInstance(), info);
-   }
-}
-
-class CxContext extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.renderCount = 0;
-      this.UNSAFE_componentWillReceiveProps(props);
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      this.timings = {
-         start: now(),
-      };
-
-      let { instance, options, contentFactory } = props;
-      let count = 0,
-         visible,
-         context,
-         forceContinue;
-
-      //should not be tracked by parents for destroy
-      if (!instance.detached)
-         throw new Error("The instance passed to a Cx component should be detached from its parent.");
-
-      if (this.props.instance !== instance && this.props.instance.destroyTracked) this.props.instance.destroy();
-
-      this.props.flags.preparing = true;
-
-      if (this.props.cultureInfo) pushCulture(this.props.cultureInfo);
-
-      try {
-         do {
-            count++;
-            forceContinue = false;
-            context = new RenderingContext(options);
-            context.forceUpdate = this.props.forceUpdate;
-            this.props.flags.dirty = false;
-            instance.assignedRenderList = context.getRootRenderList();
-            visible = instance.scheduleExploreIfVisible(context);
-            if (visible) {
-               while (!context.exploreStack.empty()) {
-                  let inst = context.exploreStack.pop();
-                  //console.log("EXPLORE", inst.widget.constructor.name, inst.widget.tag, inst.widget.widgetId);
-                  inst.explore(context);
-               }
-            } else if (instance.destroyTracked) {
-               instance.destroy();
-            }
-
-            if (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8) {
-               forceContinue = true;
-               continue;
-            }
-
-            if (visible) {
-               this.timings.afterExplore = now();
-
-               for (let i = 0; i < context.prepareList.length; i++) context.prepareList[i].prepare(context);
-               this.timings.afterPrepare = now();
-            }
-         } while (
-            forceContinue ||
-            (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8)
-         );
-
-         if (visible) {
-            //walk in reverse order so children get rendered first
-            let renderList = context.getRootRenderList();
-            while (renderList) {
-               for (let i = renderList.data.length - 1; i >= 0; i--) {
-                  renderList.data[i].render(context);
-               }
-               renderList = renderList.right;
-            }
-
-            this.content = getContent(instance.vdom);
-            if (contentFactory) this.content = contentFactory({ children: this.content });
-            this.timings.afterRender = now();
-            for (let i = 0; i < context.cleanupList.length; i++) context.cleanupList[i].cleanup(context);
-         } else {
-            this.content = null;
-            this.timings.afterExplore = this.timings.afterPrepare = this.timings.afterRender = now();
-         }
-      } finally {
-         if (this.props.cultureInfo) popCulture(this.props.cultureInfo);
-      }
-
-      this.timings.beforeVDOMRender = now();
-      this.props.flags.preparing = false;
-      this.props.flags.rendering = true;
-      this.renderingContext = context;
-   }
-
-   render() {
-      return this.content;
-   }
-
-   componentDidMount() {
-      this.componentDidUpdate();
-   }
-
-   componentDidUpdate() {
-      this.props.flags.rendering = false;
-      this.timings.afterVDOMRender = now();
-
-      //let {instance} = this.props;
-      //instance.cleanup(this.renderingContext);
-
-      this.timings.afterCleanup = now();
-      this.renderCount++;
-
-      if (process.env.NODE_ENV !== "production") {
-         let { start, beforeVDOMRender, afterVDOMRender, afterPrepare, afterExplore, afterRender, afterCleanup } =
-            this.timings;
-
-         Timing.log(
-            vdomRenderFlag,
-            this.renderCount,
-            "cx",
-            (beforeVDOMRender - start + afterCleanup - afterVDOMRender).toFixed(2) + "ms",
-            "vdom",
-            (afterVDOMRender - beforeVDOMRender).toFixed(2) + "ms",
-         );
-
-         Timing.log(
-            appLoopFlag,
-            this.renderCount,
-            this.renderingContext.options.name || "main",
-            "total",
-            (afterCleanup - start).toFixed(1) + "ms",
-            "explore",
-            (afterExplore - start).toFixed(1) + "ms",
-            "prepare",
-            (afterPrepare - afterExplore).toFixed(1),
-            "render",
-            (afterRender - afterPrepare).toFixed(1),
-            "vdom",
-            (afterVDOMRender - beforeVDOMRender).toFixed(1),
-            "cleanup",
-            (afterCleanup - afterVDOMRender).toFixed(1),
-         );
-      }
-   }
-
-   componentWillUnmount() {
-      let { instance } = this.props;
-      if (instance.destroyTracked) instance.destroy();
-   }
-}
diff --git a/packages/cx/src/ui/Cx.spec.js b/packages/cx/src/ui/Cx.spec.js
deleted file mode 100644
index f560602ba..000000000
--- a/packages/cx/src/ui/Cx.spec.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import { Cx } from './Cx';
-import { VDOM } from "./VDOM";
-import { Container } from "./Container";
-import { Store } from '../data/Store';
-import renderer from 'react-test-renderer';
-import assert from 'assert';
-import { HtmlElement } from "../widgets/HtmlElement";
-
-describe('Cx', () => {
-
-   it('can render cx content', () => {
-      let widget = <cx>
-         <div>Test</div>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate />
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: 'div',
-         props: {},
-         children: ["Test"]
-      })
-   });
-
-   it('store changes preserve the instance', () => {
-
-      let instanceLog = [];
-      let storeLog = [];
-
-      let widget = <cx>
-         <div text-bind="text" onExplore={(context, instance) => {
-            instanceLog.push(instance);
-            storeLog.push(instance.store);
-         }} />
-      </cx>;
-
-      let store1 = new Store({ data: { text: 'Test1' } });
-      let store2 = new Store({ data: { text: 'Test2' } });
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store1} subscribe immediate />
-      );
-
-      let tree1 = component.toJSON();
-      assert.deepEqual(tree1, {
-         type: 'div',
-         props: {},
-         children: ["Test1"]
-      });
-
-      component.update(<Cx widget={widget} store={store2} subscribe immediate />);
-
-      let tree2 = component.toJSON();
-      assert.deepEqual(tree2, {
-         type: 'div',
-         props: {},
-         children: ["Test2"]
-      });
-
-      assert.equal(instanceLog.length, 2);
-      assert.equal(instanceLog[0], instanceLog[1]); //store changes should preserve the instance
-      assert(storeLog[0] === store1);
-      assert(storeLog[1] === store2);
-   });
-
-   it('invokes lifetime methods in the right order', () => {
-
-      let events = [];
-
-      class TestWidget extends Container {
-         explore(context, instance) {
-            super.explore(context, instance);
-            events.push(["explore", this.id]);
-         }
-
-         exploreCleanup(context, instance) {
-            //super.exploreCleanup(context, instance);
-            events.push(["exploreCleanup", this.id]);
-         }
-
-         prepare(context, instance) {
-            //super.prepare(context, instance);
-            events.push(["prepare", this.id]);
-         }
-
-         prepareCleanup(context, instance) {
-            //super.prepareCleanup(context, instance);
-            events.push(["prepareCleanup", this.id]);
-         }
-
-         render(context, instance, key) {
-            events.push(["render", this.id]);
-            return <div key={key}>
-               {this.renderChildren(context, instance)}
-            </div>
-         }
-      }
-
-      let widget = <cx>
-         <TestWidget id="0">
-            <TestWidget id="0.0" />
-            <TestWidget id="0.1">
-               <TestWidget id="0.1.0" />
-               <TestWidget id="0.1.1" />
-            </TestWidget>
-            <TestWidget id="0.2">
-               <TestWidget id="0.2.0" />
-            </TestWidget>
-         </TestWidget>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate />
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: 'div',
-         props: {},
-         children: [{
-            type: 'div',
-            props: {},
-            children: null
-         }, {
-            type: 'div',
-            props: {},
-            children: [{
-               type: 'div',
-               props: {},
-               children: null
-            }, {
-               type: 'div',
-               props: {},
-               children: null
-            }]
-         }, {
-            type: 'div',
-            props: {},
-            children: [{
-               type: 'div',
-               props: {},
-               children: null
-            }]
-         }]
-      });
-
-      //console.log(events);
-
-      assert.deepEqual(events, [
-         ["explore", "0"],
-         ["explore", "0.0"],
-         ["exploreCleanup", "0.0"],
-         ["explore", "0.1"],
-         ["explore", "0.1.0"],
-         ["exploreCleanup", "0.1.0"],
-         ["explore", "0.1.1"],
-         ["exploreCleanup", "0.1.1"],
-         ["exploreCleanup", "0.1"],
-         ["explore", "0.2"],
-         ["explore", "0.2.0"],
-         ["exploreCleanup", "0.2.0"],
-         ["exploreCleanup", "0.2"],
-         ["exploreCleanup", "0"],
-         ["prepare", "0"],
-         ["prepare", "0.0"],
-         ["prepareCleanup", "0.0"],
-         ["prepare", "0.1"],
-         ["prepare", "0.1.0"],
-         ["prepareCleanup", "0.1.0"],
-         ["prepare", "0.1.1"],
-         ["prepareCleanup", "0.1.1"],
-         ["prepareCleanup", "0.1"],
-         ["prepare", "0.2"],
-         ["prepare", "0.2.0"],
-         ["prepareCleanup", "0.2.0"],
-         ["prepareCleanup", "0.2"],
-         ["prepareCleanup", "0"],
-         ["render", "0.2.0"],
-         ["render", "0.2"],
-         ["render", "0.1.1"],
-         ["render", "0.1.0"],
-         ["render", "0.1"],
-         ["render", "0.0"],
-         ["render", "0"],
-      ])
-   });
-});
\ No newline at end of file
diff --git a/packages/cx/src/ui/Cx.spec.tsx b/packages/cx/src/ui/Cx.spec.tsx
new file mode 100644
index 000000000..36c199e0e
--- /dev/null
+++ b/packages/cx/src/ui/Cx.spec.tsx
@@ -0,0 +1,210 @@
+import { Cx } from "./Cx";
+import { VDOM } from "./VDOM";
+import { Container, ContainerBase, ContainerConfig } from "./Container";
+import { Store } from "../data/Store";
+import { bind } from "./bind";
+import { createTestRenderer, createTestWidget, act } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { HtmlElement } from "../widgets/HtmlElement";
+
+describe("Cx", () => {
+   it("can render cx content", async () => {
+      let widget = (
+         <cx>
+            <div>Test</div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Test"],
+      });
+   });
+
+   it("store changes preserve the instance", async () => {
+      let instanceLog: any[] = [];
+      let storeLog: any[] = [];
+
+      let widget = (
+         <cx>
+            <div
+               text={bind("text")}
+               onExplore={(context, instance) => {
+                  instanceLog.push(instance);
+                  storeLog.push(instance.store);
+               }}
+            />
+         </cx>
+      );
+
+      let store1 = new Store({ data: { text: "Test1" } });
+      let store2 = new Store({ data: { text: "Test2" } });
+
+      const component = await createTestRenderer(store1, widget);
+
+      let tree1 = component.toJSON();
+      assert.deepEqual(tree1, {
+         type: "div",
+         props: {},
+         children: ["Test1"],
+      });
+
+      await act(async () => {
+         component.update(createTestWidget(store2, widget));
+      });
+
+      let tree2 = component.toJSON();
+      assert.deepEqual(tree2, {
+         type: "div",
+         props: {},
+         children: ["Test2"],
+      });
+
+      assert.equal(instanceLog.length, 2);
+      assert.equal(instanceLog[0], instanceLog[1]); //store changes should preserve the instance
+      assert(storeLog[0] === store1);
+      assert(storeLog[1] === store2);
+   });
+
+   it("invokes lifetime methods in the right order", async () => {
+      let events: any[] = [];
+
+      interface TestWidgetConfig extends ContainerConfig {
+         id?: string;
+      }
+
+      class TestWidget extends ContainerBase<TestWidgetConfig> {
+         declare id?: string;
+
+         explore(context: any, instance: any) {
+            super.explore(context, instance);
+            events.push(["explore", this.id]);
+         }
+
+         exploreCleanup(context: any, instance: any) {
+            //super.exploreCleanup(context, instance);
+            events.push(["exploreCleanup", this.id]);
+         }
+
+         prepare(context: any, instance: any) {
+            //super.prepare(context, instance);
+            events.push(["prepare", this.id]);
+         }
+
+         prepareCleanup(context: any, instance: any) {
+            //super.prepareCleanup(context, instance);
+            events.push(["prepareCleanup", this.id]);
+         }
+
+         render(context: any, instance: any, key: any) {
+            events.push(["render", this.id]);
+            return VDOM.createElement("div", { key }, this.renderChildren(context, instance));
+         }
+      }
+
+      let widget = (
+         <cx>
+            <TestWidget id="0">
+               <TestWidget id="0.0" />
+               <TestWidget id="0.1">
+                  <TestWidget id="0.1.0" />
+                  <TestWidget id="0.1.1" />
+               </TestWidget>
+               <TestWidget id="0.2">
+                  <TestWidget id="0.2.0" />
+               </TestWidget>
+            </TestWidget>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: null,
+            },
+            {
+               type: "div",
+               props: {},
+               children: [
+                  {
+                     type: "div",
+                     props: {},
+                     children: null,
+                  },
+                  {
+                     type: "div",
+                     props: {},
+                     children: null,
+                  },
+               ],
+            },
+            {
+               type: "div",
+               props: {},
+               children: [
+                  {
+                     type: "div",
+                     props: {},
+                     children: null,
+                  },
+               ],
+            },
+         ],
+      });
+
+      //console.log(events);
+
+      assert.deepEqual(events, [
+         ["explore", "0"],
+         ["explore", "0.0"],
+         ["exploreCleanup", "0.0"],
+         ["explore", "0.1"],
+         ["explore", "0.1.0"],
+         ["exploreCleanup", "0.1.0"],
+         ["explore", "0.1.1"],
+         ["exploreCleanup", "0.1.1"],
+         ["exploreCleanup", "0.1"],
+         ["explore", "0.2"],
+         ["explore", "0.2.0"],
+         ["exploreCleanup", "0.2.0"],
+         ["exploreCleanup", "0.2"],
+         ["exploreCleanup", "0"],
+         ["prepare", "0"],
+         ["prepare", "0.0"],
+         ["prepareCleanup", "0.0"],
+         ["prepare", "0.1"],
+         ["prepare", "0.1.0"],
+         ["prepareCleanup", "0.1.0"],
+         ["prepare", "0.1.1"],
+         ["prepareCleanup", "0.1.1"],
+         ["prepareCleanup", "0.1"],
+         ["prepare", "0.2"],
+         ["prepare", "0.2.0"],
+         ["prepareCleanup", "0.2.0"],
+         ["prepareCleanup", "0.2"],
+         ["prepareCleanup", "0"],
+         ["render", "0.2.0"],
+         ["render", "0.2"],
+         ["render", "0.1.1"],
+         ["render", "0.1.0"],
+         ["render", "0.1"],
+         ["render", "0.0"],
+         ["render", "0"],
+      ]);
+   });
+});
diff --git a/packages/cx/src/ui/Cx.tsx b/packages/cx/src/ui/Cx.tsx
new file mode 100644
index 000000000..f58477932
--- /dev/null
+++ b/packages/cx/src/ui/Cx.tsx
@@ -0,0 +1,386 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, getContent } from "./Widget";
+import { Instance } from "./Instance";
+import { RenderingContext } from "./RenderingContext";
+import { debug, appDataFlag } from "../util/Debug";
+import { Timing, now, appLoopFlag, vdomRenderFlag } from "../util/Timing";
+import { isBatchingUpdates, notifyBatchedUpdateStarting, notifyBatchedUpdateCompleted } from "./batchUpdates";
+import { shallowEquals } from "../util/shallowEquals";
+import { PureContainer } from "./PureContainer";
+import { onIdleCallback } from "../util/onIdleCallback";
+import { getCurrentCulture, pushCulture, popCulture, CultureInfo, ResolvedCultureInfo } from "./Culture";
+import { View } from "../data/View";
+import { Config } from "./Prop";
+
+export interface CxProps {
+   widget?: Config;
+   items?: Config;
+   store?: View;
+   instance?: Instance;
+   parentInstance?: Instance;
+   subscribe?: boolean;
+   immediate?: boolean;
+   deferredUntilIdle?: boolean;
+   idleTimeout?: number;
+   options?: any;
+   onError?: (error: Error, instance: Instance, info: any) => void;
+   params?: any;
+   contentFactory?: (props: { children: any }) => any;
+   cultureInfo?: ResolvedCultureInfo;
+}
+
+export interface CxState {
+   deferToken: number;
+   data?: any;
+}
+
+export class Cx extends VDOM.Component<CxProps, CxState> {
+   widget: Widget;
+   store: View;
+   parentInstance?: Instance;
+   instance?: Instance;
+   flags: { preparing?: boolean; dirty?: boolean; rendering?: boolean };
+   renderCount: number;
+   unsubscribe?: () => void;
+   componentDidCatch?: (error: Error, info: any) => void;
+   forceUpdateCallback: () => void;
+   deferCounter: number;
+   pendingUpdateTimer?: NodeJS.Timeout;
+   unsubscribeIdleRequest?: () => void;
+
+   constructor(props: CxProps) {
+      super(props);
+
+      if (props.instance) {
+         this.widget = (props.instance as any).widget;
+         this.store = (props.instance as any).store;
+      } else {
+         this.widget = PureContainer.create({ items: props.widget || props.items });
+
+         if (props.parentInstance) {
+            this.parentInstance = props.parentInstance;
+            this.store = props.store || (this.parentInstance as any).store;
+         } else {
+            this.parentInstance = new Instance(this.widget, "0", undefined, props.store);
+            this.store = props.store!;
+         }
+
+         if (!this.store) throw new Error("Cx component requires a store.");
+      }
+
+      this.state = {
+         deferToken: 0,
+      };
+
+      if (props.subscribe) {
+         this.unsubscribe = this.store.subscribe(this.update.bind(this));
+         (this.state as any).data = this.store.getData();
+      }
+
+      this.flags = {};
+      this.renderCount = 0;
+
+      if (props.onError) this.componentDidCatch = this.componentDidCatchHandler.bind(this);
+
+      this.forceUpdateCallback = this.forceUpdate.bind(this);
+
+      this.deferCounter = 0;
+      this.waitForIdle();
+   }
+
+   UNSAFE_componentWillReceiveProps(props: CxProps): void {
+      let newStore = props.instance
+         ? (props.instance as any).store
+         : props.store
+           ? props.store
+           : (props.parentInstance as any).store;
+
+      if (newStore != this.store) {
+         this.store = newStore;
+         if (this.unsubscribe) this.unsubscribe();
+         if (props.subscribe) this.unsubscribe = this.store.subscribe(this.update.bind(this));
+      }
+
+      if (props.subscribe) {
+         let data = this.store.getData();
+         if (data !== this.state.data) {
+            this.waitForIdle();
+            this.setState({ data });
+         }
+      }
+   }
+
+   getInstance(): Instance {
+      if (this.props.instance) return this.props.instance;
+
+      if (this.instance && (this.instance as any).widget === this.widget) {
+         if ((this.instance as any).parentStore != this.store) (this.instance as any).setParentStore(this.store);
+         return this.instance;
+      }
+
+      if (this.widget && this.parentInstance)
+         return (this.instance = (this.parentInstance as any).getDetachedChild(this.widget, 0, this.store));
+
+      throw new Error("Could not resolve a widget instance in the Cx component.");
+   }
+
+   render() {
+      if (this.props.deferredUntilIdle && this.state.deferToken < this.deferCounter) return null;
+
+      let cultureInfo = this.props.cultureInfo ?? getCurrentCulture();
+
+      return (
+         <CxContext
+            instance={this.getInstance()}
+            flags={this.flags}
+            options={this.props.options}
+            buster={++this.renderCount}
+            contentFactory={this.props.contentFactory}
+            forceUpdate={this.forceUpdateCallback}
+            cultureInfo={cultureInfo}
+         />
+      );
+   }
+
+   componentDidMount(): void {
+      this.componentDidUpdate();
+
+      if (this.props.options && this.props.options.onPipeUpdate)
+         this.props.options.onPipeUpdate(this.update.bind(this));
+   }
+
+   componentDidUpdate(): void {
+      if (this.flags.dirty) {
+         this.update();
+      }
+   }
+
+   update(): void {
+      let data = this.store.getData();
+      debug(appDataFlag, data);
+      if (this.flags.preparing) this.flags.dirty = true;
+      else if (isBatchingUpdates() || this.props.immediate) {
+         notifyBatchedUpdateStarting();
+         this.setState({ data: data }, notifyBatchedUpdateCompleted);
+      } else {
+         //in standard mode sequential store commands are batched
+         if (!this.pendingUpdateTimer) {
+            notifyBatchedUpdateStarting();
+            this.pendingUpdateTimer = setTimeout(() => {
+               delete this.pendingUpdateTimer;
+               this.setState({ data: data }, notifyBatchedUpdateCompleted);
+            }, 0);
+         }
+      }
+   }
+
+   waitForIdle(): void {
+      if (!this.props.deferredUntilIdle) return;
+
+      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
+
+      let token = ++this.deferCounter;
+      this.unsubscribeIdleRequest = onIdleCallback(
+         () => {
+            this.setState({ deferToken: token });
+         },
+         {
+            timeout: this.props.idleTimeout || 30000,
+         },
+      );
+   }
+
+   componentWillUnmount(): void {
+      if (this.pendingUpdateTimer) clearTimeout(this.pendingUpdateTimer);
+      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
+      if (this.unsubscribe) this.unsubscribe();
+      if (this.props.options && this.props.options.onPipeUpdate) this.props.options.onPipeUpdate(null);
+   }
+
+   shouldComponentUpdate(props: CxProps, state: CxState): boolean {
+      if (props.deferredUntilIdle && state.deferToken != this.deferCounter) return false;
+
+      return (
+         state !== this.state ||
+         !props.params ||
+         !shallowEquals(props.params, this.props.params) ||
+         props.instance !== this.props.instance ||
+         props.widget !== this.props.widget ||
+         props.store !== this.props.store ||
+         props.parentInstance !== this.props.parentInstance ||
+         props.cultureInfo !== this.props.cultureInfo
+      );
+   }
+
+   componentDidCatchHandler(error: Error, info: any): void {
+      this.flags.preparing = false;
+      this.props.onError!(error, this.getInstance(), info);
+   }
+}
+
+interface CxContextProps {
+   instance: Instance;
+   flags: { preparing?: boolean; dirty?: boolean; rendering?: boolean };
+   options?: any;
+   buster: number;
+   contentFactory?: (props: { children: any }) => any;
+   forceUpdate: () => void;
+   cultureInfo?: ResolvedCultureInfo;
+}
+
+class CxContext extends VDOM.Component<CxContextProps, {}> {
+   renderCount: number;
+   timings: any;
+   content: any;
+   renderingContext?: RenderingContext;
+
+   constructor(props: CxContextProps) {
+      super(props);
+      this.renderCount = 0;
+      this.UNSAFE_componentWillReceiveProps(props);
+   }
+
+   UNSAFE_componentWillReceiveProps(props: CxContextProps): void {
+      this.timings = {
+         start: now(),
+      };
+
+      let { instance, options, contentFactory } = props;
+      let count = 0,
+         visible,
+         context,
+         forceContinue;
+
+      //should not be tracked by parents for destroy
+      if (!(instance as any).detached)
+         throw new Error("The instance passed to a Cx component should be detached from its parent.");
+
+      if (this.props.instance !== instance && (this.props.instance as any).destroyTracked)
+         (this.props.instance as any).destroy();
+
+      this.props.flags.preparing = true;
+
+      if (this.props.cultureInfo) pushCulture(this.props.cultureInfo);
+
+      try {
+         do {
+            count++;
+            forceContinue = false;
+            context = new RenderingContext(options);
+            (context as any).forceUpdate = this.props.forceUpdate;
+            this.props.flags.dirty = false;
+            (instance as any).assignedRenderList = (context as any).getRootRenderList();
+            visible = (instance as any).scheduleExploreIfVisible(context);
+            if (visible) {
+               while (!(context as any).exploreStack.empty()) {
+                  let inst = (context as any).exploreStack.pop();
+                  //console.log("EXPLORE", inst.widget.constructor.name, inst.widget.tag, inst.widget.widgetId);
+                  (inst as any).explore(context);
+               }
+            } else if ((instance as any).destroyTracked) {
+               (instance as any).destroy();
+            }
+
+            if (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8) {
+               forceContinue = true;
+               continue;
+            }
+
+            if (visible) {
+               this.timings.afterExplore = now();
+
+               for (let i = 0; i < (context as any).prepareList.length; i++)
+                  (context as any).prepareList[i].prepare(context);
+               this.timings.afterPrepare = now();
+            }
+         } while (
+            forceContinue ||
+            (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8)
+         );
+
+         if (visible) {
+            //walk in reverse order so children get rendered first
+            let renderList = (context as any).getRootRenderList();
+            while (renderList) {
+               for (let i = renderList.data.length - 1; i >= 0; i--) {
+                  renderList.data[i].render(context);
+               }
+               renderList = renderList.right;
+            }
+
+            this.content = getContent((instance as any).vdom);
+            if (contentFactory) this.content = contentFactory({ children: this.content });
+            this.timings.afterRender = now();
+            for (let i = 0; i < (context as any).cleanupList.length; i++)
+               (context as any).cleanupList[i].cleanup(context);
+         } else {
+            this.content = null;
+            this.timings.afterExplore = this.timings.afterPrepare = this.timings.afterRender = now();
+         }
+      } finally {
+         if (this.props.cultureInfo) popCulture(this.props.cultureInfo);
+      }
+
+      this.timings.beforeVDOMRender = now();
+      this.props.flags.preparing = false;
+      this.props.flags.rendering = true;
+      this.renderingContext = context;
+   }
+
+   render() {
+      return this.content;
+   }
+
+   componentDidMount(): void {
+      this.componentDidUpdate();
+   }
+
+   componentDidUpdate(): void {
+      this.props.flags.rendering = false;
+      this.timings.afterVDOMRender = now();
+
+      //let {instance} = this.props;
+      //instance.cleanup(this.renderingContext);
+
+      this.timings.afterCleanup = now();
+      this.renderCount++;
+
+      if (process.env.NODE_ENV !== "production") {
+         let { start, beforeVDOMRender, afterVDOMRender, afterPrepare, afterExplore, afterRender, afterCleanup } =
+            this.timings;
+
+         Timing.log(
+            vdomRenderFlag,
+            this.renderCount,
+            "cx",
+            (beforeVDOMRender - start + afterCleanup - afterVDOMRender).toFixed(2) + "ms",
+            "vdom",
+            (afterVDOMRender - beforeVDOMRender).toFixed(2) + "ms",
+         );
+
+         Timing.log(
+            appLoopFlag,
+            this.renderCount,
+            (this.renderingContext as any).options.name || "main",
+            "total",
+            (afterCleanup - start).toFixed(1) + "ms",
+            "explore",
+            (afterExplore - start).toFixed(1) + "ms",
+            "prepare",
+            (afterPrepare - afterExplore).toFixed(1),
+            "render",
+            (afterRender - afterPrepare).toFixed(1),
+            "vdom",
+            (afterVDOMRender - beforeVDOMRender).toFixed(1),
+            "cleanup",
+            (afterCleanup - afterVDOMRender).toFixed(1),
+         );
+      }
+   }
+
+   componentWillUnmount(): void {
+      let { instance } = this.props;
+      if ((instance as any).destroyTracked) (instance as any).destroy();
+   }
+}
diff --git a/packages/cx/src/ui/DataProxy.d.ts b/packages/cx/src/ui/DataProxy.d.ts
deleted file mode 100644
index fb8d3c591..000000000
--- a/packages/cx/src/ui/DataProxy.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as Cx from "../core";
-
-interface DataProxyProps extends Cx.PureContainerProps {
-   data?: Cx.StructuredProp;
-   value?: Cx.Binding;
-   alias?: string;
-   cached?: boolean;
-   immutable?: boolean;
-   sealed?: boolean;
-}
-
-export class DataProxy extends Cx.Widget<DataProxyProps> {}
diff --git a/packages/cx/src/ui/DataProxy.js b/packages/cx/src/ui/DataProxy.js
deleted file mode 100644
index 0f93dc103..000000000
--- a/packages/cx/src/ui/DataProxy.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { NestedDataView } from "../data/NestedDataView";
-import { UseParentLayout } from "../ui/layout/UseParentLayout";
-import { PureContainer } from "./PureContainer";
-import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
-
-export class DataProxy extends PureContainer {
-   init() {
-      if (!this.data) this.data = {};
-
-      if (this.alias) this.data[this.alias] = this.value;
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.store = new NestedDataView({
-         store: instance.parentStore,
-         nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
-         immutable: this.immutable,
-         sealed: this.sealed,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance) {
-      instance.store.setStore(instance.parentStore);
-   }
-}
-
-DataProxy.prototype.immutable = false;
-DataProxy.prototype.sealed = false;
diff --git a/packages/cx/src/ui/DataProxy.spec.js b/packages/cx/src/ui/DataProxy.spec.js
deleted file mode 100644
index 9509734da..000000000
--- a/packages/cx/src/ui/DataProxy.spec.js
+++ /dev/null
@@ -1,338 +0,0 @@
-import { Cx } from "./Cx";
-import { Store } from "../data/Store";
-import { VDOM } from "./VDOM";
-import renderer from "react-test-renderer";
-import assert from "assert";
-import { Controller } from "./Controller";
-import { DataProxy } from "./DataProxy";
-import { computable } from "../data/computable";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { useState } from "../hooks";
-import { createFunctionalComponent } from "./createFunctionalComponent";
-import { Widget } from "./Widget";
-
-describe("DataProxy", () => {
-   it("can calculate values", () => {
-      let widget = (
-         <cx>
-            <DataProxy
-               data={{
-                  $value: { bind: "value" },
-               }}
-            >
-               <span text-bind="$value" />
-            </DataProxy>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            value: "good",
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "span",
-         props: {},
-         children: ["good"],
-      });
-   });
-
-   it("can write into values aliased with bind", () => {
-      class TestController extends Controller {
-         onInit() {
-            this.store.set("$value", "excellent");
-         }
-      }
-
-      let widget = (
-         <cx>
-            <DataProxy
-               data={{
-                  $value: { bind: "value" },
-               }}
-               controller={TestController}
-            >
-               <span text-bind="$value" />
-            </DataProxy>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            value: "good",
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert(store.get("value"), "excellent");
-
-      assert.deepEqual(tree, {
-         type: "span",
-         props: {},
-         children: ["excellent"],
-      });
-   });
-
-   it("can write into aliased values using provided setters", () => {
-      class TestController extends Controller {
-         onInit() {
-            this.store.set("$value", "excellent");
-         }
-      }
-
-      let widget = (
-         <cx>
-            <DataProxy
-               data={{
-                  $value: {
-                     expr: computable("value", (value) => value),
-                     set: (value, { store }) => {
-                        store.set("value", value);
-                     },
-                  },
-               }}
-               controller={TestController}
-            >
-               <span text-bind="$value" />
-            </DataProxy>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            value: "good",
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert(store.get("value"), "excellent");
-
-      assert.deepEqual(tree, {
-         type: "span",
-         props: {},
-         children: ["excellent"],
-      });
-   });
-
-   it("allows shorter syntax", () => {
-      let widget = (
-         <cx>
-            <DataProxy alias="$value" value-bind="value">
-               <span text-bind="$value" />
-            </DataProxy>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            value: "good",
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "span",
-         props: {},
-         children: ["good"],
-      });
-   });
-
-   it("correctly updates aliased data after write", () => {
-      class TestController extends Controller {
-         onInit() {
-            this.store.set("$value", "excellent");
-            assert.equal(this.store.get("$value"), "excellent");
-         }
-      }
-
-      let widget = (
-         <cx>
-            <DataProxy
-               data={{
-                  $value: { bind: "value" },
-               }}
-               controller={TestController}
-            >
-               <span text-bind="$value" />
-            </DataProxy>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            value: "good",
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert(store.get("value"), "excellent");
-
-      assert.deepEqual(tree, {
-         type: "span",
-         props: {},
-         children: ["excellent"],
-      });
-   });
-
-   it("properly binds structures", () => {
-      class TestController extends Controller {
-         onInit() {
-            this.store.set("$person.firstName", "Jim");
-         }
-      }
-
-      let widget = (
-         <cx>
-            <DataProxy
-               data={{
-                  $person: { bind: "person" },
-               }}
-               controller={TestController}
-            >
-               <span text-tpl="{$person.firstName} {$person.lastName}" />
-            </DataProxy>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            person: { firstName: "John", lastName: "Smith" },
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert(store.get("person.firstName"), "Jim");
-
-      assert.deepEqual(tree, {
-         type: "span",
-         props: {},
-         children: ["Jim Smith"],
-      });
-   });
-
-   it("works with Store refs", () => {
-      let widget = createFunctionalComponent(() => {
-         let valueRef = useState("a");
-         return (
-            <cx>
-               <DataProxy
-                  data={{
-                     $value: valueRef,
-                  }}
-               >
-                  <span
-                     text-bind="$value"
-                     controller={{
-                        onInit() {
-                           valueRef.set("b");
-                        },
-                     }}
-                  />
-               </DataProxy>
-            </cx>
-         );
-      });
-
-      let store = new Store({
-         data: {
-            //value: "good"
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "span",
-         props: {},
-         children: ["b"],
-      });
-   });
-
-   it("controllers set on the DataProxy can see calculated values", () => {
-      let value;
-      let widget = Widget.create(
-         <cx>
-            <DataProxy
-               data={{
-                  $value: 5,
-               }}
-               controller={{
-                  onInit() {
-                     value = this.store.get("$value");
-                  },
-               }}
-            />
-         </cx>,
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.equal(value, 5);
-   });
-
-   it("correctly propagates undefined values over a previous value (bug)", () => {
-      let widget = (
-         <cx>
-            <DataProxy
-               data={{
-                  $value: { bind: "value" },
-               }}
-            >
-               <span text-bind="$value" />
-            </DataProxy>
-            <DataProxy
-               data={{
-                  $value: { bind: "dummy" },
-               }}
-            >
-               <span text-bind="$value" />
-            </DataProxy>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            value: "initial",
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert.deepEqual(tree, [
-         {
-            type: "span",
-            props: {},
-            children: ["initial"],
-         },
-         {
-            type: "span",
-            props: {},
-            children: null,
-         },
-      ]);
-   });
-});
diff --git a/packages/cx/src/ui/DataProxy.spec.tsx b/packages/cx/src/ui/DataProxy.spec.tsx
new file mode 100644
index 000000000..ff3f2d07a
--- /dev/null
+++ b/packages/cx/src/ui/DataProxy.spec.tsx
@@ -0,0 +1,337 @@
+import { Store } from "../data/Store";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { Controller } from "./Controller";
+import { DataProxy } from "./DataProxy";
+import { computable } from "../data/computable";
+import { useState } from "../hooks";
+import { createFunctionalComponent } from "./createFunctionalComponent";
+import { Widget } from "./Widget";
+import { bind } from "./bind";
+import { tpl } from "./tpl";
+
+describe("DataProxy", () => {
+   it("can calculate values", async () => {
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: { bind: "value" },
+               }}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["good"],
+      });
+   });
+
+   it("can write into values aliased with bind", async () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.set("$value", "excellent");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: { bind: "value" },
+               }}
+               controller={TestController}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert(store.get("value"), "excellent");
+
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["excellent"],
+      });
+   });
+
+   it("can write into aliased values using provided setters", async () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.set("$value", "excellent");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: {
+                     expr: computable("value", (value: any) => value),
+                     set: (value: any, { store }: { store: any }) => {
+                        store.set("value", value);
+                     },
+                  },
+               }}
+               controller={TestController}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert(store.get("value"), "excellent");
+
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["excellent"],
+      });
+   });
+
+   it("allows shorter syntax", async () => {
+      let widget = (
+         <cx>
+            <DataProxy alias="$value" value={bind("value")}>
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["good"],
+      });
+   });
+
+   it("correctly updates aliased data after write", async () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.set("$value", "excellent");
+            assert.equal(this.store.get("$value"), "excellent");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: { bind: "value" },
+               }}
+               controller={TestController}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert(store.get("value"), "excellent");
+
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["excellent"],
+      });
+   });
+
+   it("properly binds structures", async () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.set("$person.firstName", "Jim");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $person: { bind: "person" },
+               }}
+               controller={TestController}
+            >
+               <span text={tpl("{$person.firstName} {$person.lastName}")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            person: { firstName: "John", lastName: "Smith" },
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert(store.get("person.firstName"), "Jim");
+
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["Jim Smith"],
+      });
+   });
+
+   it("works with Store refs", async () => {
+      let widget = createFunctionalComponent(() => {
+         let valueRef = useState("a");
+         return (
+            <cx>
+               <DataProxy
+                  data={{
+                     $value: valueRef,
+                  }}
+               >
+                  <span
+                     text={bind("$value")}
+                     controller={{
+                        onInit() {
+                           valueRef.set("b");
+                        },
+                     }}
+                  />
+               </DataProxy>
+            </cx>
+         );
+      });
+
+      let store = new Store({
+         data: {
+            //value: "good"
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["b"],
+      });
+   });
+
+   it("controllers set on the DataProxy can see calculated values", async () => {
+      let value;
+      let widget = Widget.create(
+         <cx>
+            <DataProxy
+               data={{
+                  $value: 5,
+               }}
+               controller={{
+                  onInit() {
+                     value = this.store.get("$value");
+                  },
+               }}
+            />
+         </cx>,
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(value, 5);
+   });
+
+   it("correctly propagates undefined values over a previous value (bug)", async () => {
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: { bind: "value" },
+               }}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+            <DataProxy
+               data={{
+                  $value: { bind: "dummy" },
+               }}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "initial",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert.deepEqual(tree, [
+         {
+            type: "span",
+            props: {},
+            children: ["initial"],
+         },
+         {
+            type: "span",
+            props: {},
+            children: null,
+         },
+      ]);
+   });
+});
diff --git a/packages/cx/src/ui/DataProxy.ts b/packages/cx/src/ui/DataProxy.ts
new file mode 100644
index 000000000..f5934d566
--- /dev/null
+++ b/packages/cx/src/ui/DataProxy.ts
@@ -0,0 +1,55 @@
+import { NestedDataView } from "../data/NestedDataView";
+import { UseParentLayout } from "../ui/layout/UseParentLayout";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+import { StructuredProp, Bind } from "./Prop";
+
+export interface DataProxyConfig extends PureContainerConfig {
+   /** Data object with computed values to be exposed in the local store. */
+   data?: StructuredProp;
+
+   /** Binding to a value to be exposed under the `alias` name. */
+   value?: Bind;
+
+   /** Alias name under which `value` is exposed in the local store. */
+   alias?: string;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that local store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export class DataProxy extends PureContainerBase<DataProxyConfig> {
+   declare data?: any;
+   declare alias?: string;
+   declare value?: any;
+   declare immutable: boolean;
+   declare sealed: boolean;
+
+   init() {
+      if (!this.data) this.data = {};
+
+      if (this.alias) this.data[this.alias] = this.value;
+
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new NestedDataView({
+         store: instance.parentStore,
+         nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
+         immutable: this.immutable,
+         sealed: this.sealed,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+DataProxy.prototype.immutable = false;
+DataProxy.prototype.sealed = false;
diff --git a/packages/cx/src/ui/DetachedScope.d.ts b/packages/cx/src/ui/DetachedScope.d.ts
deleted file mode 100644
index a6b7ae2db..000000000
--- a/packages/cx/src/ui/DetachedScope.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as Cx from '../core';
-import {IsolatedScopeProps} from "./IsolatedScope";
-
-interface DetachedScopeProps extends IsolatedScopeProps {
-
-   /**
-    * A single binding path or a list of paths to be monitored for changes.
-    * Use `exclusive` as a shorthand for defining the `exclusiveData` object.
-    */
-   exclusive?: string | string[]
-
-   /** Exclusive data selector. If only exclusive data change, the scope will be re-rendered without recalculating other elements on the page.
-    * Use in case if the scope uses both exclusive and shared data. */
-   exclusiveData?: Cx.StructuredProp,
-
-   /** Name of the scope used for debugging/reporting purposes. */
-   name?: string
-}
-
-export class DetachedScope extends Cx.Widget<DetachedScopeProps> {
-}
diff --git a/packages/cx/src/ui/DetachedScope.js b/packages/cx/src/ui/DetachedScope.js
deleted file mode 100644
index 5babddef7..000000000
--- a/packages/cx/src/ui/DetachedScope.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { PureContainer } from "./PureContainer";
-import { SubscribableView } from "../data/SubscribableView";
-import { getSelector } from "../data/getSelector";
-import { Cx } from "./Cx";
-import { VDOM } from "./Widget";
-import { IsolatedScope } from "./IsolatedScope";
-
-export class DetachedScope extends IsolatedScope {
-   declareData() {
-      return super.declareData(...arguments, {
-         exclusiveData: { structured: true },
-      });
-   }
-
-   init() {
-      if (typeof this.exclusive === "string") this.exclusiveData = { bind: this.exclusive };
-      if (Array.isArray(this.exclusive)) {
-         this.exclusiveData = {};
-         this.exclusive.forEach((x, i) => {
-            this.exclusiveData[String(i)] = { bind: x };
-         });
-      }
-
-      this.container = PureContainer.create({
-         type: PureContainer,
-         items: this.children || this.items,
-      });
-      delete this.items;
-      delete this.children;
-
-      if (this.name)
-         this.options = {
-            ...this.options,
-            name: this.name,
-         };
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.subStore = new ContainmentStore({
-         store: instance.parentStore,
-         selector: getSelector(this.exclusiveData || this.data),
-      });
-   }
-
-   applyParentStore(instance) {
-      instance.store = instance.parentStore;
-      instance.subStore.setStore(instance.parentStore);
-   }
-
-   render(context, instance, key) {
-      return (
-         <Cx
-            key={key}
-            widget={this.container}
-            store={instance.subStore}
-            parentInstance={instance}
-            subscribe
-            options={this.options}
-            onError={this.onError}
-         />
-      );
-   }
-}
-
-class ContainmentStore extends SubscribableView {
-   getData() {
-      return this.store.getData();
-   }
-
-   setItem(...args) {
-      return this.wrapper(() => {
-         this.store.setItem(...args);
-      });
-   }
-
-   deleteItem(...args) {
-      return this.wrapper(() => {
-         this.store.deleteItem(...args);
-      });
-   }
-
-   wrapper(callback) {
-      if (this.store.silently(callback)) {
-         let data = this.getData();
-         let containedData = this.selector(data);
-         if (containedData === this.cache.containedData) {
-            this.store.notify();
-         } else {
-            this.cache.containedData = containedData;
-            this.notify();
-         }
-         return true;
-      }
-      return false;
-   }
-}
diff --git a/packages/cx/src/ui/DetachedScope.tsx b/packages/cx/src/ui/DetachedScope.tsx
new file mode 100644
index 000000000..dc40bddea
--- /dev/null
+++ b/packages/cx/src/ui/DetachedScope.tsx
@@ -0,0 +1,159 @@
+/** @jsxImportSource react */
+
+import { PureContainer } from "./PureContainer";
+import { SubscribableView, SubscribableViewConfig } from "../data/SubscribableView";
+import { getSelector } from "../data/getSelector";
+import { Cx } from "./Cx";
+import { VDOM } from "./Widget";
+import { IsolatedScope, IsolatedScopeConfig } from "./IsolatedScope";
+import { Instance } from "./Instance";
+import { StructuredProp } from "./Prop";
+
+interface ContainmentStoreConfig extends SubscribableViewConfig {
+   selector: any;
+}
+
+class ContainmentStore extends SubscribableView<any> {
+   declare selector: any;
+   declare cache: {
+      version: number;
+      data?: any;
+      result?: any;
+      itemIndex?: number;
+      key?: string;
+      parentStoreData?: any;
+      containedData?: any;
+   };
+
+   constructor(config: ContainmentStoreConfig) {
+      super(config);
+      this.selector = config.selector;
+   }
+
+   getData() {
+      return this.store!.getData();
+   }
+
+   setItem(path: string, value: any) {
+      return this.wrapper(() => {
+         this.store!.setItem(path, value);
+      });
+   }
+
+   deleteItem(path: string) {
+      return this.wrapper(() => {
+         this.store!.deleteItem(path);
+      });
+   }
+
+   wrapper(callback: () => void) {
+      if (this.store!.silently(callback)) {
+         let data = this.getData();
+         let containedData = this.selector(data);
+         if (containedData === this.cache.containedData) {
+            this.store!.notify();
+         } else {
+            this.cache.containedData = containedData;
+            this.notify(undefined!);
+         }
+         return true;
+      }
+      return false;
+   }
+}
+
+export interface DetachedScopeInstance extends Instance {
+   subStore: ContainmentStore;
+}
+
+export interface DetachedScopeConfig extends IsolatedScopeConfig {
+   /**
+    * A single binding path or a list of paths to be monitored for changes.
+    * Use `exclusive` as a shorthand for defining the `exclusiveData` object.
+    */
+   exclusive?: string | string[];
+
+   /**
+    * Exclusive data selector. If only exclusive data change, the scope will be re-rendered
+    * without recalculating other elements on the page.
+    * Use in case if the scope uses both exclusive and shared data.
+    */
+   exclusiveData?: StructuredProp;
+
+   /** Name of the scope used for debugging/reporting purposes. */
+   name?: string;
+
+   /** Options passed to the Cx component. */
+   options?: any;
+
+   /** Error handler for the detached scope. */
+   onError?: (error: Error, instance: Instance, info: any) => void;
+}
+
+export class DetachedScope extends IsolatedScope<DetachedScopeConfig, DetachedScopeInstance> {
+   declare exclusive?: string | string[];
+   declare exclusiveData?: any;
+   declare container?: any;
+   declare name?: string;
+   declare options?: any;
+   declare onError?: any;
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         exclusiveData: { structured: true },
+      });
+   }
+
+   init() {
+      if (typeof this.exclusive === "string") this.exclusiveData = { bind: this.exclusive };
+      if (Array.isArray(this.exclusive)) {
+         this.exclusiveData = {};
+         this.exclusive.forEach((x, i) => {
+            this.exclusiveData[String(i)] = { bind: x };
+         });
+      }
+
+      this.container = PureContainer.create({
+         type: PureContainer,
+         items: this.children || this.items,
+      });
+
+      delete this.children;
+      this.items = [];
+
+      if (this.name)
+         this.options = {
+            ...this.options,
+            name: this.name,
+         };
+
+      super.init();
+   }
+
+   initInstance(context: any, instance: DetachedScopeInstance) {
+      const config: ContainmentStoreConfig = {
+         store: instance.parentStore,
+         selector: getSelector(this.exclusiveData || this.data),
+      };
+      instance.subStore = new ContainmentStore(config);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store = instance.parentStore;
+      instance.subStore.setStore(instance.parentStore);
+   }
+
+   render(context: any, instance: any, key: string) {
+      return (
+         <Cx
+            key={key}
+            widget={this.container}
+            store={instance.subStore}
+            parentInstance={instance}
+            subscribe
+            options={this.options}
+            onError={this.onError}
+         />
+      );
+   }
+}
diff --git a/packages/cx/src/ui/FocusManager.d.ts b/packages/cx/src/ui/FocusManager.d.ts
deleted file mode 100644
index 9647fb5ec..000000000
--- a/packages/cx/src/ui/FocusManager.d.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as Cx from "../core";
-
-declare type FocusOutCallback = (Element) => void;
-
-export class FocusManager {
-   static subscribe(callback: FocusOutCallback): void;
-
-   static onFocusOut(el: Element, callback: FocusOutCallback): () => void;
-
-   static oneFocusOut(el: Element, callback: FocusOutCallback): () => void;
-
-   static nudge(): () => void;
-
-   static focus(el: Element): () => void;
-
-   static focusFirst(el: Element): () => void;
-
-   static setInterval(interval: number): void;
-}
-
-export function oneFocusOut(component: any, el: Element, callback: FocusOutCallback);
-
-export function offFocusOut(component: any): void;
-
-export function preventFocus(e: Event): void;
-
-export function preventFocusOnTouch(e: Event, force?: boolean): void;
-
-export function unfocusElement(target?: Element, forceBlur?: boolean): void;
diff --git a/packages/cx/src/ui/FocusManager.js b/packages/cx/src/ui/FocusManager.js
deleted file mode 100644
index ff691f95a..000000000
--- a/packages/cx/src/ui/FocusManager.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import { isSelfOrDescendant, findFirst, findFirstChild, isFocusable, closestParent } from "../util/DOM";
-import { batchUpdates } from "./batchUpdates";
-import { SubscriberList } from "../util/SubscriberList";
-import { isTouchEvent } from "../util/isTouchEvent";
-import { getActiveElement } from "../util/getActiveElement";
-
-/*
- *  Purpose of FocusManager is to provide focusout notifications.
- *  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
- *  to determine if focus went outside or stayed inside the component.
- */
-
-let subscribers = new SubscriberList(),
-   timerInterval = 300,
-   timerId = null;
-
-let lastActiveElement = null;
-let pending = false;
-
-export class FocusManager {
-   static subscribe(callback) {
-      let unsubscribe = subscribers.subscribe(callback);
-      checkTimer();
-      return unsubscribe;
-   }
-
-   static onFocusOut(el, callback) {
-      let active = isSelfOrDescendant(el, getActiveElement());
-      return this.subscribe((focusedEl) => {
-         if (!active) active = isSelfOrDescendant(el, getActiveElement());
-         else if (!isSelfOrDescendant(el, focusedEl)) {
-            active = false;
-            callback(focusedEl);
-         }
-      });
-   }
-
-   static oneFocusOut(el, callback) {
-      this.nudge();
-      let off = this.subscribe((focusedEl) => {
-         if (!isSelfOrDescendant(el, focusedEl)) {
-            callback(focusedEl);
-            off();
-         }
-      });
-      return off;
-   }
-
-   static nudge() {
-      if (typeof document !== "undefined" && getActiveElement() !== lastActiveElement) {
-         if (!pending) {
-            pending = true;
-            setTimeout(function () {
-               pending = false;
-               if (getActiveElement() !== lastActiveElement) {
-                  lastActiveElement = getActiveElement();
-                  batchUpdates(() => {
-                     subscribers.notify(lastActiveElement);
-                  });
-                  checkTimer();
-               }
-            }, 0);
-         }
-      }
-   }
-
-   static focus(el) {
-      el.focus();
-      this.nudge();
-   }
-
-   static focusFirst(el) {
-      let focusable = findFirst(el, isFocusable);
-      if (focusable) this.focus(focusable);
-      return focusable;
-   }
-
-   static focusFirstChild(el) {
-      let focusable = findFirstChild(el, isFocusable);
-      if (focusable) this.focus(focusable);
-      return focusable;
-   }
-
-   static focusNext(el) {
-      let next = el,
-         skip = true;
-      do {
-         if (!skip) {
-            let focusable = this.focusFirst(next);
-            if (focusable) return focusable;
-         }
-
-         if (next.nextSibling) {
-            next = next.nextSibling;
-            skip = false;
-         } else {
-            next = next.parentNode;
-            skip = true;
-         }
-      } while (next);
-   }
-
-   static setInterval(interval) {
-      timerInterval = interval;
-      checkTimer();
-   }
-}
-
-export function oneFocusOut(component, el, callback) {
-   if (!component.oneFocusOut)
-      component.oneFocusOut = FocusManager.oneFocusOut(el, (focus) => {
-         delete component.oneFocusOut;
-         callback(focus);
-      });
-}
-
-export function offFocusOut(component) {
-   if (component.oneFocusOut) {
-      component.oneFocusOut();
-      delete component.oneFocusOut;
-   }
-}
-
-export function preventFocus(e) {
-   //Focus can be prevented only on mousedown event. On touchstart this will not work
-   //preventDefault cannot be used as it prevents scrolling
-   if (e.type !== "mousedown") return;
-
-   e.preventDefault();
-
-   unfocusElement(e.currentTarget, false);
-}
-
-function checkTimer() {
-   let shouldRun = !subscribers.isEmpty();
-
-   if (shouldRun && !timerId)
-      timerId = setInterval(() => {
-         FocusManager.nudge();
-      }, timerInterval);
-
-   if (!shouldRun && timerId) {
-      clearInterval(timerId);
-      timerId = null;
-   }
-}
-
-export function preventFocusOnTouch(e, force = false) {
-   if (force || isTouchEvent()) preventFocus(e);
-}
-
-export function unfocusElement(target = null, unfocusParentOverlay = true) {
-   const activeElement = getActiveElement();
-   if (!target) target = activeElement;
-
-   if (unfocusParentOverlay) {
-      let focusableOverlayContainer = closestParent(target, (el) => el.dataset?.focusableOverlayContainer);
-      if (focusableOverlayContainer) target = focusableOverlayContainer;
-   }
-
-   //find the closest focusable parent of the target element and focus it instead
-   let focusableParent = closestParent(
-      target,
-      (el) => isFocusable(el) && (!unfocusParentOverlay || el.dataset?.focusableOverlayContainer),
-   );
-
-   if (focusableParent && focusableParent !== document.body) focusableParent.focus({ preventScroll: true });
-   else activeElement.blur();
-
-   FocusManager.nudge();
-}
diff --git a/packages/cx/src/ui/FocusManager.ts b/packages/cx/src/ui/FocusManager.ts
new file mode 100644
index 000000000..cd02d70bb
--- /dev/null
+++ b/packages/cx/src/ui/FocusManager.ts
@@ -0,0 +1,171 @@
+import { isSelfOrDescendant, findFirst, findFirstChild, isFocusable, closestParent } from "../util/DOM";
+import { batchUpdates } from "./batchUpdates";
+import { SubscriberList } from "../util/SubscriberList";
+import { isTouchEvent } from "../util/isTouchEvent";
+import { getActiveElement } from "../util/getActiveElement";
+
+/*
+ *  Purpose of FocusManager is to provide focusout notifications.
+ *  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
+ *  to determine if focus went outside or stayed inside the component.
+ */
+
+let subscribers = new SubscriberList(),
+   timerInterval = 300,
+   timerId: any = null;
+
+let lastActiveElement: any = null;
+let pending = false;
+
+export class FocusManager {
+   static subscribe(callback: (el: any) => void) {
+      let unsubscribe = subscribers.subscribe(callback);
+      checkTimer();
+      return unsubscribe;
+   }
+
+   static onFocusOut(el: any, callback: (el: any) => void) {
+      let active = isSelfOrDescendant(el, getActiveElement());
+      return this.subscribe((focusedEl: any) => {
+         if (!active) active = isSelfOrDescendant(el, getActiveElement());
+         else if (!isSelfOrDescendant(el, focusedEl)) {
+            active = false;
+            callback(focusedEl);
+         }
+      });
+   }
+
+   static oneFocusOut(el: any, callback: (el: any) => void) {
+      this.nudge();
+      let off = this.subscribe((focusedEl: any) => {
+         if (!isSelfOrDescendant(el, focusedEl)) {
+            callback(focusedEl);
+            off();
+         }
+      });
+      return off;
+   }
+
+   static nudge() {
+      if (typeof document !== "undefined" && getActiveElement() !== lastActiveElement) {
+         if (!pending) {
+            pending = true;
+            setTimeout(function () {
+               pending = false;
+               if (getActiveElement() !== lastActiveElement) {
+                  lastActiveElement = getActiveElement();
+                  batchUpdates(() => {
+                     subscribers.notify(lastActiveElement);
+                  });
+                  checkTimer();
+               }
+            }, 0);
+         }
+      }
+   }
+
+   static focus(el: HTMLElement) {
+      el.focus();
+      this.nudge();
+   }
+
+   static focusFirst(el: HTMLElement) {
+      let focusable = findFirst(el, isFocusable);
+      if (focusable) this.focus(focusable as HTMLElement);
+      return focusable;
+   }
+
+   static focusFirstChild(el: HTMLElement) {
+      let focusable = findFirstChild(el, isFocusable);
+      if (focusable) this.focus(focusable as HTMLElement);
+      return focusable;
+   }
+
+   static focusNext(el: HTMLElement) {
+      let next: Node | null = el,
+         skip = true;
+      do {
+         if (!skip) {
+            let focusable = this.focusFirst(next as HTMLElement);
+            if (focusable) return focusable;
+         }
+
+         if (next.nextSibling) {
+            next = next.nextSibling;
+            skip = false;
+         } else {
+            next = next.parentNode;
+            skip = true;
+         }
+      } while (next);
+   }
+
+   static setInterval(interval: number) {
+      timerInterval = interval;
+      checkTimer();
+   }
+}
+
+export function oneFocusOut(component: any, el: any, callback: (focus: any) => void) {
+   if (!component.oneFocusOut)
+      component.oneFocusOut = FocusManager.oneFocusOut(el, (focus: any) => {
+         delete component.oneFocusOut;
+         callback(focus);
+      });
+}
+
+export function offFocusOut(component: any) {
+   if (component.oneFocusOut) {
+      component.oneFocusOut();
+      delete component.oneFocusOut;
+   }
+}
+
+export function preventFocus(e: React.MouseEvent) {
+   //Focus can be prevented only on mousedown event. On touchstart this will not work
+   //preventDefault cannot be used as it prevents scrolling
+   if (e.type !== "mousedown") return;
+
+   e.preventDefault();
+
+   unfocusElement(e.currentTarget, false);
+}
+
+function checkTimer() {
+   let shouldRun = !subscribers.isEmpty();
+
+   if (shouldRun && !timerId)
+      timerId = setInterval(() => {
+         FocusManager.nudge();
+      }, timerInterval);
+
+   if (!shouldRun && timerId) {
+      clearInterval(timerId);
+      timerId = null;
+   }
+}
+
+export function preventFocusOnTouch(e: any, force = false) {
+   if (force || isTouchEvent()) preventFocus(e);
+}
+
+export function unfocusElement(target: Element | null = null, unfocusParentOverlay = true) {
+   const activeElement = getActiveElement();
+   if (!target) target = activeElement;
+
+   if (unfocusParentOverlay) {
+      let focusableOverlayContainer = closestParent(target, (el: any) => el.dataset?.focusableOverlayContainer);
+      if (focusableOverlayContainer) target = focusableOverlayContainer;
+   }
+
+   //find the closest focusable parent of the target element and focus it instead
+   let focusableParent = closestParent(
+      target,
+      (el: any) => isFocusable(el) && (!unfocusParentOverlay || !!el.dataset?.focusableOverlayContainer),
+   ) as HTMLElement | null;
+
+   if (focusableParent && focusableParent !== document.body) focusableParent.focus({ preventScroll: true });
+   else (activeElement as HTMLElement).blur();
+
+   FocusManager.nudge();
+}
diff --git a/packages/cx/src/ui/Format.d.ts b/packages/cx/src/ui/Format.d.ts
deleted file mode 100644
index 315c815d5..000000000
--- a/packages/cx/src/ui/Format.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "../util/Format";
-
-export function enableCultureSensitiveFormatting();
\ No newline at end of file
diff --git a/packages/cx/src/ui/Format.js b/packages/cx/src/ui/Format.js
deleted file mode 100644
index ee44fee42..000000000
--- a/packages/cx/src/ui/Format.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Culture, getCurrentCultureCache } from "./Culture";
-import { Format as Fmt, resolveMinMaxFractionDigits, setGetFormatCacheCallback } from "../util/Format";
-import { setGetExpressionCacheCallback } from "../data/Expression";
-import { setGetStringTemplateCacheCallback } from "../data/StringTemplate";
-import { parseDateInvariant } from "../util";
-import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
-
-export const Format = Fmt;
-
-let cultureSensitiveFormatsRegistered = false;
-
-export function resolveNumberFormattingFlags(flags) {
-   if (!flags) return null;
-   let result = {};
-   if (flags.indexOf("+") >= 0) result.signDisplay = "exceptZero";
-   if (flags.indexOf("c") >= 0) result.notation = "compact";
-   if (flags.indexOf("a") >= 0) result.currencySign = "accounting";
-   return result;
-}
-
-export function enableCultureSensitiveFormatting() {
-   if (cultureSensitiveFormatsRegistered) return;
-
-   cultureSensitiveFormatsRegistered = true;
-
-   Fmt.registerFactory(["number", "n"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
-      let culture = Culture.getNumberCulture();
-
-      let formatter = culture.getFormatter({
-         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
-         ...resolveNumberFormattingFlags(flags),
-      });
-
-      return (value) => formatter.format(value);
-   });
-
-   Fmt.registerFactory("currency", (format, currency, minimumFractionDigits, maximumFractionDigits, flags) => {
-      let culture = Culture.getNumberCulture();
-      currency = currency || Culture.defaultCurrency;
-
-      let formatter = culture.getFormatter({
-         style: "currency",
-         currency: currency,
-         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
-         ...resolveNumberFormattingFlags(flags),
-      });
-
-      return (value) => formatter.format(value);
-   });
-
-   Fmt.registerFactory(["percentage", "p", "%"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
-      let culture = Culture.getNumberCulture();
-      let formatter = culture.getFormatter({
-         style: "percent",
-         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
-         ...resolveNumberFormattingFlags(flags),
-      });
-      return (value) => formatter.format(value);
-   });
-
-   Fmt.registerFactory(["percentSign", "ps"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
-      let culture = Culture.getNumberCulture();
-      let formatter = culture.getFormatter({
-         style: "percent",
-         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
-         ...resolveNumberFormattingFlags(flags),
-      });
-      return (value) => formatter.format(value / 100);
-   });
-
-   Fmt.registerFactory(["date", "d"], (fmt, format = "yyyyMMdd") => {
-      let culture = Culture.getDateTimeCulture();
-      let formatter = culture.getFormatter(format);
-      return (value) => formatter.format(parseDateInvariant(value));
-   });
-
-   Fmt.registerFactory(["time", "t"], (fmt, format = "hhmmss") => {
-      let culture = Culture.getDateTimeCulture();
-      let formatter = culture.getFormatter(format);
-      return (value) => formatter.format(parseDateInvariant(value));
-   });
-
-   Fmt.registerFactory(["datetime", "dt"], (fmt, format = "yyyyMd hhmm") => {
-      let culture = Culture.getDateTimeCulture();
-      let formatter = culture.getFormatter(format);
-      return (value) => formatter.format(parseDateInvariant(value));
-   });
-
-   setGetFormatCacheCallback(() => {
-      let cache = getCurrentCultureCache();
-      if (!cache.formatCache) cache.formatCache = {};
-      return cache.formatCache;
-   });
-
-   setGetExpressionCacheCallback(() => {
-      let cache = getCurrentCultureCache();
-      if (!cache.exprCache) cache.exprCache = {};
-      return cache.exprCache;
-   });
-
-   setGetStringTemplateCacheCallback(() => {
-      let cache = getCurrentCultureCache();
-      if (!cache.strTplCache) cache.strTplCache = {};
-      return cache.strTplCache;
-   });
-
-   GlobalCacheIdentifier.change();
-}
diff --git a/packages/cx/src/ui/Format.ts b/packages/cx/src/ui/Format.ts
new file mode 100644
index 000000000..ad7500cd7
--- /dev/null
+++ b/packages/cx/src/ui/Format.ts
@@ -0,0 +1,108 @@
+import { Culture, getCurrentCultureCache } from "./Culture";
+import { Format as Fmt, resolveMinMaxFractionDigits, setGetFormatCacheCallback } from "../util/Format";
+import { setGetExpressionCacheCallback } from "../data/Expression";
+import { setGetStringTemplateCacheCallback } from "../data/StringTemplate";
+import { parseDateInvariant } from "../util";
+import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
+
+export const Format = Fmt;
+
+let cultureSensitiveFormatsRegistered = false;
+
+export function resolveNumberFormattingFlags(flags?: string): any {
+   if (!flags) return null;
+   let result: any = {};
+   if (flags.indexOf("+") >= 0) result.signDisplay = "exceptZero";
+   if (flags.indexOf("c") >= 0) result.notation = "compact";
+   if (flags.indexOf("a") >= 0) result.currencySign = "accounting";
+   return result;
+}
+
+export function enableCultureSensitiveFormatting() {
+   if (cultureSensitiveFormatsRegistered) return;
+
+   cultureSensitiveFormatsRegistered = true;
+
+   Fmt.registerFactory(["number", "n"], (format: any, minimumFractionDigits?: any, maximumFractionDigits?: any, flags?: string) => {
+      let culture = Culture.getNumberCulture();
+
+      let formatter = culture.getFormatter({
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+         ...resolveNumberFormattingFlags(flags),
+      });
+
+      return (value: any) => formatter.format(value);
+   });
+
+   Fmt.registerFactory("currency", (format: any, currency?: string, minimumFractionDigits?: any, maximumFractionDigits?: any, flags?: string) => {
+      let culture = Culture.getNumberCulture();
+      currency = currency || Culture.defaultCurrency;
+
+      let formatter = culture.getFormatter({
+         style: "currency",
+         currency: currency,
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+         ...resolveNumberFormattingFlags(flags),
+      });
+
+      return (value: any) => formatter.format(value);
+   });
+
+   Fmt.registerFactory(["percentage", "p", "%"], (format: any, minimumFractionDigits?: any, maximumFractionDigits?: any, flags?: string) => {
+      let culture = Culture.getNumberCulture();
+      let formatter = culture.getFormatter({
+         style: "percent",
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+         ...resolveNumberFormattingFlags(flags),
+      });
+      return (value: any) => formatter.format(value);
+   });
+
+   Fmt.registerFactory(["percentSign", "ps"], (format: any, minimumFractionDigits?: any, maximumFractionDigits?: any, flags?: string) => {
+      let culture = Culture.getNumberCulture();
+      let formatter = culture.getFormatter({
+         style: "percent",
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+         ...resolveNumberFormattingFlags(flags),
+      });
+      return (value: any) => formatter.format(value / 100);
+   });
+
+   Fmt.registerFactory(["date", "d"], (fmt: any, format = "yyyyMMdd") => {
+      let culture = Culture.getDateTimeCulture();
+      let formatter = culture.getFormatter(format);
+      return (value: any) => formatter.format(parseDateInvariant(value));
+   });
+
+   Fmt.registerFactory(["time", "t"], (fmt: any, format = "hhmmss") => {
+      let culture = Culture.getDateTimeCulture();
+      let formatter = culture.getFormatter(format);
+      return (value: any) => formatter.format(parseDateInvariant(value));
+   });
+
+   Fmt.registerFactory(["datetime", "dt"], (fmt: any, format = "yyyyMd hhmm") => {
+      let culture = Culture.getDateTimeCulture();
+      let formatter = culture.getFormatter(format);
+      return (value: any) => formatter.format(parseDateInvariant(value));
+   });
+
+   setGetFormatCacheCallback(() => {
+      let cache = getCurrentCultureCache();
+      if (!cache.formatCache) cache.formatCache = {};
+      return cache.formatCache;
+   });
+
+   setGetExpressionCacheCallback(() => {
+      let cache = getCurrentCultureCache();
+      if (!cache.exprCache) cache.exprCache = {};
+      return cache.exprCache;
+   });
+
+   setGetStringTemplateCacheCallback(() => {
+      let cache = getCurrentCultureCache();
+      if (!cache.strTplCache) cache.strTplCache = {};
+      return cache.strTplCache;
+   });
+
+   GlobalCacheIdentifier.change();
+}
diff --git a/packages/cx/src/ui/HoverSync.d.ts b/packages/cx/src/ui/HoverSync.d.ts
deleted file mode 100644
index a55059a75..000000000
--- a/packages/cx/src/ui/HoverSync.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as Cx from "../core";
-
-interface HoverSyncProps extends Cx.PureContainerProps {}
-
-export class HoverSync extends Cx.Widget<HoverSyncProps> {}
-
-interface HoverSyncElementProps extends Cx.HtmlElementProps {
-   hoverStyle?: Cx.StyleProp;
-   hoverClass?: Cx.ClassProp;
-   hoverId?: Cx.Prop<any>;
-}
-
-export class HoverSyncElement extends Cx.Widget<HoverSyncElementProps> {}
diff --git a/packages/cx/src/ui/HoverSync.js b/packages/cx/src/ui/HoverSync.js
deleted file mode 100644
index e278fdadd..000000000
--- a/packages/cx/src/ui/HoverSync.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/*
-   HoverSync transfers through the context methods for reporting and subscribing to hover data to
-   its descendants. How this should work is that each component can subscribe and unsubscribe
-   to a hover channel and receive info about hover changes.
-   Also, each component should report mouse enter/leave events.
-   Similar to controllers, hover sync should transcend into child contexts.
-*/
-
-import { dummyCallback } from "../util/dummyCallback";
-import { parseStyle } from "../util/parseStyle";
-import { SubscriberList } from "../util/SubscriberList";
-import { Container } from "./Container";
-import { PureContainer } from "./PureContainer";
-import { VDOM } from "./VDOM";
-
-export class HoverSync extends PureContainer {
-   initInstance(context, instance) {
-      let channels = {};
-      instance.hoverSync = {
-         report: (channel, hoverId, active) => {
-            let ch = channels[channel];
-            if (!ch) return;
-            let state = active && hoverId != null;
-            if (ch.state !== state && (ch.state === hoverId || active)) {
-               ch.state = state;
-               ch.subscribers.notify(state);
-            }
-         },
-         subscribe: (channel, callback) => {
-            let ch = channels[channel];
-            if (!ch)
-               ch = channels[channel] = {
-                  subscribers: new SubscriberList(),
-                  state: false,
-               };
-            return ch.subscribers.subscribe(callback);
-         },
-      };
-   }
-
-   explore(context, instance) {
-      context.push("hoverSync", instance.hoverSync);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("hoverSync");
-   }
-}
-
-class HoverSyncChild extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = { hover: false };
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onMouseLeave = this.onMouseLeave.bind(this);
-   }
-
-   onMouseMove() {
-      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, true);
-   }
-
-   onMouseLeave() {
-      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, false);
-   }
-
-   compontentWillUnmount() {
-      this.unsubscribe();
-   }
-
-   componentDidMount() {
-      this.unsubscribe = this.props.hoverSync.subscribe(this.props.hoverChannel, (hoverId) => {
-         let hover = hoverId === this.props.hoverId;
-         if (hover !== this.state.hover) this.setState({ hover });
-      });
-   }
-
-   render() {
-      return this.props.render({
-         hover: this.state.hover,
-         onMouseLeave: this.onMouseLeave,
-         onMouseMove: this.onMouseMove,
-         key: "child",
-      });
-   }
-}
-
-export function withHoverSync(key, hoverSync, hoverChannel, hoverId, render) {
-   if (!hoverSync || !hoverChannel || hoverId == null)
-      return render({ key, hover: false, onMouseLeave: dummyCallback, onMouseMove: dummyCallback });
-   return (
-      <HoverSyncChild key={key} hoverSync={hoverSync} hoverChannel={hoverChannel} hoverId={hoverId} render={render} />
-   );
-}
-
-export class HoverSyncElement extends Container {
-   declareData(...args) {
-      super.declareData(...args, {
-         hoverId: undefined,
-         hoverClass: { structured: true },
-         hoverStyle: { structured: true },
-      });
-   }
-
-   prepareData(context, instance) {
-      instance.hoverSync = context.hoverSync;
-      instance.inSvg = !!context.inSvg;
-      let { data } = instance;
-      data.hoverStyle = parseStyle(data.hoverStyle);
-      super.prepareData(context, instance);
-   }
-
-   render(context, instance, key) {
-      let { data, inSvg } = instance;
-      let { CSS } = this;
-      let children = this.renderChildren(context, instance);
-      let eventHandlers = instance.getJsxEventProps();
-      return withHoverSync(
-         key,
-         instance.hoverSync,
-         this.hoverChannel,
-         data.hoverId,
-         ({ hover, onMouseMove, onMouseLeave, key }) => {
-            let style = {
-               ...data.style,
-               ...(hover && data.hoverStyle),
-            };
-            return VDOM.createElement(
-               inSvg ? "g" : "div",
-               {
-                  key,
-                  className: CSS.expand(data.classNames, CSS.state({ hover }), hover && data.hoverClass),
-                  style,
-                  ...eventHandlers,
-                  onMouseLeave,
-                  onMouseMove,
-               },
-               children,
-            );
-         },
-      );
-   }
-}
-
-HoverSyncElement.prototype.baseClass = "hoversyncelement";
-HoverSyncElement.prototype.styled = true;
-HoverSyncElement.prototype.hoverChannel = "default";
diff --git a/packages/cx/src/ui/HoverSync.tsx b/packages/cx/src/ui/HoverSync.tsx
new file mode 100644
index 000000000..87a807f44
--- /dev/null
+++ b/packages/cx/src/ui/HoverSync.tsx
@@ -0,0 +1,189 @@
+/** @jsxImportSource react */
+/*
+   HoverSync transfers through the context methods for reporting and subscribing to hover data to
+   its descendants. How this should work is that each component can subscribe and unsubscribe
+   to a hover channel and receive info about hover changes.
+   Also, each component should report mouse enter/leave events.
+   Similar to controllers, hover sync should transcend into child contexts.
+*/
+
+import { dummyCallback } from "../util/dummyCallback";
+import { parseStyle } from "../util/parseStyle";
+import { SubscriberList } from "../util/SubscriberList";
+import { StyledContainerBase, StyledContainerConfig } from "./Container";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Instance } from "./Instance";
+import { VDOM } from "./VDOM";
+import { Prop, StyleProp, ClassProp } from "./Prop";
+
+export interface HoverSyncConfig extends PureContainerConfig {}
+
+export class HoverSync extends PureContainerBase<HoverSyncConfig, Instance> {
+   constructor(config?: HoverSyncConfig) {
+      super(config);
+   }
+   initInstance(context: any, instance: any) {
+      let channels: any = {};
+      instance.hoverSync = {
+         report: (channel: string, hoverId: any, active: boolean) => {
+            let ch = channels[channel];
+            if (!ch) return;
+            let state = active && hoverId != null;
+            if (ch.state !== state && (ch.state === hoverId || active)) {
+               ch.state = state;
+               ch.subscribers.notify(state);
+            }
+         },
+         subscribe: (channel: string, callback: (state: any) => void) => {
+            let ch = channels[channel];
+            if (!ch)
+               ch = channels[channel] = {
+                  subscribers: new SubscriberList(),
+                  state: false,
+               };
+            return ch.subscribers.subscribe(callback);
+         },
+      };
+   }
+
+   explore(context: any, instance: any) {
+      context.push("hoverSync", instance.hoverSync);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: any, instance: any) {
+      context.pop("hoverSync");
+   }
+}
+
+interface HoverSyncChildProps {
+   hoverSync: any;
+   hoverChannel: string;
+   hoverId: any;
+   render: (props: any) => any;
+}
+
+interface HoverSyncChildState {
+   hover: boolean;
+}
+
+class HoverSyncChild extends VDOM.Component<HoverSyncChildProps, HoverSyncChildState> {
+   declare unsubscribe: any;
+
+   constructor(props: HoverSyncChildProps) {
+      super(props);
+      this.state = { hover: false };
+      this.onMouseMove = this.onMouseMove.bind(this);
+      this.onMouseLeave = this.onMouseLeave.bind(this);
+   }
+
+   onMouseMove() {
+      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, true);
+   }
+
+   onMouseLeave() {
+      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, false);
+   }
+
+   componentWillUnmount() {
+      this.unsubscribe();
+   }
+
+   componentDidMount() {
+      this.unsubscribe = this.props.hoverSync.subscribe(this.props.hoverChannel, (hoverId: any) => {
+         let hover = hoverId === this.props.hoverId;
+         if (hover !== this.state.hover) this.setState({ hover });
+      });
+   }
+
+   render() {
+      return this.props.render({
+         hover: this.state.hover,
+         onMouseLeave: this.onMouseLeave,
+         onMouseMove: this.onMouseMove,
+         key: "child",
+      });
+   }
+}
+
+export function withHoverSync(
+   key: string | number,
+   hoverSync: any,
+   hoverChannel: string | undefined,
+   hoverId: any,
+   render: (props: any) => any,
+) {
+   if (!hoverSync || !hoverChannel || hoverId == null)
+      return render({ key, hover: false, onMouseLeave: dummyCallback, onMouseMove: dummyCallback });
+   return (
+      <HoverSyncChild key={key} hoverSync={hoverSync} hoverChannel={hoverChannel} hoverId={hoverId} render={render} />
+   );
+}
+
+export interface HoverSyncElementConfig extends StyledContainerConfig {
+   hoverChannel?: string;
+   hoverId?: Prop<any>;
+   hoverClass?: ClassProp;
+   hoverStyle?: StyleProp;
+}
+
+export class HoverSyncElement extends StyledContainerBase<HoverSyncElementConfig, Instance> {
+   declare hoverChannel: string;
+   declare hoverId?: Prop<any>;
+   declare hoverClass?: ClassProp;
+   declare hoverStyle?: StyleProp;
+
+   constructor(config?: HoverSyncElementConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         hoverId: undefined,
+         hoverClass: { structured: true },
+         hoverStyle: { structured: true },
+      });
+   }
+
+   prepareData(context: any, instance: any) {
+      instance.hoverSync = context.hoverSync;
+      instance.inSvg = !!context.inSvg;
+      let { data } = instance;
+      data.hoverStyle = parseStyle(data.hoverStyle);
+      super.prepareData(context, instance);
+   }
+
+   render(context: any, instance: any, key: string) {
+      let { data, inSvg } = instance;
+      let { CSS } = this;
+      let children = this.renderChildren(context, instance);
+      let eventHandlers = instance.getJsxEventProps();
+      return withHoverSync(
+         key,
+         instance.hoverSync,
+         this.hoverChannel,
+         data.hoverId,
+         ({ hover, onMouseMove, onMouseLeave, key }: any) => {
+            let style = {
+               ...data.style,
+               ...(hover && data.hoverStyle),
+            };
+            return VDOM.createElement(
+               inSvg ? "g" : "div",
+               {
+                  key,
+                  className: CSS.expand(data.classNames, CSS.state({ hover }), hover && data.hoverClass),
+                  style,
+                  ...eventHandlers,
+                  onMouseLeave,
+                  onMouseMove,
+               },
+               children,
+            );
+         },
+      );
+   }
+}
+
+HoverSyncElement.prototype.baseClass = "hoversyncelement";
+HoverSyncElement.prototype.hoverChannel = "default";
diff --git a/packages/cx/src/ui/Instance.d.ts b/packages/cx/src/ui/Instance.d.ts
deleted file mode 100644
index d94ed50fb..000000000
--- a/packages/cx/src/ui/Instance.d.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Record } from "../core";
-import { RenderingContext } from "./RenderingContext";
-import { View } from "../data/View";
-import { Widget } from "./Widget";
-
-export class Instance<ViewModel = any, Controller = any> {
-   store: View<ViewModel>;
-   data: Record;
-   widget: Widget;
-   key: number;
-   id: string;
-   controller: Controller;
-   parentOptions: any;
-   children?: Instance[];
-
-   constructor(widget: Widget, key: string | number, parent?: Instance, store?: View);
-
-   setParentStore(parentStore: View): void;
-
-   init(context: RenderingContext): void;
-
-   explore(context: RenderingContext): boolean;
-
-   prepare(context: RenderingContext): void;
-
-   cleanup(context: RenderingContext): void;
-
-   render(context: RenderingContext, keyPrefix?: string): JSX.Element | void;
-
-   setState(state: Cx.Record): void;
-
-   set(prop: string, value: any, internal?: boolean);
-
-   definePropertySetter(prop: string, setter: (value: any) => void): boolean;
-
-   /**
-    * @protected
-    * @param prop
-    * @param value
-    * @returns {boolean}
-    */
-   protected doSet(prop: string, value: any): boolean;
-
-   replaceState(state: Cx.Config);
-
-   getInstanceCache(): InstanceCache;
-
-   clearChildrenCache();
-
-   getChild(context: RenderingContext | null, widget: Widget, keyPrefix?: string, store?: View): Instance;
-
-   getDetachedChild(widget: Widget, key: number | string, store?: View): Instance;
-
-   // TODO: check return type
-   prepareRenderCleanupChild(widget: Widget, store?: View, keyPrefix?: string, options?: object): JSX.Element | void;
-
-   getJsxEventProps(): Cx.Config;
-
-   nestedDataSet(key: string, value: any, dataConfig: Cx.Config): boolean;
-
-   invokeControllerMethod(methodName: string, ...args: any[]);
-}
-
-export class InstanceCache {
-   constructor(parent: Instance);
-
-   getChild(widget: Widget, store: View, keyPrefix?: string): Instance;
-
-   mark();
-
-   sweep();
-}
diff --git a/packages/cx/src/ui/Instance.js b/packages/cx/src/ui/Instance.js
deleted file mode 100644
index e2f8d9b65..000000000
--- a/packages/cx/src/ui/Instance.js
+++ /dev/null
@@ -1,620 +0,0 @@
-import { Controller } from "./Controller";
-import { debug, renderFlag, processDataFlag, destroyFlag } from "../util/Debug";
-import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
-import { throttle } from "../util/throttle";
-import { validatedDebounce } from "../util/validatedDebounce";
-import { batchUpdates } from "./batchUpdates";
-import { isString } from "../util/isString";
-import { isFunction } from "../util/isFunction";
-import { isDefined } from "../util/isDefined";
-import { isArray } from "../util/isArray";
-import { isObject } from "../util/isObject";
-import { isNonEmptyArray } from "../util/isNonEmptyArray";
-import { isUndefined } from "../util/isUndefined";
-import { isAccessorChain } from "../data/createAccessorModelProxy";
-
-let instanceId = 1000;
-
-export class Instance {
-   constructor(widget, key, parent, parentStore) {
-      this.widget = widget;
-      this.key = key;
-      this.id = String(++instanceId);
-      this.cached = {};
-      this.parent = parent;
-      this.parentStore = parentStore ?? parent?.store;
-
-      if (this.parentStore == null) throw new Error("Cannot create instance without a parent store.");
-   }
-
-   setParentStore(parentStore) {
-      this.parentStore = parentStore;
-      this.widget.applyParentStore(this);
-   }
-
-   init(context) {
-      // widget is initialized when the first instance is initialized
-      if (!this.widget.initialized) {
-         this.widget.init(context);
-         this.widget.initialized = true;
-      }
-
-      if (!this.dataSelector) {
-         this.widget.selector.init(this.parentStore);
-         this.dataSelector = this.widget.selector.createStoreSelector();
-      }
-
-      // init instance might change the store, so this must go before the controller initialization
-      this.widget.initInstance(context, this);
-
-      // initInstance can set the store, otherwise use parent store
-      if (!this.store) this.store = this.parentStore;
-      if (this.widget.onInit) this.widget.onInit(context, this);
-
-      this.widget.initState(context, this);
-
-      if (this.widget.controller)
-         this.controller = Controller.create(this.widget.controller, {
-            widget: this.widget,
-            instance: this,
-            store: this.store,
-         });
-
-      if (
-         this.widget.exploreCleanup ||
-         this.widget.outerLayout ||
-         this.widget.isContent ||
-         this.widget.controller ||
-         this.widget.prepareCleanup
-      )
-         this.needsExploreCleanup = true;
-      if (this.widget.prepare || this.widget.controller) this.needsPrepare = true;
-      if (this.widget.cleanup || this.widget.controller) this.needsCleanup = true;
-      this.initialized = true;
-   }
-
-   checkVisible(context) {
-      if (!this.initialized) this.init(context);
-
-      let wasVisible = this.visible;
-      this.rawData = this.dataSelector(this.store);
-      this.visible = this.widget.checkVisible(context, this, this.rawData);
-      if (this.visible && !this.detached) this.parent.instanceCache.addChild(this);
-      this.explored = false;
-      this.prepared = false;
-
-      if (!this.visible && wasVisible) this.destroy();
-
-      return this.visible;
-   }
-
-   scheduleExploreIfVisible(context) {
-      if (this.checkVisible(context)) {
-         context.exploreStack.push(this);
-
-         if (this.needsExploreCleanup) context.exploreStack.push(this);
-
-         return true;
-      }
-      return false;
-   }
-
-   cache(key, value) {
-      let oldValue = this.cached[key];
-      if (oldValue === value) return false;
-
-      if (!this.cacheList) this.cacheList = {};
-      this.cacheList[key] = value;
-      return true;
-   }
-
-   markShouldUpdate(context) {
-      let ins = this;
-      let renderList = this.renderList;
-      renderList.markReverseIndex();
-
-      //notify all parents that child state changed to bust up caching
-      while (ins && !ins.shouldUpdate && ins.explored) {
-         if (ins.renderList !== renderList) {
-            renderList.reverse();
-            renderList = ins.renderList;
-            renderList.markReverseIndex();
-         }
-         ins.shouldUpdate = true;
-         renderList.data.push(ins);
-         ins = ins.widget.isContent
-            ? ins.contentPlaceholder
-            : ins.parent.outerLayout === ins
-              ? ins.parent.parent
-              : ins.parent;
-      }
-      renderList.reverse();
-   }
-
-   explore(context) {
-      if (!this.visible) throw new Error("Explore invisible!");
-
-      if (this.explored) {
-         if (this.widget.prepareCleanup) context.prepareList.push(this);
-
-         if (this.widget.exploreCleanup) this.widget.exploreCleanup(context, this);
-
-         if (this.parent.outerLayout === this) context.popNamedValue("content", "body");
-
-         if (this.widget.controller) context.pop("controller");
-
-         return;
-      }
-
-      this.explored = true;
-
-      if (this.needsPrepare) context.prepareList.push(this);
-      else this.prepared = true;
-
-      if (this.needsCleanup) context.cleanupList.push(this);
-
-      if (this.instanceCache) this.instanceCache.mark();
-
-      //controller may reconfigure the widget and need to go before shouldUpdate calculation
-      this.parentOptions = context.parentOptions;
-
-      if (!this.controller) {
-         if (context.controller) this.controller = context.controller;
-         else if (this.parent.controller) this.controller = this.parent.controller;
-      }
-
-      this.destroyTracked = false;
-
-      if (this.controller) {
-         if (this.widget.controller) {
-            if (!this.controller.initialized) {
-               this.controller.init(context);
-               this.controller.initialized = true;
-            }
-            context.push("controller", this.controller);
-            this.controller.explore(context);
-            if (this.controller.onDestroy && this.controller.widget == this.widget) this.trackDestroy();
-         }
-      }
-
-      if (this.widget.onDestroy || isNonEmptyArray(this.destroySubscriptions)) this.trackDestroy();
-
-      this.renderList = this.assignedRenderList || this.parent.renderList || context.getRootRenderList();
-
-      let shouldUpdate =
-         this.rawData !== this.cached.rawData ||
-         this.state !== this.cached.state ||
-         this.widget.version !== this.cached.widgetVersion ||
-         this.cached.globalCacheIdentifier !== GlobalCacheIdentifier.get();
-
-      if (shouldUpdate) {
-         this.data = { ...this.rawData };
-         this.widget.prepareData(context, this);
-         debug(processDataFlag, this.widget);
-      }
-
-      //onExplore might set the outer layout
-      if (this.widget.onExplore) this.widget.onExplore(context, this);
-
-      if (this.parent.outerLayout === this) {
-         this.renderList = this.renderList.insertRight();
-         context.pushNamedValue("content", "body", this.parent);
-      }
-
-      if (this.widget.outerLayout) {
-         this.outerLayout = this.getChild(context, this.widget.outerLayout, null, this.store);
-         this.outerLayout.scheduleExploreIfVisible(context);
-         this.renderList = this.renderList.insertLeft();
-      }
-
-      if (this.widget.isContent) {
-         this.contentPlaceholder = context.contentPlaceholder && context.contentPlaceholder[this.widget.putInto];
-         if (this.contentPlaceholder) context.contentPlaceholder[this.widget.putInto](this);
-         else {
-            this.renderList = this.renderList.insertLeft();
-            context.pushNamedValue("content", this.widget.putInto, this);
-            if (!context.contentList) context.contentList = {};
-            let list = context.contentList[this.widget.putInto];
-            if (!list) list = context.contentList[this.widget.putInto] = [];
-            list.push(this);
-         }
-      }
-
-      this.shouldUpdate = false;
-      if (shouldUpdate || this.childStateDirty || !this.widget.memoize) this.markShouldUpdate(context);
-
-      context.exploreStack.hop();
-
-      if (this.widget.helpers) {
-         this.helpers = {};
-         for (let cmp in this.widget.helpers) {
-            let helper = this.widget.helpers[cmp];
-            if (helper) {
-               let ins = this.getChild(context, helper);
-               if (ins.scheduleExploreIfVisible(context)) this.helpers[cmp] = ins;
-            }
-         }
-      }
-
-      this.widget.explore(context, this, this.data);
-   }
-
-   prepare(context) {
-      if (!this.visible) throw new Error("Prepare invisible!");
-
-      if (this.prepared) {
-         if (this.widget.prepareCleanup) this.widget.prepareCleanup(context, this);
-         return;
-      }
-
-      this.prepared = true;
-      if (this.widget.prepare) this.widget.prepare(context, this);
-
-      if (this.widget.controller && this.controller.prepare) this.controller.prepare(context);
-   }
-
-   render(context) {
-      if (!this.visible) throw new Error("Render invisible!");
-
-      if (this.shouldUpdate) {
-         debug(renderFlag, this.widget, this.key);
-         let vdom = renderResultFix(this.widget.render(context, this, this.key));
-         if (this.widget.isContent || this.outerLayout) this.contentVDOM = vdom;
-         else this.vdom = vdom;
-      }
-
-      if (this.cacheList) for (let key in this.cacheList) this.cached[key] = this.cacheList[key];
-
-      this.cacheList = null;
-
-      this.cached.rawData = this.rawData;
-      this.cached.data = this.data;
-      this.cached.state = this.state;
-      this.cached.widgetVersion = this.widget.version;
-      this.cached.globalCacheIdentifier = GlobalCacheIdentifier.get();
-      this.childStateDirty = false;
-
-      if (this.instanceCache) this.instanceCache.sweep();
-
-      if (this.parent.outerLayout === this) {
-         //if outer layouts are chained we need to find the originating element (last element with OL set)
-         let parent = this.parent;
-         while (parent.parent.outerLayout == parent) parent = parent.parent;
-         parent.vdom = this.vdom;
-      }
-
-      return this.vdom;
-   }
-
-   cleanup(context) {
-      if (this.widget.controller && this.controller.cleanup) this.controller.cleanup(context);
-
-      if (this.widget.cleanup) this.widget.cleanup(context, this);
-   }
-
-   trackDestroy() {
-      if (!this.destroyTracked) {
-         this.destroyTracked = true;
-         if (this.parent && !this.detached) this.parent.trackDestroyableChild(this);
-      }
-   }
-
-   trackDestroyableChild(child) {
-      this.instanceCache.trackDestroy(child);
-      this.trackDestroy();
-   }
-
-   subscribeOnDestroy(callback) {
-      if (!this.destroySubscriptions) this.destroySubscriptions = [];
-      this.destroySubscriptions.push(callback);
-      this.trackDestroy();
-      return () => {
-         this.destroySubscriptions && this.destroySubscriptions.filter((cb) => cb != callback);
-      };
-   }
-
-   destroy() {
-      if (this.instanceCache) {
-         this.instanceCache.destroy();
-         this.instanceCache = null;
-      }
-
-      if (this.destroySubscriptions) {
-         this.destroySubscriptions.forEach((cb) => cb());
-         this.destroySubscriptions = null;
-      }
-
-      if (this.destroyTracked) {
-         debug(destroyFlag, this);
-
-         if (this.widget.onDestroy) this.widget.onDestroy(this);
-
-         if (
-            this.widget.controller &&
-            this.controller &&
-            this.controller.onDestroy &&
-            this.controller.widget == this.widget
-         )
-            this.controller.onDestroy();
-
-         this.destroyTracked = false;
-      }
-   }
-
-   setState(state) {
-      let skip = !!this.state;
-      if (this.state)
-         for (let k in state) {
-            if (this.state[k] !== state[k]) {
-               skip = false;
-               break;
-            }
-         }
-
-      if (skip) return;
-
-      this.state = Object.assign({}, this.state, state);
-      let parent = this.parent;
-      //notify all parents that child state change to bust up caching
-      while (parent) {
-         parent.childStateDirty = true;
-         parent = parent.parent;
-      }
-      batchUpdates(() => {
-         this.store.notify();
-      });
-   }
-
-   set(prop, value, options = {}) {
-      //skip re-rendering (used for reading state from uncontrolled components)
-      if (options.internal && this.rawData) {
-         this.rawData[prop] = value;
-         this.data[prop] = value;
-      }
-
-      let setter = this.setters && this.setters[prop];
-      if (setter) {
-         if (options.immediate && isFunction(setter.reset)) setter.reset(value);
-         else setter(value);
-         return true;
-      }
-
-      let p = this.widget[prop];
-      if (p && typeof p == "object") {
-         if (p.debounce) {
-            this.definePropertySetter(
-               prop,
-               validatedDebounce(
-                  (value) => this.doSet(prop, value),
-                  () => this.dataSelector(this.store)[prop],
-                  p.debounce,
-               ),
-            );
-            this.set(prop, value, options);
-            return true;
-         }
-
-         if (p.throttle) {
-            this.definePropertySetter(
-               prop,
-               throttle((value) => this.doSet(prop, value), p.throttle),
-            );
-            this.set(prop, value, options);
-            return true;
-         }
-      }
-
-      return this.doSet(prop, value);
-   }
-
-   definePropertySetter(prop, setter) {
-      if (!this.setters) this.setters = {};
-      this.setters[prop] = setter;
-   }
-
-   doSet(prop, value) {
-      let changed = false;
-      batchUpdates(() => {
-         let p = this.widget[prop];
-         if (isObject(p)) {
-            if (p.set) {
-               if (isFunction(p.set)) {
-                  p.set(value, this);
-                  changed = true;
-               } else if (isString(p.set)) {
-                  this.controller[p.set](value, this);
-                  changed = true;
-               }
-            } else if (p.action) {
-               let action = p.action(value, this);
-               this.store.dispatch(action);
-               changed = true;
-            } else if (isString(p.bind) || isAccessorChain(p.bind)) {
-               changed = this.store.set(p.bind, value);
-            }
-         } else if (isAccessorChain(p)) changed = this.store.set(p.toString(), value);
-      });
-      return changed;
-   }
-
-   nestedDataSet(key, value, dataConfig, useParentStore) {
-      let config = dataConfig[key];
-      if (!config)
-         throw new Error(`Unknown nested data key ${key}. Known keys are ${Object.keys(dataConfig).join(", ")}.`);
-
-      if (isAccessorChain(config)) config = { bind: config.toString() };
-
-      if (config.bind) {
-         let store = this.store;
-         //in case of Rescope or DataProxy, bindings point to the data in the parent store
-         if (useParentStore && store.store) store = store.store;
-         return isUndefined(value) ? store.deleteItem(config.bind) : store.setItem(config.bind, value);
-      }
-
-      if (!config.set)
-         throw new Error(
-            `Cannot change nested data value for ${key} as it's read-only. Either define it as a binding or define a set function.`,
-         );
-      if (isString(config.set)) this.getControllerMethod(config.set)(value, this);
-      else if (isFunction(config.set)) config.set(value, this);
-      else
-         throw new Error(
-            `Cannot change nested data value for ${key} the defined setter is neither a function nor a controller method.`,
-         );
-
-      return true;
-   }
-
-   replaceState(state) {
-      this.cached.state = this.state;
-      this.state = state;
-      this.store.notify();
-   }
-
-   getInstanceCache() {
-      if (!this.instanceCache)
-         this.instanceCache = new InstanceCache(this, this.widget.isPureContainer ? this.key : null);
-      return this.instanceCache;
-   }
-
-   clearChildrenCache() {
-      if (this.instanceCache) this.instanceCache.destroy();
-   }
-
-   getChild(context, widget, key, store) {
-      return this.getInstanceCache().getChild(widget, store ?? this.store, key);
-   }
-
-   getDetachedChild(widget, key, store) {
-      let child = new Instance(widget, key, this, store ?? this.store);
-      child.detached = true;
-      return child;
-   }
-
-   prepareRenderCleanupChild(widget, store, keyPrefix, options) {
-      return widget.prepareRenderCleanup(store ?? this.store, options, keyPrefix, this);
-   }
-
-   getJsxEventProps() {
-      let { widget } = this;
-
-      if (!isArray(widget.jsxAttributes)) return null;
-
-      let props = {};
-      widget.jsxAttributes.forEach((attr) => {
-         if (attr.indexOf("on") == 0 && attr.length > 2) props[attr] = (e) => this.invoke(attr, e, this);
-      });
-      return props;
-   }
-
-   getCallback(methodName) {
-      let scope = this.widget;
-      let callback = scope[methodName];
-
-      if (typeof callback === "string") return this.getControllerMethod(callback);
-
-      if (typeof callback !== "function")
-         throw new Error(`Cannot invoke callback method ${methodName} as assigned value is not a function.`);
-
-      return callback.bind(scope);
-   }
-
-   getControllerMethod(methodName) {
-      if (!this.controller)
-         throw new Error(
-            `Cannot invoke controller method "${methodName}" as controller is not assigned to the widget.`,
-         );
-
-      let at = this;
-      while (at != null && at.controller && !at.controller[methodName]) at = at.parent;
-
-      if (!at || !at.controller || !at.controller[methodName])
-         throw new Error(
-            `Cannot invoke controller method "${methodName}". The method cannot be found in any of the assigned controllers.`,
-         );
-
-      return at.controller[methodName].bind(at.controller);
-   }
-
-   invoke(methodName, ...args) {
-      return this.getCallback(methodName).apply(null, args);
-   }
-
-   invokeControllerMethod(methodName, ...args) {
-      return this.getControllerMethod(methodName).apply(null, args);
-   }
-}
-
-function renderResultFix(res) {
-   return res != null && isDefined(res.content) ? res : { content: res };
-}
-
-export class InstanceCache {
-   constructor(parent, keyPrefix) {
-      this.children = {};
-      this.parent = parent;
-      this.marked = {};
-      this.monitored = null;
-      this.keyPrefix = keyPrefix != null ? keyPrefix + "-" : "";
-   }
-
-   getChild(widget, parentStore, key) {
-      let k = this.keyPrefix + (key != null ? key : widget.vdomKey || widget.widgetId);
-      let instance = this.children[k];
-
-      if (
-         !instance ||
-         instance.widget !== widget ||
-         (!instance.visible && (instance.widget.controller || instance.widget.onInit))
-      ) {
-         instance = new Instance(widget, k, this.parent, parentStore);
-         this.children[k] = instance;
-      } else if (instance.parentStore !== parentStore) {
-         instance.setParentStore(parentStore);
-      }
-
-      return instance;
-   }
-
-   addChild(instance) {
-      this.marked[instance.key] = instance;
-   }
-
-   mark() {
-      this.marked = {};
-   }
-
-   trackDestroy(instance) {
-      if (!this.monitored) this.monitored = {};
-      this.monitored[instance.key] = instance;
-   }
-
-   destroy() {
-      this.children = {};
-      this.marked = {};
-
-      if (!this.monitored) return;
-
-      for (let key in this.monitored) {
-         this.monitored[key].destroy();
-      }
-
-      this.monitored = null;
-   }
-
-   sweep() {
-      this.children = this.marked;
-      if (!this.monitored) return;
-      let activeCount = 0;
-      for (let key in this.monitored) {
-         let monitoredChild = this.monitored[key];
-         let child = this.children[key];
-         if (child !== monitoredChild || !monitoredChild.visible) {
-            monitoredChild.destroy();
-            delete this.monitored[key];
-            if (child === monitoredChild) delete this.children[key];
-         } else activeCount++;
-      }
-      if (activeCount === 0) this.monitored = null;
-   }
-}
diff --git a/packages/cx/src/ui/Instance.ts b/packages/cx/src/ui/Instance.ts
new file mode 100644
index 000000000..f00a2d235
--- /dev/null
+++ b/packages/cx/src/ui/Instance.ts
@@ -0,0 +1,866 @@
+import { isAccessorChain } from "../data/createAccessorModelProxy";
+import { View } from "../data/View";
+import { debug, destroyFlag, processDataFlag, renderFlag } from "../util/Debug";
+import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
+import { isArray } from "../util/isArray";
+import { isDefined } from "../util/isDefined";
+import { isFunction } from "../util/isFunction";
+import { isNonEmptyArray } from "../util/isNonEmptyArray";
+import { isObject } from "../util/isObject";
+import { isString } from "../util/isString";
+import { isUndefined } from "../util/isUndefined";
+import { throttle } from "../util/throttle";
+import { validatedDebounce } from "../util/validatedDebounce";
+import { batchUpdates } from "./batchUpdates";
+import { Controller } from "./Controller";
+import { RenderingContext } from "./RenderingContext";
+import type { Widget } from "./Widget";
+
+/**
+ * Serializable value types that can be safely passed through the framework
+ */
+export type SerializableValue = string | number | boolean | object | null | undefined;
+
+/**
+ * Core instance data structure used by widgets
+ *
+ * For custom widget data, extend this interface:
+ * @example
+ * interface MyWidgetData extends WidgetData {
+ *    customProp: string;
+ * }
+ */
+export interface WidgetData {
+   visible?: boolean;
+   disabled?: boolean;
+   enabled?: boolean;
+   text?: string;
+   innerHtml?: string;
+   attrs?: Record<string, unknown>;
+   data?: Record<string, unknown>;
+   classNames?: string;
+   className?: string;
+   class?: string;
+   style?: Record<string, string | number> | string;
+   stateMods?: Record<string, boolean | undefined>;
+   mod?: Record<string, boolean | undefined>;
+   pressed?: boolean;
+   icon?: string | boolean;
+   confirm?: string | ConfirmConfig;
+   parentDisabled?: boolean;
+   parentStrict?: boolean;
+   error?: string;
+}
+
+/**
+ * Confirmation dialog configuration
+ */
+export interface ConfirmConfig {
+   message: string;
+   title?: string;
+   yesText?: string;
+   noText?: string;
+}
+
+/**
+ * Parent options passed down from overlay/modal components
+ *
+ * For custom parent options, extend this interface:
+ * @example
+ * interface MyParentOptions extends ParentOptions {
+ *    customOption: string;
+ * }
+ */
+export interface ParentOptions {
+   dismiss?: () => void;
+}
+
+/**
+ * Props object used for rendering (passed to React.createElement)
+ */
+export type RenderProps = Record<string, any>;
+
+/**
+ * Result type for yes/no dialogs
+ */
+export const enum YesNoResult {
+   Yes = "yes",
+   No = "no",
+}
+
+/**
+ * Partial instance-like object used in some render methods
+ * This is a hack to allow passing only the data property instead of full Instance
+ */
+export interface PartialInstance {
+   data: Record<string, any>;
+   widget?: Widget;
+   state?: Record<string, any>;
+}
+
+/**
+ * Example widget-specific properties for dropdown widgets
+ */
+export interface DropdownWidgetProps {
+   lastDropdown?: Instance;
+   dropdownOpen?: boolean;
+   selectedIndex?: number;
+}
+
+/**
+ * Example widget-specific properties for form field widgets
+ */
+export interface FieldWidgetProps {
+   inputElement?: HTMLInputElement;
+   validationState?: "valid" | "invalid" | "pending";
+}
+
+/**
+ * Type aliases for common widget instance types using intersection types
+ */
+export type DropdownInstance = Instance & DropdownWidgetProps;
+export type FieldInstance = Instance & FieldWidgetProps;
+
+let instanceId = 1000;
+
+/**
+ * Base Instance class
+ */
+export class Instance<WidgetType extends Widget<any, any> = Widget<any, any>> {
+   // Core properties
+   declare public widget: WidgetType;
+   declare public key: string;
+   declare public id: string;
+   declare public parent?: Instance;
+   declare public parentStore: View;
+   declare public store: View;
+   declare public controller?: Controller;
+
+   // Data and state
+   declare public data: Record<string, any>;
+   declare public rawData: Record<string, any>;
+   declare public state?: Record<string, any>;
+   declare public cached: Record<string, any>;
+   declare public cacheList?: Record<string, any> | null;
+
+   // Selectors
+   public dataSelector?: (store: any) => Record<string, any>;
+
+   // Lifecycle flags
+   public initialized?: boolean;
+   declare public visible?: boolean;
+   declare public explored?: boolean;
+   declare public prepared?: boolean;
+   declare public shouldUpdate?: boolean;
+   declare public childStateDirty?: boolean;
+   declare public detached?: boolean;
+
+   // Cleanup tracking
+   declare public needsExploreCleanup?: boolean;
+   declare public needsPrepare?: boolean;
+   declare public needsCleanup?: boolean;
+   declare public destroyTracked?: boolean;
+   public destroySubscriptions?: Array<() => void> | null;
+
+   // Child management
+   declare public instanceCache?: InstanceCache | null;
+   declare public children?: Instance[];
+   public helpers?: Record<string, Instance>;
+   public components?: Record<string, Instance>;
+
+   // Rendering
+   declare public vdom?: any;
+   declare public contentVDOM?: any;
+   declare public renderList?: any;
+   declare public assignedRenderList?: any;
+
+   // Layout
+   declare public outerLayout?: Instance;
+   declare public contentPlaceholder?: any;
+   declare public parentOptions?: any;
+
+   // Setters
+   declare public setters?: Record<string, any>;
+
+   // Other
+   declare public record?: any;
+   declare public mappedRecords?: any[];
+
+   // List-specific
+   declare public instances?: Instance[];
+   declare public selected?: boolean;
+
+   constructor(widget: WidgetType, key: string, parent?: Instance, parentStore?: any) {
+      this.widget = widget;
+      this.key = key;
+      this.id = String(++instanceId);
+      this.cached = {};
+      this.parent = parent;
+      this.parentStore = parentStore ?? parent?.store;
+
+      if (this.parentStore == null) throw new Error("Cannot create instance without a parent store.");
+   }
+
+   public setParentStore(parentStore: any): void {
+      this.parentStore = parentStore;
+      this.widget.applyParentStore(this);
+   }
+
+   public init(context: RenderingContext): void {
+      // widget is initialized when the first instance is initialized
+      if (!this.widget.initialized) {
+         this.widget.init();
+         this.widget.initialized = true;
+      }
+
+      if (!this.dataSelector) {
+         this.widget.selector!.init(this.parentStore);
+         this.dataSelector = this.widget.selector!.createStoreSelector();
+      }
+
+      // init instance might change the store, so this must go before the controller initialization
+      this.widget.initInstance(context, this);
+
+      // initInstance can set the store, otherwise use parent store
+      if (!this.store) this.store = this.parentStore;
+      if (this.widget.onInit) this.widget.onInit(context, this);
+
+      this.widget.initState(context, this);
+
+      if (this.widget.controller)
+         this.controller = Controller.create(this.widget.controller, {
+            widget: this.widget,
+            instance: this,
+            store: this.store,
+         });
+
+      if (
+         this.widget.exploreCleanup ||
+         this.widget.outerLayout ||
+         this.widget.isContent ||
+         this.widget.controller ||
+         this.widget.prepareCleanup
+      )
+         this.needsExploreCleanup = true;
+      if (this.widget.prepare || this.widget.controller) this.needsPrepare = true;
+      if (this.widget.cleanup || this.widget.controller) this.needsCleanup = true;
+      this.initialized = true;
+   }
+
+   public checkVisible(context: RenderingContext): boolean {
+      if (!this.initialized) this.init(context);
+
+      const wasVisible = this.visible;
+      this.rawData = this.dataSelector!(this.store);
+      this.visible = this.widget.checkVisible(context, this, this.rawData);
+      if (this.visible && !this.detached) this.parent!.instanceCache!.addChild(this);
+      this.explored = false;
+      this.prepared = false;
+
+      if (!this.visible && wasVisible) this.destroy();
+
+      return this.visible;
+   }
+
+   public scheduleExploreIfVisible(context: RenderingContext): boolean {
+      if (this.checkVisible(context)) {
+         context.exploreStack.push(this);
+
+         if (this.needsExploreCleanup) context.exploreStack.push(this);
+
+         return true;
+      }
+      return false;
+   }
+
+   public cache(key: string, value: any): boolean {
+      const oldValue = this.cached[key];
+      if (oldValue === value) return false;
+
+      if (!this.cacheList) this.cacheList = {};
+      this.cacheList[key] = value;
+      return true;
+   }
+
+   public markShouldUpdate(context: RenderingContext): void {
+      let ins: Instance | undefined = this;
+      let renderList = this.renderList;
+      renderList.markReverseIndex();
+
+      //notify all parents that child state changed to bust up caching
+      while (ins && !ins.shouldUpdate && ins.explored) {
+         if (ins.renderList !== renderList) {
+            renderList.reverse();
+            renderList = ins.renderList;
+            renderList.markReverseIndex();
+         }
+         ins.shouldUpdate = true;
+         renderList.data.push(ins);
+         ins = ins.widget.isContent
+            ? ins.contentPlaceholder
+            : ins.parent?.outerLayout === ins
+              ? ins.parent?.parent
+              : ins.parent;
+      }
+      renderList.reverse();
+   }
+
+   public explore(context: RenderingContext): void {
+      if (!this.visible) throw new Error("Explore invisible!");
+
+      if (this.explored) {
+         if (this.widget.prepareCleanup) context.prepareList.push(this);
+
+         if (this.widget.exploreCleanup) this.widget.exploreCleanup(context, this);
+
+         if (this.parent?.outerLayout === this) context.popNamedValue("content", "body");
+
+         if (this.widget.controller) context.pop("controller");
+
+         return;
+      }
+
+      this.explored = true;
+
+      if (this.needsPrepare) context.prepareList.push(this);
+      else this.prepared = true;
+
+      if (this.needsCleanup) context.cleanupList.push(this);
+
+      if (this.instanceCache) this.instanceCache.mark();
+
+      //controller may reconfigure the widget and need to go before shouldUpdate calculation
+      this.parentOptions = context.parentOptions;
+
+      if (!this.controller) {
+         if (context.controller) this.controller = context.controller;
+         else if (this.parent?.controller) this.controller = this.parent?.controller;
+      }
+
+      this.destroyTracked = false;
+
+      if (this.controller) {
+         if (this.widget.controller) {
+            if (!this.controller.initialized) {
+               this.controller.init(context);
+               this.controller.initialized = true;
+            }
+            context.push("controller", this.controller);
+            this.controller.explore(context);
+            if (this.controller.onDestroy && this.controller.widget == this.widget) this.trackDestroy();
+         }
+      }
+
+      if (this.widget.onDestroy || isNonEmptyArray(this.destroySubscriptions)) this.trackDestroy();
+
+      this.renderList = this.assignedRenderList || this.parent?.renderList || context.getRootRenderList();
+
+      let shouldUpdate =
+         this.rawData !== this.cached.rawData ||
+         this.state !== this.cached.state ||
+         this.widget.version !== this.cached.widgetVersion ||
+         this.cached.globalCacheIdentifier !== GlobalCacheIdentifier.get();
+
+      if (shouldUpdate) {
+         this.data = { ...this.rawData };
+         this.widget.prepareData(context, this);
+         debug(processDataFlag, this.widget);
+      }
+
+      //onExplore might set the outer layout
+      if (this.widget.onExplore) this.widget.onExplore(context, this);
+
+      if (this.parent?.outerLayout === this) {
+         this.renderList = this.renderList.insertRight();
+         context.pushNamedValue("content", "body", this.parent);
+      }
+
+      if (this.widget.outerLayout) {
+         this.outerLayout = this.getChild(context, this.widget.outerLayout, null, this.store);
+         this.outerLayout.scheduleExploreIfVisible(context);
+         this.renderList = this.renderList.insertLeft();
+      }
+
+      if (this.widget.isContent) {
+         this.contentPlaceholder = context.contentPlaceholder && context.contentPlaceholder[this.widget.putInto!];
+         if (this.contentPlaceholder) context.contentPlaceholder[this.widget.putInto!](this);
+         else {
+            this.renderList = this.renderList.insertLeft();
+            context.pushNamedValue("content", this.widget.putInto!, this);
+            if (!context.contentList) context.contentList = {};
+            let list = context.contentList[this.widget.putInto!];
+            if (!list) list = context.contentList[this.widget.putInto!] = [];
+            list.push(this);
+         }
+      }
+
+      this.shouldUpdate = false;
+      if (shouldUpdate || this.childStateDirty || !this.widget.memoize) this.markShouldUpdate(context);
+
+      context.exploreStack.hop();
+
+      if (this.widget.helpers) {
+         this.helpers = {};
+         for (let cmp in this.widget.helpers) {
+            let helper = this.widget.helpers[cmp];
+            if (helper) {
+               let ins = this.getChild(context, helper);
+               if (ins.scheduleExploreIfVisible(context)) this.helpers[cmp] = ins;
+            }
+         }
+      }
+
+      //TODO: check do we need to pass data here?
+      this.widget.explore(context, this, this.data);
+   }
+
+   public prepare(context: RenderingContext): void {
+      if (!this.visible) throw new Error("Prepare invisible!");
+
+      if (this.prepared) {
+         if (this.widget.prepareCleanup) this.widget.prepareCleanup(context, this);
+         return;
+      }
+
+      this.prepared = true;
+      if (this.widget.prepare) this.widget.prepare(context, this);
+
+      if (this.widget.controller && this.controller?.prepare) this.controller.prepare(context);
+   }
+
+   public render(context: RenderingContext): null | Record<string, React.ReactNode> | React.ReactNode[] {
+      if (!this.visible) throw new Error("Render invisible!");
+
+      if (this.shouldUpdate) {
+         debug(renderFlag, this.widget, this.key);
+         const vdom = renderResultFix(this.widget.render(context, this, this.key));
+         if (this.widget.isContent || this.outerLayout) this.contentVDOM = vdom;
+         else this.vdom = vdom;
+      }
+
+      if (this.cacheList) {
+         for (const key in this.cacheList) {
+            this.cached[key] = this.cacheList[key];
+         }
+      }
+
+      this.cacheList = null;
+
+      this.cached.rawData = this.rawData;
+      this.cached.data = this.data;
+      this.cached.state = this.state;
+      this.cached.widgetVersion = this.widget.version;
+      this.cached.globalCacheIdentifier = GlobalCacheIdentifier.get();
+      this.childStateDirty = false;
+
+      if (this.instanceCache) this.instanceCache.sweep();
+
+      if (this.parent?.outerLayout === this) {
+         //if outer layouts are chained we need to find the originating element (last element with OL set)
+         let parent = this.parent;
+         while (parent.parent?.outerLayout == parent) parent = parent.parent;
+         parent.vdom = this.vdom;
+      }
+
+      return this.vdom;
+   }
+
+   public cleanup(context: RenderingContext): void {
+      if (this.widget.controller && this.controller?.cleanup) this.controller.cleanup(context);
+
+      if (this.widget.cleanup) this.widget.cleanup(context, this);
+   }
+
+   private trackDestroy(): void {
+      if (!this.destroyTracked) {
+         this.destroyTracked = true;
+         if (this.parent && !this.detached) this.parent.trackDestroyableChild(this);
+      }
+   }
+
+   private trackDestroyableChild(child: Instance): void {
+      this.instanceCache!.trackDestroy(child);
+      this.trackDestroy();
+   }
+
+   public subscribeOnDestroy(callback: () => void): () => void {
+      if (!this.destroySubscriptions) this.destroySubscriptions = [];
+      this.destroySubscriptions.push(callback);
+      this.trackDestroy();
+      return () => {
+         if (this.destroySubscriptions) {
+            this.destroySubscriptions = this.destroySubscriptions.filter((cb) => cb !== callback);
+         }
+      };
+   }
+
+   public destroy(): void {
+      if (this.instanceCache) {
+         this.instanceCache.destroy();
+         this.instanceCache = null;
+      }
+
+      if (this.destroySubscriptions) {
+         this.destroySubscriptions.forEach((cb) => cb());
+         this.destroySubscriptions = null;
+      }
+
+      if (this.destroyTracked) {
+         debug(destroyFlag, this);
+
+         if (this.widget.onDestroy) this.widget.onDestroy(this);
+
+         if (
+            this.widget.controller &&
+            this.controller &&
+            this.controller.onDestroy &&
+            this.controller.widget == this.widget
+         )
+            this.controller.onDestroy();
+
+         this.destroyTracked = false;
+      }
+   }
+
+   public setState(state: Record<string, any>): void {
+      let skip = !!this.state;
+      if (this.state) {
+         for (const k in state) {
+            if (this.state[k] !== state[k]) {
+               skip = false;
+               break;
+            }
+         }
+      }
+
+      if (skip) return;
+
+      this.state = Object.assign({}, this.state, state);
+      let parent = this.parent;
+      //notify all parents that child state change to bust up caching
+      while (parent) {
+         parent.childStateDirty = true;
+         parent = parent.parent;
+      }
+      batchUpdates(() => {
+         this.store.notify();
+      });
+   }
+
+   public set(prop: string, value: any, options: { internal?: boolean; immediate?: boolean } = {}): boolean {
+      //skip re-rendering (used for reading state from uncontrolled components)
+      if (options.internal && this.rawData) {
+         this.rawData[prop] = value;
+         this.data[prop] = value;
+      }
+
+      const setter = this.setters && this.setters[prop];
+      if (setter) {
+         if (options.immediate && isFunction(setter.reset)) setter.reset(value);
+         else setter(value);
+         return true;
+      }
+
+      const p = (this.widget as any)[prop];
+      if (p && typeof p == "object") {
+         if (p.debounce) {
+            this.definePropertySetter(
+               prop,
+               validatedDebounce(
+                  (value: any) => this.doSet(prop, value),
+                  () => this.dataSelector!(this.store)[prop],
+                  p.debounce,
+               ),
+            );
+            this.set(prop, value, options);
+            return true;
+         }
+
+         if (p.throttle) {
+            this.definePropertySetter(
+               prop,
+               throttle((value: any) => this.doSet(prop, value), p.throttle),
+            );
+            this.set(prop, value, options);
+            return true;
+         }
+      }
+
+      return this.doSet(prop, value);
+   }
+
+   public definePropertySetter(prop: string, setter: any): void {
+      if (!this.setters) this.setters = {};
+      this.setters[prop] = setter;
+   }
+
+   protected doSet(prop: string, value: any): boolean {
+      let changed = false;
+      batchUpdates(() => {
+         const p = (this.widget as any)[prop];
+         if (isObject(p)) {
+            const pObj = p as any;
+            if (pObj.set) {
+               if (isFunction(pObj.set)) {
+                  pObj.set(value, this);
+                  changed = true;
+               } else if (isString(pObj.set)) {
+                  (this.controller as any)?.[pObj.set](value, this);
+                  changed = true;
+               }
+            } else if (pObj.action) {
+               const action = pObj.action(value, this);
+               this.store.dispatch(action);
+               changed = true;
+            } else if (isString(pObj.bind) || isAccessorChain(pObj.bind)) {
+               changed = this.store.set(pObj.bind, value);
+            }
+         } else if (isAccessorChain(p)) {
+            changed = this.store.set(p.toString(), value);
+         }
+      });
+      return changed;
+   }
+
+   public nestedDataSet(key: string, value: any, dataConfig: Record<string, any>, useParentStore?: boolean): boolean {
+      let config = dataConfig[key];
+      if (!config)
+         throw new Error(`Unknown nested data key ${key}. Known keys are ${Object.keys(dataConfig).join(", ")}.`);
+
+      if (isAccessorChain(config)) config = { bind: config.toString() };
+
+      if (config.bind) {
+         let store = this.store;
+         //in case of Rescope or DataProxy, bindings point to the data in the parent store
+         if (useParentStore && store.store) store = store.store;
+         return isUndefined(value) ? store.deleteItem(config.bind) : store.setItem(config.bind, value);
+      }
+
+      if (!config.set)
+         throw new Error(
+            `Cannot change nested data value for ${key} as it's read-only. Either define it as a binding or define a set function.`,
+         );
+      if (isString(config.set)) this.getControllerMethod(config.set)(value, this);
+      else if (isFunction(config.set)) config.set(value, this);
+      else
+         throw new Error(
+            `Cannot change nested data value for ${key} the defined setter is neither a function nor a controller method.`,
+         );
+
+      return true;
+   }
+
+   public replaceState(state: Record<string, any>): void {
+      this.cached.state = this.state;
+      this.state = state;
+      this.store.notify();
+   }
+
+   public getInstanceCache(): InstanceCache {
+      if (!this.instanceCache)
+         this.instanceCache = new InstanceCache(this, this.widget.isPureContainer ? this.key : null);
+      return this.instanceCache;
+   }
+
+   public clearChildrenCache(): void {
+      if (this.instanceCache) this.instanceCache.destroy();
+   }
+
+   public getChild(
+      context: RenderingContext | null,
+      widget: Widget,
+      key?: string | number | null,
+      store?: any,
+   ): Instance {
+      return this.getInstanceCache().getChild(widget, store ?? this.store, key);
+   }
+
+   public getDetachedChild(widget: Widget, key: string, store?: any): Instance {
+      const child = new Instance(widget, key, this, store ?? this.store);
+      child.detached = true;
+      return child;
+   }
+
+   public prepareRenderCleanupChild(widget: any, store?: any, keyPrefix?: string, options?: any): any {
+      return widget.prepareRenderCleanup(store ?? this.store, options, keyPrefix, this);
+   }
+
+   public getJsxEventProps(): Record<string, any> | null {
+      const { widget } = this;
+
+      if (!isArray(widget.jsxAttributes)) return null;
+
+      const props: Record<string, any> = {};
+      widget.jsxAttributes.forEach((attr) => {
+         if (attr.indexOf("on") == 0 && attr.length > 2) {
+            props[attr] = (e: any) => this.invoke(attr, e, this);
+         }
+      });
+      return props;
+   }
+
+   public getCallback(methodName: string): (...args: any[]) => any {
+      const scope = this.widget as any;
+      const callback = scope[methodName];
+
+      if (typeof callback === "string") return this.getControllerMethod(callback);
+
+      if (typeof callback !== "function")
+         throw new Error(`Cannot invoke callback method ${methodName} as assigned value is not a function.`);
+
+      return callback.bind(scope);
+   }
+
+   /**
+    * Finds the first controller in the instance tree matching the predicate
+    * @param predicate Function to test each controller
+    * @returns The matching controller or undefined
+    */
+   public findController(predicate: (controller: Controller) => boolean): Controller | undefined {
+      let at: Instance | undefined = this;
+      while (at?.controller != null) {
+         if (predicate(at.controller)) {
+            return at.controller;
+         }
+         at = at.parent;
+      }
+      return undefined;
+   }
+
+   /**
+    * Finds a controller of the specified type in the instance tree
+    * @param type Controller class/constructor to find
+    * @returns The matching controller cast to the specified type, or undefined
+    */
+   public findControllerByType<T extends Controller>(type: new (...args: any[]) => T): T | undefined {
+      return this.findController((c) => c instanceof type) as T | undefined;
+   }
+
+   /**
+    * Gets the first controller in the instance tree matching the predicate
+    * @param predicate Function to test each controller
+    * @returns The matching controller
+    * @throws Error if no matching controller is found
+    */
+   public getController(predicate: (controller: Controller) => boolean): Controller {
+      const controller = this.findController(predicate);
+      if (!controller) throw new Error("Cannot find a controller matching the given predicate in the instance tree.");
+      return controller;
+   }
+
+   /**
+    * Gets a controller of the specified type in the instance tree
+    * @param type Controller class/constructor to find
+    * @returns The matching controller cast to the specified type
+    * @throws Error if no controller of the specified type is found
+    */
+   public getControllerByType<T extends Controller>(type: new (...args: any[]) => T): T {
+      const controller = this.findControllerByType(type);
+      if (!controller) throw new Error(`Cannot find a controller of type "${type.name}" in the instance tree.`);
+      return controller;
+   }
+
+   public getControllerMethod(methodName: string): (...args: any[]) => any {
+      if (!this.controller)
+         throw new Error(
+            `Cannot invoke controller method "${methodName}" as controller is not assigned to the widget.`,
+         );
+
+      const controller = this.findController((c) => !!(c as any)[methodName]);
+
+      if (!controller)
+         throw new Error(
+            `Cannot invoke controller method "${methodName}". The method cannot be found in any of the assigned controllers.`,
+         );
+
+      return (controller as any)[methodName].bind(controller);
+   }
+
+   public invoke(methodName: string, ...args: any[]): any {
+      return this.getCallback(methodName).apply(null, args);
+   }
+
+   public invokeControllerMethod(methodName: string, ...args: any[]): any {
+      return this.getControllerMethod(methodName).apply(null, args);
+   }
+}
+
+function renderResultFix(res: any): any {
+   return res != null && isDefined(res.content) ? res : { content: res };
+}
+
+export class InstanceCache {
+   declare public children: Record<string, Instance>;
+   declare public parent: Instance;
+   declare public marked: Record<string, Instance>;
+   declare public monitored: Record<string, Instance> | null;
+   declare public keyPrefix: string;
+
+   constructor(parent: Instance, keyPrefix?: string | number | null) {
+      this.children = {};
+      this.parent = parent;
+      this.marked = {};
+      this.monitored = null;
+      this.keyPrefix = keyPrefix != null ? keyPrefix + "-" : "";
+   }
+
+   public getChild(widget: Widget, parentStore: any, key?: string | number | null): Instance {
+      const k = this.keyPrefix + (key != null ? key : widget.vdomKey || widget.widgetId);
+      let instance = this.children[k];
+
+      if (
+         !instance ||
+         instance.widget !== widget ||
+         (!instance.visible && (instance.widget.controller || instance.widget.onInit))
+      ) {
+         instance = new Instance(widget, k, this.parent, parentStore);
+         this.children[k] = instance;
+      } else if (instance.parentStore !== parentStore) {
+         instance.setParentStore(parentStore);
+      }
+
+      return instance;
+   }
+
+   public addChild(instance: Instance): void {
+      this.marked[instance.key] = instance;
+   }
+
+   public mark(): void {
+      this.marked = {};
+   }
+
+   public trackDestroy(instance: Instance): void {
+      if (!this.monitored) this.monitored = {};
+      this.monitored[instance.key as string] = instance;
+   }
+
+   public destroy(): void {
+      this.children = {};
+      this.marked = {};
+
+      if (!this.monitored) return;
+
+      for (const key in this.monitored) {
+         this.monitored[key].destroy();
+      }
+
+      this.monitored = null;
+   }
+
+   public sweep(): void {
+      this.children = this.marked;
+      if (!this.monitored) return;
+      let activeCount = 0;
+      for (const key in this.monitored) {
+         const monitoredChild = this.monitored[key];
+         const child = this.children[key];
+         if (child !== monitoredChild || !monitoredChild.visible) {
+            monitoredChild.destroy();
+            delete this.monitored[key];
+            if (child === monitoredChild) delete this.children[key];
+         } else activeCount++;
+      }
+      if (activeCount === 0) this.monitored = null;
+   }
+}
diff --git a/packages/cx/src/ui/IsolatedScope.d.ts b/packages/cx/src/ui/IsolatedScope.d.ts
deleted file mode 100644
index bf6d6ed61..000000000
--- a/packages/cx/src/ui/IsolatedScope.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as Cx from '../core';
-
-interface IsolatedScopeProps extends Cx.PureContainerProps {
-   /**
-    * A single binding path or a list of paths to be monitored for changes.
-    * Use `bind` as a shorthand for defining the `data` object.
-    */
-   bind?: string | string[],
-
-
-   /** Data object selector. The children will update only if `data` change. */
-   data?: Cx.StructuredProp
-}
-
-export class IsolatedScope extends Cx.Widget<IsolatedScopeProps> {
-}
diff --git a/packages/cx/src/ui/IsolatedScope.js b/packages/cx/src/ui/IsolatedScope.js
deleted file mode 100644
index 420e38949..000000000
--- a/packages/cx/src/ui/IsolatedScope.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { PureContainer } from "./PureContainer";
-import { isArray } from "../util/isArray";
-
-export class IsolatedScope extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         data: { structured: true },
-      });
-   }
-
-   init() {
-      if (typeof this.bind === "string") this.data = { bind: this.bind };
-      else if (isArray(this.bind)) {
-         this.data = {};
-         this.bind.forEach((x, i) => {
-            this.data[String(i)] = { bind: x };
-         });
-      }
-      super.init();
-   }
-
-   explore(context, instance) {
-      if (instance.shouldUpdate) {
-         super.explore(context, instance);
-      } else if (instance.children) {
-         // mark children to prevent sweeping them away
-         for (let i = 0; i < instance.children.length; i++) instance.instanceCache.addChild(instance.children[i]);
-      }
-   }
-}
diff --git a/packages/cx/src/ui/IsolatedScope.spec.js b/packages/cx/src/ui/IsolatedScope.spec.js
deleted file mode 100644
index 341384a07..000000000
--- a/packages/cx/src/ui/IsolatedScope.spec.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Cx } from "./Cx";
-import { Store } from "../data/Store";
-import { VDOM } from "./VDOM";
-import renderer from "react-test-renderer";
-import assert from "assert";
-import { Controller } from "./Controller";
-import { IsolatedScope } from "./IsolatedScope";
-import { computable } from "../data/computable";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { useState } from "../hooks";
-import { createFunctionalComponent } from "./createFunctionalComponent";
-import { Widget } from "./Widget";
-
-describe("IsolatedScope", () => {
-   it("prevents multiple re-renders", () => {
-      let list = [];
-      let widget = (
-         <cx>
-            <IsolatedScope
-               data={{
-                  value: { bind: 'value' }
-               }}
-            >
-               <span text-bind="value" onExplore={(context, { store }) => {
-                  list.push(store.get("value"));
-               }} />
-            </IsolatedScope>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            value: "bad",
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(list, ["bad"]);
-      assert.deepEqual(tree, {
-         type: "span",
-         props: {},
-         children: ["bad"],
-      });
-
-      //component should not re-render if unrelated data changes
-      store.set("dummy", "dummy");
-      tree = component.toJSON();
-      assert.deepEqual(list, ["bad"]);
-
-      //component should not re-render if unrelated data changes
-      store.set("value", "good");
-      tree = component.toJSON();
-      assert.deepEqual(list, ["bad", "good"]);
-      assert.deepEqual(tree, {
-         type: "span",
-         props: {},
-         children: ["good"],
-      });
-   });
-});
diff --git a/packages/cx/src/ui/IsolatedScope.spec.tsx b/packages/cx/src/ui/IsolatedScope.spec.tsx
new file mode 100644
index 000000000..3a7b4ba90
--- /dev/null
+++ b/packages/cx/src/ui/IsolatedScope.spec.tsx
@@ -0,0 +1,62 @@
+import { Store } from "../data/Store";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { IsolatedScope } from "./IsolatedScope";
+import { bind } from "./bind";
+
+describe("IsolatedScope", () => {
+   it("prevents multiple re-renders", async () => {
+      let list: any[] = [];
+      let widget = (
+         <cx>
+            <IsolatedScope
+               data={{
+                  value: { bind: "value" },
+               }}
+            >
+               <span
+                  text={bind("value")}
+                  onExplore={(context, { store }) => {
+                     list.push(store.get("value"));
+                  }}
+               />
+            </IsolatedScope>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "bad",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(list, ["bad"]);
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["bad"],
+      });
+
+      //component should not re-render if unrelated data changes
+      await act(async () => {
+         store.set("dummy", "dummy");
+      });
+      tree = component.toJSON();
+      assert.deepEqual(list, ["bad"]);
+
+      //component should not re-render if unrelated data changes
+      await act(async () => {
+         store.set("value", "good");
+      });
+      tree = component.toJSON();
+      assert.deepEqual(list, ["bad", "good"]);
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["good"],
+      });
+   });
+});
diff --git a/packages/cx/src/ui/IsolatedScope.ts b/packages/cx/src/ui/IsolatedScope.ts
new file mode 100644
index 000000000..1a161ad47
--- /dev/null
+++ b/packages/cx/src/ui/IsolatedScope.ts
@@ -0,0 +1,50 @@
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { isArray } from "../util/isArray";
+import { Instance } from "./Instance";
+import { StructuredProp } from "./Prop";
+
+export interface IsolatedScopeConfig extends PureContainerConfig {
+   /**
+    * A single binding path or a list of paths to be monitored for changes.
+    * Use `bind` as a shorthand for defining the `data` object.
+    */
+   bind?: string | string[];
+
+   /** Data object selector. The children will update only if `data` change. */
+   data?: StructuredProp;
+}
+
+export class IsolatedScope<
+   Config extends IsolatedScopeConfig = IsolatedScopeConfig,
+   InstanceType extends Instance = Instance,
+> extends PureContainerBase<Config, InstanceType> {
+   declare bind?: string | string[];
+   declare data?: StructuredProp;
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         data: { structured: true },
+      });
+   }
+
+   init() {
+      if (typeof this.bind === "string") this.data = { bind: this.bind };
+      else if (isArray(this.bind)) {
+         let data: Record<string, any> = {};
+         this.bind.forEach((x, i) => {
+            data[String(i)] = { bind: x };
+         });
+         this.data = data;
+      }
+      super.init();
+   }
+
+   explore(context: any, instance: any) {
+      if (instance.shouldUpdate) {
+         super.explore(context, instance);
+      } else if (instance.children) {
+         // mark children to prevent sweeping them away
+         for (let i = 0; i < instance.children.length; i++) instance.instanceCache.addChild(instance.children[i]);
+      }
+   }
+}
diff --git a/packages/cx/src/ui/Localization.d.ts b/packages/cx/src/ui/Localization.d.ts
deleted file mode 100644
index bcb9b43fe..000000000
--- a/packages/cx/src/ui/Localization.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as Cx from '../core';
-
-export class Localization {
-    static register(key: string): (any) => any;
-
-    static registerPrototype(key: string, type: any): void;
-
-    static override(key: string, values: Cx.Record): void;
-
-    static localize(culture: string, key: string, values: Cx.Record): void;
-
-    static setCulture(culture: string): void;
-
-    static trackDefaults();
-
-    static restoreDefaults();
-}
diff --git a/packages/cx/src/ui/Localization.js b/packages/cx/src/ui/Localization.js
deleted file mode 100644
index 53c6ccb8a..000000000
--- a/packages/cx/src/ui/Localization.js
+++ /dev/null
@@ -1,70 +0,0 @@
-let contents = {};
-let localizations = {};
-let overrides = {};
-let defaults = {};
-let trackDefaults = false;
-
-export class Localization {
-   static register(key) {
-      return type => {
-         this.registerPrototype(key, type);
-         return type;
-      }
-   }
-
-   static registerPrototype(key, type) {
-      contents[key] = type.prototype;
-      if (overrides[key])
-         this.override(key, overrides[key]);
-   }
-
-   static trackDefaults() {
-      trackDefaults = true;
-   }
-
-   static restoreDefaults() {
-      for (let type in defaults) {
-         let proto = contents[type];
-         if (!proto)
-            continue;
-         let d = defaults[type];
-         for (let key in d)
-            proto[key] = d[key];
-      }
-      defaults = {};
-   }
-
-   static override(key, values) {
-      overrides[key] = values;
-      let p = contents[key];
-      if (p) {
-         if (trackDefaults && !defaults[key]) {
-            let d = defaults[key] = {};
-            for (let key in values)
-               d[key] = p[key];
-         }
-         Object.assign(p, values);
-      }
-   }
-
-   static localize(culture, key, values) {
-      let l = localizations[culture];
-      if (!l)
-         l = localizations[culture] = {};
-      l[key] = {
-         ...l[key],
-         ...values
-      };
-   }
-
-   static setCulture(culture) {
-      var l = localizations[culture];
-      if (l) {
-         for (var key in l) {
-            var content = contents[key];
-            if (content)
-               Object.assign(content, l[key]);
-         }
-      }
-   }
-}
diff --git a/packages/cx/src/ui/Localization.ts b/packages/cx/src/ui/Localization.ts
new file mode 100644
index 000000000..54f760559
--- /dev/null
+++ b/packages/cx/src/ui/Localization.ts
@@ -0,0 +1,70 @@
+let contents: any = {};
+let localizations: any = {};
+let overrides: any = {};
+let defaults: any = {};
+let trackDefaults = false;
+
+export class Localization {
+   static register(key: string) {
+      return (type: any) => {
+         this.registerPrototype(key, type);
+         return type;
+      }
+   }
+
+   static registerPrototype(key: string, type: any) {
+      contents[key] = type.prototype;
+      if (overrides[key])
+         this.override(key, overrides[key]);
+   }
+
+   static trackDefaults() {
+      trackDefaults = true;
+   }
+
+   static restoreDefaults() {
+      for (let type in defaults) {
+         let proto = contents[type];
+         if (!proto)
+            continue;
+         let d = defaults[type];
+         for (let key in d)
+            proto[key] = d[key];
+      }
+      defaults = {};
+   }
+
+   static override(key: string, values: any) {
+      overrides[key] = values;
+      let p = contents[key];
+      if (p) {
+         if (trackDefaults && !defaults[key]) {
+            let d: any = defaults[key] = {};
+            for (let key in values)
+               d[key] = p[key];
+         }
+         Object.assign(p, values);
+      }
+   }
+
+   static localize(culture: string, key: string, values: any) {
+      let l = localizations[culture];
+      if (!l)
+         l = localizations[culture] = {};
+      l[key] = {
+         ...l[key],
+         ...values
+      };
+   }
+
+   static setCulture(culture: string) {
+      var l = localizations[culture];
+      if (l) {
+         for (var key in l) {
+            var content = contents[key];
+            if (content)
+               Object.assign(content, l[key]);
+         }
+      }
+   }
+}
diff --git a/packages/cx/src/ui/Prop.ts b/packages/cx/src/ui/Prop.ts
new file mode 100644
index 000000000..9e7b32e1a
--- /dev/null
+++ b/packages/cx/src/ui/Prop.ts
@@ -0,0 +1,140 @@
+import { Selector } from "../data/Selector";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+
+export type Bind = {
+   bind: string;
+   defaultValue?: any;
+   throttle?: number;
+   debounce?: number;
+};
+
+export type Tpl = {
+   tpl: string;
+};
+
+export type Expr = {
+   expr: string;
+   set?: (value: any, instance?: any) => boolean;
+   throttle?: number;
+   debounce?: number;
+};
+
+export type Binding = Bind | Tpl | Expr;
+
+export type GetSet<T> = {
+   get: Selector<T>;
+   set?: (value: T, instance?: any) => boolean;
+   throttle?: number;
+   debounce?: number;
+};
+
+export interface StructuredSelector {
+   [prop: string]: Selector<any>;
+}
+
+export type Prop<T> = T | Binding | Selector<T> | AccessorChain<T> | GetSet<T>;
+
+export type WritableProp<T> = Bind | AccessorChain<T>;
+
+export interface DataRecord {
+   [prop: string]: any;
+}
+
+export interface Config {
+   [prop: string]: any;
+}
+
+export interface StructuredProp {
+   [prop: string]: Prop<any>;
+}
+
+/**
+ * Utility type that extracts the resolved value type from a Prop<T>.
+ * Used to derive the runtime type of structured props.
+ */
+export type ResolveProp<P> =
+   P extends Selector<infer T>
+      ? T
+      : P extends AccessorChain<infer T>
+        ? T
+        : P extends GetSet<infer T>
+          ? T
+          : P extends Bind
+            ? any
+            : P extends Tpl
+              ? string
+              : P extends Expr
+                ? any
+                : P;
+
+/**
+ * Utility type that resolves a structured prop object to its runtime value types.
+ * Transforms { name: StringProp, count: NumberProp } to { name: string, count: number }
+ */
+export type ResolveStructuredPropType<S> = {
+   [K in keyof S]: ResolveProp<S[K]>;
+};
+
+/**
+ * Resolves the runtime value type from either a Prop<T> or a StructuredProp.
+ * Use this for generic widgets like ContentResolver and Validator where the
+ * input can be either a single prop or a structured object.
+ *
+ * - For Prop<T> (Selector, AccessorChain, GetSet), resolves to T
+ * - For bindings (Bind, Tpl, Expr), resolves to any/string/any
+ * - For structured objects, recursively resolves each property via ResolveStructuredProp
+ * - For literal values, returns them as-is
+ */
+export type ResolvePropType<P> =
+   P extends Selector<infer T>
+      ? T
+      : P extends AccessorChain<infer T>
+        ? T
+        : P extends GetSet<infer T>
+          ? T
+          : P extends Bind
+            ? any
+            : P extends Tpl
+              ? string
+              : P extends Expr
+                ? any
+                : P extends object
+                  ? ResolveStructuredPropType<P>
+                  : P;
+
+/**
+ * Generic structured prop type that provides type safety for params and their resolved values.
+ * Use with ContentResolver and similar widgets to type the onResolve callback params.
+ */
+export type TypedStructuredProp<T extends Record<string, any>> = {
+   [K in keyof T]: Prop<T[K]>;
+};
+
+export type StringProp = Prop<string>;
+export type StyleProp = Prop<string | React.CSSProperties> | StructuredProp;
+export type NumberProp = Prop<number>;
+export type BooleanProp = Prop<boolean>;
+export type ClassProp = Prop<string> | StructuredProp;
+export type RecordsProp = Prop<DataRecord[]>;
+export type SortersProp = Prop<Sorter[]>;
+export type UnknownProp = Prop<unknown>;
+export type ModProp = StringProp | StructuredProp;
+
+export type RecordAlias = string | { toString(): string };
+
+export type SortDirection = "ASC" | "DESC";
+
+export interface Sorter {
+   field?: string;
+   value?: (record: DataRecord) => any;
+   direction: SortDirection;
+}
+
+export interface CollatorOptions {
+   localeMatcher?: "lookup" | "best fit";
+   usage?: "sort" | "search";
+   sensitivity?: "base" | "accent" | "case" | "variant";
+   ignorePunctuation?: boolean;
+   numeric?: boolean;
+   caseFirst?: "upper" | "lower" | "false";
+}
diff --git a/packages/cx/src/ui/PureContainer.d.ts b/packages/cx/src/ui/PureContainer.d.ts
deleted file mode 100644
index 545f593ab..000000000
--- a/packages/cx/src/ui/PureContainer.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as Cx from '../core';
-import {Filter} from './Container';
-
-export class PureContainer extends Cx.Widget<Cx.PureContainerProps> {
-
-   add(...args: Array<any>);
-   
-   clear();
-
-   addText(text: string);
-
-   find(filter: Filter, options?: Cx.Config) : any[];
-
-   findFirst(filter: Filter, options?: Cx.Config) : any;
-
-}
diff --git a/packages/cx/src/ui/PureContainer.js b/packages/cx/src/ui/PureContainer.js
deleted file mode 100644
index 9d7bb7faa..000000000
--- a/packages/cx/src/ui/PureContainer.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import {Container} from './Container';
-
-export class PureContainer extends Container {}
-
-PureContainer.prototype.isPureContainer = true;
-
-PureContainer.alias('pure-container', PureContainer);
diff --git a/packages/cx/src/ui/PureContainer.spec.tsx b/packages/cx/src/ui/PureContainer.spec.tsx
new file mode 100644
index 000000000..a5975aabf
--- /dev/null
+++ b/packages/cx/src/ui/PureContainer.spec.tsx
@@ -0,0 +1,232 @@
+import { Store } from "../data/Store";
+import assert from "assert";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import { bind } from "./bind";
+import { PureContainer } from "./PureContainer";
+
+describe("PureContainer", () => {
+   it("renders static text children", async () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div>Test</div>
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store();
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Test"],
+      });
+   });
+
+   it("renders multiple children", async () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div>First</div>
+               <div>Second</div>
+               <div>Third</div>
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store();
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(Array.isArray(tree), "Expected array of elements");
+      assert.equal(tree.length, 3);
+      assert.deepEqual(tree, [
+         {
+            type: "div",
+            props: {},
+            children: ["First"],
+         },
+         {
+            type: "div",
+            props: {},
+            children: ["Second"],
+         },
+         {
+            type: "div",
+            props: {},
+            children: ["Third"],
+         },
+      ]);
+   });
+
+   it("renders children with data bindings", async () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div text={bind("message")} />
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            message: "Hello World",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Hello World"],
+      });
+   });
+
+   it("renders nested containers", async () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div>
+                  <PureContainer>
+                     <span>Nested</span>
+                  </PureContainer>
+               </div>
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store();
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Nested"],
+            },
+         ],
+      });
+   });
+
+   it("conditionally renders children based on visible binding", async () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div visible={bind("show")} text="Visible" />
+               <div visible={false} text="Hidden" />
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            show: true,
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Visible"],
+      });
+   });
+
+   it("handles empty children", async () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div />
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store();
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: null,
+      });
+   });
+
+   it("renders children from items property", async () => {
+      let widget = (
+         <cx>
+            <PureContainer items={[<div key="1">Item 1</div>, <div key="2">Item 2</div>]} />
+         </cx>
+      );
+
+      let store = new Store();
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(Array.isArray(tree), "Expected array of elements");
+      assert.equal(tree.length, 2);
+      assert.deepEqual(tree[0], {
+         type: "div",
+         props: {},
+         children: ["Item 1"],
+      });
+      assert.deepEqual(tree[1], {
+         type: "div",
+         props: {},
+         children: ["Item 2"],
+      });
+   });
+
+   it("updates children when store data changes", async () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div text={bind("count")} />
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            count: 0,
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["0"],
+      });
+
+      // Update the store
+      await act(async () => {
+         store.set("count", 5);
+      });
+
+      // Re-render
+      tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["5"],
+      });
+   });
+});
diff --git a/packages/cx/src/ui/PureContainer.tsx b/packages/cx/src/ui/PureContainer.tsx
new file mode 100644
index 000000000..224d289bb
--- /dev/null
+++ b/packages/cx/src/ui/PureContainer.tsx
@@ -0,0 +1,19 @@
+import { ContainerBase, ContainerConfig } from "./Container";
+import { Instance } from "./Instance";
+
+export interface PureContainerConfig extends ContainerConfig {}
+
+// Base class for extending with custom Config types
+export class PureContainerBase<
+   Config extends PureContainerConfig = PureContainerConfig,
+   InstanceType extends Instance = Instance,
+> extends ContainerBase<Config, InstanceType> {
+   declare public isPureContainer: boolean;
+}
+
+PureContainerBase.prototype.isPureContainer = true;
+
+// Closed type for direct usage - preserves ControllerProp ThisType
+export class PureContainer extends PureContainerBase<PureContainerConfig, Instance> {}
+
+PureContainer.alias("pure-container", PureContainer);
diff --git a/packages/cx/src/ui/RenderingContext.d.ts b/packages/cx/src/ui/RenderingContext.d.ts
deleted file mode 100644
index 0a836233e..000000000
--- a/packages/cx/src/ui/RenderingContext.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as Cx from '../core';
-
-export class RenderingContext {
-
-   constructor(options?: any);
-
-   options: any;
-
-}
diff --git a/packages/cx/src/ui/RenderingContext.js b/packages/cx/src/ui/RenderingContext.js
deleted file mode 100644
index 58df8fd0c..000000000
--- a/packages/cx/src/ui/RenderingContext.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import {TraversalStack} from "../util/TraversalStack";
-import {reverseSlice} from "../util/reverseSlice";
-
-export class RenderingContext {
-   constructor(options) {
-      this.options = options || {};
-      this.exploreStack = new TraversalStack();
-      this.prepareList = [];
-      this.cleanupList = [];
-      this.stacks = {};
-      this.renderList = new LinkedListsNode();
-   }
-
-   getStack(key) {
-      let stack = this.stacks[key];
-      if (!stack)
-         stack = this.stacks[key] = [];
-      return stack;
-   }
-
-
-   push(key, value) {
-      let stack = this.getStack(key);
-      stack.push(this[key]);
-      return this[key] = value;
-   }
-
-   pop(key) {
-      let stack = this.getStack(key);
-      return this[key] = stack.pop();
-   }
-
-   pushNamedValue(key, name, value) {
-      let stack = this.getStack(`${key}:${name}`);
-      if (!this[key])
-         this[key] = {};
-      stack.push(this[key][name]);
-      return this[key][name] = value;
-   }
-
-   popNamedValue(key, name) {
-      let stack = this.getStack(`${key}:${name}`);
-      return this[key][name] = stack.pop();
-   }
-
-   get(key) {
-      return this[key];
-   }
-
-   getRootRenderList() {
-      let rl = this.renderList;
-      while (rl.left)
-         rl = rl.left;
-      return rl;
-   }
-}
-
-class LinkedListsNode {
-   constructor(left, right) {
-      this.left = left;
-      this.right = right;
-      this.data = [];
-   }
-
-   insertLeft() {
-      let node = new LinkedListsNode(this.left, this);
-      if (this.left)
-         this.left.right = node;
-      this.left = node;
-      return node;
-   }
-
-   insertRight() {
-      let node = new LinkedListsNode(this, this.right);
-      if (this.right)
-         this.right.left = node;
-      this.right = node;
-      return node;
-   }
-
-   markReverseIndex() {
-      this.reverseIndex = this.data.length;
-   }
-
-   reverse() {
-      reverseSlice(this.data, this.reverseIndex);
-   }
-}
diff --git a/packages/cx/src/ui/RenderingContext.ts b/packages/cx/src/ui/RenderingContext.ts
new file mode 100644
index 000000000..0ceb3c629
--- /dev/null
+++ b/packages/cx/src/ui/RenderingContext.ts
@@ -0,0 +1,99 @@
+import { TraversalStack } from "../util/TraversalStack";
+import { reverseSlice } from "../util/reverseSlice";
+import { Widget } from "./Widget";
+
+export type CxChild = Record<string, any> | React.ReactElement | Widget | CxChild[] | null | undefined;
+
+export class RenderingContext {
+   options: any;
+   exploreStack: any;
+   prepareList: any[];
+   cleanupList: any[];
+   stacks: any;
+   renderList: any;
+
+   [key: string]: any;
+
+   constructor(options?: any) {
+      this.options = options || {};
+      this.exploreStack = new TraversalStack();
+      this.prepareList = [];
+      this.cleanupList = [];
+      this.stacks = {};
+      this.renderList = new LinkedListsNode();
+   }
+
+   getStack(key: string) {
+      let stack = this.stacks[key];
+      if (!stack) stack = this.stacks[key] = [];
+      return stack;
+   }
+
+   push(key: string, value: any) {
+      let stack = this.getStack(key);
+      stack.push(this[key]);
+      return (this[key] = value);
+   }
+
+   pop(key: string) {
+      let stack = this.getStack(key);
+      return (this[key] = stack.pop());
+   }
+
+   pushNamedValue(key: string, name: string, value: any) {
+      let stack = this.getStack(`${key}:${name}`);
+      if (!this[key]) this[key] = {};
+      stack.push(this[key][name]);
+      return (this[key][name] = value);
+   }
+
+   popNamedValue(key: string, name: string) {
+      let stack = this.getStack(`${key}:${name}`);
+      return (this[key][name] = stack.pop());
+   }
+
+   get(key: string) {
+      return this[key];
+   }
+
+   getRootRenderList() {
+      let rl = this.renderList;
+      while (rl.left) rl = rl.left;
+      return rl;
+   }
+}
+
+class LinkedListsNode {
+   left?: LinkedListsNode;
+   right?: LinkedListsNode;
+   data: any[];
+   reverseIndex?: number;
+
+   constructor(left?: LinkedListsNode, right?: LinkedListsNode) {
+      this.left = left;
+      this.right = right;
+      this.data = [];
+   }
+
+   insertLeft() {
+      let node = new LinkedListsNode(this.left, this);
+      if (this.left) this.left.right = node;
+      this.left = node;
+      return node;
+   }
+
+   insertRight() {
+      let node = new LinkedListsNode(this, this.right);
+      if (this.right) this.right.left = node;
+      this.right = node;
+      return node;
+   }
+
+   markReverseIndex() {
+      this.reverseIndex = this.data.length;
+   }
+
+   reverse() {
+      reverseSlice(this.data, this.reverseIndex!);
+   }
+}
diff --git a/packages/cx/src/ui/Repeater.d.ts b/packages/cx/src/ui/Repeater.d.ts
deleted file mode 100644
index d9d6ff791..000000000
--- a/packages/cx/src/ui/Repeater.d.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
-   RecordsProp,
-   RecordAlias,
-   StringProp,
-   SortersProp,
-   StructuredProp,
-   CollatorOptions,
-   Widget,
-   PureContainerProps,
-   Prop,
-   SortDirection,
-} from "../core";
-import { DataAdapterRecord } from "./adapter";
-import { Instance } from "./Instance";
-
-interface RepeaterProps<T = unknown> extends PureContainerProps {
-   records: Prop<T[]>;
-   recordName?: RecordAlias;
-   recordAlias?: RecordAlias;
-   indexName?: RecordAlias;
-   indexAlias?: RecordAlias;
-   cached?: boolean;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that record stores should not be mutated. */
-   sealed?: boolean;
-
-   sorters?: SortersProp;
-
-   /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
-   sortField?: StringProp;
-
-   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
-   sortDirection?: Prop<SortDirection>;
-
-   /** Parameters that affect filtering */
-   filterParams?: StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance: Instance) => (record: T) => boolean;
-
-   /**
-    * Callback function to track and retrieve displayed records.
-    * Accepts new records as a first argument.
-    * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
-    */
-   onTrackMappedRecords?: string | ((records: DataAdapterRecord<T>[], instance: Instance) => void);
-
-   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
-   sortOptions?: CollatorOptions;
-
-   /** A field used to get the unique identifier of the record. Setting keyField improves performance on sort operations as the widget is able to movement of records inside the collection.  */
-   keyField?: StringProp;
-
-   /** Data adapter used to convert data in the list of records. Used for manipulation of records, e.g flattening the tree records. */
-   dataAdapter?: any;
-}
-
-export class Repeater<T = unknown> extends Widget<RepeaterProps<T>> {}
diff --git a/packages/cx/src/ui/Repeater.js b/packages/cx/src/ui/Repeater.js
deleted file mode 100644
index c8bd0dee8..000000000
--- a/packages/cx/src/ui/Repeater.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Widget } from "./Widget";
-import { PureContainer } from "./PureContainer";
-import { Container } from "./Container";
-import { ArrayAdapter } from "./adapter/ArrayAdapter";
-import { UseParentLayout } from "./layout/UseParentLayout";
-import { getAccessor } from "../data/getAccessor";
-
-export class Repeater extends Container {
-   declareData() {
-      super.declareData(
-         {
-            records: undefined,
-            sorters: undefined,
-            sortField: undefined,
-            sortDirection: undefined,
-            filterParams: {
-               structured: true,
-            },
-         },
-         ...arguments,
-      );
-   }
-
-   init() {
-      this.recordsAccessor = getAccessor(this.records);
-
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.indexAlias) this.indexName = this.indexAlias;
-
-      this.dataAdapter = ArrayAdapter.create({
-         ...this.dataAdapter,
-         recordName: this.recordName,
-         indexName: this.indexName,
-         keyField: this.keyField,
-         immutable: this.immutable,
-         sealed: this.sealed,
-         recordsAccessor: this.recordsAccessor,
-         sortOptions: this.sortOptions,
-      });
-
-      this.item = PureContainer.create({
-         children: this.items || this.children,
-         layout: UseParentLayout,
-      });
-
-      delete this.children;
-      delete this.items;
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      this.dataAdapter.initInstance(context, instance);
-   }
-
-   applyParentStore(instance) {
-      super.applyParentStore(instance);
-
-      // force prepareData to execute again and propagate the store change to the records
-      if (instance.cached) delete instance.cached.rawData;
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      if (data.sortField)
-         data.sorters = [
-            {
-               field: data.sortField,
-               direction: data.sortDirection || "ASC",
-            },
-         ];
-      this.dataAdapter.sort(data.sorters);
-      let filter = null;
-      if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
-      else if (this.filter) filter = (item) => this.filter(item, data.filterParams);
-      this.dataAdapter.setFilter(filter);
-      instance.mappedRecords = this.dataAdapter.getRecords(context, instance, data.records, instance.store);
-
-      if (this.onTrackMappedRecords) {
-         instance.invoke("onTrackMappedRecords", instance.mappedRecords, instance);
-      }
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance, data) {
-      let instances = [];
-      instance.mappedRecords.forEach((record) => {
-         let subInstance = instance.getChild(context, this.item, record.key, record.store);
-         let changed = subInstance.cache("recordData", record.data) || subInstance.cache("key", record.key);
-         subInstance.record = record;
-         if (this.cached && !changed && subInstance.visible && !subInstance.childStateDirty) {
-            instances.push(subInstance);
-            subInstance.shouldUpdate = false;
-         } else if (subInstance.scheduleExploreIfVisible(context)) instances.push(subInstance);
-      });
-      instance.children = instances;
-   }
-}
-
-Repeater.prototype.recordName = "$record";
-Repeater.prototype.indexName = "$index";
-Repeater.prototype.cached = false;
-Repeater.prototype.immutable = false;
-Repeater.prototype.sealed = false;
-Repeater.prototype.isPureContainer = true;
-
-Widget.alias("repeater", Repeater);
diff --git a/packages/cx/src/ui/Repeater.spec.js b/packages/cx/src/ui/Repeater.spec.js
deleted file mode 100644
index ba1b48378..000000000
--- a/packages/cx/src/ui/Repeater.spec.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import { Cx } from "./Cx";
-import { VDOM } from "./Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { Store } from "../data/Store";
-import { Repeater } from "./Repeater";
-
-import renderer from "react-test-renderer";
-import assert from "assert";
-
-describe("Repeater", () => {
-   it("allows sorting", () => {
-      let data = [
-         {
-            value: "C",
-         },
-         {
-            value: "B",
-         },
-         {
-            value: "A",
-         },
-      ];
-
-      let widget = (
-         <cx>
-            <div>
-               <Repeater records={data} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
-                  <div text:bind="$item.value" />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["A"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-   });
-
-   it("changes are properly updated", () => {
-      let divInstances = [];
-      let widget = (
-         <cx>
-            <div>
-               <Repeater records-bind="data" sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
-                  <div
-                     text:bind="$item.value"
-                     onExplore={(context, instance) => {
-                        divInstances.push(instance);
-                     }}
-                  />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            data: [
-               {
-                  value: "C",
-               },
-               {
-                  value: "B",
-               },
-            ],
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-
-      divInstances = [];
-
-      store.update("data", (data) => [{ value: "A" }, ...data]);
-
-      assert.deepEqual(component.toJSON(), {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["A"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-
-      assert.equal(divInstances.length, 3);
-      assert.equal(divInstances[0].store.get("$item.value"), "A");
-      assert.equal(divInstances[1].store.get("$item.value"), "B");
-      assert.equal(divInstances[2].store.get("$item.value"), "C");
-   });
-});
diff --git a/packages/cx/src/ui/Repeater.spec.tsx b/packages/cx/src/ui/Repeater.spec.tsx
new file mode 100644
index 000000000..28bc1e06f
--- /dev/null
+++ b/packages/cx/src/ui/Repeater.spec.tsx
@@ -0,0 +1,143 @@
+import { Store } from "../data/Store";
+import { Repeater } from "./Repeater";
+import { bind } from "./bind";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+
+import assert from "assert";
+
+describe("Repeater", () => {
+   it("allows sorting", async () => {
+      let data = [
+         {
+            value: "C",
+         },
+         {
+            value: "B",
+         },
+         {
+            value: "A",
+         },
+      ];
+
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={data} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div text={bind("$item.value")} />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+   });
+
+   it("changes are properly updated", async () => {
+      let divInstances: any[] = [];
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={bind("data")} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div
+                     text={bind("$item.value")}
+                     onExplore={(context, instance) => {
+                        divInstances.push(instance);
+                     }}
+                  />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            data: [
+               {
+                  value: "C",
+               },
+               {
+                  value: "B",
+               },
+            ],
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      divInstances = [];
+
+      await act(async () => {
+         store.update("data", (data) => [{ value: "A" }, ...data]);
+      });
+
+      assert.deepEqual(component.toJSON(), {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      assert.equal(divInstances.length, 3);
+      assert.equal(divInstances[0].store.get("$item.value"), "A");
+      assert.equal(divInstances[1].store.get("$item.value"), "B");
+      assert.equal(divInstances[2].store.get("$item.value"), "C");
+   });
+});
diff --git a/packages/cx/src/ui/Repeater.ts b/packages/cx/src/ui/Repeater.ts
new file mode 100644
index 000000000..143c52aed
--- /dev/null
+++ b/packages/cx/src/ui/Repeater.ts
@@ -0,0 +1,194 @@
+import { Widget } from "./Widget";
+import { PureContainer } from "./PureContainer";
+import { ContainerBase, ContainerConfig } from "./Container";
+import { ArrayAdapter } from "./adapter/ArrayAdapter";
+import { UseParentLayout } from "./layout/UseParentLayout";
+import { getAccessor } from "../data/getAccessor";
+import { RenderingContext } from "./RenderingContext";
+import { Prop, StringProp, StructuredProp, RecordAlias, SortersProp, CollatorOptions, SortDirection } from "./Prop";
+import { Instance } from "./Instance";
+import { DataAdapter, DataAdapterRecord } from "./adapter/DataAdapter";
+import type { GroupAdapter } from "./adapter/GroupAdapter";
+import type { TreeAdapter } from "./adapter/TreeAdapter";
+import { Create } from "../util/Component";
+
+export interface RepeaterConfig<T = any> extends ContainerConfig {
+   /** An array of records to be displayed. */
+   records?: Prop<T[]>;
+
+   /** Alias used to expose the record in the child scope. Default is `$record`. */
+   recordName?: RecordAlias;
+
+   /** Alias used to expose the record in the child scope. Default is `$record`. */
+   recordAlias?: RecordAlias;
+
+   /** Alias used to expose the index of the record. Default is `$index`. */
+   indexName?: RecordAlias;
+
+   /** Alias used to expose the index of the record. Default is `$index`. */
+   indexAlias?: RecordAlias;
+
+   /** Set to `true` to enable caching for improved performance on large datasets. */
+   cached?: boolean;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that record stores should not be mutated. */
+   sealed?: boolean;
+
+   /** An array of sorter configurations. */
+   sorters?: SortersProp;
+
+   /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
+   sortField?: StringProp;
+
+   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
+   sortDirection?: Prop<SortDirection>;
+
+   /** Parameters that affect filtering. */
+   filterParams?: StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateFilter?: (filterParams: any, instance: Instance) => (record: T) => boolean;
+
+   /**
+    * Callback function to track and retrieve displayed records.
+    * Accepts new records as a first argument.
+    * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
+    */
+   onTrackMappedRecords?: string | ((records: DataAdapterRecord<T>[], instance: Instance) => void);
+
+   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
+   sortOptions?: CollatorOptions;
+
+   /** A field used to get the unique identifier of the record. Setting keyField improves performance on sort operations as the widget is able to track movement of records inside the collection. */
+   keyField?: string;
+
+   /** Data adapter used to convert data in the list of records. Used for manipulation of records, e.g flattening the tree records. */
+   dataAdapter?:
+      | Create<typeof DataAdapter>
+      | Create<typeof ArrayAdapter>
+      | Create<typeof TreeAdapter>
+      | Create<typeof GroupAdapter>;
+}
+
+export class Repeater<T = any> extends ContainerBase<RepeaterConfig<T>> {
+   declare records?: any;
+   recordsAccessor: any;
+   declare recordAlias?: string;
+   declare recordName: string;
+   declare indexAlias?: string;
+   declare indexName: string;
+   declare dataAdapter: any;
+   declare keyField?: string;
+   declare immutable: boolean;
+   declare sealed: boolean;
+   declare sortOptions?: any;
+   item: any;
+   declare cached: boolean;
+   declare onCreateFilter?: any;
+   filter?: any;
+   declare onTrackMappedRecords?: any;
+
+   declareData(...args: any[]) {
+      super.declareData(
+         {
+            records: undefined,
+            sorters: undefined,
+            sortField: undefined,
+            sortDirection: undefined,
+            filterParams: {
+               structured: true,
+            },
+         },
+         ...args,
+      );
+   }
+
+   init() {
+      this.recordsAccessor = getAccessor(this.records);
+
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.indexAlias) this.indexName = this.indexAlias;
+
+      this.dataAdapter = ArrayAdapter.create({
+         ...this.dataAdapter,
+         recordName: this.recordName,
+         indexName: this.indexName,
+         keyField: this.keyField,
+         immutable: this.immutable,
+         sealed: this.sealed,
+         recordsAccessor: this.recordsAccessor,
+         sortOptions: this.sortOptions,
+      });
+
+      this.item = PureContainer.create({
+         children: this.items || this.children,
+         layout: UseParentLayout,
+      });
+
+      delete this.children;
+      this.items = [];
+
+      super.init();
+   }
+
+   initInstance(context: RenderingContext, instance: any): void {
+      this.dataAdapter.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any): void {
+      super.applyParentStore(instance);
+
+      // force prepareData to execute again and propagate the store change to the records
+      if (instance.cached) delete instance.cached.rawData;
+   }
+
+   prepareData(context: RenderingContext, instance: any): void {
+      let { data } = instance;
+      if (data.sortField)
+         data.sorters = [
+            {
+               field: data.sortField,
+               direction: data.sortDirection || "ASC",
+            },
+         ];
+      this.dataAdapter.sort(data.sorters);
+      let filter = null;
+      if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
+      else if (this.filter) filter = (item: any) => this.filter(item, data.filterParams);
+      this.dataAdapter.setFilter(filter);
+      instance.mappedRecords = this.dataAdapter.getRecords(context, instance, data.records, instance.store);
+
+      if (this.onTrackMappedRecords) {
+         instance.invoke("onTrackMappedRecords", instance.mappedRecords, instance);
+      }
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: any, data?: any): void {
+      let instances: any[] = [];
+      instance.mappedRecords.forEach((record: any) => {
+         let subInstance = instance.getChild(context, this.item, record.key, record.store);
+         let changed = subInstance.cache("recordData", record.data) || subInstance.cache("key", record.key);
+         subInstance.record = record;
+         if (this.cached && !changed && subInstance.visible && !subInstance.childStateDirty) {
+            instances.push(subInstance);
+            subInstance.shouldUpdate = false;
+         } else if (subInstance.scheduleExploreIfVisible(context)) instances.push(subInstance);
+      });
+      instance.children = instances;
+   }
+}
+
+Repeater.prototype.recordName = "$record";
+Repeater.prototype.indexName = "$index";
+Repeater.prototype.cached = false;
+Repeater.prototype.immutable = false;
+Repeater.prototype.sealed = false;
+Repeater.prototype.isPureContainer = true;
+
+Widget.alias("repeater", Repeater);
diff --git a/packages/cx/src/ui/Rescope.d.ts b/packages/cx/src/ui/Rescope.d.ts
deleted file mode 100644
index ef353edb5..000000000
--- a/packages/cx/src/ui/Rescope.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as Cx from "../core";
-
-interface RescopeProps extends Cx.PureContainerProps {
-   bind: string;
-   rootName?: string;
-   rootAlias?: string;
-   data?: Cx.StructuredProp;
-}
-
-export class Rescope extends Cx.Widget<RescopeProps> {}
diff --git a/packages/cx/src/ui/Rescope.js b/packages/cx/src/ui/Rescope.js
deleted file mode 100644
index c976fd127..000000000
--- a/packages/cx/src/ui/Rescope.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Widget } from "./Widget";
-import { PureContainer } from "./PureContainer";
-import { Binding } from "../data/Binding";
-import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
-import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
-import { isObject } from "../util/isObject";
-
-export class Rescope extends PureContainer {
-   init() {
-      this.binding = Binding.get(this.bind);
-      if (this.rootAlias) this.rootName = this.rootAlias;
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.store = new ZoomIntoPropertyView({
-         store: instance.parentStore,
-         binding: this.binding,
-         rootName: this.rootName,
-         nestedData: isObject(this.data)
-            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
-            : null,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance) {
-      instance.store.setStore(instance.parentStore);
-   }
-}
-
-Rescope.prototype.bind = "$page";
-Rescope.prototype.rootName = "$root";
-
-Widget.alias("rescope", Rescope);
diff --git a/packages/cx/src/ui/Rescope.spec.js b/packages/cx/src/ui/Rescope.spec.js
deleted file mode 100644
index a167325a1..000000000
--- a/packages/cx/src/ui/Rescope.spec.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import { Cx } from "./Cx";
-import { VDOM } from "./Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { Store } from "../data/Store";
-import { Rescope } from "./Rescope";
-import { PureContainer } from "./PureContainer";
-
-import renderer from "react-test-renderer";
-import assert from "assert";
-import { Controller } from "./Controller";
-
-describe("Rescope", () => {
-   it("allows simple access to nested data", () => {
-      let store = new Store({
-         data: {
-            $page: {
-               data: {
-                  name: "John",
-               },
-            },
-         },
-      });
-
-      let widget = (
-         <cx>
-            <Rescope bind="$page.data">
-               <div text-bind="name" />
-            </Rescope>
-         </cx>
-      );
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: ["John"],
-      });
-   });
-
-   it("allows parent access through $root", () => {
-      let store = new Store({
-         data: {
-            layout: {
-               title: "Title",
-            },
-            $page: {
-               data: {
-                  name: "John",
-               },
-            },
-         },
-      });
-
-      let widget = (
-         <cx>
-            <Rescope bind="$page.data">
-               <div text-bind="$root.layout.title" />
-            </Rescope>
-         </cx>
-      );
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: ["Title"],
-      });
-   });
-
-   it("allows nested data access through data", () => {
-      let store = new Store({
-         data: {
-            layout: {
-               title: "Title",
-            },
-         },
-      });
-
-      let widget = (
-         <cx>
-            <Rescope bind="$page" data={{ $title: { bind: "layout.title" } }}>
-               <div text-bind="$title" />
-            </Rescope>
-         </cx>
-      );
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: ["Title"],
-      });
-   });
-
-   it("nested data mutations are correctly propagated to the parent store", () => {
-      let store = new Store({
-         data: {
-            item: {
-               value: 0
-            }
-         },
-      });
-
-      let widget = (
-         <cx>
-            <Rescope bind="$page" data={{ $value: { bind: "item.value" } }}>
-               <PureContainer controller={{
-                  onInit() {
-                     this.store.set("$value", 2);
-                  }
-               }} />
-            </Rescope>
-            <div text-bind="item.value" />
-         </cx>
-      );
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: ["2"],
-      });
-   });
-
-   it("visible is calculated based on the inner scope", () => {
-      let store = new Store({
-         data: {
-            layout: {
-               title: "Title",
-            },
-            $page: {
-               data: {
-                  visible: true,
-                  name: "John",
-               },
-            },
-         },
-      });
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <Rescope bind="$page.data" visible-bind="visible">
-               <div text-bind="name" />
-            </Rescope>
-         </Cx>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: ["John"],
-      });
-   });
-
-   it("controllers see inner scope", () => {
-      let store = new Store({
-         data: {
-            $page: {
-               data: {
-                  visible: true,
-                  name: "John",
-               },
-            },
-         },
-      });
-
-      let testName = null;
-
-      class TestController extends Controller {
-         onInit() {
-            testName = this.store.get("name");
-         }
-      }
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <Rescope bind="$page.data" controller={TestController}>
-               <div text-bind="name" />
-            </Rescope>
-         </Cx>
-      );
-
-      component.toJSON();
-      assert.equal(testName, "John");
-   });
-});
diff --git a/packages/cx/src/ui/Rescope.spec.tsx b/packages/cx/src/ui/Rescope.spec.tsx
new file mode 100644
index 000000000..887c1188d
--- /dev/null
+++ b/packages/cx/src/ui/Rescope.spec.tsx
@@ -0,0 +1,199 @@
+import { Store } from "../data/Store";
+import { Rescope } from "./Rescope";
+import { bind } from "./bind";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { Controller } from "./Controller";
+
+import assert from "assert";
+import { PureContainer } from "./PureContainer";
+
+describe("Rescope", () => {
+   it("allows simple access to nested data", async () => {
+      let store = new Store({
+         data: {
+            $page: {
+               data: {
+                  name: "John",
+               },
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page.data">
+               <div text={bind("name")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["John"],
+      });
+   });
+
+   it("allows parent access through $root", async () => {
+      let store = new Store({
+         data: {
+            layout: {
+               title: "Title",
+            },
+            $page: {
+               data: {
+                  name: "John",
+               },
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page.data">
+               <div text={bind("$root.layout.title")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Title"],
+      });
+   });
+
+   it("allows nested data access through data", async () => {
+      let store = new Store({
+         data: {
+            layout: {
+               title: "Title",
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page" data={{ $title: { bind: "layout.title" } }}>
+               <div text={bind("$title")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Title"],
+      });
+   });
+
+   it("nested data mutations are correctly propagated to the parent store", async () => {
+      let store = new Store({
+         data: {
+            item: {
+               value: 0,
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page" data={{ $value: { bind: "item.value" } }}>
+               <PureContainer
+                  controller={{
+                     onInit() {
+                        this.store.set("$value", 2);
+                     },
+                  }}
+               />
+            </Rescope>
+            <div text={bind("item.value")} />
+         </cx>
+      );
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["2"],
+      });
+   });
+
+   it("visible is calculated based on the inner scope", async () => {
+      let store = new Store({
+         data: {
+            layout: {
+               title: "Title",
+            },
+            $page: {
+               data: {
+                  visible: true,
+                  name: "John",
+               },
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page.data" visible={bind("visible")}>
+               <div text={bind("name")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["John"],
+      });
+   });
+
+   it("controllers see inner scope", async () => {
+      let store = new Store({
+         data: {
+            $page: {
+               data: {
+                  visible: true,
+                  name: "John",
+               },
+            },
+         },
+      });
+
+      let testName = null;
+
+      class TestController extends Controller {
+         onInit() {
+            testName = this.store.get("name");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page.data" controller={TestController}>
+               <div text={bind("name")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = await createTestRenderer(store, widget);
+
+      component.toJSON();
+      assert.equal(testName, "John");
+   });
+});
diff --git a/packages/cx/src/ui/Rescope.ts b/packages/cx/src/ui/Rescope.ts
new file mode 100644
index 000000000..2e97d6813
--- /dev/null
+++ b/packages/cx/src/ui/Rescope.ts
@@ -0,0 +1,49 @@
+import { Widget } from "./Widget";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Binding } from "../data/Binding";
+import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+import { isObject } from "../util/isObject";
+import { StructuredProp } from "./Prop";
+
+export interface RescopeConfig extends PureContainerConfig {
+   bind: string;
+   rootName?: string;
+   rootAlias?: string;
+   data?: StructuredProp;
+}
+
+export class Rescope extends PureContainerBase<RescopeConfig> {
+   declare bind: string;
+   declare binding: any;
+   declare rootAlias?: string;
+   declare rootName: string;
+   declare data?: any;
+
+   init() {
+      this.binding = Binding.get(this.bind);
+      if (this.rootAlias) this.rootName = this.rootAlias;
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new ZoomIntoPropertyView({
+         store: instance.parentStore,
+         binding: this.binding,
+         rootName: this.rootName,
+         nestedData: isObject(this.data)
+            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
+            : undefined,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+Rescope.prototype.bind = "$page";
+Rescope.prototype.rootName = "$root";
+
+Widget.alias("rescope", Rescope);
diff --git a/packages/cx/src/ui/ResizeManager.d.ts b/packages/cx/src/ui/ResizeManager.d.ts
deleted file mode 100644
index d67742755..000000000
--- a/packages/cx/src/ui/ResizeManager.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export class ResizeManager {
-   static subscribe(callback: () => void): () => void;
-
-   static notify(): void;
-
-   static trackElement(
-      el: Element,
-      callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void,
-   ): () => void;
-}
diff --git a/packages/cx/src/ui/ResizeManager.js b/packages/cx/src/ui/ResizeManager.js
deleted file mode 100644
index e9fd31092..000000000
--- a/packages/cx/src/ui/ResizeManager.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { SubscriberList } from '../util/SubscriberList';
-import { batchUpdates } from './batchUpdates';
-
-let subscribers = new SubscriberList();
-
-export class ResizeManager {
-   static subscribe(callback) {
-      return subscribers.subscribe(callback);
-   }
-
-   static notify() {
-      batchUpdates(() => {
-         subscribers.notify();
-      });
-   }
-
-   static trackElement(el, callback) {
-      if (typeof ResizeObserver !== 'function')
-         return this.subscribe(callback);
-
-      let obs = new ResizeObserver(callback);
-      obs.observe(el);
-
-      return () => {
-         obs.disconnect();
-      }
-   }
-}
-
-if (typeof window != 'undefined')
-   window.addEventListener('resize', () => ResizeManager.notify());
\ No newline at end of file
diff --git a/packages/cx/src/ui/ResizeManager.ts b/packages/cx/src/ui/ResizeManager.ts
new file mode 100644
index 000000000..1f32d9f1b
--- /dev/null
+++ b/packages/cx/src/ui/ResizeManager.ts
@@ -0,0 +1,31 @@
+import { SubscriberList } from '../util/SubscriberList';
+import { batchUpdates } from './batchUpdates';
+
+let subscribers = new SubscriberList();
+
+export class ResizeManager {
+   static subscribe(callback: () => void) {
+      return subscribers.subscribe(callback);
+   }
+
+   static notify() {
+      batchUpdates(() => {
+         subscribers.notify();
+      });
+   }
+
+   static trackElement(el: any, callback: (entries: ResizeObserverEntry[]) => void) {
+      if (typeof ResizeObserver !== 'function')
+         return this.subscribe(() => callback([]));
+
+      let obs = new ResizeObserver(callback);
+      obs.observe(el);
+
+      return () => {
+         obs.disconnect();
+      }
+   }
+}
+
+if (typeof window != 'undefined')
+   window.addEventListener('resize', () => ResizeManager.notify());
\ No newline at end of file
diff --git a/packages/cx/src/ui/Restate.d.ts b/packages/cx/src/ui/Restate.d.ts
deleted file mode 100644
index 09a00aae0..000000000
--- a/packages/cx/src/ui/Restate.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Instance } from "./Instance";
-import * as Cx from "../core";
-import { CultureInfo } from "./Culture";
-
-interface RestateProps extends Cx.PureContainerProps {
-   data?: Cx.StructuredProp;
-   detached?: boolean;
-   deferredUntilIdle?: Cx.BooleanProp;
-   idleTimeout?: Cx.NumberProp;
-   cacheKey?: Cx.StringProp;
-
-   /* Set to true to disable batching of updates. */
-   immediate?: boolean;
-
-   onError?: (err: Error, instance: Instance) => void;
-
-   culture?: CultureInfo;
-}
-
-export class Restate extends Cx.Widget<RestateProps> {}
-export class PrivateStore extends Cx.Widget<RestateProps> {}
diff --git a/packages/cx/src/ui/Restate.js b/packages/cx/src/ui/Restate.js
deleted file mode 100644
index 560618b43..000000000
--- a/packages/cx/src/ui/Restate.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import { PureContainer } from "./PureContainer";
-import { Store } from "../data/Store";
-import { Cx } from "./Cx";
-import { VDOM } from "./VDOM";
-import { isObject } from "../util/isObject";
-import { isUndefined } from "../util/isUndefined";
-import { Binding } from "../data/Binding";
-import { StructuredSelector } from "../data/StructuredSelector";
-import { getCurrentCulture } from "./Culture";
-
-let persistenceCache = {};
-
-export class Restate extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         deferredUntilIdle: undefined,
-         idleTimeout: undefined,
-         cacheKey: undefined,
-      });
-   }
-
-   init() {
-      this.container = PureContainer.create({
-         type: PureContainer,
-         items: this.children || this.items,
-         layout: this.layout,
-         controller: this.controller,
-         outerLayout: this.outerLayout,
-         useParentLayout: !this.detached,
-         ws: this.ws,
-      });
-      this.privateDataSelector = new StructuredSelector({
-         props: this.data || {},
-         values: this.data,
-      });
-      delete this.items;
-      delete this.children;
-      delete this.controller;
-      delete this.outerLayout;
-      delete this.layout;
-      if (this.useParentLayout == null) this.useParentLayout = !this.detached;
-      super.init();
-   }
-
-   initSubStore(context, instance) {
-      let { cacheKey } = instance.data;
-      this.privateDataSelector.init(instance.store);
-      instance.subStore = new RestateStore({
-         store: instance.store,
-         detached: this.detached,
-         privateData: this.data || {},
-         data: cacheKey ? persistenceCache[cacheKey] || {} : {},
-         dataSelector: this.privateDataSelector.create(),
-         onSet: (path, value) => instance.nestedDataSet(path, value, this.data),
-      });
-
-      if (cacheKey) {
-         instance.subscribeOnDestroy(() => {
-            persistenceCache[cacheKey] = instance.subStore.getData();
-         });
-      }
-   }
-
-   applyParentStore(instance) {
-      if (instance.subStore) instance.subStore.setStore(instance.parentStore);
-   }
-
-   explore(context, instance) {
-      if (!instance.subStore) this.initSubStore(context, instance);
-      if (instance.subStore.parentDataCheck()) instance.markShouldUpdate();
-      instance.cultureInfo = this.culture ?? getCurrentCulture();
-      if (instance.cache("cultureInfo", instance.culture)) instance.markShouldUpdate();
-      super.explore(context, instance);
-   }
-
-   exploreItems(context, instance, items) {
-      if (!this.detached) {
-         instance.container = instance.getChild(context, this.container, "container", instance.subStore);
-         instance.container.scheduleExploreIfVisible(context);
-         instance.children = [instance.container];
-      }
-   }
-
-   render(context, instance, key) {
-      if (!this.detached) return instance.container.render(context);
-
-      return (
-         <Cx
-            key={key}
-            widget={this.container}
-            parentInstance={instance}
-            store={instance.subStore}
-            subscribe
-            options={this.options}
-            onError={this.onError}
-            deferredUntilIdle={instance.data.deferredUntilIdle}
-            idleTimeout={instance.data.idleTimeout}
-            immediate={this.immediate}
-            cultureInfo={instance.cultureInfo}
-         />
-      );
-   }
-}
-
-Restate.prototype.detached = false;
-Restate.prototype.waitForIdle = false;
-Restate.prototype.immediate = false;
-Restate.prototype.culture = null;
-
-export const PrivateStore = Restate;
-
-class RestateStore extends Store {
-   constructor(config) {
-      super(config);
-      this.parentDataVersion = -1;
-   }
-
-   getData() {
-      this.silently(() => {
-         this.parentDataCheck();
-      });
-      return super.getData();
-   }
-
-   parentDataCheck() {
-      if (this.parentDataVersion == this.store.meta.version) return false;
-      this.parentDataVersion = this.store.meta.version;
-      this.parentData = this.dataSelector(this.store.getData());
-      return this.batch(() => {
-         for (let key in this.parentData) {
-            super.setItem(key, this.parentData[key]);
-         }
-      });
-   }
-
-   setItem(path, value) {
-      let binding = Binding.get(path);
-      let bindingRoot = binding.parts[0];
-      if (!isObject(this.privateData) || !this.privateData.hasOwnProperty(bindingRoot)) {
-         let changed = isUndefined(value) ? super.deleteItem(path) : super.setItem(path, value);
-         return changed;
-      }
-
-      let newValue = value;
-      if (binding.parts.length > 1) newValue = binding.set(this.getData(), value)[bindingRoot];
-      this.onSet(bindingRoot, newValue);
-      this.batch(() => {
-         super.setItem(bindingRoot, newValue);
-         this.parentDataCheck();
-      });
-      return true;
-   }
-
-   deleteItem(path) {
-      return this.setItem(path, undefined);
-   }
-
-   doNotify() {
-      if (!this.detached) this.store.notify();
-      super.doNotify();
-   }
-
-   // override the default implementation to avoid meta overwrites
-   setStore(store) {
-      this.store = store;
-   }
-}
diff --git a/packages/cx/src/ui/Restate.spec.js b/packages/cx/src/ui/Restate.spec.js
deleted file mode 100644
index 03cefdafa..000000000
--- a/packages/cx/src/ui/Restate.spec.js
+++ /dev/null
@@ -1,422 +0,0 @@
-import { HtmlElement } from "../widgets/HtmlElement";
-import { Cx } from "./Cx";
-import { Restate } from "./Restate";
-import { Store } from "../data/Store";
-import { VDOM } from "./VDOM";
-import renderer from "react-test-renderer";
-import assert from "assert";
-import { Controller } from "./Controller";
-import { bind } from "./bind";
-import { FirstVisibleChild } from "./layout/FirstVisibleChildLayout";
-import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
-
-describe("Restate", () => {
-   it("provides a blank slate", () => {
-      let widget = (
-         <cx>
-            <div>
-               <Restate
-                  data={{
-                     value: "good",
-                  }}
-               >
-                  <span text-bind="value" />
-                  <span text-bind="value2" />
-               </Restate>
-            </div>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            value: "bad",
-            value2: "also bad",
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "span",
-               props: {},
-               children: ["good"],
-            },
-            {
-               type: "span",
-               props: {},
-               children: null,
-            },
-         ],
-      });
-   });
-
-   it("wires declared data", () => {
-      let widget = (
-         <cx>
-            <div>
-               <Restate
-                  data={{
-                     name: { bind: "person.name" },
-                  }}
-               >
-                  <div
-                     controller={{
-                        onInit() {
-                           this.store.init("name", "Sasa");
-                           this.store.init("nickname", "Sale");
-                        },
-                     }}
-                  />
-               </Restate>
-            </div>
-         </cx>
-      );
-
-      let changed = false;
-      let store = new Store();
-      store.subscribe(() => {
-         //console.log(store.getData());
-         changed = true;
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert.equal(store.get("person.name"), "Sasa");
-      assert(store.get("person.nickname") === undefined);
-      assert(changed);
-   });
-
-   it("causes a global update if internal data changes", () => {
-      let controller;
-
-      class TestController extends Controller {
-         onInit() {
-            controller = this;
-         }
-
-         setNickname(nname) {
-            this.store.set("nickname", nname);
-         }
-      }
-
-      let widget = (
-         <cx>
-            <div>
-               <Restate
-                  data={{
-                     name: { bind: "person.name" },
-                  }}
-               >
-                  <div controller={TestController} text-bind="nickname" />
-               </Restate>
-            </div>
-         </cx>
-      );
-
-      let changed = false;
-      let store = new Store();
-      store.subscribe(() => {
-         changed = true;
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: null,
-            },
-         ],
-      });
-
-      controller.setNickname("Sale");
-
-      let tree2 = component.toJSON();
-      assert.deepEqual(tree2, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["Sale"],
-            },
-         ],
-      });
-   });
-
-   it("doesn't notify parent if not necessary in detached mode", () => {
-      class TestController extends Controller {
-         onInit() {
-            this.store.init("nickname", "Sale");
-         }
-      }
-
-      let widget = (
-         <cx>
-            <div>
-               <Restate
-                  detached
-                  data={{
-                     name: { bind: "person.name" },
-                  }}
-               >
-                  <div controller={TestController} />
-               </Restate>
-            </div>
-         </cx>
-      );
-
-      let changed = false;
-      let store = new Store();
-      store.subscribe(() => {
-         changed = true;
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert(!changed);
-   });
-
-   it("shared state can be used across components inside and outside Restate", () => {
-      let widget = (
-         <cx>
-            <div>
-               <div text={bind("person.gender", "Male")} />
-               <Restate
-                  detached
-                  data={{
-                     person: { bind: "person" },
-                  }}
-               >
-                  <div text={bind("person.firstName", "John")} />
-                  <div text={bind("person.lastName", "Doe")} />
-               </Restate>
-               <div text={bind("person.address", "Unknown")} />
-            </div>
-         </cx>
-      );
-
-      let changed = false;
-      let store = new Store();
-      store.subscribe(() => {
-         changed = true;
-         //console.log(store.getData());
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(store.getData(), {
-         person: {
-            firstName: "John",
-            lastName: "Doe",
-            address: "Unknown",
-            gender: "Male",
-         },
-      });
-   });
-
-   it("updates if shared state is changed from outside", () => {
-      [true, false].forEach((detached) => {
-         let widget = (
-            <cx>
-               <div>
-                  <Restate
-                     detached={detached}
-                     data={{
-                        person: { bind: "person" },
-                     }}
-                  >
-                     <div text={bind("person.firstName")} />
-                  </Restate>
-                  <div text={bind("person.firstName", "John")} />
-               </div>
-            </cx>
-         );
-
-         let store = new Store();
-
-         const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-         let tree = component.toJSON();
-         assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: [
-               {
-                  type: "div",
-                  props: {},
-                  children: ["John"],
-               },
-               {
-                  type: "div",
-                  props: {},
-                  children: ["John"],
-               },
-            ],
-         });
-         store.set("person.firstName", "Jack");
-
-         tree = component.toJSON();
-         assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: [
-               {
-                  type: "div",
-                  props: {},
-                  children: ["Jack"],
-               },
-               {
-                  type: "div",
-                  props: {},
-                  children: ["Jack"],
-               },
-            ],
-         });
-      });
-   });
-
-   it("allows field initialization in data declaration", () => {
-      [true, false].forEach((detached) => {
-         let widget = (
-            <cx>
-               <div>
-                  <Restate
-                     detached={detached}
-                     data={{
-                        name: bind("name", "Cx"),
-                     }}
-                  >
-                     <div text-bind="name" />
-                  </Restate>
-               </div>
-            </cx>
-         );
-
-         let store = new Store();
-
-         const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-         let tree = component.toJSON();
-         assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: [
-               {
-                  type: "div",
-                  props: {},
-                  children: ["Cx"],
-               },
-            ],
-         });
-      });
-   });
-
-   it("updates if internal data changes", () => {
-      class TestController extends Controller {
-         onInit() {
-            this.store.init("nickname", "Sale");
-         }
-      }
-
-      let widget = (
-         <cx>
-            <div>
-               <Restate>
-                  <Restate>
-                     <div controller={TestController} text-bind="nickname" />
-                  </Restate>
-               </Restate>
-            </div>
-         </cx>
-      );
-
-      let changed = false;
-      let store = new Store();
-      store.subscribe(() => {
-         changed = true;
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["Sale"],
-            },
-         ],
-      });
-   });
-
-   it("works with FirstVisibleChildLayout", () => {
-      let widget = (
-         <cx>
-            <div>
-               <FirstVisibleChildLayout>
-                  <Restate>
-                     <div>First</div>
-                  </Restate>
-                  <div>Second</div>
-               </FirstVisibleChildLayout>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [{ type: "div", props: {}, children: ["First"] }],
-      });
-   });
-
-   it("is transparent to FirstVisibleChildLayout", () => {
-      let widget = (
-         <cx>
-            <div>
-               <FirstVisibleChildLayout>
-                  <Restate>
-                     <div visible={false}>First</div>
-                  </Restate>
-                  <div>Second</div>
-               </FirstVisibleChildLayout>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [{ type: "div", props: {}, children: ["Second"] }],
-      });
-   });
-});
diff --git a/packages/cx/src/ui/Restate.spec.tsx b/packages/cx/src/ui/Restate.spec.tsx
new file mode 100644
index 000000000..090c4df0a
--- /dev/null
+++ b/packages/cx/src/ui/Restate.spec.tsx
@@ -0,0 +1,422 @@
+import { Restate } from "./Restate";
+import { Store } from "../data/Store";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { Controller } from "./Controller";
+import { bind } from "./bind";
+import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
+
+describe("Restate", () => {
+   it("provides a blank slate", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <Restate
+                  data={{
+                     value: "good",
+                  }}
+               >
+                  <span text={bind("value")} />
+                  <span text={bind("value2")} />
+               </Restate>
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "bad",
+            value2: "also bad",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["good"],
+            },
+            {
+               type: "span",
+               props: {},
+               children: null,
+            },
+         ],
+      });
+   });
+
+   it("wires declared data", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <Restate
+                  data={{
+                     name: { bind: "person.name" },
+                  }}
+               >
+                  <div
+                     controller={{
+                        onInit() {
+                           this.store.init("name", "Sasa");
+                           this.store.init("nickname", "Sale");
+                        },
+                     }}
+                  />
+               </Restate>
+            </div>
+         </cx>
+      );
+
+      let changed = false;
+      let store = new Store();
+      store.subscribe(() => {
+         //console.log(store.getData());
+         changed = true;
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert.equal(store.get("person.name"), "Sasa");
+      assert(store.get("person.nickname") === undefined);
+      assert(changed);
+   });
+
+   it("causes a global update if internal data changes", async () => {
+      let controller: TestController | undefined;
+
+      class TestController extends Controller {
+         onInit() {
+            controller = this;
+         }
+
+         setNickname(nname: string) {
+            this.store.set("nickname", nname);
+         }
+      }
+
+      let widget = (
+         <cx>
+            <div>
+               <Restate
+                  data={{
+                     name: { bind: "person.name" },
+                  }}
+               >
+                  <div controller={TestController} text={bind("nickname")} />
+               </Restate>
+            </div>
+         </cx>
+      );
+
+      let changed = false;
+      let store = new Store();
+      store.subscribe(() => {
+         changed = true;
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: null,
+            },
+         ],
+      });
+
+      await act(async () => {
+         controller!.setNickname("Sale");
+      });
+
+      let tree2 = component.toJSON();
+      assert.deepEqual(tree2, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["Sale"],
+            },
+         ],
+      });
+   });
+
+   it("doesn't notify parent if not necessary in detached mode", async () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.init("nickname", "Sale");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <div>
+               <Restate
+                  detached
+                  data={{
+                     name: { bind: "person.name" },
+                  }}
+               >
+                  <div controller={TestController} />
+               </Restate>
+            </div>
+         </cx>
+      );
+
+      let changed = false;
+      let store = new Store();
+      store.subscribe(() => {
+         changed = true;
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(!changed);
+   });
+
+   it("shared state can be used across components inside and outside Restate", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <div text={bind("person.gender", "Male")} />
+               <Restate
+                  detached
+                  data={{
+                     person: { bind: "person" },
+                  }}
+               >
+                  <div text={bind("person.firstName", "John")} />
+                  <div text={bind("person.lastName", "Doe")} />
+               </Restate>
+               <div text={bind("person.address", "Unknown")} />
+            </div>
+         </cx>
+      );
+
+      let changed = false;
+      let store = new Store();
+      store.subscribe(() => {
+         changed = true;
+         //console.log(store.getData());
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(store.getData(), {
+         person: {
+            firstName: "John",
+            lastName: "Doe",
+            address: "Unknown",
+            gender: "Male",
+         },
+      });
+   });
+
+   it("updates if shared state is changed from outside", async () => {
+      for (const detached of [true, false]) {
+         let widget = (
+            <cx>
+               <div>
+                  <Restate
+                     detached={detached}
+                     data={{
+                        person: { bind: "person" },
+                     }}
+                  >
+                     <div text={bind("person.firstName")} />
+                  </Restate>
+                  <div text={bind("person.firstName", "John")} />
+               </div>
+            </cx>
+         );
+
+         let store = new Store();
+
+         const component = await createTestRenderer(store, widget);
+
+         let tree = component.toJSON();
+         assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+               {
+                  type: "div",
+                  props: {},
+                  children: ["John"],
+               },
+               {
+                  type: "div",
+                  props: {},
+                  children: ["John"],
+               },
+            ],
+         });
+         await act(async () => {
+            store.set("person.firstName", "Jack");
+         });
+
+         tree = component.toJSON();
+         assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+               {
+                  type: "div",
+                  props: {},
+                  children: ["Jack"],
+               },
+               {
+                  type: "div",
+                  props: {},
+                  children: ["Jack"],
+               },
+            ],
+         });
+      }
+   });
+
+   it("allows field initialization in data declaration", async () => {
+      for (const detached of [true, false]) {
+         let widget = (
+            <cx>
+               <div>
+                  <Restate
+                     detached={detached}
+                     data={{
+                        name: bind("name", "Cx"),
+                     }}
+                  >
+                     <div text={bind("name")} />
+                  </Restate>
+               </div>
+            </cx>
+         );
+
+         let store = new Store();
+
+         const component = await createTestRenderer(store, widget);
+
+         let tree = component.toJSON();
+         assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+               {
+                  type: "div",
+                  props: {},
+                  children: ["Cx"],
+               },
+            ],
+         });
+      }
+   });
+
+   it("updates if internal data changes", async () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.init("nickname", "Sale");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <div>
+               <Restate>
+                  <Restate>
+                     <div controller={TestController} text={bind("nickname")} />
+                  </Restate>
+               </Restate>
+            </div>
+         </cx>
+      );
+
+      let changed = false;
+      let store = new Store();
+      store.subscribe(() => {
+         changed = true;
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["Sale"],
+            },
+         ],
+      });
+   });
+
+   it("works with FirstVisibleChildLayout", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <FirstVisibleChildLayout>
+                  <Restate>
+                     <div>First</div>
+                  </Restate>
+                  <div>Second</div>
+               </FirstVisibleChildLayout>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "div", props: {}, children: ["First"] }],
+      });
+   });
+
+   it("is transparent to FirstVisibleChildLayout", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <FirstVisibleChildLayout>
+                  <Restate>
+                     <div visible={false}>First</div>
+                  </Restate>
+                  <div>Second</div>
+               </FirstVisibleChildLayout>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "div", props: {}, children: ["Second"] }],
+      });
+   });
+});
diff --git a/packages/cx/src/ui/Restate.tsx b/packages/cx/src/ui/Restate.tsx
new file mode 100644
index 000000000..d544002ea
--- /dev/null
+++ b/packages/cx/src/ui/Restate.tsx
@@ -0,0 +1,217 @@
+/** @jsxImportSource react */
+import { PureContainer, PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Store } from "../data/Store";
+import { View } from "../data/View";
+import { Cx } from "./Cx";
+import { VDOM } from "./VDOM";
+import { isObject } from "../util/isObject";
+import { isUndefined } from "../util/isUndefined";
+import { Binding } from "../data/Binding";
+import { StructuredSelector } from "../data/StructuredSelector";
+import { getCurrentCulture, CultureInfo } from "./Culture";
+import { BooleanProp, NumberProp, StringProp, StructuredProp } from "./Prop";
+import { Instance } from "./Instance";
+
+let persistenceCache: any = {};
+
+export interface RestateConfig extends PureContainerConfig {
+   /** Data object to be exposed in the local store. */
+   data?: StructuredProp;
+
+   /** Set to `true` to render the content in a separate, detached rendering context. */
+   detached?: boolean;
+
+   /** Set to `true` to defer updates until the browser is idle. */
+   deferredUntilIdle?: BooleanProp;
+
+   /** Timeout in milliseconds for idle updates. */
+   idleTimeout?: NumberProp;
+
+   /** Key used to cache and persist the local store data. */
+   cacheKey?: StringProp;
+
+   /** Set to `true` to disable batching of updates. */
+   immediate?: boolean;
+
+   /** Error handler callback. */
+   onError?: (error: Error, instance: Instance) => void;
+
+   /** Culture info to be used for formatting. */
+   culture?: CultureInfo;
+}
+
+// Legacy alias for backward compatibility
+export interface RestateProps extends RestateConfig {}
+
+export class Restate<Config extends RestateConfig = RestateConfig> extends PureContainerBase<Config> {
+   declare container: any;
+   declare privateDataSelector: any;
+   declare detached: boolean;
+   declare data?: any;
+   declare culture?: any;
+   declare options?: any;
+   declare onError?: (error: Error, instance: Instance) => void;
+   declare waitForIdle: boolean;
+   declare immediate: boolean;
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         deferredUntilIdle: undefined,
+         idleTimeout: undefined,
+         cacheKey: undefined,
+      });
+   }
+
+   init() {
+      this.container = PureContainer.create({
+         items: this.children || this.items,
+         layout: this.layout,
+         controller: this.controller,
+         outerLayout: this.outerLayout,
+         useParentLayout: !this.detached,
+         ws: this.ws,
+      });
+      this.privateDataSelector = new StructuredSelector({
+         props: this.data || {},
+         values: this.data,
+      });
+      this.items = [];
+      delete this.children;
+      delete this.controller;
+      delete this.outerLayout;
+      delete this.layout;
+      if (this.useParentLayout == null) this.useParentLayout = !this.detached;
+      super.init();
+   }
+
+   initSubStore(context: any, instance: any) {
+      let { cacheKey } = instance.data;
+      this.privateDataSelector.init(instance.store);
+      instance.subStore = new RestateStore({
+         store: instance.store,
+         detached: this.detached,
+         privateData: this.data || {},
+         data: cacheKey ? persistenceCache[cacheKey] || {} : {},
+         dataSelector: this.privateDataSelector.create(),
+         onSet: (path: string, value: any) => instance.nestedDataSet(path, value, this.data),
+      });
+
+      if (cacheKey) {
+         instance.subscribeOnDestroy(() => {
+            persistenceCache[cacheKey] = instance.subStore.getData();
+         });
+      }
+   }
+
+   applyParentStore(instance: any) {
+      if (instance.subStore) instance.subStore.setStore(instance.parentStore);
+   }
+
+   explore(context: any, instance: any) {
+      if (!instance.subStore) this.initSubStore(context, instance);
+      if (instance.subStore.parentDataCheck()) instance.markShouldUpdate();
+      instance.cultureInfo = this.culture ?? getCurrentCulture();
+      if (instance.cache("cultureInfo", instance.culture)) instance.markShouldUpdate();
+      super.explore(context, instance);
+   }
+
+   exploreItems(context: any, instance: any, items: any) {
+      if (!this.detached) {
+         instance.container = instance.getChild(context, this.container, "container", instance.subStore);
+         instance.container.scheduleExploreIfVisible(context);
+         instance.children = [instance.container];
+      }
+   }
+
+   render(context: any, instance: any, key: string) {
+      if (!this.detached) return instance.container.render(context);
+
+      return (
+         <Cx
+            key={key}
+            widget={this.container}
+            parentInstance={instance}
+            store={instance.subStore}
+            subscribe
+            options={this.options}
+            onError={this.onError}
+            deferredUntilIdle={instance.data.deferredUntilIdle}
+            idleTimeout={instance.data.idleTimeout}
+            immediate={this.immediate}
+            cultureInfo={instance.cultureInfo}
+         />
+      );
+   }
+}
+
+Restate.prototype.detached = false;
+Restate.prototype.waitForIdle = false;
+Restate.prototype.immediate = false;
+Restate.prototype.culture = null;
+
+export const PrivateStore = Restate;
+
+class RestateStore extends Store {
+   declare parentDataVersion: number;
+   declare parentData: any;
+   declare dataSelector: any;
+   declare privateData: any;
+   declare onSet: any;
+   declare detached: any;
+   declare store: View; // Parent store reference
+
+   constructor(config: any) {
+      super(config);
+      this.parentDataVersion = -1;
+   }
+
+   getData() {
+      this.silently(() => {
+         this.parentDataCheck();
+      });
+      return super.getData();
+   }
+
+   parentDataCheck() {
+      if (this.parentDataVersion == this.store.meta.version) return false;
+      this.parentDataVersion = this.store.meta.version;
+      this.parentData = this.dataSelector(this.store.getData());
+      return this.batch(() => {
+         for (let key in this.parentData) {
+            super.setItem(key, this.parentData[key]);
+         }
+      });
+   }
+
+   setItem(path: string, value: any) {
+      let binding = Binding.get(path);
+      let bindingRoot = binding.parts[0];
+      if (!isObject(this.privateData) || !this.privateData.hasOwnProperty(bindingRoot)) {
+         let changed = isUndefined(value) ? super.deleteItem(path) : super.setItem(path, value);
+         return changed;
+      }
+
+      let newValue = value;
+      if (binding.parts.length > 1) newValue = binding.set(this.getData(), value)[bindingRoot];
+      this.onSet(bindingRoot, newValue);
+      this.batch(() => {
+         super.setItem(bindingRoot, newValue);
+         this.parentDataCheck();
+      });
+      return true;
+   }
+
+   deleteItem(path: string) {
+      return this.setItem(path, undefined);
+   }
+
+   doNotify() {
+      if (!this.detached) this.store.notify(undefined!);
+      super.doNotify(undefined!);
+   }
+
+   // override the default implementation to avoid meta overwrites
+   setStore(store: any) {
+      this.store = store;
+   }
+}
diff --git a/packages/cx/src/ui/StaticText.d.ts b/packages/cx/src/ui/StaticText.d.ts
deleted file mode 100644
index 47dbebaa7..000000000
--- a/packages/cx/src/ui/StaticText.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as Cx from '../core';
-
-interface StaticTextProps extends Cx.WidgetProps {
-    text: string
-}
-
-export class StaticText extends Cx.Widget<StaticTextProps> {}
-
diff --git a/packages/cx/src/ui/StaticText.js b/packages/cx/src/ui/StaticText.js
deleted file mode 100644
index 9ae7f5f4c..000000000
--- a/packages/cx/src/ui/StaticText.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Widget} from './Widget';
-
-export class StaticText extends Widget {
-   render() {
-      return this.text;
-   }
-}
-
-Widget.alias('static-text', StaticText);
diff --git a/packages/cx/src/ui/StaticText.ts b/packages/cx/src/ui/StaticText.ts
new file mode 100644
index 000000000..d94c8a1a7
--- /dev/null
+++ b/packages/cx/src/ui/StaticText.ts
@@ -0,0 +1,11 @@
+import {Widget} from './Widget';
+
+export class StaticText extends Widget {
+   declare text?: string;
+
+   render() {
+      return this.text;
+   }
+}
+
+Widget.alias('static-text', StaticText);
diff --git a/packages/cx/src/ui/StructuredInstanceDataAccessor.d.ts b/packages/cx/src/ui/StructuredInstanceDataAccessor.d.ts
deleted file mode 100644
index 66e1d3cc5..000000000
--- a/packages/cx/src/ui/StructuredInstanceDataAccessor.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Instance } from "./Instance";
-
-export interface StructuredInstanceDataAccessorConfig {
-   data: Cx.StructuredProp;
-   instance: Instance;
-   useParentStore: boolean;
-}
-
-export class StructuredInstanceDataAccessor {
-   constructor(config: StructuredInstanceDataAccessorConfig);
-   getSelector(): (data: any) => any;
-   get(): any;
-   setItem(key, value);
-   containsKey(key): boolean;
-   getKeys(): string[];
-}
diff --git a/packages/cx/src/ui/StructuredInstanceDataAccessor.js b/packages/cx/src/ui/StructuredInstanceDataAccessor.js
deleted file mode 100644
index 9afd3fccf..000000000
--- a/packages/cx/src/ui/StructuredInstanceDataAccessor.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { getSelector } from "../data/getSelector";
-
-export class StructuredInstanceDataAccessor {
-   constructor(config) {
-      this.instance = config.instance;
-      this.dataConfig = config.data;
-      this.useParentStore = config.useParentStore;
-      this.dataSelector = getSelector(config.data);
-      if (this.dataSelector.memoize) this.dataSelector = this.dataSelector.memoize();
-   }
-   getSelector() {
-      return this.dataSelector;
-   }
-   get() {
-      return this.dataSelector.get(this.instance.store.getData());
-   }
-   setItem(key, value) {
-      this.instance.nestedDataSet(key, value, this.dataConfig, this.useParentStore);
-   }
-   containsKey(key) {
-      return this.dataConfig.hasOwnProperty(key);
-   }
-   getKeys() {
-      return Object.keys(this.dataConfig);
-   }
-}
diff --git a/packages/cx/src/ui/StructuredInstanceDataAccessor.ts b/packages/cx/src/ui/StructuredInstanceDataAccessor.ts
new file mode 100644
index 000000000..7057b43b3
--- /dev/null
+++ b/packages/cx/src/ui/StructuredInstanceDataAccessor.ts
@@ -0,0 +1,32 @@
+import { getSelector } from "../data/getSelector";
+import { StructuredDataAccessor } from "../data/NestedDataView";
+
+export class StructuredInstanceDataAccessor implements StructuredDataAccessor {
+   instance: any;
+   dataConfig: any;
+   useParentStore: any;
+   dataSelector: any;
+
+   constructor(config: any) {
+      this.instance = config.instance;
+      this.dataConfig = config.data;
+      this.useParentStore = config.useParentStore;
+      this.dataSelector = getSelector(config.data);
+      if (this.dataSelector.memoize) this.dataSelector = this.dataSelector.memoize();
+   }
+   getSelector() {
+      return this.dataSelector;
+   }
+   get() {
+      return this.dataSelector.get(this.instance.store.getData());
+   }
+   setItem(key: string, value: any): boolean {
+      return this.instance.nestedDataSet(key, value, this.dataConfig, this.useParentStore);
+   }
+   containsKey(key: string) {
+      return this.dataConfig.hasOwnProperty(key);
+   }
+   getKeys() {
+      return Object.keys(this.dataConfig);
+   }
+}
diff --git a/packages/cx/src/ui/Text.d.ts b/packages/cx/src/ui/Text.d.ts
deleted file mode 100644
index 54e54472b..000000000
--- a/packages/cx/src/ui/Text.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as Cx from '../core'
-
-interface TextProps extends Cx.WidgetProps {
-   value?: Cx.StringProp,
-   bind?: string,
-   tpl?: string,
-   expr?: string,
-}
-
-export class Text extends Cx.Widget<TextProps> { }
diff --git a/packages/cx/src/ui/Text.js b/packages/cx/src/ui/Text.js
deleted file mode 100644
index 0ba60cb03..000000000
--- a/packages/cx/src/ui/Text.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Widget } from './Widget';
-
-export class Text extends Widget {
-   init() {
-      if (!this.value && (this.tpl || this.expr || this.bind))
-         this.value = {
-            tpl: this.tpl,
-            expr: this.expr,
-            bind: this.bind
-         };
-      super.init();
-   }
-
-   declareData() {
-      super.declareData({
-         value: undefined
-      }, ...arguments);
-   }
-
-   render(context, { data }, key) {
-      return data.value != null ? data.value : '';
-   }
-}
-
-Widget.alias('text', Text)
diff --git a/packages/cx/src/ui/Text.ts b/packages/cx/src/ui/Text.ts
new file mode 100644
index 000000000..92edc7368
--- /dev/null
+++ b/packages/cx/src/ui/Text.ts
@@ -0,0 +1,49 @@
+import { Widget, WidgetConfig } from './Widget';
+import { StringProp } from './Prop';
+
+export interface TextConfig extends WidgetConfig {
+   /** The value to be rendered as text. */
+   value?: StringProp;
+
+   /** Template string for the text value. */
+   tpl?: string;
+
+   /** Expression for the text value. */
+   expr?: string;
+
+   /** Binding path for the text value. */
+   bind?: string;
+}
+
+export class Text extends Widget<TextConfig> {
+   declare value?: any;
+   declare tpl?: string;
+   declare expr?: any;
+   declare bind?: string;
+
+   constructor(config?: TextConfig) {
+      super(config);
+   }
+
+   init() {
+      if (!this.value && (this.tpl || this.expr || this.bind))
+         this.value = {
+            tpl: this.tpl,
+            expr: this.expr,
+            bind: this.bind
+         };
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      super.declareData({
+         value: undefined
+      }, ...args);
+   }
+
+   render(context: any, { data }: any, key: string) {
+      return data.value != null ? data.value : '';
+   }
+}
+
+Widget.alias('text', Text)
diff --git a/packages/cx/src/ui/VDOM.d.ts b/packages/cx/src/ui/VDOM.d.ts
deleted file mode 100644
index 1c4486629..000000000
--- a/packages/cx/src/ui/VDOM.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { HtmlElement, react } from "cx/widgets";
-import { ReactElement } from "react";
-export interface VDOM {
-   createElement(type, props, ...children);
-   allowRenderOutputCaching?: boolean;
-
-   DOM: {
-      render(reactElement: ReactElement, container: HtmlElement): void;
-      unmountComponentAtNode(container: HtmlElement): void;
-      createRoot?(container: HtmlElement): any;
-   };
-}
diff --git a/packages/cx/src/ui/VDOM.js b/packages/cx/src/ui/VDOM.js
deleted file mode 100644
index 6b385f75d..000000000
--- a/packages/cx/src/ui/VDOM.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import {VDOM as vdom} from 'cx-react';
-export const VDOM = vdom;
diff --git a/packages/cx/src/ui/VDOM.ts b/packages/cx/src/ui/VDOM.ts
new file mode 100644
index 000000000..76a17808d
--- /dev/null
+++ b/packages/cx/src/ui/VDOM.ts
@@ -0,0 +1 @@
+export { VDOM } from "cx-react";
diff --git a/packages/cx/src/ui/Widget.d.ts b/packages/cx/src/ui/Widget.d.ts
deleted file mode 100644
index 48e28904d..000000000
--- a/packages/cx/src/ui/Widget.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as Cx from '../core';
-
-export class Widget extends Cx.Widget<Cx.WidgetProps> {
-    static create(type: any, config?: any, more?: any): any;
-    static resetCounter() : void;
-}
-
-export function contentAppend(result, w, prependSpace?) : boolean;
-
-export function getContentArray(x) : any[];
-
-export function getContent(x) : null | any | any[];
-
-export { VDOM } from './VDOM';
diff --git a/packages/cx/src/ui/Widget.js b/packages/cx/src/ui/Widget.js
deleted file mode 100644
index bd92539f0..000000000
--- a/packages/cx/src/ui/Widget.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import { Component } from "../util/Component";
-import { CSSHelper } from "./CSSHelper";
-import "./CSS";
-import { StructuredSelector } from "../data/StructuredSelector";
-import { parseStyle } from "../util/parseStyle";
-import { isString } from "../util/isString";
-import { isDefined } from "../util/isDefined";
-import { isArray } from "../util/isArray";
-import { Console } from "../util/Console";
-
-import { VDOM as vdom } from "./VDOM";
-export const VDOM = vdom;
-
-let widgetId = 100;
-
-export class Widget extends Component {
-   constructor(config) {
-      super(config);
-      this.widgetId = widgetId++;
-
-      if (isArray(this.jsxSpread)) {
-         if (!this.jsxAttributes) this.jsxAttributes = [];
-
-         this.jsxSpread.forEach((spread) => {
-            for (var key in spread) {
-               this[key] = spread[key];
-               this.jsxAttributes.push(key);
-            }
-         });
-      }
-   }
-
-   init() {
-      if (this.styles) this.style = this.styles;
-
-      if (this.styled) this.style = parseStyle(this.style);
-      else if (this.style) {
-         Console.warn(
-            "Components that allow use of the style attribute should set styled = true on their prototype. This will be an error in future versions.",
-         );
-         this.style = parseStyle(this.style);
-         this.styled = true;
-      }
-
-      if (typeof this.if !== "undefined") this.visible = this.if;
-
-      this.declareData();
-
-      if (this.outerLayout) {
-         if (isArray(this.outerLayout)) throw new Error("Only single element outer layout is supported.");
-         //TODO: better handle the case when outer layout is an array. How to get around circular dependency to PureContainer
-         this.outerLayout = Widget.create(this.outerLayout);
-      }
-
-      if (this.contentFor) this.putInto = this.contentFor;
-
-      if (this.putInto) this.isContent = true;
-
-      if (isString(this.CSS)) this.CSS = CSSHelper.get(this.CSS);
-
-      this.initHelpers();
-      this.initComponents();
-
-      this.initialized = true;
-   }
-
-   initComponents() {
-      if (arguments.length > 0) {
-         this.components = Object.assign(...arguments);
-         for (var k in this.components) if (!this.components[k]) delete this.components[k];
-      }
-   }
-
-   initHelpers() {
-      if (arguments.length > 0) {
-         this.helpers = Object.assign(...arguments);
-      }
-   }
-
-   declareData() {
-      let options = {};
-
-      if (this.styled) options.class = options.className = options.style = { structured: true };
-
-      var props = {
-         visible: undefined,
-         mod: {
-            structured: true,
-         },
-         ...options,
-      };
-
-      Object.assign(props, ...arguments);
-      this.selector = new StructuredSelector({ props: props, values: this });
-      this.nameMap = this.selector.nameMap;
-   }
-
-   prepareCSS(context, { data }) {
-      data.classNames = this.CSS.expand(
-         this.CSS.block(this.baseClass, data.mod, data.stateMods),
-         data.class,
-         data.className,
-      );
-      data.style = parseStyle(data.style);
-   }
-
-   prepareData(context, instance) {
-      if (this.styled) this.prepareCSS(context, instance);
-   }
-
-   initInstance(context, instance) {}
-
-   initState(context, instance) {}
-
-   checkVisible(context, instance, data) {
-      return data.visible;
-   }
-
-   explore(context, instance) {
-      if (this.components) instance.components = {};
-      for (let cmp in this.components) {
-         let ins = instance.getChild(context, this.components[cmp], "cmp-" + cmp, instance.store);
-         if (ins.scheduleExploreIfVisible(context)) instance.components[cmp] = ins;
-      }
-   }
-
-   render(context, instance, key) {
-      Console.log(this);
-      throw new Error(
-         'Widget\'s render method should be overridden. This error usually happens if with incorrect imports, i.e. import { TextField } from "cx/data". Please check the console for details about the component configuration.',
-      );
-   }
-
-   update() {
-      this.version = (this.version || 0) + 1;
-   }
-
-   applyParentStore(instance) {
-      instance.store = instance.parentStore;
-
-      // check when this is actually needed, perhaps this is needed only for tables and repeated elements
-      // if (instance.cached) delete instance.cached.rawData; // force prepareData to execute again
-   }
-
-   static resetCounter() {
-      widgetId = 100;
-   }
-}
-
-Widget.prototype.visible = true;
-Widget.prototype.memoize = true; //cache rendered content and use it if possible
-Widget.prototype.CSS = "cx";
-Widget.prototype.styled = false;
-
-Widget.namespace = "ui.";
-Widget.optimizePrepare = true;
-
-Widget.factory = (type, config, more) => {
-   throw new Error(`Invalid widget type: ${type}.`);
-};
-
-export function contentAppend(result, w, prependSpace) {
-   if (w == null || w === false) return false;
-   if (isArray(w)) w.forEach((c) => contentAppend(result, c));
-   else if (isDefined(w.content) && !w.atomic) return contentAppend(result, w.content);
-   else {
-      if (prependSpace) result.push(" ");
-      result.push(w);
-   }
-   return true;
-}
-
-export function getContentArray(x) {
-   let result = [];
-   contentAppend(result, x);
-   return result;
-}
-
-export function getContent(x) {
-   let result = getContentArray(x);
-   if (result.length == 0) return null;
-   if (result.length == 1) return result[0];
-   return result;
-}
diff --git a/packages/cx/src/ui/Widget.spec.tsx b/packages/cx/src/ui/Widget.spec.tsx
new file mode 100644
index 000000000..decf62dc6
--- /dev/null
+++ b/packages/cx/src/ui/Widget.spec.tsx
@@ -0,0 +1,53 @@
+import { Controller, ControllerConfig } from "./Controller";
+import { ControllerProp } from "./Widget";
+import { validateConfig } from "../util/Component";
+import assert from "assert";
+
+describe("ControllerProp type safety", () => {
+   interface RequiredPropControllerConfig extends ControllerConfig {
+      multiplier: number;
+   }
+
+   class RequiredPropController extends Controller {
+      constructor(config?: RequiredPropControllerConfig) {
+         super(config);
+      }
+   }
+
+   interface StrictControllerConfig extends ControllerConfig {
+      validProp: number;
+   }
+
+   class StrictController extends Controller {
+      constructor(config?: StrictControllerConfig) {
+         super(config);
+      }
+   }
+
+   it.skip("rejects CreateConfig missing required properties", () => {
+      // @ts-expect-error - multiplier is required
+      const controller: ControllerProp = validateConfig({
+         type: RequiredPropController,
+      });
+      assert.ok(controller);
+   });
+
+   it("rejects CreateConfig with non-existing properties", () => {
+      const controller: ControllerProp = validateConfig({
+         type: StrictController,
+         validProp: 1,
+         // @ts-expect-error - nonExistingProp does not exist
+         nonExistingProp: "invalid",
+      });
+      assert.ok(controller);
+   });
+
+   it("rejects CreateConfig with wrong property type", () => {
+      const controller: ControllerProp = validateConfig({
+         type: StrictController,
+         // @ts-expect-error - validProp should be number, not string
+         validProp: "wrong type",
+      });
+      assert.ok(controller);
+   });
+});
diff --git a/packages/cx/src/ui/Widget.tsx b/packages/cx/src/ui/Widget.tsx
new file mode 100644
index 000000000..68b3564db
--- /dev/null
+++ b/packages/cx/src/ui/Widget.tsx
@@ -0,0 +1,301 @@
+import { StructuredSelector } from "../data/StructuredSelector";
+import { Component, CreateConfig } from "../util/Component";
+import { Console } from "../util/Console";
+import { isArray } from "../util/isArray";
+import { isDefined } from "../util/isDefined";
+import { isString } from "../util/isString";
+import { parseStyle } from "../util/parseStyle";
+import { CSS } from "./CSS";
+import { CSSHelper } from "./CSSHelper";
+import { RenderingContext } from "./RenderingContext";
+import type { Controller, ControllerConfig, ControllerFactory } from "./Controller";
+
+import { BooleanProp, ClassProp, ModProp, StyleProp } from "./Prop";
+import { Instance } from "./Instance";
+import { VDOM as vdom } from "./VDOM";
+
+export const VDOM = vdom;
+
+let widgetId = 100;
+
+// Controller property accepts: class, config object with type/$type, inline config, or factory function
+// ControllerConfig is intersected with { type?: never; $type?: never } to ensure objects with type/$type match CreateConfig
+export type ControllerProp =
+   | CreateConfig<typeof Controller>
+   | (ControllerConfig & { type?: never; $type?: never })
+   | ControllerFactory;
+
+export interface WidgetConfig {
+   /** Visibility of the widget. Defaults to `true`. */
+   visible?: BooleanProp;
+
+   /** Visibility of the widget. Defaults to `true`. */
+   if?: BooleanProp;
+
+   /** Outer (wrapper) layout used to display the widget in. */
+   outerLayout?: unknown;
+
+   /** Inner layout used to display children inside the widget. */
+   layout?: unknown;
+
+   /** Name of the ContentPlaceholder that should be used to display the widget. */
+   contentFor?: string;
+
+   /** Name of the ContentPlaceholder that should be used to display the widget. */
+   putInto?: string;
+
+   /** Key that will be used as the key when rendering the React component.  */
+   vdomKey?: string;
+
+   /** Controller. */
+   controller?: ControllerProp;
+
+   onInit?(context: RenderingContext): void;
+   onExplore?(context: RenderingContext, instance: Instance): void;
+   onPrepare?(context: RenderingContext, instance: Instance): void;
+   onCleanup?(context: RenderingContext, instance: Instance): void;
+   onDestroy?(instance: Instance): void;
+}
+
+/** Style-related config properties for widgets that support styling. */
+export interface WidgetStyleConfig {
+   /**
+    * Additional CSS classes to be applied to the element.
+    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+    */
+   class?: ClassProp;
+
+   /**
+    * Additional CSS classes to be applied to the element.
+    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+    */
+   className?: ClassProp;
+
+   /** Style object applied to the element. */
+   style?: StyleProp;
+
+   /** Style object applied to the element. */
+   styles?: StyleProp;
+
+   /** Base CSS class to be applied to the element. For example, value 'button' will add a class 'cxb-button' to the element. */
+   baseClass?: string;
+
+   /** Appearance modifier. For example, mod="big" will add the CSS class .cxm-big to the block element. */
+   mod?: ModProp;
+}
+
+export abstract class Widget<
+   Config extends WidgetConfig = WidgetConfig,
+   InstanceType extends Instance = Instance,
+> extends Component {
+   // config props
+   declare public vdomKey?: string | number;
+   declare public jsxSpread?: Record<string, any>[];
+   declare public jsxAttributes?: string[];
+   declare public styles?: any;
+   declare public style?: any;
+   declare public styled: boolean;
+   declare public if?: any;
+   declare public visible: boolean;
+   declare public outerLayout?: Widget;
+   declare public contentFor?: string;
+   declare public putInto?: string;
+   declare public isContent?: boolean;
+   declare public CSS: typeof CSS;
+   declare public baseClass?: string;
+   declare public memoize: boolean;
+   declare public controller?: Controller;
+   declare public isPureContainer?: boolean;
+   declare public useParentLayout?: boolean;
+
+   // runtime values
+   public widgetId?: number;
+   public initialized?: boolean;
+   public components?: Record<string, any>;
+   public helpers?: Record<string, any>;
+   public selector?: StructuredSelector;
+   public nameMap?: any;
+   public version?: number;
+
+   // Lifecycle hooks - callbacks that can be set in configuration
+   declare public onInit?: (context: RenderingContext, instance: Instance) => void;
+   declare public onExplore?: (context: RenderingContext, instance: Instance) => void;
+   declare public onPrepare?: (context: RenderingContext, instance: Instance) => void;
+   declare public onCleanup?: (context: RenderingContext, instance: Instance) => void;
+   declare public onDestroy?: (instance: Instance) => void;
+
+   // Lifecycle methods that can be overridden by subclasses
+   public exploreCleanup?(context: RenderingContext, instance: InstanceType): void;
+   public prepareCleanup?(context: RenderingContext, instance: InstanceType): void;
+   public cleanup?(context: RenderingContext, instance: InstanceType): void;
+   public prepare?(context: RenderingContext, instance: InstanceType): void;
+
+   public static optimizePrepare?: boolean;
+
+   constructor(config?: Config) {
+      super(config);
+      this.widgetId = widgetId++;
+
+      if (isArray(this.jsxSpread)) {
+         if (!this.jsxAttributes) this.jsxAttributes = [];
+
+         this.jsxSpread.forEach((spread: Record<string, any>) => {
+            for (const key in spread) {
+               (this as any)[key] = spread[key];
+               this.jsxAttributes!.push(key);
+            }
+         });
+      }
+   }
+
+   public init(): void {
+      if (this.styles) this.style = this.styles;
+
+      if (this.styled) this.style = parseStyle(this.style);
+
+      if (typeof this.if !== "undefined") this.visible = this.if;
+
+      this.declareData();
+
+      if (this.outerLayout) {
+         if (isArray(this.outerLayout)) throw new Error("Only single element outer layout is supported.");
+         //TODO: better handle the case when outer layout is an array. How to get around circular dependency to PureContainer
+         this.outerLayout = Widget.create(this.outerLayout, {});
+      }
+
+      if (this.contentFor) this.putInto = this.contentFor;
+
+      if (this.putInto) this.isContent = true;
+
+      if (isString(this.CSS)) this.CSS = CSSHelper.get(this.CSS);
+
+      this.initHelpers();
+      this.initComponents();
+
+      this.initialized = true;
+   }
+
+   protected initComponents(...args: Record<string, any>[]): void {
+      if (args.length > 0) {
+         this.components = Object.assign({}, ...args);
+         for (const k in this.components) {
+            if (!this.components[k]) delete this.components[k];
+         }
+      }
+   }
+
+   protected initHelpers(...args: Record<string, any>[]): void {
+      if (args.length > 0) {
+         this.helpers = Object.assign({}, ...args);
+      }
+   }
+
+   protected declareData(...args: Record<string, any>[]): void {
+      const options: Record<string, any> = {};
+
+      if (this.styled) {
+         options.class = options.className = options.style = { structured: true };
+      }
+
+      const props = {
+         visible: undefined,
+         mod: {
+            structured: true,
+         },
+         ...options,
+      };
+
+      Object.assign(props, ...args);
+      this.selector = new StructuredSelector({ props: props, values: this });
+      this.nameMap = this.selector.nameMap;
+   }
+
+   protected prepareCSS(_context: RenderingContext, { data }: any): void {
+      data.classNames = this.CSS.expand(
+         this.CSS.block(this.baseClass!, data.mod, data.stateMods),
+         data.class,
+         data.className,
+      );
+      data.style = parseStyle(data.style);
+   }
+
+   public prepareData(context: RenderingContext, instance: InstanceType): void {
+      if (this.styled) this.prepareCSS(context, instance);
+   }
+
+   public initInstance(_context: RenderingContext, _instance: InstanceType): void {}
+
+   public initState(_context: RenderingContext, _instance: InstanceType): void {}
+
+   public checkVisible(_context: RenderingContext, _instance: InstanceType, data: any): boolean {
+      return data.visible;
+   }
+
+   public explore(context: RenderingContext, instance: InstanceType, data?: any): void {
+      if (this.components) {
+         instance.components = {};
+         for (const cmp in this.components) {
+            const ins = instance.getChild(context, this.components[cmp], "cmp-" + cmp, instance.store);
+            if (ins.scheduleExploreIfVisible(context)) instance.components[cmp] = ins;
+         }
+      }
+   }
+
+   public render(context: RenderingContext, instance: InstanceType, key: string): any {
+      Console.log(this);
+      throw new Error(
+         'Widget\'s render method should be overridden. This error usually happens if with incorrect imports, i.e. import { TextField } from "cx/data". Please check the console for details about the component configuration.',
+      );
+   }
+
+   public update(): void {
+      this.version = (this.version || 0) + 1;
+   }
+
+   public applyParentStore(instance: any): void {
+      instance.store = instance.parentStore;
+
+      // check when this is actually needed, perhaps this is needed only for tables and repeated elements
+      // if (instance.cached) delete instance.cached.rawData; // force prepareData to execute again
+   }
+
+   public static resetCounter(): void {
+      widgetId = 100;
+   }
+}
+
+Widget.prototype.visible = true;
+Widget.prototype.memoize = true; //cache rendered content and use it if possible
+Widget.prototype.CSS = CSS;
+Widget.prototype.styled = false;
+
+Widget.namespace = "ui.";
+Widget.optimizePrepare = true;
+
+Widget.factory = (type: string, _config?: any, _more?: any) => {
+   throw new Error(`Invalid widget type: ${type}.`);
+};
+
+export function contentAppend(result: any[], w: any, prependSpace?: boolean): boolean {
+   if (w == null || w === false) return false;
+   if (isArray(w)) w.forEach((c: any) => contentAppend(result, c));
+   else if (isDefined(w.content) && !w.atomic) return contentAppend(result, w.content, false);
+   else {
+      if (prependSpace) result.push(" ");
+      result.push(w);
+   }
+   return true;
+}
+
+export function getContentArray(x: any): any[] {
+   let result: any[] = [];
+   contentAppend(result, x, false);
+   return result;
+}
+
+export function getContent(x: any): any {
+   let result = getContentArray(x);
+   if (result.length == 0) return null;
+   if (result.length == 1) return result[0];
+   return result;
+}
diff --git a/packages/cx/src/ui/ZIndexManager.d.ts b/packages/cx/src/ui/ZIndexManager.d.ts
deleted file mode 100644
index 48a580e89..000000000
--- a/packages/cx/src/ui/ZIndexManager.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as Cx from '../core';
-
-export class ZIndexManager {
-    static next() : number;
-
-    static reset(zIndex: number);
-}
diff --git a/packages/cx/src/ui/ZIndexManager.js b/packages/cx/src/ui/ZIndexManager.js
deleted file mode 100644
index 8f56b68f3..000000000
--- a/packages/cx/src/ui/ZIndexManager.js
+++ /dev/null
@@ -1,11 +0,0 @@
-let lastZIndex = 10000;
-
-export class ZIndexManager {
-   static next() {
-      return ++lastZIndex;
-   }
-
-   static reset(zIndex) {
-      lastZIndex = zIndex;
-   }
-}
diff --git a/packages/cx/src/ui/ZIndexManager.ts b/packages/cx/src/ui/ZIndexManager.ts
new file mode 100644
index 000000000..0c5a09e42
--- /dev/null
+++ b/packages/cx/src/ui/ZIndexManager.ts
@@ -0,0 +1,11 @@
+let lastZIndex = 10000;
+
+export class ZIndexManager {
+   static next() {
+      return ++lastZIndex;
+   }
+
+   static reset(zIndex: number) {
+      lastZIndex = zIndex;
+   }
+}
diff --git a/packages/cx/src/ui/adapter/ArrayAdapter.d.ts b/packages/cx/src/ui/adapter/ArrayAdapter.d.ts
deleted file mode 100644
index a6b3f25d8..000000000
--- a/packages/cx/src/ui/adapter/ArrayAdapter.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { AccessorChain, Prop } from "../../core";
-import { Accessor } from "../../data/getAccessor";
-import { DataAdapter } from "./DataAdapter";
-
-interface ArrayAdapterConfig {
-   immutable?: boolean;
-   sealed?: boolean;
-   recordsBinding?: Prop<any[]>;
-   recordsAccessor?: Accessor;
-   recordName: string | AccessorChain<any>;
-   indexName: string | AccessorChain<any>;
-   keyField?: string;
-}
-
-export class ArrayAdapter extends DataAdapter {
-   constructor(config: ArrayAdapterConfig);
-}
diff --git a/packages/cx/src/ui/adapter/ArrayAdapter.js b/packages/cx/src/ui/adapter/ArrayAdapter.js
deleted file mode 100644
index b43da7892..000000000
--- a/packages/cx/src/ui/adapter/ArrayAdapter.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import { DataAdapter } from "./DataAdapter";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { sorter } from "../../data/comparer";
-import { isArray } from "../../util/isArray";
-import { ArrayElementView } from "../../data/ArrayElementView";
-import { getAccessor } from "../../data/getAccessor";
-import { Culture } from "../Culture";
-import { isDefined, isObject } from "../../util";
-
-export class ArrayAdapter extends DataAdapter {
-   init() {
-      this.recordsAccessor = getAccessor(this.recordsBinding ? this.recordsBinding : this.recordsAccessor);
-
-      //resolve accessor chains
-      this.recordName = this.recordName.toString();
-      this.indexName = this.indexName.toString();
-   }
-
-   initInstance(context, instance) {
-      if (!instance.recordStoreCache) {
-         instance.recordStoreCache = new WeakMap();
-         instance.cacheByKey = {};
-      }
-
-      if (!instance.recordsAccessor && this.recordsAccessor) {
-         instance.recordsAccessor = this.recordsAccessor.bindInstance
-            ? this.recordsAccessor.bindInstance(instance)
-            : this.recordsAccessor;
-      }
-   }
-
-   getRecords(context, instance, records, parentStore) {
-      if (!instance.recordStoreCache) this.initInstance(context, instance);
-
-      return this.mapRecords(context, instance, records, parentStore, instance.recordsAccessor);
-   }
-
-   mapRecords(context, instance, records, parentStore, recordsAccessor) {
-      let result = [];
-
-      if (!instance.recordStoreCache) this.initInstance(context, instance);
-
-      if (isArray(records))
-         records.forEach((data, index) => {
-            if (this.filterFn && !this.filterFn(data)) return;
-
-            let record = this.mapRecord(context, instance, data, parentStore, recordsAccessor, index);
-
-            result.push(record);
-         });
-
-      if (this.sorter && !this.preserveOrder) result = this.sorter(result);
-
-      return result;
-   }
-
-   mapRecord(context, instance, data, parentStore, recordsAccessor, index) {
-      let key = this.cacheByKeyField && this.keyField ? data[this.keyField] : null;
-      let recordStore = key != null ? instance.cacheByKey[key] : instance.recordStoreCache.get(data);
-
-      if (recordsAccessor) {
-         if (!recordStore)
-            recordStore = new ArrayElementView({
-               store: parentStore,
-               arrayAccessor: recordsAccessor,
-               itemIndex: index,
-               recordAlias: this.recordName,
-               indexAlias: this.indexName,
-               immutable: this.immutable,
-               sealed: this.sealed,
-            });
-         else {
-            recordStore.setStore(parentStore);
-            recordStore.setIndex(index);
-         }
-      } else {
-         if (!recordStore)
-            recordStore = new ReadOnlyDataView({
-               store: parentStore,
-               data: {
-                  [this.recordName]: data,
-                  [this.indexName]: index,
-               },
-               immutable: this.immutable,
-               sealed: this.sealed,
-            });
-         else {
-            recordStore.setStore(parentStore);
-            recordStore.setData({
-               [this.recordName]: data,
-               [this.indexName]: index,
-            });
-         }
-      }
-
-      // cache by the key or by data reference
-      if (key != null) instance.cacheByKey[key] = recordStore;
-      else if (isObject(data)) instance.recordStoreCache.set(data, recordStore);
-
-      return {
-         store: recordStore,
-         index: index,
-         data: data,
-         type: "data",
-         key: this.keyField ? data[this.keyField] : index,
-      };
-   }
-
-   setFilter(filterFn) {
-      this.filterFn = filterFn;
-   }
-
-   getComparer(sortOptions) {
-      return sortOptions ? Culture.getComparer(sortOptions) : null;
-   }
-
-   buildSorter(sorters) {
-      if (isArray(sorters) && sorters.length > 0) {
-         let fieldValueMapper;
-         let dataAccessor;
-
-         //if all sorters are based on record fields access data directly (faster)
-         if (sorters.every((x) => x.field && x.value == null)) {
-            dataAccessor = (x) => x.data;
-            fieldValueMapper = (x) => ({ bind: x.field });
-         } else {
-            dataAccessor = (x) => x.store.getData();
-            fieldValueMapper = (x) => ({ bind: this.recordName + "." + x.field });
-         }
-         this.sorter = sorter(
-            sorters.map((x) => {
-               let s = Object.assign({}, x);
-               if (s.field && s.value == null) s.value = fieldValueMapper(s);
-               if (!s.comparer)
-                  s.comparer = this.getComparer(isDefined(s.sortOptions) ? s.sortOptions : this.sortOptions);
-               return s;
-            }),
-            dataAccessor,
-         );
-      } else {
-         this.sorter = null;
-      }
-   }
-
-   sort(sorters) {
-      this.buildSorter(sorters);
-   }
-}
-
-ArrayAdapter.prototype.immutable = false;
-ArrayAdapter.prototype.sealed = false;
-ArrayAdapter.prototype.keyField = null;
-ArrayAdapter.prototype.cacheByKeyField = true;
-
-ArrayAdapter.autoInit = true;
diff --git a/packages/cx/src/ui/adapter/ArrayAdapter.spec.js b/packages/cx/src/ui/adapter/ArrayAdapter.spec.js
deleted file mode 100644
index 0c12fd001..000000000
--- a/packages/cx/src/ui/adapter/ArrayAdapter.spec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { RenderingContext } from "../RenderingContext";
-import { Instance } from "../Instance";
-import { TreeAdapter } from "./TreeAdapter";
-import assert from "assert";
-import { Store } from "../../data";
-import { ArrayAdapter } from "./ArrayAdapter";
-
-describe("ArrayAdapter", () => {
-   it("maps data into records", () => {
-      let adapter = new ArrayAdapter();
-      let data = [
-         {
-            id: 1,
-            text: "1",
-         },
-         {
-            id: 2,
-            text: "2",
-         },
-      ];
-
-      let store = new Store();
-
-      let records = adapter.mapRecords(new RenderingContext(), new Instance(null, 1, null, store), data, store, null);
-
-      assert.equal(records.length, 2);
-      assert.equal(records[0].data, records[0].store.get("$record"));
-      assert.equal(records[1].data, records[1].store.get("$record"));
-   });
-
-   it("can sort data", () => {
-      let adapter = new ArrayAdapter();
-
-      adapter.sort([{ field: "id", direction: "DESC" }]);
-
-      let data = [
-         {
-            id: 1,
-            text: "1",
-         },
-         {
-            id: 2,
-            text: "2",
-         },
-      ];
-
-      let store = new Store();
-
-      let records = adapter.mapRecords(new RenderingContext(), new Instance(null, 1, null, store), data, store, null);
-
-      assert.equal(records.length, 2);
-      assert.equal(data[1], records[0].store.get("$record"));
-      assert.equal(data[0], records[1].store.get("$record"));
-   });
-});
diff --git a/packages/cx/src/ui/adapter/ArrayAdapter.spec.ts b/packages/cx/src/ui/adapter/ArrayAdapter.spec.ts
new file mode 100644
index 000000000..502dfe876
--- /dev/null
+++ b/packages/cx/src/ui/adapter/ArrayAdapter.spec.ts
@@ -0,0 +1,55 @@
+import { RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import { TreeAdapter } from "./TreeAdapter";
+import assert from "assert";
+import { Store } from "../../data";
+import { ArrayAdapter } from "./ArrayAdapter";
+
+describe("ArrayAdapter", () => {
+   it("maps data into records", () => {
+      let adapter = new ArrayAdapter();
+      let data = [
+         {
+            id: 1,
+            text: "1",
+         },
+         {
+            id: 2,
+            text: "2",
+         },
+      ];
+
+      let store = new Store();
+
+      let records = adapter.mapRecords(new RenderingContext(), new Instance(null!, "1", null!, store), data, store);
+
+      assert.equal(records.length, 2);
+      assert.equal(records[0].data, records[0].store.get("$record"));
+      assert.equal(records[1].data, records[1].store.get("$record"));
+   });
+
+   it("can sort data", () => {
+      let adapter = new ArrayAdapter();
+
+      adapter.sort([{ field: "id", direction: "DESC" }]);
+
+      let data = [
+         {
+            id: 1,
+            text: "1",
+         },
+         {
+            id: 2,
+            text: "2",
+         },
+      ];
+
+      let store = new Store();
+
+      let records = adapter.mapRecords(new RenderingContext(), new Instance(null!, "1", null!, store), data, store);
+
+      assert.equal(records.length, 2);
+      assert.equal(data[1], records[0].store.get("$record"));
+      assert.equal(data[0], records[1].store.get("$record"));
+   });
+});
diff --git a/packages/cx/src/ui/adapter/ArrayAdapter.ts b/packages/cx/src/ui/adapter/ArrayAdapter.ts
new file mode 100644
index 000000000..985a424b7
--- /dev/null
+++ b/packages/cx/src/ui/adapter/ArrayAdapter.ts
@@ -0,0 +1,229 @@
+import { DataAdapter, DataAdapterRecord, DataAdapterConfig } from "./DataAdapter";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { sorter } from "../../data/comparer";
+import { isArray } from "../../util/isArray";
+import { ArrayElementView } from "../../data/ArrayElementView";
+import { Accessor, getAccessor } from "../../data/getAccessor";
+import { Culture } from "../Culture";
+import { isDefined, isObject } from "../../util";
+import { RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import { View } from "../../data/View";
+import { Prop, Sorter, CollatorOptions } from "../Prop";
+
+export interface RecordStoreCache {
+   recordStoreCache: WeakMap<any, View>;
+   cacheByKey: Record<string | number, View>;
+   recordsAccessor?: Accessor;
+}
+
+export interface ArrayAdapterConfig extends DataAdapterConfig {
+   recordsBinding?: Prop<any[]>;
+   recordsAccessor?: Accessor | string;
+   keyField?: string;
+   cacheByKeyField?: boolean;
+   sortOptions?: CollatorOptions;
+   preserveOrder?: boolean;
+}
+
+export interface ExtendedSorter extends Sorter {
+   comparer?: (a: any, b: any) => number;
+   sortOptions?: CollatorOptions;
+}
+
+export interface ResolvedSorter {
+   getter: (x: any) => any;
+   factor: number;
+   compare: (a: any, b: any) => number;
+}
+
+export class ArrayAdapter<T = any> extends DataAdapter<T> {
+   declare public recordsAccessor: Accessor;
+   declare public recordsBinding?: Prop<T[]>;
+   declare public keyField: string | null;
+   declare public cacheByKeyField: boolean;
+   declare public sortOptions?: CollatorOptions;
+   declare public preserveOrder?: boolean;
+   declare isTreeAdapter: boolean;
+
+   declare protected sorter?: (data: DataAdapterRecord<T>[]) => DataAdapterRecord<T>[];
+
+   constructor(config?: ArrayAdapterConfig) {
+      super(config);
+   }
+
+   public init(): void {
+      this.recordsAccessor = getAccessor(this.recordsBinding ?? this.recordsAccessor);
+      this.recordName = this.recordName?.toString() || "$record";
+      this.indexName = this.indexName?.toString() || "$index";
+   }
+
+   public initInstance(context: RenderingContext, instance: Instance & Partial<RecordStoreCache>): void {
+      if (!instance.recordStoreCache) {
+         instance.recordStoreCache = new WeakMap();
+         instance.cacheByKey = {};
+      }
+
+      if (!instance.recordsAccessor && this.recordsAccessor) {
+         instance.recordsAccessor = this.recordsAccessor.bindInstance
+            ? this.recordsAccessor.bindInstance(instance)
+            : this.recordsAccessor;
+      }
+   }
+
+   public getRecords(
+      context: RenderingContext,
+      instance: Instance & Partial<RecordStoreCache>,
+      records: T[],
+      parentStore: View,
+   ): DataAdapterRecord<T>[] {
+      if (!instance.recordStoreCache) {
+         this.initInstance(context, instance);
+      }
+
+      return this.mapRecords(context, instance, records, parentStore, instance.recordsAccessor);
+   }
+
+   public mapRecords(
+      context: RenderingContext,
+      instance: Instance & Partial<RecordStoreCache>,
+      records: T[],
+      parentStore: View,
+      recordsAccessor?: Accessor,
+   ): DataAdapterRecord<T>[] {
+      let result: DataAdapterRecord<T>[] = [];
+
+      if (!instance.recordStoreCache) {
+         this.initInstance(context, instance);
+      }
+
+      if (isArray(records)) {
+         records.forEach((data, index) => {
+            if (this.filterFn && !this.filterFn(data)) return;
+
+            const record = this.mapRecord(context, instance, data, parentStore, recordsAccessor, index);
+            result.push(record);
+         });
+      }
+
+      if (this.sorter && !this.preserveOrder) {
+         result = this.sorter(result);
+      }
+
+      return result;
+   }
+
+   public mapRecord(
+      context: RenderingContext,
+      instance: Instance & Partial<RecordStoreCache>,
+      data: T,
+      parentStore: View,
+      recordsAccessor: Accessor | undefined,
+      index: number,
+   ): DataAdapterRecord<T> {
+      const key = this.cacheByKeyField && this.keyField && isObject(data) ? (data as any)[this.keyField] : null;
+      let recordStore = key != null ? instance.cacheByKey![key] : instance.recordStoreCache!.get(data);
+
+      if (recordsAccessor) {
+         if (!recordStore) {
+            recordStore = new ArrayElementView({
+               store: parentStore,
+               arrayAccessor: recordsAccessor,
+               itemIndex: index,
+               recordAlias: this.recordName,
+               indexAlias: this.indexName,
+               immutable: this.immutable,
+               sealed: this.sealed,
+            });
+         } else {
+            (recordStore as ArrayElementView).setStore(parentStore);
+            (recordStore as ArrayElementView).setIndex(index);
+         }
+      } else {
+         if (!recordStore) {
+            recordStore = new ReadOnlyDataView({
+               store: parentStore,
+               data: {
+                  [this.recordName]: data,
+                  [this.indexName]: index,
+               },
+               immutable: this.immutable,
+               sealed: this.sealed,
+            });
+         } else {
+            (recordStore as ReadOnlyDataView).setStore(parentStore);
+            (recordStore as ReadOnlyDataView).setData({
+               [this.recordName]: data,
+               [this.indexName]: index,
+            });
+         }
+      }
+
+      if (key != null) {
+         instance.cacheByKey![key] = recordStore;
+      } else if (isObject(data)) {
+         instance.recordStoreCache!.set(data, recordStore);
+      }
+
+      return {
+         store: recordStore,
+         index: index,
+         data: data,
+         type: "data",
+         key: this.keyField && isObject(data) ? (data as any)[this.keyField] : index,
+      };
+   }
+
+   public setFilter(filterFn?: (data: T) => boolean): void {
+      this.filterFn = filterFn;
+   }
+
+   public getComparer(sortOptions?: CollatorOptions): ((a: any, b: any) => number) | undefined {
+      return sortOptions ? Culture.getComparer(sortOptions) : undefined;
+   }
+
+   public buildSorter(sorters: ExtendedSorter[]): void {
+      if (isArray(sorters) && sorters.length > 0) {
+         let dataAccessor: (x: DataAdapterRecord<T>) => any;
+         let fieldValueMapper: (x: ExtendedSorter) => Prop<any>;
+
+         if (sorters.every((x) => x.field && x.value == null)) {
+            dataAccessor = (x) => x.data;
+            fieldValueMapper = (x) => ({ bind: x.field! });
+         } else {
+            dataAccessor = (x) => x.store.getData();
+            fieldValueMapper = (x) => ({ bind: this.recordName + "." + x.field });
+         }
+
+         this.sorter = sorter(
+            sorters.map((x) => {
+               const s: ExtendedSorter = Object.assign({}, x);
+               if (s.field && s.value == null) {
+                  s.value = fieldValueMapper(s);
+               }
+               if (!s.comparer) {
+                  s.comparer = this.getComparer(isDefined(s.sortOptions) ? s.sortOptions : this.sortOptions);
+               }
+               return s;
+            }),
+            dataAccessor,
+         );
+      } else {
+         this.sorter = undefined;
+      }
+   }
+
+   public sort(sorters?: Sorter[] | ExtendedSorter[]): void {
+      if (sorters) {
+         this.buildSorter(sorters as ExtendedSorter[]);
+      }
+   }
+}
+
+ArrayAdapter.prototype.immutable = false;
+ArrayAdapter.prototype.sealed = false;
+ArrayAdapter.prototype.keyField = null;
+ArrayAdapter.prototype.cacheByKeyField = true;
+ArrayAdapter.prototype.isTreeAdapter = false;
+
+ArrayAdapter.autoInit = true;
diff --git a/packages/cx/src/ui/adapter/DataAdapter.d.ts b/packages/cx/src/ui/adapter/DataAdapter.d.ts
deleted file mode 100644
index 9c40725a4..000000000
--- a/packages/cx/src/ui/adapter/DataAdapter.d.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as Cx from "../../core";
-import { Instance } from "../Instance";
-import { View } from "../../data/View";
-import { RenderingContext } from "../RenderingContext";
-
-export interface DataAdapterRecord<T> {
-   data: T;
-   index: number;
-   key: string | number;
-   store: View;
-   type: "data" | "group-header" | "group-footer";
-}
-
-export class DataAdapter<T = unknown> {
-   getRecords(
-      context?: RenderingContext,
-      instance?: Instance,
-      records?: T[],
-      parentStore?: View,
-   ): DataAdapterRecord<T>[];
-
-   setFilter(filterFn: (data: any) => boolean): void;
-
-   sort(sorters?: Cx.Sorter[]): void;
-
-   /** Indicate that data in the parent store should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that data in record stores should not be mutated. */
-   sealed?: boolean;
-}
diff --git a/packages/cx/src/ui/adapter/DataAdapter.js b/packages/cx/src/ui/adapter/DataAdapter.js
deleted file mode 100644
index 5357e9ed8..000000000
--- a/packages/cx/src/ui/adapter/DataAdapter.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component } from "../../util/Component";
-
-export class DataAdapter extends Component {
-   getRecords() {
-      throw new Error("Abstract method");
-   }
-
-   setFilter() {}
-
-   sort() {}
-}
-
-DataAdapter.prototype.recordName = "$record";
-DataAdapter.prototype.indexName = "$index";
-DataAdapter.prototype.immutable = false;
diff --git a/packages/cx/src/ui/adapter/DataAdapter.ts b/packages/cx/src/ui/adapter/DataAdapter.ts
new file mode 100644
index 000000000..68dfb175c
--- /dev/null
+++ b/packages/cx/src/ui/adapter/DataAdapter.ts
@@ -0,0 +1,52 @@
+import { Component } from "../../util/Component";
+import { Instance } from "../Instance";
+import { View } from "../../data/View";
+import { RenderingContext } from "../RenderingContext";
+import { Sorter } from "../Prop";
+
+export type DataAdapterRecordType = "data" | "group-header" | "group-footer";
+
+export interface DataAdapterRecord<T = any> {
+   data: T;
+   index?: number;
+   key: string;
+   store: View;
+   type?: DataAdapterRecordType;
+}
+
+export interface DataAdapterConfig {
+   recordName?: string;
+   indexName?: string;
+   immutable?: boolean;
+   sealed?: boolean;
+}
+
+export abstract class DataAdapter<T = any> extends Component {
+   declare public recordName: string;
+   declare public indexName: string;
+   declare public immutable: boolean;
+   declare public sealed?: boolean;
+
+   declare protected filterFn?: (data: T) => boolean;
+
+   constructor(config?: DataAdapterConfig) {
+      super(config);
+   }
+
+   public abstract getRecords(
+      context: RenderingContext,
+      instance: Instance,
+      records: T[],
+      parentStore: View,
+   ): DataAdapterRecord<T>[];
+
+   public setFilter(filterFn?: (data: T) => boolean): void {
+      this.filterFn = filterFn;
+   }
+
+   public sort(sorters?: Sorter[]): void {}
+}
+
+DataAdapter.prototype.recordName = "$record";
+DataAdapter.prototype.indexName = "$index";
+DataAdapter.prototype.immutable = false;
diff --git a/packages/cx/src/ui/adapter/GroupAdapter.d.ts b/packages/cx/src/ui/adapter/GroupAdapter.d.ts
deleted file mode 100644
index 67b8f2fb6..000000000
--- a/packages/cx/src/ui/adapter/GroupAdapter.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ArrayAdapter } from './ArrayAdapter';
-import { AccessorChain, Prop, CollatorOptions, StructuredProp } from "../../core";
-import { Accessor } from "../../data/getAccessor";
-
-interface GroupAdapterConfig {
-    immutable?: boolean;
-    sealed?: boolean;
-    recordsBinding?: Prop<any[]>;
-    recordsAccessor?: Accessor;
-    recordName: string | AccessorChain<any>;
-    indexName: string | AccessorChain<any>;
-    keyField?: string;
-    aggregates?: StructuredProp;
-    groupRecordsAlias?: string;
-    groupRecordsName?: string;
-    groupings?: any[] | null;
-    groupName?: string;
-    sortOptions?: CollatorOptions;
-}
-
-export class GroupAdapter extends ArrayAdapter {
-    constructor(config: GroupAdapterConfig);
-}
diff --git a/packages/cx/src/ui/adapter/GroupAdapter.js b/packages/cx/src/ui/adapter/GroupAdapter.js
deleted file mode 100644
index 70ad80d7c..000000000
--- a/packages/cx/src/ui/adapter/GroupAdapter.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import { ArrayAdapter } from "./ArrayAdapter";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { Grouper } from "../../data/Grouper";
-import { isArray } from "../../util/isArray";
-import { isDefined } from "../../util/isDefined";
-import { getComparer } from "../../data/comparer";
-import { Culture } from "../Culture";
-import { isObject } from "../../util/isObject";
-
-export class GroupAdapter extends ArrayAdapter {
-   init() {
-      super.init();
-
-      if (this.groupRecordsAlias) this.groupRecordsName = this.groupRecordsAlias;
-
-      if (this.groupings) this.groupBy(this.groupings);
-   }
-
-   getRecords(context, instance, records, parentStore) {
-      let result = super.getRecords(context, instance, records, parentStore);
-
-      if (this.groupings) {
-         let groupedResults = [];
-         this.processLevel([], result, groupedResults, parentStore);
-         result = groupedResults;
-      }
-
-      return result;
-   }
-
-   processLevel(keys, records, result, parentStore) {
-      let level = keys.length;
-      let inverseLevel = this.groupings.length - level;
-
-      if (inverseLevel == 0) {
-         if (this.preserveOrder && this.sorter) records = this.sorter(records);
-         for (let i = 0; i < records.length; i++) {
-            records[i].store.setStore(parentStore);
-            result.push(records[i]);
-         }
-         return;
-      }
-
-      let grouping = this.groupings[level];
-      let { grouper } = grouping;
-      grouper.reset();
-      grouper.processAll(records);
-      let results = grouper.getResults();
-
-      if (grouping.comparer && !this.preserveOrder) results.sort(grouping.comparer);
-
-      results.forEach((gr) => {
-         keys.push(gr.key);
-
-         let key = keys.map(serializeKey).join("|");
-
-         let $group = {
-            ...gr.key,
-            ...gr.aggregates,
-            $name: gr.name,
-            $level: inverseLevel,
-            $records: gr.records || [],
-            $key: key,
-         };
-
-         let data = {
-            [this.recordName]: gr.records.length > 0 ? gr.records[0].data : null,
-            [this.groupName]: $group,
-         };
-
-         let groupStore = new ReadOnlyDataView({
-            store: parentStore,
-            data,
-            immutable: this.immutable,
-         });
-
-         let group = {
-            key,
-            data,
-            group: $group,
-            grouping,
-            store: groupStore,
-            level: inverseLevel,
-         };
-
-         if (grouping.includeHeader !== false)
-            result.push({
-               ...group,
-               type: "group-header",
-               key: "header:" + group.key,
-            });
-
-         this.processLevel(keys, gr.records, result, groupStore);
-
-         if (grouping.includeFooter !== false)
-            result.push({
-               ...group,
-               type: "group-footer",
-               key: "footer:" + group.key,
-            });
-
-         keys.pop();
-      });
-   }
-
-   groupBy(groupings) {
-      if (!groupings) this.groupings = null;
-      else if (isArray(groupings)) {
-         this.groupings = groupings;
-         this.groupings.forEach((g) => {
-            let groupSorters = [];
-            let key = {};
-            for (let name in g.key) {
-               if (!g.key[name] || !isDefined(g.key[name].direction) || !isDefined(g.key[name].value))
-                  g.key[name] = { value: g.key[name], direction: "ASC" };
-               key[name] = g.key[name].value;
-               groupSorters.push({
-                  field: name,
-                  direction: g.key[name].direction,
-               });
-            }
-            g.grouper = new Grouper(key, { ...this.aggregates, ...g.aggregates }, (r) => r.store.getData(), g.text);
-            if (g.comparer == null && groupSorters.length > 0)
-               g.comparer = getComparer(
-                  groupSorters,
-                  (x) => x.key,
-                  this.sortOptions ? Culture.getComparer(this.sortOptions) : null,
-               );
-         });
-      } else throw new Error("Invalid grouping provided.");
-   }
-}
-
-GroupAdapter.prototype.groupName = "$group";
-GroupAdapter.prototype.preserveOrder = false;
-
-function serializeKey(data) {
-   if (isObject(data))
-      return Object.keys(data)
-         .map((k) => serializeKey(data[k]))
-         .join(":");
-   return data?.toString() ?? "";
-}
diff --git a/packages/cx/src/ui/adapter/GroupAdapter.ts b/packages/cx/src/ui/adapter/GroupAdapter.ts
new file mode 100644
index 000000000..9b8b0c43b
--- /dev/null
+++ b/packages/cx/src/ui/adapter/GroupAdapter.ts
@@ -0,0 +1,235 @@
+import { ArrayAdapter, ArrayAdapterConfig, RecordStoreCache } from "./ArrayAdapter";
+import { DataAdapterRecord } from "./DataAdapter";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { Grouper } from "../../data/Grouper";
+import { isArray } from "../../util/isArray";
+import { isDefined } from "../../util/isDefined";
+import { getComparer } from "../../data/comparer";
+import { Culture } from "../Culture";
+import { isObject } from "../../util/isObject";
+import { RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import { View } from "../../data/View";
+import { Prop, Sorter, SortDirection, StructuredProp } from "../Prop";
+import { isDataRecord } from "../../util";
+
+export interface GroupKey {
+   [field: string]: Prop<any> | { value: Prop<any>; direction: SortDirection };
+}
+
+export interface GroupingConfig {
+   key: GroupKey;
+   aggregates?: StructuredProp;
+   text?: Prop<string>;
+   includeHeader?: boolean;
+   includeFooter?: boolean;
+   comparer?: ((a: any, b: any) => number) | null;
+   header?: any;
+   footer?: any;
+}
+
+export interface ResolvedGrouping extends GroupingConfig {
+   grouper: Grouper;
+}
+
+export interface GroupData {
+   $name: string;
+   $level: number;
+   $records: DataAdapterRecord<any>[];
+   $key: string;
+   [key: string]: any;
+}
+
+export interface GroupAdapterRecord<T = any> extends DataAdapterRecord<T> {
+   group?: GroupData;
+   grouping?: ResolvedGrouping;
+   level?: number;
+}
+
+export interface GroupAdapterConfig extends ArrayAdapterConfig {
+   aggregates?: StructuredProp;
+   groupRecordsAlias?: string;
+   groupRecordsName?: string;
+   groupings?: GroupingConfig[] | null;
+   groupName?: string;
+}
+
+export class GroupAdapter<T = any> extends ArrayAdapter<T> {
+   declare public aggregates?: StructuredProp;
+   declare public groupRecordsAlias?: string;
+   declare public groupRecordsName?: string;
+   declare public groupings?: ResolvedGrouping[] | null;
+   declare public groupName: string;
+
+   constructor(config?: GroupAdapterConfig) {
+      super(config);
+   }
+
+   public init(): void {
+      super.init();
+
+      if (this.groupRecordsAlias) {
+         this.groupRecordsName = this.groupRecordsAlias;
+      }
+
+      if (this.groupings) {
+         this.groupBy(this.groupings);
+      }
+   }
+
+   public getRecords(
+      context: RenderingContext,
+      instance: Instance & Partial<RecordStoreCache>,
+      records: T[],
+      parentStore: View,
+   ): DataAdapterRecord<T>[] {
+      let result = super.getRecords(context, instance, records, parentStore);
+
+      if (this.groupings) {
+         const groupedResults: DataAdapterRecord<T>[] = [];
+         this.processLevel([], result, groupedResults, parentStore);
+         result = groupedResults;
+      }
+
+      return result;
+   }
+
+   protected processLevel(
+      keys: any[],
+      records: DataAdapterRecord<T>[],
+      result: DataAdapterRecord<T>[],
+      parentStore: View,
+   ): void {
+      const level = keys.length;
+      const inverseLevel = this.groupings!.length - level;
+
+      if (inverseLevel === 0) {
+         if (this.preserveOrder && this.sorter) records = this.sorter(records);
+         for (let i = 0; i < records.length; i++) {
+            (records[i].store as ReadOnlyDataView).setStore(parentStore);
+            result.push(records[i]);
+         }
+         return;
+      }
+
+      const grouping = this.groupings![level];
+      const { grouper } = grouping;
+      grouper.reset();
+      grouper.processAll(records);
+      let results = grouper.getResults();
+
+      if (grouping.comparer && !this.preserveOrder) {
+         results.sort(grouping.comparer);
+      }
+
+      results.forEach((gr) => {
+         keys.push(gr.key);
+
+         const key = keys.map(serializeKey).join("|");
+
+         const $group: GroupData = {
+            ...gr.key,
+            ...gr.aggregates,
+            $name: gr.name,
+            $level: inverseLevel,
+            $records: gr.records || [],
+            $key: key,
+         };
+
+         const data = {
+            [this.recordName]: gr.records.length > 0 ? gr.records[0].data : null,
+            [this.groupName]: $group,
+         };
+
+         const groupStore = new ReadOnlyDataView({
+            store: parentStore,
+            data,
+            immutable: this.immutable,
+         });
+
+         const group: GroupAdapterRecord<T> = {
+            key,
+            data: data as T,
+            group: $group,
+            grouping,
+            store: groupStore,
+            level: inverseLevel,
+         };
+
+         if (grouping.includeHeader !== false) {
+            result.push({
+               ...group,
+               type: "group-header",
+               key: "header:" + group.key,
+            });
+         }
+
+         this.processLevel(keys, gr.records, result, groupStore);
+
+         if (grouping.includeFooter !== false) {
+            result.push({
+               ...group,
+               type: "group-footer",
+               key: "footer:" + group.key,
+            });
+         }
+
+         keys.pop();
+      });
+   }
+
+   public groupBy(groupings: GroupingConfig[] | null): void {
+      if (!groupings) {
+         this.groupings = null;
+      } else if (isArray(groupings)) {
+         this.groupings = groupings as unknown as ResolvedGrouping[];
+         this.groupings.forEach((g) => {
+            const groupSorters: Sorter[] = [];
+            const key: Record<string, Prop<any>> = {};
+
+            for (const name in g.key) {
+               const keyConfig = g.key[name];
+               if (!keyConfig || typeof keyConfig !== "object" || !("value" in keyConfig)) {
+                  g.key[name] = { value: keyConfig as Prop<any>, direction: "ASC" };
+               }
+
+               const resolvedKey = g.key[name] as { value: Prop<any>; direction: SortDirection };
+               key[name] = resolvedKey.value;
+               groupSorters.push({
+                  field: name,
+                  direction: resolvedKey.direction,
+               });
+            }
+
+            g.grouper = new Grouper(
+               key,
+               { ...this.aggregates, ...g.aggregates },
+               (r: DataAdapterRecord<T>) => r.store.getData(),
+               g.text,
+            );
+
+            if (g.comparer == null && groupSorters.length > 0) {
+               g.comparer = getComparer(
+                  groupSorters,
+                  (x: any) => x.key,
+                  this.sortOptions ? Culture.getComparer(this.sortOptions) : undefined,
+               );
+            }
+         });
+      } else {
+         throw new Error("Invalid grouping provided.");
+      }
+   }
+}
+
+GroupAdapter.prototype.groupName = "$group";
+GroupAdapter.prototype.preserveOrder = false;
+
+function serializeKey(data: any): string {
+   if (isDataRecord(data)) {
+      return Object.keys(data)
+         .map((k) => serializeKey(data[k]))
+         .join(":");
+   }
+   return data?.toString() ?? "";
+}
diff --git a/packages/cx/src/ui/adapter/TreeAdapter.d.ts b/packages/cx/src/ui/adapter/TreeAdapter.d.ts
deleted file mode 100644
index 4873c4fb0..000000000
--- a/packages/cx/src/ui/adapter/TreeAdapter.d.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Prop, StringProp } from "../../core";
-import { ArrayAdapter } from "./ArrayAdapter";
-
-interface TreeAdapterConfig {
-   immutable?: boolean;
-   sealed?: boolean;
-   recordsBinding?: Prop<any[]>;
-   recordName?: StringProp;
-   indexName?: StringProp;
-   keyField?: string;
-   childrenField?: string;
-   expandedField?: string;
-   leafField?: string;
-   loadingField?: string;
-   loadedField?: string;
-   onLoadError?: (response: any) => void;
-   foldersFirst?: boolean;
-   hideRootNodes?: boolean;
-   restoreExpandedNodesOnLoad?: boolean;
-}
-
-export class TreeAdapter extends ArrayAdapter {
-   constructor(config: TreeAdapterConfig);
-}
diff --git a/packages/cx/src/ui/adapter/TreeAdapter.js b/packages/cx/src/ui/adapter/TreeAdapter.js
deleted file mode 100644
index b03f1bd48..000000000
--- a/packages/cx/src/ui/adapter/TreeAdapter.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { getAccessor } from "../../data/getAccessor";
-import { isArray } from "../../util/isArray";
-import { ArrayAdapter } from "./ArrayAdapter";
-
-export class TreeAdapter extends ArrayAdapter {
-   init() {
-      super.init();
-      this.childrenAccessor = getAccessor({ bind: `${this.recordName}.${this.childrenField}` });
-
-      if (this.restoreExpandedNodesOnLoad) {
-         if (!this.keyField)
-            throw new Error(
-               "Stateful tree adapter requires keyField property to be specified on either Grid or data adapter.",
-            );
-
-         this.expandedState = {
-            next: new Set(),
-         };
-      }
-   }
-
-   mapRecords(context, instance, data, parentStore, recordsAccessor) {
-      let nodes = super.mapRecords(context, instance, data, parentStore, recordsAccessor);
-      let result = [];
-
-      if (this.restoreExpandedNodesOnLoad) {
-         this.expandedState = {
-            current: this.expandedState.next,
-            next: new Set(),
-         };
-      }
-
-      this.processList(context, instance, 0, "", nodes, result);
-
-      return result;
-   }
-
-   processList(context, instance, level, parentKey, nodes, result) {
-      nodes.forEach((record) => {
-         record.key = parentKey + record.key;
-         this.processNode(context, instance, level, result, record);
-      });
-   }
-
-   processNode(context, instance, level, result, record) {
-      let isHiddenRootNode = level == 0 && this.hideRootNodes;
-      if (!isHiddenRootNode) result.push(record);
-      let { data, store } = record;
-      data.$level = this.hideRootNodes ? level - 1 : level;
-      if (!data[this.leafField]) {
-         if (this.restoreExpandedNodesOnLoad && data[this.expandedField] == null)
-            data[this.expandedField] = this.expandedState.current.has(data[this.keyField]);
-
-         if (data[this.expandedField] || isHiddenRootNode) {
-            if (this.restoreExpandedNodesOnLoad) this.expandedState.next.add(data[this.keyField]);
-
-            if (data[this.childrenField]) {
-               let childNodes = super.mapRecords(
-                  context,
-                  instance,
-                  data[this.childrenField],
-                  store,
-                  this.childrenAccessor,
-               );
-               this.processList(context, instance, level + 1, record.key + ":", childNodes, result);
-            } else if (this.load && !data[this.loadedField] && !data[this.loadingField]) {
-               store.set(`${this.recordName}.${this.loadingField}`, true);
-               let response = this.load(context, instance, data);
-               Promise.resolve(response)
-                  .then((children) => {
-                     store.set(`${this.recordName}.${this.childrenField}`, children);
-                     store.set(`${this.recordName}.${this.loadedField}`, true);
-                     store.set(`${this.recordName}.${this.loadingField}`, false);
-                  })
-                  .catch((response) => {
-                     store.set(`${this.recordName}.${this.loadingField}`, false);
-                     if (this.onLoadError) this.onLoadError(response);
-                  });
-            }
-         } else data[this.expandedField] = false;
-      }
-   }
-
-   sort(sorters) {
-      if (this.foldersFirst) {
-         if (!sorters || !isArray(sorters)) sorters = [];
-         sorters = [{ field: this.leafField, direction: "ASC" }, ...sorters];
-      }
-      super.sort(sorters);
-   }
-}
-
-TreeAdapter.prototype.childrenField = "$children";
-TreeAdapter.prototype.expandedField = "$expanded";
-TreeAdapter.prototype.leafField = "$leaf";
-TreeAdapter.prototype.loadingField = "$loading";
-TreeAdapter.prototype.loadedField = "$loaded";
-TreeAdapter.prototype.foldersFirst = true;
-TreeAdapter.prototype.isTreeAdapter = true;
-TreeAdapter.prototype.hideRootNodes = false;
-TreeAdapter.prototype.cacheByKeyField = false;
diff --git a/packages/cx/src/ui/adapter/TreeAdapter.spec.js b/packages/cx/src/ui/adapter/TreeAdapter.spec.js
deleted file mode 100644
index 47365e664..000000000
--- a/packages/cx/src/ui/adapter/TreeAdapter.spec.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { RenderingContext } from '../RenderingContext';
-import { Instance } from '../Instance';
-import { TreeAdapter } from './TreeAdapter';
-import assert from "assert";
-import { Store } from '../../data';
-
-describe('TreeAdapter', () => {
-
-   it('properly expands records', () => {
-
-      let tree = new TreeAdapter({
-         childrenField: 'children',
-         expandedField: 'expanded'
-      });
-
-      let data = [{
-         id: 1,
-         text: '1',
-         expanded: false,
-         children: [{
-            id: 4,
-            text: '4'
-         }]
-      }, {
-         id: 2,
-         text: '2',
-         expanded: true,
-         children: [{
-            id: 3,
-            text: '3',
-            expanded: true,
-            children: [{
-               id: 5,
-               text: '5',
-               expanded: true,
-               children: [{
-                  id: 6,
-                  text: '6',
-               }]
-            }]
-         }]
-      }, {
-         id: 7,
-         text: '7',
-         expanded: false
-      }]
-
-      let store = new Store();
-
-      let records = tree.mapRecords(new RenderingContext(), new Instance(null, 1, null, store), data, store, null);
-
-      assert.equal(records.length, 6);
-      assert.equal(records[0].data.id, 1);
-      assert.equal(records[1].data.id, 2);
-      assert.equal(records[2].data.id, 3);
-      assert.equal(records[3].data.id, 5);
-      assert.equal(records[4].data.id, 6);
-      assert.equal(records[5].data.id, 7);
-      assert.equal(records[5].store.get('$record.id'), 7);
-      assert.equal(records[2].store.get('$record.id'), 3);
-      assert.equal(records[3].store.get('$record.id'), 5);
-      assert.equal(records[2].store.get('$record.id'), 3);
-      assert.equal(records[0].store.get('$record.id'), 1);
-      assert.equal(records[1].store.get('$record.id'), 2);
-   });
-});
-
diff --git a/packages/cx/src/ui/adapter/TreeAdapter.spec.ts b/packages/cx/src/ui/adapter/TreeAdapter.spec.ts
new file mode 100644
index 000000000..bffab0a4e
--- /dev/null
+++ b/packages/cx/src/ui/adapter/TreeAdapter.spec.ts
@@ -0,0 +1,76 @@
+import { RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import { TreeAdapter } from "./TreeAdapter";
+import assert from "assert";
+import { Store } from "../../data";
+
+describe("TreeAdapter", () => {
+   it("properly expands records", () => {
+      let tree = new TreeAdapter({
+         childrenField: "children",
+         expandedField: "expanded",
+      });
+
+      let data = [
+         {
+            id: 1,
+            text: "1",
+            expanded: false,
+            children: [
+               {
+                  id: 4,
+                  text: "4",
+               },
+            ],
+         },
+         {
+            id: 2,
+            text: "2",
+            expanded: true,
+            children: [
+               {
+                  id: 3,
+                  text: "3",
+                  expanded: true,
+                  children: [
+                     {
+                        id: 5,
+                        text: "5",
+                        expanded: true,
+                        children: [
+                           {
+                              id: 6,
+                              text: "6",
+                           },
+                        ],
+                     },
+                  ],
+               },
+            ],
+         },
+         {
+            id: 7,
+            text: "7",
+            expanded: false,
+         },
+      ];
+
+      let store = new Store();
+
+      let records = tree.mapRecords(new RenderingContext(), new Instance(null!, "1", null!, store), data, store);
+
+      assert.equal(records.length, 6);
+      assert.equal(records[0].data.id, 1);
+      assert.equal(records[1].data.id, 2);
+      assert.equal(records[2].data.id, 3);
+      assert.equal(records[3].data.id, 5);
+      assert.equal(records[4].data.id, 6);
+      assert.equal(records[5].data.id, 7);
+      assert.equal(records[5].store.get("$record.id"), 7);
+      assert.equal(records[2].store.get("$record.id"), 3);
+      assert.equal(records[3].store.get("$record.id"), 5);
+      assert.equal(records[2].store.get("$record.id"), 3);
+      assert.equal(records[0].store.get("$record.id"), 1);
+      assert.equal(records[1].store.get("$record.id"), 2);
+   });
+});
diff --git a/packages/cx/src/ui/adapter/TreeAdapter.ts b/packages/cx/src/ui/adapter/TreeAdapter.ts
new file mode 100644
index 000000000..33bead00e
--- /dev/null
+++ b/packages/cx/src/ui/adapter/TreeAdapter.ts
@@ -0,0 +1,185 @@
+import { Accessor, getAccessor } from "../../data/getAccessor";
+import { isArray } from "../../util/isArray";
+import { ArrayAdapter, ArrayAdapterConfig, RecordStoreCache } from "./ArrayAdapter";
+import { DataAdapterRecord } from "./DataAdapter";
+import { RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import { View } from "../../data/View";
+import { Sorter } from "../Prop";
+
+export interface TreeNode {
+   $level?: number;
+   $expanded?: boolean;
+   $leaf?: boolean;
+   $loading?: boolean;
+   $loaded?: boolean;
+   [key: string]: any;
+}
+
+export interface ExpandedState {
+   current?: Set<string | number>;
+   next: Set<string | number>;
+}
+
+export interface TreeAdapterConfig extends ArrayAdapterConfig {
+   childrenField?: string;
+   expandedField?: string;
+   leafField?: string;
+   loadingField?: string;
+   loadedField?: string;
+   onLoadError?: (response: any) => void;
+   foldersFirst?: boolean;
+   hideRootNodes?: boolean;
+   restoreExpandedNodesOnLoad?: boolean;
+   load?: (context: RenderingContext, instance: Instance, data: TreeNode) => Promise<any[]> | any[];
+}
+
+export class TreeAdapter<T extends TreeNode = TreeNode> extends ArrayAdapter<T> {
+   declare public childrenField: string;
+   declare public expandedField: string;
+   declare public leafField: string;
+   declare public loadingField: string;
+   declare public loadedField: string;
+   declare public onLoadError?: (response: any) => void;
+   declare public foldersFirst: boolean;
+   declare public hideRootNodes: boolean;
+   declare public restoreExpandedNodesOnLoad?: boolean;
+   declare public load?: (context: RenderingContext, instance: Instance, data: T) => Promise<any[]> | any[];
+
+   declare protected childrenAccessor?: Accessor;
+   declare protected expandedState?: ExpandedState;
+
+   constructor(config?: TreeAdapterConfig) {
+      super(config);
+   }
+
+   public init(): void {
+      super.init();
+      this.childrenAccessor = getAccessor({ bind: `${this.recordName}.${this.childrenField}` });
+
+      if (this.restoreExpandedNodesOnLoad) {
+         if (!this.keyField) {
+            throw new Error(
+               "Stateful tree adapter requires keyField property to be specified on either Grid or data adapter.",
+            );
+         }
+
+         this.expandedState = {
+            next: new Set(),
+         };
+      }
+   }
+
+   public mapRecords(
+      context: RenderingContext,
+      instance: Instance & Partial<RecordStoreCache>,
+      data: T[],
+      parentStore: View,
+      recordsAccessor?: Accessor,
+   ): DataAdapterRecord<T>[] {
+      const nodes = super.mapRecords(context, instance, data, parentStore, recordsAccessor);
+      const result: DataAdapterRecord<T>[] = [];
+
+      if (this.restoreExpandedNodesOnLoad) {
+         this.expandedState = {
+            current: this.expandedState!.next,
+            next: new Set(),
+         };
+      }
+
+      this.processList(context, instance, 0, "", nodes, result);
+
+      return result;
+   }
+
+   protected processList(
+      context: RenderingContext,
+      instance: Instance & Partial<RecordStoreCache>,
+      level: number,
+      parentKey: string,
+      nodes: DataAdapterRecord<T>[],
+      result: DataAdapterRecord<T>[],
+   ): void {
+      nodes.forEach((record) => {
+         record.key = parentKey + record.key;
+         this.processNode(context, instance, level, result, record);
+      });
+   }
+
+   protected processNode(
+      context: RenderingContext,
+      instance: Instance & Partial<RecordStoreCache>,
+      level: number,
+      result: DataAdapterRecord<T>[],
+      record: DataAdapterRecord<T>,
+   ): void {
+      const isHiddenRootNode = level === 0 && this.hideRootNodes;
+      if (!isHiddenRootNode) {
+         result.push(record);
+      }
+
+      const { data, store } = record;
+      const dataRecord = data as any;
+      dataRecord.$level = this.hideRootNodes ? level - 1 : level;
+
+      if (!dataRecord[this.leafField]) {
+         if (this.restoreExpandedNodesOnLoad && dataRecord[this.expandedField] == null) {
+            dataRecord[this.expandedField] = this.expandedState!.current!.has(dataRecord[this.keyField!]);
+         }
+
+         if (dataRecord[this.expandedField] || isHiddenRootNode) {
+            if (this.restoreExpandedNodesOnLoad) {
+               this.expandedState!.next.add(dataRecord[this.keyField!]);
+            }
+
+            if (dataRecord[this.childrenField]) {
+               const childNodes = super.mapRecords(
+                  context,
+                  instance,
+                  dataRecord[this.childrenField],
+                  store,
+                  this.childrenAccessor,
+               );
+               this.processList(context, instance, level + 1, record.key + ":", childNodes, result);
+            } else if (this.load && !dataRecord[this.loadedField] && !dataRecord[this.loadingField]) {
+               store.set(`${this.recordName}.${this.loadingField}`, true);
+               const response = this.load(context, instance, data);
+               Promise.resolve(response)
+                  .then((children) => {
+                     store.set(`${this.recordName}.${this.childrenField}`, children);
+                     store.set(`${this.recordName}.${this.loadedField}`, true);
+                     store.set(`${this.recordName}.${this.loadingField}`, false);
+                  })
+                  .catch((response) => {
+                     store.set(`${this.recordName}.${this.loadingField}`, false);
+                     if (this.onLoadError) {
+                        this.onLoadError(response);
+                     }
+                  });
+            }
+         } else {
+            dataRecord[this.expandedField] = false;
+         }
+      }
+   }
+
+   public sort(sorters?: Sorter[]): void {
+      if (this.foldersFirst) {
+         if (!sorters || !isArray(sorters)) {
+            sorters = [];
+         }
+         sorters = [{ field: this.leafField, direction: "ASC" }, ...sorters];
+      }
+      super.sort(sorters);
+   }
+}
+
+TreeAdapter.prototype.childrenField = "$children";
+TreeAdapter.prototype.expandedField = "$expanded";
+TreeAdapter.prototype.leafField = "$leaf";
+TreeAdapter.prototype.loadingField = "$loading";
+TreeAdapter.prototype.loadedField = "$loaded";
+TreeAdapter.prototype.foldersFirst = true;
+TreeAdapter.prototype.isTreeAdapter = true;
+TreeAdapter.prototype.hideRootNodes = false;
+TreeAdapter.prototype.cacheByKeyField = false;
diff --git a/packages/cx/src/ui/adapter/index.js b/packages/cx/src/ui/adapter/index.js
deleted file mode 100644
index b06ae35a1..000000000
--- a/packages/cx/src/ui/adapter/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './DataAdapter';
-export * from './ArrayAdapter';
-export * from './GroupAdapter';
-export * from './TreeAdapter';
diff --git a/packages/cx/src/ui/adapter/index.d.ts b/packages/cx/src/ui/adapter/index.ts
similarity index 100%
rename from packages/cx/src/ui/adapter/index.d.ts
rename to packages/cx/src/ui/adapter/index.ts
diff --git a/packages/cx/src/ui/app/History.d.ts b/packages/cx/src/ui/app/History.d.ts
deleted file mode 100644
index 31e22e9ec..000000000
--- a/packages/cx/src/ui/app/History.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { View } from "./../../data/View";
-
-export class History {
-   static connect(store: View, urlBinding: string, hashBinding?: string);
-
-   static pushState(state, title, url: string);
-
-   static replaceState(state, title, url: string);
-
-   static subscribe(callback: (url?: string, op?: "pushState" | "replaceState") => void): () => void;
-
-   static reloadOnNextChange();
-
-   static addNavigateConfirmation(callback: (url?: string) => boolean | Promise<boolean>, executeOnlyOnce?: boolean);
-
-   static confirm(continueCallback: () => void, state: any);
-}
diff --git a/packages/cx/src/ui/app/History.js b/packages/cx/src/ui/app/History.js
deleted file mode 100644
index 12dc5779f..000000000
--- a/packages/cx/src/ui/app/History.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Url } from "./Url";
-import { batchUpdatesAndNotify } from "../batchUpdates";
-import { SubscriberList } from "../../util/SubscriberList";
-
-let last = 0,
-   next = 1,
-   transitions = {},
-   subscribers = null,
-   reload = false,
-   navigateConfirmationCallback = null,
-   permanentNavigateConfirmation = false;
-
-export class History {
-   static connect(store, urlBinding, hashBinding) {
-      this.store = store;
-      this.urlBinding = urlBinding;
-      this.hashBinding = hashBinding;
-      this.updateStore();
-      window.onpopstate = () => {
-         this.updateStore();
-      };
-   }
-
-   static pushState(state, title, url) {
-      return this.confirmAndNavigate(state, title, url);
-   }
-
-   static replaceState(state, title, url) {
-      return this.navigate(state, title, url, true);
-   }
-
-   static reloadOnNextChange() {
-      reload = true;
-   }
-
-   static addNavigateConfirmation(callback, permanent = false) {
-      navigateConfirmationCallback = callback;
-      permanentNavigateConfirmation = permanent;
-   }
-
-   static confirm(continueCallback, state) {
-      if (!navigateConfirmationCallback) return continueCallback();
-
-      let result = navigateConfirmationCallback(state);
-      Promise.resolve(result).then((value) => {
-         if (value) {
-            if (!permanentNavigateConfirmation) navigateConfirmationCallback = null;
-            continueCallback();
-         }
-      });
-
-      return false;
-   }
-
-   static confirmAndNavigate(state, title, url, replace) {
-      return this.confirm(() => this.navigate(state, title, url, replace), url);
-   }
-
-   static navigate(state, title, url, replace = false) {
-      url = Url.resolve(url);
-
-      if (!window.history.pushState || reload) {
-         window.location[replace ? "replace" : "assign"](url);
-         return true;
-      }
-
-      let transition,
-         changed = false;
-      batchUpdatesAndNotify(
-         () => {
-            changed = this.updateStore(url);
-            if (changed)
-               transitions[++last] = transition = {
-                  url,
-                  state,
-                  title,
-                  replace,
-               };
-         },
-         () => {
-            if (transition) transition.completed = true;
-
-            //update history once the page is rendered and the title is set
-            while (transitions[next] && transitions[next].completed) {
-               let tr = transitions[next];
-               delete transitions[next];
-               next++;
-               let op = tr.replace ? "replaceState" : "pushState";
-               window.history[op](tr.state, tr.title, tr.url);
-               if (subscribers) subscribers.notify(tr.url, op);
-            }
-         }
-      );
-
-      return changed;
-   }
-
-   static updateStore(href) {
-      let url = Url.unresolve(href || document.location.href),
-         hash = null;
-      let hashIndex = url.indexOf("#");
-      if (hashIndex !== -1) {
-         hash = url.substring(hashIndex);
-         url = url.substring(0, hashIndex);
-      }
-      if (this.hashBinding) this.store.set(this.hashBinding, hash);
-      return this.store.set(this.urlBinding, url);
-   }
-
-   static subscribe(callback) {
-      if (!subscribers) subscribers = new SubscriberList();
-      return subscribers.subscribe(callback);
-   }
-}
diff --git a/packages/cx/src/ui/app/History.ts b/packages/cx/src/ui/app/History.ts
new file mode 100644
index 000000000..8179bceb5
--- /dev/null
+++ b/packages/cx/src/ui/app/History.ts
@@ -0,0 +1,133 @@
+import { Url } from "./Url";
+import { batchUpdatesAndNotify } from "../batchUpdates";
+import { SubscriberList } from "../../util/SubscriberList";
+import { View } from "../../data/View";
+
+interface Transition {
+   url: string;
+   state: any;
+   title: string | null;
+   replace: boolean;
+   completed?: boolean;
+}
+
+type NavigateConfirmationCallback = (state: any) => boolean | Promise<boolean>;
+
+let last = 0;
+let next = 1;
+let transitions: Record<number, Transition> = {};
+let subscribers: SubscriberList | null = null;
+let reload = false;
+let navigateConfirmationCallback: NavigateConfirmationCallback | null = null;
+let permanentNavigateConfirmation = false;
+
+export class History {
+   static store: View;
+   static urlBinding: string;
+   static hashBinding?: string;
+
+   static connect(store: View, urlBinding: string, hashBinding?: string): void {
+      this.store = store;
+      this.urlBinding = urlBinding;
+      this.hashBinding = hashBinding;
+      this.updateStore();
+      window.onpopstate = () => {
+         this.updateStore();
+      };
+   }
+
+   static pushState(state: any, title: string | null, url: string): boolean {
+      return this.confirmAndNavigate(state, title, url);
+   }
+
+   static replaceState(state: any, title: string | null, url: string): boolean {
+      return this.navigate(state, title, url, true);
+   }
+
+   static reloadOnNextChange(): void {
+      reload = true;
+   }
+
+   static addNavigateConfirmation(callback: NavigateConfirmationCallback, permanent = false): void {
+      navigateConfirmationCallback = callback;
+      permanentNavigateConfirmation = permanent;
+   }
+
+   static confirm(continueCallback: () => boolean, state: any): boolean {
+      if (!navigateConfirmationCallback) return continueCallback();
+
+      let result = navigateConfirmationCallback(state);
+      Promise.resolve(result).then((value) => {
+         if (value) {
+            if (!permanentNavigateConfirmation) navigateConfirmationCallback = null;
+            continueCallback();
+         }
+      });
+
+      return false;
+   }
+
+   static confirmAndNavigate(state: any, title: string | null, url: string, replace?: boolean): boolean {
+      return this.confirm(() => this.navigate(state, title, url, replace), url);
+   }
+
+   static navigate(state: any, title: string | null, url: string, replace = false): boolean {
+      url = Url.resolve(url);
+
+      if (!window.history.pushState || reload) {
+         window.location[replace ? "replace" : "assign"](url);
+         return true;
+      }
+
+      let transition: Transition | undefined;
+      let changed = false;
+      batchUpdatesAndNotify(
+         () => {
+            changed = this.updateStore(url);
+            if (changed)
+               transitions[++last] = transition = {
+                  url,
+                  state,
+                  title,
+                  replace,
+               };
+         },
+         () => {
+            if (transition) transition.completed = true;
+
+            //update history once the page is rendered and the title is set
+            while (transitions[next] && transitions[next].completed) {
+               let tr = transitions[next];
+               delete transitions[next];
+               next++;
+               if (tr.replace) {
+                  window.history.replaceState(tr.state, tr.title ?? "", tr.url);
+                  if (subscribers) subscribers.notify(tr.url, "replaceState");
+               } else {
+                  window.history.pushState(tr.state, tr.title ?? "", tr.url);
+                  if (subscribers) subscribers.notify(tr.url, "pushState");
+               }
+            }
+         },
+      );
+
+      return changed;
+   }
+
+   static updateStore(href?: string): boolean {
+      let url = Url.unresolve(href || document.location.href);
+      let hash: string | null = null;
+      let hashIndex = url.indexOf("#");
+      if (hashIndex !== -1) {
+         hash = url.substring(hashIndex);
+         url = url.substring(0, hashIndex);
+      }
+      if (this.hashBinding) this.store.set(this.hashBinding, hash);
+      return this.store.set(this.urlBinding, url);
+   }
+
+   static subscribe(callback: (url: string, op: string) => void): () => void {
+      if (!subscribers) subscribers = new SubscriberList();
+      return subscribers.subscribe(callback);
+   }
+}
diff --git a/packages/cx/src/ui/app/Url.d.ts b/packages/cx/src/ui/app/Url.d.ts
deleted file mode 100644
index deed91ba4..000000000
--- a/packages/cx/src/ui/app/Url.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as Cx from "../../core";
-
-export class Url {
-   static resolve(path: string): string;
-
-   static absolute(path: string): string;
-
-   static unresolve(path: string): string;
-
-   static getAbsoluteBase(): string;
-
-   static isLocal(url: string): boolean;
-
-   static setBase(base: string): void;
-
-   static getOrigin(): string;
-
-   static getBaseFromScriptSrc(src: string, scriptPath: string): string;
-
-   static setBaseFromScript(scriptPath: string | RegExp);
-}
diff --git a/packages/cx/src/ui/app/Url.js b/packages/cx/src/ui/app/Url.js
deleted file mode 100644
index 94d820205..000000000
--- a/packages/cx/src/ui/app/Url.js
+++ /dev/null
@@ -1,103 +0,0 @@
-export class Url {
-   static resolve(path) {
-      return path.replace('~/', this.base);
-   }
-
-   static absolute(path) {
-      return path.replace('~/', this.absoluteBase);
-   }
-
-   static unresolve(path) {
-      if (path.indexOf('~/') == 0)
-         return path;
-
-      var absBase = this.absoluteBase || '';
-      
-      //handle paths like /app and /app/
-      if (path.length == absBase.length - 1 && absBase == path + "/")
-         return "~/";
-
-      if (path.indexOf(absBase) == 0)
-         return '~/' + path.substring(absBase.length);
-
-      return '~/' + path.substring(this.base.length);
-   }
-
-   static getAbsoluteBase() {
-      return this.absoluteBase;
-   }
-
-   static isLocal(url) {
-      var absBase = this.getAbsoluteBase();
-      return url.indexOf('~/') == 0 || url.indexOf(absBase) == 0 || url.indexOf(this.base) == 0;
-   }
-
-   static setBase(base) {
-      if (!base || base[base.length - 1] != '/')
-         base += '/';
-      this.base = base;
-      if (typeof window != 'undefined')
-         this.absoluteBase = window.location.protocol + '//' + window.location.host + this.base
-   }
-
-   static getOrigin() {
-      if (typeof window == 'undefined')
-         return '';
-      return window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
-   }
-
-   static getBaseFromScriptSrc(src, scriptPath) {
-      if (!(scriptPath instanceof RegExp))
-         scriptPath = getBasePathRegex(scriptPath);
-
-      let index = src.search(scriptPath);
-      if (index == -1)
-         return false;
-
-      let origin = this.getOrigin();
-      return src.substring(src.indexOf(origin) == 0 ? origin.length : 0, index);
-   }
-
-   static setBaseFromScript(scriptPath) {
-      var scripts = document.getElementsByTagName('script'),
-         base;
-
-      if (!(scriptPath instanceof RegExp))
-         scriptPath = getBasePathRegex(scriptPath);
-
-      for (let i = 0; i < scripts.length; i++) {
-         base = this.getBaseFromScriptSrc(scripts[i].src, scriptPath);
-         if (base) {
-            this.setBase(base);
-            return;
-         }
-      }
-
-      throw new Error(`Could not resolve url base from script matching '${scriptPath}'.`);
-   }
-}
-
-Url.setBase('/');
-
-function getBasePathRegex(str) {
-   let regex = '';
-   let start = 0;
-   if (str.indexOf('~/') == 0)
-      start = 2;
-
-   for (let i = start; i < str.length; i++) {
-      switch (str[i]) {
-         case '.':
-            regex += '\\.';
-            break;
-
-         case '*':
-            regex += '.*';
-            break;
-
-         default:
-            regex += str[i];
-      }
-   }
-   return new RegExp(regex + '(\\?.*)?$', 'i');
-}
diff --git a/packages/cx/src/ui/app/Url.spec.js b/packages/cx/src/ui/app/Url.spec.js
deleted file mode 100644
index 635ccd2a8..000000000
--- a/packages/cx/src/ui/app/Url.spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Url } from "./Url";
-import Route from "route-parser";
-
-var assert = require("assert");
-describe("Url", function () {
-   describe(".unresolve", function () {
-      it("preserves query parameters", function () {
-         Url.absoluteBase = "https://cxjs.io/docs/";
-         assert.equal("~/?state=1", Url.unresolve("https://cxjs.io/docs/?state=1"));
-      });
-
-      it("doesn't touch unresolved urls", function () {
-         assert.equal("~/test", Url.unresolve("~/test"));
-      });
-   });
-
-   describe(".getBaseFromScriptSrc", () => {
-      it("ignores query strings", function () {
-         assert.equal(Url.getBaseFromScriptSrc("/vendor.js?qs=1", "~/vendor.js"), "/");
-      });
-
-      it("allows wildcards", function () {
-         assert.equal(Url.getBaseFromScriptSrc("/vendor.123.js?qs=1", "~/vendor.*.js"), "/");
-      });
-
-      it("works for an application folder", function () {
-         assert.equal(Url.getBaseFromScriptSrc("/datasync/vendor.124c82.js", "~/vendor.*.js"), "/datasync/");
-      });
-   });
-});
-
-describe("Route", function () {
-   it("matches query param", function () {
-      let route = new Route("~/?state=:state");
-      let result = route.match("~/?state=1");
-      assert(result);
-      assert.equal(result.state, 1);
-   });
-
-   it("matches routes with extra query params", function () {
-      let route = new Route("~/?state=:state");
-      let result = route.match("~/?state=1&more=2");
-      assert(result);
-   });
-
-   it.skip("matches query params in any order", function () {
-      let route = new Route("~/?a=:a&b=:b");
-      let result = route.match("~/?b=1&a=2");
-      assert(result);
-   });
-});
diff --git a/packages/cx/src/ui/app/Url.spec.ts b/packages/cx/src/ui/app/Url.spec.ts
new file mode 100644
index 000000000..58758f29a
--- /dev/null
+++ b/packages/cx/src/ui/app/Url.spec.ts
@@ -0,0 +1,50 @@
+import { Url } from "./Url";
+import Route from "route-parser";
+import assert from "assert";
+describe("Url", function () {
+   describe(".unresolve", function () {
+      it("preserves query parameters", function () {
+         Url.absoluteBase = "https://cxjs.io/docs/";
+         assert.equal("~/?state=1", Url.unresolve("https://cxjs.io/docs/?state=1"));
+      });
+
+      it("doesn't touch unresolved urls", function () {
+         assert.equal("~/test", Url.unresolve("~/test"));
+      });
+   });
+
+   describe(".getBaseFromScriptSrc", () => {
+      it("ignores query strings", function () {
+         assert.equal(Url.getBaseFromScriptSrc("/vendor.js?qs=1", "~/vendor.js"), "/");
+      });
+
+      it("allows wildcards", function () {
+         assert.equal(Url.getBaseFromScriptSrc("/vendor.123.js?qs=1", "~/vendor.*.js"), "/");
+      });
+
+      it("works for an application folder", function () {
+         assert.equal(Url.getBaseFromScriptSrc("/datasync/vendor.124c82.js", "~/vendor.*.js"), "/datasync/");
+      });
+   });
+});
+
+describe("Route", function () {
+   it("matches query param", function () {
+      let route = new Route("~/?state=:state");
+      let result = route.match("~/?state=1");
+      assert(result !== false);
+      assert.equal(result.state, "1");
+   });
+
+   it("matches routes with extra query params", function () {
+      let route = new Route("~/?state=:state");
+      let result = route.match("~/?state=1&more=2");
+      assert(result);
+   });
+
+   it.skip("matches query params in any order", function () {
+      let route = new Route("~/?a=:a&b=:b");
+      let result = route.match("~/?b=1&a=2");
+      assert(result);
+   });
+});
diff --git a/packages/cx/src/ui/app/Url.ts b/packages/cx/src/ui/app/Url.ts
new file mode 100644
index 000000000..67bfb6e91
--- /dev/null
+++ b/packages/cx/src/ui/app/Url.ts
@@ -0,0 +1,102 @@
+export class Url {
+   static base: string;
+   static absoluteBase: string;
+
+   static resolve(path: string): string {
+      return path.replace("~/", this.base);
+   }
+
+   static absolute(path: string): string {
+      return path.replace("~/", this.absoluteBase);
+   }
+
+   static unresolve(path: string): string {
+      if (path.indexOf("~/") == 0) return path;
+
+      const absBase = this.absoluteBase || "";
+
+      //handle paths like /app and /app/
+      if (path.length == absBase.length - 1 && absBase == path + "/") return "~/";
+
+      if (path.indexOf(absBase) == 0) return "~/" + path.substring(absBase.length);
+
+      return "~/" + path.substring(this.base.length);
+   }
+
+   static getAbsoluteBase(): string {
+      return this.absoluteBase;
+   }
+
+   static isLocal(url: string): boolean {
+      const absBase = this.getAbsoluteBase();
+      return url.indexOf("~/") == 0 || url.indexOf(absBase) == 0 || url.indexOf(this.base) == 0;
+   }
+
+   static setBase(base: string): void {
+      if (!base || base[base.length - 1] != "/") base += "/";
+      this.base = base;
+      if (typeof window != "undefined")
+         this.absoluteBase = window.location.protocol + "//" + window.location.host + this.base;
+   }
+
+   static getOrigin(): string {
+      if (typeof window == "undefined") return "";
+      return (
+         window.location.protocol +
+         "//" +
+         window.location.hostname +
+         (window.location.port ? ":" + window.location.port : "")
+      );
+   }
+
+   static getBaseFromScriptSrc(src: string, scriptPath: string | RegExp): string | false {
+      if (!(scriptPath instanceof RegExp)) scriptPath = getBasePathRegex(scriptPath);
+
+      let index = src.search(scriptPath);
+      if (index == -1) return false;
+
+      let origin = this.getOrigin();
+      return src.substring(src.indexOf(origin) == 0 ? origin.length : 0, index);
+   }
+
+   static setBaseFromScript(scriptPath: string | RegExp): void {
+      const scripts = document.getElementsByTagName("script");
+      let base: string | false;
+
+      if (!(scriptPath instanceof RegExp)) scriptPath = getBasePathRegex(scriptPath);
+
+      for (let i = 0; i < scripts.length; i++) {
+         base = this.getBaseFromScriptSrc(scripts[i].src, scriptPath);
+         if (base) {
+            this.setBase(base);
+            return;
+         }
+      }
+
+      throw new Error(`Could not resolve url base from script matching '${scriptPath}'.`);
+   }
+}
+
+Url.setBase('/');
+
+function getBasePathRegex(str: string): RegExp {
+   let regex = "";
+   let start = 0;
+   if (str.indexOf("~/") == 0) start = 2;
+
+   for (let i = start; i < str.length; i++) {
+      switch (str[i]) {
+         case ".":
+            regex += "\\.";
+            break;
+
+         case "*":
+            regex += ".*";
+            break;
+
+         default:
+            regex += str[i];
+      }
+   }
+   return new RegExp(regex + "(\\?.*)?$", "i");
+}
diff --git a/packages/cx/src/ui/app/index.d.ts b/packages/cx/src/ui/app/index.d.ts
deleted file mode 100644
index 318bda474..000000000
--- a/packages/cx/src/ui/app/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './startAppLoop';
-export * from './History';
-export * from './Url';
-export * from "./startHotAppLoop";
diff --git a/packages/cx/src/ui/app/index.js b/packages/cx/src/ui/app/index.ts
similarity index 100%
rename from packages/cx/src/ui/app/index.js
rename to packages/cx/src/ui/app/index.ts
diff --git a/packages/cx/src/ui/app/startAppLoop.d.ts b/packages/cx/src/ui/app/startAppLoop.d.ts
deleted file mode 100644
index 38b297c0d..000000000
--- a/packages/cx/src/ui/app/startAppLoop.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { View } from '../../data/View';
-import { Instance } from '../Instance';
-
-export function startAppLoop(parentDOMElement: Element, storeOrInstance: View | Instance, widget?: any, options?: any);
\ No newline at end of file
diff --git a/packages/cx/src/ui/app/startAppLoop.js b/packages/cx/src/ui/app/startAppLoop.js
deleted file mode 100644
index 22af2e04f..000000000
--- a/packages/cx/src/ui/app/startAppLoop.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Widget, VDOM } from "../Widget";
-import { Store } from "../../data/Store";
-import { Cx } from "../Cx";
-
-export function startAppLoop(parentDOMElement, storeOrInstance, widget, options = {}) {
-   if (!parentDOMElement || parentDOMElement.nodeType !== 1)
-      throw new Error("First argument to startAppLoop should be a valid DOM element.");
-
-   let store, instance, parentInstance;
-
-   if (!storeOrInstance) storeOrInstance = new Store();
-
-   if (storeOrInstance.notify) store = storeOrInstance;
-   else if (storeOrInstance.getChild) {
-      if (storeOrInstance.widget === widget) instance = storeOrInstance;
-      else parentInstance = storeOrInstance;
-   } else throw new Error("Second argument to startAppLoop should be either of type Store or Instance");
-
-   let content = (
-      <Cx
-         store={store}
-         widget={widget}
-         instance={instance}
-         parentInstance={parentInstance}
-         options={options}
-         subscribe
-      />
-   );
-
-   let root = null;
-   if (VDOM.DOM.createRoot) {
-      root = VDOM.DOM.createRoot(parentDOMElement);
-      root.render(content);
-   } else VDOM.DOM.render(content, parentDOMElement);
-
-   let stopped = false;
-
-   return function () {
-      if (stopped) return;
-
-      stopped = true;
-
-      if (!options.destroyDelay) destroy(parentDOMElement, options, root);
-      else {
-         setTimeout(() => {
-            destroy(parentDOMElement, options, root);
-         }, options.destroyDelay);
-      }
-   };
-}
-
-function destroy(parentDOMElement, options, root) {
-   if (root) root.unmount();
-   else VDOM.DOM.unmountComponentAtNode(parentDOMElement);
-
-   if (options.removeParentDOMElement && parentDOMElement.parentNode)
-      parentDOMElement.parentNode.removeChild(parentDOMElement);
-}
diff --git a/packages/cx/src/ui/app/startAppLoop.tsx b/packages/cx/src/ui/app/startAppLoop.tsx
new file mode 100644
index 000000000..86e30326d
--- /dev/null
+++ b/packages/cx/src/ui/app/startAppLoop.tsx
@@ -0,0 +1,71 @@
+/** @jsxImportSource react */
+
+import type { Root } from "cx-react";
+import { Widget, VDOM } from "../Widget";
+import { Store } from "../../data/Store";
+import { Cx } from "../Cx";
+import { Instance } from "../Instance";
+import { Create } from "../../util/Component";
+
+export interface StartAppLoopOptions {
+   destroyDelay?: number;
+   removeParentDOMElement?: boolean;
+   [key: string]: any;
+}
+
+export function startAppLoop(
+   parentDOMElement: HTMLElement,
+   storeOrInstance?: Store | Instance,
+   widget?: Create<typeof Widget> | Create<typeof Widget>[],
+   options: StartAppLoopOptions = {},
+): () => void {
+   if (!parentDOMElement || parentDOMElement.nodeType !== 1)
+      throw new Error("First argument to startAppLoop should be a valid DOM element.");
+
+   let store: Store | undefined;
+   let instance: Instance | undefined;
+   let parentInstance: Instance | undefined;
+
+   if (!storeOrInstance) storeOrInstance = new Store();
+
+   if ((storeOrInstance as any).notify) store = storeOrInstance as Store;
+   else if ((storeOrInstance as any).getChild) {
+      if ((storeOrInstance as any).widget === widget) instance = storeOrInstance as Instance;
+      else parentInstance = storeOrInstance as Instance;
+   } else throw new Error("Second argument to startAppLoop should be either of type Store or Instance");
+
+   let content = (
+      <Cx
+         store={store}
+         widget={widget}
+         instance={instance}
+         parentInstance={parentInstance}
+         options={options}
+         subscribe
+      />
+   ) as any;
+
+   let root = VDOM.DOM.createRoot(parentDOMElement);
+   root.render(content);
+
+   let stopped = false;
+
+   return function () {
+      if (stopped) return;
+
+      stopped = true;
+
+      if (!options.destroyDelay) destroy(parentDOMElement, options, root);
+      else {
+         setTimeout(() => {
+            destroy(parentDOMElement, options, root);
+         }, options.destroyDelay);
+      }
+   };
+}
+
+function destroy(parentDOMElement: HTMLElement, options: StartAppLoopOptions, root: Root): void {
+   if (root) root.unmount();
+   if (options.removeParentDOMElement && parentDOMElement.parentNode)
+      parentDOMElement.parentNode.removeChild(parentDOMElement);
+}
diff --git a/packages/cx/src/ui/app/startHotAppLoop.d.ts b/packages/cx/src/ui/app/startHotAppLoop.d.ts
deleted file mode 100644
index 9a0f161ca..000000000
--- a/packages/cx/src/ui/app/startHotAppLoop.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { View } from '../../data/View';
-import { Instance } from '../Instance';
-
-/**
-   Starts the app loop with hot module reloading. Whenever the given module is updated, the app state is preserved.
- */
-export function startHotAppLoop(appModule: any, parentDOMElement: Element, storeOrInstance: View | Instance, widget?: any, options?: any);
\ No newline at end of file
diff --git a/packages/cx/src/ui/app/startHotAppLoop.js b/packages/cx/src/ui/app/startHotAppLoop.js
deleted file mode 100644
index ed74fc986..000000000
--- a/packages/cx/src/ui/app/startHotAppLoop.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { startAppLoop } from "./startAppLoop";
-import { Widget } from "../Widget";
-
-export function startHotAppLoop(appModule, element, store, widgets, options) {
-   let stop;
-   //webpack (HMR)
-   if (appModule.hot) {
-      // accept itself
-      appModule.hot.accept();
-
-      // remember data on dispose
-      appModule.hot.dispose(function (data) {
-         data.state = store.getData();
-         if (stop) stop();
-      });
-
-      //apply data on hot replace
-      if (appModule.hot.data) store.load(appModule.hot.data.state);
-   }
-
-   Widget.resetCounter();
-
-   //app loop
-   return (stop = startAppLoop(element, store, widgets, options));
-}
diff --git a/packages/cx/src/ui/app/startHotAppLoop.ts b/packages/cx/src/ui/app/startHotAppLoop.ts
new file mode 100644
index 000000000..10ef86fc5
--- /dev/null
+++ b/packages/cx/src/ui/app/startHotAppLoop.ts
@@ -0,0 +1,41 @@
+import { startAppLoop, StartAppLoopOptions } from "./startAppLoop";
+import { Widget, WidgetConfig } from "../Widget";
+import { Store } from "../../data/Store";
+import { Create } from "../../util/Component";
+
+export interface HotModule {
+   hot?: {
+      accept: () => void;
+      dispose: (callback: (data: any) => void) => void;
+      data?: any;
+   };
+}
+
+export function startHotAppLoop(
+   appModule: HotModule,
+   element: HTMLElement,
+   store: Store,
+   widgets: Create<typeof Widget> | Create<typeof Widget>[],
+   options: StartAppLoopOptions = {},
+): () => void {
+   let stop: (() => void) | undefined;
+   //webpack (HMR)
+   if (appModule.hot) {
+      // accept itself
+      appModule.hot.accept();
+
+      // remember data on dispose
+      appModule.hot.dispose(function (data: any) {
+         data.state = store.getData();
+         if (stop) stop();
+      });
+
+      //apply data on hot replace
+      if (appModule.hot.data?.state) store.load(appModule.hot.data.state);
+   }
+
+   Widget.resetCounter();
+
+   //app loop
+   return (stop = startAppLoop(element, store, widgets, options));
+}
diff --git a/packages/cx/src/ui/batchUpdates.d.ts b/packages/cx/src/ui/batchUpdates.d.ts
deleted file mode 100644
index 4fd11d1e0..000000000
--- a/packages/cx/src/ui/batchUpdates.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as Cx from '../core';
-
-export function batchUpdates(callback: () => void) : void;
-
-export function isBatchingUpdates() : boolean;
-
-export function notifyBatchedUpdateStarting() : void;
-
-export function notifyBatchedUpdateCompleted() : void;
-
-export function batchUpdatesAndNotify(callback: () => void, notifyCallback: () => void, timeout?: number) : void;
\ No newline at end of file
diff --git a/packages/cx/src/ui/batchUpdates.js b/packages/cx/src/ui/batchUpdates.js
deleted file mode 100644
index 6b7c53b69..000000000
--- a/packages/cx/src/ui/batchUpdates.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { VDOM } from './Widget';
-import { SubscriberList } from '../util/SubscriberList';
-
-let isBatching = 0;
-let promiseSubscribers = new SubscriberList();
-
-export function batchUpdates(callback) {
-   if (VDOM.DOM.unstable_batchedUpdates)
-      VDOM.DOM.unstable_batchedUpdates(() => {
-         isBatching++;
-         try {
-            callback();
-         }
-         finally {
-            isBatching--;
-         }
-      });
-   else
-      callback();
-}
-
-export function isBatchingUpdates() {
-   return isBatching > 0;
-}
-
-export function notifyBatchedUpdateStarting() {
-   promiseSubscribers.execute(x=>{
-      x.pending++;
-   });
-}
-
-export function notifyBatchedUpdateCompleted() {
-   promiseSubscribers.execute(x => {
-      x.finished++;
-      if (x.finished >= x.pending)
-         x.complete(true);
-   });
-}
-
-let updateId = 0;
-
-export function batchUpdatesAndNotify(callback, notifyCallback, timeout = 1000) {
-   let update = {
-      id: ++updateId,
-      pending: 0,
-      finished: 0,
-      done: false,
-   };
-
-   update.unsubscribe = promiseSubscribers.subscribe(update);
-   update.complete = (success) => {
-      if (!update.done) {
-         update.done = true;
-         if (update.timer)
-            clearInterval(update.timer);
-         update.unsubscribe();
-         notifyCallback(!!success);
-      }
-   };
-
-   batchUpdates(callback);
-
-   if (update.pending <= update.finished)
-      update.complete(true);
-   else
-      update.timer = setTimeout(update.complete, timeout);
-}
diff --git a/packages/cx/src/ui/batchUpdates.ts b/packages/cx/src/ui/batchUpdates.ts
new file mode 100644
index 000000000..471346e0f
--- /dev/null
+++ b/packages/cx/src/ui/batchUpdates.ts
@@ -0,0 +1,77 @@
+import { VDOM } from './Widget';
+import { SubscriberList } from '../util/SubscriberList';
+
+interface UpdateCallback {
+   pending: number;
+   finished: number;
+   complete: (success?: boolean) => void;
+}
+
+let isBatching = 0;
+let promiseSubscribers = new SubscriberList();
+
+export function batchUpdates(callback: () => void): void {
+   if (VDOM.DOM.unstable_batchedUpdates)
+      VDOM.DOM.unstable_batchedUpdates(() => {
+         isBatching++;
+         try {
+            callback();
+         }
+         finally {
+            isBatching--;
+         }
+      });
+   else
+      callback();
+}
+
+export function isBatchingUpdates(): boolean {
+   return isBatching > 0;
+}
+
+export function notifyBatchedUpdateStarting(): void {
+   promiseSubscribers.execute((x: any) =>{
+      (x as UpdateCallback).pending++;
+   });
+}
+
+export function notifyBatchedUpdateCompleted(): void {
+   promiseSubscribers.execute((x: any) => {
+      let cb = x as UpdateCallback;
+      cb.finished++;
+      if (cb.finished >= cb.pending)
+         cb.complete(true);
+   });
+}
+
+let updateId = 0;
+
+export function batchUpdatesAndNotify(callback: () => void, notifyCallback: (success: boolean) => void, timeout: number = 1000): void {
+   let done = false;
+   let timer: NodeJS.Timeout | undefined;
+   let unsubscribe: (() => void) | undefined;
+
+   const update: UpdateCallback = {
+      pending: 0,
+      finished: 0,
+      complete: (success?: boolean) => {
+         if (!done) {
+            done = true;
+            if (timer)
+               clearInterval(timer);
+            if (unsubscribe)
+               unsubscribe();
+            notifyCallback(!!success);
+         }
+      }
+   };
+
+   unsubscribe = promiseSubscribers.subscribe(update as any);
+
+   batchUpdates(callback);
+
+   if (update.pending <= update.finished)
+      update.complete(true);
+   else
+      timer = setTimeout(update.complete, timeout);
+}
diff --git a/packages/cx/src/ui/bind.d.ts b/packages/cx/src/ui/bind.d.ts
deleted file mode 100644
index 03c20ca0b..000000000
--- a/packages/cx/src/ui/bind.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Bind, AccessorChain } from "../core";
-
-export function bind(path: string, defaultValue?: any): Bind;
-export function bind<T>(chain: AccessorChain<T>, defaultValue?: T): Bind;
diff --git a/packages/cx/src/ui/bind.js b/packages/cx/src/ui/bind.js
deleted file mode 100644
index 80984a233..000000000
--- a/packages/cx/src/ui/bind.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export function bind(path, defaultValue) {
-   return {
-      //toString will ensure chain accessors are converted to strings
-      bind: path.toString(),
-      defaultValue,
-   };
-}
diff --git a/packages/cx/src/ui/bind.ts b/packages/cx/src/ui/bind.ts
new file mode 100644
index 000000000..dfb8a3ca6
--- /dev/null
+++ b/packages/cx/src/ui/bind.ts
@@ -0,0 +1,10 @@
+import { Bind } from "./Prop";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+
+export function bind(path: string | AccessorChain<unknown>, defaultValue?: unknown): Bind {
+   return {
+      //toString will ensure chain accessors are converted to strings
+      bind: path.toString(),
+      defaultValue,
+   };
+}
diff --git a/packages/cx/src/ui/createFunctionalComponent.d.ts b/packages/cx/src/ui/createFunctionalComponent.d.ts
deleted file mode 100644
index 0dad345dc..000000000
--- a/packages/cx/src/ui/createFunctionalComponent.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function createFunctionalComponent<T, X>(factory: (props: T) => X): (props: T) => X;
diff --git a/packages/cx/src/ui/createFunctionalComponent.js b/packages/cx/src/ui/createFunctionalComponent.js
deleted file mode 100644
index 48ba7d822..000000000
--- a/packages/cx/src/ui/createFunctionalComponent.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { createComponentFactory, isComponentFactory } from "../util/Component";
-import { flattenProps } from "../ui/flattenProps";
-import { PureContainer } from "./PureContainer";
-import { UseParentLayout } from "./layout/UseParentLayout";
-import { StoreProxy } from "../data/StoreProxy";
-import { isDefined } from "../util/isDefined";
-
-let currentInstance = null;
-
-class FunctionalComponent extends PureContainer {
-   initInstance(context, instance) {
-      instance.store = instance.parentStore;
-      this.clear();
-      currentInstance = instance;
-      this.add(this.childrenFactory(this.props));
-      instance.content = this.layout ? this.layout.items : this.items;
-      this.clear();
-      currentInstance = null;
-   }
-
-   explore(context, instance) {
-      if (this.layout) this.layout.items = instance.content;
-      else this.items = instance.content;
-      this.exploreItems(context, instance, instance.content);
-      if (instance.computables) {
-         instance.computables.forEach((cb) => cb(instance.store.getData()));
-      }
-   }
-}
-
-export function createFunctionalComponent(factory) {
-   if (isComponentFactory(factory)) return factory;
-
-   return createComponentFactory(factory, (props = {}) => {
-      let innerProps = flattenProps(props);
-      delete innerProps.visible;
-      delete innerProps.if;
-      delete innerProps.controller;
-      delete innerProps.layout;
-      delete innerProps.outerLayout;
-      delete innerProps.putInto;
-      delete innerProps.contentFor;
-      delete innerProps.jsxAttributes;
-      delete innerProps.$type;
-      delete innerProps.vdomKey;
-
-      return {
-         type: FunctionalComponent,
-         visible: isDefined(props.if) ? props.if : isDefined(props.visible) ? props.visible : true,
-         layout: props.layout || UseParentLayout,
-         controller: props.controller,
-         outerLayout: props.outerLayout,
-         putInto: props.contentFor || props.putInto,
-         vdomKey: props.vdomKey,
-         childrenFactory: factory,
-         props: innerProps,
-      };
-   });
-}
-
-export function getCurrentInstance() {
-   return currentInstance;
-}
diff --git a/packages/cx/src/ui/createFunctionalComponent.spec.js b/packages/cx/src/ui/createFunctionalComponent.spec.js
deleted file mode 100644
index 46260138b..000000000
--- a/packages/cx/src/ui/createFunctionalComponent.spec.js
+++ /dev/null
@@ -1,400 +0,0 @@
-import { Cx } from "./Cx";
-import { VDOM } from "./Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { Store } from "../data/Store";
-import { createFunctionalComponent } from "./createFunctionalComponent";
-
-import renderer from "react-test-renderer";
-import assert from "assert";
-import { Rescope } from "./Rescope";
-import { LabelsLeftLayout } from "./layout/LabelsLeftLayout";
-import { LabeledContainer } from "../widgets/form/LabeledContainer";
-import { Repeater } from "./Repeater";
-import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
-import { useStoreMethods } from "../hooks";
-
-describe("createFunctionalComponent", () => {
-   it("allows spread", () => {
-      const SuperDiv = createFunctionalComponent(({ ...props }) => {
-         return (
-            <cx>
-               <div {...props} />
-            </cx>
-         );
-      });
-
-      let props = {
-         text: "Spread",
-         style: "background: red;",
-      };
-
-      const widget = (
-         <cx>
-            <SuperDiv {...props} class="test" />
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         children: ["Spread"],
-         props: {
-            className: "test",
-            style: {
-               background: "red",
-            },
-         },
-      });
-   });
-
-   it("visible and Rescope behave as expected", () => {
-      const RootRescope = createFunctionalComponent(({}) => {
-         return (
-            <cx>
-               <Rescope bind="x">
-                  <div text-bind="y" />
-               </Rescope>
-            </cx>
-         );
-      });
-
-      const widget = (
-         <cx>
-            <RootRescope visible-expr="!!{x}" />
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            x: {
-               y: "OK",
-            },
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         children: ["OK"],
-         props: {},
-      });
-   });
-
-   it("visible and multiple items behave as expected", () => {
-      const FComponent = createFunctionalComponent(({}) => {
-         return (
-            <cx>
-               <div>1</div>
-               <div visible={false}>2</div>
-               <div>3</div>
-            </cx>
-         );
-      });
-
-      const widget = (
-         <cx>
-            <FComponent />
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, [
-         {
-            type: "div",
-            children: ["1"],
-            props: {},
-         },
-         {
-            type: "div",
-            children: ["3"],
-            props: {},
-         },
-      ]);
-   });
-
-   it("respects inner layouts", () => {
-      const FComponent = createFunctionalComponent(({}) => {
-         return (
-            <cx>
-               <LabeledContainer label="Test" />
-               <LabeledContainer label="Test" />
-            </cx>
-         );
-      });
-
-      const widget = (
-         <cx>
-            <div layout={LabelsLeftLayout}>
-               <FComponent />
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "table",
-               props: {
-                  className: "cxb-labelsleftlayout",
-                  style: undefined,
-               },
-               children: [
-                  {
-                     type: "tbody",
-                     props: {},
-                     children: [
-                        {
-                           type: "tr",
-                           props: {},
-                           children: [
-                              {
-                                 type: "td",
-                                 props: {
-                                    className: "cxe-labelsleftlayout-label",
-                                    style: undefined,
-                                 },
-                                 children: [
-                                    {
-                                       type: "label",
-                                       props: {
-                                          className: "cxb-label",
-                                       },
-                                       children: ["Test"],
-                                    },
-                                 ],
-                              },
-                              {
-                                 type: "td",
-                                 props: {
-                                    className: "cxe-labelsleftlayout-field",
-                                 },
-                                 children: null,
-                              },
-                           ],
-                        },
-                        {
-                           type: "tr",
-                           props: {},
-                           children: [
-                              {
-                                 type: "td",
-                                 props: {
-                                    className: "cxe-labelsleftlayout-label",
-                                    style: undefined,
-                                 },
-                                 children: [
-                                    {
-                                       type: "label",
-                                       props: {
-                                          className: "cxb-label",
-                                       },
-                                       children: ["Test"],
-                                    },
-                                 ],
-                              },
-                              {
-                                 type: "td",
-                                 props: {
-                                    className: "cxe-labelsleftlayout-field",
-                                 },
-                                 children: null,
-                              },
-                           ],
-                        },
-                     ],
-                  },
-               ],
-            },
-         ],
-      });
-   });
-
-   it("can use refs for data bindings", () => {
-      const X = createFunctionalComponent(({}) => {
-         let { ref } = useStoreMethods();
-         let x = ref("x", "OK");
-         return (
-            <cx>
-               <div text={x} />
-            </cx>
-         );
-      });
-
-      const widget = (
-         <cx>
-            <X visible={true} />
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         children: ["OK"],
-         props: {},
-      });
-   });
-
-   it("adds children at the right place", () => {
-      const X = createFunctionalComponent(({ children }) => (
-         <cx>
-            <header />
-            <main>{children}</main>
-            <footer />
-         </cx>
-      ));
-
-      const widget = (
-         <cx>
-            <X>
-               <div />
-            </X>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert.deepEqual(tree, [
-         {
-            type: "header",
-            children: null,
-            props: {},
-         },
-         {
-            type: "main",
-            children: [
-               {
-                  type: "div",
-                  children: null,
-                  props: {},
-               },
-            ],
-            props: {},
-         },
-         {
-            type: "footer",
-            children: null,
-            props: {},
-         },
-      ]);
-   });
-
-   it("works well with repeaters", () => {
-      const X = createFunctionalComponent(({}) => {
-         let { ref } = useStoreMethods();
-         let text = ref("$record.text");
-         return (
-            <cx>
-               <div text={text} />
-            </cx>
-         );
-      });
-
-      const widget = (
-         <cx>
-            <Repeater records-bind="array">
-               <X />
-            </Repeater>
-         </cx>
-      );
-
-      let store = new Store({ data: { array: [{ text: "0" }, { text: "1" }, { text: "2" }] } });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert.deepEqual(tree, [
-         {
-            type: "div",
-            children: ["0"],
-            props: {},
-         },
-         {
-            type: "div",
-            children: ["1"],
-            props: {},
-         },
-         {
-            type: "div",
-            children: ["2"],
-            props: {},
-         },
-      ]);
-
-      store.update("array", (array) => [array[0], { text: "10" }, array[2]]);
-
-      tree = component.toJSON();
-
-      assert.deepEqual(tree, [
-         {
-            type: "div",
-            children: ["0"],
-            props: {},
-         },
-         {
-            type: "div",
-            children: ["10"],
-            props: {},
-         },
-         {
-            type: "div",
-            children: ["2"],
-            props: {},
-         },
-      ]);
-   });
-
-   it("can have its own layout", () => {
-      const X = createFunctionalComponent(() => (
-         <cx>
-            <div>1</div>
-            <div>2</div>
-            <div>3</div>
-         </cx>
-      ));
-
-      const widget = (
-         <cx>
-            <X layout={FirstVisibleChildLayout} />
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert.deepEqual(tree, {
-         type: "div",
-         children: ["1"],
-         props: {},
-      });
-   });
-});
diff --git a/packages/cx/src/ui/createFunctionalComponent.spec.tsx b/packages/cx/src/ui/createFunctionalComponent.spec.tsx
new file mode 100644
index 000000000..6438d2ea3
--- /dev/null
+++ b/packages/cx/src/ui/createFunctionalComponent.spec.tsx
@@ -0,0 +1,454 @@
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "./createFunctionalComponent";
+import { bind } from "./bind";
+import { expr } from "./expr";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+
+import assert from "assert";
+import { Rescope } from "./Rescope";
+import { LabelsLeftLayout } from "./layout/LabelsLeftLayout";
+import { LabeledContainer } from "../widgets/form/LabeledContainer";
+import { Repeater } from "./Repeater";
+import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
+import { useStoreMethods } from "../hooks";
+
+describe("createFunctionalComponent type safety", () => {
+   interface MyComponentProps {
+      title: string;
+      count: number;
+      optional?: boolean;
+   }
+
+   const TypedComponent = createFunctionalComponent<MyComponentProps>(({ title, count, optional }) => (
+      <cx>
+         <div text={title} />
+         <div text={String(count)} />
+         {optional && <div text="optional shown" />}
+      </cx>
+   ));
+
+   it("rejects non-existing properties", () => {
+      const widget = (
+         <cx>
+            <TypedComponent
+               title="Test"
+               count={5}
+               // @ts-expect-error - nonExisting does not exist on MyComponentProps
+               nonExisting="invalid"
+            />
+         </cx>
+      );
+      assert.ok(widget);
+   });
+
+   it("rejects wrong property type", () => {
+      const widget = (
+         <cx>
+            <TypedComponent
+               title="Test"
+               // @ts-expect-error - count should be number, not string
+               count="wrong"
+            />
+         </cx>
+      );
+      assert.ok(widget);
+   });
+
+   it("rejects missing required properties", () => {
+      const widget = (
+         <cx>
+            {/* @ts-expect-error - count is required but missing */}
+            <TypedComponent title="Test" />
+         </cx>
+      );
+      assert.ok(widget);
+   });
+});
+
+describe("createFunctionalComponent", () => {
+   it("allows spread", async () => {
+      const SuperDiv = createFunctionalComponent(({ ...props }) => {
+         return (
+            <cx>
+               <div {...props} />
+            </cx>
+         );
+      });
+
+      let props = {
+         text: "Spread",
+         style: "background: red;",
+      };
+
+      const widget = (
+         <cx>
+            <SuperDiv {...props} class="test" />
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         children: ["Spread"],
+         props: {
+            className: "test",
+            style: {
+               background: "red",
+            },
+         },
+      });
+   });
+
+   it("visible and Rescope behave as expected", async () => {
+      const RootRescope = createFunctionalComponent(({}) => {
+         return (
+            <cx>
+               <Rescope bind="x">
+                  <div text={bind("y")} />
+               </Rescope>
+            </cx>
+         );
+      });
+
+      const widget = (
+         <cx>
+            <RootRescope visible={expr("!!{x}")} />
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            x: {
+               y: "OK",
+            },
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         children: ["OK"],
+         props: {},
+      });
+   });
+
+   it("visible and multiple items behave as expected", async () => {
+      const FComponent = createFunctionalComponent(({}) => {
+         return (
+            <cx>
+               <div>1</div>
+               <div visible={false}>2</div>
+               <div>3</div>
+            </cx>
+         );
+      });
+
+      const widget = (
+         <cx>
+            <FComponent />
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, [
+         {
+            type: "div",
+            children: ["1"],
+            props: {},
+         },
+         {
+            type: "div",
+            children: ["3"],
+            props: {},
+         },
+      ]);
+   });
+
+   it("respects inner layouts", async () => {
+      const FComponent = createFunctionalComponent(({}) => {
+         return (
+            <cx>
+               <LabeledContainer label="Test" />
+               <LabeledContainer label="Test" />
+            </cx>
+         );
+      });
+
+      const widget = (
+         <cx>
+            <div layout={LabelsLeftLayout}>
+               <FComponent />
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "table",
+               props: {
+                  className: "cxb-labelsleftlayout",
+                  style: undefined,
+               },
+               children: [
+                  {
+                     type: "tbody",
+                     props: {},
+                     children: [
+                        {
+                           type: "tr",
+                           props: {},
+                           children: [
+                              {
+                                 type: "td",
+                                 props: {
+                                    className: "cxe-labelsleftlayout-label",
+                                    style: undefined,
+                                 },
+                                 children: [
+                                    {
+                                       type: "label",
+                                       props: {
+                                          className: "cxb-label",
+                                       },
+                                       children: ["Test"],
+                                    },
+                                 ],
+                              },
+                              {
+                                 type: "td",
+                                 props: {
+                                    className: "cxe-labelsleftlayout-field",
+                                 },
+                                 children: null,
+                              },
+                           ],
+                        },
+                        {
+                           type: "tr",
+                           props: {},
+                           children: [
+                              {
+                                 type: "td",
+                                 props: {
+                                    className: "cxe-labelsleftlayout-label",
+                                    style: undefined,
+                                 },
+                                 children: [
+                                    {
+                                       type: "label",
+                                       props: {
+                                          className: "cxb-label",
+                                       },
+                                       children: ["Test"],
+                                    },
+                                 ],
+                              },
+                              {
+                                 type: "td",
+                                 props: {
+                                    className: "cxe-labelsleftlayout-field",
+                                 },
+                                 children: null,
+                              },
+                           ],
+                        },
+                     ],
+                  },
+               ],
+            },
+         ],
+      });
+   });
+
+   it("can use refs for data bindings", async () => {
+      const X = createFunctionalComponent(({}) => {
+         let { ref } = useStoreMethods();
+         let x = ref("x", "OK");
+         return (
+            <cx>
+               <div text={x} />
+            </cx>
+         );
+      });
+
+      const widget = (
+         <cx>
+            <X visible={true} />
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         children: ["OK"],
+         props: {},
+      });
+   });
+
+   it("adds children at the right place", async () => {
+      const X = createFunctionalComponent(({ children }: { children: any }) => (
+         <cx>
+            <header />
+            <main>{children}</main>
+            <footer />
+         </cx>
+      ));
+
+      const widget = (
+         <cx>
+            <X>
+               <div />
+            </X>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert.deepEqual(tree, [
+         {
+            type: "header",
+            children: null,
+            props: {},
+         },
+         {
+            type: "main",
+            children: [
+               {
+                  type: "div",
+                  children: null,
+                  props: {},
+               },
+            ],
+            props: {},
+         },
+         {
+            type: "footer",
+            children: null,
+            props: {},
+         },
+      ]);
+   });
+
+   it("works well with repeaters", async () => {
+      const X = createFunctionalComponent(({}) => {
+         let { ref } = useStoreMethods();
+         let text = ref("$record.text");
+         return (
+            <cx>
+               <div text={text} />
+            </cx>
+         );
+      });
+
+      const widget = (
+         <cx>
+            <Repeater records={bind("array")}>
+               <X />
+            </Repeater>
+         </cx>
+      );
+
+      let store = new Store({ data: { array: [{ text: "0" }, { text: "1" }, { text: "2" }] } });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert.deepEqual(tree, [
+         {
+            type: "div",
+            children: ["0"],
+            props: {},
+         },
+         {
+            type: "div",
+            children: ["1"],
+            props: {},
+         },
+         {
+            type: "div",
+            children: ["2"],
+            props: {},
+         },
+      ]);
+
+      await act(async () => {
+         store.update("array", (array) => [array[0], { text: "10" }, array[2]]);
+      });
+
+      tree = component.toJSON();
+
+      assert.deepEqual(tree, [
+         {
+            type: "div",
+            children: ["0"],
+            props: {},
+         },
+         {
+            type: "div",
+            children: ["10"],
+            props: {},
+         },
+         {
+            type: "div",
+            children: ["2"],
+            props: {},
+         },
+      ]);
+   });
+
+   it("can have its own layout", async () => {
+      const X = createFunctionalComponent(() => (
+         <cx>
+            <div>1</div>
+            <div>2</div>
+            <div>3</div>
+         </cx>
+      ));
+
+      const widget = (
+         <cx>
+            <X layout={FirstVisibleChildLayout} />
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert.deepEqual(tree, {
+         type: "div",
+         children: ["1"],
+         props: {},
+      });
+   });
+});
diff --git a/packages/cx/src/ui/createFunctionalComponent.ts b/packages/cx/src/ui/createFunctionalComponent.ts
new file mode 100644
index 000000000..1fb0a5396
--- /dev/null
+++ b/packages/cx/src/ui/createFunctionalComponent.ts
@@ -0,0 +1,86 @@
+import { flattenProps } from "../ui/flattenProps";
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { isDefined } from "../util/isDefined";
+import { ChildNode } from "./Container";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { UseParentLayout } from "./layout/UseParentLayout";
+
+let currentInstance: any = null;
+
+export interface FunctionalComponentConfig extends PureContainerConfig {
+   /** Factory function that creates children based on props. */
+   childrenFactory?: (props: any) => ChildNode | ChildNode[];
+
+   /** Props passed to the children factory. */
+   props?: any;
+}
+
+class FunctionalComponent extends PureContainerBase<FunctionalComponentConfig> {
+   declare childrenFactory: (props: any) => any;
+   declare props: any;
+
+   constructor(config?: FunctionalComponentConfig) {
+      super(config);
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = instance.parentStore;
+      this.clear();
+      currentInstance = instance;
+      this.add(this.childrenFactory(this.props));
+      instance.content = this.layout ? this.layout.items : this.items;
+      this.clear();
+      currentInstance = null;
+   }
+
+   explore(context: any, instance: any) {
+      if (this.layout) this.layout.items = instance.content;
+      else this.items = instance.content;
+      this.exploreItems(context, instance, instance.content);
+      if (instance.computables) {
+         instance.computables.forEach((cb: any) => cb(instance.store.getData()));
+      }
+   }
+}
+
+/** Brand type to mark CxJS functional components */
+export interface CxFunctionalComponent<Props = any> {
+   (props: Props & PureContainerConfig): any;
+   __cxFunctionalComponent: true;
+}
+
+export function createFunctionalComponent<Props = any>(
+   factory: (props: Props) => ChildNode | ChildNode[],
+): CxFunctionalComponent<Props> {
+   if (isComponentFactory(factory)) return factory as any;
+
+   return createComponentFactory(factory, (props: any = {}) => {
+      let innerProps = flattenProps(props);
+      delete innerProps.visible;
+      delete innerProps.if;
+      delete innerProps.controller;
+      delete innerProps.layout;
+      delete innerProps.outerLayout;
+      delete innerProps.putInto;
+      delete innerProps.contentFor;
+      delete innerProps.jsxAttributes;
+      delete innerProps.$type;
+      delete innerProps.vdomKey;
+
+      return {
+         type: FunctionalComponent,
+         visible: isDefined(props.if) ? props.if : isDefined(props.visible) ? props.visible : true,
+         layout: props.layout || UseParentLayout,
+         controller: props.controller,
+         outerLayout: props.outerLayout,
+         putInto: props.contentFor || props.putInto,
+         vdomKey: props.vdomKey,
+         childrenFactory: factory,
+         props: innerProps,
+      };
+   });
+}
+
+export function getCurrentInstance() {
+   return currentInstance;
+}
diff --git a/packages/cx/src/ui/expr.d.ts b/packages/cx/src/ui/expr.d.ts
deleted file mode 100644
index f2dec89ac..000000000
--- a/packages/cx/src/ui/expr.d.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { AccessorChain, Selector, Expr } from "../core";
-
-export function expr(code: string): Expr;
-export function expr<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Selector<R>;
-export function expr<V1, V2, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   compute: (v1: V1, v2: V2) => R
-): Selector<R>;
-
-export function expr<V1, V2, V3, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   arg3: AccessorChain<V3>,
-   compute: (v1: V1, v2: V2, v3: V3) => R
-): Selector<R>;
-
-export function expr<V1, V2, V3, V4, R>(
-   arg1: AccessorChain<V1>,
-   arg2: AccessorChain<V2>,
-   arg3: AccessorChain<V3>,
-   arg4: AccessorChain<V4>,
-   compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R
-): Selector<R>;
diff --git a/packages/cx/src/ui/expr.js b/packages/cx/src/ui/expr.js
deleted file mode 100644
index 9ee9567c2..000000000
--- a/packages/cx/src/ui/expr.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Binding } from "../data/Binding";
-import { isString } from "../util/isString";
-
-export function expr(text) {
-   if (isString(text))
-      return {
-         expr: text,
-      };
-
-   let getters = [];
-   let compute = arguments[arguments.length - 1];
-   for (let i = 0; i < arguments.length - 1; i++) getters.push(Binding.get(arguments[i]).value);
-   return (data) => {
-      let argv = getters.map((g) => g(data));
-      return compute.apply(this, argv);
-   };
-}
diff --git a/packages/cx/src/ui/expr.ts b/packages/cx/src/ui/expr.ts
new file mode 100644
index 000000000..1131f099d
--- /dev/null
+++ b/packages/cx/src/ui/expr.ts
@@ -0,0 +1,47 @@
+import { Binding } from "../data/Binding";
+import { isString } from "../util/isString";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+import { Selector } from "../data/Selector";
+import { Expr } from "./Prop";
+
+// Helper type to infer value type from AccessorChain, handling `any` correctly
+type InferAccessorValue<T> = 0 extends 1 & T ? any : T extends AccessorChain<infer V> ? V : never;
+
+export function expr(code: string): Expr;
+export function expr<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Selector<R>;
+export function expr<V1, V2, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   compute: (v1: V1, v2: V2) => R,
+): Selector<R>;
+export function expr<V1, V2, V3, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   arg3: AccessorChain<V3>,
+   compute: (v1: V1, v2: V2, v3: V3) => R,
+): Selector<R>;
+export function expr<V1, V2, V3, V4, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   arg3: AccessorChain<V3>,
+   arg4: AccessorChain<V4>,
+   compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R,
+): Selector<R>;
+export function expr<T extends AccessorChain<any>[], R>(
+   ...args: [...accessors: T, compute: (...values: { [K in keyof T]: InferAccessorValue<T[K]> }) => R]
+): Selector<R>;
+export function expr(...args: any[]): any {
+   let text = args[0];
+   if (isString(text))
+      return {
+         expr: text,
+      };
+
+   let getters: any[] = [];
+   let compute = args[args.length - 1];
+   for (let i = 0; i < args.length - 1; i++) getters.push(Binding.get(args[i]).value);
+   return (data: any) => {
+      let argv = getters.map((g) => g(data));
+      return compute.apply(null, argv);
+   };
+}
diff --git a/packages/cx/src/ui/exprHelpers.spec.ts b/packages/cx/src/ui/exprHelpers.spec.ts
new file mode 100644
index 000000000..b1e45c322
--- /dev/null
+++ b/packages/cx/src/ui/exprHelpers.spec.ts
@@ -0,0 +1,379 @@
+import {
+   truthy,
+   falsy,
+   isTrue,
+   isFalse,
+   hasValue,
+   isEmpty,
+   isNonEmpty,
+   lessThan,
+   lessThanOrEqual,
+   greaterThan,
+   greaterThanOrEqual,
+   equal,
+   notEqual,
+   strictEqual,
+   strictNotEqual,
+} from "./exprHelpers";
+import assert from "assert";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+
+interface Model {
+   value: number;
+   name: string;
+   flag: boolean;
+   nullable: string | null | undefined;
+   items: string[];
+}
+
+describe("exprHelpers", function () {
+   const m = createAccessorModelProxy<Model>();
+
+   describe("truthy", function () {
+      it("returns true for truthy values", function () {
+         const selector = truthy(m.value);
+         assert.strictEqual(selector({ value: 1 }), true);
+         assert.strictEqual(selector({ value: 100 }), true);
+      });
+
+      it("returns false for falsy values", function () {
+         const selector = truthy(m.value);
+         assert.strictEqual(selector({ value: 0 }), false);
+      });
+
+      it("returns true for non-empty strings", function () {
+         const selector = truthy(m.name);
+         assert.strictEqual(selector({ name: "hello" }), true);
+      });
+
+      it("returns false for empty strings", function () {
+         const selector = truthy(m.name);
+         assert.strictEqual(selector({ name: "" }), false);
+      });
+
+      it("returns false for null", function () {
+         const selector = truthy(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), false);
+      });
+   });
+
+   describe("falsy", function () {
+      it("returns false for truthy values", function () {
+         const selector = falsy(m.flag);
+         assert.strictEqual(selector({ flag: true }), false);
+      });
+
+      it("returns true for falsy values", function () {
+         const selector = falsy(m.flag);
+         assert.strictEqual(selector({ flag: false }), true);
+      });
+
+      it("returns true for null", function () {
+         const selector = falsy(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), true);
+      });
+
+      it("returns true for zero", function () {
+         const selector = falsy(m.value);
+         assert.strictEqual(selector({ value: 0 }), true);
+      });
+
+      it("returns true for empty string", function () {
+         const selector = falsy(m.name);
+         assert.strictEqual(selector({ name: "" }), true);
+      });
+   });
+
+   describe("isTrue", function () {
+      it("returns true only for strictly true", function () {
+         const selector = isTrue(m.flag);
+         assert.strictEqual(selector({ flag: true }), true);
+      });
+
+      it("returns false for truthy values that are not true", function () {
+         const selector = isTrue(m.value);
+         assert.strictEqual(selector({ value: 1 }), false);
+         assert.strictEqual(selector({ value: "true" }), false);
+      });
+
+      it("returns false for false", function () {
+         const selector = isTrue(m.flag);
+         assert.strictEqual(selector({ flag: false }), false);
+      });
+   });
+
+   describe("isFalse", function () {
+      it("returns true only for strictly false", function () {
+         const selector = isFalse(m.flag);
+         assert.strictEqual(selector({ flag: false }), true);
+      });
+
+      it("returns false for falsy values that are not false", function () {
+         const selector = isFalse(m.value);
+         assert.strictEqual(selector({ value: 0 }), false);
+         assert.strictEqual(selector({ value: null }), false);
+         assert.strictEqual(selector({ value: "" }), false);
+      });
+
+      it("returns false for true", function () {
+         const selector = isFalse(m.flag);
+         assert.strictEqual(selector({ flag: true }), false);
+      });
+   });
+
+   describe("hasValue", function () {
+      it("returns true for defined values", function () {
+         const selector = hasValue(m.value);
+         assert.strictEqual(selector({ value: 0 }), true);
+         assert.strictEqual(selector({ value: 1 }), true);
+      });
+
+      it("returns true for empty string", function () {
+         const selector = hasValue(m.name);
+         assert.strictEqual(selector({ name: "" }), true);
+      });
+
+      it("returns true for false", function () {
+         const selector = hasValue(m.flag);
+         assert.strictEqual(selector({ flag: false }), true);
+      });
+
+      it("returns false for null", function () {
+         const selector = hasValue(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), false);
+      });
+
+      it("returns false for undefined", function () {
+         const selector = hasValue(m.nullable);
+         assert.strictEqual(selector({ nullable: undefined }), false);
+      });
+   });
+
+   describe("isEmpty", function () {
+      it("returns true for empty string", function () {
+         const selector = isEmpty(m.name);
+         assert.strictEqual(selector({ name: "" }), true);
+      });
+
+      it("returns false for non-empty string", function () {
+         const selector = isEmpty(m.name);
+         assert.strictEqual(selector({ name: "hello" }), false);
+      });
+
+      it("returns true for empty array", function () {
+         const selector = isEmpty(m.items);
+         assert.strictEqual(selector({ items: [] }), true);
+      });
+
+      it("returns false for non-empty array", function () {
+         const selector = isEmpty(m.items);
+         assert.strictEqual(selector({ items: ["a", "b"] }), false);
+      });
+
+      it("returns true for null", function () {
+         const selector = isEmpty(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), true);
+      });
+
+      it("returns true for undefined", function () {
+         const selector = isEmpty(m.nullable);
+         assert.strictEqual(selector({ nullable: undefined }), true);
+      });
+   });
+
+   describe("isNonEmpty", function () {
+      it("returns false for empty string", function () {
+         const selector = isNonEmpty(m.name);
+         assert.strictEqual(selector({ name: "" }), false);
+      });
+
+      it("returns true for non-empty string", function () {
+         const selector = isNonEmpty(m.name);
+         assert.strictEqual(selector({ name: "hello" }), true);
+      });
+
+      it("returns false for empty array", function () {
+         const selector = isNonEmpty(m.items);
+         assert.strictEqual(selector({ items: [] }), false);
+      });
+
+      it("returns true for non-empty array", function () {
+         const selector = isNonEmpty(m.items);
+         assert.strictEqual(selector({ items: ["a", "b"] }), true);
+      });
+
+      it("returns false for null", function () {
+         const selector = isNonEmpty(m.nullable);
+         assert.strictEqual(selector({ nullable: null }), false);
+      });
+
+      it("returns false for undefined", function () {
+         const selector = isNonEmpty(m.nullable);
+         assert.strictEqual(selector({ nullable: undefined }), false);
+      });
+   });
+
+   describe("lessThan", function () {
+      it("returns true when value is less than target", function () {
+         const selector = lessThan(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), true);
+         assert.strictEqual(selector({ value: 9 }), true);
+      });
+
+      it("returns false when value is equal to target", function () {
+         const selector = lessThan(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), false);
+      });
+
+      it("returns false when value is greater than target", function () {
+         const selector = lessThan(m.value, 10);
+         assert.strictEqual(selector({ value: 11 }), false);
+         assert.strictEqual(selector({ value: 100 }), false);
+      });
+   });
+
+   describe("lessThanOrEqual", function () {
+      it("returns true when value is less than target", function () {
+         const selector = lessThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), true);
+         assert.strictEqual(selector({ value: 9 }), true);
+      });
+
+      it("returns true when value is equal to target", function () {
+         const selector = lessThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), true);
+      });
+
+      it("returns false when value is greater than target", function () {
+         const selector = lessThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 11 }), false);
+         assert.strictEqual(selector({ value: 100 }), false);
+      });
+   });
+
+   describe("greaterThan", function () {
+      it("returns true when value is greater than target", function () {
+         const selector = greaterThan(m.value, 10);
+         assert.strictEqual(selector({ value: 11 }), true);
+         assert.strictEqual(selector({ value: 100 }), true);
+      });
+
+      it("returns false when value is equal to target", function () {
+         const selector = greaterThan(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), false);
+      });
+
+      it("returns false when value is less than target", function () {
+         const selector = greaterThan(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), false);
+         assert.strictEqual(selector({ value: 9 }), false);
+      });
+   });
+
+   describe("greaterThanOrEqual", function () {
+      it("returns true when value is greater than target", function () {
+         const selector = greaterThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 11 }), true);
+         assert.strictEqual(selector({ value: 100 }), true);
+      });
+
+      it("returns true when value is equal to target", function () {
+         const selector = greaterThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), true);
+      });
+
+      it("returns false when value is less than target", function () {
+         const selector = greaterThanOrEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), false);
+         assert.strictEqual(selector({ value: 9 }), false);
+      });
+   });
+
+   describe("equal (loose equality)", function () {
+      it("returns true when value equals target", function () {
+         const selector = equal(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), true);
+      });
+
+      it("returns false when value does not equal target", function () {
+         const selector = equal(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), false);
+         assert.strictEqual(selector({ value: 11 }), false);
+      });
+
+      it("works with string values", function () {
+         const selector = equal(m.name, "hello");
+         assert.strictEqual(selector({ name: "hello" }), true);
+         assert.strictEqual(selector({ name: "world" }), false);
+      });
+
+      it("uses loose equality (null == undefined)", function () {
+         const selector = equal(m.nullable, null);
+         assert.strictEqual(selector({ nullable: null }), true);
+         assert.strictEqual(selector({ nullable: undefined }), true);
+      });
+   });
+
+   describe("notEqual (loose inequality)", function () {
+      it("returns false when value equals target", function () {
+         const selector = notEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), false);
+      });
+
+      it("returns true when value does not equal target", function () {
+         const selector = notEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), true);
+         assert.strictEqual(selector({ value: 11 }), true);
+      });
+
+      it("works with string values", function () {
+         const selector = notEqual(m.name, "hello");
+         assert.strictEqual(selector({ name: "hello" }), false);
+         assert.strictEqual(selector({ name: "world" }), true);
+      });
+
+      it("uses loose inequality (null == undefined)", function () {
+         const selector = notEqual(m.nullable, null);
+         assert.strictEqual(selector({ nullable: null }), false);
+         assert.strictEqual(selector({ nullable: undefined }), false);
+      });
+   });
+
+   describe("strictEqual", function () {
+      it("returns true when value strictly equals target", function () {
+         const selector = strictEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), true);
+      });
+
+      it("returns false when value does not strictly equal target", function () {
+         const selector = strictEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), false);
+         assert.strictEqual(selector({ value: 11 }), false);
+      });
+
+      it("uses strict equality (null !== undefined)", function () {
+         const selector = strictEqual(m.nullable, null);
+         assert.strictEqual(selector({ nullable: null }), true);
+         assert.strictEqual(selector({ nullable: undefined }), false);
+      });
+   });
+
+   describe("strictNotEqual", function () {
+      it("returns false when value strictly equals target", function () {
+         const selector = strictNotEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 10 }), false);
+      });
+
+      it("returns true when value does not strictly equal target", function () {
+         const selector = strictNotEqual(m.value, 10);
+         assert.strictEqual(selector({ value: 5 }), true);
+         assert.strictEqual(selector({ value: 11 }), true);
+      });
+
+      it("uses strict inequality (null !== undefined)", function () {
+         const selector = strictNotEqual(m.nullable, null);
+         assert.strictEqual(selector({ nullable: null }), false);
+         assert.strictEqual(selector({ nullable: undefined }), true);
+      });
+   });
+});
diff --git a/packages/cx/src/ui/exprHelpers.ts b/packages/cx/src/ui/exprHelpers.ts
new file mode 100644
index 000000000..7d0734f01
--- /dev/null
+++ b/packages/cx/src/ui/exprHelpers.ts
@@ -0,0 +1,78 @@
+import { AccessorChain } from "../data/createAccessorModelProxy";
+import { Selector } from "../data/Selector";
+import { expr } from "./expr";
+
+/** Returns a selector that converts the value to boolean using !! */
+export function truthy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !!x);
+}
+
+/** Returns a selector that checks if the value is falsy using ! */
+export function falsy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !x);
+}
+
+/** Returns a selector that checks if the value is strictly true (=== true) */
+export function isTrue(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === true);
+}
+
+/** Returns a selector that checks if the value is strictly false (=== false) */
+export function isFalse(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === false);
+}
+
+/** Returns a selector that checks if the value is not null or undefined (x != null) */
+export function hasValue<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => x != null);
+}
+
+/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
+export function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x == null || x.length === 0);
+}
+
+/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
+export function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x != null && x.length > 0);
+}
+
+/** Returns a selector that checks if the value is less than the given value */
+export function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x < value);
+}
+
+/** Returns a selector that checks if the value is less than or equal to the given value */
+export function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x <= value);
+}
+
+/** Returns a selector that checks if the value is greater than the given value */
+export function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x > value);
+}
+
+/** Returns a selector that checks if the value is greater than or equal to the given value */
+export function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x >= value);
+}
+
+/** Returns a selector that checks if the value equals the given value using == */
+export function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x == value);
+}
+
+/** Returns a selector that checks if the value does not equal the given value using != */
+export function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x != value);
+}
+
+/** Returns a selector that checks if the value strictly equals the given value using === */
+export function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x === value);
+}
+
+/** Returns a selector that checks if the value strictly does not equal the given value using !== */
+export function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x !== value);
+}
diff --git a/packages/cx/src/ui/flattenProps.js b/packages/cx/src/ui/flattenProps.js
deleted file mode 100644
index 42b98b7de..000000000
--- a/packages/cx/src/ui/flattenProps.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export const flattenProps = props => {
-
-   if (!props) return {};
-
-   if (props.jsxSpread) {
-      props = {
-         ...props,
-         ...props.jsxSpread.reduce((acc, prop) => Object.assign(acc, prop), {})
-      };
-   }
-
-   if (props.$props !== undefined) {
-      props = {
-         ...props.$props,
-         jsxAttributes: props.jsxAttributes,
-         children: props.children
-      };
-   }
-
-   return {...props};
-};
diff --git a/packages/cx/src/ui/flattenProps.ts b/packages/cx/src/ui/flattenProps.ts
new file mode 100644
index 000000000..cc3966c3f
--- /dev/null
+++ b/packages/cx/src/ui/flattenProps.ts
@@ -0,0 +1,21 @@
+export const flattenProps = (props: any): any => {
+
+   if (!props) return {};
+
+   if (props.jsxSpread) {
+      props = {
+         ...props,
+         ...props.jsxSpread.reduce((acc: any, prop: any) => Object.assign(acc, prop), {})
+      };
+   }
+
+   if (props.$props !== undefined) {
+      props = {
+         ...props.$props,
+         jsxAttributes: props.jsxAttributes,
+         children: props.children
+      };
+   }
+
+   return {...props};
+};
diff --git a/packages/cx/src/ui/index.d.ts b/packages/cx/src/ui/index.d.ts
deleted file mode 100644
index 35045326f..000000000
--- a/packages/cx/src/ui/index.d.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export * from "./Controller";
-export * from "./Widget";
-export * from "./Container";
-export * from "./PureContainer";
-export * from "./Repeater";
-export * from "./Rescope";
-export * from "./StaticText";
-export * from "./Text";
-export * from "./CSS";
-export * from "./CSSHelper";
-export * from "./FocusManager";
-export * from "./ResizeManager";
-export * from "./ZIndexManager";
-export * from "./Format";
-export * from "./Culture";
-export * from "./Localization";
-export * from "./Cx";
-export * from "./Instance";
-export * from "./RenderingContext";
-export * from "./ContentResolver";
-export * from "./batchUpdates";
-export * from "./IsolatedScope";
-export * from "./DetachedScope";
-export * from "./Restate";
-export * from "./DataProxy";
-export * from "./keyboardShortcuts";
-export * from "./createFunctionalComponent";
-export * from "./StructuredInstanceDataAccessor";
-export * from "./HoverSync";
-
-export * from "./selection/index";
-export * from "./layout/index";
-export * from "./app/index";
-export * from "./adapter/index";
-
-export * from "./bind";
-export * from "./tpl";
-export * from "./expr";
-
-//re-export computable here
-import { computable } from "../data/computable";
-export { computable };
diff --git a/packages/cx/src/ui/index.js b/packages/cx/src/ui/index.js
deleted file mode 100644
index 98be904a1..000000000
--- a/packages/cx/src/ui/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-export * from "./Controller";
-export * from "./Widget";
-export * from "./Container";
-export * from "./PureContainer";
-export * from "./Repeater";
-export * from "./Rescope";
-export * from "./StaticText";
-export * from "./Text";
-export * from "./CSS";
-export * from "./CSSHelper";
-export * from "./FocusManager";
-export * from "./ResizeManager";
-export * from "./ZIndexManager";
-export * from "./Format";
-export * from "./Culture";
-export * from "./Localization";
-export * from "./Cx";
-export * from "./Instance";
-export * from "./RenderingContext";
-export * from "./ContentResolver";
-export * from "./batchUpdates";
-export * from "./IsolatedScope";
-export * from "./DetachedScope";
-export * from "./Restate";
-export * from "./DataProxy";
-export * from "./keyboardShortcuts";
-export * from "./StructuredInstanceDataAccessor";
-export * from "./HoverSync";
-
-export * from "./createFunctionalComponent";
-export * from "./flattenProps";
-
-export * from "./selection/index";
-export * from "./layout/index";
-export * from "./app/index";
-export * from "./adapter/index";
-
-export * from "./bind";
-export * from "./tpl";
-export * from "./expr";
-
-//re-export computable here
-import { computable } from "../data/computable";
-export { computable };
diff --git a/packages/cx/src/ui/index.ts b/packages/cx/src/ui/index.ts
new file mode 100644
index 000000000..fb6a3bdd8
--- /dev/null
+++ b/packages/cx/src/ui/index.ts
@@ -0,0 +1,47 @@
+export * from "./Prop";
+export * from "./Controller";
+export * from "./Widget";
+export * from "./Container";
+export * from "./PureContainer";
+export * from "./Repeater";
+export * from "./Rescope";
+export * from "./StaticText";
+export * from "./Text";
+export * from "./CSS";
+export * from "./CSSHelper";
+export * from "./FocusManager";
+export * from "./ResizeManager";
+export * from "./ZIndexManager";
+export * from "./Format";
+export * from "./Culture";
+export * from "./Localization";
+export * from "./Cx";
+export * from "./Instance";
+export * from "./RenderingContext";
+export * from "./ContentResolver";
+export * from "./batchUpdates";
+export * from "./IsolatedScope";
+export * from "./DetachedScope";
+export * from "./Restate";
+export * from "./DataProxy";
+export * from "./keyboardShortcuts";
+export * from "./StructuredInstanceDataAccessor";
+export * from "./HoverSync";
+
+export * from "./createFunctionalComponent";
+export * from "./flattenProps";
+
+export * from "./selection/index";
+export * from "./layout/index";
+export * from "./app/index";
+export * from "./adapter/index";
+
+export * from "./bind";
+export * from "./tpl";
+export * from "./expr";
+export * from "./exprHelpers";
+
+//re-export computable here
+import { computable } from "../data/computable";
+import { createAccessorModelProxy, AccessorChain } from "../data/createAccessorModelProxy";
+export { computable, createAccessorModelProxy, AccessorChain };
diff --git a/packages/cx/src/ui/keyboardShortcuts.d.ts b/packages/cx/src/ui/keyboardShortcuts.d.ts
deleted file mode 100644
index 1177b63e8..000000000
--- a/packages/cx/src/ui/keyboardShortcuts.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type KeyboardShortcut = number | { keyCode: number, ctrlKey?: boolean, shiftKey?: boolean, altKey?: boolean };
-
-export function executeKeyboardShortcuts(e: KeyboardEvent);
-
-export function registerKeyboardShortcut(key: KeyboardShortcut, callback: (e: KeyboardEvent) => void);
\ No newline at end of file
diff --git a/packages/cx/src/ui/keyboardShortcuts.js b/packages/cx/src/ui/keyboardShortcuts.js
deleted file mode 100644
index 5e5426c8f..000000000
--- a/packages/cx/src/ui/keyboardShortcuts.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { SubscriberList } from "../util/SubscriberList";
-import { isObject } from "../util/isObject";
-
-let subscribers, eventBan = 0;
-
-export function executeKeyboardShortcuts(e) {
-   if (Date.now() < eventBan) return;
-   // Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
-   eventBan = Date.now() + 5;
-   subscribers && subscribers.notify(e);
-}
-
-export function registerKeyboardShortcut(key, callback) {
-   const keyCode = isObject(key) ? key.keyCode : key;
-   const shiftKey = isObject(key) ? key.shiftKey : false;
-   const ctrlKey = isObject(key) ? key.ctrlKey : false;
-   const altKey = isObject(key) ? key.altKey : false;
-
-   if (!subscribers) {
-      subscribers = new SubscriberList();
-      document.addEventListener("keydown", e => {
-         if (e.target == document.body)
-            executeKeyboardShortcuts(e);
-      });
-   }
-
-   return subscribers.subscribe(e => {
-      if (e.keyCode == keyCode && (!shiftKey || e.shiftKey) && (!ctrlKey || e.ctrlKey) && (!altKey || e.altKey))
-         callback(e);
-   });
-}
diff --git a/packages/cx/src/ui/keyboardShortcuts.ts b/packages/cx/src/ui/keyboardShortcuts.ts
new file mode 100644
index 000000000..e301b6788
--- /dev/null
+++ b/packages/cx/src/ui/keyboardShortcuts.ts
@@ -0,0 +1,40 @@
+import { SubscriberList } from "../util/SubscriberList";
+import { isObject } from "../util/isObject";
+
+interface KeyDescriptor {
+   keyCode: number;
+   shiftKey?: boolean;
+   ctrlKey?: boolean;
+   altKey?: boolean;
+}
+
+export type KeyboardShortcut = number | KeyDescriptor;
+
+let subscribers: any, eventBan = 0;
+
+export function executeKeyboardShortcuts(e: KeyboardEvent) {
+   if (Date.now() < eventBan) return;
+   // Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
+   eventBan = Date.now() + 5;
+   subscribers && subscribers.notify(e);
+}
+
+export function registerKeyboardShortcut(key: number | KeyDescriptor, callback: (e: KeyboardEvent) => void) {
+   const keyCode = isObject(key) ? (key as KeyDescriptor).keyCode : key;
+   const shiftKey = isObject(key) ? (key as KeyDescriptor).shiftKey : false;
+   const ctrlKey = isObject(key) ? (key as KeyDescriptor).ctrlKey : false;
+   const altKey = isObject(key) ? (key as KeyDescriptor).altKey : false;
+
+   if (!subscribers) {
+      subscribers = new SubscriberList();
+      document.addEventListener("keydown", (e: any) => {
+         if (e.target == document.body)
+            executeKeyboardShortcuts(e);
+      });
+   }
+
+   return subscribers.subscribe((e: any) => {
+      if (e.keyCode == keyCode && (!shiftKey || e.shiftKey) && (!ctrlKey || e.ctrlKey) && (!altKey || e.altKey))
+         callback(e);
+   });
+}
diff --git a/packages/cx/src/ui/layout/Content.d.ts b/packages/cx/src/ui/layout/Content.d.ts
deleted file mode 100644
index 57739c767..000000000
--- a/packages/cx/src/ui/layout/Content.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as Cx from "../../core";
-
-interface ContentProps extends Cx.PureContainerProps {
-   /** Placeholder name where the content is rendered. */
-   name?: string;
-
-   /** Placeholder name where the content is rendered. */
-   for?: string;
-
-   /** Placeholder name where the content is rendered. */
-   putInto?: string;
-}
-
-export class Content extends Cx.Widget<ContentProps> {}
diff --git a/packages/cx/src/ui/layout/Content.js b/packages/cx/src/ui/layout/Content.js
deleted file mode 100644
index 9e2f159f5..000000000
--- a/packages/cx/src/ui/layout/Content.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {Widget} from '../Widget';
-import {PureContainer} from '../PureContainer';
-
-export class Content extends PureContainer {
-
-   init() {
-      super.init();
-      this.putInto = this.for || this.name;
-   }
-}
-
-Content.prototype.name = 'body';
-Content.prototype.isContent = true;
-
-Widget.alias('content', Content);
-
diff --git a/packages/cx/src/ui/layout/Content.ts b/packages/cx/src/ui/layout/Content.ts
new file mode 100644
index 000000000..f8b94ab68
--- /dev/null
+++ b/packages/cx/src/ui/layout/Content.ts
@@ -0,0 +1,30 @@
+import { Widget } from "../Widget";
+import { PureContainerBase, PureContainerConfig } from "../PureContainer";
+import { Instance } from "../Instance";
+
+export interface ContentConfig extends PureContainerConfig {
+   /** Placeholder name where the content is rendered. */
+   name?: string;
+
+   /** Placeholder name where the content is rendered. */
+   for?: string;
+}
+
+export class Content extends PureContainerBase<ContentConfig, Instance> {
+   declare name?: string;
+   declare for?: string;
+
+   constructor(config?: ContentConfig) {
+      super(config);
+   }
+
+   init(): void {
+      super.init();
+      if (!this.putInto) this.putInto = this.for || this.name;
+   }
+}
+
+Content.prototype.name = "body";
+Content.prototype.isContent = true;
+
+Widget.alias("content", Content);
diff --git a/packages/cx/src/ui/layout/ContentPlaceholder.d.ts b/packages/cx/src/ui/layout/ContentPlaceholder.d.ts
deleted file mode 100644
index e96237fbd..000000000
--- a/packages/cx/src/ui/layout/ContentPlaceholder.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as Cx from "../../core";
-import { RenderingContext } from "../RenderingContext";
-
-interface ContentPlaceholderProps extends Cx.PureContainerProps {
-   name?: Cx.StringProp;
-
-   scoped?: boolean;
-
-   /* Set to true to allow all registered content elements to render inside the placeholder. Otherwise only one element is rendered. */
-   allowMultiple?: boolean;
-}
-
-export class ContentPlaceholder extends Cx.Widget<ContentPlaceholderProps> {}
-
-interface ContentPlaceholderScopeProps extends Cx.PureContainerProps {
-   name?: string | string[];
-}
-
-export class ContentPlaceholderScope extends Cx.Widget<ContentPlaceholderScopeProps> {}
diff --git a/packages/cx/src/ui/layout/ContentPlaceholder.js b/packages/cx/src/ui/layout/ContentPlaceholder.js
deleted file mode 100644
index 6dcd679e2..000000000
--- a/packages/cx/src/ui/layout/ContentPlaceholder.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Widget } from "../Widget";
-import { PureContainer } from "../PureContainer";
-import { isString } from "../../util/isString";
-import { isNonEmptyArray } from "../../util/isNonEmptyArray";
-
-export class ContentPlaceholder extends PureContainer {
-   declareData() {
-      super.declareData(...arguments, {
-         name: undefined,
-      });
-   }
-
-   explore(context, instance) {
-      instance.content = null;
-      let { data } = instance;
-
-      if (this.allowMultiple) {
-         const contentList = context.contentList && context.contentList[data.name];
-         if (isNonEmptyArray(contentList) && !this.scoped)
-            for (let i = 0; i < contentList.length; i++) this.setContent(context, instance, contentList[i]);
-
-         // in multi mode register a callback to allow for more entries to be added
-         context.pushNamedValue("contentPlaceholder", data.name, (content) => {
-            this.setContent(context, instance, content);
-         });
-      } else {
-         const content = context.content && context.content[data.name];
-         if (content && !this.scoped) this.setContent(context, instance, content);
-         else
-            context.pushNamedValue("contentPlaceholder", data.name, (content) => {
-               this.setContent(context, instance, content);
-            });
-      }
-
-      if (this.scoped)
-         instance.unregisterContentPlaceholder = () => {
-            context.popNamedValue("contentPlaceholder", data.name);
-         };
-
-      super.explore(context, instance);
-   }
-
-   prepare(context, instance) {
-      let { content } = instance;
-      if (this.allowMultiple) {
-         let contentId = "";
-         let shouldUpdate = false;
-         if (content) {
-            for (let i = 0; i < content.length; i++) {
-               let c = content[i];
-               contentId += c.id + "+";
-               shouldUpdate = shouldUpdate || c.shouldUpdate;
-            }
-         }
-         if (instance.cache("content", contentId) || shouldUpdate) instance.markShouldUpdate(context);
-      } else if (instance.cache("content", content) || (content && content.shouldUpdate))
-         instance.markShouldUpdate(context);
-   }
-
-   setContent(context, instance, content) {
-      if (this.allowMultiple) {
-         if (instance.content == null) instance.content = [];
-         instance.content.push(content);
-      } else instance.content = content;
-      content.contentPlaceholder = instance;
-   }
-
-   render(context, instance, key) {
-      const { content } = instance;
-      if (!content) return super.render(context, instance, key);
-      if (this.allowMultiple) return content.map((x) => x.contentVDOM);
-      return content.contentVDOM;
-   }
-}
-
-ContentPlaceholder.prototype.name = "body";
-ContentPlaceholder.prototype.scoped = false;
-ContentPlaceholder.prototype.allowMultiple = false;
-
-Widget.alias("content-placeholder", ContentPlaceholder);
-
-export class ContentPlaceholderScope extends PureContainer {
-   init() {
-      super.init();
-
-      if (isString(this.name)) this.name = [this.name];
-   }
-
-   explore(context, instance) {
-      this.name.forEach((name) => {
-         context.pushNamedValue("contentPlaceholder", name, null);
-         context.pushNamedValue("content", name, null);
-         context.pushNamedValue("contentList", name, []);
-      });
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      this.name.forEach((name) => {
-         context.popNamedValue("contentPlaceholder", name);
-         context.popNamedValue("content", name);
-         context.popNamedValue("contentList", name);
-      });
-   }
-}
diff --git a/packages/cx/src/ui/layout/ContentPlaceholder.spec.js b/packages/cx/src/ui/layout/ContentPlaceholder.spec.js
deleted file mode 100644
index 98a94e962..000000000
--- a/packages/cx/src/ui/layout/ContentPlaceholder.spec.js
+++ /dev/null
@@ -1,579 +0,0 @@
-import { Cx } from "../Cx";
-import { VDOM } from "../Widget";
-import { HtmlElement } from "../../widgets/HtmlElement";
-import { Store } from "../../data/Store";
-import { Controller } from "../Controller";
-import { ContentPlaceholder, ContentPlaceholderScope } from "./ContentPlaceholder";
-
-import renderer from "react-test-renderer";
-import assert from "assert";
-import { PureContainer } from "../PureContainer";
-
-describe("ContentPlaceholder", () => {
-   it("allows putting content inside", () => {
-      let store = new Store();
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div>
-               <header>
-                  <ContentPlaceholder name="header" />
-               </header>
-               <main>
-                  <h2 putInto="header">Header</h2>
-               </main>
-            </div>
-         </Cx>,
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "header",
-               props: {},
-               children: [
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header"],
-                  },
-               ],
-            },
-            {
-               type: "main",
-               props: {},
-               children: null,
-            },
-         ],
-      });
-   });
-
-   it("updates content on change", () => {
-      let store = new Store({
-         data: {
-            headerText: "Header",
-         },
-      });
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div>
-               <ContentPlaceholder name="header" />
-               <h2 putInto="header" text:bind="headerText" />
-            </div>
-         </Cx>,
-      );
-
-      let getTree = (headerText) => ({
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "h2",
-               props: {},
-               children: [headerText],
-            },
-         ],
-      });
-
-      assert.deepEqual(component.toJSON(), getTree("Header"));
-      store.set("headerText", "Footer");
-      assert.deepEqual(component.toJSON(), getTree("Footer"));
-   });
-
-   it("allows putting multiple entries inside", () => {
-      let store = new Store();
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div>
-               <header>
-                  <ContentPlaceholder name="headers" allowMultiple />
-               </header>
-               <main>
-                  <h2 putInto="headers">Header1</h2>
-                  <h2 putInto="headers">Header2</h2>
-               </main>
-            </div>
-         </Cx>,
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "header",
-               props: {},
-               children: [
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header1"],
-                  },
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header2"],
-                  },
-               ],
-            },
-            {
-               type: "main",
-               props: {},
-               children: null,
-            },
-         ],
-      });
-   });
-
-   it("allows putting multiple entries inside when content is defined before and after the placeholder", () => {
-      let store = new Store();
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div>
-               <PureContainer>
-                  <h2 putInto="headers">Header1</h2>
-                  <h2 putInto="headers">Header2</h2>
-               </PureContainer>
-               <header>
-                  <ContentPlaceholder name="headers" allowMultiple />
-               </header>
-               <PureContainer>
-                  <h2 putInto="headers">Header3</h2>
-                  <h2 putInto="headers">Header4</h2>
-               </PureContainer>
-            </div>
-         </Cx>,
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "header",
-               props: {},
-               children: [
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header1"],
-                  },
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header2"],
-                  },
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header3"],
-                  },
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header4"],
-                  },
-               ],
-            },
-         ],
-      });
-   });
-
-   it("allows putting multiple entries into separate placeholders using content placeholder scopes", () => {
-      let store = new Store();
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div>
-               <ContentPlaceholderScope name="headers">
-                  <h2 putInto="headers">Header1</h2>
-                  <h2 putInto="headers">Header2</h2>
-                  <header>
-                     <ContentPlaceholder name="headers" allowMultiple />
-                  </header>
-               </ContentPlaceholderScope>
-
-               <ContentPlaceholderScope name="headers">
-                  <header>
-                     <ContentPlaceholder name="headers" allowMultiple />
-                  </header>
-                  <h2 putInto="headers">Header3</h2>
-                  <h2 putInto="headers">Header4</h2>
-               </ContentPlaceholderScope>
-            </div>
-         </Cx>,
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "header",
-               props: {},
-               children: [
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header1"],
-                  },
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header2"],
-                  },
-               ],
-            },
-            {
-               type: "header",
-               props: {},
-               children: [
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header3"],
-                  },
-                  {
-                     type: "h2",
-                     props: {},
-                     children: ["Header4"],
-                  },
-               ],
-            },
-         ],
-      });
-   });
-
-   it("is used for defining body position in outer layouts", () => {
-      let store = new Store();
-
-      let layout = (
-         <cx>
-            <div>
-               <header>Header</header>
-               <ContentPlaceholder />
-               <footer>Footer</footer>
-            </div>
-         </cx>
-      );
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <main outerLayout={layout} />
-         </Cx>,
-      );
-
-      assert.deepEqual(component.toJSON(), {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "header",
-               props: {},
-               children: ["Header"],
-            },
-            {
-               type: "main",
-               props: {},
-               children: null,
-            },
-            {
-               type: "footer",
-               props: {},
-               children: ["Footer"],
-            },
-         ],
-      });
-   });
-
-   it("data in deeply nested placeholders is correctly updated", () => {
-      let store = new Store({
-         data: {
-            header: "H",
-            footer: "F",
-            body: "B",
-         },
-      });
-
-      let layout = (
-         <cx>
-            <div>
-               <header>
-                  <ContentPlaceholder name="header" />
-               </header>
-               <ContentPlaceholder />
-               <footer>
-                  <ContentPlaceholder name="footer" />
-               </footer>
-            </div>
-         </cx>
-      );
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <main outerLayout={layout}>
-               <div putInto="header">
-                  <span text:bind="header" />
-               </div>
-               <div putInto="footer">
-                  <span text:bind="footer" />
-               </div>
-               <span text:bind="body" />
-            </main>
-         </Cx>,
-      );
-
-      let getTree = (h, b, f) => ({
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "header",
-               props: {},
-               children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
-            },
-            {
-               type: "main",
-               props: {},
-               children: [{ type: "span", props: {}, children: [b] }],
-            },
-            {
-               type: "footer",
-               props: {},
-               children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
-            },
-         ],
-      });
-
-      assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
-      store.set("header", "H2");
-      assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
-      store.set("footer", "F2");
-      assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
-      store.set("body", "B2");
-      assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
-   });
-
-   it("inside a two-level deep outer-layout works", () => {
-      let store = new Store();
-
-      let outerLayout = (
-         <cx>
-            <div>
-               <ContentPlaceholder />
-            </div>
-         </cx>
-      );
-
-      let innerLayout = (
-         <cx>
-            <main outerLayout={outerLayout}>
-               <ContentPlaceholder />
-            </main>
-         </cx>
-      );
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <section outerLayout={innerLayout} />
-         </Cx>,
-      );
-
-      let tree = component.toJSON();
-      //console.log(tree);
-
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "main",
-               props: {},
-               children: [
-                  {
-                     type: "section",
-                     props: {},
-                     children: null,
-                  },
-               ],
-            },
-         ],
-      });
-   });
-
-   it("works in strange order", () => {
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <div>
-               <ContentPlaceholder name="footer" />
-               <PureContainer putInto="footer-content">works</PureContainer>
-               <PureContainer putInto="footer">
-                  It
-                  <ContentPlaceholder name="footer-content">doesn't work</ContentPlaceholder>
-               </PureContainer>
-            </div>
-         </Cx>,
-      );
-
-      let tree = component.toJSON();
-      //console.log(tree);
-
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: ["It", "works"],
-      });
-   });
-
-   it("inside a complex two-level-deep outer-layout works", () => {
-      let store = new Store();
-
-      let outerLayout = (
-         <cx>
-            <div>
-               <ContentPlaceholder />
-            </div>
-         </cx>
-      );
-
-      let innerLayout = (
-         <cx>
-            <PureContainer>
-               <main outerLayout={outerLayout}>
-                  <ContentPlaceholder />
-               </main>
-            </PureContainer>
-         </cx>
-      );
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <section outerLayout={innerLayout} />
-         </Cx>,
-      );
-
-      assert.deepEqual(component.toJSON(), {
-         type: "div",
-         props: {},
-         children: [{ type: "main", props: {}, children: [{ type: "section", props: {}, children: null }] }],
-      });
-   });
-
-   it("each level use an outer-layout", () => {
-      let store = new Store();
-
-      let outerLayout1 = (
-         <cx>
-            <div>
-               <ContentPlaceholder />
-            </div>
-         </cx>
-      );
-
-      let outerLayout2 = (
-         <cx>
-            <main>
-               <ContentPlaceholder />
-            </main>
-         </cx>
-      );
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <PureContainer outerLayout={outerLayout1}>
-               <PureContainer outerLayout={outerLayout2}>Content</PureContainer>
-            </PureContainer>
-         </Cx>,
-      );
-
-      assert.deepEqual(component.toJSON(), {
-         type: "div",
-         props: {},
-         children: [{ type: "main", props: {}, children: ["Content"] }],
-      });
-   });
-
-   it("data in a two-level deep outer-layout is correctly updated", () => {
-      let store = new Store({
-         data: {
-            header: "H",
-            footer: "F",
-            body: "B",
-         },
-      });
-
-      let outerLayout = (
-         <cx>
-            <div>
-               <ContentPlaceholder />
-               <footer>
-                  <ContentPlaceholder name="footer" />
-               </footer>
-            </div>
-         </cx>
-      );
-
-      let innerLayout = (
-         <cx>
-            <PureContainer>
-               <PureContainer outerLayout={outerLayout}>
-                  <header>
-                     <ContentPlaceholder name="header" />
-                  </header>
-                  <ContentPlaceholder />
-               </PureContainer>
-            </PureContainer>
-         </cx>
-      );
-
-      const component = renderer.create(
-         <Cx store={store} subscribe immediate>
-            <main outerLayout={innerLayout}>
-               <div putInto="header">
-                  <span text:bind="header" />
-               </div>
-               <div putInto="footer">
-                  <span text:bind="footer" />
-               </div>
-               <span text:bind="body" />
-            </main>
-         </Cx>,
-      );
-
-      let getTree = (h, b, f) => ({
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "header",
-               props: {},
-               children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
-            },
-            {
-               type: "main",
-               props: {},
-               children: [{ type: "span", props: {}, children: [b] }],
-            },
-            {
-               type: "footer",
-               props: {},
-               children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
-            },
-         ],
-      });
-
-      assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
-      store.set("header", "H2");
-      assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
-      store.set("footer", "F2");
-      assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
-      store.set("body", "B2");
-      assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
-   });
-});
diff --git a/packages/cx/src/ui/layout/ContentPlaceholder.spec.tsx b/packages/cx/src/ui/layout/ContentPlaceholder.spec.tsx
new file mode 100644
index 000000000..aa705b72e
--- /dev/null
+++ b/packages/cx/src/ui/layout/ContentPlaceholder.spec.tsx
@@ -0,0 +1,599 @@
+import { Store } from "../../data/Store";
+import { ContentPlaceholder, ContentPlaceholderScope } from "./ContentPlaceholder";
+import assert from "assert";
+import { PureContainer } from "../PureContainer";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
+import { bind } from "../bind";
+
+describe("ContentPlaceholder", () => {
+   it("allows putting content inside", async () => {
+      let store = new Store();
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div>
+               <header>
+                  <ContentPlaceholder name="header" />
+               </header>
+               <main>
+                  <h2 putInto="header">Header</h2>
+               </main>
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "header",
+               props: {},
+               children: [
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header"],
+                  },
+               ],
+            },
+            {
+               type: "main",
+               props: {},
+               children: null,
+            },
+         ],
+      });
+   });
+
+   it("updates content on change", async () => {
+      let store = new Store({
+         data: {
+            headerText: "Header",
+         },
+      });
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div>
+               <ContentPlaceholder name="header" />
+               <h2 putInto="header" text={bind("headerText")} />
+            </div>
+         </cx>,
+      );
+
+      let getTree = (headerText: string) => ({
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "h2",
+               props: {},
+               children: [headerText],
+            },
+         ],
+      });
+
+      assert.deepEqual(component.toJSON(), getTree("Header"));
+      await act(async () => {
+         store.set("headerText", "Footer");
+      });
+      assert.deepEqual(component.toJSON(), getTree("Footer"));
+   });
+
+   it("allows putting multiple entries inside", async () => {
+      let store = new Store();
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div>
+               <header>
+                  <ContentPlaceholder name="headers" allowMultiple />
+               </header>
+               <main>
+                  <h2 putInto="headers">Header1</h2>
+                  <h2 putInto="headers">Header2</h2>
+               </main>
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "header",
+               props: {},
+               children: [
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header1"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header2"],
+                  },
+               ],
+            },
+            {
+               type: "main",
+               props: {},
+               children: null,
+            },
+         ],
+      });
+   });
+
+   it("allows putting multiple entries inside when content is defined before and after the placeholder", async () => {
+      let store = new Store();
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div>
+               <PureContainer>
+                  <h2 putInto="headers">Header1</h2>
+                  <h2 putInto="headers">Header2</h2>
+               </PureContainer>
+               <header>
+                  <ContentPlaceholder name="headers" allowMultiple />
+               </header>
+               <PureContainer>
+                  <h2 putInto="headers">Header3</h2>
+                  <h2 putInto="headers">Header4</h2>
+               </PureContainer>
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "header",
+               props: {},
+               children: [
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header1"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header2"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header3"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header4"],
+                  },
+               ],
+            },
+         ],
+      });
+   });
+
+   it("allows putting multiple entries into separate placeholders using content placeholder scopes", async () => {
+      let store = new Store();
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div>
+               <ContentPlaceholderScope name="headers">
+                  <h2 putInto="headers">Header1</h2>
+                  <h2 putInto="headers">Header2</h2>
+                  <header>
+                     <ContentPlaceholder name="headers" allowMultiple />
+                  </header>
+               </ContentPlaceholderScope>
+
+               <ContentPlaceholderScope name="headers">
+                  <header>
+                     <ContentPlaceholder name="headers" allowMultiple />
+                  </header>
+                  <h2 putInto="headers">Header3</h2>
+                  <h2 putInto="headers">Header4</h2>
+               </ContentPlaceholderScope>
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "header",
+               props: {},
+               children: [
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header1"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header2"],
+                  },
+               ],
+            },
+            {
+               type: "header",
+               props: {},
+               children: [
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header3"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header4"],
+                  },
+               ],
+            },
+         ],
+      });
+   });
+
+   it("is used for defining body position in outer layouts", async () => {
+      let store = new Store();
+
+      let layout = (
+         <cx>
+            <div>
+               <header>Header</header>
+               <ContentPlaceholder />
+               <footer>Footer</footer>
+            </div>
+         </cx>
+      );
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <main outerLayout={layout} />
+         </cx>,
+      );
+
+      assert.deepEqual(component.toJSON(), {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "header",
+               props: {},
+               children: ["Header"],
+            },
+            {
+               type: "main",
+               props: {},
+               children: null,
+            },
+            {
+               type: "footer",
+               props: {},
+               children: ["Footer"],
+            },
+         ],
+      });
+   });
+
+   it("data in deeply nested placeholders is correctly updated", async () => {
+      let store = new Store({
+         data: {
+            header: "H",
+            footer: "F",
+            body: "B",
+         },
+      });
+
+      let layout = (
+         <cx>
+            <div>
+               <header>
+                  <ContentPlaceholder name="header" />
+               </header>
+               <ContentPlaceholder />
+               <footer>
+                  <ContentPlaceholder name="footer" />
+               </footer>
+            </div>
+         </cx>
+      );
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <main outerLayout={layout}>
+               <div putInto="header">
+                  <span text={bind("header")} />
+               </div>
+               <div putInto="footer">
+                  <span text={bind("footer")} />
+               </div>
+               <span text={bind("body")} />
+            </main>
+         </cx>,
+      );
+
+      let getTree = (h: string, b: string, f: string) => ({
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "header",
+               props: {},
+               children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
+            },
+            {
+               type: "main",
+               props: {},
+               children: [{ type: "span", props: {}, children: [b] }],
+            },
+            {
+               type: "footer",
+               props: {},
+               children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
+            },
+         ],
+      });
+
+      assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
+      await act(async () => {
+         store.set("header", "H2");
+      });
+      assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
+      await act(async () => {
+         store.set("footer", "F2");
+      });
+      assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
+      await act(async () => {
+         store.set("body", "B2");
+      });
+      assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
+   });
+
+   it("inside a two-level deep outer-layout works", async () => {
+      let store = new Store();
+
+      let outerLayout = (
+         <cx>
+            <div>
+               <ContentPlaceholder />
+            </div>
+         </cx>
+      );
+
+      let innerLayout = (
+         <cx>
+            <main outerLayout={outerLayout}>
+               <ContentPlaceholder />
+            </main>
+         </cx>
+      );
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <section outerLayout={innerLayout} />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "main",
+               props: {},
+               children: [
+                  {
+                     type: "section",
+                     props: {},
+                     children: null,
+                  },
+               ],
+            },
+         ],
+      });
+   });
+
+   it("works in strange order", async () => {
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div>
+               <ContentPlaceholder name="footer" />
+               <PureContainer putInto="footer-content">works</PureContainer>
+               <PureContainer putInto="footer">
+                  It
+                  <ContentPlaceholder name="footer-content">doesn't work</ContentPlaceholder>
+               </PureContainer>
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["It", "works"],
+      });
+   });
+
+   it("inside a complex two-level-deep outer-layout works", async () => {
+      let store = new Store();
+
+      let outerLayout = (
+         <cx>
+            <div>
+               <ContentPlaceholder />
+            </div>
+         </cx>
+      );
+
+      let innerLayout = (
+         <cx>
+            <PureContainer>
+               <main outerLayout={outerLayout}>
+                  <ContentPlaceholder />
+               </main>
+            </PureContainer>
+         </cx>
+      );
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <section outerLayout={innerLayout} />
+         </cx>,
+      );
+
+      assert.deepEqual(component.toJSON(), {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: [{ type: "section", props: {}, children: null }] }],
+      });
+   });
+
+   it("each level use an outer-layout", async () => {
+      let store = new Store();
+
+      let outerLayout1 = (
+         <cx>
+            <div>
+               <ContentPlaceholder />
+            </div>
+         </cx>
+      );
+
+      let outerLayout2 = (
+         <cx>
+            <main>
+               <ContentPlaceholder />
+            </main>
+         </cx>
+      );
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <PureContainer outerLayout={outerLayout1}>
+               <PureContainer outerLayout={outerLayout2}>Content</PureContainer>
+            </PureContainer>
+         </cx>,
+      );
+
+      assert.deepEqual(component.toJSON(), {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: ["Content"] }],
+      });
+   });
+
+   it("data in a two-level deep outer-layout is correctly updated", async () => {
+      let store = new Store({
+         data: {
+            header: "H",
+            footer: "F",
+            body: "B",
+         },
+      });
+
+      let outerLayout = (
+         <cx>
+            <div>
+               <ContentPlaceholder />
+               <footer>
+                  <ContentPlaceholder name="footer" />
+               </footer>
+            </div>
+         </cx>
+      );
+
+      let innerLayout = (
+         <cx>
+            <PureContainer>
+               <PureContainer outerLayout={outerLayout}>
+                  <header>
+                     <ContentPlaceholder name="header" />
+                  </header>
+                  <ContentPlaceholder />
+               </PureContainer>
+            </PureContainer>
+         </cx>
+      );
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <main outerLayout={innerLayout}>
+               <div putInto="header">
+                  <span text={bind("header")} />
+               </div>
+               <div putInto="footer">
+                  <span text={bind("footer")} />
+               </div>
+               <span text={bind("body")} />
+            </main>
+         </cx>,
+      );
+
+      let getTree = (h: string, b: string, f: string) => ({
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "header",
+               props: {},
+               children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
+            },
+            {
+               type: "main",
+               props: {},
+               children: [{ type: "span", props: {}, children: [b] }],
+            },
+            {
+               type: "footer",
+               props: {},
+               children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
+            },
+         ],
+      });
+
+      assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
+      await act(async () => {
+         store.set("header", "H2");
+      });
+      assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
+      await act(async () => {
+         store.set("footer", "F2");
+      });
+      assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
+      await act(async () => {
+         store.set("body", "B2");
+      });
+      assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
+   });
+});
diff --git a/packages/cx/src/ui/layout/ContentPlaceholder.ts b/packages/cx/src/ui/layout/ContentPlaceholder.ts
new file mode 100644
index 000000000..04d033761
--- /dev/null
+++ b/packages/cx/src/ui/layout/ContentPlaceholder.ts
@@ -0,0 +1,133 @@
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { isString } from "../../util/isString";
+import { PureContainerBase, PureContainerConfig } from "../PureContainer";
+import { RenderingContext } from "../RenderingContext";
+import { Widget } from "../Widget";
+import { StringProp } from "../Prop";
+import { Instance } from "../Instance";
+
+export interface ContentPlaceholderConfig extends PureContainerConfig {
+   /** Name of the placeholder. Default is `body`. */
+   name?: StringProp;
+
+   /** Set to `true` to scope the placeholder to a local context. */
+   scoped?: boolean;
+
+   /** Set to `true` to allow all registered content elements to render inside the placeholder. Otherwise only one element is rendered. */
+   allowMultiple?: boolean;
+}
+
+export class ContentPlaceholderInstance extends Instance<ContentPlaceholder> {
+   declare content?: any;
+   unregisterContentPlaceholder?: () => void;
+}
+
+export class ContentPlaceholder extends PureContainerBase<ContentPlaceholderConfig, ContentPlaceholderInstance> {
+   declare name?: string;
+   declare scoped?: boolean;
+   declare allowMultiple?: boolean;
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         name: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: ContentPlaceholderInstance): void {
+      instance.content = null;
+      let { data } = instance;
+
+      if (this.allowMultiple) {
+         const contentList = (context as any).contentList && (context as any).contentList[data.name];
+         if (isNonEmptyArray(contentList) && !this.scoped)
+            for (let i = 0; i < contentList.length; i++) this.setContent(context, instance, contentList[i]);
+
+         // in multi mode register a callback to allow for more entries to be added
+         (context as any).pushNamedValue("contentPlaceholder", data.name, (content: any) => {
+            this.setContent(context, instance, content);
+         });
+      } else {
+         const content = (context as any).content && (context as any).content[data.name];
+         if (content && !this.scoped) this.setContent(context, instance, content);
+         else
+            (context as any).pushNamedValue("contentPlaceholder", data.name, (content: any) => {
+               this.setContent(context, instance, content);
+            });
+      }
+
+      if (this.scoped)
+         instance.unregisterContentPlaceholder = () => {
+            (context as any).popNamedValue("contentPlaceholder", data.name);
+         };
+
+      super.explore(context, instance);
+   }
+
+   prepare(context: RenderingContext, instance: ContentPlaceholderInstance): void {
+      let { content } = instance;
+      if (this.allowMultiple) {
+         let contentId = "";
+         let shouldUpdate = false;
+         if (content) {
+            for (let i = 0; i < content.length; i++) {
+               let c = content[i];
+               contentId += c.id + "+";
+               shouldUpdate = shouldUpdate || c.shouldUpdate;
+            }
+         }
+         if (instance.cache("content", contentId) || shouldUpdate) instance.markShouldUpdate(context);
+      } else if (instance.cache("content", content) || (content && content.shouldUpdate))
+         instance.markShouldUpdate(context);
+   }
+
+   setContent(context: RenderingContext, instance: ContentPlaceholderInstance, content: any): void {
+      if (this.allowMultiple) {
+         if (instance.content == null) instance.content = [];
+         instance.content.push(content);
+      } else instance.content = content;
+      content.contentPlaceholder = instance;
+   }
+
+   render(context: RenderingContext, instance: ContentPlaceholderInstance, key: any): any {
+      const { content } = instance;
+      if (!content) return super.render(context, instance, key);
+      if (this.allowMultiple) return content.map((x: any) => x.contentVDOM);
+      return content.contentVDOM;
+   }
+}
+
+ContentPlaceholder.prototype.name = "body";
+ContentPlaceholder.prototype.scoped = false;
+ContentPlaceholder.prototype.allowMultiple = false;
+
+Widget.alias("content-placeholder", ContentPlaceholder);
+
+export interface ContentPlaceholderScopeConfig extends PureContainerConfig {
+   name: string | string[];
+}
+
+export class ContentPlaceholderScope extends PureContainerBase<ContentPlaceholderScopeConfig> {
+   declare name: string[];
+
+   init(): void {
+      super.init();
+      if (isString(this.name)) this.name = [this.name];
+   }
+
+   explore(context: RenderingContext, instance: any): void {
+      this.name.forEach((name) => {
+         context.pushNamedValue("contentPlaceholder", name, null);
+         context.pushNamedValue("content", name, null);
+         context.pushNamedValue("contentList", name, []);
+      });
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      this.name.forEach((name) => {
+         context.popNamedValue("contentPlaceholder", name);
+         context.popNamedValue("content", name);
+         context.popNamedValue("contentList", name);
+      });
+   }
+}
diff --git a/packages/cx/src/ui/layout/FirstVisibleChildLayout.d.ts b/packages/cx/src/ui/layout/FirstVisibleChildLayout.d.ts
deleted file mode 100644
index c30f1d35b..000000000
--- a/packages/cx/src/ui/layout/FirstVisibleChildLayout.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as Cx from '../../core';
-import { PureContainer } from '../PureContainer';
-
-export class FirstVisibleChildLayout extends PureContainer {}
diff --git a/packages/cx/src/ui/layout/FirstVisibleChildLayout.js b/packages/cx/src/ui/layout/FirstVisibleChildLayout.js
deleted file mode 100644
index 2b21b7198..000000000
--- a/packages/cx/src/ui/layout/FirstVisibleChildLayout.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import {PureContainer} from "../PureContainer";
-
-function isVisibleDeep(instance) {
-   if (instance.visible && (!instance.widget.isPureContainer || !instance.widget.useParentLayout))
-      return true;
-   if (instance.children) {
-      for (let i = 0; i < instance.children.length; i++)
-         if (isVisibleDeep(instance.children[i]))
-            return true;
-   }
-   return false;
-}
-
-class FirstVisibleChildItem extends PureContainer {
-
-   checkVisible(context, instance, data) {
-      if (instance.parent.firstVisibleChild)
-         return false;
-      return super.checkVisible(context, instance, data);
-   }
-
-   explore(context, instance) {
-      if (instance.parent.firstVisibleChild)
-         return;
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      if (instance.parent.firstVisibleChild)
-         return;
-      if (isVisibleDeep(instance))
-         instance.parent.firstVisibleChild = instance;
-   }
-
-   render(context, instance, key) {
-      if (instance.parent.firstVisibleChild != instance)
-         return null;
-      return super.render(context, instance, key)
-   }
-}
-
-FirstVisibleChildItem.prototype.useParentLayout = true;
-
-export class FirstVisibleChildLayout extends PureContainer {
-
-   explore(context, instance) {
-      instance.firstVisibleChild = null;
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      let {children, firstVisibleChild} = instance;
-      if (children) {
-         for (let i = 0; i < children.length; i++)
-            if (children[i] != firstVisibleChild)
-               children[i].destroy();
-      }
-      instance.children = [];
-      if (firstVisibleChild)
-         instance.children.push(firstVisibleChild);
-   }
-
-   wrapItem(item) {
-      return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({items: item});
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/ui/layout/FirstVisibleChildLayout.spec.js b/packages/cx/src/ui/layout/FirstVisibleChildLayout.spec.js
deleted file mode 100644
index 6ea035dad..000000000
--- a/packages/cx/src/ui/layout/FirstVisibleChildLayout.spec.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import {Cx} from '../Cx';
-import {VDOM} from '../Widget';
-import {HtmlElement} from '../../widgets/HtmlElement';
-import {Store} from '../../data/Store';
-
-import renderer from 'react-test-renderer';
-import assert from 'assert';
-import {FirstVisibleChildLayout} from "./FirstVisibleChildLayout";
-import {UseParentLayout} from "./UseParentLayout";
-import {PureContainer} from "../PureContainer";
-import {createFunctionalComponent} from "../createFunctionalComponent";
-
-describe('FirstVisibleChildLayout', () => {
-
-   it('renders only the first child', () => {
-
-      let widget = <cx>
-         <div layout={FirstVisibleChildLayout}>
-            <header></header>
-            <main></main>
-            <footer></footer>
-         </div>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-            type: 'div',
-            props: {},
-            children: [{type: 'header', props: {}, children: null}]
-         }
-      )
-   });
-
-   it('does not process other widgets', () => {
-
-      let h = false, m = false, f = false;
-
-      let widget = <cx>
-         <div layout={FirstVisibleChildLayout}>
-            <header onInit={() => {h = true }} />
-            <main onInit={() => {m = true }}  />
-            <footer onInit={() => {f = true }} />
-         </div>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: 'div',
-         props: {},
-         children: [{type: 'header', props: {}, children: null}]
-      });
-
-      assert.equal(h, true);
-      assert.equal(m, false);
-      assert.equal(f, false);
-   });
-
-   it('skips the first child if not visible', () => {
-
-      let widget = <cx>
-         <div layout={FirstVisibleChildLayout}>
-            <header visible={false}></header>
-            <main></main>
-            <footer></footer>
-         </div>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-            type: 'div',
-            props: {},
-            children: [{type: 'main', props: {}, children: null}]
-         }
-      )
-   });
-
-   it('skips pure containers which use parent layouts', () => {
-
-      let widget = <cx>
-         <div layout={FirstVisibleChildLayout}>
-            <PureContainer layout={UseParentLayout}>
-               <header visible={false}></header>
-            </PureContainer>
-            <main></main>
-            <footer></footer>
-         </div>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-            type: 'div',
-            props: {},
-            children: [{type: 'main', props: {}, children: null}]
-         }
-      )
-   });
-
-   it('works with functional components', () => {
-
-      let FC = createFunctionalComponent(({children}) => <cx>
-         {children}
-      </cx>);
-
-      let widget = <cx>
-         <div layout={FirstVisibleChildLayout}>
-            <FC dummy>
-               <header visible={false}></header>
-            </FC>
-            <main></main>
-            <footer></footer>
-         </div>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-            type: 'div',
-            props: {},
-            children: [{type: 'main', props: {}, children: null}]
-         }
-      )
-   });
-
-   it('properly destroys invisible items', () => {
-      let destroyList = [];
-      let widget = <cx>
-         <div layout={FirstVisibleChildLayout}>
-            <div visible-expr="{index} == 0" onDestroy={() => destroyList.push(0)} />
-            <div visible-expr="{index} == 1" onDestroy={() => destroyList.push(1)} />
-            <div visible-expr="{index} == 2" onDestroy={() => destroyList.push(2)} />
-            <div visible-expr="{index} == 3" onDestroy={() => destroyList.push(3)} />
-            <div visible-expr="{index} == 4" onDestroy={() => destroyList.push(4)} />
-         </div>
-      </cx>;
-
-      let store = new Store();
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      store.set("index", 0);
-      component.toJSON();
-      assert.deepEqual(destroyList, []);
-
-      store.set("index", 3);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0]);
-
-      store.set("index", 1);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0, 3]);
-
-      store.set("index", 4);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0, 3, 1]);
-
-      store.set("index", 0);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0, 3, 1, 4]);
-
-      store.set("index", -1);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0, 3, 1, 4, 0]);
-   });
-});
-
diff --git a/packages/cx/src/ui/layout/FirstVisibleChildLayout.spec.tsx b/packages/cx/src/ui/layout/FirstVisibleChildLayout.spec.tsx
new file mode 100644
index 000000000..d330b6c10
--- /dev/null
+++ b/packages/cx/src/ui/layout/FirstVisibleChildLayout.spec.tsx
@@ -0,0 +1,207 @@
+import { Store } from "../../data/Store";
+import { expr } from "../expr";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
+
+import assert from "assert";
+import { FirstVisibleChildLayout } from "./FirstVisibleChildLayout";
+import { UseParentLayout } from "./UseParentLayout";
+import { PureContainer } from "../PureContainer";
+import { createFunctionalComponent } from "../createFunctionalComponent";
+
+describe("FirstVisibleChildLayout", () => {
+   it("renders only the first child", async () => {
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <header></header>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "header", props: {}, children: null }],
+      });
+   });
+
+   it("does not process other widgets", async () => {
+      let h = false,
+         m = false,
+         f = false;
+
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <header
+                  onInit={() => {
+                     h = true;
+                  }}
+               />
+               <main
+                  onInit={() => {
+                     m = true;
+                  }}
+               />
+               <footer
+                  onInit={() => {
+                     f = true;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "header", props: {}, children: null }],
+      });
+
+      assert.equal(h, true);
+      assert.equal(m, false);
+      assert.equal(f, false);
+   });
+
+   it("skips the first child if not visible", async () => {
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <header visible={false}></header>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: null }],
+      });
+   });
+
+   it("skips pure containers which use parent layouts", async () => {
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <PureContainer layout={UseParentLayout}>
+                  <header visible={false}></header>
+               </PureContainer>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: null }],
+      });
+   });
+
+   it("works with functional components", async () => {
+      let FC = createFunctionalComponent(({ children }: { children?: any }) => <cx>{children}</cx>);
+
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <FC>
+                  <header visible={false}></header>
+               </FC>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: null }],
+      });
+   });
+
+   it("properly destroys invisible items", async () => {
+      let destroyList: number[] = [];
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <div visible={expr("{index} == 0")} onDestroy={() => destroyList.push(0)} />
+               <div visible={expr("{index} == 1")} onDestroy={() => destroyList.push(1)} />
+               <div visible={expr("{index} == 2")} onDestroy={() => destroyList.push(2)} />
+               <div visible={expr("{index} == 3")} onDestroy={() => destroyList.push(3)} />
+               <div visible={expr("{index} == 4")} onDestroy={() => destroyList.push(4)} />
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      await act(async () => {
+         store.set("index", 0);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, []);
+
+      await act(async () => {
+         store.set("index", 3);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0]);
+
+      await act(async () => {
+         store.set("index", 1);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3]);
+
+      await act(async () => {
+         store.set("index", 4);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3, 1]);
+
+      await act(async () => {
+         store.set("index", 0);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3, 1, 4]);
+
+      await act(async () => {
+         store.set("index", -1);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3, 1, 4, 0]);
+   });
+});
diff --git a/packages/cx/src/ui/layout/FirstVisibleChildLayout.ts b/packages/cx/src/ui/layout/FirstVisibleChildLayout.ts
new file mode 100644
index 000000000..d34ebcc3c
--- /dev/null
+++ b/packages/cx/src/ui/layout/FirstVisibleChildLayout.ts
@@ -0,0 +1,60 @@
+import { PureContainerConfig } from "./../PureContainer";
+import { Instance } from "../Instance";
+import { PureContainer } from "../PureContainer";
+import { RenderingContext } from "../RenderingContext";
+
+function isVisibleDeep(instance: Instance): boolean {
+   if (instance.visible && (!instance.widget.isPureContainer || !instance.widget.useParentLayout)) return true;
+   if (instance.children) {
+      for (let i = 0; i < instance.children.length; i++) if (isVisibleDeep(instance.children[i])) return true;
+   }
+   return false;
+}
+
+class FirstVisibleChildItem extends PureContainer {
+   constructor(config: PureContainerConfig) {
+      super(config);
+   }
+
+   checkVisible(context: RenderingContext, instance: any, data: any): boolean {
+      if (instance.parent.firstVisibleChild) return false;
+      return super.checkVisible(context, instance, data);
+   }
+
+   explore(context: RenderingContext, instance: any): void {
+      if (instance.parent.firstVisibleChild) return;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      if (instance.parent.firstVisibleChild) return;
+      if (isVisibleDeep(instance)) instance.parent.firstVisibleChild = instance;
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      if (instance.parent.firstVisibleChild != instance) return null;
+      return super.render(context, instance, key);
+   }
+}
+
+FirstVisibleChildItem.prototype.useParentLayout = true;
+
+export class FirstVisibleChildLayout extends PureContainer {
+   explore(context: RenderingContext, instance: any): void {
+      instance.firstVisibleChild = null;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      let { children, firstVisibleChild } = instance;
+      if (children) {
+         for (let i = 0; i < children.length; i++) if (children[i] != firstVisibleChild) children[i].destroy();
+      }
+      instance.children = [];
+      if (firstVisibleChild) instance.children.push(firstVisibleChild);
+   }
+
+   wrapItem(item: any): any {
+      return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({ items: item });
+   }
+}
diff --git a/packages/cx/src/ui/layout/LabelsLeftLayout.d.ts b/packages/cx/src/ui/layout/LabelsLeftLayout.d.ts
deleted file mode 100644
index 6337cb506..000000000
--- a/packages/cx/src/ui/layout/LabelsLeftLayout.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as Cx from "../../core";
-
-interface LabelLeftLayoutProps extends Cx.StyledContainerProps {
-   /** Additional CSS style to be passed to the label object. */
-   labelStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be passed to the label object. */
-   labelClass?: Cx.ClassProp;
-}
-
-export class LabelsLeftLayout extends Cx.Widget<LabelLeftLayoutProps> {}
diff --git a/packages/cx/src/ui/layout/LabelsLeftLayout.js b/packages/cx/src/ui/layout/LabelsLeftLayout.js
deleted file mode 100644
index 262ba0800..000000000
--- a/packages/cx/src/ui/layout/LabelsLeftLayout.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { VDOM, getContent, contentAppend } from "../Widget";
-import { PureContainer } from "../PureContainer";
-import { isArray } from "../../util/isArray";
-import { parseStyle } from "../../util/parseStyle";
-
-function validContent(r) {
-   if (!r.hasOwnProperty("content")) return r;
-   let content = [];
-   for (let key in r) if (key != "label") contentAppend(content, r[key]);
-   return content;
-}
-
-export class LabelsLeftLayout extends PureContainer {
-   init() {
-      this.labelStyle = parseStyle(this.labelStyle);
-      super.init();
-   }
-
-   declareData(...args) {
-      return super.declareData(...args, {
-         labelStyle: { structured: true },
-         labelClass: { structured: true },
-      });
-   }
-
-   render(context, instance, key) {
-      let result = [];
-      let { children, data } = instance;
-      let { CSS, baseClass } = this;
-
-      let labelClass = CSS.expand(CSS.element(baseClass, "label"), data.labelClass);
-
-      const addItem = (r, key) => {
-         if (!r) return;
-         if (r.useParentLayout && isArray(r.content)) r.content.forEach((x, i) => addItem(x, key + "-" + i));
-         else {
-            result.push(
-               <tr key={key}>
-                  <td className={labelClass} style={data.labelStyle}>
-                     {getContent(r.label)}
-                  </td>
-                  <td className={CSS.element(baseClass, "field")}>{validContent(r)}</td>
-               </tr>
-            );
-         }
-      };
-      children.forEach((c) => {
-         addItem(c.vdom, c.key);
-      });
-      return (
-         <table key={key} className={data.classNames} style={data.style}>
-            <tbody>{result}</tbody>
-         </table>
-      );
-   }
-}
-
-LabelsLeftLayout.prototype.baseClass = "labelsleftlayout";
-LabelsLeftLayout.prototype.styled = true;
diff --git a/packages/cx/src/ui/layout/LabelsLeftLayout.scss b/packages/cx/src/ui/layout/LabelsLeftLayout.scss
index 7460f8878..8cfddf1f7 100644
--- a/packages/cx/src/ui/layout/LabelsLeftLayout.scss
+++ b/packages/cx/src/ui/layout/LabelsLeftLayout.scss
@@ -1,12 +1,14 @@
 
+@use "sass:map";
+
 @mixin cx-labelsleftlayout(
    $name: 'labelsleftlayout',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}labelsleftlayout {
       border-spacing: 0;
diff --git a/packages/cx/src/ui/layout/LabelsLeftLayout.tsx b/packages/cx/src/ui/layout/LabelsLeftLayout.tsx
new file mode 100644
index 000000000..d02f42679
--- /dev/null
+++ b/packages/cx/src/ui/layout/LabelsLeftLayout.tsx
@@ -0,0 +1,76 @@
+/** @jsxImportSource react */
+
+import { isArray } from "../../util/isArray";
+import { parseStyle } from "../../util/parseStyle";
+import { StyledContainerBase, StyledContainerConfig } from "../Container";
+import { Instance } from "../Instance";
+import { RenderingContext } from "../RenderingContext";
+import { contentAppend, getContent } from "../Widget";
+import { StyleProp, ClassProp } from "../Prop";
+
+function validContent(r: any): any {
+   if (!r.hasOwnProperty("content")) return r;
+   let content: any[] = [];
+   for (let key in r) if (key != "label") contentAppend(content, r[key]);
+   return content;
+}
+
+export interface LabelsLeftLayoutConfig extends StyledContainerConfig {
+   labelStyle?: StyleProp;
+   labelClass?: ClassProp;
+}
+
+export class LabelsLeftLayout extends StyledContainerBase<LabelsLeftLayoutConfig, Instance> {
+   declare labelStyle?: StyleProp;
+   declare labelClass?: ClassProp;
+
+   constructor(config?: LabelsLeftLayoutConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.labelStyle = parseStyle(this.labelStyle);
+      super.init();
+   }
+
+   declareData(...args: any[]): any {
+      return super.declareData(...args, {
+         labelStyle: { structured: true },
+         labelClass: { structured: true },
+      });
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      let result: any[] = [];
+      let { children, data } = instance;
+      let { CSS, baseClass } = this;
+
+      let labelClass = CSS.expand(CSS.element(baseClass!, "label"), data.labelClass);
+
+      const addItem = (r: any, key: string) => {
+         if (!r) return;
+         if (r.useParentLayout && isArray(r.content))
+            r.content.forEach((x: any, i: number) => addItem(x, key + "-" + i));
+         else {
+            result.push(
+               <tr key={key}>
+                  <td className={labelClass} style={data.labelStyle}>
+                     {getContent(r.label)}
+                  </td>
+                  <td className={CSS.element(baseClass!, "field")}>{validContent(r)}</td>
+               </tr>,
+            );
+         }
+      };
+      children.forEach((c: any) => {
+         addItem(c.vdom, c.key);
+      });
+      return (
+         <table key={key} className={data.classNames} style={data.style}>
+            <tbody>{result}</tbody>
+         </table>
+      );
+   }
+}
+
+LabelsLeftLayout.prototype.baseClass = "labelsleftlayout";
diff --git a/packages/cx/src/ui/layout/LabelsTopLayout.d.ts b/packages/cx/src/ui/layout/LabelsTopLayout.d.ts
deleted file mode 100644
index 25ac8a5cd..000000000
--- a/packages/cx/src/ui/layout/LabelsTopLayout.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as Cx from "../../core";
-
-interface LabelsTopLayoutProps extends Cx.StyledContainerProps {
-   vertical?: boolean;
-   columns?: number;
-}
-
-export class LabelsTopLayout extends Cx.Widget<LabelsTopLayoutProps> {}
-
-interface LabelsTopLayoutCellProps extends Cx.StyledContainerProps {
-   colSpan?: number;
-   rowSpan?: number;
-}
-
-export class LabelsTopLayoutCell extends Cx.Widget<LabelsTopLayoutCellProps> {}
diff --git a/packages/cx/src/ui/layout/LabelsTopLayout.js b/packages/cx/src/ui/layout/LabelsTopLayout.js
deleted file mode 100644
index 8a211c338..000000000
--- a/packages/cx/src/ui/layout/LabelsTopLayout.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import {VDOM, getContent, contentAppend} from '../Widget';
-import {Container} from '../Container';
-import {PureContainer} from '../PureContainer';
-import {isArray} from '../../util/isArray';
-import {isUndefined} from '../../util/isUndefined';
-import {isNumber} from "../../util/isNumber";
-
-function validContent(r) {
-   let content = [];
-   for (let key in r)
-      if (key != "label")
-         contentAppend(content, r[key]);
-   return content;
-}
-
-export class LabelsTopLayout extends Container {
-
-   init() {
-      if (this.vertical && isUndefined(this.columns))
-         this.columns = 1;
-
-      super.init();
-   }
-
-   render(context, instance, key) {
-      let {children, data} = instance;
-
-      let state = {
-         rows: [],
-         currentRow: 0,
-         labelCells: [],
-         fieldCells: [],
-         rowCapacities: [this.columns]
-      };
-
-      const processContent = (r) => {
-         if (!r)
-            return;
-         if (isArray(r.content) && r.useParentLayout)
-            r.content.forEach((x) => processContent(x));
-         else if (r.atomic && r.type == "layout-cell")
-            this.addItem(state, isArray(r.content) && r.content.length == 1 ? r.content[0] : r.content, r.data);
-         else
-            this.addItem(state, r, {});
-      };
-
-      children.forEach(item => processContent(item.vdom));
-
-      this.addRow(state);
-
-      return <table key={key} className={data.classNames} style={data.style}>
-         <tbody>
-         {state.rows}
-         </tbody>
-      </table>;
-   }
-
-   addRow(state) {
-      if (state.labelCells.length > 0)
-         state.rows.push(<tr key={state.rows.length}>{state.labelCells}</tr>);
-
-      if (state.fieldCells.length > 0)
-         state.rows.push(<tr key={state.rows.length}>{state.fieldCells}</tr>);
-
-      state.labelCells = [];
-      state.fieldCells = [];
-      state.currentRow++;
-      if (state.currentRow == state.rowCapacities.length)
-         state.rowCapacities.push(this.columns);
-   }
-
-
-   addItem(state, item, data) {
-
-      while (state.labelCells.length == state.rowCapacities[state.currentRow])
-         this.addRow(state);
-
-      if (data.rowSpan > 1) {
-         for (let row = state.currentRow + 1; row < state.currentRow + data.rowSpan; row++) {
-            if (row == state.rowCapacities.length)
-               state.rowCapacities.push(this.columns);
-            state.rowCapacities[row] -= data.colSpan || 1;
-         }
-      }
-
-      if (data.colSpan > 1)
-         state.rowCapacities[state.currentRow] -= data.colSpan - 1;
-
-      state.labelCells.push(
-         <td className={this.CSS.element(this.baseClass, "label")} key={state.labelCells.length} colSpan={data.colSpan}>
-            {getContent(item.label)}
-         </td>
-      );
-      state.fieldCells.push(
-         <td className={this.CSS.element(this.baseClass, "field")}
-             key={state.fieldCells.length}
-             colSpan={data.colSpan}
-             rowSpan={isNumber(data.rowSpan) ? 2 * data.rowSpan - 1 : undefined}
-             style={data.style}
-         >
-            {validContent(item)}
-         </td>
-      );
-   }
-}
-
-LabelsTopLayout.prototype.baseClass = 'labelstoplayout';
-LabelsTopLayout.prototype.vertical = false;
-LabelsTopLayout.prototype.columns = undefined;
-LabelsTopLayout.prototype.styled = true;
-
-export class LabelsTopLayoutCell extends PureContainer {
-
-   declareData(...args) {
-      super.declareData(...args, {
-         colSpan: undefined,
-         rowSpan: undefined
-      })
-   }
-
-   render(context, instance, key) {
-
-      let { content } = this.renderChildren(context, instance);
-
-      return {
-         atomic: true,
-         type: 'layout-cell',
-         data: instance.data,
-         content
-      }
-   }
-}
-
-LabelsTopLayoutCell.prototype.styled = true;
-LabelsTopLayoutCell.prototype.useParentLayout = true;
\ No newline at end of file
diff --git a/packages/cx/src/ui/layout/LabelsTopLayout.scss b/packages/cx/src/ui/layout/LabelsTopLayout.scss
index 8cb499072..5b604599c 100644
--- a/packages/cx/src/ui/layout/LabelsTopLayout.scss
+++ b/packages/cx/src/ui/layout/LabelsTopLayout.scss
@@ -1,12 +1,13 @@
+@use "sass:map";
 
 @mixin cx-labelstoplayout(
    $name: 'labelstoplayout',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}labelstoplayout {
       border-spacing: 0 3px;
diff --git a/packages/cx/src/ui/layout/LabelsTopLayout.tsx b/packages/cx/src/ui/layout/LabelsTopLayout.tsx
new file mode 100644
index 000000000..5c2d79d62
--- /dev/null
+++ b/packages/cx/src/ui/layout/LabelsTopLayout.tsx
@@ -0,0 +1,156 @@
+/** @jsxImportSource react */
+
+import { VDOM, getContent, contentAppend } from "../Widget";
+import { StyledContainerBase, StyledContainerConfig } from "../Container";
+import { Instance } from "../Instance";
+import { isArray } from "../../util/isArray";
+import { isUndefined } from "../../util/isUndefined";
+import { isNumber } from "../../util/isNumber";
+import { RenderingContext } from "../RenderingContext";
+
+function validContent(r: any): any {
+   let content: any[] = [];
+   for (let key in r) if (key != "label") contentAppend(content, r[key]);
+   return content;
+}
+
+interface LayoutState {
+   rows: any[];
+   currentRow: number;
+   labelCells: any[];
+   fieldCells: any[];
+   rowCapacities: number[];
+}
+
+export interface LabelsTopLayoutConfig extends StyledContainerConfig {
+   vertical?: boolean;
+   columns?: number;
+}
+
+export class LabelsTopLayout extends StyledContainerBase<LabelsTopLayoutConfig, Instance> {
+   declare vertical?: boolean;
+   declare columns?: number;
+
+   constructor(config?: LabelsTopLayoutConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.vertical && isUndefined(this.columns)) this.columns = 1;
+
+      super.init();
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      let { children, data } = instance;
+
+      let state: LayoutState = {
+         rows: [],
+         currentRow: 0,
+         labelCells: [],
+         fieldCells: [],
+         rowCapacities: [this.columns!],
+      };
+
+      const processContent = (r: any) => {
+         if (!r) return;
+         if (isArray(r.content) && r.useParentLayout) r.content.forEach((x: any) => processContent(x));
+         else if (r.atomic && r.type == "layout-cell")
+            this.addItem(state, isArray(r.content) && r.content.length == 1 ? r.content[0] : r.content, r.data);
+         else this.addItem(state, r, {});
+      };
+
+      children.forEach((item: any) => processContent(item.vdom));
+
+      this.addRow(state);
+
+      return (
+         <table key={key} className={data.classNames} style={data.style}>
+            <tbody>{state.rows}</tbody>
+         </table>
+      );
+   }
+
+   addRow(state: LayoutState): void {
+      if (state.labelCells.length > 0) state.rows.push(<tr key={state.rows.length}>{state.labelCells}</tr>);
+
+      if (state.fieldCells.length > 0) state.rows.push(<tr key={state.rows.length}>{state.fieldCells}</tr>);
+
+      state.labelCells = [];
+      state.fieldCells = [];
+      state.currentRow++;
+      if (state.currentRow == state.rowCapacities.length) state.rowCapacities.push(this.columns!);
+   }
+
+   addItem(state: LayoutState, item: any, data: any): void {
+      while (state.labelCells.length == state.rowCapacities[state.currentRow]) this.addRow(state);
+
+      if (data.rowSpan > 1) {
+         for (let row = state.currentRow + 1; row < state.currentRow + data.rowSpan; row++) {
+            if (row == state.rowCapacities.length) state.rowCapacities.push(this.columns!);
+            state.rowCapacities[row] -= data.colSpan || 1;
+         }
+      }
+
+      if (data.colSpan > 1) state.rowCapacities[state.currentRow] -= data.colSpan - 1;
+
+      state.labelCells.push(
+         <td
+            className={this.CSS!.element(this.baseClass!, "label")}
+            key={state.labelCells.length}
+            colSpan={data.colSpan}
+         >
+            {getContent(item.label)}
+         </td>,
+      );
+      state.fieldCells.push(
+         <td
+            className={this.CSS!.element(this.baseClass!, "field")}
+            key={state.fieldCells.length}
+            colSpan={data.colSpan}
+            rowSpan={isNumber(data.rowSpan) ? 2 * data.rowSpan - 1 : undefined}
+            style={data.style}
+         >
+            {validContent(item)}
+         </td>,
+      );
+   }
+}
+
+LabelsTopLayout.prototype.baseClass = "labelstoplayout";
+LabelsTopLayout.prototype.vertical = false;
+LabelsTopLayout.prototype.columns = undefined;
+
+export interface LabelsTopLayoutCellConfig extends StyledContainerConfig {
+   colSpan?: number;
+   rowSpan?: number;
+}
+
+export class LabelsTopLayoutCell extends StyledContainerBase<LabelsTopLayoutCellConfig, Instance> {
+   declare colSpan?: number;
+   declare rowSpan?: number;
+
+   constructor(config?: LabelsTopLayoutCellConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         colSpan: undefined,
+         rowSpan: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      let { content } = (this as any).renderChildren(context, instance);
+
+      return {
+         atomic: true,
+         type: "layout-cell",
+         data: instance.data,
+         content,
+      };
+   }
+}
+
+LabelsTopLayoutCell.prototype.useParentLayout = true;
diff --git a/packages/cx/src/ui/layout/UseParentLayout.d.ts b/packages/cx/src/ui/layout/UseParentLayout.d.ts
deleted file mode 100644
index 948df7478..000000000
--- a/packages/cx/src/ui/layout/UseParentLayout.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as Cx from '../../core';
-import { PureContainer } from '../PureContainer';
-
-export class UseParentLayout extends PureContainer {}
diff --git a/packages/cx/src/ui/layout/UseParentLayout.js b/packages/cx/src/ui/layout/UseParentLayout.js
deleted file mode 100644
index 3ccbb9096..000000000
--- a/packages/cx/src/ui/layout/UseParentLayout.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {PureContainer} from "../PureContainer";
-
-export class UseParentLayout extends PureContainer {}
-
-UseParentLayout.prototype.noLayout = true;
-UseParentLayout.prototype.useParentLayout = true;
diff --git a/packages/cx/src/ui/layout/UseParentLayout.ts b/packages/cx/src/ui/layout/UseParentLayout.ts
new file mode 100644
index 000000000..1eb40a199
--- /dev/null
+++ b/packages/cx/src/ui/layout/UseParentLayout.ts
@@ -0,0 +1,8 @@
+import { PureContainer } from "../PureContainer";
+
+export class UseParentLayout extends PureContainer {
+   declare noLayout?: boolean;   
+}
+
+UseParentLayout.prototype.noLayout = true;
+UseParentLayout.prototype.useParentLayout = true;
diff --git a/packages/cx/src/ui/layout/exploreChildren.d.ts b/packages/cx/src/ui/layout/exploreChildren.d.ts
deleted file mode 100644
index c8066605b..000000000
--- a/packages/cx/src/ui/layout/exploreChildren.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { View } from "../../data/View";
-import { Instance } from "../Instance";
-import { RenderingContext } from "../RenderingContext";
-
-export function exploreChildren(
-   context: RenderingContext,
-   instance: Instance,
-   children: Instance[],
-   previousResult: Instance[],
-   key?: string,
-   store?: View,
-): Instance[];
diff --git a/packages/cx/src/ui/layout/exploreChildren.js b/packages/cx/src/ui/layout/exploreChildren.js
deleted file mode 100644
index dbede501b..000000000
--- a/packages/cx/src/ui/layout/exploreChildren.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export function exploreChildren(context, instance, children, previousResult, key, store) {
-   let newChildren = previousResult || [];
-   let oldChildren = previousResult || newChildren;
-   let identical = previousResult ? 0 : -1;
-
-   for (let c = 0; c < children.length; c++) {
-      let cell = instance.getChild(context, children[c], key, store);
-
-      if (cell.checkVisible(context)) {
-         if (identical >= 0) {
-            if (cell == oldChildren[identical]) identical++;
-            else {
-               newChildren = newChildren.slice(0, identical);
-               identical = -1;
-               newChildren.push(cell);
-            }
-         } else newChildren.push(cell);
-
-         context.exploreStack.push(cell);
-         if (cell.needsExploreCleanup) context.exploreStack.push(cell);
-      }
-   }
-
-   if (identical >= 0 && identical != newChildren.length) newChildren = newChildren.slice(0, identical);
-
-   return newChildren;
-}
diff --git a/packages/cx/src/ui/layout/exploreChildren.ts b/packages/cx/src/ui/layout/exploreChildren.ts
new file mode 100644
index 000000000..70c7fb23b
--- /dev/null
+++ b/packages/cx/src/ui/layout/exploreChildren.ts
@@ -0,0 +1,38 @@
+import { CxChild, RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import { View } from "../../data/View";
+
+export function exploreChildren(
+   context: RenderingContext,
+   instance: Instance,
+   children: CxChild[],
+   previousResult: any[] | null,
+   key: any,
+   store: View,
+): any[] {
+   let newChildren = previousResult || [];
+   let oldChildren = previousResult || newChildren;
+   let identical = previousResult ? 0 : -1;
+
+   for (let c = 0; c < children.length; c++) {
+      let cell = (instance as any).getChild(context, children[c], key, store);
+
+      if ((cell as any).checkVisible(context)) {
+         if (identical >= 0) {
+            if (cell == oldChildren[identical]) identical++;
+            else {
+               newChildren = newChildren.slice(0, identical);
+               identical = -1;
+               newChildren.push(cell);
+            }
+         } else newChildren.push(cell);
+
+         (context as any).exploreStack.push(cell);
+         if ((cell as any).needsExploreCleanup) (context as any).exploreStack.push(cell);
+      }
+   }
+
+   if (identical >= 0 && identical != newChildren.length) newChildren = newChildren.slice(0, identical);
+
+   return newChildren;
+}
diff --git a/packages/cx/src/ui/layout/index.js b/packages/cx/src/ui/layout/index.js
deleted file mode 100644
index f809f7d66..000000000
--- a/packages/cx/src/ui/layout/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from './FirstVisibleChildLayout';
-export * from './UseParentLayout';
-
-export * from './LabelsLeftLayout';
-export * from './LabelsTopLayout';
-
-export * from './Content';
-export * from './ContentPlaceholder';
-
-export * from './exploreChildren';
diff --git a/packages/cx/src/ui/layout/index.d.ts b/packages/cx/src/ui/layout/index.ts
similarity index 100%
rename from packages/cx/src/ui/layout/index.d.ts
rename to packages/cx/src/ui/layout/index.ts
diff --git a/packages/cx/src/ui/selection/KeySelection.d.ts b/packages/cx/src/ui/selection/KeySelection.d.ts
deleted file mode 100644
index 96f51f410..000000000
--- a/packages/cx/src/ui/selection/KeySelection.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as Cx from '../../core';
-
-import { Selection } from './Selection'
-
-interface KeySelectionConfig {
-   bind?: string;
-   multiple?: boolean;
-   keyField?: string;
-   storage?: string;
-   selection?: Cx.Prop<any>,
-   record?: Cx.Prop<any>,
-   index?: Cx.Prop<any>
-}
-
-export class KeySelection extends Selection {
-   constructor(config: KeySelectionConfig);
-}
diff --git a/packages/cx/src/ui/selection/KeySelection.js b/packages/cx/src/ui/selection/KeySelection.js
deleted file mode 100644
index 013799541..000000000
--- a/packages/cx/src/ui/selection/KeySelection.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Selection } from "./Selection";
-import { isArray } from "../../util/isArray";
-import { isNonEmptyArray } from "../../util/isNonEmptyArray";
-import { shallowEquals } from "../../util/shallowEquals";
-
-export class KeySelection extends Selection {
-   init() {
-      if (this.bind && !this.selection)
-         this.selection = {
-            bind: this.bind,
-         };
-
-      if (!this.selection) this.selection = {};
-
-      if (isArray(this.keyFields)) this.keyField = false;
-
-      this.initialized = true;
-   }
-
-   getKey(record) {
-      if (this.key != null) return this.key;
-
-      if (!record) return null;
-
-      if (this.keyField) return record[this.keyField];
-
-      var key = {};
-      this.keyFields.forEach((k) => {
-         key[k] = record[k];
-      });
-      return key;
-   }
-
-   areKeysEqual(key1, key2) {
-      if (this.keyField) return key1 === key2 && key1 != null;
-
-      if (!key1 || !key2) return false;
-
-      return !this.keyFields.some((k) => key1[k] !== key2[k]);
-   }
-
-   declareData() {
-      return super.declareData(
-         {
-            $selection: { structured: true },
-         },
-         ...arguments
-      );
-   }
-
-   configureWidget(widget) {
-      if (!this.initialized) this.init();
-
-      widget.$selection = Object.assign(widget.$selection || {}, {
-         keys: this.selection,
-      });
-
-      return super.configureWidget(widget);
-   }
-
-   selectMultiple(store, records, indexes, { toggle, add } = {}) {
-      if (!this.selection.bind) return false;
-
-      if (this.toggle) toggle = true;
-
-      if (!isNonEmptyArray(records)) {
-         if (!toggle && !add) return store.delete(this.selection.bind);
-         return false;
-      }
-
-      var keys = records.map((record) => this.getKey(record));
-      var selection = store.get(this.selection.bind);
-      if (!this.multiple) {
-         let key = keys[0];
-         if (!toggle || !this.areKeysEqual(selection, key)) store.set(this.selection.bind, key);
-         else store.delete(this.selection.bind);
-      } else {
-         if (this.storage == "array") {
-            if (!isArray(selection) || (!toggle && !add)) this.updateSelectionWithShallowEqualsCheck(store, keys);
-            else {
-               let newSelection = [...selection];
-               keys.forEach((key) => {
-                  let exists = selection.some((x) => this.areKeysEqual(x, key));
-                  if (!exists) newSelection.push(key);
-                  else if (toggle) newSelection = newSelection.filter((x) => !this.areKeysEqual(x, key)); //TODO: optimize
-               });
-               this.updateSelectionWithShallowEqualsCheck(store, newSelection);
-            }
-         } else if (this.storage == "hash") {
-            let newSelection = toggle ? { ...selection } : {};
-            keys.forEach((key) => {
-               newSelection[key] = !newSelection[key];
-            });
-            this.updateSelectionWithShallowEqualsCheck(store, newSelection);
-         }
-      }
-   }
-
-   updateSelectionWithShallowEqualsCheck(store, newSelection) {
-      store.update(this.selection.bind, (data) => (shallowEquals(data, newSelection) ? data : newSelection));
-   }
-
-   getIsSelectedDelegate(store) {
-      if (!this.selection.bind) return () => false;
-
-      var selection = store.get(this.selection.bind);
-
-      if (this.multiple) {
-         if (this.storage == "array") {
-            selection = selection || [];
-            return (record, index) => selection.some((k) => this.areKeysEqual(this.getKey(record), k));
-         } else {
-            selection = selection || {};
-            return (record, index) => selection[this.getKey(record)];
-         }
-      } else return (record, index) => this.areKeysEqual(selection, this.getKey(record));
-   }
-
-   isSelected(store, record, index) {
-      return this.getIsSelectedDelegate(store)(record, index);
-   }
-}
-
-KeySelection.prototype.multiple = false;
-KeySelection.prototype.keyField = "id";
-KeySelection.prototype.storage = "array";
-KeySelection.autoInit = true;
-
-Selection.alias("key", KeySelection);
diff --git a/packages/cx/src/ui/selection/KeySelection.ts b/packages/cx/src/ui/selection/KeySelection.ts
new file mode 100644
index 000000000..75c93efa4
--- /dev/null
+++ b/packages/cx/src/ui/selection/KeySelection.ts
@@ -0,0 +1,153 @@
+import { Selection, SelectionConfig, SelectionOptions } from "./Selection";
+import { isArray } from "../../util/isArray";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { shallowEquals } from "../../util/shallowEquals";
+import { View } from "../../data/View";
+import { Prop } from "../Prop";
+
+export interface KeySelectionConfig extends SelectionConfig {
+   /** Name of the field used as a key. Default is `id`. */
+   keyField?: string;
+
+   /** Storage format. Can be `array` or `hash`. Default is `array`. */
+   storage?: string;
+
+   /** Selection binding configuration. */
+   selection?: Prop<any>;
+}
+
+export class KeySelection extends Selection {
+   declare selection: any;
+   declare key: any;
+   declare keyField: string | false;
+   declare keyFields: string[];
+   declare initialized: boolean;
+   declare storage: string;
+
+   constructor(config?: KeySelectionConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.bind && !this.selection)
+         this.selection = {
+            bind: this.bind,
+         };
+
+      if (!this.selection) this.selection = {};
+
+      if (isArray(this.keyFields)) this.keyField = false;
+
+      this.initialized = true;
+   }
+
+   getKey(record: any): any {
+      if (this.key != null) return this.key;
+
+      if (!record) return null;
+
+      if (this.keyField) return record[this.keyField];
+
+      var key: any = {};
+      this.keyFields!.forEach((k) => {
+         key[k] = record[k];
+      });
+      return key;
+   }
+
+   areKeysEqual(key1: any, key2: any): boolean {
+      if (this.keyField) return key1 === key2 && key1 != null;
+
+      if (!key1 || !key2) return false;
+
+      return !this.keyFields!.some((k) => key1[k] !== key2[k]);
+   }
+
+   declareData(...args: any[]): any {
+      return super.declareData(
+         {
+            $selection: { structured: true },
+         },
+         ...args,
+      );
+   }
+
+   configureWidget(widget: any): any {
+      if (!this.initialized) this.init();
+
+      widget.$selection = Object.assign(widget.$selection || {}, {
+         keys: this.selection,
+      });
+
+      return super.configureWidget(widget);
+   }
+
+   selectMultiple(store: View, records: any[], indexes: any[], { toggle, add }: SelectionOptions = {}): any {
+      if (!this.selection.bind) return false;
+
+      if (this.toggle) toggle = true;
+
+      if (!isNonEmptyArray(records)) {
+         if (!toggle && !add) return store.delete(this.selection.bind);
+         return false;
+      }
+
+      var keys = records.map((record) => this.getKey(record));
+      var selection = store.get(this.selection.bind);
+      if (!this.multiple) {
+         let key = keys[0];
+         if (!toggle || !this.areKeysEqual(selection, key)) store.set(this.selection.bind, key);
+         else store.delete(this.selection.bind);
+      } else {
+         if (this.storage == "array") {
+            if (!isArray(selection) || (!toggle && !add)) this.updateSelectionWithShallowEqualsCheck(store, keys);
+            else {
+               let newSelection = [...selection];
+               keys.forEach((key) => {
+                  let exists = selection.some((x: any) => this.areKeysEqual(x, key));
+                  if (!exists) newSelection.push(key);
+                  else if (toggle) newSelection = newSelection.filter((x: any) => !this.areKeysEqual(x, key)); //TODO: optimize
+               });
+               this.updateSelectionWithShallowEqualsCheck(store, newSelection);
+            }
+         } else if (this.storage == "hash") {
+            let newSelection = toggle ? { ...selection } : {};
+            keys.forEach((key) => {
+               newSelection[key] = !newSelection[key];
+            });
+            this.updateSelectionWithShallowEqualsCheck(store, newSelection);
+         }
+      }
+   }
+
+   updateSelectionWithShallowEqualsCheck(store: View, newSelection: any): void {
+      store.update(this.selection.bind, (data: any) => (shallowEquals(data, newSelection) ? data : newSelection));
+   }
+
+   getIsSelectedDelegate(store: View): (record: any, index: any) => boolean {
+      if (!this.selection.bind) return () => false;
+
+      var selection = store.get(this.selection.bind);
+
+      if (this.multiple) {
+         if (this.storage == "array") {
+            selection = selection || [];
+            return (record, index) => selection.some((k: any) => this.areKeysEqual(this.getKey(record), k));
+         } else {
+            selection = selection || {};
+            return (record, index) => selection[this.getKey(record)];
+         }
+      } else return (record, index) => this.areKeysEqual(selection, this.getKey(record));
+   }
+
+   isSelected(store: View, record: any, index: any): boolean {
+      return this.getIsSelectedDelegate(store)(record, index);
+   }
+}
+
+KeySelection.prototype.multiple = false;
+KeySelection.prototype.keyField = "id";
+KeySelection.prototype.storage = "array";
+(KeySelection as any).autoInit = true;
+
+Selection.alias("key", KeySelection);
diff --git a/packages/cx/src/ui/selection/PropertySelection.d.ts b/packages/cx/src/ui/selection/PropertySelection.d.ts
deleted file mode 100644
index 1c03734f4..000000000
--- a/packages/cx/src/ui/selection/PropertySelection.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as Cx from '../../core';
-
-import { Selection } from './Selection'
-
-interface PropertySelectionConfig {
-   selectedField?: string
-   multiple?: boolean
-   keyField?: string
-   record?: Cx.Binding
-   records?: Cx.Binding
-   index?: Cx.Binding
-   bind?: string
-}
-
-export class PropertySelection extends Selection {
-   constructor(config: PropertySelectionConfig);
-}
diff --git a/packages/cx/src/ui/selection/PropertySelection.js b/packages/cx/src/ui/selection/PropertySelection.js
deleted file mode 100644
index e5e99876a..000000000
--- a/packages/cx/src/ui/selection/PropertySelection.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { isAccessorChain } from "../../../src/data/createAccessorModelProxy";
-import { Selection } from "./Selection";
-
-export class PropertySelection extends Selection {
-   selectMultiple(store, records, indexes, { toggle, add } = {}) {
-      if (this.toggle) toggle = true;
-
-      if (!this.records) return false;
-
-      let path = isAccessorChain(this.records) ? this.records.toString() : this.records.bind;
-      if (!path) return false;
-
-      let array = store.get(path);
-      let newArray = [...array];
-      let dirty = false;
-
-      if (!toggle && !add) {
-         newArray.forEach((r, i) => {
-            if (r[this.selectedField]) {
-               let nr = Object.assign({}, r);
-               nr[this.selectedField] = false;
-               newArray[i] = nr;
-               dirty = true;
-            }
-         });
-      }
-
-      records.forEach((record, i) => {
-         let index = indexes[i];
-         let rec = newArray[index];
-         if (array[index] !== record) throw new Error("Stale data.");
-
-         let value = rec[this.selectedField];
-         let newValue = add ? true : toggle ? !value : true;
-
-         if (value == newValue) return;
-
-         let newRec = Object.assign({}, rec);
-         newRec[this.selectedField] = newValue;
-         newArray[index] = newRec;
-         dirty = true;
-      });
-
-      if (dirty) store.set(path, newArray);
-   }
-
-   isSelected(store, record, index) {
-      return record && record[this.selectedField];
-   }
-}
-
-PropertySelection.prototype.selectedField = "selected";
-PropertySelection.prototype.multiple = false;
-
-Selection.alias("property", PropertySelection);
diff --git a/packages/cx/src/ui/selection/PropertySelection.ts b/packages/cx/src/ui/selection/PropertySelection.ts
new file mode 100644
index 000000000..ac1986009
--- /dev/null
+++ b/packages/cx/src/ui/selection/PropertySelection.ts
@@ -0,0 +1,87 @@
+import { Selection, SelectionOptions } from "./Selection";
+import { View } from "../../data/View";
+import { isAccessorChain } from "../../data/createAccessorModelProxy";
+import { Binding } from "../Prop";
+
+export interface PropertySelectionConfig {
+   /** Name of the field used to indicate selection. Default is `selected`. */
+   selectedField?: string;
+
+   /** Set to `true` to allow multiple selection. */
+   multiple?: boolean;
+
+   /** Name of the field used as a key. */
+   keyField?: string;
+
+   /** Record binding. */
+   record?: Binding;
+
+   /** Records binding. */
+   records?: Binding;
+
+   /** Index binding. */
+   index?: Binding;
+
+   /** Binding path for selection state. */
+   bind?: string;
+}
+
+export class PropertySelection extends Selection {
+   declare records: any;
+   declare selectedField: string;
+
+   constructor(config?: PropertySelectionConfig) {
+      super(config);
+   }
+
+   selectMultiple(store: View, records: any[], indexes: any[], { toggle, add }: SelectionOptions = {}): any {
+      if (this.toggle) toggle = true;
+
+      if (!this.records) return false;
+
+      let path = isAccessorChain(this.records) ? this.records.toString() : this.records.bind;
+      if (!path) return false;
+
+      let array = store.get(path);
+      let newArray = [...array];
+      let dirty = false;
+
+      if (!toggle && !add) {
+         newArray.forEach((r, i) => {
+            if (r[this.selectedField]) {
+               let nr = Object.assign({}, r);
+               nr[this.selectedField] = false;
+               newArray[i] = nr;
+               dirty = true;
+            }
+         });
+      }
+
+      records.forEach((record, i) => {
+         let index = indexes[i];
+         let rec = newArray[index];
+         if (array[index] !== record) throw new Error("Stale data.");
+
+         let value = rec[this.selectedField];
+         let newValue = add ? true : toggle ? !value : true;
+
+         if (value == newValue) return;
+
+         let newRec = Object.assign({}, rec);
+         newRec[this.selectedField] = newValue;
+         newArray[index] = newRec;
+         dirty = true;
+      });
+
+      if (dirty) store.set(path, newArray);
+   }
+
+   isSelected(store: View, record: any, index: any): boolean {
+      return record && record[this.selectedField!];
+   }
+}
+
+PropertySelection.prototype.selectedField = "selected";
+PropertySelection.prototype.multiple = false;
+
+(Selection as any).alias("property", PropertySelection);
diff --git a/packages/cx/src/ui/selection/Selection.d.ts b/packages/cx/src/ui/selection/Selection.d.ts
deleted file mode 100644
index bf52d507f..000000000
--- a/packages/cx/src/ui/selection/Selection.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Record } from "../../core";
-import { Component } from "../../util/Component";
-import { View } from "../../data/View";
-import { Instance } from "../Instance";
-
-interface SelectOptions {
-   add: Boolean;
-   toggle: Boolean;
-}
-
-export class Selection extends Component {
-   isSelected(store: View, record: Record, index?: number);
-
-   getIsSelectedDelegate(store: View): (record: Record, index: number) => boolean;
-
-   select(store: View, record: Record, index: number);
-
-   declareData(): Record;
-
-   configureWidget(widget): Record;
-
-   selectInstance(instance: Instance, options: SelectOptions);
-
-   isInstanceSelected(instance: Instance): boolean;
-}
-
-export class SimpleSelection extends Selection { }
diff --git a/packages/cx/src/ui/selection/Selection.js b/packages/cx/src/ui/selection/Selection.js
deleted file mode 100644
index e943190f7..000000000
--- a/packages/cx/src/ui/selection/Selection.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Component } from "../../util/Component";
-
-export class Selection extends Component {
-   isSelected(store, record, index) {
-      return this.bind && store.get(this.bind) === record;
-   }
-
-   getIsSelectedDelegate(store) {
-      return (record, index) => this.isSelected(store, record, index);
-   }
-
-   select(store, record, index, options) {
-      this.selectMultiple(store, [record], [index], options);
-   }
-
-   selectMultiple(store, records, indexes, options) {
-      //abstract
-   }
-
-   declareData() {
-      var declaration = {
-         $selection: { structured: true },
-      };
-
-      return Object.assign(declaration, ...arguments);
-   }
-
-   configureWidget(widget) {
-      if (this.record || this.index) {
-         widget.$selection = Object.assign(widget.$selection || {}, {
-            record: this.record,
-            index: this.index,
-         });
-      }
-
-      return this.declareData();
-   }
-
-   selectInstance(instance, options) {
-      var { store, data } = instance;
-      if (!data.$selection)
-         throw new Error(
-            "Selection model not properly configured. Using the selectInstance method without specified record and index bindings."
-         );
-      return this.select(store, data.$selection.record, data.$selection.index, options);
-   }
-
-   isInstanceSelected(instance) {
-      var { store, data } = instance;
-      return data.$selection && this.isSelected(store, data.$selection.record, data.$selection.index);
-   }
-}
-
-Selection.prototype.toggle = false;
-
-Selection.namespace = "ui.selection.";
-
-export class SimpleSelection extends Selection {
-   isSelected(store, record, index) {
-      return this.getIsSelectedDelegate(store)(record, index);
-   }
-
-   getIsSelectedDelegate(store) {
-      var selection = this.bind && store.get(this.bind);
-      return (record, index) => record === selection;
-   }
-
-   selectMultiple(store, records, index) {
-      if (this.bind) store.set(this.bind, records[0]);
-   }
-}
-
-class DummySelection extends Selection {
-   isSelected(store, record, index) {
-      return false;
-   }
-
-   selectMultiple() {
-      //dummy
-   }
-
-   selectInstance() {
-      //dummy
-   }
-}
-
-DummySelection.prototype.isDummy = true;
-
-Selection.factory = (name) => {
-   if (typeof name == "object") return new SimpleSelection(name);
-
-   return new DummySelection();
-};
diff --git a/packages/cx/src/ui/selection/Selection.ts b/packages/cx/src/ui/selection/Selection.ts
new file mode 100644
index 000000000..534f7cce8
--- /dev/null
+++ b/packages/cx/src/ui/selection/Selection.ts
@@ -0,0 +1,128 @@
+import { Component } from "../../util/Component";
+import { View } from "../../data/View";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+import { Prop } from "../Prop";
+
+export interface SelectionOptions {
+   toggle?: boolean;
+   add?: boolean;
+}
+
+export interface SelectionConfig {
+   /** Binding path for selection state. */
+   bind?: string | AccessorChain<any>;
+
+   /** Record binding. */
+   record?: Prop<any>;
+
+   /** Index binding. */
+   index?: Prop<number>;
+
+   toggle?: boolean;
+
+   /** Set to `true` to allow multiple selection. */
+   multiple?: boolean;
+}
+
+export class Selection extends Component {
+   declare bind?: string;
+   declare record?: any;
+   declare index?: any;
+   declare toggle: boolean;
+   declare isDummy: boolean;
+   declare multiple: boolean;
+
+   constructor(config?: SelectionConfig) {
+      super(config);
+   }
+
+   isSelected(store: View, record: any, index: any): boolean {
+      return !!this.bind && store.get(this.bind) === record;
+   }
+
+   getIsSelectedDelegate(store: View): (record: any, index: any) => boolean {
+      return (record, index) => this.isSelected(store, record, index);
+   }
+
+   select(store: View, record: any, index: any, options?: SelectionOptions): any {
+      this.selectMultiple(store, [record], [index], options);
+   }
+
+   selectMultiple(store: View, records: any[], indexes: any[], options?: SelectionOptions): any {
+      //abstract
+   }
+
+   declareData(...args: any[]): any {
+      var declaration = {
+         $selection: { structured: true },
+      };
+
+      return Object.assign(declaration, ...args);
+   }
+
+   configureWidget(widget: any): any {
+      if (this.record || this.index) {
+         widget.$selection = Object.assign(widget.$selection || {}, {
+            record: this.record,
+            index: this.index,
+         });
+      }
+
+      return this.declareData();
+   }
+
+   selectInstance(instance: any, options?: SelectionOptions): any {
+      var { store, data } = instance;
+      if (!data.$selection)
+         throw new Error(
+            "Selection model not properly configured. Using the selectInstance method without specified record and index bindings.",
+         );
+      return this.select(store, data.$selection.record, data.$selection.index, options);
+   }
+
+   isInstanceSelected(instance: any): boolean {
+      var { store, data } = instance;
+      return data.$selection && this.isSelected(store, data.$selection.record, data.$selection.index);
+   }
+}
+
+Selection.prototype.toggle = false;
+
+Selection.namespace = "ui.selection.";
+
+export class SimpleSelection extends Selection {
+   isSelected(store: View, record: any, index: any): boolean {
+      return this.getIsSelectedDelegate(store)(record, index);
+   }
+
+   getIsSelectedDelegate(store: View): (record: any, index: any) => boolean {
+      var selection = this.bind && store.get(this.bind);
+      return (record, index) => record === selection;
+   }
+
+   selectMultiple(store: View, records: any[], index: any[]): void {
+      if (this.bind) store.set(this.bind, records[0]);
+   }
+}
+
+class DummySelection extends Selection {
+   isSelected(store: View, record: any, index: any): boolean {
+      return false;
+   }
+
+   selectMultiple(): void {
+      //dummy
+   }
+
+   selectInstance(): void {
+      //dummy
+   }
+}
+
+DummySelection.prototype.isDummy = true;
+
+Selection.factory = (name: any): Selection => {
+   if (typeof name == "object") return new SimpleSelection(name);
+
+   return new DummySelection();
+};
diff --git a/packages/cx/src/ui/selection/index.js b/packages/cx/src/ui/selection/index.js
deleted file mode 100644
index 0c024cfaf..000000000
--- a/packages/cx/src/ui/selection/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './Selection';
-export * from './PropertySelection';
-export * from './KeySelection';
diff --git a/packages/cx/src/ui/selection/index.d.ts b/packages/cx/src/ui/selection/index.ts
similarity index 100%
rename from packages/cx/src/ui/selection/index.d.ts
rename to packages/cx/src/ui/selection/index.ts
diff --git a/packages/cx/src/ui/tpl.d.ts b/packages/cx/src/ui/tpl.d.ts
deleted file mode 100644
index 5d0d897b3..000000000
--- a/packages/cx/src/ui/tpl.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import * as Cx from '../core';
-
-export function tpl(text: string) : Cx.Binding;
\ No newline at end of file
diff --git a/packages/cx/src/ui/tpl.js b/packages/cx/src/ui/tpl.js
deleted file mode 100644
index 98da82872..000000000
--- a/packages/cx/src/ui/tpl.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export function tpl(text) {
-   return {
-      tpl: text
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/ui/tpl.ts b/packages/cx/src/ui/tpl.ts
new file mode 100644
index 000000000..5b9c7bf40
--- /dev/null
+++ b/packages/cx/src/ui/tpl.ts
@@ -0,0 +1,5 @@
+export function tpl(text: string) {
+   return {
+      tpl: text
+   }
+}
\ No newline at end of file
diff --git a/packages/cx/src/util/Component.d.ts b/packages/cx/src/util/Component.d.ts
deleted file mode 100644
index 86fdc5a27..000000000
--- a/packages/cx/src/util/Component.d.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as Cx from '../core';
-
-interface DecoratorFactory<T> {
-   (t: T): T;
-}
-
-export class Component {
-
-   constructor(config?: Cx.Config);
-
-   init();
-
-   /**
-    * 
-    * @param alias 
-    * @param type 
-    */
-   static alias<T>(alias: string, type: T);
-   static alias<T>(alias: string) : DecoratorFactory<T>;
-
-   /**
-    * 
-    * @param type
-    * @param config
-    * @param more
-    */
-   static create(typeAlias?: any, config?: Cx.Config, more?: Cx.Config): any;
-
-   isComponent: boolean;
-   
-   static isComponentType: boolean;
-   static namespace: string;
-   static autoInit: boolean;
-
-   static factory(alias: string, config: Cx.Config, more?: Cx.Config) : Component;
-
-}
-
-
-export function createComponentFactory(factory, meta);
-
-export function isComponentFactory(factory: any): boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/Component.js b/packages/cx/src/util/Component.js
deleted file mode 100644
index 8540def28..000000000
--- a/packages/cx/src/util/Component.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import {isString} from './isString';
-import {isFunction} from './isFunction';
-import {isArray} from './isArray';
-
-const componentAlias = {};
-
-export class Component {
-   constructor(config) {
-      if (config && config.$props) {
-         Object.assign(config, config.$props);
-         delete config.$props;
-      }
-      Object.assign(this, config);
-   }
-
-   static alias(alias, type) {
-      if (type) {
-         type.prototype.componentAlias = alias;
-         componentAlias[this.namespace + alias] = type;
-      }
-      else //decorator usage
-         return t => {
-            this.alias(alias, t);
-            return t;
-         }
-   }
-
-   static create(typeAlias, config, more) {
-      if (!typeAlias)
-         return this.factory(typeAlias, config, more);
-
-      if (typeAlias.isComponent)
-         return typeAlias;
-
-      if (isComponentFactory(typeAlias))
-         return this.create(typeAlias.create(config));
-
-      if (isArray(typeAlias))
-         return typeAlias.map(c => this.create(c, config, more));
-
-      if (typeAlias.$type)
-         return this.create(typeAlias.$type, typeAlias, config);
-
-      if (typeAlias.type)
-         return this.create(typeAlias.type, typeAlias, config);
-
-      let cmpType, alias;
-
-      if (typeAlias.isComponentType)
-         cmpType = typeAlias;
-      else if (isFunction(typeAlias)) {
-         if (this.factory)
-            return this.factory(typeAlias, config, more)
-         throw new Error(`Unsupported component type ${typeAlias}.`);
-      }
-      else if (isString(typeAlias)) {
-         alias = this.namespace + typeAlias;
-         cmpType = componentAlias[alias];
-         if (!cmpType) {
-            if (typeAlias && this.factory)
-               return this.factory(typeAlias, config, more);
-            throw new Error(`Unknown component alias ${alias}.`);
-         }
-      }
-      else if (typeof typeAlias == 'object') {
-         cmpType = typeAlias.type || typeAlias.$type;
-         if (!cmpType) {
-            cmpType = this;
-            more = more ? Object.assign({}, config, more) : config;
-            config = typeAlias;
-         }
-      }
-
-      if (isArray(config))
-         return config.map(cfg => this.create(cmpType, cfg, more));
-
-      let cfg = config;
-
-      if (more)
-         cfg = Object.assign({}, config, more);
-
-      let cmp = new cmpType(cfg);
-      if (cmpType.autoInit && cmp.init)
-         cmp.init();
-      return cmp;
-   }
-}
-
-Component.prototype.isComponent = true;
-
-Component.isComponentType = true;
-Component.namespace = '';
-Component.autoInit = false;
-
-Component.factory = (alias, config, more) => {
-   throw new Error(`Unknown component alias ${alias}.`);
-};
-
-export function createComponentFactory(factory, jsxDriver, meta) {
-   factory.$isComponentFactory = true;
-   factory.$meta = meta;
-   factory.create = jsxDriver;
-   return factory;
-}
-
-export function isComponentFactory(factory) {
-   return factory && factory.$isComponentFactory;
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/Component.spec.ts b/packages/cx/src/util/Component.spec.ts
new file mode 100644
index 000000000..a1f64c71f
--- /dev/null
+++ b/packages/cx/src/util/Component.spec.ts
@@ -0,0 +1,381 @@
+import assert from "assert";
+import { Component, ComponentConstructor, ComponentConfigType, ComponentInstanceType, Create, CreateConfig } from "./Component";
+
+// Test classes for type checking
+interface TestWidgetConfig {
+   text: string;
+   value?: number;
+}
+
+class TestWidget extends Component {
+   static isComponentType = true as const;
+   declare text?: string;
+   declare value?: number;
+
+   constructor(config?: TestWidgetConfig) {
+      super(config);
+   }
+}
+
+interface TestButtonConfig extends TestWidgetConfig {
+   onClick?: () => void;
+}
+
+class TestButton extends TestWidget {
+   declare onClick?: () => void;
+
+   constructor(config?: TestButtonConfig) {
+      super(config);
+   }
+}
+
+// Unrelated class (not in TestWidget hierarchy) for type testing
+interface UnrelatedConfig {
+   name: string;
+}
+
+class UnrelatedComponent extends Component {
+   declare name?: string;
+
+   constructor(config?: UnrelatedConfig) {
+      super(config);
+   }
+}
+
+// Register alias for testing
+Component.alias("test-widget", TestWidget);
+Component.alias("test-button", TestButton);
+
+describe("Component.create", function () {
+   describe("pass-through", function () {
+      it("returns the same instance if already a component", function () {
+         const btn = new TestButton({ text: "Hello" });
+         const result = Component.create(btn);
+         assert.strictEqual(result, btn);
+         assert.equal(result.text, "Hello");
+      });
+
+      it("preserves the component type", function () {
+         const btn = new TestButton({ text: "Hello" });
+         const result: TestButton = Component.create(btn);
+         assert.ok(result instanceof TestButton);
+      });
+   });
+
+   describe("array input", function () {
+      it("creates an array of components from array of configs", function () {
+         const results = TestWidget.create([{ text: "One" }, { text: "Two" }]);
+         assert.equal(results.length, 2);
+         assert.equal(results[0].text, "One");
+         assert.equal(results[1].text, "Two");
+      });
+
+      it("returns array of component instances", function () {
+         const configs = [{ text: "One" }];
+         const results = TestWidget.create(configs);
+         assert.ok(Array.isArray(results));
+         assert.ok(results[0] instanceof TestWidget);
+      });
+   });
+
+   describe("class type as first argument", function () {
+      it("creates instance of specified class", function () {
+         const result = Component.create(TestButton, { text: "Click me" });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Click me");
+      });
+
+      it("returns typed result based on class", function () {
+         const result: TestButton = Component.create(TestButton, { text: "Click" });
+         assert.ok(result instanceof TestButton);
+      });
+
+      it("merges config and more parameters", function () {
+         const result = Component.create(TestButton, { text: "Base" }, { value: 42 });
+         assert.equal(result.text, "Base");
+         assert.equal(result.value, 42);
+      });
+   });
+
+   describe("config with type property", function () {
+      it("creates instance of type specified in config", function () {
+         const result = Component.create({ type: TestButton, text: "Typed" });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Typed");
+      });
+
+      it("uses config properties for the created instance", function () {
+         const result = Component.create({
+            type: TestButton,
+            text: "Hello",
+            value: 123,
+         });
+         assert.equal(result.text, "Hello");
+         assert.equal(result.value, 123);
+      });
+   });
+
+   describe("config with $type property", function () {
+      it("creates instance of $type specified in config", function () {
+         const result = Component.create({ $type: TestButton, text: "Dollar" });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Dollar");
+      });
+   });
+
+   describe("class type with config and empty more object", function () {
+      it("creates instance with config and empty more object", function () {
+         const result = Component.create(TestWidget, { text: "Hello" }, {});
+         assert.ok(result instanceof TestWidget);
+         assert.equal(result.text, "Hello");
+      });
+   });
+
+   describe("parent class calling create with child class", function () {
+      it("creates child instance when called on parent class", function () {
+         // Pattern: ParentClass.create(ChildClass, config, more)
+         // This is how Widget.create(StaticText, { text }, {}) is used
+         const result = TestWidget.create(TestButton, { text: "Child" }, {});
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Child");
+      });
+
+      it("returns properly typed child instance", function () {
+         const result: TestButton = TestWidget.create(TestButton, { text: "Typed" });
+         assert.ok(result instanceof TestButton);
+      });
+   });
+
+   describe("string alias", function () {
+      it("creates instance from registered alias", function () {
+         const result = Component.create("test-button", { text: "Aliased" });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Aliased");
+      });
+
+      it("throws for unknown alias", function () {
+         assert.throws(() => {
+            Component.create("unknown-alias");
+         }, /Unknown component alias/);
+      });
+   });
+
+   describe("plain config object", function () {
+      it("creates instance of the class create is called on", function () {
+         const result = TestWidget.create({ text: "Plain" });
+         assert.ok(result instanceof TestWidget);
+         assert.equal(result.text, "Plain");
+      });
+
+      it("works with subclasses", function () {
+         const result = TestButton.create({ text: "Sub", onClick: () => {} });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Sub");
+      });
+   });
+
+   describe("config array as second argument", function () {
+      it("creates array when config is an array", function () {
+         const results = Component.create(TestWidget, [{ text: "A" }, { text: "B" }]);
+         assert.equal(results.length, 2);
+         assert.ok(results[0] instanceof TestWidget);
+         assert.ok(results[1] instanceof TestWidget);
+      });
+   });
+
+   describe("type inference", function () {
+      it("infers config type from class constructor", function () {
+         // This is a compile-time check - if it compiles, the types are correct
+         const config: ComponentConfigType<typeof TestButton> = {
+            text: "Hello",
+            onClick: () => {},
+         };
+         const result = Component.create(TestButton, config);
+         assert.ok(result instanceof TestButton);
+      });
+   });
+
+   describe("config with type and more argument", function () {
+      it("merges config and more parameters", function () {
+         const result = Component.create({ type: TestButton, text: "Base" }, { value: 42 });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Base");
+         assert.equal(result.value, 42);
+      });
+
+      it("works with $type as well", function () {
+         const result = Component.create({ $type: TestButton, text: "Dollar" }, { value: 99 });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Dollar");
+         assert.equal(result.value, 99);
+      });
+   });
+
+   describe("heterogeneous array with type property", function () {
+      it("creates array of different component types", function () {
+         const results = Component.create([
+            { type: TestWidget, text: "Widget" },
+            { type: TestButton, text: "Button", onClick: () => {} },
+         ]);
+         assert.equal(results.length, 2);
+         assert.ok(results[0] instanceof TestWidget);
+         assert.ok(results[1] instanceof TestButton);
+         assert.equal(results[0].text, "Widget");
+         assert.equal(results[1].text, "Button");
+      });
+
+      it("returns properly typed tuple", function () {
+         const results = Component.create([
+            { type: TestWidget, text: "W" },
+            { type: TestButton, text: "B" },
+         ]);
+         // Type check: results[0] should be TestWidget, results[1] should be TestButton
+         const widget: TestWidget = results[0];
+         const button: TestButton = results[1];
+         assert.ok(widget instanceof TestWidget);
+         assert.ok(button instanceof TestButton);
+      });
+   });
+
+   describe("this-bound create with config", function () {
+      it("creates instance when called on specific class", function () {
+         const result = TestButton.create({ text: "Bound", onClick: () => {} });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Bound");
+      });
+
+      it("accepts more parameter for additional config", function () {
+         const result = TestButton.create({ text: "Main" }, { value: 100 });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "Main");
+         assert.equal(result.value, 100);
+      });
+   });
+
+   describe("this-bound create with array", function () {
+      it("creates array of instances when called on specific class", function () {
+         const results = TestButton.create([{ text: "A" }, { text: "B" }]);
+         assert.equal(results.length, 2);
+         assert.ok(results[0] instanceof TestButton);
+         assert.ok(results[1] instanceof TestButton);
+      });
+
+      it("accepts more parameter for array", function () {
+         const results = TestButton.create([{ text: "X" }, { text: "Y" }], { value: 50 });
+         assert.equal(results.length, 2);
+         assert.equal(results[0].value, 50);
+         assert.equal(results[1].value, 50);
+      });
+   });
+});
+
+describe("Create type", function () {
+   // Helper function that accepts Create
+   function createComponent<TCtor extends ComponentConstructor>(
+      creatable: Create<TCtor>,
+   ): ComponentInstanceType<TCtor> {
+      return Component.create(creatable as any);
+   }
+
+   it("accepts instance pass-through", function () {
+      const widget = new TestWidget({ text: "Instance" });
+      const result = createComponent<typeof TestWidget>(widget);
+      assert.strictEqual(result, widget);
+   });
+
+   it("accepts constructor", function () {
+      const result = createComponent<typeof TestWidget>(TestButton);
+      assert.ok(result instanceof TestButton);
+   });
+
+   it("accepts config with type", function () {
+      const result = createComponent<typeof TestWidget>({ type: TestButton, text: "Typed" });
+      assert.ok(result instanceof TestButton);
+      assert.equal(result.text, "Typed");
+   });
+
+   it("accepts config with $type", function () {
+      const result = createComponent<typeof TestWidget>({ $type: TestButton, text: "DollarTyped" });
+      assert.ok(result instanceof TestButton);
+      assert.equal(result.text, "DollarTyped");
+   });
+});
+
+describe("CreateConfig type safety", function () {
+   it("rejects config with type from unrelated class", function () {
+      // @ts-expect-error - UnrelatedComponent is not a subclass of TestWidget
+      const config: CreateConfig<typeof TestWidget> = { type: UnrelatedComponent, name: "test" };
+   });
+
+   it("rejects config missing required properties", function () {
+      // @ts-expect-error - text is required in TestWidgetConfig
+      const config: CreateConfig<typeof TestWidget> = { type: TestButton };
+   });
+
+   it("accepts config with type from subclass and required properties", function () {
+      const config: CreateConfig<typeof TestWidget> = { type: TestButton, text: "valid" };
+      assert.ok(config);
+   });
+
+   it("accepts constructor from subclass", function () {
+      const config: CreateConfig<typeof TestWidget> = TestButton;
+      assert.ok(config);
+   });
+});
+
+describe("Create type as property (like Chart.axes)", function () {
+   // Simulates how Chart uses Create<typeof Axis> for its axes property
+   interface ContainerConfig {
+      items?: Record<string, Create<typeof TestWidget>>;
+   }
+
+   it("accepts constructor as property value", function () {
+      const config: ContainerConfig = {
+         items: {
+            a: TestWidget,
+            b: TestButton,
+         },
+      };
+      assert.ok(config);
+   });
+
+   it("accepts config with type as property value", function () {
+      const config: ContainerConfig = {
+         items: {
+            a: { type: TestWidget, text: "widget" },
+            b: { type: TestButton, text: "button", onClick: () => {} },
+         },
+      };
+      assert.ok(config);
+   });
+
+   it("accepts config with $type as property value", function () {
+      const config: ContainerConfig = {
+         items: {
+            a: { $type: TestWidget, text: "widget" },
+            b: { $type: TestButton, text: "button" },
+         },
+      };
+      assert.ok(config);
+   });
+
+   it("accepts instance as property value", function () {
+      const config: ContainerConfig = {
+         items: {
+            a: new TestWidget({ text: "instance" }),
+            b: new TestButton({ text: "button" }),
+         },
+      };
+      assert.ok(config);
+   });
+
+   it("accepts config with extra properties", function () {
+      const config: ContainerConfig = {
+         items: {
+            // Extra property (like snapToTicks on NumericAxis)
+            a: { type: TestButton, text: "button", onClick: () => {}, value: 42 },
+         },
+      };
+      assert.ok(config);
+   });
+});
diff --git a/packages/cx/src/util/Component.ts b/packages/cx/src/util/Component.ts
new file mode 100644
index 000000000..6078b1505
--- /dev/null
+++ b/packages/cx/src/util/Component.ts
@@ -0,0 +1,296 @@
+import { isString } from "./isString";
+import { isFunction } from "./isFunction";
+import { isArray } from "./isArray";
+
+interface DecoratorFactory<T> {
+   (t: T): T;
+}
+
+/** A Component class constructor (supports abstract classes) */
+export type ComponentConstructor<T extends Component = Component> = (abstract new (config?: any) => T) & {
+   isComponentType: true;
+   prototype: T;
+};
+
+/** Extract the config type from a Component class constructor */
+export type ComponentConfigType<T> = T extends abstract new (config?: infer C) => any
+   ? C & { isComponentType?: never }
+   : unknown;
+
+/** Extract the instance type from a Component class constructor */
+export type ComponentInstanceType<T> = T extends abstract new (config?: any) => infer I ? I : Component;
+
+/**
+ * Type representing any valid input to Component.create that will produce an instance of T.
+ *
+ * Accepts:
+ * - An instance of T (pass-through)
+ * - A constructor for T or any subtype
+ * - A config object for T (when T has a known config type)
+ * - A config object with `type` or `$type` property specifying the constructor
+ *
+ * @example
+ * // In a Chart widget config:
+ * interface ChartConfig {
+ *    xAxis?: Creatable<Axis>;  // Accepts NumericAxis, CategoryAxis, etc.
+ *    yAxis?: Creatable<Axis>;
+ * }
+ *
+ * // Usage:
+ * <Chart xAxis={NumericAxis} />  // Just the type
+ * <Chart xAxis={{ type: NumericAxis, min: 0, max: 100 }} />  // Config with type
+ * <Chart xAxis={new NumericAxis({ min: 0 })} />  // Instance
+ */
+
+// Helper type: constructor for T or any subclass
+type SubclassConstructor<TBaseCtor extends ComponentConstructor> = ComponentConstructor<
+   ComponentInstanceType<TBaseCtor>
+>;
+
+// Helper: get config type, falling back to base if subclass config is `any`
+type ResolveConfigType<TBaseCtor extends ComponentConstructor, TSubCtor extends ComponentConstructor> = 0 extends 1 &
+   ComponentConfigType<TSubCtor>
+   ? ComponentConfigType<TBaseCtor> // TSubCtor config is `any`, use base config
+   : ComponentConfigType<TSubCtor>; // Use specific subclass config
+
+// Config with type property - uses inference to capture the actual subclass constructor
+// When a specific subclass is provided, its config is used; otherwise base config + extra props allowed
+type ConfigWithType<TBaseCtor extends ComponentConstructor, TSubCtor extends SubclassConstructor<TBaseCtor>> = {
+   type: TSubCtor;
+} & ResolveConfigType<TBaseCtor, TSubCtor> &
+   // Allow extra properties when using generic subclass (enables subclass-specific props)
+   (0 extends 1 & ComponentConfigType<TSubCtor> ? { [key: string]: unknown } : {});
+
+type ConfigWith$Type<TBaseCtor extends ComponentConstructor, TSubCtor extends SubclassConstructor<TBaseCtor>> = {
+   $type: TSubCtor;
+} & ResolveConfigType<TBaseCtor, TSubCtor> &
+   // Allow extra properties when using generic subclass (enables subclass-specific props)
+   (0 extends 1 & ComponentConfigType<TSubCtor> ? { [key: string]: unknown } : {});
+
+export type CreateConfig<
+   TBaseCtor extends ComponentConstructor,
+   TSubCtor extends SubclassConstructor<TBaseCtor> = SubclassConstructor<TBaseCtor>,
+> =
+   | TSubCtor // Constructor for T or subclass
+   | ConfigWithType<TBaseCtor, TSubCtor> // Config object with type
+   | ConfigWith$Type<TBaseCtor, TSubCtor>; // Config object with $type
+
+export type Create<TCtor extends ComponentConstructor> =
+   | ComponentInstanceType<TCtor> // Instance pass-through
+   | CreateConfig<TCtor>;
+
+/**
+ * Type-checks a CreateConfig object based on its `type` or `$type` property.
+ * This is a compile-time helper that returns the input unchanged at runtime.
+ * Uses `const` type parameter (TypeScript 5.0+) to enable excess property checking.
+ *
+ * @example
+ * // With type property
+ * const axisConfig = validateConfig({ type: NumericAxis, min: 0, max: 100 });
+ *
+ * // With $type property
+ * const selectionConfig = validateConfig({ $type: KeySelection, bind: "selection" });
+ */
+export function validateConfig<const TCtor extends ComponentConstructor>(
+   config:
+      | ({ type: TCtor; $type?: never } & ComponentConfigType<TCtor>)
+      | ({ $type: TCtor; type?: never } & ComponentConfigType<TCtor>),
+): any {
+   return config;
+}
+
+const componentAlias: Record<string, any> = {};
+
+export class Component {
+   public static namespace: string;
+   public static isComponentType: true;
+   public static autoInit: boolean;
+   public static factory: (alias: string, config?: any, more?: any) => Component;
+   declare public isComponent: boolean;
+
+   constructor(config?: any) {
+      if (config && config.$props) {
+         Object.assign(config, config.$props);
+         delete config.$props;
+      }
+      Object.assign(this, config);
+   }
+
+   init() {}
+
+   /**
+    *
+    * @param alias
+    * @param type
+    */
+   static alias<T>(alias: string, type: T): void;
+   static alias<T>(alias: string): DecoratorFactory<T>;
+   static alias(alias: string, type?: any) {
+      if (type) {
+         type.prototype.componentAlias = alias;
+         componentAlias[this.namespace + alias] = type;
+      } //decorator usage
+      else
+         return (t: any) => {
+            this.alias(alias, t);
+            return t;
+         };
+   }
+
+   /**
+    * Creates a component instance from various input types.
+    *
+    * Supported signatures:
+    * - Pass-through: If input is already a component instance, returns it unchanged
+    * - Array: Maps over array elements, creating components for each
+    * - Class type: Creates instance of the specified class with config
+    * - Config with type/$type: Creates instance of the type specified in config
+    * - String alias: Looks up registered alias and creates that type
+    * - Plain config: Creates instance of the class `create` was called on
+    *
+    * @example
+    * // Pass-through
+    * const btn = new Button();
+    * Button.create(btn) // returns btn as Button
+    *
+    * // Class type with config
+    * Button.create(Button, { text: "Click" }) // returns Button
+    *
+    * // Config with type property
+    * Widget.create({ type: Button, text: "Click" }) // returns Button
+    *
+    * // Plain config on specific class
+    * Button.create({ text: "Click" }) // returns Button with ButtonConfig typing
+    */
+
+   // Pass-through: already a component instance
+   static create<T extends Component>(instance: T, unused?: any): T;
+
+   // Array of config objects with type or $type property (each item can have different type)
+   static create<
+      T extends ({ type: ComponentConstructor; $type?: never } | { $type: ComponentConstructor; type?: never })[],
+   >(
+      configs: [...T],
+      more?: Record<string, any>,
+   ): {
+      [K in keyof T]: T[K] extends { type: ComponentConstructor<infer U> }
+         ? U
+         : T[K] extends { $type: ComponentConstructor<infer U> }
+           ? U
+           : Component;
+   };
+
+   // Config object with type or $type property
+   static create<TCtor extends ComponentConstructor, T extends Component = ComponentInstanceType<TCtor>>(
+      config: (
+         | { type: TCtor; $type?: never; isComponentType?: never }
+         | { $type: TCtor; type?: never; isComponentType?: never }
+      ) &
+         Partial<ComponentConfigType<ComponentConstructor<T>>>,
+      more?: Partial<ComponentConfigType<ComponentConstructor<T>>>,
+   ): T;
+
+   // Class type with array of configs - returns array of instances
+   static create<TCtor extends ComponentConstructor, T extends Component = ComponentInstanceType<TCtor>>(
+      type: TCtor,
+      configs: ComponentConfigType<ComponentConstructor<T>>[],
+      more?: Partial<ComponentConfigType<ComponentConstructor<T>>>,
+   ): T[];
+
+   // Explicit class type as first argument with typed config
+   static create<TCtor extends ComponentConstructor, T extends Component = ComponentInstanceType<TCtor>>(
+      type: TCtor,
+      config?: ComponentConfigType<ComponentConstructor<T>>,
+      more?: Partial<ComponentConfigType<ComponentConstructor<T>>>,
+   ): T;
+
+   // Array of configs - returns array of instances of this class (this-bound)
+   static create<T extends Component>(
+      this: { prototype: T; isComponentType: true },
+      configs: ComponentConfigType<ComponentConstructor<T>>[],
+      more?: Partial<ComponentConfigType<ComponentConstructor<T>>>,
+   ): T[];
+
+   // Config object - returns instance of this class (this-bound)
+   static create<T extends Component>(
+      this: { prototype: T; isComponentType: true },
+      config: ComponentConfigType<ComponentConstructor<T>>,
+      more?: Partial<ComponentConfigType<ComponentConstructor<T>>>,
+   ): T;
+
+   // String alias (e.g., "div", "button") - returns instance of this class
+   static create<T extends Component>(
+      this: { prototype: T; isComponentType: true },
+      alias: string,
+      config?: ComponentConfigType<ComponentConstructor<T>>,
+      more?: Partial<ComponentConfigType<ComponentConstructor<T>>>,
+   ): T;
+
+   // Implementation
+   static create(typeAlias?: any, config?: any, more?: any): any {
+      if (!typeAlias) return this.factory(typeAlias, config, more);
+
+      if (typeAlias.isComponent) return typeAlias;
+
+      if (isComponentFactory(typeAlias)) return this.create(typeAlias.create(config), config, more);
+
+      if (isArray(typeAlias)) return typeAlias.map((c) => this.create(c as any, config, more));
+
+      if (typeAlias.$type) return this.create(typeAlias.$type, typeAlias, config);
+
+      if (typeAlias.type) return this.create(typeAlias.type, typeAlias, config);
+
+      let cmpType: any, alias: string;
+
+      if (typeAlias.isComponentType) cmpType = typeAlias;
+      else if (isFunction(typeAlias)) {
+         if (this.factory) return this.factory(typeAlias, config, more);
+         throw new Error(`Unsupported component type ${typeAlias}.`);
+      } else if (isString(typeAlias)) {
+         alias = this.namespace + typeAlias;
+         cmpType = componentAlias[alias];
+         if (!cmpType) {
+            if (typeAlias && this.factory) return this.factory(typeAlias, config, more);
+            throw new Error(`Unknown component alias ${alias}.`);
+         }
+      } else if (typeof typeAlias == "object") {
+         cmpType = typeAlias.type || typeAlias.$type;
+         if (!cmpType) {
+            cmpType = this;
+            more = more ? Object.assign({}, config, more) : config;
+            config = typeAlias;
+         }
+      }
+
+      if (isArray(config)) return config.map((cfg: any) => this.create(cmpType, cfg, more));
+
+      let cfg = config;
+
+      if (more) cfg = Object.assign({}, config, more);
+
+      let cmp = new cmpType(cfg);
+      if (cmpType.autoInit && cmp.init) cmp.init();
+      return cmp;
+   }
+}
+
+Component.prototype.isComponent = true;
+
+Component.isComponentType = true;
+Component.namespace = "";
+Component.autoInit = false;
+
+Component.factory = (alias: string, _config?: any, _more?: any): Component => {
+   throw new Error(`Unknown component alias ${alias}.`);
+};
+
+export function createComponentFactory(factory: any, jsxDriver: any, meta?: any) {
+   factory.$isComponentFactory = true;
+   factory.$meta = meta;
+   factory.create = jsxDriver;
+   return factory;
+}
+
+export function isComponentFactory(factory: any): boolean {
+   return factory && factory.$isComponentFactory;
+}
diff --git a/packages/cx/src/util/Console.d.ts b/packages/cx/src/util/Console.d.ts
deleted file mode 100644
index 522f44686..000000000
--- a/packages/cx/src/util/Console.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export class Console {
-   static log(...args: unknown[]): void;
-   static warn(...args: unknown[]): void;
-}
diff --git a/packages/cx/src/util/Console.js b/packages/cx/src/util/Console.js
deleted file mode 100644
index 18c01e4d9..000000000
--- a/packages/cx/src/util/Console.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const Console = {
-   log: function () {
-      if (typeof window != 'undefined' && window.console)
-         console.log(...arguments);
-   },
-
-   warn: function () {
-      if (typeof window != 'undefined' && window.console)
-         console.warn(...arguments);
-   }
-};
diff --git a/packages/cx/src/util/Console.ts b/packages/cx/src/util/Console.ts
new file mode 100644
index 000000000..18ff32730
--- /dev/null
+++ b/packages/cx/src/util/Console.ts
@@ -0,0 +1,13 @@
+export const Console = {
+   log: (...args: any[]): void => {
+      if (typeof window != "undefined" && window.console) console.log(...args);
+   },
+
+   warn: (...args: any[]): void => {
+      if (typeof window != "undefined" && window.console) console.warn(...args);
+   },
+
+   error: (...args: any[]): void => {
+      if (typeof window != "undefined" && window.console) console.error(...args);
+   },
+};
diff --git a/packages/cx/src/util/DOM.d.ts b/packages/cx/src/util/DOM.d.ts
deleted file mode 100644
index f4446ed9b..000000000
--- a/packages/cx/src/util/DOM.d.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-type ElementFilter = (el: Element, condition: (el: Element) => boolean) => Element | null;
-
-/** 
- * Returns first child element, or the parent element itself, that satisfies the `condition` function.
- * @param el
- * @param condition
- * @returns {Element}
- */
-export const findFirst: ElementFilter;
-
-export const findFirstChild : ElementFilter;
-
-export const closest: ElementFilter;
-
-export const closestParent: ElementFilter;
-
-export function isFocused(el: Element) : boolean;
-
-export function isFocusedDeep(el: Element) : boolean;
-
-export function isFocusable(el: Element) : boolean;
-
-/** 
- * Returns focused element.
- * @returns {Element}
- */
-export function getFocusedElement() : Element;
-
-
-export function isDescendant(el: Element, descEl: Element) : boolean;
-
-export function isSelfOrDescendant(el: Element, descEl: Element) : boolean;
-
diff --git a/packages/cx/src/util/DOM.js b/packages/cx/src/util/DOM.js
deleted file mode 100644
index f0743a2f4..000000000
--- a/packages/cx/src/util/DOM.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import {isNumber} from '../util/isNumber';
-
-export function findFirst(el, condition) {
-   if (condition(el))
-      return el;
-
-   var children = el.childNodes;
-   if (children)
-      for (var i = 0; i < children.length; i++) {
-         var child = findFirst(children[i], condition);
-         if (child)
-            return child;
-      }
-   return null;
-}
-
-export function findFirstChild(el, condition) {
-   var children = el.childNodes;
-   if (children)
-      for (var i = 0; i < children.length; i++) {
-         var child = findFirst(children[i], condition);
-         if (child)
-            return child;
-      }
-   return null;
-}
-
-export function closest(el, condition) {
-   while (el) {
-      if (condition(el))
-         return el;
-      el = el.parentNode;
-   }
-   return null;
-}
-
-export function closestParent(el, condition) {
-   return el && closest(el.parentNode, condition);
-}
-
-export function isFocused(el) {
-   return document.activeElement == el;
-}
-
-export function isFocusedDeep(el) {
-   return document.activeElement == el || (document.activeElement && el.contains(document.activeElement));
-}
-
-const focusableWithoutTabIndex = ['INPUT', 'SELECT', 'TEXTAREA', 'A', 'BUTTON'];
-
-export function isFocusable(el) {
-   var firstPass = el && isNumber(el.tabIndex) && el.tabIndex >= 0;
-   if (!firstPass)
-      return false;
-
-   if (focusableWithoutTabIndex.indexOf(el.tagName) != -1 && !el.hasAttribute('disabled'))
-      return true;
-
-   return el.hasAttribute('tabindex');
-}
-
-export function getFocusedElement() {
-   return document.activeElement;
-}
-
-export function isDescendant(el, descEl) {
-   return el.contains(descEl);
-}
-
-export function isSelfOrDescendant(el, descEl) {
-   return el == descEl || el.contains(descEl);
-}
diff --git a/packages/cx/src/util/DOM.ts b/packages/cx/src/util/DOM.ts
new file mode 100644
index 000000000..80e6acbcb
--- /dev/null
+++ b/packages/cx/src/util/DOM.ts
@@ -0,0 +1,88 @@
+import { isNumber } from "../util/isNumber";
+
+type ElementFilter = (el: Element, condition: (el: Element) => boolean) => Element | null;
+
+/**
+ * Returns first child element, or the parent element itself, that satisfies the `condition` function.
+ * @param el
+ * @param condition
+ * @returns {Element}
+ */
+export function findFirst<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
+export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null;
+export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null {
+   if (condition(el)) return el;
+
+   var children = el.children;
+   if (children)
+      for (var i = 0; i < children.length; i++) {
+         var child = findFirst(children[i], condition);
+         if (child) return child;
+      }
+   return null;
+}
+
+export function findFirstChild<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
+export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null;
+export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null {
+   var children = el.children;
+   if (children)
+      for (var i = 0; i < children.length; i++) {
+         var child = findFirst(children[i], condition);
+         if (child) return child;
+      }
+   return null;
+}
+
+export function closest(el: HTMLElement | null, condition: (el: HTMLElement) => boolean): HTMLElement | null;
+export function closest(el: Element | null, condition: (el: Element) => boolean): Element | null;
+export function closest(el: Element | null, condition: (el: any) => boolean): Element | null {
+   while (el) {
+      if (condition(el)) return el;
+      el = el.parentElement;
+   }
+   return null;
+}
+
+export function closestParent(el: HTMLElement, condition: (el: HTMLElement) => boolean): HTMLElement | null;
+export function closestParent(el: Element, condition: (el: HTMLElement) => boolean): HTMLElement | null;
+export function closestParent(el: Element, condition: (el: any) => boolean): HTMLElement | null {
+   return el && closest(el.parentElement, condition);
+}
+
+export function isFocused(el: Element): boolean {
+   return document.activeElement == el;
+}
+
+export function isFocusedDeep(el: Element): boolean {
+   return document.activeElement == el || (!!document.activeElement && el.contains(document.activeElement));
+}
+
+const focusableWithoutTabIndex = ["INPUT", "SELECT", "TEXTAREA", "A", "BUTTON"];
+
+export function isFocusable(el: Element): el is HTMLElement {
+   if (!(el instanceof HTMLElement)) return false;
+
+   var firstPass = el && isNumber(el.tabIndex) && el.tabIndex >= 0;
+   if (!firstPass) return false;
+
+   if (focusableWithoutTabIndex.indexOf(el.tagName) != -1 && !el.hasAttribute("disabled")) return true;
+
+   return el.hasAttribute("tabindex");
+}
+
+/**
+ * Returns focused element.
+ * @returns {Element}
+ */
+export function getFocusedElement(): Element | null {
+   return document.activeElement;
+}
+
+export function isDescendant(el: Element, descEl: Element): boolean {
+   return el.contains(descEl);
+}
+
+export function isSelfOrDescendant(el: Element, descEl: Element): boolean {
+   return el == descEl || el.contains(descEl);
+}
diff --git a/packages/cx/src/util/Debug.d.ts b/packages/cx/src/util/Debug.d.ts
deleted file mode 100644
index ae61f1464..000000000
--- a/packages/cx/src/util/Debug.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-
-export class Debug {
-
-   static enable(flag: string);
-
-   static disable(flag: string);
-
-   static log(flag): string;
-}
-
-export function debug(flag: string, ...args: any[]);
\ No newline at end of file
diff --git a/packages/cx/src/util/Debug.js b/packages/cx/src/util/Debug.js
deleted file mode 100644
index d5afd7d13..000000000
--- a/packages/cx/src/util/Debug.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import {Console} from './Console';
-
-let activeFlags = {
-   deprecated: true
-};
-
-export function debug(flag) {
-   if (process.env.NODE_ENV !== "production") {
-      if (!activeFlags[flag])
-         return;
-
-      Console.log(...arguments);
-   }
-}
-
-export const Debug = {
-
-   enable: function(flag) {
-      if (process.env.NODE_ENV !== "production") {
-         activeFlags[flag] = true;
-      }
-   },
-
-   disable: function(flag) {
-      if (process.env.NODE_ENV !== "production") {
-         activeFlags[flag] = false;
-      }
-   },
-
-   log: debug
-};
-
-export const renderFlag = 'render';
-export const prepareFlag = 'prepare';
-export const processDataFlag = 'process-data';
-export const cleanupFlag = 'cleanup';
-export const menuFlag = 'menu';
-export const focusFlag = 'focus';
-export const internalFlag = 'internal';
-export const shouldUpdateFlag = 'should-update';
-export const appDataFlag = 'app-data';
-export const tooltipsFlag = 'tooltips';
-export const deprecatedFlag = 'deprecated';
-export const destroyFlag = 'destroy';
-
diff --git a/packages/cx/src/util/Debug.ts b/packages/cx/src/util/Debug.ts
new file mode 100644
index 000000000..a660777e5
--- /dev/null
+++ b/packages/cx/src/util/Debug.ts
@@ -0,0 +1,71 @@
+import { Console } from './Console';
+
+export type DebugFlag =
+   | 'render'
+   | 'prepare'
+   | 'process-data'
+   | 'cleanup'
+   | 'menu'
+   | 'focus'
+   | 'internal'
+   | 'should-update'
+   | 'app-data'
+   | 'tooltips'
+   | 'deprecated'
+   | 'destroy'
+   | string; // Allow custom flags
+
+interface DebugFlags {
+   [flag: string]: boolean;
+}
+
+let activeFlags: DebugFlags = {
+   deprecated: true
+};
+
+export function debug(flag: DebugFlag, ...args: any[]): void {
+   if (process.env.NODE_ENV !== "production") {
+      if (!activeFlags[flag])
+         return;
+
+      Console.log(flag + ':', ...args);
+   }
+}
+
+export const Debug = {
+   enable(flag: DebugFlag): void {
+      if (process.env.NODE_ENV !== "production") {
+         activeFlags[flag] = true;
+      }
+   },
+
+   disable(flag: DebugFlag): void {
+      if (process.env.NODE_ENV !== "production") {
+         activeFlags[flag] = false;
+      }
+   },
+
+   isEnabled(flag: DebugFlag): boolean {
+      return process.env.NODE_ENV !== "production" && !!activeFlags[flag];
+   },
+
+   getActiveFlags(): Readonly<DebugFlags> {
+      return { ...activeFlags };
+   },
+
+   log: debug
+};
+
+export const renderFlag: DebugFlag = 'render';
+export const prepareFlag: DebugFlag = 'prepare';
+export const processDataFlag: DebugFlag = 'process-data';
+export const cleanupFlag: DebugFlag = 'cleanup';
+export const menuFlag: DebugFlag = 'menu';
+export const focusFlag: DebugFlag = 'focus';
+export const internalFlag: DebugFlag = 'internal';
+export const shouldUpdateFlag: DebugFlag = 'should-update';
+export const appDataFlag: DebugFlag = 'app-data';
+export const tooltipsFlag: DebugFlag = 'tooltips';
+export const deprecatedFlag: DebugFlag = 'deprecated';
+export const destroyFlag: DebugFlag = 'destroy';
+
diff --git a/packages/cx/src/util/Format.d.ts b/packages/cx/src/util/Format.d.ts
deleted file mode 100644
index daefa41ec..000000000
--- a/packages/cx/src/util/Format.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-declare type Formatter = (any) => string;
-
-export class Format {
-   static value(v: any, format: string): string;
-
-   static parse(format: string): Formatter;
-
-   static register(format: string | string[], formatter: Formatter): void;
-
-   static registerFactory(format: string | string[], factory: (...args) => Formatter): void;
-}
-
-export function resolveMinMaxFractionDigits(
-   minimumFractionDigits: number,
-   maximumFractionDigits: number,
-): { minimumFractionDigits: number; maximumFractionDigits: number };
-
-export function setGetFormatCacheCallback(callback: () => {}): void;
diff --git a/packages/cx/src/util/Format.js b/packages/cx/src/util/Format.js
deleted file mode 100644
index 8da9c2cdb..000000000
--- a/packages/cx/src/util/Format.js
+++ /dev/null
@@ -1,270 +0,0 @@
-import { debug } from "./Debug";
-import { GlobalCacheIdentifier } from "./GlobalCacheIdentifier";
-import { isNumber } from "../util/isNumber";
-import { isUndefined } from "../util/isUndefined";
-import { isArray } from "../util/isArray";
-import { capitalize } from "./capitalize";
-import { parseDateInvariant } from "./date/parseDateInvariant";
-
-//Culture dependent formatters are defined in the ui package.
-
-const defaultFormatter = (v) => v.toString();
-
-let formatFactory = {
-   string: function () {
-      return defaultFormatter;
-   },
-
-   wrap: function (part0, prefix, suffix) {
-      if (!prefix) prefix = "";
-
-      if (!suffix) suffix = "";
-
-      return (value) => prefix + value.toString() + suffix;
-   },
-
-   fixed: function (part0, digits) {
-      return (value) => value.toFixed(digits);
-   },
-
-   prefix: function (part0, prefix) {
-      if (!prefix) prefix = "";
-
-      return (value) => prefix + value.toString();
-   },
-
-   suffix: function (part0, suffix) {
-      if (!suffix) suffix = "";
-
-      return (value) => value.toString() + suffix;
-   },
-
-   uppercase: function () {
-      return (value) => value.toString().toUpperCase();
-   },
-
-   lowercase: function () {
-      return (value) => value.toString().toLowerCase();
-   },
-
-   urlencode: function () {
-      return (value) => encodeURIComponent(value);
-   },
-
-   number: function (part0, minFractionDigits, maxFractionDigits) {
-      let { minimumFractionDigits, maximumFractionDigits } = resolveMinMaxFractionDigits(
-         minFractionDigits,
-         maxFractionDigits,
-      );
-      let trimmable = maximumFractionDigits - minimumFractionDigits;
-      if (trimmable > 0) {
-         if (minimumFractionDigits == 0) ++trimmable;
-         return (value) => trimFractionZeros(value.toFixed(maximumFractionDigits), trimmable);
-      }
-      return (value) => value.toFixed(maximumFractionDigits);
-   },
-
-   percentage: function (part0, minFractionDigits, maxFractionDigits) {
-      let numberFormatter = formatFactory.number(part0, minFractionDigits, maxFractionDigits);
-      return (value) => numberFormatter(value * 100) + "%";
-   },
-
-   percentageSign: function (part0, minFractionDigits, maxFractionDigits) {
-      let numberFormatter = formatFactory.number(part0, minFractionDigits, maxFractionDigits);
-      return (value) => numberFormatter(value) + "%";
-   },
-
-   date: function () {
-      return (value) => {
-         let date = parseDateInvariant(value);
-         return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
-      };
-   },
-
-   time: function () {
-      return (value) => {
-         let date = parseDateInvariant(value);
-         let h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
-         let m = date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
-         return `${h}:${m}`;
-      };
-   },
-
-   datetime: function () {
-      let date = formatFactory.date();
-      let time = formatFactory.time();
-      return (value) => date(value) + " " + time(value);
-   },
-
-   ellipsis: function (part0, length, where) {
-      length = Number(length);
-      if (!(length > 3)) length = 10;
-      switch (where) {
-         default:
-         case "end":
-            return (value) => {
-               let s = String(value);
-               if (s.length > length) return s.substring(0, length - 3) + "...";
-               return s;
-            };
-
-         case "start":
-            return (value) => {
-               let s = String(value);
-               if (s.length > length) return "..." + s.substring(s.length - length + 3);
-               return s;
-            };
-
-         case "middle":
-            return (value) => {
-               let s = String(value);
-               if (s.length > length) {
-                  let x = Math.floor(length - 2) / 2;
-                  return s.substring(0, x) + "..." + s.substring(s.length - (length - 3 - x));
-               }
-               return s;
-            };
-      }
-   },
-
-   zeroPad: function (part0, length) {
-      return (value) => {
-         let s = String(value);
-         return s.padStart(length, "0");
-      };
-   },
-
-   leftPad: function (part0, length, char) {
-      return (value) => {
-         let s = String(value);
-         return s.padStart(length, char ?? " ");
-      };
-   },
-
-   capitalize: function () {
-      return (value) => {
-         let s = String(value);
-         return capitalize(s);
-      };
-   },
-
-   titleCase: function () {
-      return (value) => {
-         let s = String(value);
-         return s.replace(/\w\S*/g, function (word) {
-            return capitalize(word.toLowerCase());
-         });
-      };
-   },
-};
-
-formatFactory.s = formatFactory.str = formatFactory.string;
-formatFactory.f = formatFactory.fixed;
-formatFactory.n = formatFactory.number;
-formatFactory.p = formatFactory.percentage;
-formatFactory.ps = formatFactory.percentageSign;
-formatFactory.d = formatFactory.date;
-formatFactory.t = formatFactory.time;
-formatFactory.dt = formatFactory.datetime;
-formatFactory.zeropad = formatFactory.zeroPad;
-formatFactory.leftpad = formatFactory.leftPad;
-formatFactory.capitalize = formatFactory.capitalize;
-formatFactory.titlecase = formatFactory.titleCase;
-
-function buildFormatter(format) {
-   let formatter = defaultFormatter,
-      nullText = "";
-   if (format) {
-      let pipeParts = format.split("|");
-      nullText = pipeParts[1] || "";
-      let colonSepParts = pipeParts[0].split(":");
-      for (let i = 0; i < colonSepParts.length; i++) {
-         let parts = colonSepParts[i].split(";");
-         let factory = formatFactory[parts[0]];
-         if (!factory) debug("Unknown string format: " + format);
-         else if (i == 0) formatter = factory(...parts);
-         else {
-            let outerFmt = factory(...parts);
-            let innerFmt = formatter;
-            formatter = (v) => outerFmt(innerFmt(v));
-         }
-      }
-   }
-   return (v) => (v == null || v === "" ? nullText : formatter(v));
-}
-
-let format = {
-   cache: {},
-};
-
-function getDefaultFormatCache() {
-   if (format.cacheIdentifier != GlobalCacheIdentifier.get()) {
-      format = {
-         cache: {},
-         cacheIdentifier: GlobalCacheIdentifier.get(),
-      };
-   }
-   return format.cache;
-}
-
-let getFormatCache = getDefaultFormatCache;
-
-export function setGetFormatCacheCallback(callback) {
-   getFormatCache = callback;
-}
-
-function getFormatter(format) {
-   if (!format) format = "";
-   let formatCache = getFormatCache();
-   let formatter = formatCache[format];
-   if (!formatter) formatter = formatCache[format] = buildFormatter(format);
-
-   return formatter;
-}
-
-export class Format {
-   static value(v, format) {
-      let formatter = getFormatter(format);
-      return formatter(v);
-   }
-
-   static parse(format) {
-      return getFormatter(format);
-   }
-
-   static register(format, formatter) {
-      this.registerFactory(format, () => formatter);
-   }
-
-   static registerFactory(format, factory) {
-      if (isArray(format)) format.forEach((f) => this.registerFactory(f, factory));
-      else formatFactory[format] = factory;
-   }
-}
-
-export function resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits) {
-   minimumFractionDigits = minimumFractionDigits != null ? Number(minimumFractionDigits) : minimumFractionDigits;
-   maximumFractionDigits = maximumFractionDigits != null ? Number(maximumFractionDigits) : maximumFractionDigits;
-
-   if (isNumber(minimumFractionDigits)) {
-      if (isUndefined(maximumFractionDigits)) maximumFractionDigits = minimumFractionDigits;
-      else if (isNumber(maximumFractionDigits) && maximumFractionDigits < minimumFractionDigits)
-         maximumFractionDigits = minimumFractionDigits;
-   } else if (minimumFractionDigits == null && maximumFractionDigits == null) {
-      minimumFractionDigits = 0;
-      maximumFractionDigits = 18;
-   }
-
-   return {
-      minimumFractionDigits,
-      maximumFractionDigits,
-   };
-}
-
-export function trimFractionZeros(str, max) {
-   let cnt = 0,
-      l = str.length;
-   while (cnt < max && (str[l - 1 - cnt] === "0" || str[l - 1 - cnt] === ".")) cnt++;
-
-   return cnt > 0 ? str.substring(0, l - cnt) : str;
-}
diff --git a/packages/cx/src/util/Format.spec.js b/packages/cx/src/util/Format.spec.js
deleted file mode 100644
index 9f27ccab8..000000000
--- a/packages/cx/src/util/Format.spec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import {Format} from './Format';
-import assert from 'assert';
-
-describe('Format', function () {
-   describe('n,number ', function () {
-      it('correctly formats numbers with min and max allowed precision', function () {
-         assert.equal(Format.value(0.5, 'n;2;4'), '0.50');
-         assert.equal(Format.value(0.50101, 'n;2;4'), '0.501');
-         assert.equal(Format.value(0.5012, 'n;2;4'), '0.5012');
-         assert.equal(Format.value(0.0, 'n;0;4'), '0');
-      });
-
-      it('correctly formats numbers fixed precision', function () {
-         assert.equal(Format.value(0.5, 'number;3'), '0.500');
-         assert.equal(Format.value(0.50101, 'number;3'), '0.501');
-         assert.equal(Format.value(0.5016, 'number;3'), '0.502');
-      });
-   });
-
-   describe('p,percentage', function () {
-      it('correctly formats numbers with min and max allowed precision', function () {
-         assert.equal(Format.value(0.5, 'p;2;4'), '50.00%');
-         assert.equal(Format.value(0.50101, 'p;2;4'), '50.101%');
-         assert.equal(Format.value(0.50123456, 'p;2;4'), '50.1235%');
-         assert.equal(Format.value(0.0, 'p;0;4'), '0%');
-      });
-
-      it('correctly formats numbers fixed precision', function () {
-         assert.equal(Format.value(0.5, 'percentage;3'), '50.000%');
-         assert.equal(Format.value(0.50101, 'percentage;3'), '50.101%');
-         assert.equal(Format.value(0.5016, 'percentage;3'), '50.160%');
-      });
-   });
-
-   describe('date,time,datetime', function () {
-      it('correctly formats dates', function () {
-         assert.equal(Format.value(new Date(2015, 3, 1), 'd'), '4/1/2015');
-      });
-
-      it('correctly formats time', function () {
-         assert.equal(Format.value(new Date(2015, 3, 1, 16, 15, 14), 't'), '16:15');
-         assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), 'time'), '05:06');
-      });
-
-      it('correctly formats date-time', function () {
-         assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), 'dt'), '4/1/2015 05:06');
-      });
-   });
-
-   describe('ellipsis', function () {
-      it('can shorten long texts', function () {
-         assert.equal(Format.value('This is a very long text.', 'ellipsis;7'), 'This...');
-      });
-
-      it('can be used at the start of string', function () {
-         assert.equal(Format.value('This is a very long text.', 'ellipsis;8;start'), '...text.');
-      });
-
-      it('can be used in the middle of the string', function () {
-         assert.equal(Format.value('First (Middle) Last', 'ellipsis;11;middle'), 'Firs...Last');
-      });
-   });
-
-   describe('null text', function () {
-      it('can contain null text', function () {
-         assert.equal(Format.value(null, 'n;2|N/A'), 'N/A');
-      });
-   });
-});
diff --git a/packages/cx/src/util/Format.spec.ts b/packages/cx/src/util/Format.spec.ts
new file mode 100644
index 000000000..fe08195f5
--- /dev/null
+++ b/packages/cx/src/util/Format.spec.ts
@@ -0,0 +1,69 @@
+import assert from "assert";
+import { Format } from "./Format";
+
+describe("Format", function () {
+   describe("n,number ", function () {
+      it("correctly formats numbers with min and max allowed precision", function () {
+         assert.equal(Format.value(0.5, "n;2;4"), "0.50");
+         assert.equal(Format.value(0.50101, "n;2;4"), "0.501");
+         assert.equal(Format.value(0.5012, "n;2;4"), "0.5012");
+         assert.equal(Format.value(0.0, "n;0;4"), "0");
+      });
+
+      it("correctly formats numbers fixed precision", function () {
+         assert.equal(Format.value(0.5, "number;3"), "0.500");
+         assert.equal(Format.value(0.50101, "number;3"), "0.501");
+         assert.equal(Format.value(0.5016, "number;3"), "0.502");
+      });
+   });
+
+   describe("p,percentage", function () {
+      it("correctly formats numbers with min and max allowed precision", function () {
+         assert.equal(Format.value(0.5, "p;2;4"), "50.00%");
+         assert.equal(Format.value(0.50101, "p;2;4"), "50.101%");
+         assert.equal(Format.value(0.50123456, "p;2;4"), "50.1235%");
+         assert.equal(Format.value(0.0, "p;0;4"), "0%");
+      });
+
+      it("correctly formats numbers fixed precision", function () {
+         assert.equal(Format.value(0.5, "percentage;3"), "50.000%");
+         assert.equal(Format.value(0.50101, "percentage;3"), "50.101%");
+         assert.equal(Format.value(0.5016, "percentage;3"), "50.160%");
+      });
+   });
+
+   describe("date,time,datetime", function () {
+      it("correctly formats dates", function () {
+         assert.equal(Format.value(new Date(2015, 3, 1), "d"), "4/1/2015");
+      });
+
+      it("correctly formats time", function () {
+         assert.equal(Format.value(new Date(2015, 3, 1, 16, 15, 14), "t"), "16:15");
+         assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "time"), "05:06");
+      });
+
+      it("correctly formats date-time", function () {
+         assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "dt"), "4/1/2015 05:06");
+      });
+   });
+
+   describe("ellipsis", function () {
+      it("can shorten long texts", function () {
+         assert.equal(Format.value("This is a very long text.", "ellipsis;7"), "This...");
+      });
+
+      it("can be used at the start of string", function () {
+         assert.equal(Format.value("This is a very long text.", "ellipsis;8;start"), "...text.");
+      });
+
+      it("can be used in the middle of the string", function () {
+         assert.equal(Format.value("First (Middle) Last", "ellipsis;11;middle"), "Firs...Last");
+      });
+   });
+
+   describe("null text", function () {
+      it("can contain null text", function () {
+         assert.equal(Format.value(null, "n;2|N/A"), "N/A");
+      });
+   });
+});
diff --git a/packages/cx/src/util/Format.ts b/packages/cx/src/util/Format.ts
new file mode 100644
index 000000000..7c23b8107
--- /dev/null
+++ b/packages/cx/src/util/Format.ts
@@ -0,0 +1,267 @@
+import { debug } from "./Debug";
+import { GlobalCacheIdentifier } from "./GlobalCacheIdentifier";
+import { isNumber } from "../util/isNumber";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+import { capitalize } from "./capitalize";
+import { parseDateInvariant } from "./date/parseDateInvariant";
+
+//Culture dependent formatters are defined in the ui package.
+
+type Formatter = (value: any) => string;
+
+const defaultFormatter: Formatter = (v) => v.toString();
+
+let formatFactory: Record<string, (...args: any[]) => (value: any) => string> = {
+   string: function () {
+      return defaultFormatter;
+   },
+
+   wrap: function (part0, prefix, suffix) {
+      if (!prefix) prefix = "";
+
+      if (!suffix) suffix = "";
+
+      return (value: any) => prefix + String(value) + suffix;
+   },
+
+   fixed: function (part0, digits) {
+      return (value: any) => Number(value).toFixed(digits);
+   },
+
+   prefix: function (part0, prefix) {
+      if (!prefix) prefix = "";
+
+      return (value: any) => prefix + String(value);
+   },
+
+   suffix: function (part0, suffix) {
+      if (!suffix) suffix = "";
+
+      return (value: any) => String(value) + suffix;
+   },
+
+   uppercase: function () {
+      return (value: any) => String(value).toUpperCase();
+   },
+
+   lowercase: function () {
+      return (value: any) => String(value).toLowerCase();
+   },
+
+   urlencode: function () {
+      return (value: any) => encodeURIComponent(value);
+   },
+
+   number: function (part0, minFractionDigits, maxFractionDigits) {
+      let { minimumFractionDigits, maximumFractionDigits } = resolveMinMaxFractionDigits(
+         minFractionDigits,
+         maxFractionDigits,
+      );
+      let trimmable = maximumFractionDigits - minimumFractionDigits;
+      if (trimmable > 0) {
+         if (minimumFractionDigits == 0) ++trimmable;
+         return (value: any) => trimFractionZeros(value.toFixed(maximumFractionDigits), trimmable);
+      }
+      return (value: any) => value.toFixed(maximumFractionDigits);
+   },
+
+   percentage: function (part0, minFractionDigits, maxFractionDigits) {
+      let numberFormatter = formatFactory.number(part0, minFractionDigits, maxFractionDigits);
+      return (value: any) => numberFormatter(value * 100) + "%";
+   },
+
+   percentageSign: function (part0, minFractionDigits, maxFractionDigits) {
+      let numberFormatter = formatFactory.number(part0, minFractionDigits, maxFractionDigits);
+      return (value: any) => numberFormatter(value) + "%";
+   },
+
+   date: function () {
+      return (value: any) => {
+         let date = parseDateInvariant(value);
+         return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
+      };
+   },
+
+   time: function () {
+      return (value: any) => {
+         let date = parseDateInvariant(value);
+         let h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
+         let m = date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
+         return `${h}:${m}`;
+      };
+   },
+
+   datetime: function () {
+      let date = formatFactory.date();
+      let time = formatFactory.time();
+      return (value: any) => date(value) + " " + time(value);
+   },
+
+   ellipsis: function (part0, length, where) {
+      length = Number(length);
+      if (!(length > 3)) length = 10;
+      switch (where) {
+         default:
+         case "end":
+            return (value) => {
+               let s = String(value);
+               if (s.length > length) return s.substring(0, length - 3) + "...";
+               return s;
+            };
+
+         case "start":
+            return (value) => {
+               let s = String(value);
+               if (s.length > length) return "..." + s.substring(s.length - length + 3);
+               return s;
+            };
+
+         case "middle":
+            return (value) => {
+               let s = String(value);
+               if (s.length > length) {
+                  let x = Math.floor(length - 2) / 2;
+                  return s.substring(0, x) + "..." + s.substring(s.length - (length - 3 - x));
+               }
+               return s;
+            };
+      }
+   },
+
+   zeroPad: function (part0, length) {
+      return (value: any) => {
+         let s = String(value);
+         return s.padStart(length, "0");
+      };
+   },
+
+   leftPad: function (part0, length, char) {
+      return (value: any) => {
+         let s = String(value);
+         return s.padStart(length, char ?? " ");
+      };
+   },
+
+   capitalize: function () {
+      return (value) => {
+         let s = String(value);
+         return capitalize(s);
+      };
+   },
+
+   titleCase: function () {
+      return (value) => {
+         let s = String(value);
+         return s.replace(/\w\S*/g, function (word) {
+            return capitalize(word.toLowerCase());
+         });
+      };
+   },
+};
+
+formatFactory.s = formatFactory.str = formatFactory.string;
+formatFactory.f = formatFactory.fixed;
+formatFactory.n = formatFactory.number;
+formatFactory.p = formatFactory.percentage;
+formatFactory.ps = formatFactory.percentageSign;
+formatFactory.d = formatFactory.date;
+formatFactory.t = formatFactory.time;
+formatFactory.dt = formatFactory.datetime;
+formatFactory.zeropad = formatFactory.zeroPad;
+formatFactory.leftpad = formatFactory.leftPad;
+formatFactory.capitalize = formatFactory.capitalize;
+formatFactory.titlecase = formatFactory.titleCase;
+
+function buildFormatter(format: string): Formatter {
+   let formatter = defaultFormatter,
+      nullText = "";
+   if (format) {
+      let pipeParts = format.split("|");
+      nullText = pipeParts[1] || "";
+      let colonSepParts = pipeParts[0].split(":");
+      for (let i = 0; i < colonSepParts.length; i++) {
+         let parts = colonSepParts[i].split(";");
+         let factory = formatFactory[parts[0]];
+         if (!factory) debug("Unknown string format: " + format);
+         else if (i == 0) formatter = factory(...parts);
+         else {
+            let outerFmt = factory(...parts);
+            let innerFmt = formatter;
+            formatter = (v) => outerFmt(innerFmt(v));
+         }
+      }
+   }
+   return (v) => (v == null || v === "" ? nullText : formatter(v));
+}
+
+let format: { cache: Record<string, Formatter>; cacheIdentifier?: number } = { cache: {} };
+
+function getDefaultFormatCache(): Record<string, Formatter> {
+   if (format.cacheIdentifier != GlobalCacheIdentifier.get()) {
+      format = { cache: {}, cacheIdentifier: GlobalCacheIdentifier.get() };
+   }
+   return format.cache;
+}
+
+let getFormatCache = getDefaultFormatCache;
+
+export function setGetFormatCacheCallback(callback: () => Record<string, Formatter>): void {
+   getFormatCache = callback;
+}
+
+function getFormatter(format: string): Formatter {
+   if (!format) format = "";
+   let formatCache = getFormatCache();
+   let formatter = formatCache[format];
+   if (!formatter) formatter = formatCache[format] = buildFormatter(format);
+
+   return formatter;
+}
+
+export class Format {
+   static value(v: any, format: string): string {
+      let formatter = getFormatter(format);
+      return formatter(v);
+   }
+
+   static parse(format: string): Formatter {
+      return getFormatter(format);
+   }
+
+   static register(format: string | string[], formatter: Formatter): void {
+      this.registerFactory(format, () => formatter);
+   }
+
+   static registerFactory(format: string | string[], factory: (...args: any[]) => Formatter): void {
+      if (isArray(format)) format.forEach((f) => this.registerFactory(f, factory));
+      else formatFactory[format] = factory;
+   }
+}
+
+export function resolveMinMaxFractionDigits(
+   minimumFractionDigits: number,
+   maximumFractionDigits: number,
+): { minimumFractionDigits: number; maximumFractionDigits: number } {
+   minimumFractionDigits = minimumFractionDigits != null ? Number(minimumFractionDigits) : minimumFractionDigits;
+   maximumFractionDigits = maximumFractionDigits != null ? Number(maximumFractionDigits) : maximumFractionDigits;
+
+   if (isNumber(minimumFractionDigits)) {
+      if (isUndefined(maximumFractionDigits)) maximumFractionDigits = minimumFractionDigits;
+      else if (isNumber(maximumFractionDigits) && maximumFractionDigits < minimumFractionDigits)
+         maximumFractionDigits = minimumFractionDigits;
+   } else if (minimumFractionDigits == null && maximumFractionDigits == null) {
+      minimumFractionDigits = 0;
+      maximumFractionDigits = 18;
+   }
+
+   return { minimumFractionDigits, maximumFractionDigits };
+}
+
+export function trimFractionZeros(str: string, max: number): string {
+   let cnt = 0,
+      l = str.length;
+   while (cnt < max && (str[l - 1 - cnt] === "0" || str[l - 1 - cnt] === ".")) cnt++;
+
+   return cnt > 0 ? str.substring(0, l - cnt) : str;
+}
diff --git a/packages/cx/src/util/GlobalCacheIdentifier.js b/packages/cx/src/util/GlobalCacheIdentifier.js
deleted file mode 100644
index 3202112af..000000000
--- a/packages/cx/src/util/GlobalCacheIdentifier.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var globalCacheIdentifier = 1;
-
-export class GlobalCacheIdentifier {
-   static get() {
-      return globalCacheIdentifier;
-   }
-
-   static change() {
-      globalCacheIdentifier++;
-   }
-}
diff --git a/packages/cx/src/util/GlobalCacheIdentifier.ts b/packages/cx/src/util/GlobalCacheIdentifier.ts
new file mode 100644
index 000000000..06a61b669
--- /dev/null
+++ b/packages/cx/src/util/GlobalCacheIdentifier.ts
@@ -0,0 +1,11 @@
+var globalCacheIdentifier: number = 1;
+
+export class GlobalCacheIdentifier {
+   static get(): number {
+      return globalCacheIdentifier;
+   }
+
+   static change(): void {
+      globalCacheIdentifier++;
+   }
+}
diff --git a/packages/cx/src/util/GlobalCacheldentifier.d.ts b/packages/cx/src/util/GlobalCacheldentifier.d.ts
deleted file mode 100644
index a9775c079..000000000
--- a/packages/cx/src/util/GlobalCacheldentifier.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-
-export class GlobalCacheIdentifier {
-   static get();
-
-   static change();
-
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/KeyCode.d.ts b/packages/cx/src/util/KeyCode.d.ts
deleted file mode 100644
index 0b92dc30e..000000000
--- a/packages/cx/src/util/KeyCode.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export class KeyCode {
-   static backspace: 8;
-   static tab: 9;
-   static enter: 13;
-   static shift: 16;
-   static ctrl: 17;
-   static alt: 18;
-   static esc: 27;
-   static space: 32;
-   static pageUp: 33;
-   static pageDown: 34;
-   static end: 35;
-   static home: 36;
-   static left: 37;
-   static up: 38;
-   static right: 39;
-   static down: 40;
-   static insert: 45;
-   static "delete": 46;
-   static a: 65;
-}
diff --git a/packages/cx/src/util/KeyCode.js b/packages/cx/src/util/KeyCode.js
deleted file mode 100644
index d247b50c6..000000000
--- a/packages/cx/src/util/KeyCode.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export const KeyCode = {
-   backspace: 8,
-   tab: 9,
-   enter: 13,
-   shift: 16,
-   ctrl: 17,
-   alt: 18,
-   esc: 27,
-   space: 32,
-   pageUp: 33,
-   pageDown: 34,
-   end: 35,
-   home: 36,
-   left: 37,
-   up: 38,
-   right: 39,
-   down: 40,
-   insert: 45,
-   "delete": 46,
-   a: 65
-};
diff --git a/packages/cx/src/util/KeyCode.ts b/packages/cx/src/util/KeyCode.ts
new file mode 100644
index 000000000..9c555d538
--- /dev/null
+++ b/packages/cx/src/util/KeyCode.ts
@@ -0,0 +1,21 @@
+export class KeyCode {
+   static backspace: number = 8;
+   static tab: number = 9;
+   static enter: number = 13;
+   static shift: number = 16;
+   static ctrl: number = 17;
+   static alt: number = 18;
+   static esc: number = 27;
+   static space: number = 32;
+   static pageUp: number = 33;
+   static pageDown: number = 34;
+   static end: number = 35;
+   static home: number = 36;
+   static left: number = 37;
+   static up: number = 38;
+   static right: number = 39;
+   static down: number = 40;
+   static insert: number = 45;
+   static delete: number = 46;
+   static a: number = 65;
+}
diff --git a/packages/cx/src/util/SubscriberList.d.ts b/packages/cx/src/util/SubscriberList.d.ts
deleted file mode 100644
index 41f38ec8a..000000000
--- a/packages/cx/src/util/SubscriberList.d.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-type UnsubscribeFunction = () => void;
-type Callback = (...args: any[]) => void;
-
-export class SubscriberList {
-
-   constructor();
-
-   /**
-    * Add a new subscription.
-    * @param callback 
-    */
-   subscribe(callback: Callback) : UnsubscribeFunction;
-
-   /**
-    * Clear all subscriptions.
-    */
-   clear();
-
-   /**
-    * Returns an array of subscribed callbacks.
-    */
-   getSubscribers() : Callback[];
-
-
-   /**
-    * Returns true if there are no subscribers.
-    */
-   isEmpty() : boolean;
-
-   /** 
-    * Trigger all subscribed callbacks with provided arguments.
-    * @param args - Arguments that will be passed to callback functions.
-    */
-   notify(...args: any[]);
-
-   /**
-    * 
-    * @param callback
-    */
-   execute(callback: (c: Callback) => void);
-
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/SubscriberList.js b/packages/cx/src/util/SubscriberList.js
deleted file mode 100644
index db5740472..000000000
--- a/packages/cx/src/util/SubscriberList.js
+++ /dev/null
@@ -1,58 +0,0 @@
-export class SubscriberList {
-   constructor() {
-      this.clear();
-   }
-
-   getSlot() {
-      if (this.freeSlots.length)
-         return this.freeSlots.pop();
-
-      let slot = String(this.nextSlot++);
-      return slot;
-   }
-
-   recycle(slot, callback) {
-      if (this.subscriptions[slot] === callback) {
-         this.freeSlots.push(slot);
-         delete this.subscriptions[slot];
-         this.subscriptionCount--;
-      }
-   }
-
-   subscribe(callback) {
-      let slot = this.getSlot();
-      this.subscriptions[slot] = callback;
-      this.subscriptionCount++;
-      return () => {
-         this.recycle(slot, callback);
-      }
-   }
-
-   clear() {
-      this.subscriptions = {};
-      this.freeSlots = [];
-      this.nextSlot = 1;
-      this.subscriptionCount = 0;
-   }
-
-   isEmpty() {
-      return this.subscriptionCount == 0;
-   }
-
-   getSubscribers() {
-      let result = [];
-      for (let key in this.subscriptions)
-         result.push(this.subscriptions[key]);
-      return result;
-   }
-
-   notify() {
-      for (let key in this.subscriptions)
-         this.subscriptions[key](...arguments);
-   }
-
-   execute(callback) {
-      for (let key in this.subscriptions)
-         callback(this.subscriptions[key]);
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/SubscriberList.ts b/packages/cx/src/util/SubscriberList.ts
new file mode 100644
index 000000000..35d56b747
--- /dev/null
+++ b/packages/cx/src/util/SubscriberList.ts
@@ -0,0 +1,87 @@
+type UnsubscribeFunction = () => void;
+type Callback = (...args: any[]) => void;
+
+export class SubscriberList {
+   declare private subscriptions: { [key: string]: Callback };
+   declare private freeSlots: string[];
+   declare private nextSlot: number;
+   declare private subscriptionCount: number;
+
+   constructor() {
+      this.clear();
+   }
+
+   private getSlot(): string {
+      if (this.freeSlots.length)
+         return this.freeSlots.pop()!;
+
+      let slot = String(this.nextSlot++);
+      return slot;
+   }
+
+   private recycle(slot: string, callback: Callback): void {
+      if (this.subscriptions[slot] === callback) {
+         this.freeSlots.push(slot);
+         delete this.subscriptions[slot];
+         this.subscriptionCount--;
+      }
+   }
+
+   /**
+    * Add a new subscription.
+    * @param callback
+    */
+   subscribe(callback: Callback): UnsubscribeFunction {
+      let slot = this.getSlot();
+      this.subscriptions[slot] = callback;
+      this.subscriptionCount++;
+      return () => {
+         this.recycle(slot, callback);
+      }
+   }
+
+   /**
+    * Clear all subscriptions.
+    */
+   clear(): void {
+      this.subscriptions = {};
+      this.freeSlots = [];
+      this.nextSlot = 1;
+      this.subscriptionCount = 0;
+   }
+
+   /**
+    * Returns true if there are no subscribers.
+    */
+   isEmpty(): boolean {
+      return this.subscriptionCount == 0;
+   }
+
+   /**
+    * Returns an array of subscribed callbacks.
+    */
+   getSubscribers(): Callback[] {
+      let result = [];
+      for (let key in this.subscriptions)
+         result.push(this.subscriptions[key]);
+      return result;
+   }
+
+   /**
+    * Trigger all subscribed callbacks with provided arguments.
+    * @param args - Arguments that will be passed to callback functions.
+    */
+   notify(...args: any[]): void {
+      for (let key in this.subscriptions)
+         this.subscriptions[key](...args);
+   }
+
+   /**
+    *
+    * @param callback
+    */
+   execute(callback: (c: Callback) => void): void {
+      for (let key in this.subscriptions)
+         callback(this.subscriptions[key]);
+   }
+}
\ No newline at end of file
diff --git a/packages/cx/src/util/Timing.d.ts b/packages/cx/src/util/Timing.d.ts
deleted file mode 100644
index 133101865..000000000
--- a/packages/cx/src/util/Timing.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-
-export class Timing {
-
-   static now(): number;
-
-   static enable(flag: string);
-
-   static disable(flag: string);
-
-   static count(flag: string) : number;
-
-   static log(flag: string);
-
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/Timing.js b/packages/cx/src/util/Timing.js
deleted file mode 100644
index 1dbe1d3bd..000000000
--- a/packages/cx/src/util/Timing.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import {Console} from './Console';
-
-export const appLoopFlag = 'app-loop';
-export const vdomRenderFlag = 'vdom-render';
-
-let counter = {};
-let activeFlags = {};
-
-let nowImpl = () => Date.now();
-
-export function now() {
-   if (process.env.NODE_ENV !== "production") {
-      return nowImpl();
-   } else {
-      return 0;
-   }
-}
-
-function enable(flag) {
-   if (process.env.NODE_ENV !== "production") {
-      activeFlags[flag] = true;
-   }
-}
-
-function disable(flag) {
-   if (process.env.NODE_ENV !== "production") {
-      activeFlags[flag] = false;
-   }
-}
-
-function count(flag) {
-   if (process.env.NODE_ENV !== "production") {
-      if (!activeFlags[flag])
-         return;
-      return counter[flag] = (counter[flag] || 0) + 1;
-   }
-}
-
-function log(flag) {
-   if (process.env.NODE_ENV !== "production") {
-      if (!activeFlags[flag])
-         return;
-
-      Console.log(...arguments);
-   }
-}
-
-if (process.env.NODE_ENV !== "production" && typeof window != 'undefined' && window.performance && window.performance.now) {
-   nowImpl = () => performance.now();
-}
-
-export const Timing = {
-   now,
-   enable,
-   disable,
-   count,
-   log
-};
\ No newline at end of file
diff --git a/packages/cx/src/util/Timing.ts b/packages/cx/src/util/Timing.ts
new file mode 100644
index 000000000..778d694a0
--- /dev/null
+++ b/packages/cx/src/util/Timing.ts
@@ -0,0 +1,59 @@
+import {Console} from './Console';
+
+export const appLoopFlag = 'app-loop';
+export const vdomRenderFlag = 'vdom-render';
+
+let counter: { [key: string]: number } = {};
+let activeFlags: { [key: string]: boolean } = {};
+
+let nowImpl: () => number = () => Date.now();
+
+export function now(): number {
+   if (process.env.NODE_ENV !== "production") {
+      return nowImpl();
+   } else {
+      return 0;
+   }
+}
+
+function enable(flag: string): void {
+   if (process.env.NODE_ENV !== "production") {
+      activeFlags[flag] = true;
+   }
+}
+
+function disable(flag: string): void {
+   if (process.env.NODE_ENV !== "production") {
+      activeFlags[flag] = false;
+   }
+}
+
+function count(flag: string): number | undefined {
+   if (process.env.NODE_ENV !== "production") {
+      if (!activeFlags[flag])
+         return undefined;
+      return counter[flag] = (counter[flag] || 0) + 1;
+   }
+   return undefined;
+}
+
+function log(flag: string, ...args: any[]): void {
+   if (process.env.NODE_ENV !== "production") {
+      if (!activeFlags[flag])
+         return;
+
+      Console.log(flag, ...args);
+   }
+}
+
+if (process.env.NODE_ENV !== "production" && typeof window != 'undefined' && window.performance && typeof window.performance.now === 'function') {
+   nowImpl = () => performance.now();
+}
+
+export const Timing = {
+   now,
+   enable,
+   disable,
+   count,
+   log
+};
\ No newline at end of file
diff --git a/packages/cx/src/util/TraversalStack.js b/packages/cx/src/util/TraversalStack.js
deleted file mode 100644
index 44baf2a25..000000000
--- a/packages/cx/src/util/TraversalStack.js
+++ /dev/null
@@ -1,43 +0,0 @@
-export class TraversalStack {
-
-   constructor() {
-      this.data = [];
-   }
-
-   push(node) {
-      if (this.data.length == 0)
-         this.hop();
-
-      this.data[this.data.length - 1].elements.push(node);
-   }
-
-   hop() {
-      this.data.push({
-         elements: [],
-         index: 0
-      });
-   }
-
-
-   pop() {
-      while (this.data.length > 0) {
-         let line = this.data[this.data.length - 1];
-         if (line.index < line.elements.length) {
-            line.index++;
-            return line.elements[line.index - 1];
-         }
-         this.data.pop();
-      }
-      return null;
-   }
-
-   empty() {
-      while (this.data.length > 0) {
-         let line = this.data[this.data.length - 1];
-         if (line.index < line.elements.length)
-            return false;
-         this.data.pop();
-      }
-      return true;
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/TraversalStack.spec.js b/packages/cx/src/util/TraversalStack.spec.js
deleted file mode 100644
index dab5d747d..000000000
--- a/packages/cx/src/util/TraversalStack.spec.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import {TraversalStack} from './TraversalStack';
-
-import assert from 'assert';
-
-describe('TraversalStack', function () {
-
-   it('push', function () {
-      let stack = new TraversalStack();
-      stack.push(1);
-      assert(1, stack.pop());
-   });
-
-   it('traverses the tree in the right order', function () {
-      let stack = new TraversalStack();
-
-      let tree = {
-         id: 1,
-         children: [{
-            id: 2,
-            children: [{
-               id: 3
-            }, {
-               id: 4
-            }]
-         }, {
-            id: 5,
-            children: [{
-               id: 6
-            }]
-         }]
-      };
-
-      let list = [];
-      stack.push(tree);
-      while (!stack.empty()) {
-         let node = stack.pop();
-         list.push(node.id);
-         if (node.children) {
-            stack.hop();
-            node.children.forEach(child => {
-               stack.push(child);
-            })
-         }
-      }
-      assert.deepEqual(list, [1, 2, 3, 4, 5, 6]);
-   });
-});
\ No newline at end of file
diff --git a/packages/cx/src/util/TraversalStack.spec.ts b/packages/cx/src/util/TraversalStack.spec.ts
new file mode 100644
index 000000000..d17c694eb
--- /dev/null
+++ b/packages/cx/src/util/TraversalStack.spec.ts
@@ -0,0 +1,54 @@
+import { TraversalStack } from './TraversalStack';
+
+import assert from 'assert';
+
+interface TreeNode {
+   id: number;
+   children?: TreeNode[];
+}
+
+describe('TraversalStack', function () {
+
+   it('push', function () {
+      let stack = new TraversalStack<number>();
+      stack.push(1);
+      assert.equal(stack.pop(), 1);
+   });
+
+   it('traverses the tree in the right order', function () {
+      let stack = new TraversalStack<TreeNode>();
+
+      let tree: TreeNode = {
+         id: 1,
+         children: [{
+            id: 2,
+            children: [{
+               id: 3
+            }, {
+               id: 4
+            }]
+         }, {
+            id: 5,
+            children: [{
+               id: 6
+            }]
+         }]
+      };
+
+      let list: number[] = [];
+      stack.push(tree);
+      while (!stack.empty()) {
+         let node = stack.pop();
+         if (node) {
+            list.push(node.id);
+            if (node.children) {
+               stack.hop();
+               node.children.forEach((child) => {
+                  stack.push(child);
+               })
+            }
+         }
+      }
+      assert.deepEqual(list, [1, 2, 3, 4, 5, 6]);
+   });
+});
\ No newline at end of file
diff --git a/packages/cx/src/util/TraversalStack.ts b/packages/cx/src/util/TraversalStack.ts
new file mode 100644
index 000000000..8c057a7da
--- /dev/null
+++ b/packages/cx/src/util/TraversalStack.ts
@@ -0,0 +1,48 @@
+interface StackLine<T> {
+   elements: T[];
+   index: number;
+}
+
+export class TraversalStack<T> {
+   private data: StackLine<T>[];
+
+   constructor() {
+      this.data = [];
+   }
+
+   push(node: T): void {
+      if (this.data.length == 0)
+         this.hop();
+
+      this.data[this.data.length - 1].elements.push(node);
+   }
+
+   hop(): void {
+      this.data.push({
+         elements: [],
+         index: 0
+      });
+   }
+
+   pop(): T | null {
+      while (this.data.length > 0) {
+         let line = this.data[this.data.length - 1];
+         if (line.index < line.elements.length) {
+            line.index++;
+            return line.elements[line.index - 1];
+         }
+         this.data.pop();
+      }
+      return null;
+   }
+
+   empty(): boolean {
+      while (this.data.length > 0) {
+         let line = this.data[this.data.length - 1];
+         if (line.index < line.elements.length)
+            return false;
+         this.data.pop();
+      }
+      return true;
+   }
+}
\ No newline at end of file
diff --git a/packages/cx/src/util/addEventListenerWithOptions.d.ts b/packages/cx/src/util/addEventListenerWithOptions.d.ts
deleted file mode 100644
index 193deee13..000000000
--- a/packages/cx/src/util/addEventListenerWithOptions.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export function addEventListenerWithOptions(
-   element: Element,
-   event: string,
-   callback: (event: Event) => void,
-   options: AddEventListenerOptions
-): () => void;
diff --git a/packages/cx/src/util/addEventListenerWithOptions.js b/packages/cx/src/util/addEventListenerWithOptions.js
deleted file mode 100644
index 9f55f8e2b..000000000
--- a/packages/cx/src/util/addEventListenerWithOptions.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { browserSupportsPassiveEventHandlers } from "./browserSupportsPassiveEventHandlers";
-
-export function addEventListenerWithOptions(element, event, callback, options) {
-   let thirdParam = browserSupportsPassiveEventHandlers() ? options : options.capture === true;
-   element.addEventListener(event, callback, thirdParam);
-   return () => {
-      element.removeEventListener(event, callback, thirdParam);
-   };
-}
diff --git a/packages/cx/src/util/addEventListenerWithOptions.ts b/packages/cx/src/util/addEventListenerWithOptions.ts
new file mode 100644
index 000000000..7dd6e3b9d
--- /dev/null
+++ b/packages/cx/src/util/addEventListenerWithOptions.ts
@@ -0,0 +1,41 @@
+import { browserSupportsPassiveEventHandlers } from "./browserSupportsPassiveEventHandlers";
+
+interface EventMap {
+   wheel: WheelEvent;
+   scroll: Event;
+   click: MouseEvent;
+   mousedown: MouseEvent;
+   mouseup: MouseEvent;
+   mousemove: MouseEvent;
+   touchstart: TouchEvent;
+   touchmove: TouchEvent;
+   touchend: TouchEvent;
+   keydown: KeyboardEvent;
+   keyup: KeyboardEvent;
+   keypress: KeyboardEvent;
+}
+
+export function addEventListenerWithOptions<K extends keyof EventMap>(
+   element: Element | Document,
+   event: K,
+   callback: (event: EventMap[K]) => void,
+   options: AddEventListenerOptions,
+): () => void;
+export function addEventListenerWithOptions(
+   element: Element | Document,
+   event: string,
+   callback: (event: Event) => void,
+   options: AddEventListenerOptions,
+): () => void;
+export function addEventListenerWithOptions(
+   element: Element | Document,
+   event: string,
+   callback: (event: Event) => void,
+   options: AddEventListenerOptions,
+): () => void {
+   let thirdParam = browserSupportsPassiveEventHandlers() ? options : options.capture === true;
+   element.addEventListener(event, callback as any, thirdParam);
+   return () => {
+      element.removeEventListener(event, callback as any, thirdParam);
+   };
+}
diff --git a/packages/cx/src/util/browserSupportsPassiveEventHandlers.d.ts b/packages/cx/src/util/browserSupportsPassiveEventHandlers.d.ts
deleted file mode 100644
index 3b0c12a33..000000000
--- a/packages/cx/src/util/browserSupportsPassiveEventHandlers.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * Checks if the browser supports passive event handlers.
- * @returns {boolean}
- */
-export function browserSupportsPassiveEventHandlers(): boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/browserSupportsPassiveEventHandlers.js b/packages/cx/src/util/browserSupportsPassiveEventHandlers.js
deleted file mode 100644
index 1a2575941..000000000
--- a/packages/cx/src/util/browserSupportsPassiveEventHandlers.js
+++ /dev/null
@@ -1,18 +0,0 @@
-let passiveEventsSupported = null;
-
-export function browserSupportsPassiveEventHandlers() {
-   if (passiveEventsSupported == null) {
-      try {
-         passiveEventsSupported = false;
-         const options = Object.defineProperty({}, 'passive', {
-            get() {
-               passiveEventsSupported = true;
-            },
-         });
-         window.addEventListener('test', null, options);
-      } catch (e) {
-      }
-   }
-
-   return passiveEventsSupported;
-}
diff --git a/packages/cx/src/util/browserSupportsPassiveEventHandlers.ts b/packages/cx/src/util/browserSupportsPassiveEventHandlers.ts
new file mode 100644
index 000000000..ec7aa3c6f
--- /dev/null
+++ b/packages/cx/src/util/browserSupportsPassiveEventHandlers.ts
@@ -0,0 +1,20 @@
+let passiveEventsSupported: boolean | null = null;
+
+/**
+ * Checks if the browser supports passive event handlers.
+ * @returns {boolean}
+ */
+export function browserSupportsPassiveEventHandlers(): boolean {
+   if (passiveEventsSupported == null) {
+      try {
+         passiveEventsSupported = false;
+         const options = Object.defineProperty({}, "passive", {
+            get() {
+               passiveEventsSupported = true;
+            },
+         });
+         window.addEventListener("test" as any, null as any, options);
+      } catch (e) {}
+   }
+   return passiveEventsSupported!;
+}
diff --git a/packages/cx/src/util/calculateNaturalElementHeight.d.ts b/packages/cx/src/util/calculateNaturalElementHeight.d.ts
deleted file mode 100644
index f0c792f6b..000000000
--- a/packages/cx/src/util/calculateNaturalElementHeight.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function calculateNaturalElementHeight(el: Element): number;
diff --git a/packages/cx/src/util/calculateNaturalElementHeight.js b/packages/cx/src/util/calculateNaturalElementHeight.js
deleted file mode 100644
index 13511062a..000000000
--- a/packages/cx/src/util/calculateNaturalElementHeight.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export function calculateNaturalElementHeight(el) {
-   if (el.scrollHeight > el.clientHeight) return naturalElementHeight(el);
-   let h = el.offsetHeight;
-   for (let i = 0; i < el.children.length; i++) {
-      let child = el.children[i];
-      if (child.scrollHeight > child.clientHeight) {
-         h -= child.offsetHeight;
-         h += naturalElementHeight(child);
-      }
-   }
-   return h;
-}
-
-function naturalElementHeight(el) {
-   let h = el.offsetHeight;
-   let overflow = el.scrollHeight - el.clientHeight;
-   if (overflow <= 0) return h;
-   let computedStyle = getComputedStyle(el);
-   let maxH = parseFloat(computedStyle.getPropertyValue("max-height"));
-   if (!isNaN(maxH)) return Math.min(parseFloat(maxH), h + overflow);
-   return h + overflow;
-}
diff --git a/packages/cx/src/util/calculateNaturalElementHeight.ts b/packages/cx/src/util/calculateNaturalElementHeight.ts
new file mode 100644
index 000000000..43da13155
--- /dev/null
+++ b/packages/cx/src/util/calculateNaturalElementHeight.ts
@@ -0,0 +1,22 @@
+export function calculateNaturalElementHeight(el: HTMLElement): number {
+   if (el.scrollHeight > el.clientHeight) return naturalElementHeight(el);
+   let h = el.offsetHeight;
+   for (let i = 0; i < el.children.length; i++) {
+      let child = el.children[i];
+      if (child instanceof HTMLElement && child.scrollHeight > child.clientHeight) {
+         h -= child.offsetHeight;
+         h += naturalElementHeight(child);
+      }
+   }
+   return h;
+}
+
+function naturalElementHeight(el: HTMLElement): number {
+   let h = el.offsetHeight;
+   let overflow = el.scrollHeight - el.clientHeight;
+   if (overflow <= 0) return h;
+   let computedStyle = getComputedStyle(el);
+   let maxH = parseFloat(computedStyle.getPropertyValue("max-height"));
+   if (!isNaN(maxH)) return Math.min(maxH, h + overflow);
+   return h + overflow;
+}
diff --git a/packages/cx/src/util/capitalize.d.ts b/packages/cx/src/util/capitalize.d.ts
deleted file mode 100644
index 1d43edf45..000000000
--- a/packages/cx/src/util/capitalize.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function capitalize(str: string): string;
diff --git a/packages/cx/src/util/capitalize.js b/packages/cx/src/util/capitalize.js
deleted file mode 100644
index 6a4f89aef..000000000
--- a/packages/cx/src/util/capitalize.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export function capitalize(str) {
-   if (typeof str != "string") return str;
-   return str.charAt(0).toUpperCase() + str.substring(1);
-}
diff --git a/packages/cx/src/util/capitalize.ts b/packages/cx/src/util/capitalize.ts
new file mode 100644
index 000000000..131a39bd9
--- /dev/null
+++ b/packages/cx/src/util/capitalize.ts
@@ -0,0 +1,4 @@
+export function capitalize(str: string): string {
+   if (typeof str != "string") return str;
+   return str.charAt(0).toUpperCase() + str.substring(1);
+}
diff --git a/packages/cx/src/util/coalesce.d.ts b/packages/cx/src/util/coalesce.d.ts
deleted file mode 100644
index dbe835559..000000000
--- a/packages/cx/src/util/coalesce.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function coalesce(...args: any[]): any;
diff --git a/packages/cx/src/util/coalesce.js b/packages/cx/src/util/coalesce.js
deleted file mode 100644
index 546a20cba..000000000
--- a/packages/cx/src/util/coalesce.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export function coalesce(...args) {
-   for (let i = 0; i < args.length; i++) {
-      if (args[i] != null) return args[i];
-   }
-   return null;
-}
diff --git a/packages/cx/src/util/coalesce.ts b/packages/cx/src/util/coalesce.ts
new file mode 100644
index 000000000..668c00317
--- /dev/null
+++ b/packages/cx/src/util/coalesce.ts
@@ -0,0 +1,6 @@
+export function coalesce(...args: any[]): any {
+   for (let i = 0; i < args.length; i++) {
+      if (args[i] != null) return args[i];
+   }
+   return null;
+}
diff --git a/packages/cx/src/util/color/hslToRgb.d.ts b/packages/cx/src/util/color/hslToRgb.d.ts
deleted file mode 100644
index ed7f5af99..000000000
--- a/packages/cx/src/util/color/hslToRgb.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-
-/**
- * 
- * @param h 
- * @param s 
- * @param l 
- * @returns {array}
- */
-export function hslToRgb(h: number, s:number, l:number): [number, number, number];
\ No newline at end of file
diff --git a/packages/cx/src/util/color/hslToRgb.js b/packages/cx/src/util/color/hslToRgb.js
deleted file mode 100644
index 0f8549a31..000000000
--- a/packages/cx/src/util/color/hslToRgb.js
+++ /dev/null
@@ -1,27 +0,0 @@
-function hue2rgb(p, q, t) {
-   if (t < 0) t += 1;
-   if (t > 1) t -= 1;
-   if (t < 1 / 6) return p + (q - p) * 6 * t;
-   if (t < 1 / 2) return q;
-   if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-   return p;
-};
-
-export function hslToRgb(h, s, l) {
-   h/=360;
-   s/=100;
-   l/=100;
-   var r, g, b;
-
-   if (s == 0) {
-      r = g = b = l; // achromatic
-   } else {
-      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-      var p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1 / 3);
-      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1 / 3);
-   }
-
-   return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-}
diff --git a/packages/cx/src/util/color/hslToRgb.ts b/packages/cx/src/util/color/hslToRgb.ts
new file mode 100644
index 000000000..9f922ffa1
--- /dev/null
+++ b/packages/cx/src/util/color/hslToRgb.ts
@@ -0,0 +1,34 @@
+function hue2rgb(p: number, q: number, t: number): number {
+   if (t < 0) t += 1;
+   if (t > 1) t -= 1;
+   if (t < 1 / 6) return p + (q - p) * 6 * t;
+   if (t < 1 / 2) return q;
+   if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+   return p;
+};
+
+/**
+ *
+ * @param h
+ * @param s
+ * @param l
+ * @returns {array}
+ */
+export function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+   h/=360;
+   s/=100;
+   l/=100;
+   var r, g, b;
+
+   if (s == 0) {
+      r = g = b = l; // achromatic
+   } else {
+      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      var p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+   }
+
+   return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
diff --git a/packages/cx/src/util/color/index.d.ts b/packages/cx/src/util/color/index.d.ts
deleted file mode 100644
index ca33abc75..000000000
--- a/packages/cx/src/util/color/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './hslToRgb';
-export * from './parseColor';
-export * from './rgbToHex';
-export * from './rgbToHsl';
\ No newline at end of file
diff --git a/packages/cx/src/util/color/index.js b/packages/cx/src/util/color/index.ts
similarity index 100%
rename from packages/cx/src/util/color/index.js
rename to packages/cx/src/util/color/index.ts
diff --git a/packages/cx/src/util/color/parseColor.d.ts b/packages/cx/src/util/color/parseColor.d.ts
deleted file mode 100644
index cd4aac6b4..000000000
--- a/packages/cx/src/util/color/parseColor.d.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * An object representing `rgba` color.
- * @typedef RGBColor
- * @property type
- * @property  r
- * @property  g
- * @property  b
- * @property  a
- */
-type RGBColor = { 
-   type: 'rgba',
-   r: number,
-   g: number,
-   b: number,
-   a: number
-}
-/**
- * An object representing `hsla` color.
- * @typedef HSLColor
- * @property type
- * @property h
- * @property s
- * @property l
- * @property a
- */
-type HSLColor = {
-   type: 'hsla',
-   h: number,
-   s: number,
-   l: number,
-   a: number
-}
-
-/**
- * 
- * @param  color 
- * @returns {RGBColor|HSLColor}
- */
-export function parseColor(color: string): RGBColor | HSLColor;
-
-/**
- * 
- * @param color 
- * @returns {RGBColor}
- */
-export function parseHexColor(color: string): RGBColor;
-
-/**
- * 
- * @param color 
- * @returns {RGBColor}
- */
-export function parseRgbColor(color: string): RGBColor;
-
-/**
- * 
- * @param color 
- * @returns {HSLColor}
- */
-export function parseHslColor(color: string): HSLColor;
\ No newline at end of file
diff --git a/packages/cx/src/util/color/parseColor.js b/packages/cx/src/util/color/parseColor.js
deleted file mode 100644
index 4786efc54..000000000
--- a/packages/cx/src/util/color/parseColor.js
+++ /dev/null
@@ -1,119 +0,0 @@
-export function parseColor(color) {
-
-   if (!color)
-      return null;
-
-   if (color[0] == '#')
-      return parseHexColor(color);
-
-   if (color.indexOf('rgb') == 0)
-      return parseRgbColor(color);
-
-   if (color.indexOf('hsl') == 0)
-      return parseHslColor(color);
-
-   throw new Error(`Unknown color format: ${color}.`);
-}
-
-export function parseHexColor(color) {
-
-   if (!color)
-      return null;
-
-   if (color[0] != '#')
-      throw new Error(`Invalid color ${color}.`);
-
-   if (color.length == 4)
-      return {
-         type: 'rgba',
-         r: parseInt(color.charAt(1), 16) * 0x11,
-         g: parseInt(color.charAt(2), 16) * 0x11,
-         b: parseInt(color.charAt(3), 16) * 0x11,
-         a: 1
-      };
-
-   if (color.length != 7)
-      throw new Error(`Invalid color ${color}.`);
-
-   return {
-      type: 'rgba',
-      r: parseInt(color.substr(1, 2), 16),
-      g: parseInt(color.substr(3, 2), 16),
-      b: parseInt(color.substr(5, 2), 16),
-      a: 1
-   }
-}
-
-export function parseRgbColor(color) {
-   if (!color)
-      return null;
-
-   color = color.trim();
-   var values;
-
-   if (color.indexOf('rgba(') == 0) {
-      values = color.substring(5, color.length - 1).split(',').map(x=>parseFloat(x.trim()));
-      if (values.length != 4)
-         throw new Error(`Invalid color ${color}.`);
-
-      return {
-         type: 'rgba',
-         r: values[0],
-         g: values[1],
-         b: values[2],
-         a: values[3]
-      }
-   }
-
-   if (color.indexOf('rgb(') != 0)
-      throw new Error(`Invalid color ${color}.`);
-
-   values = color.substring(5, color.length - 1).split(',').map(x=>parseFloat(x.trim()));
-   if (values.length != 3)
-      throw new Error(`Invalid color ${color}.`);
-
-   return {
-      type: 'rgba',
-      r: values[0],
-      g: values[1],
-      b: values[2],
-      a: 1
-   }
-}
-
-export function parseHslColor(color) {
-   if (!color)
-      return null;
-
-   color = color.trim();
-   var values;
-
-   if (color.indexOf('hsla(') == 0) {
-      values = color.substring(5, color.length - 1).split(',').map(x=>parseFloat(x.trim()));
-      if (values.length != 4)
-         throw new Error(`Invalid color ${color}.`);
-
-      return {
-         type: 'hsla',
-         h: values[0],
-         s: values[1],
-         l: values[2],
-         a: values[3]
-      }
-   }
-
-   if (color.indexOf('hsl(') != 0)
-      throw new Error(`Invalid color ${color}.`);
-
-   values = color.substring(5, color.length - 1).split(',').map(x=>parseFloat(x.trim()));
-   if (values.length != 3)
-      throw new Error(`Invalid color ${color}.`);
-
-   return {
-      type: 'hsla',
-      h: values[0],
-      s: values[1],
-      l: values[2],
-      a: 1
-   }
-}
diff --git a/packages/cx/src/util/color/parseColor.ts b/packages/cx/src/util/color/parseColor.ts
new file mode 100644
index 000000000..063b1c91d
--- /dev/null
+++ b/packages/cx/src/util/color/parseColor.ts
@@ -0,0 +1,173 @@
+/**
+ * An object representing `rgba` color.
+ * @typedef RGBColor
+ * @property type
+ * @property  r
+ * @property  g
+ * @property  b
+ * @property  a
+ */
+type RGBColor = {
+   type: 'rgba',
+   r: number,
+   g: number,
+   b: number,
+   a: number
+}
+
+/**
+ * An object representing `hsla` color.
+ * @typedef HSLColor
+ * @property type
+ * @property h
+ * @property s
+ * @property l
+ * @property a
+ */
+type HSLColor = {
+   type: 'hsla',
+   h: number,
+   s: number,
+   l: number,
+   a: number
+}
+
+/**
+ *
+ * @param  color
+ * @returns {RGBColor|HSLColor}
+ */
+export function parseColor(color: string | null): RGBColor | HSLColor | null {
+
+   if (!color)
+      return null;
+
+   if (color[0] == '#')
+      return parseHexColor(color);
+
+   if (color.indexOf('rgb') == 0)
+      return parseRgbColor(color);
+
+   if (color.indexOf('hsl') == 0)
+      return parseHslColor(color);
+
+   throw new Error(`Unknown color format: ${color}.`);
+}
+
+/**
+ *
+ * @param color
+ * @returns {RGBColor}
+ */
+export function parseHexColor(color: string | null): RGBColor | null {
+
+   if (!color)
+      return null;
+
+   if (color[0] != '#')
+      throw new Error(`Invalid color ${color}.`);
+
+   if (color.length == 4)
+      return {
+         type: 'rgba',
+         r: parseInt(color.charAt(1), 16) * 0x11,
+         g: parseInt(color.charAt(2), 16) * 0x11,
+         b: parseInt(color.charAt(3), 16) * 0x11,
+         a: 1
+      };
+
+   if (color.length != 7)
+      throw new Error(`Invalid color ${color}.`);
+
+   return {
+      type: 'rgba',
+      r: parseInt(color.substr(1, 2), 16),
+      g: parseInt(color.substr(3, 2), 16),
+      b: parseInt(color.substr(5, 2), 16),
+      a: 1
+   }
+}
+
+/**
+ *
+ * @param color
+ * @returns {RGBColor}
+ */
+export function parseRgbColor(color: string | null): RGBColor | null {
+   if (!color)
+      return null;
+
+   color = color.trim();
+   var values;
+
+   if (color.indexOf('rgba(') == 0) {
+      values = color.substring(5, color.length - 1).split(',').map(x=>parseFloat(x.trim()));
+      if (values.length != 4)
+         throw new Error(`Invalid color ${color}.`);
+
+      return {
+         type: 'rgba',
+         r: values[0],
+         g: values[1],
+         b: values[2],
+         a: values[3]
+      }
+   }
+
+   if (color.indexOf('rgb(') != 0)
+      throw new Error(`Invalid color ${color}.`);
+
+   values = color.substring(5, color.length - 1).split(',').map(x=>parseFloat(x.trim()));
+   if (values.length != 3)
+      throw new Error(`Invalid color ${color}.`);
+
+   return {
+      type: 'rgba',
+      r: values[0],
+      g: values[1],
+      b: values[2],
+      a: 1
+   }
+}
+
+/**
+ *
+ * @param color
+ * @returns {HSLColor}
+ */
+export function parseHslColor(color: string | null): HSLColor | null {
+   if (!color)
+      return null;
+
+   color = color.trim();
+   var values;
+
+   if (color.indexOf('hsla(') == 0) {
+      values = color.substring(5, color.length - 1).split(',').map(x=>parseFloat(x.trim()));
+      if (values.length != 4)
+         throw new Error(`Invalid color ${color}.`);
+
+      return {
+         type: 'hsla',
+         h: values[0],
+         s: values[1],
+         l: values[2],
+         a: values[3]
+      }
+   }
+
+   if (color.indexOf('hsl(') != 0)
+      throw new Error(`Invalid color ${color}.`);
+
+   values = color.substring(5, color.length - 1).split(',').map(x=>parseFloat(x.trim()));
+   if (values.length != 3)
+      throw new Error(`Invalid color ${color}.`);
+
+   return {
+      type: 'hsla',
+      h: values[0],
+      s: values[1],
+      l: values[2],
+      a: 1
+   }
+}
diff --git a/packages/cx/src/util/color/rgbToHex.d.ts b/packages/cx/src/util/color/rgbToHex.d.ts
deleted file mode 100644
index ffa269e0c..000000000
--- a/packages/cx/src/util/color/rgbToHex.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-
-/**
- * 
- * @param r 
- * @param g 
- * @param b
- * @returns {string}
- */
-export function rgbToHex(r:number, g:number, b:number): string;
\ No newline at end of file
diff --git a/packages/cx/src/util/color/rgbToHex.js b/packages/cx/src/util/color/rgbToHex.js
deleted file mode 100644
index 387a87a65..000000000
--- a/packages/cx/src/util/color/rgbToHex.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function componentToHex(c) {
-   var hex = c.toString(16);
-   return hex.length == 1 ? "0" + hex : hex;
-}
-
-export function rgbToHex(r, g, b) {
-   return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/color/rgbToHex.ts b/packages/cx/src/util/color/rgbToHex.ts
new file mode 100644
index 000000000..feede5dd3
--- /dev/null
+++ b/packages/cx/src/util/color/rgbToHex.ts
@@ -0,0 +1,15 @@
+function componentToHex(c: number): string {
+   var hex = c.toString(16);
+   return hex.length == 1 ? "0" + hex : hex;
+}
+
+/**
+ *
+ * @param r
+ * @param g
+ * @param b
+ * @returns {string}
+ */
+export function rgbToHex(r: number, g: number, b: number): string {
+   return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
\ No newline at end of file
diff --git a/packages/cx/src/util/color/rgbToHsl.d.ts b/packages/cx/src/util/color/rgbToHsl.d.ts
deleted file mode 100644
index 334591028..000000000
--- a/packages/cx/src/util/color/rgbToHsl.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-
-/**
- * 
- * @param r 
- * @param g 
- * @param b
- * @returns {array}
- */
-export function rgbToHsl(r:number, g:number, b:number): [number, number, number];
\ No newline at end of file
diff --git a/packages/cx/src/util/color/rgbToHsl.js b/packages/cx/src/util/color/rgbToHsl.js
deleted file mode 100644
index dd25f586d..000000000
--- a/packages/cx/src/util/color/rgbToHsl.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export function rgbToHsl(r, g, b) {
-   r /= 255;
-   g /= 255;
-   b /= 255;
-   var max = Math.max(r, g, b), min = Math.min(r, g, b);
-   var h, s, l = (max + min) / 2;
-
-   if (max == min) {
-      h = s = 0; // achromatic
-   } else {
-      var d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      switch (max) {
-         case r:
-            h = (g - b) / d + (g < b ? 6 : 0);
-            break;
-         case g:
-            h = (b - r) / d + 2;
-            break;
-         case b:
-            h = (r - g) / d + 4;
-            break;
-      }
-      h /= 6;
-   }
-
-   return [h * 360, s * 100, l * 100]
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/color/rgbToHsl.ts b/packages/cx/src/util/color/rgbToHsl.ts
new file mode 100644
index 000000000..5ef9e0fbf
--- /dev/null
+++ b/packages/cx/src/util/color/rgbToHsl.ts
@@ -0,0 +1,36 @@
+/**
+ *
+ * @param r
+ * @param g
+ * @param b
+ * @returns {array}
+ */
+export function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+   r /= 255;
+   g /= 255;
+   b /= 255;
+   let max = Math.max(r, g, b), min = Math.min(r, g, b);
+   let h: number, s: number, l = (max + min) / 2;
+
+   if (max == min) {
+      h = s = 0; // achromatic
+   } else {
+      let d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+         case r:
+            h = (g - b) / d + (g < b ? 6 : 0);
+            break;
+         case g:
+            h = (b - r) / d + 2;
+            break;
+         case b:
+         default:
+            h = (r - g) / d + 4;
+            break;
+      }
+      h /= 6;
+   }
+
+   return [h * 360, s * 100, l * 100]
+}
\ No newline at end of file
diff --git a/packages/cx/src/util/date/dateDiff.d.ts b/packages/cx/src/util/date/dateDiff.d.ts
deleted file mode 100644
index 2845795c9..000000000
--- a/packages/cx/src/util/date/dateDiff.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-
-/**
- * Returns the difference between two dates in miliseconds.
- * @param d1
- * @param d2
- * @returns {number}
- */
-export function dateDiff(d1: Date, d2: Date) : number;
\ No newline at end of file
diff --git a/packages/cx/src/util/date/dateDiff.js b/packages/cx/src/util/date/dateDiff.js
deleted file mode 100644
index 333e01c06..000000000
--- a/packages/cx/src/util/date/dateDiff.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function dateDiff(d1, d2) {
-   return d1.getTime() - d2.getTime();
-};
diff --git a/packages/cx/src/util/date/dateDiff.ts b/packages/cx/src/util/date/dateDiff.ts
new file mode 100644
index 000000000..baa5d14ac
--- /dev/null
+++ b/packages/cx/src/util/date/dateDiff.ts
@@ -0,0 +1,9 @@
+/**
+ * Returns the difference between two dates in miliseconds.
+ * @param d1
+ * @param d2
+ * @returns {number}
+ */
+export function dateDiff(d1: Date, d2: Date): number {
+   return d1.getTime() - d2.getTime();
+};
diff --git a/packages/cx/src/util/date/diff.d.ts b/packages/cx/src/util/date/diff.d.ts
deleted file mode 100644
index 320b36d4b..000000000
--- a/packages/cx/src/util/date/diff.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-
-/**
- * @deprecated
- * date/diff function is deprecated since v16.8. It will be removed in future versions. Use dateDiff instead.
- * @param d1 
- * @param d2 
- */
-export function diff(d1: Date, d2: Date) : number;
\ No newline at end of file
diff --git a/packages/cx/src/util/date/diff.js b/packages/cx/src/util/date/diff.js
deleted file mode 100644
index a21b0e546..000000000
--- a/packages/cx/src/util/date/diff.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import {debug, deprecatedFlag} from '../../util/Debug';
-
-debug(deprecatedFlag, 'date/diff function is deprecated since v16.8. It will be removed in future versions. Use dateDiff instead.');
-
-export function diff(d1, d2) {
-   return d1.getTime() - d2.getTime();
-}
diff --git a/packages/cx/src/util/date/diff.ts b/packages/cx/src/util/date/diff.ts
new file mode 100644
index 000000000..62981e364
--- /dev/null
+++ b/packages/cx/src/util/date/diff.ts
@@ -0,0 +1,13 @@
+import {debug, deprecatedFlag} from '../../util/Debug';
+
+debug(deprecatedFlag, 'date/diff function is deprecated since v16.8. It will be removed in future versions. Use dateDiff instead.');
+
+/**
+ * @deprecated
+ * date/diff function is deprecated since v16.8. It will be removed in future versions. Use dateDiff instead.
+ * @param d1
+ * @param d2
+ */
+export function diff(d1: Date, d2: Date): number {
+   return d1.getTime() - d2.getTime();
+}
diff --git a/packages/cx/src/util/date/encodeDate.d.ts b/packages/cx/src/util/date/encodeDate.d.ts
deleted file mode 100644
index 9899abc6a..000000000
--- a/packages/cx/src/util/date/encodeDate.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function encodeDate(date: Date): string;
diff --git a/packages/cx/src/util/date/encodeDate.js b/packages/cx/src/util/date/encodeDate.js
deleted file mode 100644
index 33fb352a7..000000000
--- a/packages/cx/src/util/date/encodeDate.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function pad(num) {
-   const norm = Math.floor(Math.abs(num));
-   return (norm < 10 ? "0" : "") + norm;
-}
-
-export function encodeDate(date) {
-   return date.getFullYear() + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate());
-}
diff --git a/packages/cx/src/util/date/encodeDate.ts b/packages/cx/src/util/date/encodeDate.ts
new file mode 100644
index 000000000..2584432aa
--- /dev/null
+++ b/packages/cx/src/util/date/encodeDate.ts
@@ -0,0 +1,8 @@
+function pad(num: number): string {
+   const norm = Math.floor(Math.abs(num));
+   return (norm < 10 ? "0" : "") + norm;
+}
+
+export function encodeDate(date: Date): string {
+   return date.getFullYear() + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate());
+}
diff --git a/packages/cx/src/util/date/encodeDateWithTimezoneOffset.d.ts b/packages/cx/src/util/date/encodeDateWithTimezoneOffset.d.ts
deleted file mode 100644
index 79a3fbd34..000000000
--- a/packages/cx/src/util/date/encodeDateWithTimezoneOffset.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function encodeDateWithTimezoneOffset(date: Date): string;
diff --git a/packages/cx/src/util/date/encodeDateWithTimezoneOffset.js b/packages/cx/src/util/date/encodeDateWithTimezoneOffset.js
deleted file mode 100644
index 678ab96af..000000000
--- a/packages/cx/src/util/date/encodeDateWithTimezoneOffset.js
+++ /dev/null
@@ -1,19 +0,0 @@
-//https://stackoverflow.com/questions/17415579/how-to-iso-8601-format-a-date-with-timezone-offset-in-javascript
-
-function pad(num) {
-   const norm = Math.floor(Math.abs(num));
-   return (norm < 10 ? '0' : '') + norm;
-}
-
-export function encodeDateWithTimezoneOffset(date) {
-   const tzo = -date.getTimezoneOffset(),
-      dif = tzo >= 0 ? '+' : '-';
-   return date.getFullYear() +
-      '-' + pad(date.getMonth() + 1) +
-      '-' + pad(date.getDate()) +
-      'T' + pad(date.getHours()) +
-      ':' + pad(date.getMinutes()) +
-      ':' + pad(date.getSeconds()) +
-      dif + pad(tzo / 60) +
-      ':' + pad(tzo % 60);
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/date/encodeDateWithTimezoneOffset.ts b/packages/cx/src/util/date/encodeDateWithTimezoneOffset.ts
new file mode 100644
index 000000000..2f73c96da
--- /dev/null
+++ b/packages/cx/src/util/date/encodeDateWithTimezoneOffset.ts
@@ -0,0 +1,19 @@
+//https://stackoverflow.com/questions/17415579/how-to-iso-8601-format-a-date-with-timezone-offset-in-javascript
+
+function pad(num: number): string {
+   const norm = Math.floor(Math.abs(num));
+   return (norm < 10 ? '0' : '') + norm;
+}
+
+export function encodeDateWithTimezoneOffset(date: Date): string {
+   const tzo = -date.getTimezoneOffset(),
+      dif = tzo >= 0 ? '+' : '-';
+   return date.getFullYear() +
+      '-' + pad(date.getMonth() + 1) +
+      '-' + pad(date.getDate()) +
+      'T' + pad(date.getHours()) +
+      ':' + pad(date.getMinutes()) +
+      ':' + pad(date.getSeconds()) +
+      dif + pad(tzo / 60) +
+      ':' + pad(tzo % 60);
+}
\ No newline at end of file
diff --git a/packages/cx/src/util/date/index.js b/packages/cx/src/util/date/index.js
deleted file mode 100644
index 34c2a6d86..000000000
--- a/packages/cx/src/util/date/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from "./dateDiff";
-export * from "./zeroTime";
-export * from "./monthStart";
-export * from "./lowerBoundCheck";
-export * from "./upperBoundCheck";
-export * from "./maxDate";
-export * from "./minDate";
-export * from "./sameDate";
-export * from "./encodeDateWithTimezoneOffset";
-export * from "./encodeDate";
-export * from "./parseDateInvariant";
diff --git a/packages/cx/src/util/date/index.d.ts b/packages/cx/src/util/date/index.ts
similarity index 100%
rename from packages/cx/src/util/date/index.d.ts
rename to packages/cx/src/util/date/index.ts
diff --git a/packages/cx/src/util/date/lowerBoundCheck.d.ts b/packages/cx/src/util/date/lowerBoundCheck.d.ts
deleted file mode 100644
index c83f26645..000000000
--- a/packages/cx/src/util/date/lowerBoundCheck.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Checks `date` against the lower bound `minDate`. Set `exclusive` to true to disallow the border value.
- * @param date 
- * @param minDate 
- * @param [exclusive=false] 
- * @returns {boolean}
- */
-export function lowerBoundCheck(date: Date, minDate: Date, exclusive?: boolean) : boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/date/lowerBoundCheck.js b/packages/cx/src/util/date/lowerBoundCheck.js
deleted file mode 100644
index 0eaa1e748..000000000
--- a/packages/cx/src/util/date/lowerBoundCheck.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {dateDiff} from './dateDiff';
-
-export function lowerBoundCheck(date, minDate, exclusive = false) {
-   var d = dateDiff(date, minDate);
-   return d > 0 || (d == 0 && !exclusive);
-}
diff --git a/packages/cx/src/util/date/lowerBoundCheck.ts b/packages/cx/src/util/date/lowerBoundCheck.ts
new file mode 100644
index 000000000..821017e78
--- /dev/null
+++ b/packages/cx/src/util/date/lowerBoundCheck.ts
@@ -0,0 +1,13 @@
+import {dateDiff} from './dateDiff';
+
+/**
+ * Checks `date` against the lower bound `minDate`. Set `exclusive` to true to disallow the border value.
+ * @param date
+ * @param minDate
+ * @param [exclusive=false]
+ * @returns {boolean}
+ */
+export function lowerBoundCheck(date: Date, minDate: Date, exclusive: boolean = false): boolean {
+   var d = dateDiff(date, minDate);
+   return d > 0 || (d == 0 && !exclusive);
+}
diff --git a/packages/cx/src/util/date/maxDate.d.ts b/packages/cx/src/util/date/maxDate.d.ts
deleted file mode 100644
index 189834cf2..000000000
--- a/packages/cx/src/util/date/maxDate.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Returns the maximum Date value from the provided values.
- * @param args 
- * @returns {Date}
- */
-export function maxDate(...args: Date[]) : Date; 
\ No newline at end of file
diff --git a/packages/cx/src/util/date/maxDate.js b/packages/cx/src/util/date/maxDate.js
deleted file mode 100644
index b7f8cd7a9..000000000
--- a/packages/cx/src/util/date/maxDate.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import {dateDiff} from './dateDiff';
-
-export function maxDate() {
-   var max = arguments[0];
-   for (var i = 1; i < arguments.length; i++)
-      if (dateDiff(max, arguments[i]) < 0)
-         max = arguments[i];
-   return max;
-}
diff --git a/packages/cx/src/util/date/maxDate.ts b/packages/cx/src/util/date/maxDate.ts
new file mode 100644
index 000000000..37edd9beb
--- /dev/null
+++ b/packages/cx/src/util/date/maxDate.ts
@@ -0,0 +1,14 @@
+import {dateDiff} from './dateDiff';
+
+/**
+ * Returns the maximum Date value from the provided values.
+ * @param args
+ * @returns {Date}
+ */
+export function maxDate(...args: Date[]): Date {
+   var max = args[0];
+   for (var i = 1; i < args.length; i++)
+      if (dateDiff(max, args[i]) < 0)
+         max = args[i];
+   return max;
+}
diff --git a/packages/cx/src/util/date/minDate.d.ts b/packages/cx/src/util/date/minDate.d.ts
deleted file mode 100644
index a5783d79f..000000000
--- a/packages/cx/src/util/date/minDate.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Returns the minimum Date value from the provided values.
- * @param args 
- * @returns {Date}
- */
-export function minDate(...args: Date[]) : Date;
\ No newline at end of file
diff --git a/packages/cx/src/util/date/minDate.js b/packages/cx/src/util/date/minDate.js
deleted file mode 100644
index 5f55972a3..000000000
--- a/packages/cx/src/util/date/minDate.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import {dateDiff} from './dateDiff';
-
-export function minDate() {
-   var min = arguments[0];
-   for (var i = 1; i<arguments.length; i++)
-      if (dateDiff(min, arguments[i]) > 0)
-         min = arguments[i];
-   return min;
-}
diff --git a/packages/cx/src/util/date/minDate.ts b/packages/cx/src/util/date/minDate.ts
new file mode 100644
index 000000000..d3188df4f
--- /dev/null
+++ b/packages/cx/src/util/date/minDate.ts
@@ -0,0 +1,14 @@
+import {dateDiff} from './dateDiff';
+
+/**
+ * Returns the minimum Date value from the provided values.
+ * @param args
+ * @returns {Date}
+ */
+export function minDate(...args: Date[]): Date {
+   var min = args[0];
+   for (var i = 1; i<args.length; i++)
+      if (dateDiff(min, args[i]) > 0)
+         min = args[i];
+   return min;
+}
diff --git a/packages/cx/src/util/date/monthStart.d.ts b/packages/cx/src/util/date/monthStart.d.ts
deleted file mode 100644
index e324ec1a1..000000000
--- a/packages/cx/src/util/date/monthStart.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Returns the date representing the beginning of the month in respect to the date provided.
- * @param d 
- * @returns {Date}
- */
-export function monthStart(d: Date) : Date;
\ No newline at end of file
diff --git a/packages/cx/src/util/date/monthStart.js b/packages/cx/src/util/date/monthStart.js
deleted file mode 100644
index d1dd01428..000000000
--- a/packages/cx/src/util/date/monthStart.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function monthStart(d) {
-   return new Date(d.getFullYear(), d.getMonth(), 1);
-}
diff --git a/packages/cx/src/util/date/monthStart.ts b/packages/cx/src/util/date/monthStart.ts
new file mode 100644
index 000000000..7ddabf962
--- /dev/null
+++ b/packages/cx/src/util/date/monthStart.ts
@@ -0,0 +1,8 @@
+/**
+ * Returns the date representing the beginning of the month in respect to the date provided.
+ * @param d
+ * @returns {Date}
+ */
+export function monthStart(d: Date): Date {
+   return new Date(d.getFullYear(), d.getMonth(), 1);
+}
diff --git a/packages/cx/src/util/date/parseDateInvariant.d.ts b/packages/cx/src/util/date/parseDateInvariant.d.ts
deleted file mode 100644
index c94e1d82e..000000000
--- a/packages/cx/src/util/date/parseDateInvariant.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function parseDateInvariant(input: string | number | Date): Date;
-
-export function overrideParseDateInvariant(newImpl: (input: string | number | Date) => Date): void;
diff --git a/packages/cx/src/util/date/parseDateInvariant.js b/packages/cx/src/util/date/parseDateInvariant.js
deleted file mode 100644
index ff8c8826e..000000000
--- a/packages/cx/src/util/date/parseDateInvariant.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// This module addresses a common issue when handling date strings in the format "yyyy-MM-dd" usually returned by backends.
-// In time zones earlier than UTC, creating a Date object from such a string can result in the date being shifted one day earlier.
-// This happens because "yyyy-MM-dd" is interpreted as a UTC date at 00:00, and when the browser displays it in local time, it adjusts backward.
-// To resolve this, the default implementation (`defaultInvariantParseDate`) appends " 00:00" to the date string,
-// explicitly indicating local time. Custom parsing logic can also be registered dynamically using `registerInvariantParseDateImpl`
-// to accommodate other formats or requirements.
-function defaultParseDateInvariant(input) {
-   if (typeof input == "string" && input.length == 10 && input[4] == "-" && input[7] == "-")
-      return new Date(`${input} 00:00`);
-   return new Date(input);
-}
-let impl = defaultParseDateInvariant;
-
-export function parseDateInvariant(input) {
-   return impl(input);
-}
-
-export function overrideParseDateInvariant(newImpl) {
-   impl = newImpl;
-}
diff --git a/packages/cx/src/util/date/parseDateInvariant.ts b/packages/cx/src/util/date/parseDateInvariant.ts
new file mode 100644
index 000000000..073ef1687
--- /dev/null
+++ b/packages/cx/src/util/date/parseDateInvariant.ts
@@ -0,0 +1,20 @@
+// This module addresses a common issue when handling date strings in the format "yyyy-MM-dd" usually returned by backends.
+// In time zones earlier than UTC, creating a Date object from such a string can result in the date being shifted one day earlier.
+// This happens because "yyyy-MM-dd" is interpreted as a UTC date at 00:00, and when the browser displays it in local time, it adjusts backward.
+// To resolve this, the default implementation (`defaultInvariantParseDate`) appends " 00:00" to the date string,
+// explicitly indicating local time. Custom parsing logic can also be registered dynamically using `registerInvariantParseDateImpl`
+// to accommodate other formats or requirements.
+function defaultParseDateInvariant(input: string | number | Date): Date {
+   if (typeof input == "string" && input.length == 10 && input[4] == "-" && input[7] == "-")
+      return new Date(`${input} 00:00`);
+   return new Date(input);
+}
+let impl: (input: string | number | Date) => Date = defaultParseDateInvariant;
+
+export function parseDateInvariant(input: string | number | Date): Date {
+   return impl(input);
+}
+
+export function overrideParseDateInvariant(newImpl: (input: string | number | Date) => Date): void {
+   impl = newImpl;
+}
diff --git a/packages/cx/src/util/date/sameDate.d.ts b/packages/cx/src/util/date/sameDate.d.ts
deleted file mode 100644
index 675f5dc64..000000000
--- a/packages/cx/src/util/date/sameDate.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Returns `true` if the dates provided represent the same day.
- * @param d1 
- * @param d2
- * @returns {boolean} 
- */
-export function sameDate(d1: Date, d2: Date) : boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/date/sameDate.js b/packages/cx/src/util/date/sameDate.js
deleted file mode 100644
index c6c7b6863..000000000
--- a/packages/cx/src/util/date/sameDate.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export function sameDate (d1, d2) {
-   return d1.getDate() == d2.getDate()
-      && d1.getMonth() == d2.getMonth()
-      && d1.getYear() == d2.getYear();
-}
diff --git a/packages/cx/src/util/date/sameDate.ts b/packages/cx/src/util/date/sameDate.ts
new file mode 100644
index 000000000..7b1f5febf
--- /dev/null
+++ b/packages/cx/src/util/date/sameDate.ts
@@ -0,0 +1,11 @@
+/**
+ * Returns `true` if the dates provided represent the same day.
+ * @param d1
+ * @param d2
+ * @returns {boolean}
+ */
+export function sameDate(d1: Date, d2: Date): boolean {
+   return d1.getDate() == d2.getDate()
+      && d1.getMonth() == d2.getMonth()
+      && d1.getFullYear() == d2.getFullYear();
+}
diff --git a/packages/cx/src/util/date/upperBoundCheck.d.ts b/packages/cx/src/util/date/upperBoundCheck.d.ts
deleted file mode 100644
index f61be5430..000000000
--- a/packages/cx/src/util/date/upperBoundCheck.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Checks `date` against the upper bound `maxDate`. Set `exclusive` to true to disallow the border value.
- * @param date 
- * @param maxDate 
- * @param exclusive
- * @returns {boolean}
- */
-export function upperBoundCheck(date: Date, maxDate: Date, exclusive?: boolean) : boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/date/upperBoundCheck.js b/packages/cx/src/util/date/upperBoundCheck.js
deleted file mode 100644
index 2bd4d4bc4..000000000
--- a/packages/cx/src/util/date/upperBoundCheck.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {dateDiff} from './dateDiff';
-
-export function upperBoundCheck(date, maxDate, exclusive = false) {
-   var d = dateDiff(date, maxDate);
-   return d < 0 || (d == 0 && !exclusive);
-}
diff --git a/packages/cx/src/util/date/upperBoundCheck.spec.js b/packages/cx/src/util/date/upperBoundCheck.spec.ts
similarity index 100%
rename from packages/cx/src/util/date/upperBoundCheck.spec.js
rename to packages/cx/src/util/date/upperBoundCheck.spec.ts
diff --git a/packages/cx/src/util/date/upperBoundCheck.ts b/packages/cx/src/util/date/upperBoundCheck.ts
new file mode 100644
index 000000000..0aca9a32c
--- /dev/null
+++ b/packages/cx/src/util/date/upperBoundCheck.ts
@@ -0,0 +1,13 @@
+import {dateDiff} from './dateDiff';
+
+/**
+ * Checks `date` against the upper bound `maxDate`. Set `exclusive` to true to disallow the border value.
+ * @param date
+ * @param maxDate
+ * @param exclusive
+ * @returns {boolean}
+ */
+export function upperBoundCheck(date: Date, maxDate: Date, exclusive: boolean = false): boolean {
+   var d = dateDiff(date, maxDate);
+   return d < 0 || (d == 0 && !exclusive);
+}
diff --git a/packages/cx/src/util/date/zeroTime.d.ts b/packages/cx/src/util/date/zeroTime.d.ts
deleted file mode 100644
index 9e1f61355..000000000
--- a/packages/cx/src/util/date/zeroTime.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Zeros out time for the given Date object. E.g. for date object representing Wed Apr 19 2017 14:31:51 GMT+0200
- * returns Wed Apr 19 2017 00:00:00 GMT+0200.
- * @param d 
- * @returns {Date}
- */
-export function zeroTime(d: Date) : Date;
\ No newline at end of file
diff --git a/packages/cx/src/util/date/zeroTime.js b/packages/cx/src/util/date/zeroTime.js
deleted file mode 100644
index fdb6dd20a..000000000
--- a/packages/cx/src/util/date/zeroTime.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function zeroTime(d) {
-   return new Date(d.getFullYear(), d.getMonth(), d.getDate());
-}
diff --git a/packages/cx/src/util/date/zeroTime.ts b/packages/cx/src/util/date/zeroTime.ts
new file mode 100644
index 000000000..71c33afad
--- /dev/null
+++ b/packages/cx/src/util/date/zeroTime.ts
@@ -0,0 +1,9 @@
+/**
+ * Zeros out time for the given Date object. E.g. for date object representing Wed Apr 19 2017 14:31:51 GMT+0200
+ * returns Wed Apr 19 2017 00:00:00 GMT+0200.
+ * @param d
+ * @returns {Date}
+ */
+export function zeroTime(d: Date): Date {
+   return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
diff --git a/packages/cx/src/util/debounce.d.ts b/packages/cx/src/util/debounce.d.ts
deleted file mode 100644
index 481b70e9c..000000000
--- a/packages/cx/src/util/debounce.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Returns a function, that, as long as it continues to be invoked, will not
- * trigger the `callback` function, until the `delay` amount of milliseconds has passed since the last call.
- * All arguments are passed to the `callback` function.
- * @param callback
- * @param delay - Delay in milliseconds.
- * @returns {Function}
- */
-export function debounce<T extends (...args: any[]) => void>(callback: T, delay: number): T;
diff --git a/packages/cx/src/util/debounce.js b/packages/cx/src/util/debounce.js
deleted file mode 100644
index 751872ff2..000000000
--- a/packages/cx/src/util/debounce.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export function debounce(callback, delay) {
-   let timer;
-
-   let result = function (...args) {
-      let context = this;
-      clearTimeout(timer);
-      timer = setTimeout(function () {
-         callback.apply(context, args);
-      }, delay);
-   };
-
-   result.reset = function reset(...args) {
-      clearTimeout(timer);
-      callback.apply(this, args);
-   };
-
-   return result;
-}
diff --git a/packages/cx/src/util/debounce.ts b/packages/cx/src/util/debounce.ts
new file mode 100644
index 000000000..a792370f9
--- /dev/null
+++ b/packages/cx/src/util/debounce.ts
@@ -0,0 +1,26 @@
+export interface DebouncedFunction<T extends (...args: any[]) => any> {
+   (...args: Parameters<T>): void;
+   reset(...args: Parameters<T>): void;
+}
+
+export function debounce<T extends (...args: any[]) => any>(
+   callback: T,
+   delay: number
+): DebouncedFunction<T> {
+   let timer: ReturnType<typeof setTimeout> | undefined;
+
+   const result = function (this: any, ...args: Parameters<T>): void {
+      const context = this;
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+         callback.apply(context, args);
+      }, delay);
+   } as DebouncedFunction<T>;
+
+   result.reset = function (this: any, ...args: Parameters<T>): void {
+      clearTimeout(timer);
+      callback.apply(this, args);
+   };
+
+   return result;
+}
diff --git a/packages/cx/src/util/dummyCallback.d.ts b/packages/cx/src/util/dummyCallback.d.ts
deleted file mode 100644
index 5d20194dc..000000000
--- a/packages/cx/src/util/dummyCallback.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function dummyCallback();
diff --git a/packages/cx/src/util/dummyCallback.js b/packages/cx/src/util/dummyCallback.js
deleted file mode 100644
index aad42b94a..000000000
--- a/packages/cx/src/util/dummyCallback.js
+++ /dev/null
@@ -1 +0,0 @@
-export function dummyCallback() {}
diff --git a/packages/cx/src/util/dummyCallback.ts b/packages/cx/src/util/dummyCallback.ts
new file mode 100644
index 000000000..bb2a8842f
--- /dev/null
+++ b/packages/cx/src/util/dummyCallback.ts
@@ -0,0 +1 @@
+export function dummyCallback(): void {}
diff --git a/packages/cx/src/util/escapeSpecialRegexCharacters.d.ts b/packages/cx/src/util/escapeSpecialRegexCharacters.d.ts
deleted file mode 100644
index 435db0b29..000000000
--- a/packages/cx/src/util/escapeSpecialRegexCharacters.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-
-/**
- * 
- * @param s 
- * @return {string}
- */
-export function escapeSpecialRegexCharacters(s: string): string;
\ No newline at end of file
diff --git a/packages/cx/src/util/escapeSpecialRegexCharacters.js b/packages/cx/src/util/escapeSpecialRegexCharacters.js
deleted file mode 100644
index 9a4f456c9..000000000
--- a/packages/cx/src/util/escapeSpecialRegexCharacters.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function escapeSpecialRegexCharacters(s) {
-   return s.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&');
-}
diff --git a/packages/cx/src/util/escapeSpecialRegexCharacters.ts b/packages/cx/src/util/escapeSpecialRegexCharacters.ts
new file mode 100644
index 000000000..3f294ecbc
--- /dev/null
+++ b/packages/cx/src/util/escapeSpecialRegexCharacters.ts
@@ -0,0 +1,8 @@
+/**
+ *
+ * @param s
+ * @return {string}
+ */
+export function escapeSpecialRegexCharacters(s: string): string {
+   return s.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&');
+}
diff --git a/packages/cx/src/util/eventCallbacks.d.ts b/packages/cx/src/util/eventCallbacks.d.ts
deleted file mode 100644
index c699aac81..000000000
--- a/packages/cx/src/util/eventCallbacks.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-export function stopPropagation(e: React.SyntheticEvent<any>) : void;
-
-export function preventDefault(e: React.SyntheticEvent<any>) : void;
\ No newline at end of file
diff --git a/packages/cx/src/util/eventCallbacks.js b/packages/cx/src/util/eventCallbacks.js
deleted file mode 100644
index 8192016c1..000000000
--- a/packages/cx/src/util/eventCallbacks.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const stopPropagation = e => e.stopPropagation();
-export const preventDefault = e => e.preventDefault();
diff --git a/packages/cx/src/util/eventCallbacks.ts b/packages/cx/src/util/eventCallbacks.ts
new file mode 100644
index 000000000..57751b157
--- /dev/null
+++ b/packages/cx/src/util/eventCallbacks.ts
@@ -0,0 +1,12 @@
+interface SyntheticEvent<T> {
+   stopPropagation(): void;
+   preventDefault(): void;
+}
+
+export function stopPropagation(e: SyntheticEvent<any>): void {
+   e.stopPropagation();
+}
+
+export function preventDefault(e: SyntheticEvent<any>): void {
+   e.preventDefault();
+}
diff --git a/packages/cx/src/util/expandFatArrows.d.ts b/packages/cx/src/util/expandFatArrows.d.ts
deleted file mode 100644
index c178039a3..000000000
--- a/packages/cx/src/util/expandFatArrows.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function expandFatArrows(code: string) : string;
\ No newline at end of file
diff --git a/packages/cx/src/util/expandFatArrows.js b/packages/cx/src/util/expandFatArrows.js
deleted file mode 100644
index a7774449c..000000000
--- a/packages/cx/src/util/expandFatArrows.js
+++ /dev/null
@@ -1,118 +0,0 @@
-//http://stackoverflow.com/questions/36428283/arrow-function-eval-preprocessor
-
-export function expandFatArrows(code) {
-   var arrowHeadRegex = RegExp(/(\((?:\w+,)*\w+\)|\(\)|\w+)[\r\t ]*=>\s*/);
-   var arrowHeadMatch = arrowHeadRegex.exec(code);
-
-   if (arrowHeadMatch) {//if no match return as it is
-      var params = arrowHeadMatch[1];
-      if (params.charAt(0) !== "(") {
-         params = "(" + params + ")";
-      }
-      var index = arrowHeadMatch.index;
-      var startCode = code.substring(0, index);
-
-      var bodyAndNext = code.substring(index + arrowHeadMatch[0].length);
-
-      var curlyCount = 0;
-      var curlyPresent = false;
-      var singleLineBodyEnd = 0;
-      var bodyEnd = 0;
-
-      for (var i = 0; i < bodyAndNext.length; i++) {
-         var ch = bodyAndNext[i];
-         if (ch === '{') {
-            curlyPresent = true;
-            curlyCount++;
-         } else if (ch === '}') {
-            curlyCount--;
-         } else if (!curlyPresent) {
-            //any character other than { or }
-            singleLineBodyEnd = getSingeLineBodyEnd(bodyAndNext, i);
-            break;
-         }
-         if (curlyPresent && curlyCount === 0) {
-            bodyEnd = i;
-            break;
-         }
-      }
-
-      var body;
-
-      if (curlyPresent) {
-         if (curlyCount !== 0) {
-            throw Error("Could not match curly braces for function at : " + index);
-         }
-         body = bodyAndNext.substring(0, bodyEnd + 1);
-
-         var restCode = bodyAndNext.substring(bodyEnd + 1);
-         var expandedFun = "(function " + params + body + ").bind(this)";
-         code = startCode + expandedFun + restCode;
-      } else {
-         if (singleLineBodyEnd <= 0) {
-            throw Error("could not get function body at : " + index);
-         }
-
-         body = bodyAndNext.substring(0, singleLineBodyEnd + 1);
-
-         restCode = bodyAndNext.substring(singleLineBodyEnd + 1);
-         expandedFun = "(function " + params + "{return " + body + "}).bind(this)";
-         code = startCode + expandedFun + restCode;
-      }
-
-      return expandFatArrows(code);//recursive call
-   }
-   return code;
-}
-
-function getSingeLineBodyEnd(bodyCode, startI) {
-   var braceCount = 0;
-   var openingQuote = null;
-
-   for (var i = startI; i < bodyCode.length; i++) {
-      var ch = bodyCode[i];
-      var lastCh = null;
-      if (ch === '"' || ch === "'") {
-         openingQuote = ch;
-         i = skipQuotedString(bodyCode, openingQuote, i);
-         ch = bodyCode[i];
-      }
-
-      if (i !== 0 && !bodyCode[i - 1].match(/[\t\r ]/)) {
-         lastCh = bodyCode[i - 1];
-      }
-
-      if (ch === '{' || ch === '(') {
-         braceCount++;
-      } else if (ch === '}' || ch === ')') {
-         braceCount--;
-      }
-
-      if (braceCount < 0 || (lastCh !== '.' && ch === '\n')) {
-         return i - 1;
-      }
-   }
-
-   return bodyCode.length;
-}
-
-function skipQuotedString(bodyAndNext, openingQuote, i) {
-   var matchFound = false;//matching quote
-   var openingQuoteI = i;
-   i++;
-   for (; i < bodyAndNext.length; i++) {
-      var ch = bodyAndNext[i];
-      var lastCh = (i !== 0) ? bodyAndNext[i - 1] : null;
-
-      if (ch !== openingQuote || (ch === openingQuote && lastCh === '\\' )) {
-         continue;//skip quoted string
-      } else if (ch === openingQuote) {//matched closing quote
-         matchFound = false;
-         break;
-      }
-   }
-   if (matchFound) {
-      throw new Error("Could not find closing quote for quote at : " + openingQuoteI);
-   }
-   return i;
-}
diff --git a/packages/cx/src/util/expandFatArrows.ts b/packages/cx/src/util/expandFatArrows.ts
new file mode 100644
index 000000000..a83bba56f
--- /dev/null
+++ b/packages/cx/src/util/expandFatArrows.ts
@@ -0,0 +1,118 @@
+//http://stackoverflow.com/questions/36428283/arrow-function-eval-preprocessor
+
+export function expandFatArrows(code: string): string {
+   var arrowHeadRegex = RegExp(/(\((?:\w+,)*\w+\)|\(\)|\w+)[\r\t ]*=>\s*/);
+   var arrowHeadMatch = arrowHeadRegex.exec(code);
+
+   if (arrowHeadMatch) {//if no match return as it is
+      var params = arrowHeadMatch[1];
+      if (params.charAt(0) !== "(") {
+         params = "(" + params + ")";
+      }
+      var index = arrowHeadMatch.index;
+      var startCode = code.substring(0, index);
+
+      var bodyAndNext = code.substring(index + arrowHeadMatch[0].length);
+
+      var curlyCount = 0;
+      var curlyPresent = false;
+      var singleLineBodyEnd = 0;
+      var bodyEnd = 0;
+
+      for (var i = 0; i < bodyAndNext.length; i++) {
+         var ch = bodyAndNext[i];
+         if (ch === '{') {
+            curlyPresent = true;
+            curlyCount++;
+         } else if (ch === '}') {
+            curlyCount--;
+         } else if (!curlyPresent) {
+            //any character other than { or }
+            singleLineBodyEnd = getSingeLineBodyEnd(bodyAndNext, i);
+            break;
+         }
+         if (curlyPresent && curlyCount === 0) {
+            bodyEnd = i;
+            break;
+         }
+      }
+
+      var body;
+
+      if (curlyPresent) {
+         if (curlyCount !== 0) {
+            throw Error("Could not match curly braces for function at : " + index);
+         }
+         body = bodyAndNext.substring(0, bodyEnd + 1);
+
+         var restCode = bodyAndNext.substring(bodyEnd + 1);
+         var expandedFun = "(function " + params + body + ").bind(this)";
+         code = startCode + expandedFun + restCode;
+      } else {
+         if (singleLineBodyEnd <= 0) {
+            throw Error("could not get function body at : " + index);
+         }
+
+         body = bodyAndNext.substring(0, singleLineBodyEnd + 1);
+
+         restCode = bodyAndNext.substring(singleLineBodyEnd + 1);
+         expandedFun = "(function " + params + "{return " + body + "}).bind(this)";
+         code = startCode + expandedFun + restCode;
+      }
+
+      return expandFatArrows(code);//recursive call
+   }
+   return code;
+}
+
+function getSingeLineBodyEnd(bodyCode: string, startI: number): number {
+   var braceCount = 0;
+   var openingQuote = null;
+
+   for (var i = startI; i < bodyCode.length; i++) {
+      var ch = bodyCode[i];
+      var lastCh = null;
+      if (ch === '"' || ch === "'") {
+         openingQuote = ch;
+         i = skipQuotedString(bodyCode, openingQuote, i);
+         ch = bodyCode[i];
+      }
+
+      if (i !== 0 && !bodyCode[i - 1].match(/[\t\r ]/)) {
+         lastCh = bodyCode[i - 1];
+      }
+
+      if (ch === '{' || ch === '(') {
+         braceCount++;
+      } else if (ch === '}' || ch === ')') {
+         braceCount--;
+      }
+
+      if (braceCount < 0 || (lastCh !== '.' && ch === '\n')) {
+         return i - 1;
+      }
+   }
+
+   return bodyCode.length;
+}
+
+function skipQuotedString(bodyAndNext: string, openingQuote: string, i: number): number {
+   var matchFound = false;//matching quote
+   var openingQuoteI = i;
+   i++;
+   for (; i < bodyAndNext.length; i++) {
+      var ch = bodyAndNext[i];
+      var lastCh = (i !== 0) ? bodyAndNext[i - 1] : null;
+
+      if (ch !== openingQuote || (ch === openingQuote && lastCh === '\\' )) {
+         continue;//skip quoted string
+      } else if (ch === openingQuote) {//matched closing quote
+         matchFound = false;
+         break;
+      }
+   }
+   if (matchFound) {
+      throw new Error("Could not find closing quote for quote at : " + openingQuoteI);
+   }
+   return i;
+}
diff --git a/packages/cx/src/util/findScrollableParent.d.ts b/packages/cx/src/util/findScrollableParent.d.ts
deleted file mode 100644
index 7ca43ebab..000000000
--- a/packages/cx/src/util/findScrollableParent.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function findScrollableParent(sourceEl: Element, horizontal?: boolean) : Element;
\ No newline at end of file
diff --git a/packages/cx/src/util/findScrollableParent.js b/packages/cx/src/util/findScrollableParent.js
deleted file mode 100644
index b0c5688ea..000000000
--- a/packages/cx/src/util/findScrollableParent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { closest } from './DOM';
-
-export function findScrollableParent(sourceEl, horizontal = false) {
-   if (!sourceEl) return null;
-   let scrollParent = closest(sourceEl, el => {
-      if (el.nodeType != Node.ELEMENT_NODE)
-         return false;
-      if (!horizontal && el.clientHeight >= el.scrollHeight)
-         return false;
-      if (horizontal && el.clientWidth >= el.scrollWidth)
-         return false;
-      let overflow = getComputedStyle(el)[horizontal ? "overflow-x" : "overflow-y"];
-      return overflow == "auto" || overflow == "scroll";
-   });
-   return scrollParent || sourceEl.ownerDocument.scrollingElement || sourceEl.ownerDocument.documentElement;
-}
diff --git a/packages/cx/src/util/findScrollableParent.ts b/packages/cx/src/util/findScrollableParent.ts
new file mode 100644
index 000000000..e8c22072c
--- /dev/null
+++ b/packages/cx/src/util/findScrollableParent.ts
@@ -0,0 +1,15 @@
+import { closest } from "./DOM";
+
+export function findScrollableParent(sourceEl: Element, horizontal: boolean = false): HTMLElement | null {
+   if (!sourceEl) return null;
+   let scrollParent = closest(sourceEl, (el) => {
+      if (el.nodeType != Node.ELEMENT_NODE) return false;
+      if (!horizontal && el.clientHeight >= el.scrollHeight) return false;
+      if (horizontal && el.clientWidth >= el.scrollWidth) return false;
+      let overflow = getComputedStyle(el).getPropertyValue(horizontal ? "overflow-x" : "overflow-y");
+      return overflow == "auto" || overflow == "scroll";
+   }) as HTMLElement;
+   return (
+      scrollParent || (sourceEl.ownerDocument.scrollingElement as HTMLElement) || sourceEl.ownerDocument.documentElement
+   );
+}
diff --git a/packages/cx/src/util/getActiveElement.d.ts b/packages/cx/src/util/getActiveElement.d.ts
deleted file mode 100644
index 5de05dc4e..000000000
--- a/packages/cx/src/util/getActiveElement.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function getActiveElement() : Element;
\ No newline at end of file
diff --git a/packages/cx/src/util/getActiveElement.js b/packages/cx/src/util/getActiveElement.js
deleted file mode 100644
index 364570eda..000000000
--- a/packages/cx/src/util/getActiveElement.js
+++ /dev/null
@@ -1,4 +0,0 @@
-//IE sometimes returns null while other browsers always return document.body.
-export function getActiveElement() {
-   return document.activeElement || document.body;
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/getActiveElement.ts b/packages/cx/src/util/getActiveElement.ts
new file mode 100644
index 000000000..83781e78d
--- /dev/null
+++ b/packages/cx/src/util/getActiveElement.ts
@@ -0,0 +1,4 @@
+//IE sometimes returns null while other browsers always return document.body.
+export function getActiveElement(): Element {
+   return document.activeElement ?? document.body;
+}
diff --git a/packages/cx/src/util/getParentFrameBoundingClientRect.d.ts b/packages/cx/src/util/getParentFrameBoundingClientRect.d.ts
deleted file mode 100644
index 94c978f5d..000000000
--- a/packages/cx/src/util/getParentFrameBoundingClientRect.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function getParentFrameBoundingClientRect(el: Element) : ClientRect;
\ No newline at end of file
diff --git a/packages/cx/src/util/getParentFrameBoundingClientRect.js b/packages/cx/src/util/getParentFrameBoundingClientRect.js
deleted file mode 100644
index c7a98e895..000000000
--- a/packages/cx/src/util/getParentFrameBoundingClientRect.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export function getParentFrameBoundingClientRect(el) {
-   // if the ownerDocument is null, the element itself is the document
-   let ownerDocument = el.ownerDocument || el;
-   if (ownerDocument != document) {
-      let frames = document.getElementsByTagName("iframe");
-      for (let i = 0; i < frames.length; i++) {
-         if (frames[i].contentDocument == ownerDocument) {
-            return frames[i].getBoundingClientRect();
-         }
-      }
-   }
-
-   return {
-      top: 0,
-      left: 0,
-      right: window.innerWidth,
-      bottom: window.innerHeight,
-      width: window.innerWidth,
-      height: window.innerHeight,
-   };
-}
diff --git a/packages/cx/src/util/getParentFrameBoundingClientRect.ts b/packages/cx/src/util/getParentFrameBoundingClientRect.ts
new file mode 100644
index 000000000..c3e5c468d
--- /dev/null
+++ b/packages/cx/src/util/getParentFrameBoundingClientRect.ts
@@ -0,0 +1,13 @@
+export function getParentFrameBoundingClientRect(el: Element): DOMRect {
+   // if the ownerDocument is null, the element itself is the document
+   let ownerDocument = el.ownerDocument || el;
+   if (ownerDocument != document) {
+      let frames = document.getElementsByTagName("iframe");
+      for (let i = 0; i < frames.length; i++) {
+         if (frames[i].contentDocument == ownerDocument) {
+            return frames[i].getBoundingClientRect();
+         }
+      }
+   }
+   return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+}
diff --git a/packages/cx/src/util/getScrollerBoundingClientRect.d.ts b/packages/cx/src/util/getScrollerBoundingClientRect.d.ts
deleted file mode 100644
index d909e72b8..000000000
--- a/packages/cx/src/util/getScrollerBoundingClientRect.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function getScrollerBoundingClientRect(scrollEl: Element, topLevel?: boolean) : ClientRect;
\ No newline at end of file
diff --git a/packages/cx/src/util/getScrollerBoundingClientRect.js b/packages/cx/src/util/getScrollerBoundingClientRect.js
deleted file mode 100644
index 8527472f5..000000000
--- a/packages/cx/src/util/getScrollerBoundingClientRect.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {getParentFrameBoundingClientRect} from "./getParentFrameBoundingClientRect";
-import {getTopLevelBoundingClientRect} from "./getTopLevelBoundingClientRect";
-
-export function getScrollerBoundingClientRect(scrollEl, topLevel = false) {
-   if (scrollEl == scrollEl.ownerDocument.body || scrollEl == scrollEl.ownerDocument.documentElement) {
-      if (topLevel)
-         return getParentFrameBoundingClientRect(scrollEl.ownerDocument.body);
-
-      return {
-         left: 0,
-         top: 0,
-         right: window.innerWidth,
-         bottom: window.innerHeight,
-         width: window.innerWidth,
-         height: window.innerHeight
-      };
-   }
-
-   return topLevel
-      ? getTopLevelBoundingClientRect(scrollEl)
-      : scrollEl.getBoundingClientRect();
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/getScrollerBoundingClientRect.ts b/packages/cx/src/util/getScrollerBoundingClientRect.ts
new file mode 100644
index 000000000..7099b2e66
--- /dev/null
+++ b/packages/cx/src/util/getScrollerBoundingClientRect.ts
@@ -0,0 +1,12 @@
+import { getParentFrameBoundingClientRect } from "./getParentFrameBoundingClientRect";
+import { getTopLevelBoundingClientRect } from "./getTopLevelBoundingClientRect";
+
+export function getScrollerBoundingClientRect(scrollEl: Element, topLevel: boolean = false): DOMRect {
+   if (scrollEl == scrollEl.ownerDocument.body || scrollEl == scrollEl.ownerDocument.documentElement) {
+      if (topLevel) return getParentFrameBoundingClientRect(scrollEl.ownerDocument.body);
+
+      return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+   }
+
+   return topLevel ? getTopLevelBoundingClientRect(scrollEl) : scrollEl.getBoundingClientRect();
+}
diff --git a/packages/cx/src/util/getSearchQueryPredicate.d.ts b/packages/cx/src/util/getSearchQueryPredicate.d.ts
deleted file mode 100644
index f1767d0ed..000000000
--- a/packages/cx/src/util/getSearchQueryPredicate.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function getSearchQueryPredicate(query: string, options?: any) : (text: string) => boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/getSearchQueryPredicate.js b/packages/cx/src/util/getSearchQueryPredicate.js
deleted file mode 100644
index 924d164ad..000000000
--- a/packages/cx/src/util/getSearchQueryPredicate.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { escapeSpecialRegexCharacters } from "./escapeSpecialRegexCharacters";
-
-function getTermsAndRegularExpressions(query) {
-   if (!query) return [[], []];
-   let terms = query.split(" ").filter(Boolean);
-   let regexes = terms.map((word) => new RegExp(escapeSpecialRegexCharacters(word), "gi"));
-   return [terms, regexes];
-}
-
-export function getSearchQueryPredicate(query, options) {
-   let [terms, regexes] = getTermsAndRegularExpressions(query);
-   if (terms.length == 0) return () => true;
-   if (regexes.length == 1) {
-      let regex = regexes[0];
-      return (text) => text && text.match(regex);
-   }
-   return (text) => text && regexes.every((re) => text.match(re));
-}
-
-var highlighterCache = {};
-
-export function getSearchQueryHighlighter(query, options) {
-   let [terms, regexes] = getTermsAndRegularExpressions(query);
-   if (terms.length == 0) return (text) => [text];
-
-   if (highlighterCache[query]) return highlighterCache[query];
-
-   let result = (query) => {
-      query = new String(query);
-      let chunks = [query];
-      for (let i = 0; i < regexes.length; i++) {
-         let newChunks = [];
-         for (let j = 0; j < chunks.length; j++) {
-            let at = 0;
-            let chunk = chunks[j];
-            let parts = chunk.split(regexes[i]);
-            for (let k = 0; k < parts.length; k++) {
-               newChunks.push(parts[k]);
-               at += parts[k].length;
-               if (k < parts.length - 1) {
-                  newChunks.push(chunk.substr(at, terms[i].length));
-                  at += terms[i].length;
-               }
-            }
-         }
-         chunks = newChunks;
-      }
-      return chunks;
-   };
-
-   if (options?.cache) {
-      highlighterCache[query] = result;
-      setTimeout(() => {
-         delete highlighterCache[query];
-      }, options?.cachePeriod || 5000);
-   }
-
-   return result;
-}
diff --git a/packages/cx/src/util/getSearchQueryPredicate.spec.js b/packages/cx/src/util/getSearchQueryPredicate.spec.ts
similarity index 100%
rename from packages/cx/src/util/getSearchQueryPredicate.spec.js
rename to packages/cx/src/util/getSearchQueryPredicate.spec.ts
diff --git a/packages/cx/src/util/getSearchQueryPredicate.ts b/packages/cx/src/util/getSearchQueryPredicate.ts
new file mode 100644
index 000000000..1f2ab7388
--- /dev/null
+++ b/packages/cx/src/util/getSearchQueryPredicate.ts
@@ -0,0 +1,58 @@
+import { escapeSpecialRegexCharacters } from "./escapeSpecialRegexCharacters";
+
+function getTermsAndRegularExpressions(query: string): [string[], RegExp[]] {
+   if (!query) return [[], []];
+   let terms = query.split(" ").filter(Boolean);
+   let regexes = terms.map((word) => new RegExp(escapeSpecialRegexCharacters(word), "gi"));
+   return [terms, regexes];
+}
+
+export function getSearchQueryPredicate(query: string, options?: any): (text: string) => boolean {
+   let [terms, regexes] = getTermsAndRegularExpressions(query);
+   if (terms.length == 0) return () => true;
+   if (regexes.length == 1) {
+      let regex = regexes[0];
+      return (text: string) => !!text && text.match(regex) != null;
+   }
+   return (text: string) => !!text && regexes.every((re) => text.match(re));
+}
+
+var highlighterCache: { [key: string]: (query: string) => string[] } = {};
+
+export function getSearchQueryHighlighter(query: string, options?: any): (query: string) => string[] {
+   let [terms, regexes] = getTermsAndRegularExpressions(query);
+   if (terms.length == 0) return (text) => [text];
+
+   if (highlighterCache[query]) return highlighterCache[query];
+
+   let result = (query: string) => {
+      let chunks = [query];
+      for (let i = 0; i < regexes.length; i++) {
+         let newChunks = [];
+         for (let j = 0; j < chunks.length; j++) {
+            let at = 0;
+            let chunk = chunks[j];
+            let parts = chunk.split(regexes[i]);
+            for (let k = 0; k < parts.length; k++) {
+               newChunks.push(parts[k]);
+               at += parts[k].length;
+               if (k < parts.length - 1) {
+                  newChunks.push(chunk.substr(at, terms[i].length));
+                  at += terms[i].length;
+               }
+            }
+         }
+         chunks = newChunks;
+      }
+      return chunks;
+   };
+
+   if (options?.cache) {
+      highlighterCache[query] = result;
+      setTimeout(() => {
+         delete highlighterCache[query];
+      }, options?.cachePeriod || 5000);
+   }
+
+   return result;
+}
diff --git a/packages/cx/src/util/getTopLevelBoundingClientRect.d.ts b/packages/cx/src/util/getTopLevelBoundingClientRect.d.ts
deleted file mode 100644
index ee65c3ec6..000000000
--- a/packages/cx/src/util/getTopLevelBoundingClientRect.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function getTopLevelBoundingClientRect(el: Element) : { left: number, right: number, top: number, bottom: number };
\ No newline at end of file
diff --git a/packages/cx/src/util/getTopLevelBoundingClientRect.js b/packages/cx/src/util/getTopLevelBoundingClientRect.js
deleted file mode 100644
index dc7725232..000000000
--- a/packages/cx/src/util/getTopLevelBoundingClientRect.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {getParentFrameBoundingClientRect} from "./getParentFrameBoundingClientRect";
-
-export function getTopLevelBoundingClientRect(el) {
-   let bounds = el.getBoundingClientRect();
-   let offset = getParentFrameBoundingClientRect(el);
-   return {
-      top: bounds.top + offset.top,
-      left: bounds.left + offset.left,
-      bottom: bounds.bottom + offset.top,
-      right: bounds.right + offset.left,
-      width: bounds.right - bounds.left,
-      height: bounds.bottom - bounds.top
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/getTopLevelBoundingClientRect.ts b/packages/cx/src/util/getTopLevelBoundingClientRect.ts
new file mode 100644
index 000000000..7ab8b9a2e
--- /dev/null
+++ b/packages/cx/src/util/getTopLevelBoundingClientRect.ts
@@ -0,0 +1,7 @@
+import { getParentFrameBoundingClientRect } from "./getParentFrameBoundingClientRect";
+
+export function getTopLevelBoundingClientRect(el: Element): DOMRect {
+   let bounds = el.getBoundingClientRect();
+   let offset = getParentFrameBoundingClientRect(el);
+   return new DOMRect(bounds.left + offset.left, bounds.top + offset.top, bounds.width, bounds.height);
+}
diff --git a/packages/cx/src/util/getVendorPrefix.d.ts b/packages/cx/src/util/getVendorPrefix.d.ts
deleted file mode 100644
index afb087d3b..000000000
--- a/packages/cx/src/util/getVendorPrefix.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function getVendorPrefix(type: 'dom' | 'lowercase' | 'css' | 'js') : string; 
\ No newline at end of file
diff --git a/packages/cx/src/util/getVendorPrefix.js b/packages/cx/src/util/getVendorPrefix.js
deleted file mode 100644
index 68aeeacde..000000000
--- a/packages/cx/src/util/getVendorPrefix.js
+++ /dev/null
@@ -1,26 +0,0 @@
-//shamelessly taken from https://davidwalsh.name/vendor-prefix
-
-var getPrefixes = function () {
-   var styles = window.getComputedStyle(document.documentElement, ''),
-      pre = (Array.prototype.slice
-            .call(styles)
-            .join('')
-            .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
-      )[1],
-      dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
-   return {
-      dom: dom,
-      lowercase: pre,
-      css: '-' + pre + '-',
-      js: pre[0].toUpperCase() + pre.substr(1)
-   };
-}
-
-var prefixes;
-
-export function getVendorPrefix(type) {
-   if (!prefixes)
-      prefixes = getPrefixes();
-
-   return prefixes[type];
-}
diff --git a/packages/cx/src/util/getVendorPrefix.ts b/packages/cx/src/util/getVendorPrefix.ts
new file mode 100644
index 000000000..33f6f604f
--- /dev/null
+++ b/packages/cx/src/util/getVendorPrefix.ts
@@ -0,0 +1,33 @@
+//shamelessly taken from https://davidwalsh.name/vendor-prefix
+
+interface Prefixes {
+   dom: string;
+   lowercase: string;
+   css: string;
+   js: string;
+}
+
+var getPrefixes = function (): Prefixes {
+   var styles = window.getComputedStyle(document.documentElement, '') as any;
+   var match = Array.prototype.slice
+      .call(styles)
+      .join('')
+      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']);
+   var pre = (match as string[])[1];
+   var dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))![1];
+   return {
+      dom: dom,
+      lowercase: pre,
+      css: '-' + pre + '-',
+      js: pre[0].toUpperCase() + pre.substr(1)
+   };
+}
+
+var prefixes: Prefixes | undefined;
+
+export function getVendorPrefix(type: 'dom' | 'lowercase' | 'css' | 'js'): string {
+   if (!prefixes)
+      prefixes = getPrefixes();
+
+   return prefixes[type];
+}
diff --git a/packages/cx/src/util/hasKey.ts b/packages/cx/src/util/hasKey.ts
new file mode 100644
index 000000000..5725e8e39
--- /dev/null
+++ b/packages/cx/src/util/hasKey.ts
@@ -0,0 +1,18 @@
+import { isFunction } from "./isFunction";
+import { isString } from "./isString";
+
+export function hasKey<K extends string>(obj: object, key: K): obj is Record<K, unknown> {
+   return key in obj;
+}
+
+export function hasStringAtKey<K extends string>(obj: object, key: K): obj is Record<K, string> {
+   return hasKey(obj, key) && isString(obj[key]);
+}
+
+export function hasValueAtKey<K extends string>(obj: object, key: K, value: unknown): obj is Record<K, unknown> {
+   return hasKey(obj, key) && obj[key] === value;
+}
+
+export function hasFunctionAtKey<K extends string>(obj: object, key: K): obj is Record<K, (...args: any[]) => any> {
+   return hasKey(obj, key) && isFunction(obj[key]);
+}
diff --git a/packages/cx/src/util/index.d.ts b/packages/cx/src/util/index.d.ts
deleted file mode 100644
index 4cf3500b5..000000000
--- a/packages/cx/src/util/index.d.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-export * from "./Console";
-export * from "./Debug";
-export * from "./DOM";
-export * from "./Format";
-export * from "./expandFatArrows";
-export * from "./GlobalCacheIdentifier";
-export * from "./innerTextTrim";
-export * from "./isDigit";
-export * from "./isPromise";
-export * from "./isTouchDevice";
-export * from "./KeyCode";
-export * from "./parseStyle";
-export * from "./quote";
-export * from "./scrollElementIntoView";
-export * from "./shallowEquals";
-export * from "./Timing";
-export * from "./date/index";
-export * from "./color/index";
-export * from "./getVendorPrefix";
-export * from "./eventCallbacks";
-export * from "./getSearchQueryPredicate";
-export * from "./escapeSpecialRegexCharacters";
-export * from "./browserSupportsPassiveEventHandlers";
-export * from "./isTouchEvent";
-export * from "./debounce";
-export * from "./throttle";
-export * from "./SubscriberList";
-export * from "./findScrollableParent";
-export * from "./getScrollerBoundingClientRect";
-export * from "./isNonEmptyArray";
-export * from "./isArray";
-export * from "./isObject";
-export * from "./isNumber";
-export * from "./isFunction";
-export * from "./isString";
-export * from "./isUndefined";
-export * from "./isDefined";
-export * from "./routeAppend";
-export * from "./reverseSlice";
-export * from "./getTopLevelBoundingClientRect";
-export * from "./getParentFrameBoundingClientRect";
-export * from "./getActiveElement";
-export * from "./Component";
-export * from "./onIdleCallback";
-export * from "./validatedDebounce";
-export * from "./addEventListenerWithOptions";
-export * from "./coalesce";
-export * from "./dummyCallback";
-export * from "./calculateNaturalElementHeight";
-export * from "./isTextInputElement";
-export * from "./isValidIdentifierName";
diff --git a/packages/cx/src/util/index.js b/packages/cx/src/util/index.js
deleted file mode 100644
index 55060f9b7..000000000
--- a/packages/cx/src/util/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-export * from "./Console";
-export * from "./Debug";
-export * from "./DOM";
-export * from "./Format";
-export * from "./expandFatArrows";
-export * from "./GlobalCacheIdentifier";
-export * from "./innerTextTrim";
-export * from "./isDigit";
-export * from "./isPromise";
-export * from "./isTouchDevice";
-export * from "./KeyCode";
-export * from "./parseStyle";
-export * from "./quote";
-export * from "./scrollElementIntoView";
-export * from "./shallowEquals";
-export * from "./Timing";
-export * from "./date/index";
-export * from "./color/index";
-export * from "./getVendorPrefix";
-export * from "./eventCallbacks";
-export * from "./getSearchQueryPredicate";
-export * from "./escapeSpecialRegexCharacters";
-export * from "./browserSupportsPassiveEventHandlers";
-export * from "./isTouchEvent";
-export * from "./debounce";
-export * from "./throttle";
-export * from "./SubscriberList";
-export * from "./findScrollableParent";
-export * from "./getScrollerBoundingClientRect";
-export * from "./isNonEmptyArray";
-export * from "./isArray";
-export * from "./isObject";
-export * from "./isNumber";
-export * from "./isFunction";
-export * from "./isString";
-export * from "./isUndefined";
-export * from "./isDefined";
-export * from "./routeAppend";
-export * from "./reverseSlice";
-export * from "./getTopLevelBoundingClientRect";
-export * from "./getParentFrameBoundingClientRect";
-export * from "./getActiveElement";
-export * from "./Component";
-export * from "./onIdleCallback";
-export * from "./validatedDebounce";
-export * from "./addEventListenerWithOptions";
-export * from "./coalesce";
-export * from "./dummyCallback";
-export * from "./calculateNaturalElementHeight";
-export * from "./isTextInputElement";
-export * from "./capitalize";
-export * from "./isValidIdentifierName";
-
-export * from "./TraversalStack";
diff --git a/packages/cx/src/util/index.ts b/packages/cx/src/util/index.ts
new file mode 100644
index 000000000..0026c9790
--- /dev/null
+++ b/packages/cx/src/util/index.ts
@@ -0,0 +1,55 @@
+export * from "./Console";
+export * from "./Debug";
+export * from "./DOM";
+export * from "./Format";
+export * from "./expandFatArrows";
+export * from "./GlobalCacheIdentifier";
+export * from "./innerTextTrim";
+export * from "./isDigit";
+export * from "./isPromise";
+export * from "./isTouchDevice";
+export * from "./KeyCode";
+export * from "./parseStyle";
+export * from "./quote";
+export * from "./scrollElementIntoView";
+export * from "./shallowEquals";
+export * from "./Timing";
+export * from "./date/index";
+export * from "./color/index";
+export * from "./getVendorPrefix";
+export * from "./eventCallbacks";
+export * from "./getSearchQueryPredicate";
+export * from "./escapeSpecialRegexCharacters";
+export * from "./browserSupportsPassiveEventHandlers";
+export * from "./isTouchEvent";
+export * from "./debounce";
+export * from "./throttle";
+export * from "./SubscriberList";
+export * from "./findScrollableParent";
+export * from "./getScrollerBoundingClientRect";
+export * from "./isNonEmptyArray";
+export * from "./isArray";
+export * from "./isObject";
+export * from "./isNumber";
+export * from "./isFunction";
+export * from "./isString";
+export * from "./isUndefined";
+export * from "./isDefined";
+export * from "./routeAppend";
+export * from "./reverseSlice";
+export * from "./getTopLevelBoundingClientRect";
+export * from "./getParentFrameBoundingClientRect";
+export * from "./getActiveElement";
+export * from "./Component";
+export * from "./onIdleCallback";
+export * from "./validatedDebounce";
+export * from "./addEventListenerWithOptions";
+export * from "./coalesce";
+export * from "./dummyCallback";
+export * from "./calculateNaturalElementHeight";
+export * from "./isTextInputElement";
+export * from "./capitalize";
+export * from "./isValidIdentifierName";
+export * from "./isDataRecord";
+export * from "./TraversalStack";
+export * from "./hasKey"
diff --git a/packages/cx/src/util/innerTextTrim.d.ts b/packages/cx/src/util/innerTextTrim.d.ts
deleted file mode 100644
index 20c544565..000000000
--- a/packages/cx/src/util/innerTextTrim.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-
-/**
- * 
- * @param str 
- * @return {string}
- */
-export function innerTextTrim(str: string): string;
\ No newline at end of file
diff --git a/packages/cx/src/util/innerTextTrim.js b/packages/cx/src/util/innerTextTrim.js
deleted file mode 100644
index 155a7b998..000000000
--- a/packages/cx/src/util/innerTextTrim.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export function innerTextTrim(str) {
-   str = str.replace(/\t/g, '');
-   str = str.replace(/(\s*[\r\n]\s*)/g, '');
-   return str;
-}
diff --git a/packages/cx/src/util/innerTextTrim.ts b/packages/cx/src/util/innerTextTrim.ts
new file mode 100644
index 000000000..ae5fa6f51
--- /dev/null
+++ b/packages/cx/src/util/innerTextTrim.ts
@@ -0,0 +1,10 @@
+/**
+ *
+ * @param str
+ * @return {string}
+ */
+export function innerTextTrim(str: string): string {
+   str = str.replace(/\t/g, "");
+   str = str.replace(/(\s*[\r\n]\s*)/g, " ");
+   return str;
+}
diff --git a/packages/cx/src/util/isArray.d.ts b/packages/cx/src/util/isArray.d.ts
deleted file mode 100644
index 3e7e0ee51..000000000
--- a/packages/cx/src/util/isArray.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isArray<T>(x: T): x is Array<T>;
diff --git a/packages/cx/src/util/isArray.js b/packages/cx/src/util/isArray.js
deleted file mode 100644
index eaf9764d7..000000000
--- a/packages/cx/src/util/isArray.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isArray(a) {
-   return Array.isArray(a);
-}
diff --git a/packages/cx/src/util/isArray.ts b/packages/cx/src/util/isArray.ts
new file mode 100644
index 000000000..39bdf8b8a
--- /dev/null
+++ b/packages/cx/src/util/isArray.ts
@@ -0,0 +1,3 @@
+export function isArray<T = unknown>(x: unknown): x is T[] {
+   return Array.isArray(x);
+}
diff --git a/packages/cx/src/util/isDataRecord.ts b/packages/cx/src/util/isDataRecord.ts
new file mode 100644
index 000000000..d63be46fe
--- /dev/null
+++ b/packages/cx/src/util/isDataRecord.ts
@@ -0,0 +1,5 @@
+import { isObject } from "./isObject";
+
+export function isDataRecord(v: unknown): v is Record<string, any> {
+   return isObject(v);
+}
diff --git a/packages/cx/src/util/isDefined.d.ts b/packages/cx/src/util/isDefined.d.ts
deleted file mode 100644
index c9b5fa7e0..000000000
--- a/packages/cx/src/util/isDefined.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isDefined(x: any): boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/isDefined.js b/packages/cx/src/util/isDefined.js
deleted file mode 100644
index 256986ea5..000000000
--- a/packages/cx/src/util/isDefined.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isDefined(v) {
-   return v !== undefined;
-}
diff --git a/packages/cx/src/util/isDefined.ts b/packages/cx/src/util/isDefined.ts
new file mode 100644
index 000000000..fb015f348
--- /dev/null
+++ b/packages/cx/src/util/isDefined.ts
@@ -0,0 +1,3 @@
+export function isDefined<T>(x: T | undefined): x is T {
+   return x !== undefined;
+}
diff --git a/packages/cx/src/util/isDigit.d.ts b/packages/cx/src/util/isDigit.d.ts
deleted file mode 100644
index d1e6431b8..000000000
--- a/packages/cx/src/util/isDigit.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-
-/**
- * 
- * @param x
- * @returns {boolean} 
- */
-export function isDigit(x: any): boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/isDigit.js b/packages/cx/src/util/isDigit.js
deleted file mode 100644
index 73c3cd267..000000000
--- a/packages/cx/src/util/isDigit.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isDigit(x) {
-   return x >= '0' && x <= '9';
-}
diff --git a/packages/cx/src/util/isDigit.ts b/packages/cx/src/util/isDigit.ts
new file mode 100644
index 000000000..364cb68e5
--- /dev/null
+++ b/packages/cx/src/util/isDigit.ts
@@ -0,0 +1,8 @@
+/**
+ *
+ * @param x
+ * @returns {boolean}
+ */
+export function isDigit(x: any): boolean {
+   return x >= '0' && x <= '9';
+}
diff --git a/packages/cx/src/util/isFunction.d.ts b/packages/cx/src/util/isFunction.d.ts
deleted file mode 100644
index b90fa2bb3..000000000
--- a/packages/cx/src/util/isFunction.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isFunction(f: any): f is Function;
diff --git a/packages/cx/src/util/isFunction.js b/packages/cx/src/util/isFunction.js
deleted file mode 100644
index 93a759879..000000000
--- a/packages/cx/src/util/isFunction.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isFunction(f) {
-   return typeof f === 'function';
-}
diff --git a/packages/cx/src/util/isFunction.ts b/packages/cx/src/util/isFunction.ts
new file mode 100644
index 000000000..273776f34
--- /dev/null
+++ b/packages/cx/src/util/isFunction.ts
@@ -0,0 +1,3 @@
+export function isFunction(f: any): f is Function {
+   return typeof f === 'function';
+}
diff --git a/packages/cx/src/util/isNonEmptyArray.d.ts b/packages/cx/src/util/isNonEmptyArray.d.ts
deleted file mode 100644
index 65e0b306f..000000000
--- a/packages/cx/src/util/isNonEmptyArray.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isNonEmptyArray(x: any): x is [any, ...any];
diff --git a/packages/cx/src/util/isNonEmptyArray.js b/packages/cx/src/util/isNonEmptyArray.js
deleted file mode 100644
index db2512ea8..000000000
--- a/packages/cx/src/util/isNonEmptyArray.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isNonEmptyArray(x) {
-   return Array.isArray(x) && x.length > 0;
-}
diff --git a/packages/cx/src/util/isNonEmptyArray.ts b/packages/cx/src/util/isNonEmptyArray.ts
new file mode 100644
index 000000000..3406ab059
--- /dev/null
+++ b/packages/cx/src/util/isNonEmptyArray.ts
@@ -0,0 +1,3 @@
+export function isNonEmptyArray(x: any): x is [any, ...any] {
+   return Array.isArray(x) && x.length > 0;
+}
diff --git a/packages/cx/src/util/isNumber.d.ts b/packages/cx/src/util/isNumber.d.ts
deleted file mode 100644
index 13e3cea91..000000000
--- a/packages/cx/src/util/isNumber.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isNumber(x: any): x is number;
diff --git a/packages/cx/src/util/isNumber.js b/packages/cx/src/util/isNumber.js
deleted file mode 100644
index d78bf301f..000000000
--- a/packages/cx/src/util/isNumber.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isNumber(n) {
-   return typeof n === 'number';
-}
diff --git a/packages/cx/src/util/isNumber.ts b/packages/cx/src/util/isNumber.ts
new file mode 100644
index 000000000..9626cd7c8
--- /dev/null
+++ b/packages/cx/src/util/isNumber.ts
@@ -0,0 +1,3 @@
+export function isNumber(x: any): x is number {
+   return typeof x === 'number';
+}
diff --git a/packages/cx/src/util/isObject.d.ts b/packages/cx/src/util/isObject.d.ts
deleted file mode 100644
index c47eb13ff..000000000
--- a/packages/cx/src/util/isObject.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isObject(x: any): x is object;
diff --git a/packages/cx/src/util/isObject.js b/packages/cx/src/util/isObject.js
deleted file mode 100644
index 561ab9058..000000000
--- a/packages/cx/src/util/isObject.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isObject(o) {
-   return o !== null && typeof o === 'object';
-}
diff --git a/packages/cx/src/util/isObject.ts b/packages/cx/src/util/isObject.ts
new file mode 100644
index 000000000..60504b354
--- /dev/null
+++ b/packages/cx/src/util/isObject.ts
@@ -0,0 +1,3 @@
+export function isObject(o: unknown): o is object {
+   return o !== null && typeof o === 'object';
+}
diff --git a/packages/cx/src/util/isPromise.d.ts b/packages/cx/src/util/isPromise.d.ts
deleted file mode 100644
index 40ee77253..000000000
--- a/packages/cx/src/util/isPromise.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isPromise(x: any): x is Promise;
diff --git a/packages/cx/src/util/isPromise.js b/packages/cx/src/util/isPromise.js
deleted file mode 100644
index 54183fd16..000000000
--- a/packages/cx/src/util/isPromise.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {isFunction} from './isFunction';
-import {isObject} from './isObject';
-
-export function isPromise(x) {
-   return isObject(x) && isFunction(x.then);
-}
diff --git a/packages/cx/src/util/isPromise.ts b/packages/cx/src/util/isPromise.ts
new file mode 100644
index 000000000..503318244
--- /dev/null
+++ b/packages/cx/src/util/isPromise.ts
@@ -0,0 +1,6 @@
+import { isFunction } from "./isFunction";
+import { isObject } from "./isObject";
+
+export function isPromise(x: unknown): x is Promise<any> {
+   return isObject(x) && isFunction((x as any)["then"]);
+}
diff --git a/packages/cx/src/util/isString.d.ts b/packages/cx/src/util/isString.d.ts
deleted file mode 100644
index 4fed54866..000000000
--- a/packages/cx/src/util/isString.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isString(x: any): x is string;
diff --git a/packages/cx/src/util/isString.js b/packages/cx/src/util/isString.js
deleted file mode 100644
index 6db1d7807..000000000
--- a/packages/cx/src/util/isString.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isString(s) {
-   return typeof s === 'string';
-}
diff --git a/packages/cx/src/util/isString.ts b/packages/cx/src/util/isString.ts
new file mode 100644
index 000000000..538767911
--- /dev/null
+++ b/packages/cx/src/util/isString.ts
@@ -0,0 +1,3 @@
+export function isString(x: unknown): x is string {
+   return typeof x === "string";
+}
diff --git a/packages/cx/src/util/isTextInputElement.d.ts b/packages/cx/src/util/isTextInputElement.d.ts
deleted file mode 100644
index 4674832c3..000000000
--- a/packages/cx/src/util/isTextInputElement.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isTextInputElement(el: Element): boolean;
diff --git a/packages/cx/src/util/isTextInputElement.js b/packages/cx/src/util/isTextInputElement.js
deleted file mode 100644
index d133b4648..000000000
--- a/packages/cx/src/util/isTextInputElement.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isTextInputElement(el) {
-   return el.tagName == 'INPUT' || el.tagName == 'TEXTAREA';
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/isTextInputElement.ts b/packages/cx/src/util/isTextInputElement.ts
new file mode 100644
index 000000000..6eed2c995
--- /dev/null
+++ b/packages/cx/src/util/isTextInputElement.ts
@@ -0,0 +1,3 @@
+export function isTextInputElement(el: Element): boolean {
+   return el.tagName == 'INPUT' || el.tagName == 'TEXTAREA';
+}
\ No newline at end of file
diff --git a/packages/cx/src/util/isTouchDevice.d.ts b/packages/cx/src/util/isTouchDevice.d.ts
deleted file mode 100644
index 92e3d3a6b..000000000
--- a/packages/cx/src/util/isTouchDevice.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-
-export function isTouchDevice(): boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/isTouchDevice.js b/packages/cx/src/util/isTouchDevice.js
deleted file mode 100644
index 80517ab77..000000000
--- a/packages/cx/src/util/isTouchDevice.js
+++ /dev/null
@@ -1,7 +0,0 @@
-let isTouch = null;
-
-export function isTouchDevice() {
-   if (isTouch == null)
-      isTouch = typeof window != 'undefined' && 'ontouchstart' in window;
-   return isTouch;
-}
diff --git a/packages/cx/src/util/isTouchDevice.ts b/packages/cx/src/util/isTouchDevice.ts
new file mode 100644
index 000000000..6941fbc73
--- /dev/null
+++ b/packages/cx/src/util/isTouchDevice.ts
@@ -0,0 +1,7 @@
+let isTouch: boolean | null = null;
+
+export function isTouchDevice(): boolean {
+   if (isTouch == null)
+      isTouch = typeof window != 'undefined' && 'ontouchstart' in window;
+   return isTouch;
+}
diff --git a/packages/cx/src/util/isTouchEvent.d.ts b/packages/cx/src/util/isTouchEvent.d.ts
deleted file mode 100644
index 353200464..000000000
--- a/packages/cx/src/util/isTouchEvent.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-
-export function enableTouchEventDetection();
-
-export function isTouchEvent(): boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/isTouchEvent.js b/packages/cx/src/util/isTouchEvent.js
deleted file mode 100644
index 49b6c0fd9..000000000
--- a/packages/cx/src/util/isTouchEvent.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { browserSupportsPassiveEventHandlers } from "./browserSupportsPassiveEventHandlers";
-import { isTouchDevice } from "./isTouchDevice";
-
-// This is primarily used for tooltips which behave differently on touch.
-// For example, tooltips are commonly toggled on touch or disabled completely.
-// To detect if mousemove is actually caused by a touch event, we check
-// if device supports touch events and when the last touch event happened.
-// Touch detection might cause bad scroll performance on devices which do not
-// support passive event listeners, and in that case detection relies only on
-// presence of touch events, without inspection of each event.
-
-let insideTouchEvent = 0;
-let lastTouchEvent = 0;
-let isTouchDetectionEnabled = false;
-
-export function enableTouchEventDetection() {
-   if (isTouchDevice() && !isTouchDetectionEnabled) {
-      let options = true; //capture
-
-      if (browserSupportsPassiveEventHandlers())
-         options = {
-            passive: true,
-            capture: true,
-         };
-
-      document.addEventListener(
-         "touchstart",
-         () => {
-            insideTouchEvent++;
-            //console.log('TOUCHSTART');
-            lastTouchEvent = Date.now();
-         },
-         options
-      );
-
-      document.addEventListener(
-         "touchmove",
-         () => {
-            //console.log('TOUCHMOVE');
-            lastTouchEvent = Date.now();
-         },
-         options
-      );
-
-      document.addEventListener(
-         "touchend",
-         () => {
-            insideTouchEvent--;
-            lastTouchEvent = Date.now();
-            //console.log('TOUCHEND');
-         },
-         options
-      );
-
-      isTouchDetectionEnabled = true;
-   }
-}
-
-export function isTouchEvent() {
-   return isTouchDevice() && (!isTouchDetectionEnabled || Date.now() - lastTouchEvent < 1000);
-}
-
-//enable touch event detection if there is no performance penalty on scrolling
-if (isTouchDevice() && browserSupportsPassiveEventHandlers()) enableTouchEventDetection();
diff --git a/packages/cx/src/util/isTouchEvent.ts b/packages/cx/src/util/isTouchEvent.ts
new file mode 100644
index 000000000..f704613ca
--- /dev/null
+++ b/packages/cx/src/util/isTouchEvent.ts
@@ -0,0 +1,64 @@
+import { browserSupportsPassiveEventHandlers } from "./browserSupportsPassiveEventHandlers";
+import { isTouchDevice } from "./isTouchDevice";
+
+// This is primarily used for tooltips which behave differently on touch.
+// For example, tooltips are commonly toggled on touch or disabled completely.
+// To detect if mousemove is actually caused by a touch event, we check
+// if device supports touch events and when the last touch event happened.
+// Touch detection might cause bad scroll performance on devices which do not
+// support passive event listeners, and in that case detection relies only on
+// presence of touch events, without inspection of each event.
+
+let insideTouchEvent = 0;
+let lastTouchEvent = 0;
+let isTouchDetectionEnabled = false;
+
+export function enableTouchEventDetection(): void {
+   if (isTouchDevice() && !isTouchDetectionEnabled) {
+      let options: boolean | AddEventListenerOptions = true; //capture
+
+      if (browserSupportsPassiveEventHandlers())
+         options = {
+            passive: true,
+            capture: true,
+         };
+
+      document.addEventListener(
+         "touchstart",
+         () => {
+            insideTouchEvent++;
+            //console.log('TOUCHSTART');
+            lastTouchEvent = Date.now();
+         },
+         options,
+      );
+
+      document.addEventListener(
+         "touchmove",
+         () => {
+            //console.log('TOUCHMOVE');
+            lastTouchEvent = Date.now();
+         },
+         options,
+      );
+
+      document.addEventListener(
+         "touchend",
+         () => {
+            insideTouchEvent--;
+            lastTouchEvent = Date.now();
+            //console.log('TOUCHEND');
+         },
+         options,
+      );
+
+      isTouchDetectionEnabled = true;
+   }
+}
+
+export function isTouchEvent(): boolean {
+   return isTouchDevice() && (!isTouchDetectionEnabled || Date.now() - lastTouchEvent < 1000);
+}
+
+//enable touch event detection if there is no performance penalty on scrolling
+if (isTouchDevice() && browserSupportsPassiveEventHandlers()) enableTouchEventDetection();
diff --git a/packages/cx/src/util/isUndefined.d.ts b/packages/cx/src/util/isUndefined.d.ts
deleted file mode 100644
index d3f5f517d..000000000
--- a/packages/cx/src/util/isUndefined.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isUndefined(x: any): x is undefined;
diff --git a/packages/cx/src/util/isUndefined.js b/packages/cx/src/util/isUndefined.js
deleted file mode 100644
index b6d35a7bb..000000000
--- a/packages/cx/src/util/isUndefined.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isUndefined(v) {
-   return v === undefined;
-}
diff --git a/packages/cx/src/util/isUndefined.ts b/packages/cx/src/util/isUndefined.ts
new file mode 100644
index 000000000..aa4ba68f0
--- /dev/null
+++ b/packages/cx/src/util/isUndefined.ts
@@ -0,0 +1,3 @@
+export function isUndefined(x: any): x is undefined {
+   return x === undefined;
+}
diff --git a/packages/cx/src/util/isValidIdentifierName.d.ts b/packages/cx/src/util/isValidIdentifierName.d.ts
deleted file mode 100644
index 8dcfc12c7..000000000
--- a/packages/cx/src/util/isValidIdentifierName.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function isValidIdentifierName(name: string): boolean;
diff --git a/packages/cx/src/util/isValidIdentifierName.js b/packages/cx/src/util/isValidIdentifierName.js
deleted file mode 100644
index af6db1bf8..000000000
--- a/packages/cx/src/util/isValidIdentifierName.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const regex = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
-
-export function isValidIdentifierName(name) {
-   return regex.test(name);
-}
diff --git a/packages/cx/src/util/isValidIdentifierName.spec.js b/packages/cx/src/util/isValidIdentifierName.spec.ts
similarity index 100%
rename from packages/cx/src/util/isValidIdentifierName.spec.js
rename to packages/cx/src/util/isValidIdentifierName.spec.ts
diff --git a/packages/cx/src/util/isValidIdentifierName.ts b/packages/cx/src/util/isValidIdentifierName.ts
new file mode 100644
index 000000000..2bebe1489
--- /dev/null
+++ b/packages/cx/src/util/isValidIdentifierName.ts
@@ -0,0 +1,5 @@
+const regex = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
+
+export function isValidIdentifierName(name: string): boolean {
+   return regex.test(name);
+}
diff --git a/packages/cx/src/util/onIdleCallback.d.ts b/packages/cx/src/util/onIdleCallback.d.ts
deleted file mode 100644
index a76484576..000000000
--- a/packages/cx/src/util/onIdleCallback.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function onIdleCallback(callback: (idleDeadline: any) => any, options?: any) : () => void;
\ No newline at end of file
diff --git a/packages/cx/src/util/onIdleCallback.js b/packages/cx/src/util/onIdleCallback.js
deleted file mode 100644
index 9a4057756..000000000
--- a/packages/cx/src/util/onIdleCallback.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export function onIdleCallback(callback, options) {
-   let token = null;
-   if (typeof requestIdleCallback == "function")
-      token = requestIdleCallback(callback, options);
-   else
-      token = setTimeout(callback, 1);
-
-   return () => {
-      if (typeof cancelIdleCallback == "function")
-         cancelIdleCallback(token);
-      else
-         clearTimeout(token);
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/onIdleCallback.ts b/packages/cx/src/util/onIdleCallback.ts
new file mode 100644
index 000000000..5f9a521e0
--- /dev/null
+++ b/packages/cx/src/util/onIdleCallback.ts
@@ -0,0 +1,10 @@
+export function onIdleCallback(callback: (idleDeadline: any) => any, options?: any): () => void {
+   let token: any = null;
+   if (typeof requestIdleCallback == "function") token = requestIdleCallback(callback, options);
+   else token = setTimeout(callback, 1);
+
+   return () => {
+      if (typeof cancelIdleCallback == "function") cancelIdleCallback(token);
+      else clearTimeout(token);
+   };
+}
diff --git a/packages/cx/src/util/parseStyle.d.ts b/packages/cx/src/util/parseStyle.d.ts
deleted file mode 100644
index d548dc536..000000000
--- a/packages/cx/src/util/parseStyle.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as Cx from '../core';
-
-export function parseStyle(str: string) : Cx.Config;
-export function parseStyle(str: any) : any;
\ No newline at end of file
diff --git a/packages/cx/src/util/parseStyle.js b/packages/cx/src/util/parseStyle.js
deleted file mode 100644
index eedec37d1..000000000
--- a/packages/cx/src/util/parseStyle.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export function parseStyle(str) {
-   if (typeof str != "string") return str;
-
-   var style = {},
-      parts = str.split(";");
-
-   for (var i = 0; i < parts.length; i++) {
-      let part = parts[i];
-
-      let colonIndex = part.indexOf(":");
-      if (colonIndex == -1) continue;
-
-      let name = part.substring(0, colonIndex).trim();
-      let value = part.substring(colonIndex + 1).trim();
-
-      //avoid css variables
-      if (!name.startsWith("--")) {
-         name = name
-            .split("-")
-            .map((p, i) => (i == 0 ? p : p[0].toUpperCase() + p.substring(1)))
-            .join("");
-      }
-      style[name] = value;
-   }
-
-   return style;
-}
diff --git a/packages/cx/src/util/parseStyle.ts b/packages/cx/src/util/parseStyle.ts
new file mode 100644
index 000000000..2bd309195
--- /dev/null
+++ b/packages/cx/src/util/parseStyle.ts
@@ -0,0 +1,29 @@
+export function parseStyle(str: string): Record<string, string>;
+export function parseStyle(str: any): any;
+export function parseStyle(str: any): any {
+   if (typeof str != "string") return str;
+
+   var style: Record<string, string> = {},
+      parts = str.split(";");
+
+   for (var i = 0; i < parts.length; i++) {
+      let part = parts[i];
+
+      let colonIndex = part.indexOf(":");
+      if (colonIndex == -1) continue;
+
+      let name = part.substring(0, colonIndex).trim();
+      let value = part.substring(colonIndex + 1).trim();
+
+      //avoid css variables
+      if (!name.startsWith("--")) {
+         name = name
+            .split("-")
+            .map((p, i) => (i == 0 ? p : p[0].toUpperCase() + p.substring(1)))
+            .join("");
+      }
+      style[name] = value;
+   }
+
+   return style;
+}
diff --git a/packages/cx/src/util/quote.d.ts b/packages/cx/src/util/quote.d.ts
deleted file mode 100644
index 9fc931ae0..000000000
--- a/packages/cx/src/util/quote.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-
-export function quoteStr(str: string): string;
-export function quoteStr(str: null): null;
\ No newline at end of file
diff --git a/packages/cx/src/util/quote.js b/packages/cx/src/util/quote.js
deleted file mode 100644
index d74b8e6f1..000000000
--- a/packages/cx/src/util/quote.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export function quoteStr(str) {
-   if (str == null) return str;
-   return JSON.stringify(str);
-}
diff --git a/packages/cx/src/util/quote.ts b/packages/cx/src/util/quote.ts
new file mode 100644
index 000000000..00ecd6e88
--- /dev/null
+++ b/packages/cx/src/util/quote.ts
@@ -0,0 +1,6 @@
+export function quoteStr(str: string): string;
+export function quoteStr(str: null): null;
+export function quoteStr(str: string | null): string | null {
+   if (str == null) return str;
+   return JSON.stringify(str);
+}
diff --git a/packages/cx/src/util/reverseSlice.d.ts b/packages/cx/src/util/reverseSlice.d.ts
deleted file mode 100644
index 7ae13a40a..000000000
--- a/packages/cx/src/util/reverseSlice.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function reverseSlice(array: any[], start: number);
\ No newline at end of file
diff --git a/packages/cx/src/util/reverseSlice.js b/packages/cx/src/util/reverseSlice.js
deleted file mode 100644
index 9bd45f00a..000000000
--- a/packages/cx/src/util/reverseSlice.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export function reverseSlice(array, start) {
-   let last = array.length - 1;
-   while (start < last) {
-      let x = array[start];
-      array[start] = array[last];
-      array[last] = x;
-      start++;
-      last--;
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/reverseSlice.ts b/packages/cx/src/util/reverseSlice.ts
new file mode 100644
index 000000000..4318947da
--- /dev/null
+++ b/packages/cx/src/util/reverseSlice.ts
@@ -0,0 +1,10 @@
+export function reverseSlice(array: any[], start: number): void {
+   let last = array.length - 1;
+   while (start < last) {
+      let x = array[start];
+      array[start] = array[last];
+      array[last] = x;
+      start++;
+      last--;
+   }
+}
\ No newline at end of file
diff --git a/packages/cx/src/util/routeAppend.d.ts b/packages/cx/src/util/routeAppend.d.ts
deleted file mode 100644
index 7c9fe9689..000000000
--- a/packages/cx/src/util/routeAppend.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function routeAppend(base: string, path: string): string;
\ No newline at end of file
diff --git a/packages/cx/src/util/routeAppend.js b/packages/cx/src/util/routeAppend.js
deleted file mode 100644
index a637b394e..000000000
--- a/packages/cx/src/util/routeAppend.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export function routeAppend(base, path) {
-   let result = base;
-   if (path) {
-      if (path[0] == '/') {
-         if (result[result.length - 1] == '/')
-            result += path.substring(1);
-         else
-            result += path;
-      }
-      else if (result[result.length - 1] == '/')
-         result += path;
-      else
-         result += '/' + path;
-   }
-   return result;
-}
\ No newline at end of file
diff --git a/packages/cx/src/util/routeAppend.spec.js b/packages/cx/src/util/routeAppend.spec.ts
similarity index 100%
rename from packages/cx/src/util/routeAppend.spec.js
rename to packages/cx/src/util/routeAppend.spec.ts
diff --git a/packages/cx/src/util/routeAppend.ts b/packages/cx/src/util/routeAppend.ts
new file mode 100644
index 000000000..b2a25d3b5
--- /dev/null
+++ b/packages/cx/src/util/routeAppend.ts
@@ -0,0 +1,16 @@
+export function routeAppend(base: string, path: string): string {
+   let result = base;
+   if (path) {
+      if (path[0] == '/') {
+         if (result[result.length - 1] == '/')
+            result += path.substring(1);
+         else
+            result += path;
+      }
+      else if (result[result.length - 1] == '/')
+         result += path;
+      else
+         result += '/' + path;
+   }
+   return result;
+}
\ No newline at end of file
diff --git a/packages/cx/src/util/scrollElementIntoView.d.ts b/packages/cx/src/util/scrollElementIntoView.d.ts
deleted file mode 100644
index b8c8db2a3..000000000
--- a/packages/cx/src/util/scrollElementIntoView.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function scrollElementIntoView(
-   el: Element,
-   vertical?: boolean,
-   horizontal?: boolean,
-   inflate?: number,
-   scrollContainer?: HTMLElement
-): void;
diff --git a/packages/cx/src/util/scrollElementIntoView.js b/packages/cx/src/util/scrollElementIntoView.js
deleted file mode 100644
index c47ba086f..000000000
--- a/packages/cx/src/util/scrollElementIntoView.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { findScrollableParent } from "./findScrollableParent";
-import { getScrollerBoundingClientRect } from "./getScrollerBoundingClientRect";
-
-export function scrollElementIntoView(el, vertical = true, horizontal = false, inflate = 0, scrollContainer = null) {
-   if (horizontal) {
-      let parentEl = scrollContainer || findScrollableParent(el, true);
-      if (parentEl) {
-         let pr = getScrollerBoundingClientRect(parentEl);
-         let er = el.getBoundingClientRect();
-         let scrollbarWidth = parentEl.offsetWidth - parentEl.clientWidth;
-
-         if (er.right + inflate > pr.right - scrollbarWidth)
-            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.right + inflate - pr.right + scrollbarWidth);
-
-         if (er.left - inflate < pr.left)
-            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.left - inflate - pr.left);
-      }
-   }
-
-   if (vertical) {
-      let parentEl = scrollContainer || findScrollableParent(el);
-      if (parentEl) {
-         let pr = getScrollerBoundingClientRect(parentEl);
-         let er = el.getBoundingClientRect();
-         let scrollbarHeight = parentEl.offsetHeight - parentEl.clientHeight;
-
-         if (er.bottom + inflate > pr.bottom - scrollbarHeight)
-            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.bottom + inflate - pr.bottom + scrollbarHeight);
-
-         if (er.top - inflate < pr.top)
-            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.top - inflate - pr.top);
-      }
-   }
-}
diff --git a/packages/cx/src/util/scrollElementIntoView.ts b/packages/cx/src/util/scrollElementIntoView.ts
new file mode 100644
index 000000000..c4637bbff
--- /dev/null
+++ b/packages/cx/src/util/scrollElementIntoView.ts
@@ -0,0 +1,40 @@
+import { findScrollableParent } from "./findScrollableParent";
+import { getScrollerBoundingClientRect } from "./getScrollerBoundingClientRect";
+
+export function scrollElementIntoView(
+   el: Element,
+   vertical: boolean = true,
+   horizontal: boolean = false,
+   inflate: number = 0,
+   scrollContainer: HTMLElement | null = null
+): void {
+   if (horizontal) {
+      let parentEl = scrollContainer || findScrollableParent(el, true);
+      if (parentEl) {
+         let pr = getScrollerBoundingClientRect(parentEl);
+         let er = el.getBoundingClientRect();
+         let scrollbarWidth = parentEl.offsetWidth - parentEl.clientWidth;
+
+         if (er.right + inflate > pr.right - scrollbarWidth)
+            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.right + inflate - pr.right + scrollbarWidth);
+
+         if (er.left - inflate < pr.left)
+            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.left - inflate - pr.left);
+      }
+   }
+
+   if (vertical) {
+      let parentEl = scrollContainer || findScrollableParent(el);
+      if (parentEl) {
+         let pr = getScrollerBoundingClientRect(parentEl);
+         let er = el.getBoundingClientRect();
+         let scrollbarHeight = parentEl.offsetHeight - parentEl.clientHeight;
+
+         if (er.bottom + inflate > pr.bottom - scrollbarHeight)
+            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.bottom + inflate - pr.bottom + scrollbarHeight);
+
+         if (er.top - inflate < pr.top)
+            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.top - inflate - pr.top);
+      }
+   }
+}
diff --git a/packages/cx/src/util/scss/add-rules.scss b/packages/cx/src/util/scss/add-rules.scss
index 6174ccec1..a5c036b14 100644
--- a/packages/cx/src/util/scss/add-rules.scss
+++ b/packages/cx/src/util/scss/add-rules.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-add-rules($styles) {
    @each $rule, $value in $styles {
       #{$rule}: $value;
@@ -5,7 +7,7 @@
 }
 
 @mixin cx-add-state-rules($state-style-map, $key) {
-   @include cx-add-rules(map-get($state-style-map, $key));
+   @include cx-add-rules(map.get($state-style-map, $key));
 }
 
 @function cx-merge-state-style-maps($state-style-map, $override-style-map) {
@@ -13,11 +15,11 @@
 
    @if ($override-style-map != null) {
       @each $key, $new-value in $override-style-map {
-         $old-value: map-get($state-style-map, $key);
+         $old-value: map.get($state-style-map, $key);
          @if ($old-value != null) {
-            $new-value: map-merge($old-value, $new-value);
+            $new-value: map.merge($old-value, $new-value);
          }
-         $result: map-merge(
+         $result: map.merge(
             $result,
             (
                $key: $new-value,
@@ -30,7 +32,7 @@
 }
 
 @function cx-get-state-rule($state-style-map, $key, $rule, $default: null) {
-   $result: map-get(map-get($state-style-map, $key), $rule);
+   $result: map.get(map.get($state-style-map, $key), $rule);
    @if ($result != null) {
       @return $result;
    }
diff --git a/packages/cx/src/util/scss/calc.scss b/packages/cx/src/util/scss/calc.scss
index 31d1e787b..dcb041297 100644
--- a/packages/cx/src/util/scss/calc.scss
+++ b/packages/cx/src/util/scss/calc.scss
@@ -1,19 +1,23 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+
 @function cx-calc($lengths...) {
    $units: ();
 
    @each $l in $lengths {
-      $unit: unit($l);
-      @if (map-has-key($units, $unit)) {
-         $nl: map-get($units, $unit) + $l;
-         $units: map-merge($units, ($unit: $nl))
+      $unit: math.unit($l);
+      @if (map.has-key($units, $unit)) {
+         $nl: map.get($units, $unit) + $l;
+         $units: map.merge($units, ($unit: $nl))
       } @else {
-         $units: map-merge($units, ($unit: $l))
+         $units: map.merge($units, ($unit: $l))
       }
    }
 
-   $keys: map-keys($units);
-   @if (length($keys) == 1) {
-      @return map-get($units, nth($keys, 1));
+   $keys: map.keys($units);
+   @if (list.length($keys) == 1) {
+      @return map.get($units, list.nth($keys, 1));
    }
 
    $calc: '';
diff --git a/packages/cx/src/util/scss/call-once.scss b/packages/cx/src/util/scss/call-once.scss
index 7c55ee6e9..ad4e1242a 100644
--- a/packages/cx/src/util/scss/call-once.scss
+++ b/packages/cx/src/util/scss/call-once.scss
@@ -1,11 +1,13 @@
+@use "sass:map";
+
 $cx-call-once-data: () !default;
 
 @function cx-call-once($name) {
-   $result: map_get($cx-call-once-data, $name);
-   $cx-call-once-data: map_merge($cx-call-once-data, ($name: true)) !global;
+   $result: map.get($cx-call-once-data, $name);
+   $cx-call-once-data: map.merge($cx-call-once-data, ($name: true)) !global;
    @return $result != true;
 }
 
 @function cx-called-once($name) {
-   @return map_get($cx-call-once-data, $name);
+   @return map.get($cx-call-once-data, $name);
 }
\ No newline at end of file
diff --git a/packages/cx/src/util/scss/clockwise.scss b/packages/cx/src/util/scss/clockwise.scss
index 54122365b..da85f0d5f 100644
--- a/packages/cx/src/util/scss/clockwise.scss
+++ b/packages/cx/src/util/scss/clockwise.scss
@@ -1,47 +1,49 @@
+@use "sass:list";
+
 @function cx-top($list) {
-   @if (length($list) > 0) {
-      @return nth($list, 1);
+   @if (list.length($list) > 0) {
+      @return list.nth($list, 1);
    }
    @return null;
 }
 
 @function cx-right($list) {
-   @if (length($list) == 1) {
-      @return nth($list, 1);
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
    }
-   @if (length($list) > 1) {
-      @return nth($list, 2);
+   @if (list.length($list) > 1) {
+      @return list.nth($list, 2);
    }
    @return null;
 }
 
 @function cx-bottom($list) {
-   @if (length($list) > 2) {
-      @return nth($list, 3);
+   @if (list.length($list) > 2) {
+      @return list.nth($list, 3);
    }
 
-   @if (length($list) >= 1) {
-      @return nth($list, 1);
+   @if (list.length($list) >= 1) {
+      @return list.nth($list, 1);
    }
 
    @return null;
 }
 
 @function cx-left($list) {
-   @if (length($list) == 1) {
-      @return nth($list, 1);
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
    }
 
-   @if (length($list) == 2) {
-      @return nth($list, 2);
+   @if (list.length($list) == 2) {
+      @return list.nth($list, 2);
    }
 
-   @if (length($list) == 3) {
-      @return nth($list, 2);
+   @if (list.length($list) == 3) {
+      @return list.nth($list, 2);
    }
 
-   @if (length($list) == 4) {
-      @return nth($list, 4);
+   @if (list.length($list) == 4) {
+      @return list.nth($list, 4);
    }
    @return null;
 }
diff --git a/packages/cx/src/util/scss/colors.scss b/packages/cx/src/util/scss/colors.scss
index f136e1224..489440556 100644
--- a/packages/cx/src/util/scss/colors.scss
+++ b/packages/cx/src/util/scss/colors.scss
@@ -1,8 +1,10 @@
 
+@use "sass:color";
+
 @function cx-whiten($color, $percentage) {
-   @return mix(white, $color, $percentage);
+   @return color.mix(white, $color, $percentage);
 }
 
 @function cx-blacken($color, $percentage) {
-   @return mix(black, $color, $percentage);
+   @return color.mix(black, $color, $percentage);
 }
\ No newline at end of file
diff --git a/packages/cx/src/util/scss/deep-get.scss b/packages/cx/src/util/scss/deep-get.scss
index d7eac9fc7..34f28a1cb 100644
--- a/packages/cx/src/util/scss/deep-get.scss
+++ b/packages/cx/src/util/scss/deep-get.scss
@@ -1,6 +1,8 @@
+@use "sass:map";
+
 @function cx-map-deep-get($map, $keys...){
    @each $key in $keys {
-      $map: map-get($map, $key)
+      $map: map.get($map, $key)
    }
    @if $map != null {
       @return $map
diff --git a/packages/cx/src/util/scss/deep-merge.scss b/packages/cx/src/util/scss/deep-merge.scss
index 6c2ea07cd..7733207e8 100644
--- a/packages/cx/src/util/scss/deep-merge.scss
+++ b/packages/cx/src/util/scss/deep-merge.scss
@@ -1,17 +1,20 @@
+@use "sass:map";
+@use "sass:meta";
+
 @function cx-deep-map-merge($parent-map, $child-map) {
 	$result: $parent-map;
 	@each $key, $value in $child-map {
 		//If the parent map does not have the child map's key, or
 		//If their type don't match, or
 		//If they are not both maps,
-		@if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
+		@if (not map.has-key($result, $key)) or (meta.type-of(map.get($result, $key)) != meta.type-of($value)) or (not (meta.type-of(map.get($result, $key)) == map and meta.type-of($value) == map)) {
 			//Simply add that key to the parent map.
-			$result: map-merge($result, ($key: $value));
+			$result: map.merge($result, ($key: $value));
 		}
 		@else {
 			//If they are both maps, we need another non-destructive merger.
 			//Recursive, yay!
-			$result: map-merge($result, ($key: cx-deep-map-merge(map-get($result, $key), $value)));
+			$result: map.merge($result, ($key: cx-deep-map-merge(map.get($result, $key), $value)));
 		}
 	}
 	@return $result;
diff --git a/packages/cx/src/util/scss/include.scss b/packages/cx/src/util/scss/include.scss
index 8f25b147e..d3ffe2689 100644
--- a/packages/cx/src/util/scss/include.scss
+++ b/packages/cx/src/util/scss/include.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "call-once";
 @import "colors";
 
@@ -10,9 +11,9 @@ $cx-dependencies: () !default;
 
 @function cx-should-include($name, $once: true) {
    @return (
-       (map-get($cx-excluded, $name) != true) and
+       (map.get($cx-excluded, $name) != true) and
        ($cx-include-all or
-       ($cx-used != null and map-get($cx-used, $name) == true))
+       ($cx-used != null and map.get($cx-used, $name) == true))
    )
    and ($once != true or cx-call-once($name));
 }
@@ -22,12 +23,12 @@ $cx-dependencies: () !default;
 }
 
 @function cx-widget($name) {
-   @if (map-get($cx-excluded, $name)) {
+   @if (map.get($cx-excluded, $name)) {
       @return 0;
    }
-   $cx-used: map_merge($cx-used, ($name: true)) !global;
+   $cx-used: map.merge($cx-used, ($name: true)) !global;
    $dummy: 1;
-   $deps: map-get($cx-dependencies, $name);
+   $deps: map.get($cx-dependencies, $name);
    @if ($deps == null) {
       @return 0;
    }
diff --git a/packages/cx/src/util/shallowEquals.d.ts b/packages/cx/src/util/shallowEquals.d.ts
deleted file mode 100644
index 9e7a0ed21..000000000
--- a/packages/cx/src/util/shallowEquals.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function shallowEquals(v1: any, v2: any) : boolean;
\ No newline at end of file
diff --git a/packages/cx/src/util/shallowEquals.js b/packages/cx/src/util/shallowEquals.js
deleted file mode 100644
index 3efe9bc66..000000000
--- a/packages/cx/src/util/shallowEquals.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import {isArray} from './isArray';
-
-export function shallowEquals(v1, v2) {
-
-   if (v1 === v2)
-      return true;
-
-   let t1 = typeof v1,
-      t2 = typeof v2,
-      k, i;
-
-   if (t1 != t2)
-      return false;
-
-   if (v1 == null || v2 == null) //this captures undefined too
-      return false;
-
-   if (t1 == 'object') {
-
-      if (isArray(v1)) {
-         if (!isArray(v2) || v1.length != v2.length)
-            return false;
-
-         for (i = 0; i < v1.length; i++)
-            if (!shallowEquals(v1[i], v2[i]))
-               return false;
-
-         return true;
-      }
-      else {
-         for (k in v1)
-            if (v1.hasOwnProperty(k) && (!v2.hasOwnProperty(k) || v1[k] !== v2[k]))
-               return false;
-
-         for (k in v2)
-            if (v2.hasOwnProperty(k) && (!v1.hasOwnProperty(k) || v1[k] !== v2[k]))
-               return false;
-
-         return true;
-      }
-   }
-   return v1 === v2;
-}
diff --git a/packages/cx/src/util/shallowEquals.ts b/packages/cx/src/util/shallowEquals.ts
new file mode 100644
index 000000000..9d3734cfc
--- /dev/null
+++ b/packages/cx/src/util/shallowEquals.ts
@@ -0,0 +1,43 @@
+import {isArray} from './isArray';
+
+export function shallowEquals(v1: any, v2: any): boolean {
+
+   if (v1 === v2)
+      return true;
+
+   let t1 = typeof v1,
+      t2 = typeof v2,
+      k, i;
+
+   if (t1 != t2)
+      return false;
+
+   if (v1 == null || v2 == null) //this captures undefined too
+      return false;
+
+   if (t1 == 'object') {
+
+      if (isArray(v1)) {
+         if (!isArray(v2) || v1.length != v2.length)
+            return false;
+
+         for (i = 0; i < v1.length; i++)
+            if (!shallowEquals(v1[i], v2[i]))
+               return false;
+
+         return true;
+      }
+      else {
+         for (k in v1)
+            if (v1.hasOwnProperty(k) && (!v2.hasOwnProperty(k) || v1[k] !== v2[k]))
+               return false;
+
+         for (k in v2)
+            if (v2.hasOwnProperty(k) && (!v1.hasOwnProperty(k) || v1[k] !== v2[k]))
+               return false;
+
+         return true;
+      }
+   }
+   return v1 === v2;
+}
diff --git a/packages/cx/src/util/test/createTestRenderer.tsx b/packages/cx/src/util/test/createTestRenderer.tsx
new file mode 100644
index 000000000..62ff551cd
--- /dev/null
+++ b/packages/cx/src/util/test/createTestRenderer.tsx
@@ -0,0 +1,19 @@
+/** @jsxImportSource react */
+import renderer from "react-test-renderer";
+import { act } from "react";
+import { Cx } from "../../ui/Cx";
+import { View } from "../../data/View";
+
+export async function createTestRenderer(store: View, widget: any) {
+   let result: renderer.ReactTestRenderer;
+   await act(async () => {
+      result = renderer.create(createTestWidget(store, widget));
+   });
+   return result!;
+}
+
+export function createTestWidget(store: View, widget: any) {
+   return <Cx widget={widget} store={store} subscribe immediate />;
+}
+
+export { act };
diff --git a/packages/cx/src/util/throttle.d.ts b/packages/cx/src/util/throttle.d.ts
deleted file mode 100644
index bfb10bf33..000000000
--- a/packages/cx/src/util/throttle.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Returns a function, that, after it is invoked, will trigger the `callback` function, 
- * after the `delay` amount of milliseconds has passed. During that time, all subsequent calls are
- * ignored. All arguments are passed to the `callback` function.
- * @param callback
- * @param delay - Delay in milliseconds. 
- * @returns {Function}
- */
-export function throttle(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void;
\ No newline at end of file
diff --git a/packages/cx/src/util/throttle.js b/packages/cx/src/util/throttle.js
deleted file mode 100644
index a3abb913c..000000000
--- a/packages/cx/src/util/throttle.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export function throttle(callback, delay) {
-   let timer, context, args;
-
-   return function () {
-      context = this;
-      args = arguments;
-
-      if (!timer)
-         timer = setTimeout(function () {
-            callback.apply(context, args);
-            timer = null;
-         }, delay);
-   };
-}
diff --git a/packages/cx/src/util/throttle.ts b/packages/cx/src/util/throttle.ts
new file mode 100644
index 000000000..47c74658b
--- /dev/null
+++ b/packages/cx/src/util/throttle.ts
@@ -0,0 +1,21 @@
+/**
+ * Returns a function, that, after it is invoked, will trigger the `callback` function,
+ * after the `delay` amount of milliseconds has passed. During that time, all subsequent calls are
+ * ignored. All arguments are passed to the `callback` function.
+ * @param callback
+ * @param delay - Delay in milliseconds.
+ * @returns {Function}
+ */
+export function throttle<T extends (...args: any[]) => void>(callback: T, delay: number): T {
+   let timer: ReturnType<typeof setTimeout> | null;
+
+   return function (this: any, ...args: any[]) {
+      const context = this;
+
+      if (!timer)
+         timer = setTimeout(function () {
+            callback.apply(context, args);
+            timer = null;
+         }, delay);
+   } as T;
+}
diff --git a/packages/cx/src/util/validatedDebounce.js b/packages/cx/src/util/validatedDebounce.js
deleted file mode 100644
index 3deb87030..000000000
--- a/packages/cx/src/util/validatedDebounce.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export function validatedDebounce(callback, valueGetter, delay) {
-   let timer;
-   let result = function (...args) {
-      clearTimeout(timer);
-      let prev = valueGetter();
-      timer = setTimeout(function () {
-         let now = valueGetter();
-         if (prev !== now) return;
-         callback(...args);
-      }, delay);
-   };
-
-   result.reset = function reset(...args) {
-      clearTimeout(timer);
-      callback(...args);
-   };
-
-   return result;
-}
diff --git a/packages/cx/src/util/validatedDebounce.ts b/packages/cx/src/util/validatedDebounce.ts
new file mode 100644
index 000000000..f89447c1b
--- /dev/null
+++ b/packages/cx/src/util/validatedDebounce.ts
@@ -0,0 +1,23 @@
+export function validatedDebounce<T extends (...args: any[]) => void>(
+   callback: T,
+   valueGetter: () => any,
+   delay: number
+): T & { reset: T } {
+   let timer: ReturnType<typeof setTimeout> | undefined;
+   let result = function (...args: Parameters<T>) {
+      clearTimeout(timer);
+      let prev = valueGetter();
+      timer = setTimeout(function () {
+         let now = valueGetter();
+         if (prev !== now) return;
+         callback(...args);
+      }, delay);
+   } as T & { reset: T };
+
+   result.reset = function reset(...args: Parameters<T>) {
+      clearTimeout(timer);
+      callback(...args);
+   } as T;
+
+   return result;
+}
diff --git a/packages/cx/src/widgets/AccessorBindings.spec.tsx b/packages/cx/src/widgets/AccessorBindings.spec.tsx
index e0868ded1..9ec152d0f 100644
--- a/packages/cx/src/widgets/AccessorBindings.spec.tsx
+++ b/packages/cx/src/widgets/AccessorBindings.spec.tsx
@@ -1,12 +1,8 @@
 import assert from "assert";
-import reactTestRenderer from "react-test-renderer";
 import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
 import { Store } from "../data/Store";
 import { expr } from "../ui";
-import { Cx } from "../ui/Cx";
-import { HtmlElement } from "./HtmlElement";
-
-let DummyHack = HtmlElement;
+import { createTestRenderer } from "../util/test/createTestRenderer";
 
 interface Model {
    $page: {
@@ -19,7 +15,7 @@ interface Model {
 let { $page } = createAccessorModelProxy<Model>();
 
 describe("Accessors", () => {
-   it("work as regular bindings", () => {
+   it("work as regular bindings", async () => {
       let widget = (
          <cx>
             <div text={$page.text} />
@@ -34,14 +30,15 @@ describe("Accessors", () => {
          },
       });
 
-      const component = reactTestRenderer.create(<Cx widget={widget} store={store} />);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree));
       assert(tree.type === "div");
       assert.deepStrictEqual(tree.children, ["Test"]);
    });
 
-   it("support expressions", () => {
+   it("support expressions", async () => {
       let widget = (
          <cx>
             <div text={expr($page.a, $page.b, (a, b) => a + b)} />
@@ -57,10 +54,37 @@ describe("Accessors", () => {
          },
       });
 
-      const component = reactTestRenderer.create(<Cx widget={widget} store={store} />);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree));
       assert(tree.type === "div");
       assert.deepStrictEqual(tree.children, ["4"]);
    });
+
+   it("expr infers correct types from accessor chains", () => {
+      let selector = expr($page.a, $page.b, (a, b) => {
+         // a and b should be inferred as number | undefined
+         const typedA: number | undefined = a;
+         const typedB: number | undefined = b;
+         // @ts-expect-error - a should not be string
+         const wrongA: string = a;
+         // @ts-expect-error - b should not be string
+         const wrongB: string = b;
+         return (typedA ?? 0) + (typedB ?? 0);
+      });
+      assert.ok(selector);
+   });
+
+   it("expr resolves AccessorChain<any> and nested properties to any", () => {
+      let m = createAccessorModelProxy<{ data: any }>();
+      let selector = expr(m.data.nested.value, (value) => {
+         // value should be any, so all assignments should work
+         const asString: string = value;
+         const asNumber: number = value;
+         const asBoolean: boolean = value;
+         return value;
+      });
+      assert.ok(selector);
+   });
 });
diff --git a/packages/cx/src/widgets/Button.d.ts b/packages/cx/src/widgets/Button.d.ts
deleted file mode 100644
index ad7d1d29c..000000000
--- a/packages/cx/src/widgets/Button.d.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as Cx from "../core";
-import * as React from "react";
-import { Instance } from "../ui/Instance";
-
-export interface ButtonProps extends Cx.HtmlElementProps {
-   /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
-   confirm?: Cx.Prop<string | Cx.Config>;
-
-   /** If true button appears in pressed state. Useful for implementing toggle buttons. */
-   pressed?: Cx.BooleanProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp;
-
-   /** HTML tag to be used. Default is `button`. */
-   tag?: string;
-
-   /** Base CSS class to be applied to the element. Default is 'button'. */
-   baseClass?: string;
-
-   /**
-    * Determines if button should receive focus on mousedown event.
-    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
-    */
-   focusOnMouseDown?: boolean;
-
-   /** Add type="submit" to the button. */
-   submit?: boolean;
-
-   /** Set to `true` to disable the button. */
-   disabled?: Cx.BooleanProp;
-
-   /** Set to `false` to disable the button. */
-   enabled?: Cx.BooleanProp;
-
-   /**
-    * Click handler.
-    *
-    * @param e - Event.
-    * @param instance - Cx widget instance that fired the event.
-    */
-   onClick?: string | ((e: MouseEvent, instance: Instance) => void);
-
-   onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
-
-   /** Button type. */
-   type?: "submit" | "button";
-
-   /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */
-   dismiss?: boolean;
-
-   /** The form attribute specifies the form the button belongs to.
-    * The value of this attribute must be equal to the `id` attribute of a `<form>` element in the same document.
-    */
-   form?: Cx.StringProp;
-}
-
-export class Button extends Cx.Widget<ButtonProps> {}
diff --git a/packages/cx/src/widgets/Button.js b/packages/cx/src/widgets/Button.js
deleted file mode 100644
index 07997ba12..000000000
--- a/packages/cx/src/widgets/Button.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Widget, VDOM, getContentArray } from "../ui/Widget";
-import { HtmlElement } from "./HtmlElement";
-import { yesNo } from "./overlay/alerts";
-import { Icon } from "./Icon";
-import { preventFocus } from "../ui/FocusManager";
-import { isFunction } from "../util/isFunction";
-import { isDefined } from "../util/isDefined";
-import { coalesce } from "../util/coalesce";
-
-export class Button extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         confirm: { structured: true },
-         pressed: undefined,
-         icon: undefined,
-         disabled: undefined,
-         enabled: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pressed: data.pressed,
-      };
-      if (isDefined(data.enabled)) data.disabled = !data.enabled;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      instance.data.parentDisabled = context.parentDisabled;
-      instance.data.parentStrict = context.parentStrict;
-
-      if (instance.cache("parentDisabled", context.parentDisabled)) instance.markShouldUpdate(context);
-      if (instance.cache("parentStrict", context.parentStrict)) instance.markShouldUpdate(context);
-
-      super.explore(context, instance);
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      if (!this.focusOnMouseDown) {
-         props.onMouseDown = (e) => {
-            if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) == false) return;
-            preventFocus(e);
-         };
-      }
-
-      if (this.dismiss) {
-         let { onClick } = props;
-
-         props.onClick = (...args) => {
-            if (onClick && onClick(...args) === false) return;
-
-            if (instance.parentOptions && isFunction(instance.parentOptions.dismiss)) instance.parentOptions.dismiss();
-         };
-      }
-
-      if (this.tag === "button") props.type = this.submit ? "submit" : "button";
-
-      delete props.confirm;
-      delete props.dismiss;
-      delete props.pressed;
-      delete props.submit;
-      delete props.focusOnMouseDown;
-      delete props.icon;
-      delete props.enabled;
-
-      let oldOnClick,
-         { data } = instance;
-
-      props.disabled = coalesce(data.parentStrict ? data.parentDisabled : null, data.disabled, data.parentDisabled);
-
-      if (data.confirm) {
-         oldOnClick = props.onClick;
-         props.onClick = () => {
-            yesNo(data.confirm).then((btn) => {
-               if (btn == "yes") oldOnClick.call(this, null, instance);
-            });
-         };
-      }
-
-      let icon, children;
-
-      if (data.icon) {
-         icon = Icon.render(data.icon, {
-            key: "icon",
-            className: this.CSS.element(this.baseClass, "icon"),
-         });
-         children = getContentArray(props.children);
-         props.children = [icon, ...children];
-         props.className = this.CSS.expand(
-            props.className,
-            this.CSS.state("icon"),
-            children.length == 0 && this.CSS.state("empty")
-         );
-
-         if (children.length == 0) {
-            props.children.push(
-               <span key="baseline" className={this.CSS.element(this.baseClass, "baseline")}>
-                  &nbsp;
-               </span>
-            );
-         }
-      }
-   }
-}
-
-Button.prototype.tag = "button";
-Button.prototype.baseClass = "button";
-Button.prototype.icon = false;
-Button.prototype.focusOnMouseDown = false;
-Button.prototype.submit = false;
-
-Widget.alias("button", Button);
diff --git a/packages/cx/src/widgets/Button.scss b/packages/cx/src/widgets/Button.scss
index fe95efa1f..bc2365d2a 100644
--- a/packages/cx/src/widgets/Button.scss
+++ b/packages/cx/src/widgets/Button.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-button(
    $name: "button",
    $state-style-map: $cx-button-state-style-map,
@@ -5,10 +7,10 @@
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       position: relative;
diff --git a/packages/cx/src/widgets/Button.tsx b/packages/cx/src/widgets/Button.tsx
new file mode 100644
index 000000000..7c43694ce
--- /dev/null
+++ b/packages/cx/src/widgets/Button.tsx
@@ -0,0 +1,189 @@
+/** @jsxImportSource react */
+import { Widget, VDOM, getContentArray } from "../ui/Widget";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
+import { yesNo } from "./overlay/alerts";
+import { Icon } from "./Icon";
+import { preventFocus } from "../ui/FocusManager";
+import { isFunction } from "../util/isFunction";
+import { isDefined } from "../util/isDefined";
+import { coalesce } from "../util/coalesce";
+import type { RenderingContext } from "../ui/RenderingContext";
+import type { Instance, RenderProps } from "../ui/Instance";
+import { YesNoResult } from "../ui/Instance";
+import { BooleanProp, StringProp, Prop, ModProp } from "../ui/Prop";
+import type { FormRenderingContext } from "./form/ValidationGroup";
+
+export interface ButtonConfig extends Omit<HtmlElementConfig<"button">, "disabled" | "type" | "form"> {
+   /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
+   confirm?: Prop<string | Record<string, unknown> | false>;
+
+   /** If true button appears in pressed state. Useful for implementing toggle buttons. */
+   pressed?: BooleanProp;
+
+   /** Name of the icon to be put on the left side of the button. */
+   icon?: StringProp;
+
+   /** Base CSS class to be applied to the element. Default is 'button'. */
+   baseClass?: string;
+
+   /**
+    * Determines if button should receive focus on mousedown event.
+    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
+    */
+   focusOnMouseDown?: boolean;
+
+   /** Add type="submit" to the button. */
+   submit?: boolean;
+
+   /** Set to `true` to disable the button. */
+   disabled?: BooleanProp;
+
+   /** Set to `false` to disable the button. */
+   enabled?: BooleanProp;
+
+   /**
+    * Click handler.
+    *
+    * @param e - Event.
+    * @param instance - Cx widget instance that fired the event.
+    */
+   onClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
+
+   /** Button type. */
+   type?: "submit" | "button";
+
+   /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */
+   dismiss?: boolean;
+
+   /** The form attribute specifies the form the button belongs to.
+    * The value of this attribute must be equal to the `id` attribute of a `<form>` element in the same document.
+    */
+   form?: StringProp;
+}
+
+export class Button extends HtmlElement<ButtonConfig, HtmlElementInstance> {
+   constructor(config?: ButtonConfig) {
+      super(config);
+   }
+
+   declare icon?: boolean | string;
+   declare focusOnMouseDown?: boolean;
+   declare submit?: boolean;
+   declare dismiss?: boolean;
+   declare onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
+   declare baseClass: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         confirm: { structured: true },
+         pressed: undefined,
+         icon: undefined,
+         disabled: undefined,
+         enabled: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
+      const { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pressed: data.pressed,
+      };
+      if (isDefined(data.enabled)) data.disabled = !data.enabled;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: FormRenderingContext, instance: HtmlElementInstance): void {
+      instance.data.parentDisabled = context.parentDisabled;
+      instance.data.parentStrict = context.parentStrict;
+
+      if (instance.cache("parentDisabled", context.parentDisabled)) instance.markShouldUpdate(context);
+      if (instance.cache("parentStrict", context.parentStrict)) instance.markShouldUpdate(context);
+
+      super.explore(context, instance);
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: RenderProps): void {
+      super.attachProps(context, instance, props);
+
+      if (!this.focusOnMouseDown) {
+         props.onMouseDown = (e: React.MouseEvent) => {
+            if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
+            preventFocus(e);
+         };
+      }
+
+      if (this.dismiss) {
+         const { onClick } = props;
+
+         props.onClick = (e: React.MouseEvent) => {
+            if (onClick) {
+               const result = onClick(e);
+               if (result === false) return;
+            }
+
+            if (instance.parentOptions && isFunction(instance.parentOptions.dismiss)) {
+               instance.parentOptions.dismiss();
+            }
+         };
+      }
+
+      if (this.tag === "button") props.type = this.submit ? "submit" : "button";
+
+      delete props.confirm;
+      delete props.dismiss;
+      delete props.pressed;
+      delete props.submit;
+      delete props.focusOnMouseDown;
+      delete props.icon;
+      delete props.enabled;
+
+      const { data } = instance;
+
+      props.disabled = coalesce(data.parentStrict ? data.parentDisabled : null, data.disabled, data.parentDisabled) as
+         | boolean
+         | undefined;
+
+      if (data.confirm) {
+         const oldOnClick = props.onClick;
+         props.onClick = (e: React.MouseEvent) => {
+            yesNo(data.confirm!).then((btn: string) => {
+               if (btn === YesNoResult.Yes && oldOnClick) {
+                  oldOnClick(e);
+               }
+            });
+         };
+      }
+
+      if (data.icon) {
+         const icon = Icon.render(data.icon, {
+            key: "icon",
+            className: this.CSS.element(this.baseClass, "icon"),
+         });
+         const children = getContentArray(props.children);
+         props.children = [icon, ...children];
+         props.className = this.CSS.expand(
+            props.className,
+            this.CSS.state("icon"),
+            children.length === 0 && this.CSS.state("empty"),
+         );
+
+         if (children.length === 0) {
+            (props.children as React.ReactNode[]).push(
+               <span key="baseline" className={this.CSS.element(this.baseClass, "baseline")}>
+                  &nbsp;
+               </span>,
+            );
+         }
+      }
+   }
+}
+
+Button.prototype.tag = "button";
+Button.prototype.baseClass = "button";
+Button.prototype.icon = false;
+Button.prototype.focusOnMouseDown = false;
+Button.prototype.submit = false;
+
+Widget.alias("button", Button);
diff --git a/packages/cx/src/widgets/Button.variables.scss b/packages/cx/src/widgets/Button.variables.scss
index eebef9a44..d91b15343 100644
--- a/packages/cx/src/widgets/Button.variables.scss
+++ b/packages/cx/src/widgets/Button.variables.scss
@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "sass:map";
+
 $cx-default-button-font-family: $cx-default-box-font-family !default;
 $cx-default-button-font-size: $cx-default-box-font-size !default;
 $cx-default-button-font-weight: normal !default;
@@ -61,9 +64,9 @@ $cx-button-mods: (
          color: white,
       ),
       disabled: (
-         background-color: transparentize(#1f99f8, 0.5),
-         border-color: transparentize(#1e88e5, 0.9),
-         color: transparentize(white, 0.4),
+         background-color: color.adjust(#1f99f8, $alpha: -0.5),
+         border-color: color.adjust(#1e88e5, $alpha: -0.9),
+         color: color.adjust(white, $alpha: -0.4),
       ),
       hover: (
          background-color: #1f99f8,
@@ -76,9 +79,9 @@ $cx-button-mods: (
          color: white,
       ),
       disabled: (
-         background-color: transparentize(#d32f2f, 0.4),
-         border-color: transparentize(#c62828, 0.9),
-         color: transparentize(white, 0.5),
+         background-color: color.adjust(#d32f2f, $alpha: -0.4),
+         border-color: color.adjust(#c62828, $alpha: -0.9),
+         color: color.adjust(white, $alpha: -0.5),
       ),
       hover: (
          background-color: #d32f2f,
@@ -92,16 +95,16 @@ $cx-button-mods: (
          box-shadow: none,
       ),
       hover:
-         map-merge(
-            map-get($cx-list-item, hover),
+         map.merge(
+            map.get($cx-list-item, hover),
             (
                box-shadow: none,
                border-color: transparent,
             )
          ),
       focus:
-         map-merge(
-            map-get($cx-list-item, selected-cursor),
+         map.merge(
+            map.get($cx-list-item, selected-cursor),
             (
                box-shadow: none,
                border-color: transparent,
diff --git a/packages/cx/src/widgets/CxCredit.d.ts b/packages/cx/src/widgets/CxCredit.d.ts
deleted file mode 100644
index c22447cf9..000000000
--- a/packages/cx/src/widgets/CxCredit.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as Cx from '../core';
-
-interface CxCreditProps extends Cx.HtmlElementProps {
-   
-   /** Base CSS class to be applied to the element. Defaults to `cxcredit`. */
-   baseClass?: string,
-   /** HTML tag to be used. Default is `div`. */
-   tag?: string
-
-}
-
-export class CxCredit extends Cx.Widget<CxCreditProps> {}
diff --git a/packages/cx/src/widgets/CxCredit.js b/packages/cx/src/widgets/CxCredit.js
deleted file mode 100644
index 8bfeae9db..000000000
--- a/packages/cx/src/widgets/CxCredit.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {HtmlElement} from './HtmlElement';
-import {Icon} from './Icon';
-
-export class CxCredit extends HtmlElement {
-
-   init() {
-      this.tooltip = {
-         mouseTrap: true,
-         title: 'Credits',
-         items: <cx>
-            <div ws>
-               User interface of this project is implemented using the CxJS framework.
-               For more information about CxJS, please visit
-               <a href="https://cxjs.io/" target="_blank">the CxJS homepage</a>.
-            </div>
-         </cx>
-      };
-      super.init();
-   }
-
-   attachProps(context, instance, props) {
-      props.children = Icon.render("cx", {
-         className: this.CSS.element(this.baseClass, "icon")
-      });
-   }
-}
-
-CxCredit.prototype.baseClass = "cxcredit";
-CxCredit.prototype.tag = "div";
-
-Widget.alias('cx-credit', CxCredit);
\ No newline at end of file
diff --git a/packages/cx/src/widgets/CxCredit.scss b/packages/cx/src/widgets/CxCredit.scss
index 0fb238cb4..acc3f6e2f 100644
--- a/packages/cx/src/widgets/CxCredit.scss
+++ b/packages/cx/src/widgets/CxCredit.scss
@@ -1,8 +1,10 @@
+@use "sass:map";
+
 @mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       width: 50px;
diff --git a/packages/cx/src/widgets/CxCredit.tsx b/packages/cx/src/widgets/CxCredit.tsx
new file mode 100644
index 000000000..60ba09ab4
--- /dev/null
+++ b/packages/cx/src/widgets/CxCredit.tsx
@@ -0,0 +1,46 @@
+import { Widget, VDOM } from "../ui/Widget";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
+import { Icon } from "./Icon";
+import { RenderingContext } from "../ui/RenderingContext";
+import { RenderProps } from "../ui/Instance";
+
+export interface CxCreditConfig extends HtmlElementConfig {}
+
+export class CxCredit extends HtmlElement<CxCreditConfig, HtmlElementInstance> {
+   declare baseClass: string;
+
+   constructor(config?: CxCreditConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.tooltip = {
+         mouseTrap: true,
+         title: "Credits",
+         items: (
+            <cx>
+               <div ws>
+                  User interface of this project is implemented using the CxJS framework. For more information about
+                  CxJS, please visit
+                  <a href="https://cxjs.io/" target="_blank">
+                     the CxJS homepage
+                  </a>
+                  .
+               </div>
+            </cx>
+         ),
+      };
+      super.init();
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: RenderProps): void {
+      props.children = Icon.render("cx", {
+         className: this.CSS.element(this.baseClass, "icon"),
+      });
+   }
+}
+
+CxCredit.prototype.baseClass = "cxcredit";
+CxCredit.prototype.tag = "div";
+
+Widget.alias("cx-credit", CxCredit);
diff --git a/packages/cx/src/widgets/DocumentTitle.d.ts b/packages/cx/src/widgets/DocumentTitle.d.ts
deleted file mode 100644
index a2911c885..000000000
--- a/packages/cx/src/widgets/DocumentTitle.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as Cx from '../core';
-
-interface DocumentTitleProps extends Cx.WidgetProps {
-
-   value?: Cx.StringProp,
-   append?: boolean,
-   action?: 'append' | 'replace' | 'prepend',
-   separator?: Cx.StringProp
-}
-
-export class DocumentTitle extends Cx.Widget<DocumentTitleProps> {}
diff --git a/packages/cx/src/widgets/DocumentTitle.js b/packages/cx/src/widgets/DocumentTitle.js
deleted file mode 100644
index 544f1138b..000000000
--- a/packages/cx/src/widgets/DocumentTitle.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import {Widget} from '../ui/Widget';
-
-export class DocumentTitle extends Widget {
-   init() {
-      if (this.value)
-         this.text = this.value;
-
-      if (this.append)
-         this.action = "append";
-
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         value: undefined,
-         text: undefined,
-         action: undefined,
-         separator: undefined
-      });
-   }
-
-   explore(context, instance) {
-      if (!context.documentTitle) {
-         context.documentTitle = {
-            activeInstance: instance,
-            title: ''
-         }
-      }
-
-      let {data} = instance;
-
-      if (data.text) {
-
-         switch (data.action) {
-            case "append":
-               if (context.documentTitle.title)
-                  context.documentTitle.title += data.separator;
-               context.documentTitle.title += data.text;
-               break;
-
-            case "prepend":
-               context.documentTitle.title = data.text + data.separator + context.documentTitle.title;
-               break;
-
-            default:
-            case "replace":
-               context.documentTitle.title = data.text;
-               break;
-         }
-      }
-
-      super.explore(context, instance);
-   }
-
-   prepare(context, instance) {
-      if (context.documentTitle.activeInstance == instance)
-         document.title = context.documentTitle.title;
-   }
-
-   render() {
-      return null;
-   }
-}
-
-DocumentTitle.prototype.action = "append";
-DocumentTitle.prototype.separator = '';
-
-Widget.alias('document-title', DocumentTitle);
\ No newline at end of file
diff --git a/packages/cx/src/widgets/DocumentTitle.ts b/packages/cx/src/widgets/DocumentTitle.ts
new file mode 100644
index 000000000..da8e6b8f6
--- /dev/null
+++ b/packages/cx/src/widgets/DocumentTitle.ts
@@ -0,0 +1,95 @@
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp } from "../ui/Prop";
+
+export interface DocumentTitleConfig extends WidgetConfig {
+   /** Text value to be used for the document title. */
+   value?: StringProp;
+
+   /** Text value to be used for the document title. */
+   text?: StringProp;
+
+   /** Deprecated. Use `action: "append"` instead. */
+   append?: boolean;
+
+   /** How to combine the title with existing document title. Default is `append`. */
+   action?: "append" | "replace" | "prepend";
+
+   /** Separator used when appending or prepending to the title. Default is empty string. */
+   separator?: StringProp;
+}
+
+export class DocumentTitle extends Widget<DocumentTitleConfig> {
+   declare value?: StringProp;
+   declare text?: StringProp;
+   declare append?: boolean;
+   declare action?: "append" | "replace" | "prepend";
+   declare separator?: StringProp;
+
+   constructor(config?: DocumentTitleConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.value) this.text = this.value;
+
+      if (this.append) this.action = "append";
+
+      super.init();
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         value: undefined,
+         text: undefined,
+         action: undefined,
+         separator: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: Instance): void {
+      if (!(context as any).documentTitle) {
+         (context as any).documentTitle = {
+            activeInstance: instance,
+            title: "",
+         };
+      }
+
+      let { data } = instance;
+
+      if (data.text) {
+         switch (data.action) {
+            case "append":
+               if ((context as any).documentTitle.title) (context as any).documentTitle.title += data.separator;
+               (context as any).documentTitle.title += data.text;
+               break;
+
+            case "prepend":
+               (context as any).documentTitle.title = data.text + data.separator + (context as any).documentTitle.title;
+               break;
+
+            default:
+            case "replace":
+               (context as any).documentTitle.title = data.text;
+               break;
+         }
+      }
+
+      super.explore(context, instance);
+   }
+
+   prepare(context: RenderingContext, instance: Instance): void {
+      if ((context as any).documentTitle.activeInstance == instance)
+         document.title = (context as any).documentTitle.title;
+   }
+
+   render(): null {
+      return null;
+   }
+}
+
+DocumentTitle.prototype.action = "append";
+DocumentTitle.prototype.separator = "";
+
+Widget.alias("document-title", DocumentTitle);
diff --git a/packages/cx/src/widgets/FlexBox.d.ts b/packages/cx/src/widgets/FlexBox.d.ts
deleted file mode 100644
index 5c4f7bbae..000000000
--- a/packages/cx/src/widgets/FlexBox.d.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as Cx from "../core";
-
-interface FlexBoxProps extends Cx.StyledContainerProps {
-   /** Base CSS class. Default is `flexbox`. */
-   baseClass?: string;
-
-   /** Flex direction. Default is `row`.  */
-   direction?: string;
-
-   /**
-    * Add spacing between items by applying a margin to children.
-    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    * Value `true` is equivalent to `medium`.
-    */
-   spacing?: string | boolean;
-
-   /**
-    * Add horizontal spacing between items by applying a margin to children.
-    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    * Value `true` is equivalent to `medium`. \
-    */
-   hspacing?: boolean | string;
-
-   /**
-    * Add vertical spacing between items by applying a margin to children.
-    * Allowed values are xsmall, small, medium, large and xlarge.
-    * Value true is equivalent to medium.
-    */
-   vspacing?: boolean | string;
-
-   styled?: boolean;
-
-   /**
-    * Add padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    *  Value `true` is equivalent to `medium`.
-    */
-   pad?: boolean | string;
-   padding?: boolean | string;
-
-   /**
-    * Add horizontal padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    *  Value `true` is equivalent to `medium`.
-    */
-   hpad?: boolean | string;
-   hpadding?: boolean | string;
-
-   /**
-    * Add vertical padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    *  Value `true` is equivalent to `medium`.
-    */
-   vpad?: boolean | string;
-   vpadding?: boolean | string;
-
-   wrap?: boolean;
-   align?: "start" | "center" | "end" | "baseline" | "stretch";
-   justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
-   target?: string;
-
-   /**
-    * Set to true to add overflow styles required for deeply nested flexbox calculations.
-    */
-   nested?: boolean;
-}
-
-export class FlexBox extends Cx.Widget<FlexBoxProps> {}
-
-export class FlexRow extends FlexBox {}
-
-export class FlexCol extends FlexBox {}
diff --git a/packages/cx/src/widgets/FlexBox.js b/packages/cx/src/widgets/FlexBox.js
deleted file mode 100644
index e513a8c45..000000000
--- a/packages/cx/src/widgets/FlexBox.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import {VDOM} from '../ui/Widget';
-import {Container} from '../ui/Container';
-import {isUndefined} from '../util/isUndefined';
-
-export class FlexBox extends Container {
-
-   init() {
-      if (this.padding)
-         this.pad = this.padding;
-      
-      if (this.hpadding)
-         this.hpad = this.hpadding;
-
-      if (this.vpadding)
-         this.vpad = this.vpadding;
-
-      this.hpad = isUndefined(this.hpad) ? this.pad : this.hpad;
-      this.vpad = isUndefined(this.vpad) ? this.pad : this.hpad;
-
-      if (this.hpad === true)
-         this.hpad = 'medium';
-
-      if (this.vpad === true)
-         this.vpad = 'medium';
-      
-      this.hspacing = isUndefined(this.hspacing) ? this.spacing : this.hspacing;
-      this.vspacing = isUndefined(this.vspacing) ? this.spacing : this.vspacing;
-
-      if (this.hspacing === true)
-         this.hspacing = 'medium';
-
-      if (this.vspacing === true)
-         this.vspacing = 'medium';
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.eventHandlers = instance.getJsxEventProps();
-      super.initInstance(context, instance);
-   }
-
-   prepareCSS(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         [this.hpad + '-hpad']: this.hpad,
-         [this.vpad + '-vpad']: this.vpad,
-         nested: this.nested
-      };
-      super.prepareCSS(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data, eventHandlers} = instance;
-      let {CSS, baseClass} = this;
-      let flexboxMods = {
-         [this.hspacing + '-hspacing']: this.hspacing,
-         [this.vspacing + '-vspacing']: this.vspacing,
-         ['align-' + this.align]: this.align,
-         ['justify-' + this.justify]: this.justify,
-         wrap: this.wrap,
-         ['target-' + this.target]: true,
-         [this.direction]: true
-      };
-
-      return <div key={key} className={data.classNames} style={data.style} {...eventHandlers}>
-         <div className={CSS.element(baseClass, 'flexbox', flexboxMods)}>
-            {this.renderChildren(context, instance)}
-         </div>
-      </div>
-   }
-}
-
-FlexBox.prototype.baseClass = "flexbox";
-FlexBox.prototype.styled = true;
-FlexBox.prototype.direction = 'row';
-FlexBox.prototype.spacing = false;
-FlexBox.prototype.hspacing = undefined;
-FlexBox.prototype.vspacing = undefined;
-FlexBox.prototype.pad = false;
-FlexBox.prototype.hpad = undefined;
-FlexBox.prototype.vpad = undefined;
-FlexBox.prototype.wrap = false;
-FlexBox.prototype.align = false;
-FlexBox.prototype.justify = false;
-FlexBox.prototype.target = 'any';
-FlexBox.prototype.nested = false;
-
-export class FlexRow extends FlexBox {}
-
-export class FlexCol extends FlexBox {}
-FlexCol.prototype.direction = 'column';
\ No newline at end of file
diff --git a/packages/cx/src/widgets/FlexBox.scss b/packages/cx/src/widgets/FlexBox.scss
index 7f1a01853..954f7b46d 100644
--- a/packages/cx/src/widgets/FlexBox.scss
+++ b/packages/cx/src/widgets/FlexBox.scss
@@ -1,5 +1,7 @@
+@use "sass:map";
+
 @mixin cx-flexbox-spacing($divider, $besm: $cx-besm) {
-   $state: map-get($besm, state);
+   $state: map.get($besm, state);
    @each $pad, $size in $cx-pad-size {
       &.#{$state}#{$pad}-hspacing {
          margin-left: cx-divide(-$size, $divider);
@@ -24,10 +26,10 @@
 }
 
 @mixin cx-flexbox($name: "flexbox", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       box-sizing: border-box;
diff --git a/packages/cx/src/widgets/FlexBox.tsx b/packages/cx/src/widgets/FlexBox.tsx
new file mode 100644
index 000000000..e4f4b5064
--- /dev/null
+++ b/packages/cx/src/widgets/FlexBox.tsx
@@ -0,0 +1,169 @@
+/** @jsxImportSource react */
+import { VDOM } from "../ui/Widget";
+import { ContainerBase, StyledContainerConfig } from "../ui/Container";
+import { isUndefined } from "../util/isUndefined";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+
+export interface FlexBoxConfig extends StyledContainerConfig {
+   /** Base CSS class. Default is `flexbox`. */
+   baseClass?: string;
+
+   /** Flex direction. Default is `row`.  */
+   direction?: string;
+
+   /**
+    * Add spacing between items by applying a margin to children.
+    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    * Value `true` is equivalent to `medium`.
+    */
+   spacing?: string | boolean;
+
+   /**
+    * Add horizontal spacing between items by applying a margin to children.
+    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    * Value `true` is equivalent to `medium`.
+    */
+   hspacing?: boolean | string;
+
+   /**
+    * Add vertical spacing between items by applying a margin to children.
+    * Allowed values are xsmall, small, medium, large and xlarge.
+    * Value true is equivalent to medium.
+    */
+   vspacing?: boolean | string;
+
+   /**
+    * Add padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    *  Value `true` is equivalent to `medium`.
+    */
+   pad?: boolean | string;
+   padding?: boolean | string;
+
+   /**
+    * Add horizontal padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    *  Value `true` is equivalent to `medium`.
+    */
+   hpad?: boolean | string;
+   hpadding?: boolean | string;
+
+   /**
+    * Add vertical padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    *  Value `true` is equivalent to `medium`.
+    */
+   vpad?: boolean | string;
+   vpadding?: boolean | string;
+
+   wrap?: boolean;
+   align?: "start" | "center" | "end" | "baseline" | "stretch" | false;
+   justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | false;
+   target?: string;
+
+   /**
+    * Set to true to add overflow styles required for deeply nested flexbox calculations.
+    */
+   nested?: boolean;
+}
+
+export class FlexBox extends ContainerBase<FlexBoxConfig, Instance> {
+   declare padding?: boolean | string;
+   declare hpadding?: boolean | string;
+   declare vpadding?: boolean | string;
+   declare spacing?: string | boolean;
+   declare hspacing?: boolean | string;
+   declare vspacing?: boolean | string;
+   declare pad?: boolean | string;
+   declare hpad?: boolean | string;
+   declare vpad?: boolean | string;
+   declare wrap?: boolean;
+   declare align?: "start" | "center" | "end" | "baseline" | "stretch" | false;
+   declare justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | false;
+   declare target?: string;
+   declare nested?: boolean;
+   declare direction?: string;
+
+   constructor(config?: FlexBoxConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.padding) this.pad = this.padding;
+
+      if (this.hpadding) this.hpad = this.hpadding;
+
+      if (this.vpadding) this.vpad = this.vpadding;
+
+      this.hpad = isUndefined(this.hpad) ? this.pad : this.hpad;
+      this.vpad = isUndefined(this.vpad) ? this.pad : this.hpad;
+
+      if (this.hpad === true) this.hpad = "medium";
+
+      if (this.vpad === true) this.vpad = "medium";
+
+      this.hspacing = isUndefined(this.hspacing) ? this.spacing : this.hspacing;
+      this.vspacing = isUndefined(this.vspacing) ? this.spacing : this.vspacing;
+
+      if (this.hspacing === true) this.hspacing = "medium";
+
+      if (this.vspacing === true) this.vspacing = "medium";
+
+      super.init();
+   }
+
+   initInstance(context: RenderingContext, instance: Instance): void {
+      (instance as any).eventHandlers = instance.getJsxEventProps();
+      super.initInstance(context, instance);
+   }
+
+   prepareCSS(context: RenderingContext, instance: Instance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         [this.hpad + "-hpad"]: this.hpad,
+         [this.vpad + "-vpad"]: this.vpad,
+         nested: this.nested,
+      };
+      super.prepareCSS(context, instance);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data } = instance;
+      let eventHandlers = (instance as any).eventHandlers;
+      let { CSS, baseClass } = this;
+      let flexboxMods = {
+         [this.hspacing + "-hspacing"]: this.hspacing,
+         [this.vspacing + "-vspacing"]: this.vspacing,
+         ["align-" + this.align]: this.align,
+         ["justify-" + this.justify]: this.justify,
+         wrap: this.wrap,
+         ["target-" + this.target]: true,
+         [this.direction!]: true,
+      };
+
+      return (
+         <div key={key} className={data.classNames as string} style={data.style as any} {...eventHandlers}>
+            <div className={CSS.element(baseClass!, "flexbox", flexboxMods)}>{this.renderChildren(context, instance)}</div>
+         </div>
+      );
+   }
+}
+
+FlexBox.prototype.baseClass = "flexbox";
+FlexBox.prototype.styled = true;
+FlexBox.prototype.direction = 'row';
+FlexBox.prototype.spacing = false;
+FlexBox.prototype.hspacing = undefined;
+FlexBox.prototype.vspacing = undefined;
+FlexBox.prototype.pad = false;
+FlexBox.prototype.hpad = undefined;
+FlexBox.prototype.vpad = undefined;
+FlexBox.prototype.wrap = false;
+FlexBox.prototype.align = false;
+FlexBox.prototype.justify = false;
+FlexBox.prototype.target = 'any';
+FlexBox.prototype.nested = false;
+
+export class FlexRow extends FlexBox {}
+
+export class FlexCol extends FlexBox {}
+FlexCol.prototype.direction = 'column';
\ No newline at end of file
diff --git a/packages/cx/src/widgets/Heading.d.ts b/packages/cx/src/widgets/Heading.d.ts
deleted file mode 100644
index 1a37a32e1..000000000
--- a/packages/cx/src/widgets/Heading.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as Cx from '../core';
-
-interface HeadingProps extends Cx.HtmlElementProps {
-   
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string,
-
-   /** Heading level. Allowed values go from 1 to 6. Default is 3. */
-   level?: number | string,
-
-    /** Base CSS class. Default is `heading`. */
-    baseClass?: string
-
-}
-
-export class Heading extends Cx.Widget<HeadingProps> {}
diff --git a/packages/cx/src/widgets/Heading.js b/packages/cx/src/widgets/Heading.js
deleted file mode 100644
index f4149e4b0..000000000
--- a/packages/cx/src/widgets/Heading.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import {HtmlElement} from './HtmlElement';
-
-
-export class Heading extends HtmlElement {
-
-   init() {
-      this.tag = `h${this.level}`;
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         [`level-${this.level}`]: true
-      };
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "level":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-}
-
-
-Heading.prototype.level = 3;
-Heading.prototype.baseClass = 'heading';
\ No newline at end of file
diff --git a/packages/cx/src/widgets/Heading.scss b/packages/cx/src/widgets/Heading.scss
index 259a8a822..ffee5002b 100644
--- a/packages/cx/src/widgets/Heading.scss
+++ b/packages/cx/src/widgets/Heading.scss
@@ -1,8 +1,10 @@
+@use "sass:map";
+
 @mixin cxb-heading($name: "heading", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       @include cx-add-rules($cx-caption-style-map);
diff --git a/packages/cx/src/widgets/Heading.ts b/packages/cx/src/widgets/Heading.ts
new file mode 100644
index 000000000..7ce1656e4
--- /dev/null
+++ b/packages/cx/src/widgets/Heading.ts
@@ -0,0 +1,43 @@
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "./HtmlElement";
+import { RenderingContext } from "../ui/RenderingContext";
+
+export interface HeadingConfig extends HtmlElementConfigBase {
+   /** Name of the HTML element to be rendered. Default is `div`. */
+   tag?: string;
+
+   /** Heading level. Allowed values go from 1 to 6. Default is 3. */
+   level?: number | string;
+
+   /** Base CSS class. Default is `heading`. */
+   baseClass?: string;
+}
+
+export class Heading extends HtmlElement<HeadingConfig, HtmlElementInstance> {
+   declare level?: number | string;
+
+   init(): void {
+      this.tag = `h${this.level}`;
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         [`level-${this.level}`]: true,
+      };
+      super.prepareData(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName: string): string | false {
+      switch (attrName) {
+         case "level":
+            return false;
+
+         default: return super.isValidHtmlAttribute(attrName);
+      }
+   }
+}
+
+Heading.prototype.level = 3;
+Heading.prototype.baseClass = "heading";
\ No newline at end of file
diff --git a/packages/cx/src/widgets/HighlightedSearchText.d.ts b/packages/cx/src/widgets/HighlightedSearchText.d.ts
deleted file mode 100644
index 95e4c4c4f..000000000
--- a/packages/cx/src/widgets/HighlightedSearchText.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as Cx from "../core";
-
-interface HighlightedSearchTextProps extends Cx.WidgetProps {
-   query?: Cx.StringProp;
-   text?: Cx.StringProp;
-   chunks?: Cx.Prop<string[]>;
-}
-
-export class HighlightedSearchText extends Cx.Widget<HighlightedSearchTextProps> {}
diff --git a/packages/cx/src/widgets/HighlightedSearchText.js b/packages/cx/src/widgets/HighlightedSearchText.js
deleted file mode 100644
index 40bcf5689..000000000
--- a/packages/cx/src/widgets/HighlightedSearchText.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Widget } from "../ui/Widget";
-import { VDOM } from "../ui/VDOM";
-import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
-
-export class HighlightedSearchText extends Widget {
-   declareData(...args) {
-      super.declareData(...args, {
-         text: undefined,
-         chunks: undefined,
-         query: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      let { text, chunks, query, classNames, style } = data;
-
-      if (!chunks && text && query) {
-         let highlighter = getSearchQueryHighlighter(query, { cache: true });
-         chunks = highlighter(text);
-      }
-
-      if (!chunks) return text;
-      return chunks.map((text, i) => {
-         if (i % 2 == 0) return text;
-         return (
-            <span key={`${key}-${i}`} className={classNames} style={style}>
-               {text}
-            </span>
-         );
-      });
-   }
-}
-
-HighlightedSearchText.prototype.styled = true;
-HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
diff --git a/packages/cx/src/widgets/HighlightedSearchText.scss b/packages/cx/src/widgets/HighlightedSearchText.scss
index 861f715f1..877122aa9 100644
--- a/packages/cx/src/widgets/HighlightedSearchText.scss
+++ b/packages/cx/src/widgets/HighlightedSearchText.scss
@@ -1,12 +1,14 @@
+@use "sass:map";
+
 @mixin cxb-highlightedsearchtext(
    $name: "highlightedsearchtext",
    $styles: $cx-highlightedsearchtext-style-map,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       @include cx-add-rules($styles);
diff --git a/packages/cx/src/widgets/HighlightedSearchText.tsx b/packages/cx/src/widgets/HighlightedSearchText.tsx
new file mode 100644
index 000000000..e7d2aba57
--- /dev/null
+++ b/packages/cx/src/widgets/HighlightedSearchText.tsx
@@ -0,0 +1,54 @@
+/** @jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import type { RenderingContext } from "../ui/RenderingContext";
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
+import { StringProp, Prop } from "../ui/Prop";
+
+export interface HighlightedSearchTextConfig extends WidgetConfig {
+   /** Search query used to highlight matching text. */
+   query?: StringProp;
+
+   /** Text content to be searched and highlighted. */
+   text?: StringProp;
+
+   /** Pre-computed text chunks where odd-indexed chunks are highlighted. */
+   chunks?: Prop<string[]>;
+}
+
+export class HighlightedSearchText extends Widget<HighlightedSearchTextConfig> {
+   constructor(config?: HighlightedSearchTextConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]) {
+      super.declareData(...args, {
+         text: undefined,
+         chunks: undefined,
+         query: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data } = instance;
+      let { text, chunks, query, classNames, style } = data;
+
+      if (!chunks && text && query) {
+         let highlighter = getSearchQueryHighlighter(query, { cache: true });
+         chunks = highlighter(text);
+      }
+
+      if (!chunks) return text;
+      return chunks.map((text: string, i: number) => {
+         if (i % 2 == 0) return text;
+         return (
+            <span key={`${key}-${i}`} className={classNames} style={style}>
+               {text}
+            </span>
+         );
+      });
+   }
+}
+
+HighlightedSearchText.prototype.styled = true;
+HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
diff --git a/packages/cx/src/widgets/HtmlElement.d.ts b/packages/cx/src/widgets/HtmlElement.d.ts
deleted file mode 100644
index b2e30d063..000000000
--- a/packages/cx/src/widgets/HtmlElement.d.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as Cx from "../core";
-import { Instance } from "../ui/Instance";
-
-interface HtmlElementProps extends Cx.HtmlElementProps {
-   /** HTML to be injected into the element. */
-   innerHtml?: Cx.StringProp;
-
-   attrs?: Cx.StructuredProp;
-   data?: Cx.StructuredProp;
-
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string;
-
-   /** HTML to be injected into the element. */
-   html?: Cx.StringProp;
-
-   styled?: boolean;
-
-   //** Set to true to automatically focus the element when mounted. */
-   autoFocus?: Cx.BooleanProp;
-
-   /** Allow any prop if HtmlElement is used directly.
-    * e.g. `<HtmlElement tag="form" onSubmit="submit" />`*/
-   [key: string]: any;
-
-   /** Callback function called when the element is mounted in the DOM. Provides reference to the element and the component instance. */
-   onRef?: string | ((element: any, instance: Instance) => void);
-}
-
-export class HtmlElement extends Cx.Widget<HtmlElementProps> {}
diff --git a/packages/cx/src/widgets/HtmlElement.js b/packages/cx/src/widgets/HtmlElement.js
deleted file mode 100644
index 7a8a85a64..000000000
--- a/packages/cx/src/widgets/HtmlElement.js
+++ /dev/null
@@ -1,275 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { Container } from "../ui/Container";
-import {
-   tooltipMouseMove,
-   tooltipParentWillUnmount,
-   tooltipMouseLeave,
-   tooltipParentWillReceiveProps,
-   tooltipParentDidMount,
-   tooltipParentDidUpdate,
-} from "./overlay/tooltip-ops";
-import { Url } from "../ui/app/Url";
-import { debug } from "../util/Debug";
-import { isString } from "../util/isString";
-import { isUndefined } from "../util/isUndefined";
-import { isDefined } from "../util/isDefined";
-import { isArray } from "../util/isArray";
-import { autoFocus } from "./autoFocus";
-
-let isDataAttribute = (attr) => (attr.indexOf("data-") == 0 ? attr.substring(5) : false);
-
-export let urlAttributes = {
-   "a.href": true,
-   "img.src": true,
-   "iframe.src": true,
-};
-
-export class HtmlElement extends Container {
-   constructor(config) {
-      super(config);
-
-      if (isUndefined(this.jsxAttributes) && config)
-         this.jsxAttributes = Object.keys(config).filter(this.isValidHtmlAttribute.bind(this));
-   }
-
-   declareData() {
-      let data = {
-         text: undefined,
-         innerHtml: undefined,
-         attrs: {
-            structured: true,
-         },
-         data: {
-            structured: true,
-         },
-         autoFocus: undefined,
-      };
-
-      let name;
-
-      this.urlAttributes = [];
-
-      if (this.jsxAttributes) {
-         this.jsxAttributes.forEach((attr) => {
-            if (urlAttributes[`${this.tag}.${attr}`]) this.urlAttributes.push(attr);
-
-            if ((name = isDataAttribute(attr))) {
-               if (!this.data) this.data = {};
-               this.data[name] = this[attr];
-            } else if ((name = this.isValidHtmlAttribute(attr)) && !data.hasOwnProperty(name)) {
-               if (name.indexOf("on") == 0) {
-                  if (this[attr]) {
-                     if (!this.events) this.events = {};
-                     this.events[name] = this[attr];
-                  }
-               } else {
-                  if (!this.attrs) this.attrs = {};
-                  this.attrs[name] = this[attr];
-               }
-            }
-         });
-      }
-
-      if (this.urlAttributes.length == 0) delete this.urlAttributes;
-
-      super.declareData(...arguments, data);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "tag":
-         case "type":
-         case "$type":
-         case "$props":
-         case "text":
-         case "layout":
-         case "class":
-         case "className":
-         case "style":
-         case "controller":
-         case "outerLayout":
-         case "items":
-         case "children":
-         case "visible":
-         case "if":
-         case "mod":
-         case "putInto":
-         case "contentFor":
-         case "trimWhitespace":
-         case "preserveWhitespace":
-         case "ws":
-         case "plainText":
-         case "vertical":
-         case "memoize":
-         case "onInit":
-         case "onExplore":
-         case "onDestroy":
-         case "onRef":
-         case "html":
-         case "innerText":
-         case "baseClass":
-         case "CSS":
-         case "tooltip":
-         case "styles":
-         case "jsxAttributes":
-         case "jsxSpread":
-         case "instance":
-         case "store":
-         case "autoFocus":
-         case "vdomKey":
-            return false;
-
-         default:
-            if (isDataAttribute(attrName)) return false;
-
-            break;
-      }
-
-      return attrName;
-   }
-
-   init() {
-      if (this.html) this.innerHtml = this.html;
-
-      if (this.innerText) this.text = this.innerText;
-
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      if (this.urlAttributes && data.attrs) {
-         data.attrs = { ...data.attrs };
-         this.urlAttributes.forEach((attr) => {
-            if (isString(data.attrs[attr])) data.attrs[attr] = Url.resolve(data.attrs[attr]);
-         });
-      }
-      super.prepareData(context, instance);
-   }
-
-   attachProps(context, instance, props) {
-      Object.assign(props, this.extraProps);
-
-      if (!isString(this.tag)) props.instance = instance;
-   }
-
-   render(context, instance, key) {
-      //rebind events to pass instance
-      if (this.events && !instance.events) {
-         instance.events = {};
-         for (let eventName in this.events) {
-            instance.events[eventName] = (e) => instance.invoke(eventName, e, instance);
-         }
-      }
-
-      let { data, events } = instance;
-
-      let props = Object.assign(
-         {
-            key: key,
-         },
-         data.attrs,
-         events,
-      );
-
-      if (data.classNames) props.className = data.classNames;
-
-      if (data.style) props.style = data.style;
-
-      let children;
-      if (isDefined(data.text)) children = data.text;
-      else if (isString(data.innerHtml)) {
-         props.dangerouslySetInnerHTML = { __html: data.innerHtml };
-      } else {
-         children = this.renderChildren(context, instance);
-         if (children && isArray(children) && children.length == 0) children = undefined;
-      }
-
-      props.children = children;
-
-      this.attachProps(context, instance, props);
-
-      if (this.tooltip || this.onRef || this.autoFocus)
-         return (
-            <ContainerComponent key={key} tag={this.tag} props={props} instance={instance} data={data}>
-               {props.children}
-            </ContainerComponent>
-         );
-
-      return VDOM.createElement(this.tag, props, props.children);
-   }
-}
-
-HtmlElement.prototype.tag = "div";
-HtmlElement.prototype.styled = true;
-
-class ContainerComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.ref = (c) => {
-         this.el = c;
-         let { instance } = this.props;
-         if (instance.widget.onRef) {
-            instance.invoke("onRef", c, instance);
-         }
-      };
-   }
-
-   render() {
-      let { tag, props, children, instance } = this.props;
-      let { widget } = instance;
-
-      props.ref = this.ref;
-
-      if (widget.tooltip) {
-         let { onMouseLeave, onMouseMove } = props;
-
-         props.onMouseLeave = (e) => {
-            tooltipMouseLeave(e, instance, widget.tooltip);
-            if (onMouseLeave) onMouseLeave(e);
-         };
-         props.onMouseMove = (e) => {
-            tooltipMouseMove(e, instance, widget.tooltip);
-            if (onMouseMove) onMouseMove(e);
-         };
-      }
-
-      return VDOM.createElement(tag, props, children);
-   }
-
-   componentWillUnmount() {
-      tooltipParentWillUnmount(this.props.instance);
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      tooltipParentWillReceiveProps(this.el, props.instance, this.props.instance.widget.tooltip);
-   }
-
-   componentDidMount() {
-      tooltipParentDidMount(this.el, this.props.instance, this.props.instance.widget.tooltip);
-      autoFocus(this.el, this);
-   }
-
-   componentDidUpdate() {
-      tooltipParentDidUpdate(this.el, this.props.instance, this.props.instance.widget.tooltip);
-      autoFocus(this.el, this);
-   }
-}
-
-let originalWidgetFactory = Widget.factory;
-
-//support for React components
-Widget.factory = function (type, config, more) {
-   let typeType = typeof type;
-
-   if (typeType == "undefined") {
-      debug("Creating a widget of unknown type.", config, more);
-      return new HtmlElement(Object.assign({}, config, more));
-   }
-
-   if (typeType == "function") return HtmlElement.create(HtmlElement, { tag: type }, config);
-
-   return originalWidgetFactory.call(Widget, type, config, more);
-};
-
-Widget.alias("html-element", HtmlElement);
diff --git a/packages/cx/src/widgets/HtmlElement.spec.helpers.tsx b/packages/cx/src/widgets/HtmlElement.spec.helpers.tsx
new file mode 100644
index 000000000..e7e079c7d
--- /dev/null
+++ b/packages/cx/src/widgets/HtmlElement.spec.helpers.tsx
@@ -0,0 +1,108 @@
+/** @jsxImportSource react */
+import React from "react";
+
+// Function component
+export function ReactFunctionComponent(props: { title: string; children?: React.ReactNode }) {
+   return (
+      <div className="react-function-component">
+         <h3>{props.title}</h3>
+         <div className="content">{props.children}</div>
+      </div>
+   );
+}
+
+// Function component with hooks
+export function ReactCounterComponent(props: { initialCount?: number }) {
+   const [count, setCount] = React.useState(props.initialCount ?? 0);
+   return (
+      <div className="react-counter">
+         <span className="count">{count}</span>
+         <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
+   );
+}
+
+// Class component
+export class ReactClassComponent extends React.Component<
+   { label: string; children?: React.ReactNode },
+   { active: boolean }
+> {
+   constructor(props: { label: string; children?: React.ReactNode }) {
+      super(props);
+      this.state = { active: false };
+   }
+
+   render() {
+      return (
+         <div className={`react-class-component ${this.state.active ? "active" : ""}`}>
+            <label>{this.props.label}</label>
+            <div className="body">{this.props.children}</div>
+         </div>
+      );
+   }
+}
+
+// Pure component
+export class ReactPureComponent extends React.PureComponent<{ value: string }> {
+   render() {
+      return <span className="react-pure-component">{this.props.value}</span>;
+   }
+}
+
+// Function component with useRef and useEffect
+export function ReactRefEffectComponent(props: { onMount?: (element: HTMLDivElement | null) => void }) {
+   const divRef = React.useRef<HTMLDivElement>(null);
+   const mountedRef = React.useRef(false);
+
+   React.useEffect(() => {
+      mountedRef.current = true;
+      props.onMount?.(divRef.current);
+      return () => {
+         mountedRef.current = false;
+      };
+   }, []);
+
+   return (
+      <div ref={divRef} className="react-ref-effect-component" data-mounted={mountedRef.current ? "true" : "false"}>
+         Component with ref and effect
+      </div>
+   );
+}
+
+// Function component with useEffect that updates state
+export function ReactEffectStateComponent(props: { value: string }) {
+   const [processed, setProcessed] = React.useState<string>("");
+   const renderCountRef = React.useRef(0);
+
+   React.useEffect(() => {
+      setProcessed(`Processed: ${props.value}`);
+   }, [props.value]);
+
+   renderCountRef.current += 1;
+
+   return (
+      <div className="react-effect-state-component">
+         <span className="processed">{processed}</span>
+         <span className="render-count">{renderCountRef.current}</span>
+      </div>
+   );
+}
+
+// Component for testing prop translation
+export function ReactPropsComponent(props: {
+   text: string;
+   count: number;
+   enabled: boolean;
+   tags?: string[];
+   onClick?: () => void;
+}) {
+   return (
+      <div className="react-props-component">
+         <span className="text">{props.text}</span>
+         <span className="count">{props.count}</span>
+         <span className="enabled">{props.enabled ? "yes" : "no"}</span>
+         {props.tags && <span className="tags">{props.tags.join(", ")}</span>}
+         {props.onClick && <button onClick={props.onClick}>Click</button>}
+      </div>
+   );
+}
diff --git a/packages/cx/src/widgets/HtmlElement.spec.js b/packages/cx/src/widgets/HtmlElement.spec.js
deleted file mode 100644
index 3d63bb213..000000000
--- a/packages/cx/src/widgets/HtmlElement.spec.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Cx } from '../ui/Cx';
-import { VDOM } from '../ui/Widget';
-import { HtmlElement } from './HtmlElement';
-import { Store } from '../data/Store';
-
-import renderer from 'react-test-renderer';
-import assert from 'assert';
-
-describe('HtmlElement', () => {
-
-   it('renders textual content provided through the text property', () => {
-
-      let widget = <cx>
-         <div text:bind="text" />
-      </cx>;
-
-      let store = new Store({
-         data: {
-            text: 'Test'
-         }
-      });
-
-      const component = renderer.create(
-         <Cx widget={widget} store={store} />
-      );
-
-      let tree = component.toJSON();
-      assert.equal(tree.type, 'div');
-      assert.deepEqual(tree.children, ['Test']);
-   });
-
-   it('allows spread bindings', () => {
-
-      let store = new Store({
-         data: {
-            title: 'title'
-         }
-      });
-
-      const component = renderer.create(
-         <Cx store={store}>
-            <a href="#" {...{title: {bind:"title"}}}>Link</a>
-         </Cx>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: 'a',
-         children: ['Link'],
-         props: {
-            href: '#',
-            title: 'title'
-         }
-      })
-   });
-});
-
diff --git a/packages/cx/src/widgets/HtmlElement.spec.tsx b/packages/cx/src/widgets/HtmlElement.spec.tsx
new file mode 100644
index 000000000..375b65c7c
--- /dev/null
+++ b/packages/cx/src/widgets/HtmlElement.spec.tsx
@@ -0,0 +1,89 @@
+import { Store } from "../data/Store";
+import assert from "assert";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { bind } from "../ui/bind";
+import { VDOM } from "../ui/Widget";
+
+describe("HtmlElement", () => {
+   it("renders textual content provided through the text property", async () => {
+      let widget = (
+         <cx>
+            <div text={bind("text")} />
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            text: "Test",
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.deepEqual(tree.children, ["Test"]);
+   });
+
+   it("allows spread bindings", async () => {
+      let store = new Store({
+         data: {
+            title: "title",
+         },
+      });
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <a href="#" {...{ title: { bind: "title" } }}>
+               Link
+            </a>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "a",
+         children: ["Link"],
+         props: {
+            href: "#",
+            title: "title",
+         },
+      });
+   });
+
+   it("supports SVG elements with camelCase attributes", async () => {
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <svg>
+               <path
+                  d="M200,176V64a23.9,23.9,0,0,0-24-24H40"
+                  fill="none"
+                  stroke="#343434"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="12"
+               />
+            </svg>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "svg");
+      assert(tree.children && tree.children.length === 1, "Expected one child");
+      let path = tree.children[0] as any;
+      assert.equal(path.type, "path");
+      assert.equal(path.props.d, "M200,176V64a23.9,23.9,0,0,0-24-24H40");
+      assert.equal(path.props.fill, "none");
+      assert.equal(path.props.stroke, "#343434");
+      assert.equal(path.props.strokeLinecap, "round");
+      assert.equal(path.props.strokeLinejoin, "round");
+      assert.equal(path.props.strokeWidth, "12");
+   });
+});
diff --git a/packages/cx/src/widgets/HtmlElement.tsx b/packages/cx/src/widgets/HtmlElement.tsx
new file mode 100644
index 000000000..59ef9e8a3
--- /dev/null
+++ b/packages/cx/src/widgets/HtmlElement.tsx
@@ -0,0 +1,407 @@
+/** @jsxImportSource react */
+
+import type { JSX as ReactJSX } from "react";
+import { Url } from "../ui/app/Url";
+import { ChildNode, StyledContainerBase, StyledContainerConfig } from "../ui/Container";
+import type { RenderProps, WidgetData } from "../ui/Instance";
+import { Instance } from "../ui/Instance";
+import { BooleanProp, ClassProp, NumberProp, Prop, StringProp, StructuredProp } from "../ui/Prop";
+import type { CxChild, RenderingContext } from "../ui/RenderingContext";
+import { VDOM, Widget } from "../ui/Widget";
+import { debug } from "../util/Debug";
+import { isArray } from "../util/isArray";
+import { isDefined } from "../util/isDefined";
+import { isString } from "../util/isString";
+import { isUndefined } from "../util/isUndefined";
+import { autoFocus } from "./autoFocus";
+import type { TooltipInstance } from "./overlay/Tooltip";
+import type { TooltipConfig, TooltipProp } from "./overlay/tooltip-ops";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentDidMount,
+   tooltipParentDidUpdate,
+   TooltipParentInstance,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+} from "./overlay/tooltip-ops";
+
+const isDataAttribute = (attr: string): string | false => (attr.indexOf("data-") === 0 ? attr.substring(5) : false);
+
+export let urlAttributes: Record<string, boolean> = {
+   "a.href": true,
+   "img.src": true,
+   "iframe.src": true,
+};
+
+type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
+
+// Check if a key is an event handler (starts with "on" and is a function)
+// Use NonNullable to handle optional event handlers (T | undefined)
+type IsEventHandler<K, T> = K extends `on${string}` ? (NonNullable<T> extends Function ? true : false) : false;
+
+// CxJS event handler type - can be string (controller method) or callback with Instance
+type CxEventHandler<T> = T extends (event: infer E) => any
+   ? string | ((event: E, instance: Instance) => void)
+   : T extends undefined
+     ? undefined
+     : string | T;
+
+// Transform React element props to CxJS props
+// Note: For string literal union props (like SVG's strokeLinecap), we also accept `string`
+// because TypeScript widens string literals to `string` in JSX attribute syntax.
+// This is a known TypeScript behavior where `<path strokeLinecap="round"/>` infers "round" as string.
+type TransformHtmlElementProps<T> = {
+   [K in keyof T]: K extends "children"
+      ? ChildNode | ChildNode[]
+      : K extends "className" | "class"
+        ? ClassProp
+        : IsEventHandler<K, T[K]> extends true
+          ? CxEventHandler<T[K]>
+          : string extends T[K]
+            ? Prop<T[K]> // Plain string props - no change needed
+            : NonNullable<T[K]> extends string
+              ? Prop<T[K]> | string // String literal unions - accept string for JSX compatibility
+              : Prop<T[K]>;
+};
+
+/** Base HtmlElement configuration - core CxJS properties for extension by widgets */
+export interface HtmlElementConfigBase extends StyledContainerConfig {
+   id?: StringProp | NumberProp;
+
+   /** HTML tag name */
+   tag?: string;
+
+   /** Inner text contents. */
+   text?: StringProp | NumberProp;
+
+   /** Inner html contents. */
+   innerHtml?: StringProp;
+
+   /** Inner html contents. */
+   html?: StringProp;
+
+   /** Tooltip configuration. */
+   tooltip?: StringProp | TooltipConfig;
+
+   /** Additional attributes to be applied. */
+   attrs?: StructuredProp;
+
+   /** Additional data attributes. */
+   data?: StructuredProp;
+
+   //** Set to true to automatically focus the element when mounted. */
+   autoFocus?: BooleanProp;
+
+   //** Callback to receive the HTMLElement where this component is mounted. */
+   onRef?: string | ((element: HTMLElement | null, instance: Instance) => void);
+}
+
+/** HtmlElement configuration with tag-specific attributes and events */
+export type HtmlElementConfig<Tag extends keyof ReactIntrinsicElements = "div"> = Omit<HtmlElementConfigBase, "tag"> &
+   TransformHtmlElementProps<ReactIntrinsicElements[Tag]> & { tag?: Tag };
+
+export class HtmlElementInstance<E extends HtmlElement<any, any> = HtmlElement<any, any>>
+   extends Instance<E>
+   implements TooltipParentInstance
+{
+   events?: Record<string, (e: React.SyntheticEvent, instance: Instance) => any>;
+   declare tooltips: { [key: string]: TooltipInstance };
+}
+
+export class HtmlElement<
+   Config extends HtmlElementConfigBase = HtmlElementConfig,
+   InstanceType extends HtmlElementInstance<any> = HtmlElementInstance<any>,
+> extends StyledContainerBase<Config, InstanceType> {
+   declare public tag?: string;
+   declare public html?: string;
+   declare public innerText?: string;
+   declare public text?: string;
+   declare public innerHtml?: string;
+   declare public attrs?: Record<string, unknown>;
+   declare public data?: Record<string, unknown>;
+   declare public events?: Record<string, (e: Event, instance: Instance) => unknown>;
+   declare public urlAttributes?: string[];
+   declare public extraProps?: Record<string, unknown>;
+   declare public tooltip?: TooltipProp;
+   declare public onRef?: string | ((element: HTMLElement | null, instance: Instance) => void);
+   declare public autoFocus?: boolean | string;
+   [key: string]: unknown; // Index signature for dynamic properties
+
+   constructor(config?: Config) {
+      super(config);
+
+      if (isUndefined(this.jsxAttributes) && config)
+         this.jsxAttributes = Object.keys(config).filter(this.isValidHtmlAttribute.bind(this));
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      const data: Record<string, unknown> = {
+         text: undefined,
+         innerHtml: undefined,
+         attrs: {
+            structured: true,
+         },
+         data: {
+            structured: true,
+         },
+         autoFocus: undefined,
+      };
+
+      let name: string | false;
+
+      this.urlAttributes = [];
+
+      if (this.jsxAttributes) {
+         this.jsxAttributes.forEach((attr) => {
+            if (urlAttributes[`${this.tag}.${attr}`]) this.urlAttributes!.push(attr);
+
+            if ((name = isDataAttribute(attr))) {
+               if (!this.data) this.data = {};
+               this.data[name] = this[attr];
+            } else if ((name = this.isValidHtmlAttribute(attr)) && !data.hasOwnProperty(name)) {
+               if (name.indexOf("on") === 0) {
+                  if (this[attr]) {
+                     if (!this.events) this.events = {};
+                     this.events[name] = this[attr] as (e: Event, instance: Instance) => unknown;
+                  }
+               } else {
+                  if (!this.attrs) this.attrs = {};
+                  this.attrs[name] = this[attr];
+               }
+            }
+         });
+      }
+
+      if (this.urlAttributes.length === 0) delete this.urlAttributes;
+
+      // Combine args array with data object for super call
+      super.declareData(...args, data);
+   }
+
+   isValidHtmlAttribute(attrName: string): string | false {
+      switch (attrName) {
+         case "tag":
+         case "type":
+         case "$type":
+         case "$props":
+         case "text":
+         case "layout":
+         case "class":
+         case "className":
+         case "style":
+         case "controller":
+         case "outerLayout":
+         case "items":
+         case "children":
+         case "visible":
+         case "if":
+         case "mod":
+         case "putInto":
+         case "contentFor":
+         case "trimWhitespace":
+         case "preserveWhitespace":
+         case "ws":
+         case "plainText":
+         case "vertical":
+         case "memoize":
+         case "onInit":
+         case "onExplore":
+         case "onDestroy":
+         case "onRef":
+         case "html":
+         case "innerText":
+         case "baseClass":
+         case "CSS":
+         case "tooltip":
+         case "styles":
+         case "jsxAttributes":
+         case "jsxSpread":
+         case "instance":
+         case "store":
+         case "autoFocus":
+         case "vdomKey":
+            return false;
+
+         default:
+            if (isDataAttribute(attrName)) return false;
+            break;
+      }
+
+      return attrName;
+   }
+
+   init(): void {
+      if (this.html) this.innerHtml = this.html;
+
+      if (this.innerText) this.text = this.innerText;
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: InstanceType): void {
+      const { data } = instance;
+      if (this.urlAttributes && data.attrs) {
+         data.attrs = { ...data.attrs };
+         this.urlAttributes.forEach((attr: string) => {
+            const attrValue = (data.attrs as Record<string, unknown>)[attr];
+            if (isString(attrValue)) {
+               (data.attrs as Record<string, unknown>)[attr] = Url.resolve(attrValue);
+            }
+         });
+      }
+      super.prepareData(context, instance);
+   }
+
+   attachProps(context: RenderingContext, instance: InstanceType, props: RenderProps): void {
+      Object.assign(props, this.extraProps);
+
+      if (!isString(this.tag)) props.instance = instance;
+   }
+
+   render(context: RenderingContext, instance: InstanceType, key: string): React.ReactNode {
+      //rebind events to pass instance
+      if (this.events && !instance.events) {
+         instance.events = {};
+         for (const eventName in this.events) {
+            const handler = this.events[eventName];
+            instance.events[eventName] = (e: React.SyntheticEvent) => instance.invoke(eventName, e, instance);
+         }
+      }
+
+      const { data, events } = instance;
+
+      const props: RenderProps = Object.assign(
+         {
+            key: key,
+         },
+         data.attrs,
+         events,
+      );
+
+      if (data.classNames) props.className = data.classNames as string;
+
+      if (data.style) props.style = data.style as Record<string, string | number>;
+
+      let children: CxChild;
+      if (isDefined(data.text)) children = data.text;
+      else if (isString(data.innerHtml)) {
+         props.dangerouslySetInnerHTML = { __html: data.innerHtml };
+      } else {
+         children = this.renderChildren(context, instance);
+         if (children && isArray(children) && children.length === 0) children = undefined;
+      }
+
+      props.children = children;
+
+      this.attachProps(context, instance, props);
+
+      if (this.tooltip || this.onRef || this.autoFocus)
+         return (
+            <ContainerComponent key={key} tag={this.tag!} props={props} instance={instance} data={data}>
+               {props.children as React.ReactNode}
+            </ContainerComponent>
+         );
+
+      return VDOM.createElement(this.tag!, props, props.children as React.ReactNode);
+   }
+}
+
+HtmlElement.prototype.tag = "div";
+
+interface ContainerComponentProps {
+   tag: string | React.ComponentType;
+   props: RenderProps;
+   children: React.ReactNode;
+   instance: HtmlElementInstance;
+   data: WidgetData;
+   key: string;
+}
+
+class ContainerComponent extends VDOM.Component<ContainerComponentProps> {
+   el: HTMLElement | null = null;
+   declare ref: (c: HTMLElement | null) => void;
+
+   constructor(props: ContainerComponentProps) {
+      super(props);
+      this.ref = (c: HTMLElement | null) => {
+         this.el = c;
+         const { instance } = this.props;
+         const widget = instance.widget as HtmlElement;
+         if (widget.onRef) {
+            instance.invoke("onRef", c, instance);
+         }
+      };
+   }
+
+   render(): React.ReactNode {
+      const { tag, props, children, instance } = this.props;
+      const widget = instance.widget as HtmlElement;
+
+      props.ref = this.ref;
+
+      if (widget.tooltip) {
+         const { onMouseLeave, onMouseMove } = props;
+
+         props.onMouseLeave = (e: React.MouseEvent) => {
+            tooltipMouseLeave(e, instance, widget.tooltip!);
+            if (onMouseLeave) onMouseLeave(e);
+         };
+         props.onMouseMove = (e: React.MouseEvent) => {
+            tooltipMouseMove(e, instance, widget.tooltip!);
+            if (onMouseMove) onMouseMove(e);
+         };
+      }
+
+      return VDOM.createElement(tag, props, children);
+   }
+
+   componentWillUnmount(): void {
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   UNSAFE_componentWillReceiveProps(props: ContainerComponentProps): void {
+      const widget = this.props.instance.widget as HtmlElement;
+      if (this.el && widget.tooltip) {
+         tooltipParentWillReceiveProps(this.el, props.instance, widget.tooltip);
+      }
+   }
+
+   componentDidMount(): void {
+      const widget = this.props.instance.widget as HtmlElement;
+      if (this.el && widget.tooltip) {
+         tooltipParentDidMount(this.el, this.props.instance, widget.tooltip);
+      }
+      autoFocus(this.el, this);
+   }
+
+   componentDidUpdate(): void {
+      const widget = this.props.instance.widget as HtmlElement;
+      if (this.el && widget.tooltip) {
+         tooltipParentDidUpdate(this.el, this.props.instance, widget.tooltip);
+      }
+      autoFocus(this.el, this);
+   }
+}
+
+const originalWidgetFactory = Widget.factory;
+
+//support for React components
+Widget.factory = function (
+   type: string | React.ComponentType | undefined,
+   config?: Record<string, unknown>,
+   more?: Record<string, unknown>,
+) {
+   const typeType = typeof type;
+
+   if (typeType === "undefined") {
+      debug("Creating a widget of unknown type.", config, more);
+      return new HtmlElement(Object.assign({}, config, more));
+   }
+
+   if (typeType === "function") return HtmlElement.create(HtmlElement, { tag: type }, config);
+
+   return originalWidgetFactory.call(Widget, type as string, config, more);
+};
+
+Widget.alias("html-element", HtmlElement);
diff --git a/packages/cx/src/widgets/Icon.d.ts b/packages/cx/src/widgets/Icon.d.ts
deleted file mode 100644
index d12d7a5e7..000000000
--- a/packages/cx/src/widgets/Icon.d.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as Cx from "../core";
-
-interface IconProps extends Cx.WidgetProps {
-   /** Name under which the icon is registered. */
-   name?: Cx.StringProp;
-
-   /** Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list. */
-   className?: Cx.ClassProp;
-
-   /** Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list. */
-   class?: Cx.ClassProp;
-
-   /** Style object applied to the wrapper div. Used for setting the dimensions of the field. */
-   style?: Cx.StyleProp;
-
-   /** Base CSS class to be applied to the element. Default is `icon`. */
-   baseClass?: string;
-}
-
-export class Icon extends Cx.Widget<IconProps> {
-   static restoreDefaultIcons();
-
-   static clear();
-
-   static register(name: string, icon: any, defaultIcon?: boolean);
-
-   static unregister(...args: string[]);
-
-   static registerFactory(factory: (name: string, props: { [key: string]: any }) => any);
-
-   static render(name: string, props: { [key: string]: any });
-}
diff --git a/packages/cx/src/widgets/Icon.js b/packages/cx/src/widgets/Icon.js
deleted file mode 100644
index 445b6ee6e..000000000
--- a/packages/cx/src/widgets/Icon.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Widget, VDOM } from '../ui/Widget';
-import { registerIcon, registerIconFactory, clearIcons, unregisterIcon, renderIcon, restoreDefaultIcons } from './icons/registry';
-import "./icons/index";
-
-
-export class Icon extends Widget {
-   declareData() {
-      super.declareData(...arguments, {
-         name: undefined
-      })
-   }
-
-   render(context, instance, key) {
-      let {data} = instance;
-      return renderIcon(data.name, {
-         key: key,
-         className: data.classNames,
-         style: data.style
-      });
-   }
-
-   static register(name, icon, defaultIcon = false) {
-      return registerIcon(name, icon, defaultIcon);
-   }
-
-   static unregister(...args) {
-      return unregisterIcon(...args);
-   }
-
-   static render(name, props) {
-      return renderIcon(name, props);
-   }
-
-   static clear() {
-      return clearIcons();
-   }
-
-   static registerFactory(factory) {
-      return registerIconFactory(factory);
-   }
-
-   static restoreDefaultIcons() {
-      restoreDefaultIcons();
-   }
-}
-
-Icon.prototype.baseClass = "icon";
-Icon.prototype.styled = true;
-
-Widget.alias('icon', Icon);
diff --git a/packages/cx/src/widgets/Icon.scss b/packages/cx/src/widgets/Icon.scss
index 08fab7aa2..bc5b61763 100644
--- a/packages/cx/src/widgets/Icon.scss
+++ b/packages/cx/src/widgets/Icon.scss
@@ -1,8 +1,10 @@
+@use "sass:map";
+
 @mixin cx-icon($name: "icon", $size: $cx-default-icon-size, $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       width: $size;
diff --git a/packages/cx/src/widgets/Icon.ts b/packages/cx/src/widgets/Icon.ts
new file mode 100644
index 000000000..a37175533
--- /dev/null
+++ b/packages/cx/src/widgets/Icon.ts
@@ -0,0 +1,64 @@
+import { Widget, VDOM, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
+import {
+   registerIcon,
+   registerIconFactory,
+   clearIcons,
+   unregisterIcon,
+   renderIcon,
+   restoreDefaultIcons,
+} from "./icons/registry";
+import "./icons/index";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp } from "../ui/Prop";
+
+export interface IconConfig extends WidgetConfig, WidgetStyleConfig {
+   /** Name under which the icon is registered. */
+   name?: StringProp;
+}
+
+export class Icon extends Widget<IconConfig> {
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         name: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data } = instance;
+      return renderIcon(data.name, {
+         key: key,
+         className: data.classNames,
+         style: data.style,
+      });
+   }
+
+   static register(name: string, icon: any, defaultIcon: boolean = false) {
+      return registerIcon(name, icon, defaultIcon);
+   }
+
+   static unregister(...args: string[]) {
+      return unregisterIcon(...args);
+   }
+
+   static render(name: string, props: Record<string, any>): React.ReactNode {
+      return renderIcon(name, props);
+   }
+
+   static clear() {
+      return clearIcons();
+   }
+
+   static registerFactory(factory: (name: string, props: Record<string, any>) => any) {
+      return registerIconFactory(factory);
+   }
+
+   static restoreDefaultIcons() {
+      restoreDefaultIcons();
+   }
+}
+
+Icon.prototype.baseClass = "icon";
+Icon.prototype.styled = true;
+
+Widget.alias('icon', Icon);
diff --git a/packages/cx/src/widgets/List.d.ts b/packages/cx/src/widgets/List.d.ts
deleted file mode 100644
index 4ffb5924b..000000000
--- a/packages/cx/src/widgets/List.d.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as React from "react";
-import {
-   BooleanProp,
-   ClassProp,
-   CollatorOptions,
-   Config,
-   Prop,
-   RecordAlias,
-   SortersProp,
-   StringProp,
-   StructuredProp,
-   StyledContainerProps,
-   StyleProp,
-   Widget,
-} from "../core";
-import { Instance } from "./../ui/Instance";
-
-type KeyDownPipe = (event: KeyboardEvent) => void;
-
-type PipeKeyDownCallback = (pipe: KeyDownPipe) => void;
-
-interface ListProps<T = unknown> extends StyledContainerProps {
-   /** An array of records to be displayed in the list. */
-   records?: Prop<T[]>;
-
-   /** Used for sorting the list. */
-   sorters?: SortersProp;
-
-   /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
-   sortField?: StringProp;
-
-   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
-   sortDirection?: StringProp;
-
-   /** CSS style that will be applied to all list items. */
-   itemStyle?: StyleProp;
-
-   /** CSS class that will be applied to all list items. */
-   itemClass?: ClassProp;
-
-   /** CSS class that will be applied to all list items. */
-   itemClassName?: ClassProp;
-
-   emptyText?: StringProp;
-
-   /** Grouping configuration. */
-   grouping?: Config;
-
-   recordName?: RecordAlias;
-   indexName?: RecordAlias;
-
-   /** Base CSS class to be applied to the element. Defaults to 'list'. */
-   baseClass?: string;
-
-   focusable?: boolean;
-   focused?: boolean;
-   itemPad?: boolean;
-   cached?: boolean;
-
-   /** Selection configuration. */
-   selection?: Config;
-
-   /** Parameters that affect filtering */
-   filterParams?: StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance: Instance) => (record: T) => boolean;
-
-   /** Scrolls selection into the view. Default value is false. */
-   scrollSelectionIntoView?: boolean;
-
-   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
-   sortOptions?: CollatorOptions;
-
-   /** Parameter used for disabling specific items in the list. */
-   itemDisabled?: BooleanProp;
-
-   /** Lists in this mode perform selection automatically without offering cursor navigation. */
-   selectMode?: boolean;
-
-   /** If this field is set to true pressing the Tab key will select the item under cursor. */
-   selectOnTab?: boolean;
-
-   /** Callback to be invoked when the list is being scrolled. Useful for loading additional items. */
-   onScroll?: (event: Event, instance: Instance) => void;
-
-   onItemClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
-
-   onItemDoubleClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
-
-   pipeKeyDown?: string | PipeKeyDownCallback;
-
-   keyField?: string;
-}
-
-export class List<T = unknown> extends Widget<ListProps<T>> {}
diff --git a/packages/cx/src/widgets/List.js b/packages/cx/src/widgets/List.js
deleted file mode 100644
index 1573c1d66..000000000
--- a/packages/cx/src/widgets/List.js
+++ /dev/null
@@ -1,594 +0,0 @@
-import { Widget, VDOM, getContent } from "../ui/Widget";
-import { PureContainer } from "../ui/PureContainer";
-import { GroupAdapter } from "../ui/adapter/GroupAdapter";
-import { Binding, isBinding } from "../data/Binding";
-import { Selection } from "../ui/selection/Selection";
-import { KeyCode } from "../util/KeyCode";
-import { scrollElementIntoView } from "../util/scrollElementIntoView";
-import { FocusManager, oneFocusOut, offFocusOut, preventFocusOnTouch } from "../ui/FocusManager";
-import { isString } from "../util/isString";
-import { isArray } from "../util/isArray";
-import { getAccessor } from "../data/getAccessor";
-import { batchUpdates } from "../ui/batchUpdates";
-import { Container } from "../ui/Container";
-import { addEventListenerWithOptions } from "../util/addEventListenerWithOptions";
-
-/*
- - renders list of items
- - focusable (keyboard navigation)
- - selection
- - fake focus - list appears focused and receives keyboard inputs redirected from other control (dropdown scenario)
- */
-
-export class List extends Widget {
-   init() {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.indexAlias) this.indexName = this.indexAlias;
-
-      this.adapter = GroupAdapter.create(this.adapter || GroupAdapter, {
-         recordName: this.recordName,
-         indexName: this.indexName,
-         recordsAccessor: getAccessor(this.records),
-         keyField: this.keyField,
-         sortOptions: this.sortOptions,
-      });
-
-      this.child = ListItem.create({
-         layout: this.layout,
-         items: this.items,
-         children: this.children,
-         styled: true,
-         class: this.itemClass,
-         className: this.itemClassName,
-         style: this.itemStyle,
-         disabled: this.itemDisabled,
-         ...this.item,
-      });
-
-      delete this.children;
-
-      this.selection = Selection.create(this.selection, {
-         records: this.records,
-      });
-
-      super.init();
-
-      if (this.grouping) {
-         this.groupBy(this.grouping);
-      }
-   }
-
-   initInstance(context, instance) {
-      this.adapter.initInstance(context, instance);
-   }
-
-   declareData() {
-      let selection = this.selection.configureWidget(this);
-
-      super.declareData(
-         selection,
-         {
-            records: undefined,
-            sorters: undefined,
-            sortField: undefined,
-            sortDirection: undefined,
-            filterParams: {
-               structured: true,
-            },
-            itemStyle: {
-               structured: true,
-            },
-            emptyText: undefined,
-            tabIndex: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.sortField)
-         data.sorters = [
-            {
-               field: data.sortField,
-               direction: data.sortDirection || "ASC",
-            },
-         ];
-      this.adapter.sort(data.sorters);
-
-      let filter = null;
-      if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
-      else if (this.filter) filter = (item) => this.filter(item, data.filterParams);
-      this.adapter.setFilter(filter);
-      instance.mappedRecords = this.adapter.getRecords(context, instance, data.records, instance.store);
-
-      data.stateMods = Object.assign(data.stateMods || {}, {
-         selectable: !this.selection.isDummy || this.onItemClick,
-         empty: instance.mappedRecords.length == 0,
-      });
-
-      super.prepareData(context, instance);
-   }
-
-   applyParentStore(instance) {
-      super.applyParentStore(instance);
-
-      // force prepareData to execute again and propagate the store change to the records
-      if (instance.cached) delete instance.cached.rawData;
-   }
-
-   explore(context, instance, data) {
-      let instances = [];
-      let isSelected = this.selection.getIsSelectedDelegate(instance.store);
-      instance.mappedRecords.forEach((record) => {
-         if (record.type == "data") {
-            let itemInstance = instance.getChild(context, this.child, record.key, record.store);
-            itemInstance.record = record;
-            itemInstance.selected = isSelected(record.data, record.index);
-
-            let changed = false;
-            if (itemInstance.cache("recordData", record.data)) changed = true;
-            if (itemInstance.cache("selected", itemInstance.selected)) changed = true;
-
-            if (this.cached && !changed && itemInstance.visible && !itemInstance.childStateDirty) {
-               instances.push(itemInstance);
-               itemInstance.shouldUpdate = false;
-            } else if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
-         } else if (record.type == "group-header" && record.grouping.header) {
-            let itemInstance = instance.getChild(context, record.grouping.header, record.key, record.store);
-            itemInstance.record = record;
-            if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
-         } else if (record.type == "group-footer" && record.grouping.footer) {
-            let itemInstance = instance.getChild(context, record.grouping.footer, record.key, record.store);
-            itemInstance.record = record;
-            if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
-         }
-      });
-      instance.instances = instances;
-   }
-
-   render(context, instance, key) {
-      let items = instance.instances.map((x, i) => ({
-         instance: x,
-         key: x.record.key,
-         type: x.record.type,
-         content: getContent(x.render(context)),
-      }));
-      return (
-         <ListComponent
-            key={key}
-            instance={instance}
-            items={items}
-            selectable={!this.selection.isDummy || this.onItemClick}
-         />
-      );
-   }
-
-   groupBy(grouping) {
-      if (!isArray(grouping)) {
-         if (isString(grouping) || typeof grouping == "object") return this.groupBy([grouping]);
-         throw new Error("DynamicGrouping should be an array of grouping objects");
-      }
-
-      grouping = grouping.map((g, i) => {
-         if (isString(g)) {
-            return {
-               key: {
-                  [g]: {
-                     bind: this.recordName + "." + g,
-                  },
-               },
-            };
-         }
-         return g;
-      });
-
-      grouping.forEach((g) => {
-         if (g.header) g.header = Widget.create(g.header);
-
-         if (g.footer) g.footer = Widget.create(g.footer);
-      });
-
-      this.adapter.groupBy(grouping);
-      this.update();
-   }
-}
-
-List.prototype.recordName = "$record";
-List.prototype.indexName = "$index";
-List.prototype.baseClass = "list";
-List.prototype.focusable = true;
-List.prototype.focused = false;
-List.prototype.itemPad = true;
-List.prototype.cached = false;
-List.prototype.styled = true;
-List.prototype.scrollSelectionIntoView = false;
-List.prototype.selectMode = false;
-List.prototype.selectOnTab = false;
-
-Widget.alias("list", List);
-
-class ListComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      let { widget } = props.instance;
-      let { focused } = widget;
-      this.state = {
-         cursor: focused && props.selectable ? 0 : -1,
-         focused: focused,
-      };
-
-      this.handleItemMouseDown = this.handleItemMouseDown.bind(this);
-      this.handleItemDoubleClick = this.handleItemDoubleClick.bind(this);
-      this.handleItemClick = this.handleItemClick.bind(this);
-   }
-
-   shouldComponentUpdate(props, state) {
-      return props.instance.shouldUpdate || state != this.state;
-   }
-
-   componentDidMount() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.pipeKeyDown) {
-         instance.invoke("pipeKeyDown", this.handleKeyDown.bind(this), instance);
-         this.showCursor();
-      }
-
-      if (widget.autoFocus) FocusManager.focus(this.el);
-
-      if (widget.onScroll) {
-         this.unsubscribeScroll = addEventListenerWithOptions(
-            this.el,
-            "scroll",
-            (event) => {
-               instance.invoke("onScroll", event, instance);
-            },
-            { passive: true },
-         );
-      }
-
-      this.componentDidUpdate();
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      if (this.state.focused && props.instance.widget.selectMode) this.showCursor(true, props.items);
-      else if (this.state.cursor >= props.items.length) this.moveCursor(props.items.length - 1);
-      else if (this.state.focused && this.state.cursor < 0) this.moveCursor(0);
-   }
-
-   componentWillUnmount() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      offFocusOut(this);
-      if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", null, instance);
-   }
-
-   handleItemMouseDown(e) {
-      let index = Number(e.currentTarget.dataset.recordIndex);
-      this.moveCursor(index);
-      if (e.shiftKey) e.preventDefault();
-
-      this.moveCursor(index, {
-         select: true,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         selectRange: e.shiftKey,
-      });
-   }
-
-   handleItemClick(e) {
-      let { instance, items } = this.props;
-      let index = Number(e.currentTarget.dataset.recordIndex);
-      let item = items[this.cursorChildIndex[index]];
-      if (instance.invoke("onItemClick", e, item.instance) === false) return;
-
-      this.moveCursor(index, {
-         select: true,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         selectRange: e.shiftKey,
-      });
-   }
-
-   handleItemDoubleClick(e) {
-      let { instance, items } = this.props;
-      let index = Number(e.currentTarget.dataset.recordIndex);
-      let item = items[this.cursorChildIndex[index]];
-      instance.invoke("onItemDoubleClick", e, item.instance);
-   }
-
-   render() {
-      let { instance, items, selectable } = this.props;
-      let { data, widget } = instance;
-      let { CSS, baseClass } = widget;
-      let itemStyle = CSS.parseStyle(data.itemStyle);
-      this.cursorChildIndex = [];
-      let cursorIndex = 0;
-
-      let onDblClick, onClick;
-
-      if (widget.onItemClick) onClick = this.handleItemClick;
-
-      if (widget.onItemDoubleClick) onDblClick = this.handleItemDoubleClick;
-
-      let children =
-         items.length > 0 &&
-         items.map((x, i) => {
-            let { data, selected } = x.instance;
-            let className;
-
-            if (x.type == "data") {
-               let ind = cursorIndex++;
-
-               this.cursorChildIndex.push(i);
-               className = CSS.element(baseClass, "item", {
-                  selected: selected,
-                  cursor: ind == this.state.cursor,
-                  pad: widget.itemPad,
-                  disabled: data.disabled,
-               });
-
-               return (
-                  <li
-                     key={x.key}
-                     className={CSS.expand(className, data.classNames)}
-                     style={itemStyle}
-                     data-record-index={ind}
-                     onMouseDown={this.handleItemMouseDown}
-                     onClick={onClick}
-                     onDoubleClick={onDblClick}
-                  >
-                     {x.content}
-                  </li>
-               );
-            } else {
-               return (
-                  <li key={x.key} className={CSS.element(baseClass, x.type)}>
-                     {x.content}
-                  </li>
-               );
-            }
-         });
-
-      if (!children && data.emptyText) {
-         children = <li className={CSS.element(baseClass, "empty-text")}>{data.emptyText}</li>;
-      }
-
-      return (
-         <ul
-            ref={(el) => {
-               this.el = el;
-            }}
-            className={CSS.expand(data.classNames, CSS.state({ focused: this.state.focused }))}
-            style={data.style}
-            tabIndex={widget.focusable && selectable && items.length > 0 ? data.tabIndex || 0 : null}
-            onMouseDown={preventFocusOnTouch}
-            onKeyDown={this.handleKeyDown.bind(this)}
-            onMouseLeave={this.handleMouseLeave.bind(this)}
-            onFocus={this.onFocus.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-         >
-            {children}
-         </ul>
-      );
-   }
-
-   componentDidUpdate() {
-      let { widget } = this.props.instance;
-      if (widget.scrollSelectionIntoView) {
-         //The timeout is reqired for use-cases when parent needs to do some measuring that affect scrollbars, i.e. LookupField.
-         setTimeout(() => this.scrollElementIntoView(), 0);
-      }
-   }
-
-   scrollElementIntoView() {
-      if (!this.el) return; //unmount
-      let { widget } = this.props.instance;
-      let { CSS, baseClass } = widget;
-      let selectedRowSelector = `.${CSS.element(baseClass, "item")}.${CSS.state("selected")}`;
-      let firstSelectedRow = this.el.querySelector(selectedRowSelector);
-      if (firstSelectedRow != this.selectedEl) {
-         if (firstSelectedRow) scrollElementIntoView(firstSelectedRow, true, false, 0, this.el);
-         this.selectedEl = firstSelectedRow;
-      }
-   }
-
-   moveCursor(index, { focused, hover, scrollIntoView, select, selectRange, selectOptions } = {}) {
-      let { instance, selectable } = this.props;
-      if (!selectable) return;
-
-      let { widget } = instance;
-      let newState = {};
-      if (widget.focused) focused = true;
-
-      if (focused != null && this.state.focused != focused) newState.focused = focused;
-
-      //ignore mouse enter/leave events (support with a flag if a feature request comes)
-      if (!hover) newState.cursor = index;
-
-      //batch updates to avoid flickering between selection and cursor changes
-      batchUpdates(() => {
-         if (select || widget.selectMode) {
-            let start = selectRange && this.state.selectionStart >= 0 ? this.state.selectionStart : index;
-            if (start < 0) start = index;
-            this.selectRange(start, index, selectOptions);
-            if (!selectRange) newState.selectionStart = index;
-         }
-         if (Object.keys(newState).length > 0) {
-            this.setState(newState, () => {
-               if (scrollIntoView) {
-                  let item = this.el.children[this.cursorChildIndex[index]];
-                  if (item) scrollElementIntoView(item);
-               }
-            });
-         }
-      });
-   }
-
-   selectRange(from, to, options) {
-      let { instance, items } = this.props;
-      let { widget } = instance;
-
-      if (from > to) {
-         let tmp = from;
-         from = to;
-         to = tmp;
-      }
-
-      let selection = [],
-         indexes = [];
-
-      for (let cursor = from; cursor <= to; cursor++) {
-         let item = items[this.cursorChildIndex[cursor]];
-         if (item) {
-            let { record, data } = item.instance;
-            if (data.disabled) continue;
-            selection.push(record.data);
-            indexes.push(record.index);
-         }
-      }
-
-      widget.selection.selectMultiple(instance.store, selection, indexes, options);
-   }
-
-   showCursor(force, newItems) {
-      if (!force && this.state.cursor >= 0) return;
-
-      let items = newItems || this.props.items;
-      let index = -1,
-         firstSelected = -1,
-         firstValid = -1;
-      for (let i = 0; i < items.length; i++) {
-         let item = items[i];
-         if (isDataItem(item)) {
-            index++;
-
-            if (!isItemDisabled(item) && firstValid == -1) firstValid = index;
-            if (item.instance.selected) {
-               firstSelected = index;
-               break;
-            }
-         }
-      }
-      this.moveCursor(firstSelected != -1 ? firstSelected : firstValid, {
-         focusedport: true,
-      });
-   }
-
-   onFocus() {
-      let { widget } = this.props.instance;
-
-      FocusManager.nudge();
-      this.showCursor(widget.selectMode);
-
-      if (!widget.focused)
-         oneFocusOut(this, this.el, () => {
-            this.moveCursor(-1, { focused: false });
-         });
-
-      this.setState({
-         focused: true,
-      });
-   }
-
-   onBlur() {
-      FocusManager.nudge();
-   }
-
-   handleMouseLeave() {
-      let { widget } = this.props.instance;
-      if (!widget.focused) this.moveCursor(-1, { hover: true });
-   }
-
-   handleKeyDown(e) {
-      let { instance, items } = this.props;
-      let { widget } = instance;
-
-      if (this.onKeyDown && instance.invoke("onKeyDown", e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.tab:
-         case KeyCode.enter:
-            if (!widget.selectOnTab && e.keyCode == KeyCode.tab) break;
-            let item = items[this.cursorChildIndex[this.state.cursor]];
-            if (item && widget.onItemClick && instance.invoke("onItemClick", e, item.instance) === false) return;
-            this.moveCursor(this.state.cursor, {
-               select: true,
-               selectOptions: {
-                  toggle: e.ctrlKey && !e.shiftKey,
-                  add: e.ctrlKey && e.shiftKey,
-               },
-               selectRange: e.shiftKey,
-            });
-            break;
-
-         case KeyCode.down:
-            for (let index = this.state.cursor + 1; index < this.cursorChildIndex.length; index++) {
-               let item = items[this.cursorChildIndex[index]];
-               if (!isItemSelectable(item)) continue;
-               this.moveCursor(index, {
-                  focused: true,
-                  scrollIntoView: true,
-                  select: e.shiftKey,
-                  selectRange: e.shiftKey,
-               });
-               e.stopPropagation();
-               e.preventDefault();
-               break;
-            }
-            break;
-
-         case KeyCode.up:
-            for (let index = this.state.cursor - 1; index >= 0; index--) {
-               let item = items[this.cursorChildIndex[index]];
-               if (!isItemSelectable(item)) continue;
-               this.moveCursor(index, {
-                  focused: true,
-                  scrollIntoView: true,
-                  select: e.shiftKey,
-                  selectRange: e.shiftKey,
-               });
-               e.stopPropagation();
-               e.preventDefault();
-               break;
-            }
-            break;
-
-         case KeyCode.a:
-            if (!e.ctrlKey || !widget.selection.multiple) return;
-
-            this.selectRange(0, this.cursorChildIndex.length);
-
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-      }
-   }
-}
-
-class ListItem extends Container {
-   declareData(...args) {
-      super.declareData(...args, {
-         disabled: undefined,
-      });
-   }
-}
-
-function isItemSelectable(item) {
-   return isDataItem(item) && !isItemDisabled(item);
-}
-
-function isDataItem(item) {
-   return item?.type == "data";
-}
-
-function isItemDisabled(item) {
-   return item?.instance.data.disabled;
-}
diff --git a/packages/cx/src/widgets/List.scss b/packages/cx/src/widgets/List.scss
index 3cd6debab..9087e5e02 100644
--- a/packages/cx/src/widgets/List.scss
+++ b/packages/cx/src/widgets/List.scss
@@ -1,8 +1,10 @@
+@use "sass:map";
+
 @mixin cx-list($name: "list", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       list-style: none;
diff --git a/packages/cx/src/widgets/List.tsx b/packages/cx/src/widgets/List.tsx
new file mode 100644
index 000000000..b901dc312
--- /dev/null
+++ b/packages/cx/src/widgets/List.tsx
@@ -0,0 +1,793 @@
+/**@jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import type { RenderingContext } from "../ui/RenderingContext";
+import { getAccessor } from "../data/getAccessor";
+import { GroupAdapter, GroupingConfig } from "../ui/adapter/GroupAdapter";
+import { batchUpdates } from "../ui/batchUpdates";
+import { Container, StyledContainerBase, StyledContainerConfig } from "../ui/Container";
+import { FocusManager, offFocusOut, oneFocusOut, preventFocusOnTouch } from "../ui/FocusManager";
+import { Selection } from "../ui/selection/Selection";
+import { VDOM, Widget, getContent } from "../ui/Widget";
+import { addEventListenerWithOptions } from "../util/addEventListenerWithOptions";
+import { isArray } from "../util/isArray";
+import { isString } from "../util/isString";
+import { KeyCode } from "../util/KeyCode";
+import { scrollElementIntoView } from "../util/scrollElementIntoView";
+import {
+   BooleanProp,
+   ClassProp,
+   CollatorOptions,
+   Prop,
+   RecordAlias,
+   StringProp,
+   StructuredProp,
+   StyleProp,
+} from "../ui/Prop";
+import { Create } from "../util/Component";
+
+export interface ListConfig<T = any> extends StyledContainerConfig {
+   /** An array of records to be displayed in the list. */
+   records?: Prop<T[]>;
+
+   /** Record alias. Default is `$record`. */
+   recordName?: RecordAlias;
+
+   /** Record alias. Alias for `recordName`. Default is `$record`. */
+   recordAlias?: RecordAlias;
+
+   /** Index alias. Default is `$index`. */
+   indexName?: RecordAlias;
+
+   /** Index alias. Alias for `indexName`. Default is `$index`. */
+   indexAlias?: RecordAlias;
+
+   /** Style to be applied to each list item. */
+   itemStyle?: StyleProp;
+
+   /** CSS class to be applied to each list item. */
+   itemClass?: ClassProp;
+
+   /** CSS class to be applied to each list item. */
+   itemClassName?: ClassProp;
+
+   /** Text to be displayed when the list is empty. */
+   emptyText?: StringProp;
+
+   /** A grouping definition, field name, or an array of grouping level definitions. */
+   grouping?: string | GroupingConfig | (string | GroupingConfig)[];
+
+   /** Base CSS class to be applied to the element. Default is 'list'. */
+   baseClass?: string;
+
+   /** Set to `true` to allow focus on the list. */
+   focusable?: BooleanProp;
+
+   /** Boolean for focus state. */
+   focused?: BooleanProp;
+
+   /** Boolean for item padding. */
+   itemPad?: BooleanProp;
+
+   /** Set to `true` to enable row caching. */
+   cached?: BooleanProp;
+
+   /** Selection configuration. */
+   selection?: StructuredProp;
+
+   /** Parameters that affect filtering. */
+   filterParams?: StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
+
+   /** Scroll selection into the view. Default value is false. */
+   scrollSelectionIntoView?: BooleanProp;
+
+   /** Options for data sorting. */
+   sortOptions?: CollatorOptions;
+
+   /** Parameter for disabling specific items. */
+   itemDisabled?: BooleanProp;
+
+   /** Automatic selection without cursor navigation. */
+   selectMode?: BooleanProp;
+
+   /** Tab key selects item under cursor. */
+   selectOnTab?: BooleanProp;
+
+   /** Callback invoked during scrolling. */
+   onScroll?: string | ((event: Event, instance: Instance) => void);
+
+   /** Callback for item click. */
+   onItemClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
+
+   /** Callback for item double click. */
+   onItemDoubleClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
+
+   /** Callback for keyboard down events. */
+   pipeKeyDown?: string | ((handler: ((e: React.KeyboardEvent) => void) | null, instance: Instance) => void);
+
+   /** A field used to get the unique identifier of the record. */
+   keyField?: string;
+
+   /** Data adapter used to convert data in list of records. Used to enable grouping and tree operations. */
+   dataAdapter?: Create<typeof GroupAdapter>;
+}
+
+/*
+ - renders list of items
+ - focusable (keyboard navigation)
+ - selection
+ - fake focus - list appears focused and receives keyboard inputs redirected from other control (dropdown scenario)
+ */
+
+export class List extends StyledContainerBase<ListConfig> {
+   constructor(config?: ListConfig) {
+      super(config);
+   }
+
+   declare public recordAlias?: string;
+   declare public recordName: string;
+   declare public indexAlias?: string;
+   declare public indexName: string;
+   declare public adapter: GroupAdapter;
+   declare public child: ListItem;
+   declare public selection: Selection;
+   declare public itemClass?: string;
+   declare public itemClassName?: string;
+   declare public itemStyle?: string;
+   declare public itemDisabled?: boolean;
+   declare public item?: Widget;
+   declare public layout?: any;
+   declare public keyField?: string;
+   declare public records?: any[];
+   declare public sortOptions?: any;
+   declare public grouping?: string | GroupingConfig | (string | GroupingConfig)[];
+   declare public focusable?: boolean;
+   declare public focused?: boolean;
+   declare public itemPad?: boolean;
+   declare public cached?: boolean;
+   declare public scrollSelectionIntoView?: boolean;
+   declare public selectMode?: boolean;
+   declare public selectOnTab?: boolean;
+   declare public pipeKeyDown?:
+      | string
+      | ((handler: ((e: React.KeyboardEvent) => void) | null, instance: Instance) => void);
+   declare public autoFocus?: boolean;
+   declare public baseClass: string;
+   declare public filter?: (item: unknown, filterParams: Record<string, unknown>) => boolean;
+   declare public onCreateFilter?: (
+      filterParams: Record<string, unknown>,
+      instance: Instance,
+   ) => (record: unknown) => boolean;
+   declare public onItemClick?: (e: React.MouseEvent, instance: Instance) => void;
+   declare public onItemDoubleClick?: (e: React.MouseEvent, instance: Instance) => void;
+   declare public onKeyDown?: (e: React.KeyboardEvent, instance: Instance) => void;
+   declare public onScroll?: (event: Event, instance: Instance) => void;
+   declare public onFocus?: (event: FocusEvent, instance: Instance) => void;
+   declare public onBlur?: (event: FocusEvent, instance: Instance) => void;
+   declare public onMouseLeave?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseEnter?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseMove?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseUp?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseDown?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseOver?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseOut?: (event: React.MouseEvent, instance: Instance) => void;
+
+   init() {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.indexAlias) this.indexName = this.indexAlias;
+
+      this.adapter = GroupAdapter.create(this.adapter || GroupAdapter, {
+         recordName: this.recordName,
+         indexName: this.indexName,
+         recordsAccessor: getAccessor(this.records),
+         keyField: this.keyField,
+         sortOptions: this.sortOptions,
+      });
+
+      this.child = ListItem.create({
+         layout: this.layout,
+         items: this.items,
+         children: this.children,
+         styled: true,
+         class: this.itemClass,
+         className: this.itemClassName,
+         style: this.itemStyle,
+         disabled: this.itemDisabled,
+         ...this.item,
+      }) as ListItem;
+
+      delete this.children;
+
+      this.selection = Selection.create(this.selection, {
+         records: this.records,
+      });
+
+      super.init();
+
+      if (this.grouping) {
+         this.groupBy(this.grouping);
+      }
+   }
+
+   initInstance(context: RenderingContext, instance: Instance) {
+      this.adapter.initInstance(context, instance);
+   }
+
+   declareData() {
+      let selection = this.selection.configureWidget(this);
+
+      super.declareData(
+         selection,
+         {
+            records: undefined,
+            sorters: undefined,
+            sortField: undefined,
+            sortDirection: undefined,
+            filterParams: {
+               structured: true,
+            },
+            itemStyle: {
+               structured: true,
+            },
+            emptyText: undefined,
+            tabIndex: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: Instance) {
+      let { data } = instance;
+
+      if (data.sortField)
+         data.sorters = [
+            {
+               field: data.sortField,
+               direction: data.sortDirection || "ASC",
+            },
+         ];
+      this.adapter.sort(data.sorters);
+
+      let filter = null;
+      if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
+      else if (this.filter) filter = (item: unknown) => this.filter!(item, data.filterParams);
+      this.adapter.setFilter(filter);
+      instance.mappedRecords = this.adapter.getRecords(context, instance, data.records, instance.store);
+
+      data.stateMods = Object.assign(data.stateMods || {}, {
+         selectable: !this.selection.isDummy || this.onItemClick,
+         empty: instance.mappedRecords.length == 0,
+      });
+
+      super.prepareData(context, instance);
+   }
+
+   applyParentStore(instance: Instance) {
+      super.applyParentStore(instance);
+
+      // force prepareData to execute again and propagate the store change to the records
+      if (instance.cached) delete instance.cached.rawData;
+   }
+
+   explore(context: RenderingContext, instance: Instance): void {
+      let instances: Instance[] = [];
+      let isSelected = this.selection.getIsSelectedDelegate(instance.store);
+      instance.mappedRecords!.forEach((record) => {
+         if (record.type == "data") {
+            let itemInstance = instance.getChild(context, this.child, record.key, record.store);
+            itemInstance.record = record;
+            itemInstance.selected = isSelected(record.data, record.index);
+
+            let changed = false;
+            if (itemInstance.cache("recordData", record.data)) changed = true;
+            if (itemInstance.cache("selected", itemInstance.selected)) changed = true;
+
+            if (this.cached && !changed && itemInstance.visible && !itemInstance.childStateDirty) {
+               instances.push(itemInstance);
+               itemInstance.shouldUpdate = false;
+            } else if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
+         } else if (record.type == "group-header" && record.grouping.header) {
+            let itemInstance = instance.getChild(context, record.grouping.header, record.key, record.store);
+            itemInstance.record = record;
+            if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
+         } else if (record.type == "group-footer" && record.grouping.footer) {
+            let itemInstance = instance.getChild(context, record.grouping.footer, record.key, record.store);
+            itemInstance.record = record;
+            if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
+         }
+      });
+      instance.instances = instances;
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let items = instance.instances!.map((x) => ({
+         instance: x,
+         key: x.record.key,
+         type: x.record.type,
+         content: getContent(x.render(context)),
+      }));
+      return (
+         <ListComponent
+            key={key}
+            instance={instance}
+            items={items}
+            selectable={(!this.selection.isDummy || !!this.onItemClick) as boolean}
+         />
+      );
+   }
+
+   groupBy(grouping: string | GroupingConfig | (string | GroupingConfig)[]): void {
+      if (!isArray(grouping)) {
+         if (isString(grouping) || typeof grouping == "object") return this.groupBy([grouping]);
+         throw new Error("DynamicGrouping should be an array of grouping objects");
+      }
+
+      let normalized = grouping.map((g) => {
+         if (isString(g)) {
+            return {
+               key: {
+                  [g]: {
+                     bind: this.recordName + "." + g,
+                  },
+               },
+            } as GroupingConfig;
+         }
+         return g;
+      });
+
+      normalized.forEach((g) => {
+         if (g.header) g.header = Widget.create(g.header);
+
+         if (g.footer) g.footer = Widget.create(g.footer);
+      });
+
+      this.adapter.groupBy(normalized);
+      this.update();
+   }
+}
+
+List.prototype.recordName = "$record";
+List.prototype.indexName = "$index";
+List.prototype.baseClass = "list";
+List.prototype.focusable = true;
+List.prototype.focused = false;
+List.prototype.itemPad = true;
+List.prototype.cached = false;
+List.prototype.styled = true;
+List.prototype.scrollSelectionIntoView = false;
+List.prototype.selectMode = false;
+List.prototype.selectOnTab = false;
+
+Widget.alias("list", List);
+
+interface ListItemData {
+   instance: Instance;
+   key: string;
+   type: string;
+   content: React.ReactNode;
+}
+
+interface ListComponentProps {
+   instance: Instance;
+   items: ListItemData[];
+   selectable: boolean | ((e: MouseEvent, instance: Instance) => void);
+}
+
+interface ListComponentState {
+   cursor: number;
+   focused: boolean;
+   selectionStart?: number;
+}
+
+class ListComponent extends VDOM.Component<ListComponentProps, ListComponentState> {
+   declare el?: HTMLUListElement;
+   cursorChildIndex: number[] = [];
+   declare selectedEl?: Element | null;
+   unsubscribeScroll?: () => void;
+   onKeyDown?: (e: React.KeyboardEvent, instance: Instance) => boolean | void;
+
+   constructor(props: ListComponentProps) {
+      super(props);
+      let { widget } = props.instance;
+      let { focused } = widget as unknown as { focused: boolean };
+      this.state = {
+         cursor: focused && props.selectable ? 0 : -1,
+         focused: focused,
+      };
+
+      this.handleItemMouseDown = this.handleItemMouseDown.bind(this);
+      this.handleItemDoubleClick = this.handleItemDoubleClick.bind(this);
+      this.handleItemClick = this.handleItemClick.bind(this);
+   }
+
+   shouldComponentUpdate(props: ListComponentProps, state: ListComponentState): boolean {
+      return props.instance.shouldUpdate || state != this.state;
+   }
+
+   componentDidMount(): void {
+      let { instance } = this.props;
+      let { widget } = instance as unknown as { widget: List };
+      if (widget.pipeKeyDown) {
+         instance.invoke("pipeKeyDown", this.handleKeyDown.bind(this), instance);
+         this.showCursor();
+      }
+
+      if (widget.autoFocus && this.el) FocusManager.focus(this.el);
+
+      if (widget.onScroll && this.el) {
+         this.unsubscribeScroll = addEventListenerWithOptions(
+            this.el,
+            "scroll",
+            (event) => {
+               instance.invoke("onScroll", event, instance);
+            },
+            { passive: true },
+         );
+      }
+
+      this.componentDidUpdate();
+   }
+
+   UNSAFE_componentWillReceiveProps(props: ListComponentProps): void {
+      if (this.state.focused && (props.instance.widget as List).selectMode) this.showCursor(true, props.items);
+      else if (this.state.cursor >= props.items.length) this.moveCursor(props.items.length - 1);
+      else if (this.state.focused && this.state.cursor < 0) this.moveCursor(0);
+   }
+
+   componentWillUnmount(): void {
+      let { instance } = this.props;
+      let { widget } = instance as unknown as { widget: List };
+      offFocusOut(this);
+      if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", null, instance);
+   }
+
+   handleItemMouseDown(e: React.MouseEvent<HTMLLIElement>): void {
+      let index = Number((e.currentTarget as HTMLElement).dataset.recordIndex);
+      this.moveCursor(index);
+      if (e.shiftKey) e.preventDefault();
+
+      this.moveCursor(index, {
+         select: true,
+         selectOptions: {
+            toggle: e.ctrlKey && !e.shiftKey,
+            add: e.ctrlKey && e.shiftKey,
+         },
+         selectRange: e.shiftKey,
+      });
+   }
+
+   handleItemClick(e: React.MouseEvent<HTMLLIElement>): void {
+      let { instance, items } = this.props;
+      let index = Number((e.currentTarget as HTMLElement).dataset.recordIndex);
+      let item = items[this.cursorChildIndex[index]];
+      if (instance.invoke("onItemClick", e, item.instance) === false) return;
+
+      this.moveCursor(index, {
+         select: true,
+         selectOptions: {
+            toggle: e.ctrlKey && !e.shiftKey,
+            add: e.ctrlKey && e.shiftKey,
+         },
+         selectRange: e.shiftKey,
+      });
+   }
+
+   handleItemDoubleClick(e: React.MouseEvent<HTMLLIElement>): void {
+      let { instance, items } = this.props;
+      let index = Number((e.currentTarget as HTMLElement).dataset.recordIndex);
+      let item = items[this.cursorChildIndex[index]];
+      instance.invoke("onItemDoubleClick", e, item.instance);
+   }
+
+   render(): React.ReactNode {
+      let { instance, items, selectable } = this.props;
+      let { data, widget } = instance as unknown as { data: Record<string, any>; widget: List };
+      let { CSS, baseClass } = widget;
+      let itemStyle = CSS.parseStyle(data.itemStyle);
+      this.cursorChildIndex = [];
+      let cursorIndex = 0;
+
+      let onDblClick: ((e: React.MouseEvent<HTMLLIElement>) => void) | undefined;
+      let onClick: ((e: React.MouseEvent<HTMLLIElement>) => void) | undefined;
+
+      if (widget.onItemClick) onClick = this.handleItemClick;
+
+      if (widget.onItemDoubleClick) onDblClick = this.handleItemDoubleClick;
+
+      let children: React.ReactNode =
+         items.length > 0 &&
+         items.map((x, i) => {
+            let { data, selected } = x.instance as { data: any; selected?: boolean };
+            let className;
+
+            if (x.type == "data") {
+               let ind = cursorIndex++;
+
+               this.cursorChildIndex.push(i);
+               className = CSS.element(baseClass, "item", {
+                  selected: selected,
+                  cursor: ind == this.state.cursor,
+                  pad: widget.itemPad,
+                  disabled: data.disabled,
+               });
+
+               return (
+                  <li
+                     key={x.key}
+                     className={CSS.expand(className, data.classNames)}
+                     style={itemStyle}
+                     data-record-index={ind}
+                     onMouseDown={this.handleItemMouseDown}
+                     onClick={onClick}
+                     onDoubleClick={onDblClick}
+                  >
+                     {x.content}
+                  </li>
+               );
+            } else {
+               return (
+                  <li key={x.key} className={CSS.element(baseClass, x.type)}>
+                     {x.content}
+                  </li>
+               );
+            }
+         });
+
+      if (!children && data.emptyText) {
+         children = <li className={CSS.element(baseClass, "empty-text")}>{data.emptyText}</li>;
+      }
+
+      return (
+         <ul
+            ref={(el) => {
+               this.el = el as HTMLUListElement;
+            }}
+            className={CSS.expand(data.classNames, CSS.state({ focused: this.state.focused }))}
+            style={data.style}
+            tabIndex={widget.focusable && selectable && items.length > 0 ? data.tabIndex || 0 : undefined}
+            onMouseDown={preventFocusOnTouch}
+            onKeyDown={this.handleKeyDown.bind(this)}
+            onMouseLeave={this.handleMouseLeave.bind(this)}
+            onFocus={this.onFocus.bind(this)}
+            onBlur={this.onBlur.bind(this)}
+         >
+            {children}
+         </ul>
+      );
+   }
+
+   componentDidUpdate(): void {
+      let { widget } = this.props.instance as unknown as { widget: List };
+      if (widget.scrollSelectionIntoView) {
+         //The timeout is reqired for use-cases when parent needs to do some measuring that affect scrollbars, i.e. LookupField.
+         setTimeout(() => this.scrollElementIntoView(), 0);
+      }
+   }
+
+   scrollElementIntoView(): void {
+      if (!this.el) return; //unmount
+      let { widget } = this.props.instance as unknown as { widget: List };
+      let { CSS, baseClass } = widget;
+      let selectedRowSelector = `.${CSS.element(baseClass, "item")}.${CSS.state("selected")}`;
+      let firstSelectedRow = this.el.querySelector(selectedRowSelector);
+      if (firstSelectedRow != this.selectedEl) {
+         if (firstSelectedRow) scrollElementIntoView(firstSelectedRow, true, false, 0, this.el);
+         this.selectedEl = firstSelectedRow;
+      }
+   }
+
+   moveCursor(
+      index: number,
+      {
+         focused,
+         hover,
+         scrollIntoView,
+         select,
+         selectRange,
+         selectOptions,
+      }: {
+         focused?: boolean;
+         hover?: boolean;
+         scrollIntoView?: boolean;
+         select?: boolean;
+         selectRange?: boolean;
+         selectOptions?: { toggle?: boolean; add?: boolean };
+      } = {},
+   ): void {
+      let { instance, selectable } = this.props;
+      if (!selectable) return;
+
+      let { widget } = instance as unknown as { widget: List };
+      let newState: Partial<ListComponentState> = {};
+      if (widget.focused) focused = true;
+
+      if (focused != null && this.state.focused != focused) newState.focused = focused;
+
+      //ignore mouse enter/leave events (support with a flag if a feature request comes)
+      if (!hover) newState.cursor = index;
+
+      //batch updates to avoid flickering between selection and cursor changes
+      batchUpdates(() => {
+         if (select || widget.selectMode) {
+            let start: number | undefined =
+               selectRange && this.state.selectionStart !== undefined && this.state.selectionStart >= 0
+                  ? this.state.selectionStart
+                  : index;
+            if (start < 0) start = index;
+            this.selectRange(start, index, selectOptions);
+            if (!selectRange) newState.selectionStart = index;
+         }
+         if (Object.keys(newState).length > 0) {
+            this.setState(newState as ListComponentState, () => {
+               if (scrollIntoView && this.el) {
+                  let item = this.el.children[this.cursorChildIndex[index]];
+                  if (item) scrollElementIntoView(item);
+               }
+            });
+         }
+      });
+   }
+
+   selectRange(from: number, to: number, options?: { toggle?: boolean; add?: boolean }): void {
+      let { instance, items } = this.props;
+      let { widget } = instance as unknown as { widget: List };
+
+      if (from > to) {
+         let tmp = from;
+         from = to;
+         to = tmp;
+      }
+
+      let selection: any[] = [],
+         indexes: number[] = [];
+
+      for (let cursor = from; cursor <= to; cursor++) {
+         let item = items[this.cursorChildIndex[cursor]];
+         if (item) {
+            let { record, data } = item.instance as { record: any; data: any };
+            if (data.disabled) continue;
+            selection.push(record.data);
+            indexes.push(record.index);
+         }
+      }
+
+      widget.selection.selectMultiple(instance.store, selection, indexes, options);
+   }
+
+   showCursor(force?: boolean, newItems?: ListItemData[]): void {
+      if (!force && this.state.cursor >= 0) return;
+
+      let items = newItems || this.props.items;
+      let index = -1,
+         firstSelected = -1,
+         firstValid = -1;
+      for (let i = 0; i < items.length; i++) {
+         let item = items[i];
+         if (isDataItem(item)) {
+            index++;
+
+            if (!isItemDisabled(item) && firstValid == -1) firstValid = index;
+            if ((item.instance as any).selected) {
+               firstSelected = index;
+               break;
+            }
+         }
+      }
+      this.moveCursor(firstSelected != -1 ? firstSelected : firstValid, {
+         focused: true,
+      });
+   }
+
+   onFocus(): void {
+      let { widget } = this.props.instance as unknown as { widget: List };
+
+      FocusManager.nudge();
+      this.showCursor(widget.selectMode);
+
+      if (!widget.focused && this.el)
+         oneFocusOut(this, this.el, () => {
+            this.moveCursor(-1, { focused: false });
+         });
+
+      this.setState({
+         focused: true,
+      });
+   }
+
+   onBlur(): void {
+      FocusManager.nudge();
+   }
+
+   handleMouseLeave(): void {
+      let { widget } = this.props.instance as unknown as { widget: List };
+      if (!widget.focused) this.moveCursor(-1, { hover: true });
+   }
+
+   handleKeyDown(e: React.KeyboardEvent): void {
+      let { instance, items } = this.props;
+      let { widget } = instance as unknown as { widget: List };
+
+      if (this.onKeyDown && instance.invoke("onKeyDown", e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.tab:
+         case KeyCode.enter:
+            if (!widget.selectOnTab && e.keyCode == KeyCode.tab) break;
+            let item = items[this.cursorChildIndex[this.state.cursor]];
+            if (item && widget.onItemClick && instance.invoke("onItemClick", e, item.instance) === false) return;
+            this.moveCursor(this.state.cursor, {
+               select: true,
+               selectOptions: {
+                  toggle: e.ctrlKey && !e.shiftKey,
+                  add: e.ctrlKey && e.shiftKey,
+               },
+               selectRange: e.shiftKey,
+            });
+            break;
+
+         case KeyCode.down:
+            for (let index = this.state.cursor + 1; index < this.cursorChildIndex.length; index++) {
+               let item = items[this.cursorChildIndex[index]];
+               if (!isItemSelectable(item)) continue;
+               this.moveCursor(index, {
+                  focused: true,
+                  scrollIntoView: true,
+                  select: e.shiftKey,
+                  selectRange: e.shiftKey,
+               });
+               e.stopPropagation();
+               e.preventDefault();
+               break;
+            }
+            break;
+
+         case KeyCode.up:
+            for (let index = this.state.cursor - 1; index >= 0; index--) {
+               let item = items[this.cursorChildIndex[index]];
+               if (!isItemSelectable(item)) continue;
+               this.moveCursor(index, {
+                  focused: true,
+                  scrollIntoView: true,
+                  select: e.shiftKey,
+                  selectRange: e.shiftKey,
+               });
+               e.stopPropagation();
+               e.preventDefault();
+               break;
+            }
+            break;
+
+         case KeyCode.a:
+            if (!e.ctrlKey || !widget.selection.multiple) return;
+
+            this.selectRange(0, this.cursorChildIndex.length);
+
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+      }
+   }
+}
+
+class ListItem extends Container {
+   declareData(...args: Record<string, unknown>[]) {
+      super.declareData(...args, {
+         disabled: undefined,
+      });
+   }
+}
+
+function isItemSelectable(item: any) {
+   return isDataItem(item) && !isItemDisabled(item);
+}
+
+function isDataItem(item: any) {
+   return item?.type == "data";
+}
+
+function isItemDisabled(item: any) {
+   return item?.instance.data.disabled;
+}
diff --git a/packages/cx/src/widgets/ProgressBar.d.ts b/packages/cx/src/widgets/ProgressBar.d.ts
deleted file mode 100644
index fb801a406..000000000
--- a/packages/cx/src/widgets/ProgressBar.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as Cx from '../core';
-import {Instance} from '../ui/Instance';
-
-interface ProgressBarProps extends Cx.StyledContainerProps {
-
-   /** Progress value, a number between `0` and `1`. Default value is `0`. */
-   value?: Cx.NumberProp,
-    
-   /** Defaults to `false`. Set to `true` to make it look disabled. */
-   disabled?: Cx.BooleanProp,
-   
-   /** Progress bar annotation. */
-   text?: Cx.StringProp,
-   
-}
-
-export class ProgressBar extends Cx.Widget<ProgressBarProps> {}
diff --git a/packages/cx/src/widgets/ProgressBar.js b/packages/cx/src/widgets/ProgressBar.js
deleted file mode 100644
index 224a54b9b..000000000
--- a/packages/cx/src/widgets/ProgressBar.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {parseStyle} from '../util/parseStyle';
-import {isNumber} from '../util/isNumber';
-
-export class ProgressBar extends Widget {
-
-   declareData() {
-      return super.declareData({
-         disabled: undefined,
-         text: undefined,
-         value: undefined
-      }, ...arguments)
-   }
-
-   render(context, instance, key) {
-      let { widget, data } = instance;
-      let { text, value, disabled } = data;
-      let {CSS, baseClass} = widget;
-
-      if (!isNumber(value)) value = 0;
-
-      return (
-         <div
-            key={key}
-            className= {CSS.expand(data.classNames, CSS.state({
-               disabled               
-            }))}
-            style={data.style}
-         >           
-            <div 
-               className={CSS.element(this.baseClass, 'indicator')} 
-               style={{
-                  width: `${(value > 1 ? 1 : value < 0 ? 0 : value)*100}%`
-               }} 
-            />
-            <div className={CSS.element(this.baseClass, 'label')}>            
-               { text }
-            </div>
-         </div>
-      )
-   }
-}
-
-ProgressBar.prototype.styled = true;
-ProgressBar.prototype.disabled = false;
-ProgressBar.prototype.baseClass = 'progressbar';
diff --git a/packages/cx/src/widgets/ProgressBar.scss b/packages/cx/src/widgets/ProgressBar.scss
index 8ba668102..0d196dc61 100644
--- a/packages/cx/src/widgets/ProgressBar.scss
+++ b/packages/cx/src/widgets/ProgressBar.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 
 @mixin cx-progressbar(
    $name: 'progressbar',
@@ -6,10 +7,10 @@
    $besm: $cx-besm
 ) {
 
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       box-sizing: border-box;
diff --git a/packages/cx/src/widgets/ProgressBar.tsx b/packages/cx/src/widgets/ProgressBar.tsx
new file mode 100644
index 000000000..c7289cd55
--- /dev/null
+++ b/packages/cx/src/widgets/ProgressBar.tsx
@@ -0,0 +1,66 @@
+/** @jsxImportSource react */
+import { Widget, VDOM, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
+import { parseStyle } from "../util/parseStyle";
+import { isNumber } from "../util/isNumber";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+
+export interface ProgressBarConfig extends WidgetConfig, WidgetStyleConfig {
+   /** Progress value, a number between `0` and `1`. Default value is `0`. */
+   value?: NumberProp;
+
+   /** Defaults to `false`. Set to `true` to make it look disabled. */
+   disabled?: BooleanProp;
+
+   /** Progress bar annotation. */
+   text?: StringProp;
+}
+
+export class ProgressBar extends Widget<ProgressBarConfig> {
+   declare baseClass: string;
+   declare disabled?: BooleanProp;
+
+   constructor(config?: ProgressBarConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            disabled: undefined,
+            text: undefined,
+            value: undefined,
+         },
+         ...args,
+      );
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { widget, data } = instance;
+      let { text, value, disabled } = data;
+      let { CSS, baseClass } = widget;
+
+      if (!isNumber(value)) value = 0;
+
+      return (
+         <div
+            key={key}
+            className={CSS.expand(data.classNames as string, CSS.state({ disabled }))}
+            style={data.style as any}
+         >
+            <div
+               className={CSS.element(this.baseClass, "indicator")}
+               style={{
+                  width: `${((value as number) > 1 ? 1 : (value as number) < 0 ? 0 : (value as number)) * 100}%`,
+               }}
+            />
+            <div className={CSS.element(this.baseClass, "label")}>{text}</div>
+         </div>
+      );
+   }
+}
+
+ProgressBar.prototype.styled = true;
+ProgressBar.prototype.disabled = false;
+ProgressBar.prototype.baseClass = "progressbar";
diff --git a/packages/cx/src/widgets/ReactElementWrapper.spec.tsx b/packages/cx/src/widgets/ReactElementWrapper.spec.tsx
new file mode 100644
index 000000000..f0f6fd79f
--- /dev/null
+++ b/packages/cx/src/widgets/ReactElementWrapper.spec.tsx
@@ -0,0 +1,452 @@
+import { Store } from "../data/Store";
+import assert from "assert";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import { VDOM } from "../ui/Widget";
+import {
+   ReactFunctionComponent,
+   ReactCounterComponent,
+   ReactClassComponent,
+   ReactPureComponent,
+   ReactRefEffectComponent,
+   ReactEffectStateComponent,
+   ReactPropsComponent,
+} from "./HtmlElement.spec.helpers";
+import { Controller } from "../ui/Controller";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+import { ReactElementWrapper } from "./ReactElementWrapper";
+
+describe("ReactElementWrapper", () => {
+   it("renders React components as tag", async () => {
+      class MyReactComponent extends VDOM.Component<any> {
+         render() {
+            return VDOM.createElement("div", { className: "my-component" }, this.props.children);
+         }
+      }
+
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <MyReactComponent>
+               <span>Child content</span>
+            </MyReactComponent>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "my-component");
+      assert(tree.children && tree.children.length === 1, "Expected one child");
+   });
+
+   it("renders React function components with props", async () => {
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <ReactFunctionComponent title="Test Title">
+               <span>Child content</span>
+            </ReactFunctionComponent>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "react-function-component");
+      assert(tree.children && tree.children.length === 2, "Expected two children (h3 and div)");
+
+      let h3 = tree.children[0] as any;
+      assert.equal(h3.type, "h3");
+      assert.deepEqual(h3.children, ["Test Title"]);
+
+      let contentDiv = tree.children[1] as any;
+      assert.equal(contentDiv.type, "div");
+      assert.equal(contentDiv.props.className, "content");
+   });
+
+   it("renders React function components with hooks", async () => {
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <ReactCounterComponent initialCount={5} />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "react-counter");
+      assert(tree.children && tree.children.length === 2, "Expected two children (span and button)");
+
+      let span = tree.children[0] as any;
+      assert.equal(span.type, "span");
+      assert.equal(span.props.className, "count");
+      assert.deepEqual(span.children, ["5"]);
+
+      let button = tree.children[1] as any;
+      assert.equal(button.type, "button");
+   });
+
+   it("renders React class components with props", async () => {
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <ReactClassComponent label="Test Label">
+               <span>Class child content</span>
+            </ReactClassComponent>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert(tree.props.className.includes("react-class-component"), "Expected react-class-component class");
+
+      assert(tree.children && tree.children.length === 2, "Expected two children (label and div)");
+
+      let label = tree.children[0] as any;
+      assert.equal(label.type, "label");
+      assert.deepEqual(label.children, ["Test Label"]);
+
+      let bodyDiv = tree.children[1] as any;
+      assert.equal(bodyDiv.type, "div");
+      assert.equal(bodyDiv.props.className, "body");
+   });
+
+   it("renders React PureComponent", async () => {
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <ReactPureComponent value="Pure Value" />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "span");
+      assert.equal(tree.props.className, "react-pure-component");
+      assert.deepEqual(tree.children, ["Pure Value"]);
+   });
+
+   it("renders React function component with useRef and useEffect", async () => {
+      let store = new Store();
+      let mountedElement: HTMLDivElement | null = null;
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <ReactRefEffectComponent
+               onMount={(el) => {
+                  mountedElement = el;
+               }}
+            />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "react-ref-effect-component");
+      assert.deepEqual(tree.children, ["Component with ref and effect"]);
+   });
+
+   it("renders React function component with useEffect that updates state", async () => {
+      let store = new Store();
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <ReactEffectStateComponent value="Test" />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "react-effect-state-component");
+      assert(tree.children && tree.children.length === 2, "Expected two children");
+
+      let processedSpan = tree.children[0] as any;
+      assert.equal(processedSpan.type, "span");
+      assert.equal(processedSpan.props.className, "processed");
+      // After act(), useEffect should have run and updated state
+      assert.deepEqual(processedSpan.children, ["Processed: Test"]);
+   });
+
+   it("translates CxJS accessor bindings to React component props", async () => {
+      interface StoreModel {
+         text: string;
+         count: number;
+         enabled: boolean;
+         tags: string[];
+      }
+
+      let $store = createAccessorModelProxy<StoreModel>();
+
+      // First verify jsx transform output
+      const widget = (
+         <cx>
+            <ReactPropsComponent text={$store.text} count={$store.count} enabled={$store.enabled} tags={$store.tags} />
+         </cx>
+      );
+
+      assert.equal(widget.$type, ReactElementWrapper, "React component should use ReactElementWrapper as $type");
+      assert.equal(widget.componentType, ReactPropsComponent, "React component should be set as componentType");
+      assert.equal(typeof widget.text, "function", "Accessor chain text should be a function");
+      assert.equal(widget.text.toString(), "text", "Accessor chain text should resolve to path");
+
+      // Now verify rendering
+      let store = new Store<StoreModel>({
+         data: {
+            text: "Bound Text",
+            count: 42,
+            enabled: true,
+            tags: ["a", "b", "c"],
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+
+      let textSpan = tree.children![0] as any;
+      assert.deepEqual(textSpan.children, ["Bound Text"]);
+
+      let countSpan = tree.children![1] as any;
+      assert.deepEqual(countSpan.children, ["42"]);
+
+      let enabledSpan = tree.children![2] as any;
+      assert.deepEqual(enabledSpan.children, ["yes"]);
+
+      let tagsSpan = tree.children![3] as any;
+      assert.deepEqual(tagsSpan.children, ["a, b, c"]);
+   });
+
+   it("supports visible prop on React components", async () => {
+      interface StoreModel {
+         show: boolean;
+      }
+
+      let $store = createAccessorModelProxy<StoreModel>();
+
+      let store = new Store<StoreModel>({
+         data: {
+            show: false,
+         },
+      });
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <div>
+               <ReactFunctionComponent title="Visible Test" visible={$store.show} />
+               <span>Always visible</span>
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      // When visible=false, the React component should not render
+      assert.equal(tree.children!.length, 1, "Expected only the span to be visible");
+      assert.equal((tree.children![0] as any).type, "span");
+
+      // Update store to make component visible
+      await act(async () => {
+         store.set("show", true);
+      });
+      let tree2 = component.toJSON();
+      assert(tree2 && !Array.isArray(tree2), "Expected single element");
+      assert.equal(tree2.children!.length, 2, "Expected both children to be visible");
+   });
+
+   it("supports controller prop on React components", async () => {
+      let controllerInitialized = false;
+
+      class TestController extends Controller {
+         onInit() {
+            controllerInitialized = true;
+         }
+      }
+
+      interface StoreModel {
+         text: string;
+      }
+
+      let $store = createAccessorModelProxy<StoreModel>();
+
+      let store = new Store<StoreModel>({
+         data: {
+            text: "Controller Test",
+         },
+      });
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <ReactPropsComponent text={$store.text} count={10} enabled={true} controller={TestController} />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(controllerInitialized, true, "Controller should be initialized");
+
+      let textSpan = tree.children![0] as any;
+      assert.deepEqual(textSpan.children, ["Controller Test"]);
+   });
+
+   it("updates React component when bound store data changes", async () => {
+      interface StoreModel {
+         text: string;
+         count: number;
+         enabled: boolean;
+      }
+
+      let $store = createAccessorModelProxy<StoreModel>();
+
+      let store = new Store<StoreModel>({
+         data: {
+            text: "Initial",
+            count: 1,
+            enabled: false,
+         },
+      });
+
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <ReactPropsComponent text={$store.text} count={$store.count} enabled={$store.enabled} />
+         </cx>,
+      );
+
+      let tree1 = component.toJSON() as any;
+      assert.deepEqual(tree1.children[0].children, ["Initial"]);
+      assert.deepEqual(tree1.children[1].children, ["1"]);
+      assert.deepEqual(tree1.children[2].children, ["no"]);
+
+      // Update store
+      await act(async () => {
+         store.set("text", "Updated");
+         store.set("count", 99);
+         store.set("enabled", true);
+      });
+
+      let tree2 = component.toJSON() as any;
+      assert.deepEqual(tree2.children[0].children, ["Updated"]);
+      assert.deepEqual(tree2.children[1].children, ["99"]);
+      assert.deepEqual(tree2.children[2].children, ["yes"]);
+   });
+
+   describe("React component type inference", () => {
+      interface RequiredPropsComponentProps {
+         label: string;
+         value: number;
+         onChange: (value: number) => void;
+         disabled?: boolean;
+      }
+
+      function RequiredPropsComponent(_props: RequiredPropsComponentProps) {
+         return null;
+      }
+
+      it("accepts all required props", () => {
+         const widget = (
+            <cx>
+               <RequiredPropsComponent label="Amount" value={100} onChange={(v) => console.log(v)} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts required props with optional prop", () => {
+         const widget = (
+            <cx>
+               <RequiredPropsComponent label="Amount" value={100} onChange={(v) => console.log(v)} disabled={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (label)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - label is required but missing */}
+               <RequiredPropsComponent value={100} onChange={(v) => console.log(v)} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (onChange)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - onChange is required but missing */}
+               <RequiredPropsComponent label="Amount" value={100} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing all required props", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - label, value, and onChange are required but missing */}
+               <RequiredPropsComponent disabled={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects wrong prop type (string for number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - value should be number, not string */}
+               <RequiredPropsComponent label="Amount" value="100" onChange={(v) => console.log(v)} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects wrong prop type (number for string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - label should be string, not number */}
+               <RequiredPropsComponent label={123} value={100} onChange={(v) => console.log(v)} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("provides instance through this", () => {
+         class TestController extends Controller {
+            change(_v: number) {}
+         }
+         const widget = (
+            <cx>
+               <RequiredPropsComponent
+                  label={"label"}
+                  value={100}
+                  controller={TestController}
+                  onChange={function (v) {
+                     this.getControllerByType(TestController).change(v);
+                  }}
+               />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+});
diff --git a/packages/cx/src/widgets/ReactElementWrapper.tsx b/packages/cx/src/widgets/ReactElementWrapper.tsx
new file mode 100644
index 000000000..7de1d87b2
--- /dev/null
+++ b/packages/cx/src/widgets/ReactElementWrapper.tsx
@@ -0,0 +1,108 @@
+import { ContainerBase, ContainerConfig } from "../ui/Container";
+import { Instance } from "../ui/Instance";
+import { Prop } from "../ui/Prop";
+import type { RenderingContext } from "../ui/RenderingContext";
+import { VDOM, Widget } from "../ui/Widget";
+import { isFunction, isNonEmptyArray } from "../util";
+import { isArray } from "../util/isArray";
+
+type ReactElementWrapperConfigBase = Omit<ContainerConfig, "items">;
+
+// CxJS callback type - can be string (controller method) or callback with Instance as this
+type CxCallback<T> = T extends (...args: infer A) => infer R ? (this: Instance, ...args: A) => R : T;
+
+// Transform a single prop: functions to CxCallback, data to Prop<T>
+type TransformProp<K, V> = K extends keyof ReactElementWrapperConfigBase
+   ? ReactElementWrapperConfigBase[K]
+   : NonNullable<V> extends Function
+     ? CxCallback<V>
+     : Prop<V>;
+
+// Transform React component props - functions to CxCallback, data props to Prop<T>
+// Preserves required/optional status
+type TransformReactElementProps<T> = {
+   [K in keyof T]: TransformProp<K, T[K]>;
+};
+
+/** ReactElementWrapper configuration with component-specific props */
+// componentType is not included here - it's added by the jsx-runtime and declared in the class
+export type ReactElementWrapperConfig<P> = ReactElementWrapperConfigBase & TransformReactElementProps<P>;
+
+interface ReactElementWrapperInstance extends Instance {
+   events?: Record<string, Function>;
+}
+
+export class ReactElementWrapper<C extends React.ComponentType<any> = React.ComponentType<any>> extends ContainerBase<
+   ReactElementWrapperConfigBase & { componentType: C; jsxAttributes?: string[] },
+   ReactElementWrapperInstance
+> {
+   declare public componentType: React.ComponentType<any>;
+   declare public jsxAttributes?: string[];
+   declare public props?: Record<string, unknown>;
+   [key: string]: unknown;
+
+   init(): void {
+      // Collect all props to pass to the React component
+      this.props = {};
+
+      if (this.jsxAttributes) {
+         for (const attr of this.jsxAttributes) {
+            // Skip CxJS reserved attributes and children-related attributes
+            if (
+               attr === "componentType" ||
+               attr === "visible" ||
+               attr === "if" ||
+               attr === "controller" ||
+               attr === "jsxAttributes" ||
+               attr === "layout" ||
+               attr === "outerLayout" ||
+               attr === "putInto" ||
+               attr === "contentFor" ||
+               attr === "children" ||
+               attr === "items"
+            )
+               continue;
+
+            this.props[attr] = this[attr];
+         }
+      }
+
+      super.init();
+   }
+
+   public initInstance(_context: RenderingContext, _instance: ReactElementWrapperInstance): void {
+      let events: Record<string, Function> | undefined;
+      if (!isNonEmptyArray(this.jsxAttributes)) return;
+      events = {};
+      for (let prop of this.jsxAttributes) {
+         let f = this[prop];
+         if (prop.startsWith("on") && isFunction(f)) events[prop] = (...args: any[]) => f.apply(_instance, args);
+      }
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            props: { structured: true },
+         },
+         ...args,
+      );
+   }
+
+   render(context: RenderingContext, instance: ReactElementWrapperInstance, key: string): React.ReactNode {
+      const { data } = instance;
+
+      // Render CxJS children to React elements
+      let children = this.renderChildren(context, instance);
+      if (children && isArray(children) && children.length === 0) children = undefined;
+
+      const props = {
+         key,
+         ...data.props,
+         ...instance.events,
+         children,
+      };
+
+      return VDOM.createElement(this.componentType, props);
+   }
+}
diff --git a/packages/cx/src/widgets/Resizer.d.ts b/packages/cx/src/widgets/Resizer.d.ts
deleted file mode 100644
index 2567f0351..000000000
--- a/packages/cx/src/widgets/Resizer.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {
-   Widget,
-   StyledContainerProps
-} from 'cx/src/core';
-
-interface ResizerProps extends StyledContainerProps {
-
-   /** Make resizer horizontal. */
-   horizontal?: boolean;
-
-   /** Use the element after the the resizer for size measurements. */
-   forNextElement?: boolean,
-
-   /** A binding for the new size. */
-   size?: Cx.NumberProp,
-
-   /** Default value that will be set when the user double click on the resizer. */
-   defaultSize?: Cx.NumberProp,
-
-   /** Minimum size of the element. */
-   minSize?: Cx.NumberProp,
-
-   /** Maximum size of the element. */
-   maxSize?: Cx.NumberProp,
-}
-
-export class Resizer extends Widget<ResizerProps> {}
diff --git a/packages/cx/src/widgets/Resizer.js b/packages/cx/src/widgets/Resizer.js
deleted file mode 100644
index dfa4c81c3..000000000
--- a/packages/cx/src/widgets/Resizer.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { captureMouseOrTouch, getCursorPos } from "./overlay/captureMouse";
-
-export class Resizer extends Widget {
-   declareData(...args) {
-      super.declareData(...args, {
-         size: undefined,
-         defaultSize: undefined,
-         minSize: undefined,
-         maxSize: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-
-      return <ResizerCmp key={key} instance={instance} data={data} />;
-   }
-}
-
-Resizer.prototype.baseClass = "resizer";
-Resizer.prototype.styled = true;
-Resizer.prototype.horizontal = false;
-Resizer.prototype.forNextElement = false;
-Resizer.prototype.defaultSize = null;
-Resizer.prototype.minSize = 0;
-Resizer.prototype.maxSize = 1e6;
-
-class ResizerCmp extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         dragged: false,
-         offset: 0,
-      };
-   }
-
-   shouldComponentUpdate(props, state) {
-      return state != this.state;
-   }
-
-   render() {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      let { baseClass, CSS } = widget;
-
-      return (
-         <div
-            ref={(el) => {
-               this.el = el;
-            }}
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  vertical: !widget.horizontal,
-                  horizontal: widget.horizontal,
-               })
-            )}
-            style={data.style}
-            onDoubleClick={(e) => {
-               instance.set("size", data.defaultSize);
-            }}
-            onMouseDown={(e) => {
-               let initialPosition = getCursorPos(e);
-               this.setState({ dragged: true, initialPosition });
-            }}
-            onMouseUp={(e) => {
-               this.setState({ dragged: false });
-            }}
-            onMouseMove={this.startCapture.bind(this)}
-            onMouseLeave={this.startCapture.bind(this)}
-         >
-            <div
-               className={CSS.element(baseClass, "handle", { dragged: this.state.dragged })}
-               style={{
-                  left: !widget.horizontal ? this.state.offset : 0,
-                  top: widget.horizontal ? this.state.offset : 0,
-               }}
-            />
-         </div>
-      );
-   }
-
-   startCapture(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (this.state.dragged && !this.hasCapture) {
-         this.hasCapture = true;
-         captureMouseOrTouch(
-            e,
-            this.onHandleMove.bind(this),
-            this.onDragComplete.bind(this),
-            this.state.initialPosition,
-            widget.horizontal ? "row-resize" : "col-resize"
-         );
-      }
-   }
-
-   onHandleMove(e, initialPosition) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      let currentPosition = getCursorPos(e);
-      const offset = !widget.horizontal
-         ? currentPosition.clientX - initialPosition.clientX
-         : currentPosition.clientY - initialPosition.clientY;
-
-      let size = this.getNewSize(0);
-      let newSize = this.getNewSize(offset);
-
-      let allowedOffset = widget.forNextElement ? size - newSize : newSize - size;
-
-      this.setState({ offset: allowedOffset });
-   }
-
-   getNewSize(offset) {
-      let { instance, data } = this.props;
-      let { horizontal, forNextElement } = instance.widget;
-
-      if (
-         !this.el ||
-         (!forNextElement && !this.el.previousElementSibling) ||
-         (forNextElement && !this.el.nextElementSibling)
-      )
-         return 0;
-
-      let newSize;
-
-      if (horizontal) {
-         if (forNextElement) newSize = this.el.nextElementSibling.offsetHeight - offset;
-         else newSize = this.el.previousElementSibling.offsetHeight + offset;
-      } else {
-         if (forNextElement) newSize = this.el.nextElementSibling.offsetWidth - offset;
-         else newSize = this.el.previousElementSibling.offsetWidth + offset;
-      }
-
-      return Math.max(data.minSize, Math.min(newSize, data.maxSize));
-   }
-
-   onDragComplete() {
-      this.hasCapture = false;
-      let { instance } = this.props;
-
-      instance.set("size", this.getNewSize(this.state.offset));
-
-      this.setState({
-         dragged: false,
-         offset: 0,
-      });
-   }
-}
diff --git a/packages/cx/src/widgets/Resizer.scss b/packages/cx/src/widgets/Resizer.scss
index 07a652701..0c2616238 100644
--- a/packages/cx/src/widgets/Resizer.scss
+++ b/packages/cx/src/widgets/Resizer.scss
@@ -1,13 +1,14 @@
+@use "sass:map";
 
 @mixin cx-resizer(
    $name: 'resizer',
    $besm: $cx-besm
 ) {
 
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       position: relative;
diff --git a/packages/cx/src/widgets/Resizer.tsx b/packages/cx/src/widgets/Resizer.tsx
new file mode 100644
index 000000000..06beddaf4
--- /dev/null
+++ b/packages/cx/src/widgets/Resizer.tsx
@@ -0,0 +1,200 @@
+/** @jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import { NumberProp } from "../ui/Prop";
+import { RenderingContext } from "../ui/RenderingContext";
+import { VDOM, Widget, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
+import { captureMouseOrTouch, getCursorPos } from "./overlay/captureMouse";
+
+export interface ResizerConfig extends WidgetConfig, WidgetStyleConfig {
+   /** Make resizer horizontal. */
+   horizontal?: boolean;
+
+   /** Use the element after the the resizer for size measurements. */
+   forNextElement?: boolean;
+
+   /** A binding for the new size. */
+   size?: NumberProp;
+
+   /** Default value that will be set when the user double click on the resizer. */
+   defaultSize?: NumberProp;
+
+   /** Minimum size of the element. */
+   minSize?: NumberProp;
+
+   /** Maximum size of the element. */
+   maxSize?: NumberProp;
+}
+
+export class Resizer extends Widget<ResizerConfig> {
+   declare baseClass: string;
+   declare horizontal?: boolean;
+   declare forNextElement?: boolean;
+   declare defaultSize?: NumberProp | null;
+   declare minSize?: NumberProp;
+   declare maxSize?: NumberProp;
+
+   constructor(config?: ResizerConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         size: undefined,
+         defaultSize: undefined,
+         minSize: undefined,
+         maxSize: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance<Resizer>, key: string): React.ReactNode {
+      let { data } = instance;
+
+      return <ResizerCmp key={key} instance={instance} data={data} />;
+   }
+}
+
+Resizer.prototype.baseClass = "resizer";
+Resizer.prototype.styled = true;
+Resizer.prototype.horizontal = false;
+Resizer.prototype.forNextElement = false;
+Resizer.prototype.defaultSize = null;
+Resizer.prototype.minSize = 0;
+Resizer.prototype.maxSize = 1e6;
+
+interface ResizerCmpProps {
+   instance: Instance<Resizer>;
+   data: Record<string, any>;
+}
+
+interface ResizerCmpState {
+   dragged: boolean;
+   offset: number;
+   initialPosition?: { clientX: number; clientY: number };
+}
+
+class ResizerCmp extends VDOM.Component<ResizerCmpProps, ResizerCmpState> {
+   declare el?: HTMLDivElement | null;
+   declare hasCapture?: boolean;
+
+   constructor(props: ResizerCmpProps) {
+      super(props);
+      this.state = {
+         dragged: false,
+         offset: 0,
+      };
+   }
+
+   shouldComponentUpdate(props: ResizerCmpProps, state: ResizerCmpState): boolean {
+      return state != this.state;
+   }
+
+   render(): React.ReactNode {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      let { baseClass, CSS } = widget;
+
+      return (
+         <div
+            ref={(el) => {
+               this.el = el;
+            }}
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  vertical: !widget.horizontal,
+                  horizontal: widget.horizontal,
+               }),
+            )}
+            style={data.style}
+            onDoubleClick={(e) => {
+               instance.set("size", data.defaultSize);
+            }}
+            onMouseDown={(e) => {
+               let initialPosition = getCursorPos(e);
+               this.setState({ dragged: true, initialPosition });
+            }}
+            onMouseUp={(e) => {
+               this.setState({ dragged: false });
+            }}
+            onMouseMove={this.startCapture.bind(this)}
+            onMouseLeave={this.startCapture.bind(this)}
+         >
+            <div
+               className={CSS.element(baseClass, "handle", { dragged: this.state.dragged })}
+               style={{
+                  left: !widget.horizontal ? this.state.offset : 0,
+                  top: widget.horizontal ? this.state.offset : 0,
+               }}
+            />
+         </div>
+      );
+   }
+
+   startCapture(e: React.MouseEvent): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (this.state.dragged && !this.hasCapture) {
+         this.hasCapture = true;
+         captureMouseOrTouch(
+            e,
+            this.onHandleMove.bind(this),
+            this.onDragComplete.bind(this),
+            this.state.initialPosition!,
+            widget.horizontal ? "row-resize" : "col-resize",
+         );
+      }
+   }
+
+   onHandleMove(e: any, initialPosition: { clientX: number; clientY: number }): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      let currentPosition = getCursorPos(e);
+      const offset = !widget.horizontal
+         ? currentPosition.clientX - initialPosition.clientX
+         : currentPosition.clientY - initialPosition.clientY;
+
+      let size = this.getNewSize(0);
+      let newSize = this.getNewSize(offset);
+
+      let allowedOffset = widget.forNextElement ? size - newSize : newSize - size;
+
+      this.setState({ offset: allowedOffset });
+   }
+
+   getNewSize(offset: number): number {
+      let { instance, data } = this.props;
+      let { horizontal, forNextElement } = instance.widget;
+
+      if (
+         !this.el ||
+         (!forNextElement && !this.el.previousElementSibling) ||
+         (forNextElement && !this.el.nextElementSibling)
+      )
+         return 0;
+
+      let newSize: number;
+
+      if (horizontal) {
+         if (forNextElement) newSize = (this.el.nextElementSibling as HTMLElement).offsetHeight - offset;
+         else newSize = (this.el.previousElementSibling as HTMLElement).offsetHeight + offset;
+      } else {
+         if (forNextElement) newSize = (this.el.nextElementSibling as HTMLElement).offsetWidth - offset;
+         else newSize = (this.el.previousElementSibling as HTMLElement).offsetWidth + offset;
+      }
+
+      return Math.max(data.minSize as number, Math.min(newSize, data.maxSize as number));
+   }
+
+   onDragComplete(): void {
+      this.hasCapture = false;
+      let { instance } = this.props;
+
+      instance.set("size", this.getNewSize(this.state.offset));
+
+      this.setState({
+         dragged: false,
+         offset: 0,
+      });
+   }
+}
diff --git a/packages/cx/src/widgets/Sandbox.d.ts b/packages/cx/src/widgets/Sandbox.d.ts
deleted file mode 100644
index e5b6fce41..000000000
--- a/packages/cx/src/widgets/Sandbox.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as Cx from "../core";
-
-interface SandboxProps extends Cx.PureContainerProps {
-   storage: Cx.Prop<Cx.Record>;
-
-   /* Cx.StringProp doesn't work for unknown reason */
-   key?: any;
-
-   accessKey?: Cx.StringProp;
-
-   recordName?: Cx.RecordAlias;
-   recordAlias?: Cx.RecordAlias;
-
-   immutable?: boolean;
-   sealed?: boolean;
-}
-
-export class Sandbox extends Cx.Widget<SandboxProps> {}
diff --git a/packages/cx/src/widgets/Sandbox.js b/packages/cx/src/widgets/Sandbox.js
deleted file mode 100644
index 1fdc1bf10..000000000
--- a/packages/cx/src/widgets/Sandbox.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Widget } from "../ui/Widget";
-import { PureContainer } from "../ui/PureContainer";
-import { Binding } from "../data/Binding";
-import { ExposedValueView } from "../data/ExposedValueView";
-
-export class Sandbox extends PureContainer {
-   init() {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.accessKey) this.key = this.accessKey;
-
-      this.storageBinding = Binding.get(this.storage);
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.store = new ExposedValueView({
-         store: instance.parentStore,
-         containerBinding: this.storageBinding,
-         key: null,
-         recordName: this.recordName,
-         immutable: this.immutable,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance) {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            storage: undefined,
-            key: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, instance) {
-      var { store, data } = instance;
-      if (store.getKey() !== data.key) {
-         //when navigating to a page using the same widget tree as the previous page
-         //everything needs to be reinstantiated, e.g. user/1 => user/2
-         instance.store = new ExposedValueView({
-            store: store,
-            containerBinding: this.storageBinding,
-            key: data.key,
-            recordName: this.recordName,
-            immutable: this.immutable,
-            sealed: this.sealed,
-         });
-         instance.clearChildrenCache();
-      }
-      super.prepareData(context, instance);
-   }
-}
-
-Sandbox.prototype.recordName = "$page";
-Sandbox.prototype.immutable = false;
-Sandbox.prototype.sealed = false;
-
-Widget.alias("sandbox", Sandbox);
diff --git a/packages/cx/src/widgets/Sandbox.ts b/packages/cx/src/widgets/Sandbox.ts
new file mode 100644
index 000000000..3c40d8cf3
--- /dev/null
+++ b/packages/cx/src/widgets/Sandbox.ts
@@ -0,0 +1,103 @@
+import { Widget } from "../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { Binding, BindingInput } from "../data/Binding";
+import { ExposedValueView, ExposedValueViewConfig } from "../data/ExposedValueView";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp, WritableProp } from "../ui/Prop";
+
+export interface SandboxConfig extends PureContainerConfig {
+   /** Binding to the object that holds sandbox data. */
+   storage: WritableProp<Record<string, any>>;
+
+   /** Key used to identify the sandbox instance within the storage. */
+   key?: StringProp;
+
+   /** Alias for `key`. */
+   accessKey?: StringProp;
+
+   /** Alias used to expose sandbox data. Default is `$page`. */
+   recordName?: string;
+
+   /** Alias for `recordName`. */
+   recordAlias?: string;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that sandbox store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export interface SandboxInstance extends Instance {
+   store: ExposedValueView;
+}
+
+export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
+   declare storage: WritableProp<Record<string, any>>;
+   declare key?: StringProp;
+   declare recordName?: string;
+   declare recordAlias?: string;
+   declare accessKey?: StringProp;
+   declare immutable?: boolean;
+   declare sealed?: boolean;
+   declare storageBinding: Binding;
+   init(): void {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.accessKey) this.key = this.accessKey;
+
+      this.storageBinding = Binding.get(this.storage);
+
+      super.init();
+   }
+
+   initInstance(context: RenderingContext, instance: SandboxInstance): void {
+      instance.store = new ExposedValueView({
+         store: instance.parentStore,
+         containerBinding: this.storageBinding,
+         key: null,
+         recordName: this.recordName,
+         immutable: this.immutable,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: SandboxInstance): void {
+      instance.store.setStore(instance.parentStore);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            storage: undefined,
+            key: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: SandboxInstance): void {
+      var { store, data } = instance;
+      if (store.getKey() !== data.key) {
+         //when navigating to a page using the same widget tree as the previous page
+         //everything needs to be reinstantiated, e.g. user/1 => user/2
+         instance.store = new ExposedValueView({
+            store: store,
+            containerBinding: this.storageBinding,
+            key: data.key,
+            recordName: this.recordName,
+            immutable: this.immutable,
+            sealed: this.sealed,
+         });
+         instance.clearChildrenCache();
+      }
+      super.prepareData(context, instance);
+   }
+}
+
+Sandbox.prototype.recordName = "$page";
+Sandbox.prototype.immutable = false;
+Sandbox.prototype.sealed = false;
+
+Widget.alias("sandbox", Sandbox);
diff --git a/packages/cx/src/widgets/Section.d.ts b/packages/cx/src/widgets/Section.d.ts
deleted file mode 100644
index d23aa5a5f..000000000
--- a/packages/cx/src/widgets/Section.d.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {
-   Widget,
-   Prop,
-   StyledContainerProps,
-   BooleanProp,
-   StringProp,
-   StyleProp,
-   ClassProp,
-   Config
-} from '../core';
-
-interface SectionProps extends StyledContainerProps {
-
-   id?: Prop<string | number>,
-
-   /** Add default padding to the section body. Default is `true`. */
-   pad?: BooleanProp,
-
-   /** A custom style which will be applied to the header. */
-   headerStyle?: StyleProp,
-
-   /** Additional CSS class to be applied to the header. */
-   headerClass?: ClassProp,
-
-   /** A custom style which will be applied to the body. */
-   bodyStyle?: StyleProp,
-
-   /** Additional CSS class to be applied to the section body. */
-   bodyClass?: ClassProp,
-
-   /** A custom style which will be applied to the footer. */
-   footerStyle?: StyleProp,
-
-   /** Additional CSS class to be applied to the footer. */
-   footerClass?: ClassProp,
-
-   /** Section's title. */
-   title?: StringProp,
-
-   /** Contents that should go in the header. */
-   header?: Config,
-
-   /** Contents that should go in the footer. */
-   footer?: Config,
-
-   /** Title heading level (1-6) */
-   hLevel?: number
-
-}
-
-export class Section extends Widget<SectionProps> {
-}
diff --git a/packages/cx/src/widgets/Section.js b/packages/cx/src/widgets/Section.js
deleted file mode 100644
index 491937f2d..000000000
--- a/packages/cx/src/widgets/Section.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import {Widget, VDOM, getContent} from '../ui/Widget';
-import {Container} from '../ui/Container';
-import {Heading} from './Heading';
-import {isString} from '../util/isString';
-import {parseStyle} from '../util/parseStyle';
-
-export class Section extends Container {
-
-   init() {
-      if (isString(this.headerStyle))
-         this.headerStyle = parseStyle(this.headerStyle);
-
-      if (isString(this.footerStyle))
-         this.footerStyle = parseStyle(this.footerStyle);
-
-      if (isString(this.bodyStyle))
-         this.bodyStyle = parseStyle(this.bodyStyle);
-
-      super.init();
-   }
-
-   add(item) {
-      if (item && item.putInto == 'header')
-         this.header = {
-            ...item,
-            putInto: null
-         };
-      else if (item && item.putInto == 'footer')
-         this.footer = {
-            ...item,
-            putInto: null
-         };
-      else
-         super.add(...arguments);
-   }
-
-   declareData() {
-      return super.declareData({
-         id: undefined,
-         headerStyle: {structured: true},
-         headerClass: {structured: true},
-         bodyStyle: {structured: true},
-         bodyClass: {structured: true},
-         footerStyle: {structured: true},
-         footerClass: {structured: true}
-      })
-   }
-
-   initComponents() {
-      super.initComponents({
-         header: this.getHeader(),
-         footer: this.getFooter()
-      });
-   }
-
-   getHeader() {
-      if (this.title)
-         return Widget.create(Heading, {
-            text: this.title,
-            level: this.hLevel
-         });
-
-      if (this.header)
-         return Heading.create(this.header);
-
-      return null;
-   }
-
-   getFooter() {
-      if (this.footer)
-         return Widget.create(this.footer);
-
-      return null;
-   }
-
-   prepareData(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pad: this.pad
-      };
-      super.prepareData(context, instance);
-   }
-
-   initInstance(context, instance) {
-      instance.eventHandlers = instance.getJsxEventProps();
-      super.initInstance(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data, components, eventHandlers} = instance;
-      let header, footer;
-      let {CSS, baseClass} = this;
-
-      if (components.header) {
-         header = (
-            <header
-               className={CSS.expand(CSS.element(baseClass, 'header'), data.headerClass)}
-               style={data.headerStyle}
-            >
-               {getContent(components.header.render(context))}
-            </header>
-         );
-      }
-
-      if (components.footer) {
-         footer = (
-            <footer
-               className={CSS.expand(CSS.element(baseClass, 'footer'), data.footerClass)}
-               style={data.footerStyle}
-            >
-               {getContent(components.footer.render(context))}
-            </footer>
-         );
-      }
-
-      return (
-         <section
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            id={data.id}
-            {...eventHandlers}
-         >
-            { header }
-            <div className={CSS.expand(CSS.element(this.baseClass, 'body'), data.bodyClass)} style={data.bodyStyle}>
-               {this.renderChildren(context, instance)}
-            </div>
-            { footer }
-         </section>
-      )
-   }
-}
-
-
-Section.prototype.styled = true;
-Section.prototype.pad = true;
-Section.prototype.baseClass = 'section';
-Section.prototype.hLevel = 3;
diff --git a/packages/cx/src/widgets/Section.scss b/packages/cx/src/widgets/Section.scss
index fdb7a963b..725f6f62e 100644
--- a/packages/cx/src/widgets/Section.scss
+++ b/packages/cx/src/widgets/Section.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 
 @mixin cx-section(
    $name: 'section',
@@ -5,10 +6,10 @@
    $besm: $cx-besm
 ) {
 
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       flex-direction: column;
diff --git a/packages/cx/src/widgets/Section.tsx b/packages/cx/src/widgets/Section.tsx
new file mode 100644
index 000000000..307819297
--- /dev/null
+++ b/packages/cx/src/widgets/Section.tsx
@@ -0,0 +1,187 @@
+/** @jsxImportSource react */
+import { Widget, VDOM, getContent } from "../ui/Widget";
+import { ChildNode, ContainerBase, StyledContainerConfig } from "../ui/Container";
+import { Heading } from "./Heading";
+import { isString } from "../util/isString";
+import { parseStyle } from "../util/parseStyle";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { BooleanProp, StringProp, StyleProp, ClassProp, Prop } from "../ui/Prop";
+import { Create } from "../util/Component";
+
+export interface SectionConfig extends StyledContainerConfig {
+   id?: Prop<string | number>;
+
+   /** Add default padding to the section body. Default is `true`. */
+   pad?: BooleanProp;
+
+   /** A custom style which will be applied to the header. */
+   headerStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the header. */
+   headerClass?: ClassProp;
+
+   /** A custom style which will be applied to the body. */
+   bodyStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the section body. */
+   bodyClass?: ClassProp;
+
+   /** A custom style which will be applied to the footer. */
+   footerStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the footer. */
+   footerClass?: ClassProp;
+
+   /** Section's title. */
+   title?: StringProp;
+
+   /** Contents that should go in the header. */
+   header?: Create<typeof Widget>;
+
+   /** Contents that should go in the footer. */
+   footer?: Create<typeof Widget>;
+
+   /** Title heading level (1-6) */
+   hLevel?: number;
+}
+
+export class Section extends ContainerBase<SectionConfig, Instance> {
+   declare headerStyle?: StyleProp;
+   declare footerStyle?: StyleProp;
+   declare bodyStyle?: StyleProp;
+   declare title?: StringProp;
+   declare header?: Create<typeof Widget>;
+   declare footer?: Create<typeof Widget>;
+   declare hLevel?: number;
+   declare pad?: BooleanProp;
+   declare baseClass: string;
+
+   init(): void {
+      if (isString(this.headerStyle)) this.headerStyle = parseStyle(this.headerStyle);
+
+      if (isString(this.footerStyle)) this.footerStyle = parseStyle(this.footerStyle);
+
+      if (isString(this.bodyStyle)) this.bodyStyle = parseStyle(this.bodyStyle);
+
+      super.init();
+   }
+
+   add(item: any): void {
+      if (item && item.putInto == "header")
+         this.header = {
+            ...item,
+            putInto: null,
+         };
+      else if (item && item.putInto == "footer")
+         this.footer = {
+            ...item,
+            putInto: null,
+         };
+      else super.add(item);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         id: undefined,
+         headerStyle: { structured: true },
+         headerClass: { structured: true },
+         bodyStyle: { structured: true },
+         bodyClass: { structured: true },
+         footerStyle: { structured: true },
+         footerClass: { structured: true },
+      });
+   }
+
+   initComponents(context: RenderingContext, instance: Instance): void {
+      super.initComponents(context, instance, {
+         header: this.getHeader(),
+         footer: this.getFooter(),
+      });
+   }
+
+   getHeader(): Widget | null {
+      if (this.title)
+         return Widget.create(Heading, {
+            text: this.title,
+            level: this.hLevel,
+         }) as Widget;
+
+      if (this.header) return Heading.create(this.header);
+
+      return null;
+   }
+
+   getFooter(): Widget | null {
+      if (this.footer) return Widget.create(this.footer);
+
+      return null;
+   }
+
+   prepareData(context: RenderingContext, instance: Instance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pad: this.pad,
+      };
+      super.prepareData(context, instance);
+   }
+
+   initInstance(context: RenderingContext, instance: Instance): void {
+      (instance as any).eventHandlers = instance.getJsxEventProps();
+      super.initInstance(context, instance);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data, components } = instance;
+      let eventHandlers = (instance as any).eventHandlers;
+      let header: React.ReactNode, footer: React.ReactNode;
+      let { CSS, baseClass } = this;
+
+      if (components?.header) {
+         header = (
+            <header
+               className={CSS.expand(CSS.element(baseClass, "header"), data.headerClass)}
+               style={data.headerStyle as any}
+            >
+               {getContent(components.header.render(context))}
+            </header>
+         );
+      }
+
+      if (components?.footer) {
+         footer = (
+            <footer
+               className={CSS.expand(CSS.element(baseClass, "footer"), data.footerClass)}
+               style={data.footerStyle as any}
+            >
+               {getContent(components.footer.render(context))}
+            </footer>
+         );
+      }
+
+      return (
+         <section
+            key={key}
+            className={data.classNames as string}
+            style={data.style as any}
+            id={data.id as string}
+            {...eventHandlers}
+         >
+            {header}
+            <div
+               className={CSS.expand(CSS.element(this.baseClass, "body"), data.bodyClass)}
+               style={data.bodyStyle as any}
+            >
+               {this.renderChildren(context, instance)}
+            </div>
+            {footer}
+         </section>
+      );
+   }
+}
+
+Section.prototype.styled = true;
+Section.prototype.pad = true;
+Section.prototype.baseClass = "section";
+Section.prototype.hLevel = 3;
diff --git a/packages/cx/src/widgets/autoFocus.d.ts b/packages/cx/src/widgets/autoFocus.d.ts
deleted file mode 100644
index b60fd7a27..000000000
--- a/packages/cx/src/widgets/autoFocus.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function autoFocus(el: any, component: React.Component);
diff --git a/packages/cx/src/widgets/autoFocus.js b/packages/cx/src/widgets/autoFocus.js
deleted file mode 100644
index 8a0f3dca1..000000000
--- a/packages/cx/src/widgets/autoFocus.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { FocusManager } from "../ui/FocusManager";
-import { isTouchEvent } from "../util/isTouchEvent";
-
-export function autoFocus(el, component) {
-   let data = component.props.data || component.props.instance.data;
-   let autoFocusValue = el && data.autoFocus;
-   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el);
-   component.autoFocusValue = autoFocusValue;
-}
diff --git a/packages/cx/src/widgets/autoFocus.ts b/packages/cx/src/widgets/autoFocus.ts
new file mode 100644
index 000000000..69b27941a
--- /dev/null
+++ b/packages/cx/src/widgets/autoFocus.ts
@@ -0,0 +1,9 @@
+import { FocusManager } from "../ui/FocusManager";
+import { isTouchEvent } from "../util/isTouchEvent";
+
+export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
+   let data = component.props.data || component.props.instance.data;
+   let autoFocusValue = el && data.autoFocus;
+   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
+   component.autoFocusValue = autoFocusValue;
+}
diff --git a/packages/cx/src/widgets/cx.d.ts b/packages/cx/src/widgets/cx.d.ts
deleted file mode 100644
index b1d2c9873..000000000
--- a/packages/cx/src/widgets/cx.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export function cx(typeName, props?, ...children);
-export function react(config);
\ No newline at end of file
diff --git a/packages/cx/src/widgets/cx.js b/packages/cx/src/widgets/cx.js
deleted file mode 100644
index 88e17f20d..000000000
--- a/packages/cx/src/widgets/cx.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import {HtmlElement} from './HtmlElement';
-import {VDOM} from '../ui/Widget';
-import {createComponentFactory, isComponentFactory} from '../util/Component';
-import {createFunctionalComponent} from '../ui/createFunctionalComponent'
-import {isString} from '../util/isString';
-import {isNumber} from '../util/isNumber';
-import {isFunction} from '../util/isFunction';
-import {isUndefined} from '../util/isUndefined';
-import {isArray} from '../util/isArray';
-
-import {flattenProps} from '../ui/flattenProps';
-
-let htmlFactoryCache = {};
-
-function getHtmlElementFactory(tagName) {
-   let factory = htmlFactoryCache[tagName];
-   if (factory)
-      return factory;
-   return htmlFactoryCache[tagName] = createComponentFactory(() => {}, config => HtmlElement.create(HtmlElement, {tag: tagName}, flattenProps(config)), {tag: tagName});
-}
-
-export function cx(typeName, props, ...children) {
-
-   if (isArray(typeName))
-      return typeName;
-
-   if (isFunction(typeName) && isUndefined(props))
-      return createFunctionalComponent(config => typeName(flattenProps(config)));
-
-   if (typeName.type || typeName.$type)
-      return typeName;
-
-   if (children && children.length == 0)
-      children = null;
-
-   if (children && children.length == 1)
-      children = children[0];
-
-   if (typeName == 'cx')
-      return children;
-
-   if (typeName == 'react')
-      return react(children);
-
-   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase())
-      typeName = getHtmlElementFactory(typeName);
-
-   return {
-      $type: typeName,
-      $props: props,
-      jsxAttributes: props && Object.keys(props),
-      children
-   }
-}
-
-export function react(config) {
-   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config))
-      return config;
-
-   if (isArray(config))
-      return config.map(react);
-
-   let type = config.$type;
-
-   if (isComponentFactory(type) && type.$meta && type.$meta.tag)
-      type = type.$meta.tag;
-
-   if (isArray(config.children))
-      return VDOM.createElement(type, config.$props, ...config.children.map(react));
-
-   return VDOM.createElement(type, config.$props, react(config.children));
-}
\ No newline at end of file
diff --git a/packages/cx/src/widgets/cx.ts b/packages/cx/src/widgets/cx.ts
new file mode 100644
index 000000000..739aba5ec
--- /dev/null
+++ b/packages/cx/src/widgets/cx.ts
@@ -0,0 +1,63 @@
+import { HtmlElement } from "./HtmlElement";
+import { VDOM } from "../ui/Widget";
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { isString } from "../util/isString";
+import { isNumber } from "../util/isNumber";
+import { isFunction } from "../util/isFunction";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+
+import { flattenProps } from "../ui/flattenProps";
+
+let htmlFactoryCache: Record<string, any> = {};
+
+function getHtmlElementFactory(tagName: string): any {
+   let factory = htmlFactoryCache[tagName];
+   if (factory) return factory;
+   return (htmlFactoryCache[tagName] = createComponentFactory(
+      () => {},
+      (config: any) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)),
+      { tag: tagName },
+   ));
+}
+
+export function cx(typeName: any, props?: any, ...children: any[]): any {
+   if (isArray(typeName)) return typeName;
+
+   if (isFunction(typeName) && isUndefined(props))
+      return createFunctionalComponent((config: any) => typeName(flattenProps(config)));
+
+   if (typeName.type || typeName.$type) return typeName;
+
+   if (children && children.length == 0) children = [];
+
+   if (children && children.length == 1) children = children[0];
+
+   if (typeName == "cx") return children;
+
+   if (typeName == "react") return react(children);
+
+   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) typeName = getHtmlElementFactory(typeName);
+
+   return {
+      $type: typeName,
+      $props: props,
+      jsxAttributes: props && Object.keys(props),
+      children,
+   };
+}
+
+export function react(config: any): any {
+   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config)) return config;
+
+   if (isArray(config)) return config.map(react);
+
+   let type = config.$type;
+
+   if (isComponentFactory(type) && type.$meta && type.$meta.tag) type = type.$meta.tag;
+
+   if (isArray(config.children)) return VDOM.createElement(type, config.$props, ...config.children.map(react));
+
+   return VDOM.createElement(type, config.$props, react(config.children));
+}
diff --git a/packages/cx/src/widgets/drag-drop/DragClone.scss b/packages/cx/src/widgets/drag-drop/DragClone.scss
index ad3eb69a9..d40bd6a3f 100644
--- a/packages/cx/src/widgets/drag-drop/DragClone.scss
+++ b/packages/cx/src/widgets/drag-drop/DragClone.scss
@@ -1,12 +1,14 @@
+@use "sass:map";
+
 @mixin cx-dragclone(
    $name: 'dragclone',
    $style: $cx-dragclone-style,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
 
diff --git a/packages/cx/src/widgets/drag-drop/DragHandle.d.ts b/packages/cx/src/widgets/drag-drop/DragHandle.d.ts
deleted file mode 100644
index 4678c2083..000000000
--- a/packages/cx/src/widgets/drag-drop/DragHandle.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as Cx from '../../core';
-
-interface DragHandleProps extends Cx.StyledContainerProps {
-   
-   /** Base CSS class to be applied to the element. Defaults to 'draghandle'. */
-   baseClass?: string
-   
-}
-
-export class DragHandle extends Cx.Widget<DragHandleProps> {}
diff --git a/packages/cx/src/widgets/drag-drop/DragHandle.js b/packages/cx/src/widgets/drag-drop/DragHandle.js
deleted file mode 100644
index fc731b249..000000000
--- a/packages/cx/src/widgets/drag-drop/DragHandle.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Widget, VDOM } from '../../ui/Widget';
-import { Container } from '../../ui/Container';
-import { ddHandle } from '../drag-drop/ops';
-import {isArray} from '../../util/isArray';
-
-export class DragHandle extends Container {
-
-   explore(context, instance) {
-      if (isArray(context.dragHandles))
-         context.dragHandles.push(instance);
-      super.explore(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data} = instance;
-      return (
-         <div
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            onTouchStart={ddHandle}
-            onMouseDown={ddHandle}
-            onTouchMove={ddHandle}
-            onMouseMove={ddHandle}
-            onTouchEnd={ddHandle}
-            onMouseUp={ddHandle}
-         >
-            {this.renderChildren(context, instance)}
-         </div>
-      )
-   }
-}
-
-DragHandle.prototype.styled = true;
-DragHandle.prototype.baseClass = 'draghandle';
-
-Widget.alias('draghandle', DragHandle);
diff --git a/packages/cx/src/widgets/drag-drop/DragHandle.scss b/packages/cx/src/widgets/drag-drop/DragHandle.scss
index 29f0a25fd..eb16909da 100644
--- a/packages/cx/src/widgets/drag-drop/DragHandle.scss
+++ b/packages/cx/src/widgets/drag-drop/DragHandle.scss
@@ -1,11 +1,13 @@
+@use "sass:map";
+
 @mixin cx-draghandle(
    $name: 'draghandle',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       touch-action: none;
diff --git a/packages/cx/src/widgets/drag-drop/DragHandle.tsx b/packages/cx/src/widgets/drag-drop/DragHandle.tsx
new file mode 100644
index 000000000..20aad9303
--- /dev/null
+++ b/packages/cx/src/widgets/drag-drop/DragHandle.tsx
@@ -0,0 +1,47 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from '../../ui/Widget';
+import { StyledContainerBase, StyledContainerConfig } from '../../ui/Container';
+import { ddHandle } from '../drag-drop/ops';
+import { isArray } from '../../util/isArray';
+import { RenderingContext } from '../../ui/RenderingContext';
+import { Instance } from '../../ui/Instance';
+
+export interface DragHandleConfig extends StyledContainerConfig {
+   /** Base CSS class to be applied to the element. Defaults to 'draghandle'. */
+   baseClass?: string;
+}
+
+export class DragHandle extends StyledContainerBase<DragHandleConfig> {
+   constructor(config?: DragHandleConfig) {
+      super(config);
+   }
+
+   explore(context: RenderingContext, instance: Instance) {
+      if (isArray(context.dragHandles)) context.dragHandles.push(instance);
+      super.explore(context, instance);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      const { data } = instance;
+      return (
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            onTouchStart={ddHandle}
+            onMouseDown={ddHandle}
+            onTouchMove={ddHandle}
+            onMouseMove={ddHandle}
+            onTouchEnd={ddHandle}
+            onMouseUp={ddHandle}
+         >
+            {this.renderChildren(context, instance)}
+         </div>
+      );
+   }
+}
+
+DragHandle.prototype.styled = true;
+DragHandle.prototype.baseClass = 'draghandle';
+
+Widget.alias('draghandle', DragHandle);
diff --git a/packages/cx/src/widgets/drag-drop/DragSource.d.ts b/packages/cx/src/widgets/drag-drop/DragSource.d.ts
deleted file mode 100644
index 015914a12..000000000
--- a/packages/cx/src/widgets/drag-drop/DragSource.d.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui/Instance";
-
-interface DragSourceProps extends Cx.StyledContainerProps {
-   /**
-    * Data about the drag source that can be used by drop zones to test if
-    * drag source is acceptable and to perform drop operations.
-    */
-   data?: any;
-
-   /**
-    * Set to true to hide the element while being dragged.
-    * Use if drop zones are configured to expand to indicate where drop will occur.
-    */
-   hideOnDrag?: boolean;
-
-   /** Set to true to indicate that this drag source can be dragged only by using an inner DragHandle. */
-   handled?: boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to 'dragsource'. */
-   baseClass?: string;
-
-   onDragStart?: (e, instance: Instance) => any;
-
-   onDragEnd?: (e, instance: Instance) => void;
-
-   id?: Cx.StringProp;
-
-   /** Custom contents to be displayed during drag & drop operation. */
-   clone?: Cx.Config;
-
-   /** CSS styles to be applied to the clone of the element being dragged. */
-   cloneStyle?: Cx.StyleProp;
-
-   /** CSS styles to be applied to the element being dragged. */
-   draggedStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be applied to the clone of the element being dragged. */
-   cloneClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied to the element being dragged. */
-   draggedClass?: Cx.ClassProp;
-}
-
-export class DragSource extends Cx.Widget<DragSourceProps> {}
diff --git a/packages/cx/src/widgets/drag-drop/DragSource.js b/packages/cx/src/widgets/drag-drop/DragSource.js
deleted file mode 100644
index 12a958c4b..000000000
--- a/packages/cx/src/widgets/drag-drop/DragSource.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Container } from "../../ui/Container";
-import { ddMouseDown, ddDetect, ddMouseUp, initiateDragDrop, isDragHandleEvent } from "./ops";
-import { preventFocus } from "../../ui/FocusManager";
-import { parseStyle } from "../../util/parseStyle";
-
-export class DragSource extends Container {
-   init() {
-      this.cloneStyle = parseStyle(this.cloneStyle);
-      this.draggedStyle = parseStyle(this.draggedStyle);
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         id: undefined,
-         data: { structured: true },
-         cloneStyle: { structured: true },
-         cloneClass: { structured: true },
-         draggedClass: { structured: true },
-         draggedStyle: { structured: true },
-      });
-   }
-
-   explore(context, instance) {
-      context.push("dragHandles", (instance.dragHandles = []));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("dragHandles");
-   }
-
-   render(context, instance, key) {
-      return (
-         <DragSourceComponent key={key} instance={instance} handled={this.handled || instance.dragHandles.length > 0}>
-            {this.renderChildren(context, instance)}
-         </DragSourceComponent>
-      );
-   }
-}
-
-DragSource.prototype.styled = true;
-DragSource.prototype.baseClass = "dragsource";
-DragSource.prototype.hideOnDrag = false;
-DragSource.prototype.handled = false;
-
-Widget.alias("dragsource", DragSource);
-
-class DragSourceComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = { dragged: false };
-      this.beginDragDrop = this.beginDragDrop.bind(this);
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onMouseDown = this.onMouseDown.bind(this);
-      this.setRef = (el) => {
-         this.el = el;
-      };
-   }
-
-   render() {
-      let { instance, children, handled } = this.props;
-      let { data, widget } = instance;
-      let { CSS } = widget;
-
-      if (this.state.dragged && widget.hideOnDrag) return null;
-
-      let classes = [
-         data.classNames,
-         CSS.state({
-            dragged: this.state.dragged,
-            draggable: !handled,
-         }),
-      ];
-
-      let style = data.style;
-
-      if (this.state.dragged) {
-         if (data.draggedClass) classes.push(data.draggedClass);
-         if (data.draggedStyle)
-            style = {
-               ...style,
-               ...data.draggedStyle,
-            };
-      }
-
-      let eventHandlers = {
-         ...instance.getJsxEventProps(),
-         onTouchStart: this.onMouseDown,
-         onMouseDown: this.onMouseDown,
-         onTouchMove: this.onMouseMove,
-         onMouseMove: this.onMouseMove,
-         onTouchEnd: ddMouseUp,
-         onMouseUp: ddMouseUp,
-      };
-
-      delete eventHandlers.onDragStart;
-      delete eventHandlers.onDragEnd;
-
-      return (
-         <div id={data.id} ref={this.setRef} className={CSS.expand(classes)} style={style} {...eventHandlers}>
-            {children}
-         </div>
-      );
-   }
-
-   onMouseDown(e) {
-      ddMouseDown(e);
-      if (isDragHandleEvent(e) || !this.props.handled) {
-         preventFocus(e); //disables text selection in Firefox
-         e.stopPropagation();
-      }
-   }
-
-   onMouseMove(e) {
-      if (ddDetect(e)) {
-         if (isDragHandleEvent(e) || !this.props.handled) {
-            this.beginDragDrop(e);
-         }
-      }
-   }
-
-   beginDragDrop(e) {
-      let { instance } = this.props;
-      let { data, widget, store } = instance;
-
-      if (widget.onDragStart && instance.invoke("onDragStart", e, instance) === false) return;
-
-      initiateDragDrop(
-         e,
-         {
-            sourceEl: this.el,
-            source: {
-               store: store,
-               data: data.data,
-            },
-            clone: {
-               widget: widget.clone || widget,
-               store,
-               class: data.cloneClass,
-               style: data.cloneStyle,
-               cloneContent: !widget.clone,
-               matchSize: !widget.clone,
-               matchCursorOffset: !widget.clone,
-            },
-         },
-         (e) => {
-            this.setState({
-               dragged: false,
-            });
-            if (widget.onDragEnd) instance.invoke("onDragEnd", e, instance);
-         }
-      );
-
-      this.setState({
-         dragged: true,
-      });
-   }
-}
diff --git a/packages/cx/src/widgets/drag-drop/DragSource.scss b/packages/cx/src/widgets/drag-drop/DragSource.scss
index fd878d966..76c8e9f2b 100644
--- a/packages/cx/src/widgets/drag-drop/DragSource.scss
+++ b/packages/cx/src/widgets/drag-drop/DragSource.scss
@@ -1,11 +1,13 @@
+@use "sass:map";
+
 @mixin cx-dragsource(
    $name: 'dragsource',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       box-sizing: border-box;
diff --git a/packages/cx/src/widgets/drag-drop/DragSource.tsx b/packages/cx/src/widgets/drag-drop/DragSource.tsx
new file mode 100644
index 000000000..6142a7aac
--- /dev/null
+++ b/packages/cx/src/widgets/drag-drop/DragSource.tsx
@@ -0,0 +1,237 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM } from "../../ui/Widget";
+import { ContainerBase, ContainerConfig, StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { ddMouseDown, ddDetect, ddMouseUp, initiateDragDrop, isDragHandleEvent } from "./ops";
+import { preventFocus } from "../../ui/FocusManager";
+import { parseStyle } from "../../util/parseStyle";
+import { Instance } from "../../ui/Instance";
+import { StringProp, StyleProp, ClassProp, Config } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface DragSourceConfig extends StyledContainerConfig {
+   /**
+    * Data about the drag source that can be used by drop zones to test if
+    * drag source is acceptable and to perform drop operations.
+    */
+   data?: any;
+
+   /**
+    * Set to true to hide the element while being dragged.
+    * Use if drop zones are configured to expand to indicate where drop will occur.
+    */
+   hideOnDrag?: boolean;
+
+   /** Set to true to indicate that this drag source can be dragged only by using an inner DragHandle. */
+   handled?: boolean;
+
+   /** Base CSS class to be applied to the element. Defaults to 'dragsource'. */
+   baseClass?: string;
+
+   onDragStart?: (e: React.MouseEvent | React.TouchEvent, instance: Instance) => any;
+
+   onDragEnd?: (e: React.MouseEvent | React.TouchEvent, instance: Instance) => void;
+
+   id?: StringProp;
+
+   /** Custom contents to be displayed during drag & drop operation. */
+   clone?: Config;
+
+   /** CSS styles to be applied to the clone of the element being dragged. */
+   cloneStyle?: StyleProp;
+
+   /** CSS styles to be applied to the element being dragged. */
+   draggedStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the clone of the element being dragged. */
+   cloneClass?: ClassProp;
+
+   /** Additional CSS class to be applied to the element being dragged. */
+   draggedClass?: ClassProp;
+}
+
+export interface DragSourceInstance extends Instance<DragSource> {
+   dragHandles: any[];
+}
+
+export class DragSource extends StyledContainerBase<DragSourceConfig, DragSourceInstance> {
+   declare styled: boolean;
+   declare baseClass: string;
+   declare hideOnDrag: boolean;
+   declare handled: boolean;
+   declare data: any;
+   declare clone?: Config;
+   declare cloneStyle: any;
+   declare draggedStyle: any;
+   declare onDragStart?: (e: React.MouseEvent | React.TouchEvent, instance: DragSourceInstance) => any;
+   declare onDragEnd?: (e: React.MouseEvent | React.TouchEvent, instance: DragSourceInstance) => void;
+
+   constructor(config?: DragSourceConfig) {
+      super(config);
+   }
+
+   init() {
+      this.cloneStyle = parseStyle(this.cloneStyle);
+      this.draggedStyle = parseStyle(this.draggedStyle);
+      super.init();
+   }
+
+   declareData() {
+      super.declareData(...arguments, {
+         id: undefined,
+         data: { structured: true },
+         cloneStyle: { structured: true },
+         cloneClass: { structured: true },
+         draggedClass: { structured: true },
+         draggedStyle: { structured: true },
+      });
+   }
+
+   explore(context: RenderingContext, instance: DragSourceInstance) {
+      context.push("dragHandles", (instance.dragHandles = []));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: DragSourceInstance) {
+      context.pop("dragHandles");
+   }
+
+   render(context: RenderingContext, instance: DragSourceInstance, key: string) {
+      return (
+         <DragSourceComponent key={key} instance={instance} handled={this.handled || instance.dragHandles.length > 0}>
+            {this.renderChildren(context, instance)}
+         </DragSourceComponent>
+      );
+   }
+}
+
+DragSource.prototype.baseClass = "dragsource";
+DragSource.prototype.hideOnDrag = false;
+DragSource.prototype.handled = false;
+
+Widget.alias("dragsource", DragSource);
+
+interface DragSourceComponentProps {
+   instance: DragSourceInstance;
+   children?: any;
+   handled: boolean;
+}
+
+interface DragSourceComponentState {
+   dragged: boolean;
+}
+
+class DragSourceComponent extends VDOM.Component<DragSourceComponentProps, DragSourceComponentState> {
+   declare el: HTMLElement | null;
+
+   constructor(props: DragSourceComponentProps) {
+      super(props);
+      this.state = { dragged: false };
+      this.beginDragDrop = this.beginDragDrop.bind(this);
+      this.onMouseMove = this.onMouseMove.bind(this);
+      this.onMouseDown = this.onMouseDown.bind(this);
+   }
+
+   setRef = (el: HTMLElement | null) => {
+      this.el = el;
+   };
+
+   render() {
+      let { instance, children, handled } = this.props;
+      let { data, widget } = instance;
+      let { CSS } = widget;
+
+      if (this.state.dragged && widget.hideOnDrag) return null;
+
+      let classes = [
+         data.classNames,
+         CSS.state({
+            dragged: this.state.dragged,
+            draggable: !handled,
+         }),
+      ];
+
+      let style = data.style;
+
+      if (this.state.dragged) {
+         if (data.draggedClass) classes.push(data.draggedClass);
+         if (data.draggedStyle)
+            style = {
+               ...style,
+               ...data.draggedStyle,
+            };
+      }
+
+      let eventHandlers: any = {
+         ...instance.getJsxEventProps(),
+         onTouchStart: this.onMouseDown,
+         onMouseDown: this.onMouseDown,
+         onTouchMove: this.onMouseMove,
+         onMouseMove: this.onMouseMove,
+         onTouchEnd: ddMouseUp,
+         onMouseUp: ddMouseUp,
+      };
+
+      delete eventHandlers.onDragStart;
+      delete eventHandlers.onDragEnd;
+
+      return (
+         <div id={data.id} ref={this.setRef} className={CSS.expand(classes)} style={style} {...eventHandlers}>
+            {children}
+         </div>
+      );
+   }
+
+   onMouseDown(e: React.MouseEvent) {
+      ddMouseDown(e);
+      if (isDragHandleEvent(e) || !this.props.handled) {
+         preventFocus(e); //disables text selection in Firefox
+         e.stopPropagation();
+      }
+   }
+
+   onMouseMove(e: React.MouseEvent) {
+      if (ddDetect(e)) {
+         if (isDragHandleEvent(e) || !this.props.handled) {
+            this.beginDragDrop(e);
+         }
+      }
+   }
+
+   beginDragDrop(e: React.MouseEvent) {
+      let { instance } = this.props;
+      let { data, widget, store } = instance;
+
+      if (widget.onDragStart && instance.invoke("onDragStart", e, instance) === false) return;
+
+      initiateDragDrop(
+         e,
+         {
+            sourceEl: this.el!,
+            source: {
+               store: store,
+               data: data.data,
+            },
+            clone: {
+               widget: widget.clone || widget,
+               store,
+               class: data.cloneClass,
+               style: data.cloneStyle,
+               cloneContent: !widget.clone,
+               matchSize: !widget.clone,
+               matchCursorOffset: !widget.clone,
+            },
+         },
+         (e: any) => {
+            this.setState({
+               dragged: false,
+            });
+            if (widget.onDragEnd) instance.invoke("onDragEnd", e, instance);
+         },
+      );
+
+      this.setState({
+         dragged: true,
+      });
+   }
+}
diff --git a/packages/cx/src/widgets/drag-drop/DropZone.d.ts b/packages/cx/src/widgets/drag-drop/DropZone.d.ts
deleted file mode 100644
index 91d6d6eda..000000000
--- a/packages/cx/src/widgets/drag-drop/DropZone.d.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as Cx from "../../core";
-
-import { Instance } from "../../ui/Instance";
-import { DragEvent } from "./ops";
-
-interface DropZoneProps extends Cx.StyledContainerProps {
-   /** CSS styles to be applied when drag cursor is over the drop zone. */
-   overStyle?: Cx.StyleProp;
-
-   /** CSS styles to be applied when drag cursor is near the drop zone. */
-   nearStyle?: Cx.StyleProp;
-
-   /** CSS styles to be applied when drag operations begin used to highlight drop zones. */
-   farStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be applied when drag cursor is over the drop zone. */
-   overClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied when drag cursor is near the drop zone. */
-   nearClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied when drag operations begin used to highlight drop zones. */
-   farClass?: Cx.ClassProp;
-
-   /** Distance in `px` used to determine if cursor is near the dropzone. If not configured, cursor is never considered near. */
-   nearDistance?: number;
-
-   /** Bindable data related to the DropZone that might be useful inside onDrop operations. */
-   data?: Cx.StructuredProp;
-
-   /**
-    * Inflate the drop zone's bounding box so it activates on cursor proximity.
-    * Useful for invisible drop-zones that are only a few pixels tall/wide.
-    */
-   inflate?: number;
-
-   /**
-    * Inflate the drop zone's bounding box horizontally so it activates on cursor proximity.
-    * Useful for invisible drop-zones that are only a few pixels tall/wide.
-    */
-   hinflate?: number;
-
-   /**
-    * Inflate the drop zone's bounding box vertically so it activates on cursor proximity.
-    * Useful for invisible drop-zones that are only a few pixels tall/wide.
-    */
-   vinflate?: number;
-
-   /** Base CSS class to be applied to the element. Defaults to 'dropzone'. */
-   baseClass?: string;
-
-   /** A callback method invoked when dragged item is finally dropped.
-    The callback takes two arguments:
-    * dragDropEvent - An object containing information related to the source
-    * instance
-    Return value is written into dragDropEvent.result and can be passed
-    to the source's onDragEnd callback. */
-   onDrop?: string | ((event?: DragEvent, instance?: Instance) => any);
-
-   /** A callback method used to test if dragged item (source) is compatible
-    with the drop zone. */
-   onDropTest?: string | ((event?: DragEvent, instance?: Instance) => boolean);
-
-   /** A callback method invoked when the dragged item gets close to the drop zone.
-    See also `nearDistance`. */
-   onDragNear?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when the dragged item is dragged away. */
-   onDragAway?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when the dragged item is dragged over the drop zone.
-    The callback is called for each `mousemove` or `touchmove` event. */
-   onDragOver?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when the dragged item is dragged over the drop zone
-    for the first time. */
-   onDragEnter?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when the dragged item leaves the drop zone area. */
-   onDragLeave?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when at the beginning of the drag & drop operation. */
-   onDragStart?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when at the end of the drag & drop operation. */
-   onDragEnd?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** Match height of the item being dragged */
-   matchHeight?: boolean;
-
-   /** Match width of the item being dragged */
-   matchWidth?: boolean;
-
-   /** Match margin of the item being dragged */
-   matchMargin?: boolean;
-}
-
-export class DropZone extends Cx.Widget<DropZoneProps> {}
diff --git a/packages/cx/src/widgets/drag-drop/DropZone.js b/packages/cx/src/widgets/drag-drop/DropZone.js
deleted file mode 100644
index ce353f57d..000000000
--- a/packages/cx/src/widgets/drag-drop/DropZone.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Container } from "../../ui/Container";
-import { parseStyle } from "../../util/parseStyle";
-import { registerDropZone, DragDropContext } from "./ops";
-import { findScrollableParent } from "../../util/findScrollableParent";
-import { isNumber } from "../../util/isNumber";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-
-export class DropZone extends Container {
-   init() {
-      this.overStyle = parseStyle(this.overStyle);
-      this.nearStyle = parseStyle(this.nearStyle);
-      this.farStyle = parseStyle(this.farStyle);
-
-      if (isNumber(this.inflate)) {
-         this.hinflate = this.inflate;
-         this.vinflate = this.inflate;
-      }
-
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         overClass: { structured: true },
-         nearClass: { structured: true },
-         farClass: { structured: true },
-         overStyle: { structured: true },
-         nearStyle: { structured: true },
-         farStyle: { structured: true },
-         data: { structured: true },
-      });
-   }
-
-   render(context, instance, key) {
-      return (
-         <DropZoneComponent key={key} instance={instance}>
-            {this.renderChildren(context, instance)}
-         </DropZoneComponent>
-      );
-   }
-}
-
-DropZone.prototype.styled = true;
-DropZone.prototype.nearDistance = 0;
-DropZone.prototype.hinflate = 0;
-DropZone.prototype.vinflate = 0;
-DropZone.prototype.baseClass = "dropzone";
-
-Widget.alias("dropzone", DropZone);
-
-class DropZoneComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         state: false,
-      };
-   }
-
-   render() {
-      let { instance, children } = this.props;
-      let { data, widget } = instance;
-      let { CSS } = widget;
-
-      let classes = [data.classNames, CSS.state(this.state.state)];
-
-      let stateStyle;
-
-      switch (this.state.state) {
-         case "over":
-            classes.push(data.overClass);
-            stateStyle = parseStyle(data.overStyle);
-            break;
-         case "near":
-            classes.push(data.nearClass);
-            stateStyle = parseStyle(data.nearStyle);
-            break;
-         case "far":
-            classes.push(data.farClass);
-            stateStyle = parseStyle(data.farStyle);
-            break;
-      }
-
-      return (
-         <div
-            className={CSS.expand(classes)}
-            style={{ ...data.style, ...this.state.style, ...stateStyle }}
-            ref={(el) => {
-               this.el = el;
-            }}
-         >
-            {children}
-         </div>
-      );
-   }
-
-   componentDidMount() {
-      let dragDropOptions = this.context;
-      let disabled = dragDropOptions && dragDropOptions.disabled;
-      if (!disabled) this.unregister = registerDropZone(this);
-   }
-
-   componentWillUnmount() {
-      this.unregister && this.unregister();
-   }
-
-   onDropTest(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      return !widget.onDropTest || instance.invoke("onDropTest", e, instance);
-   }
-
-   onDragStart(e) {
-      this.setState({
-         state: "far",
-      });
-   }
-
-   onDragNear(e) {
-      this.setState({
-         state: "near",
-      });
-   }
-
-   onDragAway(e) {
-      this.setState({
-         state: "far",
-      });
-   }
-
-   onDragLeave(e) {
-      let { nearDistance } = this.props.instance.widget;
-      this.setState({
-         state: nearDistance ? "near" : "far",
-         style: null,
-      });
-   }
-
-   onDragMeasure(e) {
-      let rect = getTopLevelBoundingClientRect(this.el);
-
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      let { clientX, clientY } = e.cursor;
-      let distance =
-         Math.max(0, rect.left - clientX, clientX - rect.right) +
-         Math.max(0, rect.top - clientY, clientY - rect.bottom);
-
-      if (widget.hinflate > 0) {
-         rect.left -= widget.hinflate;
-         rect.right += widget.hinflate;
-      }
-
-      if (widget.vinflate > 0) {
-         rect.top -= widget.vinflate;
-         rect.bottom += widget.vinflate;
-      }
-
-      let { nearDistance } = widget;
-
-      let over = rect.left <= clientX && clientX < rect.right && rect.top <= clientY && clientY < rect.bottom;
-
-      return {
-         over:
-            over && Math.abs(clientX - (rect.left + rect.right) / 2) + Math.abs(clientY - (rect.top + rect.bottom) / 2),
-         near: nearDistance && (over || distance < nearDistance),
-      };
-   }
-
-   onDragEnter(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      let style = {};
-
-      if (widget.matchWidth) style.width = `${e.source.width}px`;
-
-      if (widget.matchHeight) style.height = `${e.source.height}px`;
-
-      if (widget.matchMargin) style.margin = e.source.margin.join(" ");
-
-      if (this.state != "over")
-         this.setState({
-            state: "over",
-            style,
-         });
-   }
-
-   onDragOver(e) {}
-
-   onGetHScrollParent() {
-      return findScrollableParent(this.el, true);
-   }
-
-   onGetVScrollParent() {
-      return findScrollableParent(this.el);
-   }
-
-   onDrop(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (this.state.state == "over" && widget.onDrop) instance.invoke("onDrop", e, instance);
-   }
-
-   onDragEnd(e) {
-      this.setState({
-         state: false,
-         style: null,
-      });
-   }
-}
-
-DropZoneComponent.contextType = DragDropContext;
diff --git a/packages/cx/src/widgets/drag-drop/DropZone.scss b/packages/cx/src/widgets/drag-drop/DropZone.scss
index 401ee63d9..5061799d0 100644
--- a/packages/cx/src/widgets/drag-drop/DropZone.scss
+++ b/packages/cx/src/widgets/drag-drop/DropZone.scss
@@ -1,11 +1,13 @@
+@use "sass:map";
+
 @mixin cx-dropzone(
    $name: 'dropzone',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       box-sizing: border-box;
diff --git a/packages/cx/src/widgets/drag-drop/DropZone.tsx b/packages/cx/src/widgets/drag-drop/DropZone.tsx
new file mode 100644
index 000000000..8743f2ae3
--- /dev/null
+++ b/packages/cx/src/widgets/drag-drop/DropZone.tsx
@@ -0,0 +1,353 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM } from "../../ui/Widget";
+import { ContainerBase, ContainerConfig, StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { parseStyle } from "../../util/parseStyle";
+import { registerDropZone, DragDropContext, DragEvent } from "./ops";
+import { findScrollableParent } from "../../util/findScrollableParent";
+import { isNumber } from "../../util/isNumber";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { Instance } from "../../ui/Instance";
+import { StyleProp, ClassProp, StructuredProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface DropZoneConfig extends StyledContainerConfig {
+   /** CSS styles to be applied when drag cursor is over the drop zone. */
+   overStyle?: StyleProp;
+
+   /** CSS styles to be applied when drag cursor is near the drop zone. */
+   nearStyle?: StyleProp;
+
+   /** CSS styles to be applied when drag operations begin used to highlight drop zones. */
+   farStyle?: StyleProp;
+
+   /** Additional CSS class to be applied when drag cursor is over the drop zone. */
+   overClass?: ClassProp;
+
+   /** Additional CSS class to be applied when drag cursor is near the drop zone. */
+   nearClass?: ClassProp;
+
+   /** Additional CSS class to be applied when drag operations begin used to highlight drop zones. */
+   farClass?: ClassProp;
+
+   /** Distance in `px` used to determine if cursor is near the dropzone. If not configured, cursor is never considered near. */
+   nearDistance?: number;
+
+   /** Bindable data related to the DropZone that might be useful inside onDrop operations. */
+   data?: StructuredProp;
+
+   /**
+    * Inflate the drop zone's bounding box so it activates on cursor proximity.
+    * Useful for invisible drop-zones that are only a few pixels tall/wide.
+    */
+   inflate?: number;
+
+   /**
+    * Inflate the drop zone's bounding box horizontally so it activates on cursor proximity.
+    * Useful for invisible drop-zones that are only a few pixels tall/wide.
+    */
+   hinflate?: number;
+
+   /**
+    * Inflate the drop zone's bounding box vertically so it activates on cursor proximity.
+    * Useful for invisible drop-zones that are only a few pixels tall/wide.
+    */
+   vinflate?: number;
+
+   /** Base CSS class to be applied to the element. Defaults to 'dropzone'. */
+   baseClass?: string;
+
+   /** A callback method invoked when dragged item is finally dropped.
+    The callback takes two arguments:
+    * dragDropEvent - An object containing information related to the source
+    * instance
+    Return value is written into dragDropEvent.result and can be passed
+    to the source's onDragEnd callback. */
+   onDrop?: string | ((event?: DragEvent, instance?: Instance) => any);
+
+   /** A callback method used to test if dragged item (source) is compatible
+    with the drop zone. */
+   onDropTest?: string | ((event?: DragEvent, instance?: Instance) => boolean);
+
+   /** A callback method invoked when the dragged item gets close to the drop zone.
+    See also `nearDistance`. */
+   onDragNear?: string | ((event?: DragEvent, instance?: Instance) => void);
+
+   /** A callback method invoked when the dragged item is dragged away. */
+   onDragAway?: string | ((event?: DragEvent, instance?: Instance) => void);
+
+   /** A callback method invoked when the dragged item is dragged over the drop zone.
+    The callback is called for each `mousemove` or `touchmove` event. */
+   onDragOver?: string | ((event?: DragEvent, instance?: Instance) => void);
+
+   /** A callback method invoked when the dragged item is dragged over the drop zone
+    for the first time. */
+   onDragEnter?: string | ((event?: DragEvent, instance?: Instance) => void);
+
+   /** A callback method invoked when the dragged item leaves the drop zone area. */
+   onDragLeave?: string | ((event?: DragEvent, instance?: Instance) => void);
+
+   /** A callback method invoked when at the beginning of the drag & drop operation. */
+   onDragStart?: string | ((event?: DragEvent, instance?: Instance) => void);
+
+   /** A callback method invoked when at the end of the drag & drop operation. */
+   onDragEnd?: string | ((event?: DragEvent, instance?: Instance) => void);
+
+   /** Match height of the item being dragged */
+   matchHeight?: boolean;
+
+   /** Match width of the item being dragged */
+   matchWidth?: boolean;
+
+   /** Match margin of the item being dragged */
+   matchMargin?: boolean;
+}
+
+export interface DropZoneInstance extends Instance<DropZone> {}
+
+export class DropZone extends StyledContainerBase<DropZoneConfig, DropZoneInstance> {
+   declare styled: boolean;
+   declare nearDistance: number;
+   declare hinflate: number;
+   declare vinflate: number;
+   declare baseClass: string;
+   declare overStyle: any;
+   declare nearStyle: any;
+   declare farStyle: any;
+   declare inflate?: number;
+   declare matchHeight?: boolean;
+   declare matchWidth?: boolean;
+   declare matchMargin?: boolean;
+   declare onDrop?: string | ((event?: DragEvent, instance?: Instance) => any);
+   declare onDropTest?: string | ((event?: DragEvent, instance?: Instance) => boolean);
+   declare onDragNear?: string | ((event?: DragEvent, instance?: Instance) => void);
+   declare onDragAway?: string | ((event?: DragEvent, instance?: Instance) => void);
+   declare onDragOver?: string | ((event?: DragEvent, instance?: Instance) => void);
+   declare onDragEnter?: string | ((event?: DragEvent, instance?: Instance) => void);
+   declare onDragLeave?: string | ((event?: DragEvent, instance?: Instance) => void);
+   declare onDragStart?: string | ((event?: DragEvent, instance?: Instance) => void);
+   declare onDragEnd?: string | ((event?: DragEvent, instance?: Instance) => void);
+
+   constructor(config?: DropZoneConfig) {
+      super(config);
+   }
+
+   init() {
+      this.overStyle = parseStyle(this.overStyle);
+      this.nearStyle = parseStyle(this.nearStyle);
+      this.farStyle = parseStyle(this.farStyle);
+
+      if (isNumber(this.inflate)) {
+         this.hinflate = this.inflate;
+         this.vinflate = this.inflate;
+      }
+
+      super.init();
+   }
+
+   declareData() {
+      return super.declareData(...arguments, {
+         overClass: { structured: true },
+         nearClass: { structured: true },
+         farClass: { structured: true },
+         overStyle: { structured: true },
+         nearStyle: { structured: true },
+         farStyle: { structured: true },
+         data: { structured: true },
+      });
+   }
+
+   render(context: RenderingContext, instance: DropZoneInstance, key: string) {
+      return (
+         <DropZoneComponent key={key} instance={instance}>
+            {this.renderChildren(context, instance)}
+         </DropZoneComponent>
+      );
+   }
+}
+
+DropZone.prototype.nearDistance = 0;
+DropZone.prototype.hinflate = 0;
+DropZone.prototype.vinflate = 0;
+DropZone.prototype.baseClass = "dropzone";
+
+Widget.alias("dropzone", DropZone);
+
+interface DropZoneComponentProps {
+   instance: DropZoneInstance;
+   children?: any;
+}
+
+interface DropZoneComponentState {
+   state: boolean | string;
+   style?: any;
+}
+
+class DropZoneComponent extends VDOM.Component<DropZoneComponentProps, DropZoneComponentState> {
+   el: HTMLElement | null = null;
+   unregister?: () => void;
+   declare context: any;
+
+   constructor(props: DropZoneComponentProps) {
+      super(props);
+      this.state = {
+         state: false,
+      };
+   }
+
+   render() {
+      let { instance, children } = this.props;
+      let { data, widget } = instance;
+      let { CSS } = widget;
+
+      let classes = [data.classNames, CSS.state(this.state.state)];
+
+      let stateStyle;
+
+      switch (this.state.state) {
+         case "over":
+            classes.push(data.overClass);
+            stateStyle = parseStyle(data.overStyle);
+            break;
+         case "near":
+            classes.push(data.nearClass);
+            stateStyle = parseStyle(data.nearStyle);
+            break;
+         case "far":
+            classes.push(data.farClass);
+            stateStyle = parseStyle(data.farStyle);
+            break;
+      }
+
+      return (
+         <div
+            className={CSS.expand(classes)}
+            style={{ ...data.style, ...this.state.style, ...stateStyle }}
+            ref={(el: HTMLDivElement | null) => {
+               this.el = el;
+            }}
+         >
+            {children}
+         </div>
+      );
+   }
+
+   componentDidMount() {
+      let dragDropOptions = this.context;
+      let disabled = dragDropOptions && dragDropOptions.disabled;
+      if (!disabled) this.unregister = registerDropZone(this);
+   }
+
+   componentWillUnmount() {
+      this.unregister && this.unregister();
+   }
+
+   onDropTest(e: DragEvent) {
+      let { instance } = this.props;
+      let { widget } = instance;
+      return !widget.onDropTest || instance.invoke("onDropTest", e, instance);
+   }
+
+   onDragStart(e: DragEvent) {
+      this.setState({
+         state: "far",
+      });
+   }
+
+   onDragNear(e: DragEvent) {
+      this.setState({
+         state: "near",
+      });
+   }
+
+   onDragAway(e: DragEvent) {
+      this.setState({
+         state: "far",
+      });
+   }
+
+   onDragLeave(e: DragEvent) {
+      let { nearDistance } = this.props.instance.widget;
+      this.setState({
+         state: nearDistance ? "near" : "far",
+         style: null,
+      });
+   }
+
+   onDragMeasure(e: DragEvent) {
+      let rectOrig = getTopLevelBoundingClientRect(this.el!);
+      let rect = { left: rectOrig.left, right: rectOrig.right, top: rectOrig.top, bottom: rectOrig.bottom };
+
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      let { clientX, clientY } = e.cursor;
+      let distance =
+         Math.max(0, rect.left - clientX, clientX - rect.right) +
+         Math.max(0, rect.top - clientY, clientY - rect.bottom);
+
+      if (widget.hinflate > 0) {
+         rect.left -= widget.hinflate;
+         rect.right += widget.hinflate;
+      }
+
+      if (widget.vinflate > 0) {
+         rect.top -= widget.vinflate;
+         rect.bottom += widget.vinflate;
+      }
+
+      let { nearDistance } = widget;
+
+      let over = rect.left <= clientX && clientX < rect.right && rect.top <= clientY && clientY < rect.bottom;
+
+      return {
+         over:
+            over && Math.abs(clientX - (rect.left + rect.right) / 2) + Math.abs(clientY - (rect.top + rect.bottom) / 2),
+         near: nearDistance && (over || distance < nearDistance),
+      };
+   }
+
+   onDragEnter(e: DragEvent) {
+      let { instance } = this.props;
+      let { widget } = instance;
+      let style: any = {};
+
+      if (widget.matchWidth) style.width = `${e.source.width}px`;
+
+      if (widget.matchHeight) style.height = `${e.source.height}px`;
+
+      if (widget.matchMargin) style.margin = e.source.margin.join(" ");
+
+      if (this.state.state != "over")
+         this.setState({
+            state: "over",
+            style,
+         });
+   }
+
+   onDragOver(e: DragEvent) {}
+
+   onGetHScrollParent() {
+      return findScrollableParent(this.el!, true);
+   }
+
+   onGetVScrollParent() {
+      return findScrollableParent(this.el!);
+   }
+
+   onDrop(e: DragEvent) {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (this.state.state == "over" && widget.onDrop) instance.invoke("onDrop", e, instance);
+   }
+
+   onDragEnd(e: DragEvent) {
+      this.setState({
+         state: false,
+         style: null,
+      });
+   }
+}
+
+DropZoneComponent.contextType = DragDropContext as any;
diff --git a/packages/cx/src/widgets/drag-drop/index.js b/packages/cx/src/widgets/drag-drop/index.js
deleted file mode 100644
index 122ffd892..000000000
--- a/packages/cx/src/widgets/drag-drop/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./DragSource";
-export * from "./DragHandle";
-export * from "./DropZone";
-export * from "./ops";
diff --git a/packages/cx/src/widgets/drag-drop/index.d.ts b/packages/cx/src/widgets/drag-drop/index.ts
similarity index 100%
rename from packages/cx/src/widgets/drag-drop/index.d.ts
rename to packages/cx/src/widgets/drag-drop/index.ts
diff --git a/packages/cx/src/widgets/drag-drop/ops.d.ts b/packages/cx/src/widgets/drag-drop/ops.d.ts
deleted file mode 100644
index c0cd5bbbf..000000000
--- a/packages/cx/src/widgets/drag-drop/ops.d.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as Cx from '../../core';
-import * as React from 'react';
-import { CursorPosition } from '../overlay/captureMouse';
-import { View } from '../../data/View';
-
-export interface DragEvent {
-   type: 'dragstart' | 'dragmove' | 'dragdrop',
-   event: React.SyntheticEvent<any>,
-   cursor: CursorPosition,
-   source: {
-      width: number,
-      height: number,
-      margin: string[],
-      data?: any,
-      store: View,
-      [other: string]: any,
-   },
-   result?: any
-}
-
-interface DragDropOptions {
-   sourceEl?: Element,
-   clone?: any,
-   source?: Cx.Config,
-}
-
-type DragEventHandler = (e: DragEvent) => void;
-
-export interface IDropZone {
-   onDropTest?: (e: DragEvent) => boolean;
-   onDragStart?: DragEventHandler;
-   onDragAway?: DragEventHandler;
-   onDragEnd?: DragEventHandler;
-   onDragMeasure?: (e: DragEvent) => { over: boolean, near: boolean };
-   onDragLeave?: DragEventHandler;
-   onDragOver?: DragEventHandler;
-   onDragEnter?: DragEventHandler;
-   onDrop?: DragEventHandler;
-}
-
-type UnregisterFunction = () => void;
-
-/** Register a drop zone. Return value is a function that can be used to unregister the drop zone. */
-export function registerDropZone(dropZone: IDropZone) : UnregisterFunction;
-
-/** Initiate a drag-drop operation. */
-export function initiateDragDrop(e: DragEvent, options?: DragDropOptions, onDragEnd?: (e?: DragEvent) => void) : void;
-
-export function ddMouseDown(e: React.SyntheticEvent<any>) : void;
-
-export function ddMouseUp() : void;
-
-export function ddDetect(e: React.SyntheticEvent<any>) : void | true;
-
-export function ddHandle(e: React.SyntheticEvent<any>) : void;
-
-export function isDragHandleEvent(e: React.SyntheticEvent<any>) : boolean;
\ No newline at end of file
diff --git a/packages/cx/src/widgets/drag-drop/ops.js b/packages/cx/src/widgets/drag-drop/ops.js
deleted file mode 100644
index 9e16dddd5..000000000
--- a/packages/cx/src/widgets/drag-drop/ops.js
+++ /dev/null
@@ -1,344 +0,0 @@
-import { SubscriberList } from "../../util/SubscriberList";
-import { getCursorPos, captureMouseOrTouch } from "../overlay/captureMouse";
-import { startAppLoop } from "../../ui/app/startAppLoop";
-import { getScrollerBoundingClientRect } from "../../util/getScrollerBoundingClientRect";
-import { isNumber } from "../../util/isNumber";
-import { isObject } from "../../util/isObject";
-import { isString } from "../../util/isString";
-import { ZIndexManager } from "../../ui/ZIndexManager";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-import { VDOM } from "../../ui/VDOM";
-import { Container } from "../../ui/Container";
-import { Console } from "../../util";
-
-let dropZones = new SubscriberList(),
-   dragStartedZones,
-   activeZone,
-   nearZones,
-   puppet,
-   scrollTimer,
-   vscrollParent,
-   hscrollParent;
-
-export function registerDropZone(dropZone) {
-   return dropZones.subscribe(dropZone);
-}
-
-export function initiateDragDrop(e, options = {}, onDragEnd) {
-   if (puppet) {
-      //last operation didn't finish properly
-      notifyDragDrop(e);
-   }
-
-   let sourceEl = options.sourceEl || e.currentTarget;
-   let sourceBounds = getTopLevelBoundingClientRect(sourceEl);
-   let cursor = getCursorPos(e);
-
-   let clone = {
-      ...options.clone,
-   };
-
-   let cloneEl = document.createElement("div");
-   cloneEl.classList.add("cxb-dragclone");
-   if (isString(clone["class"])) cloneEl.classList.add(clone["class"]);
-   if (isObject(clone.style)) Object.assign(cloneEl.style, clone.style);
-   cloneEl.style.left = `-1000px`;
-   cloneEl.style.top = `-1000px`;
-
-   if (clone.matchSize || clone.matchWidth) cloneEl.style.width = `${Math.ceil(sourceBounds.width)}px`;
-
-   if (clone.matchSize || clone.matchHeight) cloneEl.style.height = `${Math.ceil(sourceBounds.height)}px`;
-
-   cloneEl.style.zIndex = ZIndexManager.next() + 1000;
-
-   if (clone.cloneContent) {
-      cloneEl.appendChild(sourceEl.cloneNode(true));
-   }
-
-   document.body.appendChild(cloneEl);
-
-   let styles = getComputedStyle(sourceEl);
-
-   let deltaX = clone.matchCursorOffset ? cursor.clientX - sourceBounds.left : -3;
-   let deltaY = clone.matchCursorOffset ? cursor.clientY - sourceBounds.top : -3;
-
-   let source = {
-      ...options.source,
-      width: sourceBounds.width,
-      height: sourceBounds.height,
-      deltaX,
-      deltaY,
-      margin: [
-         styles.getPropertyValue("margin-top"),
-         styles.getPropertyValue("margin-right"),
-         styles.getPropertyValue("margin-bottom"),
-         styles.getPropertyValue("margin-left"),
-      ],
-   };
-
-   puppet = {
-      deltaX,
-      deltaY,
-      el: cloneEl,
-      clone,
-      source,
-      onDragEnd,
-   };
-
-   if (clone.widget && clone.store && !clone.cloneContent) {
-      let content = (
-         <cx>
-            <ContextWrap value={{ disabled: true }}>{clone.widget}</ContextWrap>
-         </cx>
-      );
-      puppet.stop = startAppLoop(cloneEl, clone.store, content, {
-         removeParentDOMElement: true,
-      });
-   } else {
-      puppet.stop = () => {
-         document.body.removeChild(cloneEl);
-      };
-   }
-
-   let event = getDragEvent(e, "dragstart");
-
-   dragStartedZones = new WeakMap();
-
-   dropZones.execute((zone) => {
-      if (zone.onDropTest)
-         try {
-            if (!zone.onDropTest(event)) return;
-         }
-         catch (err) {
-            Console.warn("Drop zone onDropTest failed. Error: ", err, zone);
-            return;
-         }
-
-      if (zone.onDragStart) zone.onDragStart(event);
-
-      dragStartedZones.set(zone, true);
-   });
-
-   notifyDragMove(e);
-
-   captureMouseOrTouch(e, notifyDragMove, notifyDragDrop);
-}
-
-function notifyDragMove(e, captureData) {
-   let event = getDragEvent(e, "dragmove");
-   let over = null,
-      overTest = null,
-      best = null;
-
-   let near = [],
-      away = [];
-
-   dropZones.execute((zone) => {
-      let test;
-      try {
-         test = zone.onDropTest && zone.onDropTest(event);
-         if (!test) return;
-      }
-      catch (err) {
-         //the problem is already reported, so here we just swallow the bug to avoid spammming the console too much
-         return;
-      }
-
-      if (zone.onDragMeasure) {
-         let result = zone.onDragMeasure(event, { test }) || {};
-
-         if (result.near) near.push(zone);
-         else away.push(zone);
-
-         if (isNumber(result.over) && (best == null || result.over < best)) {
-            over = zone;
-            overTest = test;
-            best = result.over;
-         }
-      }
-   });
-
-   let newNear = new WeakMap();
-
-   if (nearZones != null) {
-      away.forEach((z) => {
-         if (z.onDragAway && nearZones.has(z)) z.onDragAway(z);
-      });
-   }
-
-   near.forEach((z) => {
-      if (z.onDragNear && z != over && (nearZones == null || !nearZones.has(z))) {
-         z.onDragNear(z);
-         newNear.set(z, true);
-      }
-   });
-
-   nearZones = newNear;
-
-   if (over != activeZone) {
-      vscrollParent = null;
-      hscrollParent = null;
-   }
-
-   if (over != activeZone && activeZone && activeZone.onDragLeave) activeZone.onDragLeave(event);
-
-   if (over != activeZone && over) {
-      if (over.onDragEnter) over.onDragEnter(event);
-
-      vscrollParent = over.onGetVScrollParent && over.onGetVScrollParent({ test: overTest });
-      hscrollParent = over.onGetHScrollParent && over.onGetHScrollParent({ test: overTest });
-   }
-
-   activeZone = over;
-
-   if (over && over.onDragOver) {
-      over.onDragOver(event, { test: overTest });
-   }
-
-   //do it last to avoid forced redraw if nothing changed
-   let cursor = getCursorPos(e);
-   puppet.el.style.left = `${cursor.clientX - puppet.deltaX}px`;
-   puppet.el.style.top = `${cursor.clientY - puppet.deltaY}px`;
-
-   if (vscrollParent || hscrollParent) {
-      let scrollX = 0,
-         scrollY = 0;
-      let vscrollBounds = vscrollParent && getScrollerBoundingClientRect(vscrollParent, true);
-      let hscrollBounds =
-         hscrollParent == vscrollParent
-            ? vscrollBounds
-            : hscrollParent && getScrollerBoundingClientRect(hscrollParent, true);
-
-      if (vscrollBounds) {
-         if (cursor.clientY < vscrollBounds.top + 20) scrollY = -1;
-         else if (cursor.clientY >= vscrollBounds.bottom - 20) scrollY = 1;
-      }
-
-      if (hscrollBounds) {
-         if (cursor.clientX < hscrollBounds.left + 20) scrollX = -1;
-         else if (cursor.clientX >= hscrollBounds.right - 20) scrollX = 1;
-      }
-
-      if (scrollY || scrollX) {
-         if (!scrollTimer) {
-            let cb = () => {
-               if (scrollY) {
-                  let current = vscrollParent.scrollTop;
-                  let next = Math.min(
-                     vscrollParent.scrollHeight,
-                     Math.max(0, current + (scrollY * 5 * Math.min(200, Math.max(50, event.source.height))) / 60)
-                  ); //60 FPS
-                  vscrollParent.scrollTop = next;
-               }
-               if (scrollX) {
-                  let current = hscrollParent.scrollLeft;
-                  let next = Math.min(
-                     hscrollParent.scrollWidth,
-                     Math.max(0, current + (scrollX * 5 * Math.min(200, Math.max(50, event.source.width))) / 60)
-                  ); //60 FPS
-                  hscrollParent.scrollLeft = next;
-               }
-               scrollTimer = requestAnimationFrame(cb);
-            };
-            scrollTimer = requestAnimationFrame(cb);
-         }
-      } else {
-         clearScrollTimer();
-      }
-   } else clearScrollTimer();
-}
-
-function clearScrollTimer() {
-   if (scrollTimer) {
-      cancelAnimationFrame(scrollTimer);
-      scrollTimer = null;
-   }
-}
-
-function notifyDragDrop(e) {
-   clearScrollTimer();
-
-   let event = getDragEvent(e, "dragdrop");
-
-   if (puppet.stop) puppet.stop();
-
-   if (activeZone && activeZone.onDrop) event.result = activeZone.onDrop(event);
-
-   dropZones.execute((zone) => {
-      if (nearZones != null && zone.onDragAway && nearZones.has(zone)) zone.onDragAway(e);
-
-      if (!dragStartedZones.has(zone)) return;
-
-      if (zone.onDragEnd) zone.onDragEnd(event);
-   });
-
-   if (puppet.onDragEnd) puppet.onDragEnd(event);
-
-   nearZones = null;
-   activeZone = null;
-   puppet = null;
-   dragStartedZones = null;
-}
-
-function getDragEvent(e, type) {
-   return {
-      type: type,
-      event: e,
-      cursor: getCursorPos(e),
-      source: puppet.source,
-   };
-}
-
-let dragCandidate = {};
-
-export function ddMouseDown(e) {
-   //do not allow that the same event is processed by multiple drag sources
-   //the first (top-level) source should be a drag-candidate
-   if (e.timeStamp <= dragCandidate.timeStamp) return;
-
-   dragCandidate = {
-      el: e.currentTarget,
-      start: { ...getCursorPos(e) },
-      timeStamp: e.timeStamp
-   };
-}
-
-export function ddMouseUp() {
-   dragCandidate = {};
-}
-
-export function ddDetect(e) {
-   let cursor = getCursorPos(e);
-   if (
-      e.currentTarget == dragCandidate.el &&
-      Math.abs(cursor.clientX - dragCandidate.start.clientX) + Math.abs(cursor.clientY - dragCandidate.start.clientY) >=
-      2
-   ) {
-      dragCandidate = {};
-      return true;
-   }
-}
-
-let lastDragHandle;
-
-export function ddHandle(e) {
-   lastDragHandle = e.currentTarget;
-}
-
-export function isDragHandleEvent(e) {
-   return lastDragHandle && (e.target == lastDragHandle || lastDragHandle.contains(e.target));
-}
-
-export const DragDropContext = VDOM.createContext
-   ? VDOM.createContext({ disabled: false })
-   : ({ children }) => children;
-
-class ContextWrap extends Container {
-   render(context, instance, key) {
-      return (
-         <DragDropContext.Provider value={this.value} key={key}>
-            {this.renderChildren(context, instance)}
-         </DragDropContext.Provider>
-      );
-   }
-}
diff --git a/packages/cx/src/widgets/drag-drop/ops.tsx b/packages/cx/src/widgets/drag-drop/ops.tsx
new file mode 100644
index 000000000..9c8c1a4fe
--- /dev/null
+++ b/packages/cx/src/widgets/drag-drop/ops.tsx
@@ -0,0 +1,422 @@
+/** @jsxImportSource react */
+import { getCursorPos, captureMouseOrTouch, CursorPosition } from "../overlay/captureMouse";
+import { startAppLoop } from "../../ui/app/startAppLoop";
+import { View } from "../../data/View";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+
+export interface DragEvent {
+   type: "dragstart" | "dragmove" | "dragdrop";
+   event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent;
+   cursor: CursorPosition;
+   source: {
+      width: number;
+      height: number;
+      margin: string[];
+      data?: any;
+      store: View;
+      [other: string]: any;
+   };
+   dataTransfer?: DataTransfer;
+   result?: any;
+}
+
+export interface DragDropOptions {
+   sourceEl?: Element | null;
+   clone?: any;
+   source?: any;
+}
+
+export interface DragDropOperationContext {
+   test: any;
+}
+
+export type DragEventHandler = (e: DragEvent) => void;
+
+export interface IDropZone {
+   onDropTest?: (e: DragEvent) => boolean;
+   onDragStart?: DragEventHandler;
+   onDragAway?: DragEventHandler;
+   onDragNear?: DragEventHandler;
+   onDragEnd?: DragEventHandler;
+   onDragMeasure?: (
+      e: DragEvent,
+      operation: DragDropOperationContext,
+   ) => { over: number | false; near: number | boolean } | false | undefined;
+   onDragLeave?: DragEventHandler;
+   onDragOver?: (e: DragEvent, operation: DragDropOperationContext) => void;
+   onDragEnter?: DragEventHandler;
+   onDrop?: DragEventHandler;
+   onGetVScrollParent?: (operation: DragDropOperationContext) => Element | null;
+   onGetHScrollParent?: (operation: DragDropOperationContext) => Element | null;
+}
+
+export type UnregisterFunction = () => void;
+
+import { getScrollerBoundingClientRect } from "../../util/getScrollerBoundingClientRect";
+import { isNumber } from "../../util/isNumber";
+import { isObject } from "../../util/isObject";
+import { isString } from "../../util/isString";
+import { ZIndexManager } from "../../ui/ZIndexManager";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { VDOM } from "../../ui/VDOM";
+import { Container } from "../../ui/Container";
+import { Console } from "../../util";
+import { WidgetConfig } from "../../ui";
+
+interface Puppet {
+   deltaX: number;
+   deltaY: number;
+   el: HTMLDivElement;
+   clone: any;
+   source: any;
+   onDragEnd?: (e?: DragEvent) => void;
+   stop?: () => void;
+}
+
+let dropZones: IDropZone[] = [];
+let dragStartedZones: WeakMap<IDropZone, boolean> | null = null;
+let activeZone: IDropZone | null = null;
+let nearZones: WeakMap<IDropZone, boolean> | null = null;
+let puppet: Puppet | null = null;
+let scrollTimer: number | null = null;
+let vscrollParent: Element | null = null;
+let hscrollParent: Element | null = null;
+
+export function registerDropZone(dropZone: IDropZone): UnregisterFunction {
+   dropZones.push(dropZone);
+   return () => {
+      let index = dropZones.indexOf(dropZone);
+      if (index !== -1) dropZones.splice(index, 1);
+   };
+}
+
+export function initiateDragDrop(
+   e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,
+   options: DragDropOptions = {},
+   onDragEnd?: (e?: DragEvent) => void,
+): void {
+   if (puppet) {
+      //last operation didn't finish properly
+      notifyDragDrop(e);
+   }
+
+   let sourceEl = options.sourceEl || (e.currentTarget as Element);
+   let sourceBounds = getTopLevelBoundingClientRect(sourceEl);
+   let cursor = getCursorPos(e);
+
+   let clone = {
+      ...options.clone,
+   };
+
+   let cloneEl = document.createElement("div");
+   cloneEl.classList.add("cxb-dragclone");
+   if (isString(clone["class"])) cloneEl.classList.add(clone["class"]);
+   if (isObject(clone.style)) Object.assign(cloneEl.style, clone.style);
+   cloneEl.style.left = `-1000px`;
+   cloneEl.style.top = `-1000px`;
+
+   if (clone.matchSize || clone.matchWidth) cloneEl.style.width = `${Math.ceil(sourceBounds.width)}px`;
+
+   if (clone.matchSize || clone.matchHeight) cloneEl.style.height = `${Math.ceil(sourceBounds.height)}px`;
+
+   cloneEl.style.zIndex = String(ZIndexManager.next() + 1000);
+
+   if (clone.cloneContent) {
+      cloneEl.appendChild(sourceEl.cloneNode(true));
+   }
+
+   document.body.appendChild(cloneEl);
+
+   let styles = getComputedStyle(sourceEl);
+
+   let deltaX = clone.matchCursorOffset ? cursor.clientX - sourceBounds.left : -3;
+   let deltaY = clone.matchCursorOffset ? cursor.clientY - sourceBounds.top : -3;
+
+   let source = {
+      ...options.source,
+      width: sourceBounds.width,
+      height: sourceBounds.height,
+      deltaX,
+      deltaY,
+      margin: [
+         styles.getPropertyValue("margin-top"),
+         styles.getPropertyValue("margin-right"),
+         styles.getPropertyValue("margin-bottom"),
+         styles.getPropertyValue("margin-left"),
+      ],
+   };
+
+   puppet = {
+      deltaX,
+      deltaY,
+      el: cloneEl,
+      clone,
+      source,
+      onDragEnd,
+   };
+
+   if (clone.widget && clone.store && !clone.cloneContent) {
+      let content = { $type: ContextWrap, value: { disabled: true }, children: clone.widget };
+      puppet.stop = startAppLoop(cloneEl, clone.store, content, {
+         removeParentDOMElement: true,
+      });
+   } else {
+      puppet.stop = () => {
+         document.body.removeChild(cloneEl);
+      };
+   }
+
+   let event = getDragEvent(e, "dragstart");
+
+   dragStartedZones = new WeakMap();
+
+   dropZones.forEach((zone) => {
+      if (zone.onDropTest)
+         try {
+            if (!zone.onDropTest(event)) return;
+         } catch (err) {
+            Console.warn("Drop zone onDropTest failed. Error: ", err, zone);
+            return;
+         }
+
+      if (zone.onDragStart) zone.onDragStart(event);
+
+      dragStartedZones!.set(zone, true);
+   });
+
+   notifyDragMove(e, null);
+
+   captureMouseOrTouch(e, notifyDragMove, notifyDragDrop);
+}
+
+function notifyDragMove(e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent, _captureData: any): void {
+   let event = getDragEvent(e, "dragmove");
+   let over: IDropZone | null = null,
+      overTest: any = null,
+      best: number | null = null;
+
+   let near: IDropZone[] = [],
+      away: IDropZone[] = [];
+
+   for (let zone of dropZones) {
+      let test;
+      try {
+         test = zone.onDropTest && zone.onDropTest(event);
+         if (!test) continue;
+      } catch (err) {
+         //the problem is already reported, so here we just swallow the bug to avoid spammming the console too much
+         continue;
+      }
+
+      if (zone.onDragMeasure) {
+         let result = zone.onDragMeasure(event, { test });
+         if (!result) continue;
+
+         if (result.near) near.push(zone);
+         else away.push(zone);
+
+         if (isNumber(result.over) && (best == null || result.over < best)) {
+            over = zone;
+            overTest = test;
+            best = result.over;
+         }
+      }
+   }
+
+   let newNear = new WeakMap<IDropZone, boolean>();
+
+   if (nearZones != null) {
+      away.forEach((z) => {
+         if (z.onDragAway && nearZones!.has(z)) z.onDragAway(event);
+      });
+   }
+
+   near.forEach((z) => {
+      if (z.onDragNear && z != over && (nearZones == null || !nearZones.has(z))) {
+         z.onDragNear(event);
+         newNear.set(z, true);
+      }
+   });
+
+   nearZones = newNear;
+
+   if (over != activeZone) {
+      vscrollParent = null;
+      hscrollParent = null;
+   }
+
+   if (over != activeZone && activeZone && activeZone.onDragLeave) activeZone.onDragLeave(event);
+
+   if (over != activeZone && over) {
+      if (over.onDragEnter) over.onDragEnter(event);
+
+      vscrollParent = (over.onGetVScrollParent && over.onGetVScrollParent({ test: overTest })) || null;
+      hscrollParent = (over.onGetHScrollParent && over.onGetHScrollParent({ test: overTest })) || null;
+   }
+
+   activeZone = over;
+
+   if (over && over.onDragOver) {
+      over.onDragOver(event, { test: overTest });
+   }
+
+   //do it last to avoid forced redraw if nothing changed
+   let cursor = getCursorPos(e);
+   puppet!.el.style.left = `${cursor.clientX - puppet!.deltaX}px`;
+   puppet!.el.style.top = `${cursor.clientY - puppet!.deltaY}px`;
+
+   if (vscrollParent || hscrollParent) {
+      let scrollX = 0,
+         scrollY = 0;
+      let vscrollBounds = vscrollParent && getScrollerBoundingClientRect(vscrollParent, true);
+      let hscrollBounds =
+         hscrollParent == vscrollParent
+            ? vscrollBounds
+            : hscrollParent && getScrollerBoundingClientRect(hscrollParent, true);
+
+      if (vscrollBounds) {
+         if (cursor.clientY < vscrollBounds.top + 20) scrollY = -1;
+         else if (cursor.clientY >= vscrollBounds.bottom - 20) scrollY = 1;
+      }
+
+      if (hscrollBounds) {
+         if (cursor.clientX < hscrollBounds.left + 20) scrollX = -1;
+         else if (cursor.clientX >= hscrollBounds.right - 20) scrollX = 1;
+      }
+
+      if (scrollY || scrollX) {
+         if (!scrollTimer) {
+            let cb = () => {
+               if (scrollY) {
+                  let current = vscrollParent!.scrollTop;
+                  let next = Math.min(
+                     vscrollParent!.scrollHeight,
+                     Math.max(0, current + (scrollY * 5 * Math.min(200, Math.max(50, event.source.height))) / 60),
+                  ); //60 FPS
+                  vscrollParent!.scrollTop = next;
+               }
+               if (scrollX) {
+                  let current = hscrollParent!.scrollLeft;
+                  let next = Math.min(
+                     hscrollParent!.scrollWidth,
+                     Math.max(0, current + (scrollX * 5 * Math.min(200, Math.max(50, event.source.width))) / 60),
+                  ); //60 FPS
+                  hscrollParent!.scrollLeft = next;
+               }
+               scrollTimer = requestAnimationFrame(cb);
+            };
+            scrollTimer = requestAnimationFrame(cb);
+         }
+      } else {
+         clearScrollTimer();
+      }
+   } else clearScrollTimer();
+}
+
+function clearScrollTimer() {
+   if (scrollTimer) {
+      cancelAnimationFrame(scrollTimer);
+      scrollTimer = null;
+   }
+}
+
+function notifyDragDrop(e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent): void {
+   clearScrollTimer();
+
+   let event = getDragEvent(e, "dragdrop");
+
+   if (puppet!.stop) puppet!.stop();
+
+   if (activeZone && activeZone.onDrop) event.result = activeZone.onDrop(event);
+
+   dropZones.forEach((zone) => {
+      if (nearZones != null && zone.onDragAway && nearZones.has(zone)) zone.onDragAway(event);
+
+      if (!dragStartedZones!.has(zone)) return;
+
+      if (zone.onDragEnd) zone.onDragEnd(event);
+   });
+
+   if (puppet!.onDragEnd) puppet!.onDragEnd(event);
+
+   nearZones = null;
+   activeZone = null;
+   puppet = null;
+   dragStartedZones = null;
+}
+
+function getDragEvent(
+   event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,
+   type: DragEvent["type"],
+): DragEvent {
+   return {
+      type: type,
+      event,
+      cursor: getCursorPos(event),
+      source: puppet!.source,
+   };
+}
+
+interface DragCandidate {
+   el?: EventTarget | null;
+   start?: CursorPosition;
+   timeStamp?: number;
+}
+
+let dragCandidate: DragCandidate = {};
+
+export function ddMouseDown(e: React.MouseEvent | React.TouchEvent): void {
+   //do not allow that the same event is processed by multiple drag sources
+   //the first (top-level) source should be a drag-candidate
+   if (dragCandidate.timeStamp != null && e.timeStamp <= dragCandidate.timeStamp) return;
+
+   dragCandidate = {
+      el: e.currentTarget,
+      start: { ...getCursorPos(e) },
+      timeStamp: e.timeStamp,
+   };
+}
+
+export function ddMouseUp(): void {
+   dragCandidate = {};
+}
+
+export function ddDetect(e: MouseEvent | TouchEvent | React.TouchEvent | React.MouseEvent): void | true {
+   let cursor = getCursorPos(e);
+   if (
+      dragCandidate.start &&
+      e.currentTarget == dragCandidate.el &&
+      Math.abs(cursor.clientX - dragCandidate.start.clientX) + Math.abs(cursor.clientY - dragCandidate.start.clientY) >=
+         2
+   ) {
+      dragCandidate = {};
+      return true;
+   }
+}
+
+let lastDragHandle: any;
+
+export function ddHandle(e: React.SyntheticEvent<any>): void {
+   lastDragHandle = e.currentTarget;
+}
+
+export function isDragHandleEvent(e: React.SyntheticEvent<any>): boolean {
+   return lastDragHandle && (e.target == lastDragHandle || lastDragHandle.contains(e.target));
+}
+
+export const DragDropContext = (
+   VDOM.createContext ? VDOM.createContext({ disabled: false }) : ({ children }: { children: any }) => children
+) as React.Context<{ disabled: boolean }>;
+
+class ContextWrap extends Container {
+   declare value: any;
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      return (
+         <DragDropContext.Provider value={this.value} key={key}>
+            {this.renderChildren(context, instance)}
+         </DragDropContext.Provider>
+      );
+   }
+}
diff --git a/packages/cx/src/widgets/drag-drop/variables.scss b/packages/cx/src/widgets/drag-drop/variables.scss
index 3036d3196..d6a6884c5 100644
--- a/packages/cx/src/widgets/drag-drop/variables.scss
+++ b/packages/cx/src/widgets/drag-drop/variables.scss
@@ -1,3 +1,6 @@
+@use "sass:map";
+
+
 $cx-default-dragclone-background-color: rgba(white, 0.9) !default;
 $cx-default-dragclone-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
 
@@ -7,6 +10,6 @@ $cx-dragclone-style: (
    opacity: 0.9
 ) !default;
 
-$cx-dependencies: map-merge($cx-dependencies, (
+$cx-dependencies: map.merge($cx-dependencies, (
    'cx/widgets/DragSource': 'cx/widgets/DragClone'
 ))
\ No newline at end of file
diff --git a/packages/cx/src/widgets/enableAllInternalDependencies.d.ts b/packages/cx/src/widgets/enableAllInternalDependencies.d.ts
deleted file mode 100644
index 78359972b..000000000
--- a/packages/cx/src/widgets/enableAllInternalDependencies.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function enableAllInternalDependencies();
diff --git a/packages/cx/src/widgets/enableAllInternalDependencies.js b/packages/cx/src/widgets/enableAllInternalDependencies.js
deleted file mode 100644
index ac70c047d..000000000
--- a/packages/cx/src/widgets/enableAllInternalDependencies.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {enableTooltips} from './overlay/Tooltip';
-import {enableMsgBoxAlerts} from './overlay/MsgBox';
-import {enableCultureSensitiveFormatting} from '../ui/Format';
-import {enableFatArrowExpansion} from '../data/enableFatArrowExpansion';
-
-export function enableAllInternalDependencies() {
-   enableTooltips();
-   enableMsgBoxAlerts();
-   enableCultureSensitiveFormatting();
-   enableFatArrowExpansion();
-}
diff --git a/packages/cx/src/widgets/enableAllInternalDependencies.ts b/packages/cx/src/widgets/enableAllInternalDependencies.ts
new file mode 100644
index 000000000..1d9cf51da
--- /dev/null
+++ b/packages/cx/src/widgets/enableAllInternalDependencies.ts
@@ -0,0 +1,11 @@
+import {enableTooltips} from './overlay/Tooltip';
+import {enableMsgBoxAlerts} from './overlay/MsgBox';
+import {enableCultureSensitiveFormatting} from '../ui/Format';
+import {enableFatArrowExpansion} from '../data/enableFatArrowExpansion';
+
+export function enableAllInternalDependencies(): void {
+   enableTooltips();
+   enableMsgBoxAlerts();
+   enableCultureSensitiveFormatting();
+   enableFatArrowExpansion();
+}
diff --git a/packages/cx/src/widgets/form/Calendar.d.ts b/packages/cx/src/widgets/form/Calendar.d.ts
deleted file mode 100644
index 7dfe3cfbc..000000000
--- a/packages/cx/src/widgets/form/Calendar.d.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface DayInfo {
-   mod?: string;
-   className?: string;
-   style?: Cx.Record;
-   unselectable?: boolean;
-   disabled?: boolean;
-}
-
-interface DayData {
-   [day: string]: DayInfo;
-}
-
-interface CalendarProps extends FieldProps {
-   /** Selected date. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   value?: Cx.Prop<string | Date>;
-
-   /** View reference date. If no date is selected, this date is used to determine which month to show in the calendar. */
-   refDate?: Cx.Prop<string | Date>;
-
-   /** Minimum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   minValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   maxValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the calendar. Defaults to `calendar`. */
-   baseClass?: string;
-
-   /** Highlight today's date. Default is true. */
-   highlightToday?: boolean;
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string;
-
-   /** The function that will be used to convert Date objects before writing data to the store.
-    * Default implementation is Date.toISOString.
-    * See also Culture.setDefaultDateEncoding.
-    */
-   encoding?: (date: Date) => any;
-
-   /** Set to true to show the button for quickly selecting today's date.  */
-   showTodayButton?: boolean;
-
-   /** Localizable text for the todayButton. Defaults to `"Today"`. */
-   todayButtonText?: string;
-
-   /**  Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
-   disabledDaysOfWeek?: number[];
-
-   /** Set to true to show weeks starting from Monday. */
-   startWithMonday?: boolean;
-
-   /** Map of days to additional day information such as style, className, mod, unselectable and disabled.
-    * Keys for the map should be created with date.toDateString().
-    * Example. {
-    *    [new Date().toDateString()]: {
-    *       style: "color: red",
-    *       className: 'test-class',
-    *       mod: 'holiday',
-    *       unselectable: false,
-    *       disabled: false
-    *    }
-    * }
-    */
-   dayData?: Cx.Prop<DayData>;
-}
-
-export class Calendar extends Cx.Widget<CalendarProps> {}
diff --git a/packages/cx/src/widgets/form/Calendar.js b/packages/cx/src/widgets/form/Calendar.js
deleted file mode 100644
index db7f506d4..000000000
--- a/packages/cx/src/widgets/form/Calendar.js
+++ /dev/null
@@ -1,618 +0,0 @@
-import { StringTemplate } from "../../data/StringTemplate";
-import { Culture } from "../../ui/Culture";
-import { FocusManager, offFocusOut, oneFocusOut } from "../../ui/FocusManager";
-import "../../ui/Format";
-import { Localization } from "../../ui/Localization";
-import { VDOM, Widget } from "../../ui/Widget";
-import { parseDateInvariant } from "../../util";
-import { KeyCode } from "../../util/KeyCode";
-import { dateDiff } from "../../util/date/dateDiff";
-import { lowerBoundCheck } from "../../util/date/lowerBoundCheck";
-import { monthStart } from "../../util/date/monthStart";
-import { sameDate } from "../../util/date/sameDate";
-import { upperBoundCheck } from "../../util/date/upperBoundCheck";
-import { zeroTime } from "../../util/date/zeroTime";
-import DropdownIcon from "../icons/drop-down";
-import ForwardIcon from "../icons/forward";
-import {
-   tooltipMouseLeave,
-   tooltipMouseMove,
-   tooltipParentDidMount,
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-} from "../overlay/tooltip-ops";
-import { Field, getFieldTooltip } from "./Field";
-
-export class Calendar extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: undefined,
-            refDate: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            minValue: undefined,
-            minExclusive: undefined,
-            maxValue: undefined,
-            maxExclusive: undefined,
-            focusable: undefined,
-            dayData: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   init() {
-      if (this.unfocusable) this.focusable = false;
-
-      super.init();
-   }
-
-   prepareData(context, { data }) {
-      data.stateMods = {
-         disabled: data.disabled,
-      };
-
-      if (data.value) {
-         let d = parseDateInvariant(data.value);
-         if (!isNaN(d.getTime())) {
-            data.date = zeroTime(d);
-         }
-      }
-
-      if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
-
-      if (data.maxValue) data.maxValue = zeroTime(parseDateInvariant(data.maxValue));
-
-      if (data.minValue) data.minValue = zeroTime(parseDateInvariant(data.minValue));
-
-      super.prepareData(...arguments);
-   }
-
-   validate(context, instance) {
-      super.validate(context, instance);
-      let { data, widget } = instance;
-      if (!data.error && data.date) {
-         let d;
-         if (data.maxValue) {
-            d = dateDiff(data.date, data.maxValue);
-            if (d > 0) data.error = StringTemplate.format(this.maxValueErrorText, data.maxValue);
-            else if (d == 0 && data.maxExclusive)
-               data.error = StringTemplate.format(this.maxExclusiveErrorText, data.maxValue);
-         }
-
-         if (data.minValue) {
-            d = dateDiff(data.date, data.minValue);
-            if (d < 0) data.error = StringTemplate.format(this.minValueErrorText, data.minValue);
-            else if (d == 0 && data.minExclusive)
-               data.error = StringTemplate.format(this.minExclusiveErrorText, data.minValue);
-         }
-
-         if (widget.disabledDaysOfWeek) {
-            if (widget.disabledDaysOfWeek.includes(data.date.getDay())) data.error = this.disabledDaysOfWeekErrorText;
-         }
-
-         if (data.dayData) {
-            let date = parseDateInvariant(data.value);
-            let info = data.dayData[date.toDateString()];
-            if (info && info.disabled) data.error = this.disabledDaysOfWeekErrorText;
-         }
-      }
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <CalendarCmp key={key} instance={instance} handleSelect={(e, date) => this.handleSelect(e, instance, date)} />
-      );
-   }
-
-   handleSelect(e, instance, date) {
-      let { store, data, widget } = instance;
-
-      e.stopPropagation();
-
-      if (data.disabled) return;
-
-      if (!validationCheck(date, data)) return;
-
-      if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
-
-      if (widget.partial) {
-         let mixed = parseDateInvariant(data.value);
-         if (data.value && !isNaN(mixed)) {
-            mixed.setFullYear(date.getFullYear());
-            mixed.setMonth(date.getMonth());
-            mixed.setDate(date.getDate());
-            date = mixed;
-         }
-      }
-
-      let encode = widget.encoding || Culture.getDefaultDateEncoding();
-      instance.set("value", encode(date));
-
-      if (this.onSelect) instance.invoke("onSelect", e, instance, date);
-   }
-}
-
-Calendar.prototype.baseClass = "calendar";
-Calendar.prototype.highlightToday = true;
-Calendar.prototype.maxValueErrorText = "Select a date not after {0:d}.";
-Calendar.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
-Calendar.prototype.minValueErrorText = "Select a date not before {0:d}.";
-Calendar.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
-Calendar.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
-Calendar.prototype.suppressErrorsUntilVisited = false;
-Calendar.prototype.showTodayButton = false;
-Calendar.prototype.todayButtonText = "Today";
-Calendar.prototype.startWithMonday = false;
-Calendar.prototype.focusable = true;
-
-Localization.registerPrototype("cx/widgets/Calendar", Calendar);
-
-const validationCheck = (date, data, disabledDaysOfWeek) => {
-   if (data.maxValue && !upperBoundCheck(date, data.maxValue, data.maxExclusive)) return false;
-
-   if (data.minValue && !lowerBoundCheck(date, data.minValue, data.minExclusive)) return false;
-
-   if (disabledDaysOfWeek && disabledDaysOfWeek.includes(date.getDay())) return false;
-
-   if (data.dayData) {
-      let day = data.dayData[date.toDateString()];
-      if (day && (day.disabled || day.unselectable)) return false;
-   }
-
-   return true;
-};
-
-export class CalendarCmp extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      let { data } = props.instance;
-
-      let refDate = data.refDate ? data.refDate : data.date || zeroTime(new Date());
-
-      this.state = Object.assign(
-         {
-            hover: false,
-            focus: false,
-            cursor: zeroTime(data.date || refDate),
-            activeView: "calendar",
-         },
-         this.getPage(refDate),
-      );
-
-      this.handleMouseMove = this.handleMouseMove.bind(this);
-      this.handleMouseDown = this.handleMouseDown.bind(this);
-   }
-
-   getPage(refDate) {
-      refDate = monthStart(refDate); //make a copy
-
-      let startWithMonday = this.props.instance.widget.startWithMonday;
-
-      let startDay = startWithMonday ? 1 : 0;
-      let startDate = new Date(refDate);
-      while (startDate.getDay() != startDay) startDate.setDate(startDate.getDate() - 1);
-
-      let endDate = new Date(refDate);
-      endDate.setMonth(refDate.getMonth() + 1);
-      endDate.setDate(endDate.getDate() - 1);
-
-      let endDay = startWithMonday ? 0 : 6;
-      while (endDate.getDay() != endDay) endDate.setDate(endDate.getDate() + 1);
-
-      return {
-         refDate,
-         startDate,
-         endDate,
-      };
-   }
-
-   moveCursor(e, date, options = {}) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      date = zeroTime(date);
-      if (date.getTime() == this.state.cursor.getTime()) return;
-
-      let refDate = this.state.refDate;
-
-      if (options.movePage || date < this.state.startDate || date > this.state.endDate) refDate = date;
-
-      this.setState({
-         ...this.getPage(refDate),
-         cursor: date,
-      });
-   }
-
-   move(e, period, delta) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      let refDate = this.state.refDate;
-
-      switch (period) {
-         case "y":
-            refDate.setFullYear(refDate.getFullYear() + delta);
-            break;
-
-         case "m":
-            refDate.setMonth(refDate.getMonth() + delta);
-            break;
-      }
-
-      let page = this.getPage(refDate);
-      if (this.state.cursor < page.startDate) page.cursor = page.startDate;
-      else if (this.state.cursor > page.endDate) page.cursor = page.endDate;
-
-      this.setState(page);
-   }
-
-   handleKeyPress(e) {
-      let cursor = new Date(this.state.cursor);
-
-      switch (e.keyCode) {
-         case KeyCode.enter:
-            this.props.handleSelect(e, this.state.cursor);
-            break;
-
-         case KeyCode.left:
-            cursor.setDate(cursor.getDate() - 1);
-            this.moveCursor(e, cursor);
-            break;
-
-         case KeyCode.right:
-            cursor.setDate(cursor.getDate() + 1);
-            this.moveCursor(e, cursor);
-            break;
-
-         case KeyCode.up:
-            cursor.setDate(cursor.getDate() - 7);
-            this.moveCursor(e, cursor);
-            break;
-
-         case KeyCode.down:
-            cursor.setDate(cursor.getDate() + 7);
-            this.moveCursor(e, cursor);
-            break;
-
-         case KeyCode.pageUp:
-            cursor.setMonth(cursor.getMonth() - 1);
-            this.moveCursor(e, cursor, { movePage: true });
-            break;
-
-         case KeyCode.pageDown:
-            cursor.setMonth(cursor.getMonth() + 1);
-            this.moveCursor(e, cursor, { movePage: true });
-            break;
-
-         case KeyCode.home:
-            cursor.setDate(1);
-            this.moveCursor(e, cursor, { movePage: true });
-            break;
-
-         case KeyCode.end:
-            cursor.setMonth(cursor.getMonth() + 1);
-            cursor.setDate(0);
-            this.moveCursor(e, cursor, { movePage: true });
-            break;
-
-         default:
-            let { instance } = this.props;
-            let { widget } = instance;
-            if (widget.onKeyDown) instance.invoke("onKeyDown", e, instance);
-            break;
-      }
-   }
-
-   handleWheel(e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      let cursor = new Date(this.state.cursor);
-
-      if (e.deltaY < 0) {
-         cursor.setMonth(cursor.getMonth() - 1);
-         this.moveCursor(e, cursor, { movePage: true });
-      } else if (e.deltaY > 0) {
-         cursor.setMonth(cursor.getMonth() + 1);
-         this.moveCursor(e, cursor, { movePage: true });
-      }
-   }
-
-   handleBlur(e) {
-      FocusManager.nudge();
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.onBlur) instance.invoke("onBlur", e, instance);
-      this.setState({
-         focus: false,
-      });
-   }
-
-   handleFocus(e) {
-      oneFocusOut(this, this.el, this.handleFocusOut.bind(this));
-      this.setState({
-         focus: true,
-      });
-   }
-
-   handleFocusOut() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.onFocusOut) instance.invoke("onFocusOut", null, instance);
-   }
-
-   handleMouseLeave(e) {
-      tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance));
-      this.setState({
-         hover: false,
-      });
-   }
-
-   handleMouseEnter(e) {
-      this.setState({
-         hover: true,
-      });
-   }
-
-   handleMouseMove(e) {
-      this.moveCursor(e, readDate(e.target.dataset));
-   }
-
-   handleMouseDown(e) {
-      this.props.handleSelect(e, readDate(e.target.dataset));
-   }
-
-   componentDidMount() {
-      //calendar doesn't bring up keyboard so it's ok to focus it even on mobile
-      if (this.props.instance.widget.autoFocus) this.el.focus();
-
-      tooltipParentDidMount(this.el, ...getFieldTooltip(this.props.instance));
-      this.el.addEventListener("wheel", (e) => this.handleWheel(e));
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      let { data } = props.instance;
-      if (data.date)
-         this.setState({
-            ...this.getPage(data.date),
-            value: data.date,
-         });
-
-      tooltipParentWillReceiveProps(this.el, ...getFieldTooltip(props.instance));
-   }
-
-   componentWillUnmount() {
-      offFocusOut(this);
-      tooltipParentWillUnmount(this.props.instance);
-   }
-
-   showYearDropdown() {
-      this.setState({
-         activeView: "year-picker",
-         yearPickerHeight: this.el.firstChild.offsetHeight,
-      });
-   }
-
-   handleYearSelect(e, year) {
-      e.preventDefault();
-      e.stopPropagation();
-      let refDate = new Date(this.state.refDate);
-      refDate.setFullYear(year);
-      this.setState({
-         ...this.getPage(refDate),
-         refDate,
-         activeView: "calendar",
-      });
-   }
-
-   renderYearPicker() {
-      let { data, widget } = this.props.instance;
-      let minYear = data.minValue?.getFullYear();
-      let maxYear = data.maxValue?.getFullYear();
-      let { CSS } = this.props.instance.widget;
-
-      let years = [];
-      let currentYear = new Date().getFullYear();
-      let midYear = currentYear - (currentYear % 5);
-      let refYear = new Date(this.state.refDate).getFullYear();
-      for (let i = midYear - 100; i <= midYear + 100; i++) {
-         years.push(i);
-      }
-
-      let rows = [];
-      for (let i = 0; i < years.length; i += 5) {
-         rows.push(years.slice(i, i + 5));
-      }
-      return (
-         <div
-            className={CSS.element(widget.baseClass, "year-picker")}
-            style={{
-               height: this.state.yearPickerHeight,
-            }}
-            ref={(el) => {
-               if (el) {
-                  el.addEventListener("wheel", (e) => {
-                     e.stopPropagation();
-                  });
-
-                  let activeYear = el.querySelector("." + CSS.state("selected"));
-                  if (activeYear) activeYear.scrollIntoView({ block: "center", behavior: "instant" });
-               }
-            }}
-         >
-            <table>
-               <tbody>
-                  {rows.map((row, rowIndex) => (
-                     <tr key={rowIndex}>
-                        {row.map((year) => (
-                           <td
-                              key={year}
-                              className={CSS.element(this.props.instance.widget.baseClass, "year-option", {
-                                 unselectable: (minYear && year < minYear) || (maxYear && year > maxYear),
-                                 selected: year === refYear,
-                                 active: year === currentYear,
-                              })}
-                              onClick={(e) => this.handleYearSelect(e, year)}
-                           >
-                              {year}
-                           </td>
-                        ))}
-                     </tr>
-                  ))}
-               </tbody>
-            </table>
-         </div>
-      );
-   }
-
-   render() {
-      let { data, widget } = this.props.instance;
-      let { CSS, baseClass, disabledDaysOfWeek, startWithMonday } = widget;
-
-      let { refDate, startDate, endDate } = this.getPage(this.state.refDate);
-
-      let month = refDate.getMonth();
-      let year = refDate.getFullYear();
-      let weeks = [];
-      let date = startDate;
-
-      let empty = {};
-
-      let today = zeroTime(new Date());
-      while (date >= startDate && date <= endDate) {
-         let days = [];
-         for (let i = 0; i < 7; i++) {
-            let dayInfo = (data.dayData && data.dayData[date.toDateString()]) || empty;
-            let unselectable = !validationCheck(date, data, disabledDaysOfWeek);
-            let classNames = CSS.expand(
-               CSS.element(baseClass, "day", {
-                  outside: month != date.getMonth(),
-                  unselectable: unselectable,
-                  selected: data.date && sameDate(data.date, date),
-                  cursor:
-                     (this.state.hover || this.state.focus) && this.state.cursor && sameDate(this.state.cursor, date),
-                  today: widget.highlightToday && sameDate(date, today),
-               }),
-               dayInfo.className,
-               CSS.mod(dayInfo.mod),
-            );
-            let dateInst = new Date(date);
-            days.push(
-               <td
-                  key={i}
-                  className={classNames}
-                  style={CSS.parseStyle(dayInfo.style)}
-                  data-year={dateInst.getFullYear()}
-                  data-month={dateInst.getMonth() + 1}
-                  data-date={dateInst.getDate()}
-                  onMouseMove={unselectable ? null : this.handleMouseMove}
-                  onMouseDown={unselectable ? null : this.handleMouseDown}
-               >
-                  {date.getDate()}
-               </td>,
-            );
-            date.setDate(date.getDate() + 1);
-         }
-         weeks.push(
-            <tr key={weeks.length} className={CSS.element(baseClass, "week")}>
-               <td />
-               {days}
-               <td />
-            </tr>,
-         );
-      }
-
-      let culture = Culture.getDateTimeCulture();
-      let monthNames = culture.getMonthNames("long");
-      let dayNames = culture.getWeekdayNames("short").map((x) => x.substr(0, 2));
-      if (startWithMonday) dayNames = [...dayNames.slice(1), dayNames[0]];
-
-      return (
-         <div
-            className={data.classNames}
-            tabIndex={data.disabled || !data.focusable ? null : data.tabIndex || 0}
-            onKeyDown={(e) => this.handleKeyPress(e)}
-            onMouseDown={(e) => {
-               // prevent losing focus from the input field
-               if (!data.focusable) {
-                  e.preventDefault();
-               }
-               e.stopPropagation();
-            }}
-            ref={(el) => {
-               this.el = el;
-            }}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
-            onMouseLeave={(e) => this.handleMouseLeave(e)}
-            onMouseEnter={(e) => this.handleMouseEnter(e)}
-            // onWheel={(e) => this.handleWheel(e)}
-            onFocus={(e) => this.handleFocus(e)}
-            onBlur={(e) => this.handleBlur(e)}
-         >
-            {this.state.activeView == "calendar" && (
-               <table>
-                  <thead>
-                     <tr key="h" className={CSS.element(baseClass, "header")}>
-                        <td />
-                        <td onClick={(e) => this.move(e, "y", -1)}>
-                           <ForwardIcon className={CSS.element(baseClass, "icon-prev-year")} />
-                        </td>
-                        <td onClick={(e) => this.move(e, "m", -1)}>
-                           <DropdownIcon className={CSS.element(baseClass, "icon-prev-month")} />
-                        </td>
-                        <th className={CSS.element(baseClass, "display")} colSpan="3">
-                           {monthNames[month]}
-                           <br />
-                           <span
-                              onClick={() => this.showYearDropdown()}
-                              className={CSS.element(baseClass, "year-name")}
-                           >
-                              {year}
-                           </span>
-                        </th>
-                        <td onClick={(e) => this.move(e, "m", +1)}>
-                           <DropdownIcon className={CSS.element(baseClass, "icon-next-month")} />
-                        </td>
-                        <td onClick={(e) => this.move(e, "y", +1)}>
-                           <ForwardIcon className={CSS.element(baseClass, "icon-next-year")} />
-                        </td>
-                        <td />
-                     </tr>
-                     <tr key="d" className={CSS.element(baseClass, "day-names")}>
-                        <td />
-                        {dayNames.map((name, i) => (
-                           <th key={i}>{name}</th>
-                        ))}
-                        <td />
-                     </tr>
-                  </thead>
-                  <tbody>{weeks}</tbody>
-               </table>
-            )}
-            {this.state.activeView == "calendar" && widget.showTodayButton && (
-               <div className={CSS.element(baseClass, "toolbar")}>
-                  <button
-                     className={CSS.expand(CSS.element(baseClass, "today-button"), CSS.block("button", "hollow"))}
-                     data-year={today.getFullYear()}
-                     data-month={today.getMonth() + 1}
-                     data-date={today.getDate()}
-                     onClick={(e) => {
-                        this.handleMouseDown(e);
-                     }}
-                  >
-                     {widget.todayButtonText}
-                  </button>
-               </div>
-            )}
-
-            {this.state.activeView == "year-picker" && this.renderYearPicker()}
-         </div>
-      );
-   }
-}
-
-const readDate = (ds) => new Date(Number(ds.year), Number(ds.month) - 1, Number(ds.date));
-
-Widget.alias("calendar", Calendar);
diff --git a/packages/cx/src/widgets/form/Calendar.scss b/packages/cx/src/widgets/form/Calendar.scss
index a7cb50bed..b1a07623c 100644
--- a/packages/cx/src/widgets/form/Calendar.scss
+++ b/packages/cx/src/widgets/form/Calendar.scss
@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:color";
+
 @mixin cx-calendar(
    $name: "calendar",
    $state-style-map: $cx-calendar-state-style-map,
@@ -5,10 +8,10 @@
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}calendar {
       display: inline-block;
@@ -116,7 +119,7 @@
       &.#{$state}disabled {
          background-color: transparent;
          border-color: transparent;
-         color: darken(#fff, 18);
+         color: color.adjust(#fff, $lightness: -18%);
          pointer-events: none;
          opacity: 0.9;
       }
diff --git a/packages/cx/src/widgets/form/Calendar.tsx b/packages/cx/src/widgets/form/Calendar.tsx
new file mode 100644
index 000000000..4b96a6500
--- /dev/null
+++ b/packages/cx/src/widgets/form/Calendar.tsx
@@ -0,0 +1,760 @@
+/** @jsxImportSource react */
+
+import { StringTemplate } from "../../data/StringTemplate";
+import { Culture } from "../../ui/Culture";
+import { FocusManager, offFocusOut, oneFocusOut } from "../../ui/FocusManager";
+import "../../ui/Format";
+import { Localization } from "../../ui/Localization";
+import { VDOM, Widget } from "../../ui/Widget";
+import { parseDateInvariant } from "../../util";
+import { KeyCode } from "../../util/KeyCode";
+import { dateDiff } from "../../util/date/dateDiff";
+import { lowerBoundCheck } from "../../util/date/lowerBoundCheck";
+import { monthStart } from "../../util/date/monthStart";
+import { sameDate } from "../../util/date/sameDate";
+import { upperBoundCheck } from "../../util/date/upperBoundCheck";
+import { zeroTime } from "../../util/date/zeroTime";
+import DropdownIcon from "../icons/drop-down";
+import ForwardIcon from "../icons/forward";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+} from "../overlay/tooltip-ops";
+import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
+import type { Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { BooleanProp, DataRecord, Prop } from "../../ui/Prop";
+
+interface DayInfo {
+   mod?: string;
+   className?: string;
+   style?: DataRecord | string;
+   unselectable?: boolean;
+   disabled?: boolean;
+}
+
+interface DayData {
+   [day: string]: DayInfo;
+}
+
+export interface CalendarConfig extends FieldConfig {
+   /** Selected date. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   value?: Prop<string | Date>;
+
+   /** View reference date. If no date is selected, this date is used to determine which month to show in the calendar. */
+   refDate?: Prop<string | Date>;
+
+   /** Minimum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   minValue?: Prop<string | Date>;
+
+   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
+   minExclusive?: BooleanProp;
+
+   /** Maximum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   maxValue?: Prop<string | Date>;
+
+   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
+   maxExclusive?: BooleanProp;
+
+   /** Base CSS class to be applied to the calendar. Defaults to `calendar`. */
+   baseClass?: string;
+
+   /** Highlight today's date. Default is true. */
+   highlightToday?: boolean;
+
+   /** Maximum value error text. */
+   maxValueErrorText?: string;
+
+   /** Maximum exclusive value error text. */
+   maxExclusiveErrorText?: string;
+
+   /** Minimum value error text. */
+   minValueErrorText?: string;
+
+   /** Minimum exclusive value error text. */
+   minExclusiveErrorText?: string;
+
+   /** The function that will be used to convert Date objects before writing data to the store.
+    * Default implementation is Date.toISOString.
+    * See also Culture.setDefaultDateEncoding.
+    */
+   encoding?: (date: Date) => any;
+
+   /** Set to true to show the button for quickly selecting today's date. */
+   showTodayButton?: boolean;
+
+   /** Localizable text for the todayButton. Defaults to `"Today"`. */
+   todayButtonText?: string;
+
+   /** Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
+   disabledDaysOfWeek?: number[];
+
+   /** Set to true to show weeks starting from Monday. */
+   startWithMonday?: boolean;
+
+   /** Map of days to additional day information such as style, className, mod, unselectable and disabled. */
+   dayData?: Prop<DayData>;
+}
+
+export class Calendar extends Field<CalendarConfig> {
+   declare public baseClass: string;
+   declare public unfocusable?: boolean;
+   declare public focusable?: boolean;
+   declare public highlightToday?: boolean;
+   declare public maxValueErrorText?: string;
+   declare public maxExclusiveErrorText?: string;
+   declare public minValueErrorText?: string;
+   declare public minExclusiveErrorText?: string;
+   declare public disabledDaysOfWeekErrorText?: string;
+   declare public showTodayButton?: boolean;
+   declare public todayButtonText?: string;
+   declare public startWithMonday?: boolean;
+   declare public onBeforeSelect?: string | ((e: React.MouseEvent, instance: Instance, date: Date) => boolean | void);
+   declare public onSelect?: string | ((e: React.MouseEvent, instance: Instance, date: Date) => void);
+   declare public onBlur?: string | ((e: React.FocusEvent, instance: Instance) => void);
+   declare public onFocusOut?: string | ((instance: Instance) => void);
+   declare public disabledDaysOfWeek?: number[];
+   declare public partial?: boolean;
+   declare public encoding?: (date: Date) => string;
+
+   constructor(config?: CalendarConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]) {
+      super.declareData(
+         {
+            value: undefined,
+            refDate: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            minValue: undefined,
+            minExclusive: undefined,
+            maxValue: undefined,
+            maxExclusive: undefined,
+            focusable: undefined,
+            dayData: undefined,
+         },
+         ...args,
+      );
+   }
+
+   init() {
+      if (this.unfocusable) this.focusable = false;
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<Calendar>, ...args: any[]) {
+      const { data } = instance;
+      data.stateMods = {
+         disabled: data.disabled,
+      };
+
+      if (data.value) {
+         let d = parseDateInvariant(data.value);
+         if (!isNaN(d.getTime())) {
+            data.date = zeroTime(d);
+         }
+      }
+
+      if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
+
+      if (data.maxValue) data.maxValue = zeroTime(parseDateInvariant(data.maxValue));
+
+      if (data.minValue) data.minValue = zeroTime(parseDateInvariant(data.minValue));
+
+      super.prepareData(context, instance, ...args);
+   }
+
+   validate(context: RenderingContext, instance: FieldInstance<Calendar>) {
+      super.validate(context, instance);
+      let { data, widget } = instance;
+      let calendarWidget = widget as Calendar;
+
+      if (!data.error && data.date) {
+         let d;
+         if (data.maxValue) {
+            d = dateDiff(data.date, data.maxValue);
+            if (d > 0) data.error = StringTemplate.format(this.maxValueErrorText!, data.maxValue);
+            else if (d == 0 && data.maxExclusive)
+               data.error = StringTemplate.format(this.maxExclusiveErrorText!, data.maxValue);
+         }
+
+         if (data.minValue) {
+            d = dateDiff(data.date, data.minValue);
+            if (d < 0) data.error = StringTemplate.format(this.minValueErrorText!, data.minValue);
+            else if (d == 0 && data.minExclusive)
+               data.error = StringTemplate.format(this.minExclusiveErrorText!, data.minValue);
+         }
+
+         if (calendarWidget.disabledDaysOfWeek) {
+            if (calendarWidget.disabledDaysOfWeek.includes(data.date.getDay()))
+               data.error = this.disabledDaysOfWeekErrorText;
+         }
+
+         if (data.dayData) {
+            let date = parseDateInvariant(data.value);
+            let info = data.dayData[date.toDateString()];
+            if (info && info.disabled) data.error = this.disabledDaysOfWeekErrorText;
+         }
+      }
+   }
+
+   renderInput(context: RenderingContext, instance: any, key: string): React.ReactElement {
+      return (
+         <CalendarCmp
+            key={key}
+            instance={instance}
+            handleSelect={(e: React.MouseEvent, date: Date) => this.handleSelect(e, instance, date)}
+         />
+      );
+   }
+
+   handleSelect(e: React.MouseEvent, instance: any, date: Date): void {
+      let { store, data, widget } = instance;
+      let calendarWidget = widget as Calendar;
+
+      e.stopPropagation();
+
+      if (data.disabled) return;
+
+      if (!validationCheck(date, data, calendarWidget.disabledDaysOfWeek)) return;
+
+      if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
+
+      if (calendarWidget.partial) {
+         let mixed = parseDateInvariant(data.value);
+         if (data.value && !isNaN(mixed.getTime())) {
+            mixed.setFullYear(date.getFullYear());
+            mixed.setMonth(date.getMonth());
+            mixed.setDate(date.getDate());
+            date = mixed;
+         }
+      }
+
+      let encode = calendarWidget.encoding || Culture.getDefaultDateEncoding()!;
+      instance.set("value", encode(date));
+
+      if (this.onSelect) instance.invoke("onSelect", e, instance, date);
+   }
+}
+
+Calendar.prototype.baseClass = "calendar";
+Calendar.prototype.highlightToday = true;
+Calendar.prototype.maxValueErrorText = "Select a date not after {0:d}.";
+Calendar.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
+Calendar.prototype.minValueErrorText = "Select a date not before {0:d}.";
+Calendar.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
+Calendar.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
+Calendar.prototype.suppressErrorsUntilVisited = false;
+Calendar.prototype.showTodayButton = false;
+Calendar.prototype.todayButtonText = "Today";
+Calendar.prototype.startWithMonday = false;
+Calendar.prototype.focusable = true;
+
+Localization.registerPrototype("cx/widgets/Calendar", Calendar);
+
+interface CalendarData {
+   maxValue?: Date;
+   maxExclusive?: boolean;
+   minValue?: Date;
+   minExclusive?: boolean;
+   dayData?: Record<string, DayInfo>;
+}
+
+const validationCheck = (date: Date, data: CalendarData, disabledDaysOfWeek?: number[]): boolean => {
+   if (data.maxValue && !upperBoundCheck(date, data.maxValue, data.maxExclusive)) return false;
+
+   if (data.minValue && !lowerBoundCheck(date, data.minValue, data.minExclusive)) return false;
+
+   if (disabledDaysOfWeek && disabledDaysOfWeek.includes(date.getDay())) return false;
+
+   if (data.dayData) {
+      let day = data.dayData[date.toDateString()];
+      if (day && (day.disabled || day.unselectable)) return false;
+   }
+
+   return true;
+};
+
+interface CalendarCmpProps {
+   instance: FieldInstance<Calendar>;
+   handleSelect: (e: React.MouseEvent, date: Date) => void;
+}
+
+interface CalendarState {
+   hover: boolean;
+   focus: boolean;
+   cursor: Date;
+   activeView: string;
+   refDate: Date;
+   startDate: Date;
+   endDate: Date;
+   yearPickerHeight?: number;
+}
+
+export class CalendarCmp extends VDOM.Component<CalendarCmpProps, CalendarState> {
+   el: HTMLElement | null = null;
+
+   constructor(props: CalendarCmpProps) {
+      super(props);
+      let { data } = props.instance;
+
+      let refDate = data.refDate ? data.refDate : data.date || zeroTime(new Date());
+
+      this.state = {
+         hover: false,
+         focus: false,
+         cursor: zeroTime(data.date || refDate),
+         activeView: "calendar",
+         ...this.getPage(refDate),
+      };
+
+      this.handleMouseMove = this.handleMouseMove.bind(this);
+      this.handleMouseDown = this.handleMouseDown.bind(this);
+   }
+
+   getPage(refDate: Date): { refDate: Date; startDate: Date; endDate: Date } {
+      refDate = monthStart(refDate); //make a copy
+
+      let calendarWidget = this.props.instance.widget as Calendar;
+      let startWithMonday = calendarWidget.startWithMonday;
+
+      let startDay = startWithMonday ? 1 : 0;
+      let startDate = new Date(refDate);
+      while (startDate.getDay() != startDay) startDate.setDate(startDate.getDate() - 1);
+
+      let endDate = new Date(refDate);
+      endDate.setMonth(refDate.getMonth() + 1);
+      endDate.setDate(endDate.getDate() - 1);
+
+      let endDay = startWithMonday ? 0 : 6;
+      while (endDate.getDay() != endDay) endDate.setDate(endDate.getDate() + 1);
+
+      return {
+         refDate,
+         startDate,
+         endDate,
+      };
+   }
+
+   moveCursor(e: React.SyntheticEvent | React.KeyboardEvent, date: Date, options: { movePage?: boolean } = {}): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      date = zeroTime(date);
+      if (date.getTime() == this.state.cursor.getTime()) return;
+
+      let refDate = this.state.refDate;
+
+      if (options.movePage || date < this.state.startDate || date > this.state.endDate) refDate = date;
+
+      this.setState({
+         ...this.getPage(refDate),
+         cursor: date,
+      });
+   }
+
+   move(e: React.MouseEvent, period: string, delta: number): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let refDate = new Date(this.state.refDate);
+
+      switch (period) {
+         case "y":
+            refDate.setFullYear(refDate.getFullYear() + delta);
+            break;
+
+         case "m":
+            refDate.setMonth(refDate.getMonth() + delta);
+            break;
+      }
+
+      let page = this.getPage(refDate);
+      let cursor = this.state.cursor;
+      if (cursor < page.startDate) cursor = page.startDate;
+      else if (cursor > page.endDate) cursor = page.endDate;
+
+      this.setState({ ...page, cursor });
+   }
+
+   handleKeyPress(e: React.KeyboardEvent): void {
+      let cursor = new Date(this.state.cursor);
+
+      switch (e.keyCode) {
+         case KeyCode.enter:
+            this.props.handleSelect(e as unknown as React.MouseEvent, this.state.cursor);
+            break;
+
+         case KeyCode.left:
+            cursor.setDate(cursor.getDate() - 1);
+            this.moveCursor(e, cursor);
+            break;
+
+         case KeyCode.right:
+            cursor.setDate(cursor.getDate() + 1);
+            this.moveCursor(e, cursor);
+            break;
+
+         case KeyCode.up:
+            cursor.setDate(cursor.getDate() - 7);
+            this.moveCursor(e, cursor);
+            break;
+
+         case KeyCode.down:
+            cursor.setDate(cursor.getDate() + 7);
+            this.moveCursor(e, cursor);
+            break;
+
+         case KeyCode.pageUp:
+            cursor.setMonth(cursor.getMonth() - 1);
+            this.moveCursor(e, cursor, { movePage: true });
+            break;
+
+         case KeyCode.pageDown:
+            cursor.setMonth(cursor.getMonth() + 1);
+            this.moveCursor(e, cursor, { movePage: true });
+            break;
+
+         case KeyCode.home:
+            cursor.setDate(1);
+            this.moveCursor(e, cursor, { movePage: true });
+            break;
+
+         case KeyCode.end:
+            cursor.setMonth(cursor.getMonth() + 1);
+            cursor.setDate(0);
+            this.moveCursor(e, cursor, { movePage: true });
+            break;
+
+         default:
+            let { instance } = this.props;
+            let calendarWidget = instance.widget as Calendar;
+            if (calendarWidget.onKeyDown) instance.invoke("onKeyDown", e, instance);
+            break;
+      }
+   }
+
+   handleWheel(e: WheelEvent): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let cursor = new Date(this.state.cursor);
+
+      if (e.deltaY < 0) {
+         cursor.setMonth(cursor.getMonth() - 1);
+         this.moveCursor(e as unknown as React.SyntheticEvent, cursor, { movePage: true });
+      } else if (e.deltaY > 0) {
+         cursor.setMonth(cursor.getMonth() + 1);
+         this.moveCursor(e as unknown as React.SyntheticEvent, cursor, { movePage: true });
+      }
+   }
+
+   handleBlur(e: React.FocusEvent): void {
+      FocusManager.nudge();
+      let { instance } = this.props;
+      let calendarWidget = instance.widget as Calendar;
+      if (calendarWidget.onBlur) instance.invoke("onBlur", e, instance);
+      this.setState({
+         focus: false,
+      });
+   }
+
+   handleFocus(e: React.FocusEvent): void {
+      oneFocusOut(this, this.el!, this.handleFocusOut.bind(this));
+      this.setState({
+         focus: true,
+      });
+   }
+
+   handleFocusOut(): void {
+      let { instance } = this.props;
+      let calendarWidget = instance.widget as Calendar;
+      if (calendarWidget.onFocusOut) instance.invoke("onFocusOut", null, instance);
+   }
+
+   handleMouseLeave(e: React.MouseEvent): void {
+      tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance));
+      this.setState({
+         hover: false,
+      });
+   }
+
+   handleMouseEnter(e: React.MouseEvent): void {
+      this.setState({
+         hover: true,
+      });
+   }
+
+   handleMouseMove(e: React.MouseEvent): void {
+      this.moveCursor(e, readDate((e.target as HTMLElement).dataset));
+   }
+
+   handleMouseDown(e: React.MouseEvent): void {
+      this.props.handleSelect(e, readDate((e.target as HTMLElement).dataset));
+   }
+
+   componentDidMount(): void {
+      //calendar doesn't bring up keyboard so it's ok to focus it even on mobile
+      let calendarWidget = this.props.instance.widget as Calendar;
+      if (calendarWidget.autoFocus && this.el) this.el.focus();
+
+      if (this.el) {
+         tooltipParentDidMount(this.el, ...getFieldTooltip(this.props.instance));
+         this.el.addEventListener("wheel", (e) => this.handleWheel(e));
+      }
+   }
+
+   UNSAFE_componentWillReceiveProps(props: CalendarCmpProps): void {
+      let { data } = props.instance;
+      if (data.date)
+         this.setState({
+            ...this.getPage(data.date),
+         });
+
+      if (this.el) {
+         tooltipParentWillReceiveProps(this.el, ...getFieldTooltip(props.instance));
+      }
+   }
+
+   componentWillUnmount(): void {
+      offFocusOut(this);
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   showYearDropdown(): void {
+      if (this.el && this.el.firstChild) {
+         this.setState({
+            activeView: "year-picker",
+            yearPickerHeight: (this.el.firstChild as HTMLElement).offsetHeight,
+         });
+      }
+   }
+
+   handleYearSelect(e: React.MouseEvent, year: number): void {
+      e.preventDefault();
+      e.stopPropagation();
+      let refDate = new Date(this.state.refDate);
+      refDate.setFullYear(year);
+      this.setState({
+         ...this.getPage(refDate),
+         activeView: "calendar",
+      });
+   }
+
+   renderYearPicker(): React.ReactElement {
+      let { data, widget } = this.props.instance;
+      let calendarWidget = widget as Calendar;
+      let minYear: number | undefined = data.minValue?.getFullYear();
+      let maxYear: number | undefined = data.maxValue?.getFullYear();
+      let { CSS } = widget;
+
+      let years: number[] = [];
+      let currentYear = new Date().getFullYear();
+      let midYear = currentYear - (currentYear % 5);
+      let refYear = new Date(this.state.refDate).getFullYear();
+      for (let i = midYear - 100; i <= midYear + 100; i++) {
+         years.push(i);
+      }
+
+      let rows: number[][] = [];
+      for (let i = 0; i < years.length; i += 5) {
+         rows.push(years.slice(i, i + 5));
+      }
+      return (
+         <div
+            className={CSS.element(calendarWidget.baseClass, "year-picker")}
+            style={{
+               height: this.state.yearPickerHeight,
+            }}
+            ref={(el) => {
+               if (el) {
+                  el.addEventListener("wheel", (e) => {
+                     e.stopPropagation();
+                  });
+
+                  let activeYear = el.querySelector("." + CSS.state("selected"));
+                  if (activeYear) activeYear.scrollIntoView({ block: "center", behavior: "instant" });
+               }
+            }}
+         >
+            <table>
+               <tbody>
+                  {rows.map((row: number[], rowIndex: number) => (
+                     <tr key={rowIndex}>
+                        {row.map((year: number) => (
+                           <td
+                              key={year}
+                              className={CSS.element(calendarWidget.baseClass, "year-option", {
+                                 unselectable: (minYear && year < minYear) || (maxYear && year > maxYear),
+                                 selected: year === refYear,
+                                 active: year === currentYear,
+                              })}
+                              onClick={(e) => this.handleYearSelect(e, year)}
+                           >
+                              {year}
+                           </td>
+                        ))}
+                     </tr>
+                  ))}
+               </tbody>
+            </table>
+         </div>
+      );
+   }
+
+   render(): React.ReactElement {
+      let { data, widget } = this.props.instance;
+      let calendarWidget = widget as Calendar;
+      let { CSS, baseClass, disabledDaysOfWeek, startWithMonday } = calendarWidget;
+
+      let { refDate, startDate, endDate } = this.getPage(this.state.refDate);
+
+      let month = refDate.getMonth();
+      let year = refDate.getFullYear();
+      let weeks: React.ReactNode[] = [];
+      let date = startDate;
+
+      let empty: Record<string, any> = {};
+
+      let today = zeroTime(new Date());
+      while (date >= startDate && date <= endDate) {
+         let days: React.ReactNode[] = [];
+         for (let i = 0; i < 7; i++) {
+            let dayInfo = (data.dayData && data.dayData[date.toDateString()]) || empty;
+            let unselectable = !validationCheck(date, data, disabledDaysOfWeek);
+            let classNames = CSS.expand(
+               CSS.element(baseClass, "day", {
+                  outside: month != date.getMonth(),
+                  unselectable: unselectable,
+                  selected: data.date && sameDate(data.date, date),
+                  cursor:
+                     (this.state.hover || this.state.focus) && this.state.cursor && sameDate(this.state.cursor, date),
+                  today: calendarWidget.highlightToday && sameDate(date, today),
+               }),
+               dayInfo.className,
+               CSS.mod(dayInfo.mod),
+            );
+            let dateInst = new Date(date);
+            days.push(
+               <td
+                  key={i}
+                  className={classNames}
+                  style={CSS.parseStyle(dayInfo.style)}
+                  data-year={dateInst.getFullYear()}
+                  data-month={dateInst.getMonth() + 1}
+                  data-date={dateInst.getDate()}
+                  onMouseMove={unselectable ? undefined : this.handleMouseMove}
+                  onMouseDown={unselectable ? undefined : this.handleMouseDown}
+               >
+                  {date.getDate()}
+               </td>,
+            );
+            date.setDate(date.getDate() + 1);
+         }
+         weeks.push(
+            <tr key={weeks.length} className={CSS.element(baseClass, "week")}>
+               <td />
+               {days}
+               <td />
+            </tr>,
+         );
+      }
+
+      let culture = Culture.getDateTimeCulture();
+      let monthNames = culture.getMonthNames("long");
+      let dayNames = culture.getWeekdayNames("short").map((x: string) => x.substr(0, 2));
+      if (startWithMonday) dayNames = [...dayNames.slice(1), dayNames[0]];
+
+      return (
+         <div
+            className={data.classNames}
+            tabIndex={data.disabled || !data.focusable ? null : data.tabIndex || 0}
+            onKeyDown={(e) => this.handleKeyPress(e)}
+            onMouseDown={(e) => {
+               // prevent losing focus from the input field
+               if (!data.focusable) {
+                  e.preventDefault();
+               }
+               e.stopPropagation();
+            }}
+            ref={(el) => {
+               this.el = el;
+            }}
+            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
+            onMouseLeave={(e) => this.handleMouseLeave(e)}
+            onMouseEnter={(e) => this.handleMouseEnter(e)}
+            // onWheel={(e) => this.handleWheel(e)}
+            onFocus={(e) => this.handleFocus(e)}
+            onBlur={(e) => this.handleBlur(e)}
+         >
+            {this.state.activeView == "calendar" && (
+               <table>
+                  <thead>
+                     <tr key="h" className={CSS.element(baseClass, "header")}>
+                        <td />
+                        <td onClick={(e) => this.move(e, "y", -1)}>
+                           <ForwardIcon className={CSS.element(baseClass, "icon-prev-year")} />
+                        </td>
+                        <td onClick={(e) => this.move(e, "m", -1)}>
+                           <DropdownIcon className={CSS.element(baseClass, "icon-prev-month")} />
+                        </td>
+                        <th className={CSS.element(baseClass, "display")} colSpan={3}>
+                           {monthNames[month]}
+                           <br />
+                           <span
+                              onClick={() => this.showYearDropdown()}
+                              className={CSS.element(baseClass, "year-name")}
+                           >
+                              {year}
+                           </span>
+                        </th>
+                        <td onClick={(e) => this.move(e, "m", +1)}>
+                           <DropdownIcon className={CSS.element(baseClass, "icon-next-month")} />
+                        </td>
+                        <td onClick={(e) => this.move(e, "y", +1)}>
+                           <ForwardIcon className={CSS.element(baseClass, "icon-next-year")} />
+                        </td>
+                        <td />
+                     </tr>
+                     <tr key="d" className={CSS.element(baseClass, "day-names")}>
+                        <td />
+                        {dayNames.map((name: string, i: number) => (
+                           <th key={i}>{name}</th>
+                        ))}
+                        <td />
+                     </tr>
+                  </thead>
+                  <tbody>{weeks}</tbody>
+               </table>
+            )}
+            {this.state.activeView == "calendar" && calendarWidget.showTodayButton && (
+               <div className={CSS.element(baseClass, "toolbar")}>
+                  <button
+                     className={CSS.expand(CSS.element(baseClass, "today-button"), CSS.block("button", "hollow"))}
+                     data-year={today.getFullYear()}
+                     data-month={today.getMonth() + 1}
+                     data-date={today.getDate()}
+                     onClick={(e) => {
+                        this.handleMouseDown(e);
+                     }}
+                  >
+                     {calendarWidget.todayButtonText}
+                  </button>
+               </div>
+            )}
+
+            {this.state.activeView == "year-picker" && this.renderYearPicker()}
+         </div>
+      );
+   }
+}
+
+const readDate = (ds: DOMStringMap): Date => new Date(Number(ds.year), Number(ds.month) - 1, Number(ds.date));
+
+Widget.alias("calendar", Calendar);
diff --git a/packages/cx/src/widgets/form/Checkbox.d.ts b/packages/cx/src/widgets/form/Checkbox.d.ts
deleted file mode 100644
index c72cd738f..000000000
--- a/packages/cx/src/widgets/form/Checkbox.d.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface CheckboxProps extends FieldProps {
-   /** Value of the checkbox. `true` makes the checkbox checked. */
-   value?: Cx.BooleanProp;
-
-   /** efaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `checkbox`. */
-   baseClass?: string;
-
-   /**
-    * Use native checkbox HTML element (`<input type="checkbox"/>`). Default is `false`.
-    * Native checkboxes are difficult to style.
-    */
-   native?: boolean;
-
-   /**
-    * Set to true to instruct the widget to indicate indeterminate state
-    * (null or undefined value) with a square icon instead of appearing unchecked.
-    */
-   indeterminate?: boolean;
-
-   /** Value of the checkbox. `true` makes the checkbox checked. */
-   checked?: Cx.BooleanProp;
-
-   /** Text property. */
-   text?: Cx.StringProp;
-
-   /** Prevent moving focus on the checkbox. This is useful when checkboxes are found
-    inside other focusable elements, such as grids or lists. */
-   unfocusable?: boolean;
-
-   /**
-    * Text to be displayed when checkobx is in the view mode.
-    * Useful to describe state of the checkbox in `viewMode` in a form of text, i.e. `Active/Inactive`.
-    */
-   viewText?: Cx.StringProp;
-}
-
-export class Checkbox extends Cx.Widget<CheckboxProps> {}
diff --git a/packages/cx/src/widgets/form/Checkbox.js b/packages/cx/src/widgets/form/Checkbox.js
deleted file mode 100644
index 9f737e80c..000000000
--- a/packages/cx/src/widgets/form/Checkbox.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { KeyCode } from "../../util/KeyCode";
-import CheckIcon from "../icons/check";
-import SquareIcon from "../icons/square";
-
-export class Checkbox extends Field {
-   init() {
-      if (this.checked) this.value = this.checked;
-
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            value: !this.indeterminate ? false : undefined,
-            text: undefined,
-            readOnly: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            required: undefined,
-            viewText: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   renderWrap(context, instance, key, content) {
-      let { data } = instance;
-      return (
-         <label
-            key={key}
-            className={data.classNames}
-            onMouseDown={(e) => {
-               e.stopPropagation();
-               if (this.unfocusable) e.preventDefault();
-            }}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            onClick={(e) => {
-               this.handleClick(e, instance);
-            }}
-            style={data.style}
-         >
-            {content}
-            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-         </label>
-      );
-   }
-
-   validateRequired(context, instance) {
-      let { data } = instance;
-      if (!data.value) return this.requiredText;
-   }
-
-   renderNativeCheck(context, instance) {
-      let { CSS, baseClass } = this;
-      let { data } = instance;
-      return (
-         <input
-            key="input"
-            className={CSS.element(baseClass, "checkbox")}
-            id={data.id}
-            type="checkbox"
-            checked={data.value || false}
-            disabled={data.disabled}
-            {...data.inputAttrs}
-            onClick={stopPropagation}
-            onChange={(e) => {
-               this.handleChange(e, instance);
-            }}
-         />
-      );
-   }
-
-   renderCheck(context, instance) {
-      return <CheckboxCmp key="check" instance={instance} data={instance.data} />;
-   }
-
-   renderInput(context, instance, key) {
-      let { data } = instance;
-      let text = data.text || this.renderChildren(context, instance);
-      let { CSS, baseClass } = this;
-      return this.renderWrap(context, instance, key, [
-         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
-         text ? (
-            <div key="text" className={CSS.element(baseClass, "text")}>
-               {text}
-            </div>
-         ) : (
-            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
-               &nbsp;
-            </span>
-         ),
-      ]);
-   }
-
-   renderValue(context, { data }) {
-      if (!data.viewText) return super.renderValue(...arguments);
-      return <span className={this.CSS.element(this.baseClass, "view-text")}>{data.viewText}</span>;
-   }
-
-   formatValue(context, instance) {
-      let { data } = instance;
-      return data.value && (data.text || this.renderChildren(context, instance));
-   }
-
-   handleClick(e, instance) {
-      if (this.native) e.stopPropagation();
-      else {
-         var el = document.getElementById(instance.data.id);
-         if (el) el.focus();
-         if (!instance.data.viewMode) {
-            e.preventDefault();
-            e.stopPropagation();
-            this.handleChange(e, instance, !instance.data.value);
-         }
-      }
-   }
-
-   handleChange(e, instance, checked) {
-      let { data } = instance;
-
-      if (data.readOnly || data.disabled || data.viewMode) return;
-
-      instance.set("value", checked != null ? checked : e.target.checked);
-   }
-}
-
-Checkbox.prototype.baseClass = "checkbox";
-Checkbox.prototype.native = false;
-Checkbox.prototype.indeterminate = false;
-Checkbox.prototype.unfocusable = false;
-
-Widget.alias("checkbox", Checkbox);
-
-class CheckboxCmp extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         value: props.data.value,
-      };
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      this.setState({
-         value: props.data.value,
-      });
-   }
-
-   render() {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      let { baseClass, CSS } = widget;
-
-      let check = false;
-
-      if (this.state.value == null && widget.indeterminate) check = "indeterminate";
-      else if (this.state.value) check = "check";
-
-      return (
-         <span
-            key="check"
-            tabIndex={widget.unfocusable || data.disabled ? null : data.tabIndex || 0}
-            className={CSS.element(baseClass, "input", {
-               checked: check,
-            })}
-            style={CSS.parseStyle(data.inputStyle)}
-            id={data.id}
-            onClick={this.onClick.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
-         >
-            {check == "check" && <CheckIcon className={CSS.element(baseClass, "input-check")} />}
-            {check == "indeterminate" && <SquareIcon className={CSS.element(baseClass, "input-check")} />}
-         </span>
-      );
-   }
-
-   onClick(e) {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      if (!data.disabled && !data.readOnly) {
-         e.stopPropagation();
-         e.preventDefault();
-         this.setState({ value: !this.state.value });
-         widget.handleChange(e, instance, !this.state.value);
-      }
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.space:
-            this.onClick(e);
-            break;
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/form/Checkbox.scss b/packages/cx/src/widgets/form/Checkbox.scss
index b7a6640fb..33bc80ff2 100644
--- a/packages/cx/src/widgets/form/Checkbox.scss
+++ b/packages/cx/src/widgets/form/Checkbox.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-checkbox(
    $name: "checkbox",
    $state-style-map: $cx-checkbox-state-style-map,
@@ -6,9 +8,9 @@
    $besm: $cx-besm,
    $size: $cx-default-checkbox-size
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    $padding: cx-get-state-rule($state-style-map, default, padding);
    $border-width: cx-get-state-rule($state-style-map, default, border-width);
diff --git a/packages/cx/src/widgets/form/Checkbox.tsx b/packages/cx/src/widgets/form/Checkbox.tsx
new file mode 100644
index 000000000..04650eed3
--- /dev/null
+++ b/packages/cx/src/widgets/form/Checkbox.tsx
@@ -0,0 +1,287 @@
+/** @jsxImportSource react */
+
+import { VDOM } from "../../ui/VDOM";
+import type { Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { Widget, getContent } from "../../ui/Widget";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import CheckIcon from "../icons/check";
+import SquareIcon from "../icons/square";
+import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
+import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+
+export interface CheckboxConfig extends FieldConfig {
+   /** Value of the checkbox. */
+   value?: BooleanProp;
+
+   /** Set to `true` to make the checkbox read-only. */
+   readOnly?: BooleanProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `checkbox`. */
+   baseClass?: string;
+
+   /** Use native checkbox HTML element. */
+   native?: boolean;
+
+   /** Set to `true` to display a square icon to indicate `null` or `undefined` value. */
+   indeterminate?: boolean;
+
+   /** Checked value alias for `value`. */
+   checked?: BooleanProp;
+
+   /** Text description. */
+   text?: StringProp;
+
+   /** Set to true to disable focusing on the checkbox. Used in grids to avoid conflicts. */
+   unfocusable?: boolean;
+
+   /** View mode text. */
+   viewText?: StringProp;
+
+   /** Custom validation function. */
+   onValidate?: string | ((value: boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class Checkbox extends Field<CheckboxConfig> {
+   declare public baseClass: string;
+   declare public checked?: unknown;
+   declare public value?: unknown;
+   declare public indeterminate?: boolean;
+   declare public unfocusable?: boolean;
+   declare public native?: boolean;
+
+   constructor(config?: CheckboxConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.checked) this.value = this.checked;
+
+      super.init();
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: !this.indeterminate ? false : undefined,
+            text: undefined,
+            readOnly: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            required: undefined,
+            viewText: undefined,
+         },
+         ...args,
+      );
+   }
+
+   renderWrap(
+      context: RenderingContext,
+      instance: FieldInstance<Checkbox>,
+      key: string,
+      content: React.ReactNode,
+   ): React.ReactElement {
+      let { data } = instance;
+      return (
+         <label
+            key={key}
+            className={data.classNames}
+            onMouseDown={(e) => {
+               e.stopPropagation();
+               if (this.unfocusable) e.preventDefault();
+            }}
+            onMouseMove={(e) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseMove(e, ...tooltip);
+               }
+            }}
+            onMouseLeave={(e) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseLeave(e, ...tooltip);
+               }
+            }}
+            onClick={(e) => {
+               this.handleClick(e, instance);
+            }}
+            style={data.style}
+         >
+            {content}
+            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+         </label>
+      );
+   }
+
+   validateRequired(context: RenderingContext, instance: FieldInstance<Checkbox>): string | undefined {
+      let { data } = instance;
+      if (!data.value) return this.requiredText;
+   }
+
+   renderNativeCheck(context: RenderingContext, instance: FieldInstance<Checkbox>): React.ReactElement {
+      let { CSS, baseClass } = this;
+      let { data } = instance;
+      return (
+         <input
+            key="input"
+            className={CSS.element(baseClass, "checkbox")}
+            id={data.id}
+            type="checkbox"
+            checked={data.value || false}
+            disabled={data.disabled}
+            {...data.inputAttrs}
+            onClick={stopPropagation}
+            onChange={(e) => {
+               this.handleChange(e, instance, (e.target as HTMLInputElement).checked);
+            }}
+         />
+      );
+   }
+
+   renderCheck(context: RenderingContext, instance: FieldInstance<Checkbox>): React.ReactElement {
+      return <CheckboxCmp key="check" instance={instance} data={instance.data} />;
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<Checkbox>, key: string): React.ReactElement {
+      let { data } = instance;
+      let text = data.text || this.renderChildren?.(context, instance);
+      let { CSS, baseClass } = this;
+      return this.renderWrap(context, instance, key, [
+         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
+         text ? (
+            <div key="text" className={CSS.element(baseClass, "text")}>
+               {text}
+            </div>
+         ) : (
+            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
+               &nbsp;
+            </span>
+         ),
+      ]);
+   }
+
+   renderValue(context: RenderingContext, instance: FieldInstance): React.ReactNode {
+      let { data } = instance;
+      if (!data.viewText) return super.renderValue(context, instance, undefined);
+      return <span className={this.CSS.element(this.baseClass, "view-text")}>{data.viewText}</span>;
+   }
+
+   formatValue(context: RenderingContext, instance: Instance): React.ReactNode | string {
+      let { data } = instance;
+      return data.value && (data.text || this.renderChildren?.(context, instance));
+   }
+
+   handleClick(e: React.MouseEvent, instance: Instance): void {
+      if (this.native) e.stopPropagation();
+      else {
+         var el = document.getElementById(instance.data.id);
+         if (el) el.focus();
+         if (!instance.data.viewMode) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleChange(e, instance, !instance.data.value);
+         }
+      }
+   }
+
+   handleChange(
+      e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent,
+      instance: Instance,
+      checked?: boolean,
+   ): void {
+      let { data } = instance;
+
+      if (data.readOnly || data.disabled || data.viewMode) return;
+
+      instance.set("value", checked != null ? checked : (e.target as HTMLInputElement).checked);
+   }
+}
+
+Checkbox.prototype.baseClass = "checkbox";
+Checkbox.prototype.native = false;
+Checkbox.prototype.indeterminate = false;
+Checkbox.prototype.unfocusable = false;
+
+Widget.alias("checkbox", Checkbox);
+
+interface CheckboxCmpProps {
+   key?: string;
+   instance: FieldInstance<Checkbox>;
+   data: Record<string, any>;
+}
+
+interface CheckboxCmpState {
+   value: unknown;
+}
+
+class CheckboxCmp extends VDOM.Component<CheckboxCmpProps, CheckboxCmpState> {
+   constructor(props: CheckboxCmpProps) {
+      super(props);
+      this.state = {
+         value: props.data.value,
+      };
+   }
+
+   UNSAFE_componentWillReceiveProps(props: CheckboxCmpProps) {
+      this.setState({
+         value: props.data.value,
+      });
+   }
+
+   render(): React.ReactElement {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      let { baseClass, CSS } = widget;
+
+      let check: string | boolean = false;
+
+      if (this.state.value == null && widget.indeterminate) check = "indeterminate";
+      else if (this.state.value) check = "check";
+
+      return (
+         <span
+            key="check"
+            tabIndex={widget.unfocusable || data.disabled ? undefined : (data.tabIndex as number) || 0}
+            className={CSS.element(baseClass, "input", {
+               checked: check,
+            })}
+            style={CSS.parseStyle(data.inputStyle)}
+            id={data.id}
+            onClick={this.onClick.bind(this)}
+            onKeyDown={this.onKeyDown.bind(this)}
+         >
+            {check == "check" && <CheckIcon className={CSS.element(baseClass, "input-check")} />}
+            {check == "indeterminate" && <SquareIcon className={CSS.element(baseClass, "input-check")} />}
+         </span>
+      );
+   }
+
+   onClick(e: React.MouseEvent): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      if (!data.disabled && !data.readOnly) {
+         e.stopPropagation();
+         e.preventDefault();
+         this.setState({ value: !this.state.value });
+         widget.handleChange(e, instance, !this.state.value);
+      }
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let { instance } = this.props;
+      const { widget } = instance;
+      if (
+         widget.handleKeyDown &&
+         widget.handleKeyDown(e as unknown as React.KeyboardEvent<Element>, instance) === false
+      )
+         return;
+
+      switch (e.keyCode) {
+         case KeyCode.space:
+            this.onClick(e as unknown as React.MouseEvent);
+            break;
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/form/ColorField.d.ts b/packages/cx/src/widgets/form/ColorField.d.ts
deleted file mode 100644
index 2a689aa9c..000000000
--- a/packages/cx/src/widgets/form/ColorField.d.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface ColorFieldProps extends FieldProps {
-   /** Either `rgba`, `hsla` or `hex` value of the selected color. */
-   value?: Cx.StringProp;
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /**
-    * Set to `true` to hide the clear button.
-    * It can be used interchangeably with the `showClear` property. Default value is `false`.
-    */
-   hideClear?: boolean;
-
-   /**
-    * Set to `false` to hide the clear button.
-    * It can be used interchangeably with the `hideClear` property. Default value is `true`.
-    */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to `colorfield`. */
-   baseClass?: boolean;
-
-   /** Format of the color representation. Either `rgba`, `hsla` or `hex`. */
-   format?: "rgba" | "hsla" | "hex";
-
-   /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
-   dropdownOptions?: Cx.Config;
-}
-
-export class ColorField extends Cx.Widget<ColorFieldProps> {}
diff --git a/packages/cx/src/widgets/form/ColorField.js b/packages/cx/src/widgets/form/ColorField.js
deleted file mode 100644
index 4b27445b1..000000000
--- a/packages/cx/src/widgets/form/ColorField.js
+++ /dev/null
@@ -1,397 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Cx } from "../../ui/Cx";
-import { Field, getFieldTooltip } from "./Field";
-import { Dropdown } from "../overlay/Dropdown";
-import { ColorPicker } from "./ColorPicker";
-import { parseColor } from "../../util/color/parseColor";
-import { isTouchDevice } from "../../util/isTouchDevice";
-import { isTouchEvent } from "../../util/isTouchEvent";
-
-import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { KeyCode } from "../../util/KeyCode";
-
-import DropdownIcon from "../icons/drop-down";
-import ClearIcon from "../icons/clear";
-import { Localization } from "../../ui/Localization";
-import { isDefined } from "../../util/isDefined";
-import { getActiveElement } from "../../util/getActiveElement";
-
-export class ColorField extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: this.emptyValue,
-            disabled: undefined,
-            readOnly: undefined,
-            enabled: undefined,
-            placeholder: undefined,
-            required: undefined,
-            format: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   init() {
-      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
-
-      if (this.alwaysShowClear) this.showClear = true;
-
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = [
-         data.stateMods,
-         {
-            empty: !data.value,
-         },
-      ];
-      instance.lastDropdown = context.lastDropdown;
-      super.prepareData(context, instance);
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <ColorInput
-            key={key}
-            instance={instance}
-            data={instance.data}
-            picker={{
-               value: this.value,
-               format: this.format,
-            }}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
-         />
-      );
-   }
-}
-
-ColorField.prototype.baseClass = "colorfield";
-ColorField.prototype.format = "rgba";
-ColorField.prototype.suppressErrorsUntilVisited = true;
-ColorField.prototype.showClear = true;
-ColorField.prototype.alwaysShowClear = false;
-
-Widget.alias("color-field", ColorField);
-Localization.registerPrototype("cx/widgets/ColorField", ColorField);
-
-class ColorInput extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      let { data } = this.props;
-      this.data = data;
-      this.state = {
-         dropdownOpen: false,
-         focus: false,
-      };
-   }
-
-   getDropdown() {
-      if (this.dropdown) return this.dropdown;
-
-      let { widget, lastDropdown } = this.props.instance;
-
-      let dropdown = {
-         scrollTracking: true,
-         autoFocus: true, //put focus on the dropdown to prevent opening the keyboard
-         focusable: true,
-         inline: !isTouchDevice() || !!lastDropdown,
-         touchFriendly: true,
-         placementOrder:
-            " down down-left down-right up up-left up-right right right-up right-down left left-up left-down",
-         ...widget.dropdownOptions,
-         type: Dropdown,
-         relatedElement: this.input,
-         items: {
-            type: ColorPicker,
-            ...this.props.picker,
-            onColorClick: (e) => {
-               e.stopPropagation();
-               e.preventDefault();
-               let touch = isTouchEvent(e);
-               this.closeDropdown(e, () => {
-                  if (!touch) this.input.focus();
-               });
-            },
-         },
-         onFocusOut: () => {
-            this.closeDropdown();
-         },
-         dismissAfterScroll: () => {
-            this.closeDropdown();
-         },
-         firstChildDefinesHeight: true,
-         firstChildDefinesWidth: true,
-      };
-
-      return (this.dropdown = Widget.create(dropdown));
-   }
-
-   render() {
-      let { instance, label, help, data } = this.props;
-      let { widget, state } = instance;
-      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-      let insideButton;
-      if (!data.readOnly && !data.disabled) {
-         if (
-            widget.showClear &&
-            (((!data.required || widget.alwaysShowClear) && !data.empty) || instance.state.inputError)
-         )
-            insideButton = (
-               <div
-                  className={CSS.element(baseClass, "clear")}
-                  onMouseDown={(e) => {
-                     e.preventDefault();
-                     e.stopPropagation();
-                  }}
-                  onClick={(e) => {
-                     this.onClearClick(e);
-                  }}
-               >
-                  <ClearIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-         else
-            insideButton = (
-               <div className={CSS.element(baseClass, "right-icon")}>
-                  <DropdownIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-      }
-
-      let well = (
-         <div className={CSS.element(baseClass, "left-icon")}>
-            <div style={{ backgroundColor: data.value }}></div>
-         </div>
-      );
-
-      let dropdown = false;
-      if (this.state.dropdownOpen)
-         dropdown = (
-            <Cx
-               widget={this.getDropdown()}
-               parentInstance={instance}
-               options={{ name: "colorfield-dropdown" }}
-               subscribe
-            />
-         );
-
-      let empty = this.input ? !this.input.value : data.empty;
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  visited: state.visited,
-                  focus: this.state.focus || this.state.dropdownOpen,
-                  icon: true,
-                  empty: empty && !data.placeholder,
-                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               }),
-            )}
-            style={data.style}
-            onMouseDown={this.onMouseDown.bind(this)}
-            onTouchStart={stopPropagation}
-            onClick={stopPropagation}
-         >
-            <input
-               id={data.id}
-               ref={(el) => {
-                  this.input = el;
-               }}
-               type="text"
-               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
-               style={data.inputStyle}
-               defaultValue={this.trim(data.value || "")}
-               disabled={data.disabled}
-               readOnly={data.readOnly}
-               tabIndex={data.tabIndex}
-               placeholder={data.placeholder}
-               {...data.inputAttrs}
-               onInput={(e) => this.onChange(e.target.value, "input")}
-               onChange={(e) => this.onChange(e.target.value, "change")}
-               onKeyDown={(e) => this.onKeyDown(e)}
-               onBlur={(e) => {
-                  this.onBlur(e);
-               }}
-               onFocus={(e) => {
-                  this.onFocus(e);
-               }}
-               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            />
-            {well}
-            {insideButton}
-            {dropdown}
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   onMouseDown(e) {
-      e.stopPropagation();
-      if (this.state.dropdownOpen) this.closeDropdown(e);
-      else {
-         this.openDropdownOnFocus = true;
-      }
-
-      //icon click
-      if (e.target != this.input) {
-         e.preventDefault();
-         if (!this.state.dropdownOpen) this.openDropdown(e);
-         else this.input.focus();
-      }
-   }
-
-   onFocus(e) {
-      if (this.openDropdownOnFocus) this.openDropdown(e);
-
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.trackFocus) {
-         this.setState({
-            focus: true,
-         });
-      }
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.enter:
-            e.stopPropagation();
-            this.onChange(e.target.value, "enter");
-            break;
-
-         case KeyCode.esc:
-            if (this.state.dropdownOpen) {
-               e.stopPropagation();
-               this.closeDropdown(e, () => {
-                  this.input.focus();
-               });
-            }
-            break;
-
-         case KeyCode.left:
-         case KeyCode.right:
-            e.stopPropagation();
-            break;
-
-         case KeyCode.down:
-            this.openDropdown(e);
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-      }
-   }
-
-   onBlur(e) {
-      if (this.state.focus)
-         this.setState({
-            focus: false,
-         });
-      this.onChange(e.target.value, "blur");
-   }
-
-   closeDropdown(e, callback) {
-      if (this.state.dropdownOpen) {
-         if (this.scrollableParents)
-            this.scrollableParents.forEach((el) => {
-               el.removeEventListener("scroll", this.updateDropdownPosition);
-            });
-
-         this.setState({ dropdownOpen: false }, callback);
-      } else if (callback) callback();
-   }
-
-   openDropdown(e) {
-      let { data } = this.props;
-      this.openDropdownOnFocus = false;
-
-      if (!this.state.dropdownOpen && !(data.disabled || data.readOnly)) {
-         this.setState({ dropdownOpen: true });
-      }
-   }
-
-   trim(value) {
-      return value.replace(/\s/g, "");
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      let { data, instance } = props;
-      let { state } = instance;
-      let nv = this.trim(data.value || "");
-      if (nv != this.input.value && (this.data.value != data.value || !state.inputError)) {
-         this.input.value = nv;
-         instance.setState({
-            inputError: false,
-         });
-      }
-      this.data = data;
-
-      tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(instance));
-   }
-
-   componentDidMount() {
-      tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
-      if (this.props.instance.widget.autoFocus && !isTouchDevice()) this.input.focus();
-   }
-
-   componentWillUnmount() {
-      if (this.input == getActiveElement() && this.input.value != this.props.data.value) {
-         this.onChange(this.input.value, "blur");
-      }
-      tooltipParentWillUnmount(this.props.instance);
-   }
-
-   onClearClick(e) {
-      let { instance } = this.props;
-      instance.set("value", instance.widget.emptyValue);
-      instance.setState({
-         inputError: false,
-      });
-      e.stopPropagation();
-      e.preventDefault();
-   }
-
-   onChange(inputValue, eventType) {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-
-      if (eventType == "blur") {
-         instance.setState({ visited: true });
-      }
-
-      let isValid;
-      try {
-         parseColor(inputValue);
-         isValid = true;
-      } catch (e) {
-         isValid = false;
-      }
-
-      if (eventType == "blur" || eventType == "enter") {
-         let value = inputValue || widget.emptyValue;
-         if (isValid && value !== data.value) instance.set("value", value);
-
-         instance.setState({
-            inputError: !isValid && "Invalid color entered.",
-         });
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/form/ColorField.scss b/packages/cx/src/widgets/form/ColorField.scss
index 39c342009..564cde936 100644
--- a/packages/cx/src/widgets/form/ColorField.scss
+++ b/packages/cx/src/widgets/form/ColorField.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-colorfield(
    $name: "colorfield",
    $state-style-map: $cx-std-field-state-style-map,
@@ -10,9 +12,9 @@
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
diff --git a/packages/cx/src/widgets/form/ColorField.tsx b/packages/cx/src/widgets/form/ColorField.tsx
new file mode 100644
index 000000000..1ce0ec51f
--- /dev/null
+++ b/packages/cx/src/widgets/form/ColorField.tsx
@@ -0,0 +1,497 @@
+/** @jsxImportSource react */
+
+import { Cx } from "../../ui/Cx";
+import { DropdownInstance, DropdownWidgetProps, Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { parseColor } from "../../util/color/parseColor";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { Dropdown, DropdownConfig } from "../overlay/Dropdown";
+import { ColorPicker } from "./ColorPicker";
+import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+import { Config } from "../../ui/Prop";
+
+export interface ColorFieldConfig extends FieldConfig {
+   /** Either `rgba`, `hsla` or `hex` value of the selected color. */
+   value?: StringProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: BooleanProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: StringProp;
+
+   /** Set to `true` to hide the clear button. Default value is `false`. */
+   hideClear?: boolean;
+
+   /** Set to `false` to hide the clear button. Default value is `true`. */
+   showClear?: boolean;
+
+   /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
+   alwaysShowClear?: boolean;
+
+   /** Base CSS class to be applied to the element. Defaults to `colorfield`. */
+   baseClass?: string;
+
+   /** Format of the color representation. Either `rgba`, `hsla` or `hex`. */
+   format?: "rgba" | "hsla" | "hex";
+
+   /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
+   dropdownOptions?: Partial<DropdownConfig>;
+
+   /** Custom validation function. */
+   onValidate?: string | ((value: string, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class ColorFieldInstance<F extends ColorField = ColorField>
+   extends FieldInstance<F>
+   implements DropdownWidgetProps
+{
+   lastDropdown?: Instance;
+   dropdownOpen?: boolean;
+   selectedIndex?: number;
+}
+
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+} from "../overlay/tooltip-ops";
+
+import { Localization } from "../../ui/Localization";
+import { getActiveElement } from "../../util/getActiveElement";
+import { isDefined } from "../../util/isDefined";
+import ClearIcon from "../icons/clear";
+import DropdownIcon from "../icons/drop-down";
+
+interface ColorInputProps {
+   key?: string;
+   instance: ColorFieldInstance;
+   data: Record<string, unknown>;
+   picker: {
+      value: unknown;
+      format: string;
+   };
+   label?: React.ReactNode;
+   help?: React.ReactNode;
+}
+
+interface ColorInputState {
+   dropdownOpen: boolean;
+   focus: boolean;
+}
+
+export class ColorField extends Field<ColorFieldConfig> {
+   declare public baseClass: string;
+   declare public showClear?: boolean;
+   declare public alwaysShowClear?: boolean;
+   declare public hideClear?: boolean;
+   declare public format: string;
+   declare public lastDropdown?: string;
+   declare public value?: string;
+   declare public dropdownOptions?: Partial<DropdownConfig>;
+
+   constructor(config?: ColorFieldConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: this.emptyValue,
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            format: undefined,
+         },
+         ...args,
+      );
+   }
+
+   init(): void {
+      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
+
+      if (this.alwaysShowClear) this.showClear = true;
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: ColorFieldInstance): void {
+      let { data } = instance;
+      data.stateMods = [
+         data.stateMods,
+         {
+            empty: !data.value,
+         },
+      ];
+      instance.lastDropdown = context.lastDropdown;
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: ColorFieldInstance, key: string): React.ReactNode {
+      return (
+         <ColorInput
+            key={key}
+            instance={instance}
+            data={instance.data}
+            picker={{
+               value: this.value,
+               format: this.format,
+            }}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+         />
+      );
+   }
+}
+
+ColorField.prototype.baseClass = "colorfield";
+ColorField.prototype.format = "rgba";
+ColorField.prototype.suppressErrorsUntilVisited = true;
+ColorField.prototype.showClear = true;
+ColorField.prototype.alwaysShowClear = false;
+
+Widget.alias("color-field", ColorField);
+Localization.registerPrototype("cx/widgets/ColorField", ColorField);
+
+class ColorInput extends VDOM.Component<ColorInputProps, ColorInputState> {
+   data: Record<string, unknown>;
+   dropdown?: Widget;
+   input!: HTMLInputElement;
+   openDropdownOnFocus: boolean = false;
+   scrollableParents?: Element[];
+   updateDropdownPosition: () => void;
+
+   constructor(props: ColorInputProps) {
+      super(props);
+      let { data } = this.props;
+      this.data = data;
+      this.state = {
+         dropdownOpen: false,
+         focus: false,
+      };
+      this.updateDropdownPosition = () => {};
+   }
+
+   getDropdown(): Widget {
+      if (this.dropdown) return this.dropdown;
+
+      let { widget, lastDropdown } = this.props.instance as DropdownInstance;
+      const colorFieldWidget = widget as ColorField;
+
+      let dropdown = {
+         scrollTracking: true,
+         autoFocus: true, //put focus on the dropdown to prevent opening the keyboard
+         focusable: true,
+         inline: !isTouchDevice() || !!lastDropdown,
+         touchFriendly: true,
+         placementOrder:
+            " down down-left down-right up up-left up-right right right-up right-down left left-up left-down",
+         ...colorFieldWidget.dropdownOptions,
+         type: Dropdown,
+         relatedElement: this.input,
+         items: {
+            type: ColorPicker,
+            ...this.props.picker,
+            onColorClick: (e: React.MouseEvent) => {
+               e.stopPropagation();
+               e.preventDefault();
+               let touch = isTouchEvent();
+               this.closeDropdown(e, () => {
+                  if (!touch) this.input.focus();
+               });
+            },
+         },
+         onFocusOut: () => {
+            this.closeDropdown();
+         },
+         dismissAfterScroll: () => {
+            this.closeDropdown();
+         },
+         firstChildDefinesHeight: true,
+         firstChildDefinesWidth: true,
+      };
+
+      return (this.dropdown = Widget.create(dropdown));
+   }
+
+   render(): React.ReactNode {
+      let { instance, label, help, data } = this.props;
+      let { widget, state } = instance;
+      let { CSS, baseClass, suppressErrorsUntilVisited, showClear, alwaysShowClear } = widget as ColorField;
+
+      let insideButton;
+      if (!data.readOnly && !data.disabled) {
+         if (showClear && (((!data.required || alwaysShowClear) && !data.empty) || instance.state?.inputError))
+            insideButton = (
+               <div
+                  className={CSS.element(baseClass, "clear")}
+                  onMouseDown={(e) => {
+                     e.preventDefault();
+                     e.stopPropagation();
+                  }}
+                  onClick={(e) => {
+                     this.onClearClick(e);
+                  }}
+               >
+                  <ClearIcon className={CSS.element(baseClass, "icon")} />
+               </div>
+            );
+         else
+            insideButton = (
+               <div className={CSS.element(baseClass, "right-icon")}>
+                  <DropdownIcon className={CSS.element(baseClass, "icon")} />
+               </div>
+            );
+      }
+
+      let well = (
+         <div className={CSS.element(baseClass, "left-icon")}>
+            <div style={{ backgroundColor: data.value as string }}></div>
+         </div>
+      );
+
+      let dropdown: React.ReactNode | false = false;
+      if (this.state.dropdownOpen)
+         dropdown = (
+            <Cx
+               widget={this.getDropdown()}
+               parentInstance={instance}
+               options={{ name: "colorfield-dropdown" }}
+               subscribe
+            />
+         );
+
+      let empty = this.input ? !this.input.value : data.empty;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  visited: state?.visited,
+                  focus: this.state.focus || this.state.dropdownOpen,
+                  icon: true,
+                  empty: empty && !data.placeholder,
+                  error: data.error && (state?.visited || !suppressErrorsUntilVisited || !empty),
+               }),
+            )}
+            style={data.style as React.CSSProperties}
+            onMouseDown={this.onMouseDown.bind(this)}
+            onTouchStart={stopPropagation}
+            onClick={stopPropagation}
+         >
+            <input
+               id={data.id as string}
+               ref={(el) => {
+                  this.input = el!;
+               }}
+               type="text"
+               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
+               style={data.inputStyle as React.CSSProperties}
+               defaultValue={this.trim((data.value as string) || "")}
+               disabled={data.disabled as boolean}
+               readOnly={data.readOnly as boolean}
+               tabIndex={data.tabIndex as number}
+               placeholder={data.placeholder as string}
+               {...(data.inputAttrs as Record<string, any>)}
+               onInput={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  this.onChange((e.target as HTMLInputElement).value, "input")
+               }
+               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  this.onChange((e.target as HTMLInputElement).value, "change")
+               }
+               onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => this.onKeyDown(e)}
+               onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+                  this.onBlur(e);
+               }}
+               onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
+                  this.onFocus(e);
+               }}
+               onMouseMove={(e: React.MouseEvent<HTMLInputElement>) => {
+                  const tooltip = getFieldTooltip(instance);
+                  tooltipMouseMove(e, tooltip[0], tooltip[1]);
+               }}
+               onMouseLeave={(e: React.MouseEvent<HTMLInputElement>) => {
+                  const tooltip = getFieldTooltip(instance);
+                  tooltipMouseLeave(e, tooltip[0], tooltip[1]);
+               }}
+            />
+            {well}
+            {insideButton}
+            {dropdown}
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   onMouseDown(e: React.MouseEvent): void {
+      e.stopPropagation();
+      if (this.state.dropdownOpen) this.closeDropdown(e);
+      else {
+         this.openDropdownOnFocus = true;
+      }
+
+      //icon click
+      if (e.target != this.input) {
+         e.preventDefault();
+         if (!this.state.dropdownOpen) this.openDropdown(e);
+         else this.input.focus();
+      }
+   }
+
+   onFocus(e: React.FocusEvent): void {
+      if (this.openDropdownOnFocus) this.openDropdown(e);
+
+      let { instance } = this.props;
+      let { widget } = instance;
+      const colorFieldWidget = widget as ColorField;
+
+      if (colorFieldWidget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+      }
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let { instance } = this.props;
+      if ((instance.widget as ColorField).handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.enter:
+            e.stopPropagation();
+            this.onChange((e.target as HTMLInputElement).value, "enter");
+            break;
+
+         case KeyCode.esc:
+            if (this.state.dropdownOpen) {
+               e.stopPropagation();
+               this.closeDropdown(e, () => {
+                  this.input.focus();
+               });
+            }
+            break;
+
+         case KeyCode.left:
+         case KeyCode.right:
+            e.stopPropagation();
+            break;
+
+         case KeyCode.down:
+            this.openDropdown(e);
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+      }
+   }
+
+   onBlur(e: React.FocusEvent): void {
+      if (this.state.focus)
+         this.setState({
+            focus: false,
+         });
+      this.onChange((e.target as HTMLInputElement).value, "blur");
+   }
+
+   closeDropdown(e?: React.KeyboardEvent | React.MouseEvent, callback?: () => void): void {
+      if (this.state.dropdownOpen) {
+         if (this.scrollableParents)
+            this.scrollableParents.forEach((el) => {
+               el.removeEventListener("scroll", this.updateDropdownPosition);
+            });
+
+         this.setState({ dropdownOpen: false }, callback);
+      } else if (callback) callback();
+   }
+
+   openDropdown(e: React.KeyboardEvent | React.FocusEvent | React.MouseEvent): void {
+      let { data } = this.props;
+      this.openDropdownOnFocus = false;
+
+      if (!this.state.dropdownOpen && !(data.disabled || data.readOnly)) {
+         this.setState({ dropdownOpen: true });
+      }
+   }
+
+   trim(value: string): string {
+      return value.replace(/\s/g, "");
+   }
+
+   UNSAFE_componentWillReceiveProps(props: ColorInputProps): void {
+      let { data, instance } = props;
+      let { state } = instance;
+      let nv = this.trim((data.value as string) || "");
+      if (nv != this.input.value && (this.data.value != data.value || !state?.inputError)) {
+         this.input.value = nv;
+         instance.setState({
+            inputError: false,
+         });
+      }
+      this.data = data;
+
+      const tooltip1 = getFieldTooltip(instance);
+      tooltipParentWillReceiveProps(this.input, tooltip1[0], tooltip1[1]);
+   }
+
+   componentDidMount(): void {
+      const tooltip2 = getFieldTooltip(this.props.instance);
+      tooltipParentDidMount(this.input, tooltip2[0], tooltip2[1]);
+      if ((this.props.instance.widget as ColorField).autoFocus && !isTouchDevice()) this.input.focus();
+   }
+
+   componentWillUnmount(): void {
+      if (this.input == getActiveElement() && this.input.value != this.props.data.value) {
+         this.onChange(this.input.value, "blur");
+      }
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   onClearClick(e: React.MouseEvent): void {
+      let { instance } = this.props;
+      instance.set("value", (instance.widget as ColorField).emptyValue);
+      instance.setState({
+         inputError: false,
+      });
+      e.stopPropagation();
+      e.preventDefault();
+   }
+
+   onChange(inputValue: string, eventType: string): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+
+      if (eventType == "blur") {
+         instance.setState({ visited: true });
+      }
+
+      let isValid;
+      try {
+         parseColor(inputValue);
+         isValid = true;
+      } catch (e) {
+         isValid = false;
+      }
+
+      if (eventType == "blur" || eventType == "enter") {
+         let value = inputValue || (widget as ColorField).emptyValue;
+         if (isValid && value !== data.value) instance.set("value", value);
+
+         instance.setState({
+            inputError: !isValid && "Invalid color entered.",
+         });
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/form/ColorPicker.d.ts b/packages/cx/src/widgets/form/ColorPicker.d.ts
deleted file mode 100644
index 459e6e6d6..000000000
--- a/packages/cx/src/widgets/form/ColorPicker.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
-
-interface ColorPickerProps extends FieldProps {
-
-   /** Either `rgba`, `hsla` or `hex` value of the selected color. */
-   value?: Cx.StringProp,
-   
-   /** Base CSS class to be applied to the element. Defaults to `colorpicker`. */
-   baseClass?: string,
-
-   /** 
-    * A string containing the list of all events that cause that selected value is written to the store. 
-    * Default value is `blur change` which means that changes are propagated immediately. 
-    */
-   reportOn?: string,
-
-   /** Format of the color representation. Either `rgba`, `hsla` or `hex`. */
-   format?: "rgba" | "hsla" | "hex"
-   
-}
-
-export class ColorPicker extends Cx.Widget<ColorPickerProps> {}
diff --git a/packages/cx/src/widgets/form/ColorPicker.js b/packages/cx/src/widgets/form/ColorPicker.js
deleted file mode 100644
index a534cb035..000000000
--- a/packages/cx/src/widgets/form/ColorPicker.js
+++ /dev/null
@@ -1,485 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Field } from "./Field";
-import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
-import { hslToRgb } from "../../util/color/hslToRgb";
-import { rgbToHsl } from "../../util/color/rgbToHsl";
-import { rgbToHex } from "../../util/color/rgbToHex";
-import { parseColor } from "../../util/color/parseColor";
-import { getVendorPrefix } from "../../util/getVendorPrefix";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { isString } from "../../util/isString";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-import PixelPickerIcon from "../icons/pixel-picker";
-
-//TODO: Increase HSL precision in calculations, round only RGB values
-//TODO: Resolve alpha input problems
-
-export class ColorPicker extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: this.emptyValue,
-            format: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   renderInput(context, instance, key) {
-      return <ColorPickerComponent key={key} instance={instance} />;
-   }
-
-   handleEvent(eventType, instance, color) {
-      let { data } = instance;
-      if (this.reportOn.indexOf(eventType) != -1) {
-         let value;
-         switch (data.format) {
-            default:
-            case "rgba":
-               value = `rgba(${color.r.toFixed(0)},${color.g.toFixed(0)},${color.b.toFixed(0)},${
-                  Math.round(color.a * 100) / 100
-               })`;
-               break;
-
-            case "hsla":
-               value = `hsla(${color.h.toFixed(0)},${color.s.toFixed(0)}%,${color.l.toFixed(0)}%,${
-                  Math.round(color.a * 100) / 100
-               })`;
-               break;
-
-            case "hex":
-               value = rgbToHex(color.r, color.g, color.b);
-               break;
-         }
-         instance.set("value", value);
-      }
-   }
-}
-
-ColorPicker.prototype.baseClass = "colorpicker";
-ColorPicker.prototype.reportOn = "blur change";
-ColorPicker.prototype.format = "rgba";
-
-Widget.alias("color-picker", ColorPicker);
-
-class ColorPickerComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.data = props.instance.data;
-      try {
-         this.state = this.parse(props.instance.data.value);
-      } catch (e) {
-         //if web colors are used (e.g. red), fallback to the default color
-         this.state = this.parse(null);
-      }
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      let { data } = props.instance;
-      let color;
-      try {
-         color = this.parse(data.value);
-      } catch {
-         color = this.parse(null);
-      }
-      if (color.r != this.state.r || color.g != this.state.g || color.b != this.state.b || color.a != this.state.a)
-         this.setState(color);
-   }
-
-   parse(color) {
-      let c = parseColor(color);
-      if (c == null) {
-         c = {
-            type: "rgba",
-            r: 128,
-            g: 128,
-            b: 128,
-            a: 0,
-         };
-      }
-
-      c.a = Math.round(c.a * 100) / 100;
-
-      if (c.type == "rgba") {
-         let [h, s, l] = rgbToHsl(c.r, c.g, c.b);
-         return { r: c.r, g: c.g, b: c.b, h, s, l, a: c.a };
-      }
-
-      if (c.type == "hsla") {
-         let [r, g, b] = hslToRgb(c.h, c.s, c.l);
-         r = this.fix255(r);
-         g = this.fix255(g);
-         b = this.fix255(b);
-         return { r: r, g, b, h: c.h, s: c.s, l: c.l, a: c.a };
-      }
-
-      throw new Error(`Color ${color} parsing failed.`);
-   }
-
-   render() {
-      let { h, s, l, a, r, g, b } = this.state;
-      let { instance } = this.props;
-      let { widget, data } = instance;
-      let { CSS, baseClass } = widget;
-      let hcolor = `hsl(${h},100%,50%)`;
-      let hsla = `hsla(${h.toFixed(0)},${s.toFixed(0)}%,${l.toFixed(0)}%,${a})`;
-      let rgba = `rgba(${r.toFixed(0)},${g.toFixed(0)},${b.toFixed(0)},${a})`;
-      let hex = rgbToHex(r, g, b);
-      let pixelPicker;
-
-      let alphaGradient = `${getVendorPrefix(
-         "css",
-      )}linear-gradient(left, hsla(${h},${s}%,${l}%,0) 0%, hsla(${h},${s}%,${l}%,1) 100%)`;
-
-      if (window.EyeDropper) {
-         pixelPicker = (
-            <div
-               className={CSS.element(baseClass, "pixel-picker")}
-               onClick={(e) => {
-                  const eyeDropper = new EyeDropper();
-                  eyeDropper
-                     .open()
-                     .then((result) => {
-                        instance.set("value", result.sRGBHex);
-                     })
-                     .catch((e) => {});
-               }}
-            >
-               <PixelPickerIcon />
-            </div>
-         );
-      }
-
-      return (
-         <div
-            className={data.classNames}
-            style={data.style}
-            onBlur={this.onBlur.bind(this)}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-         >
-            <div
-               className={CSS.element(baseClass, "picker")}
-               style={{ backgroundColor: hcolor }}
-               onMouseDown={this.onSLSelect.bind(this)}
-               onTouchStart={this.onSLSelect.bind(this)}
-            >
-               <div
-                  className={CSS.element(baseClass, "indicator")}
-                  style={{
-                     left: `calc(${s}% - 4px)`,
-                     top: `calc(${100 - l}% - 4px)`,
-                     borderColor: `rgba(${r < 128 ? 255 : 0}, ${g < 128 ? 255 : 0}, ${b < 128 ? 255 : 0}, 0.5)`,
-                  }}
-               />
-            </div>
-            <div className={CSS.element(baseClass, "details")}>
-               <div
-                  className={CSS.element(baseClass, "hue")}
-                  onMouseDown={this.onHueSelect.bind(this)}
-                  onTouchStart={this.onHueSelect.bind(this)}
-                  onWheel={(e) => {
-                     this.onWheel(e, "h", 10);
-                  }}
-               >
-                  <div
-                     className={CSS.element(baseClass, "indicator")}
-                     style={{
-                        left: `calc(${h / 3.6}% - 2px)`,
-                     }}
-                  />
-               </div>
-               <div className={CSS.element(baseClass, "inputs")}>
-                  <label>
-                     {"H "}
-                     <input
-                        value={h.toFixed(0)}
-                        onChange={(e) => {
-                           this.onNumberChange(e, "h");
-                        }}
-                        onWheel={(e) => {
-                           this.onWheel(e, "h", 10);
-                        }}
-                     />
-                  </label>
-                  <label>
-                     {"S "}
-                     <input
-                        value={s.toFixed(0)}
-                        onChange={(e) => {
-                           this.onNumberChange(e, "s");
-                        }}
-                        onWheel={(e) => {
-                           this.onWheel(e, "s", 5);
-                        }}
-                     />
-                  </label>
-                  <label>
-                     {"L "}
-                     <input
-                        value={l.toFixed(0)}
-                        onChange={(e) => {
-                           this.onNumberChange(e, "l");
-                        }}
-                        onWheel={(e) => {
-                           this.onWheel(e, "l", 5);
-                        }}
-                     />
-                  </label>
-                  <label>
-                     {"A "}
-                     <input
-                        value={a}
-                        onChange={(e) => {
-                           this.onNumberChange(e, "a");
-                        }}
-                        onWheel={(e) => {
-                           this.onWheel(e, "a", 0.1);
-                        }}
-                     />
-                  </label>
-               </div>
-               <div
-                  className={CSS.element(baseClass, "alpha")}
-                  onMouseDown={this.onAlphaSelect.bind(this)}
-                  onTouchStart={this.onAlphaSelect.bind(this)}
-                  onWheel={(e) => {
-                     this.onWheel(e, "a", 0.1);
-                  }}
-               >
-                  <div style={{ background: alphaGradient }} />
-                  <div
-                     className={CSS.element(baseClass, "indicator")}
-                     style={{
-                        left: `calc(${a * 100}% - 2px)`,
-                     }}
-                  />
-               </div>
-               <div className={CSS.element(baseClass, "inputs")}>
-                  <label>
-                     {"R "}
-                     <input
-                        value={r.toFixed(0)}
-                        onChange={(e) => {
-                           this.onNumberChange(e, "r");
-                        }}
-                        onWheel={(e) => {
-                           this.onWheel(e, "r", 5);
-                        }}
-                     />
-                  </label>
-                  <label>
-                     {"G "}
-                     <input
-                        value={g.toFixed(0)}
-                        onChange={(e) => {
-                           this.onNumberChange(e, "g");
-                        }}
-                        onWheel={(e) => {
-                           this.onWheel(e, "g", 5);
-                        }}
-                     />
-                  </label>
-                  <label>
-                     {"B "}
-                     <input
-                        value={b.toFixed(0)}
-                        onChange={(e) => {
-                           this.onNumberChange(e, "b");
-                        }}
-                        onWheel={(e) => {
-                           this.onWheel(e, "b", 5);
-                        }}
-                     />
-                  </label>
-                  <label>
-                     {"A "}
-                     <input
-                        value={a}
-                        onChange={(e) => {
-                           this.onNumberChange(e, "a");
-                        }}
-                        onWheel={(e) => {
-                           this.onWheel(e, "a", 0.1);
-                        }}
-                     />
-                  </label>
-               </div>
-               <div className={CSS.element(baseClass, "preview")}>
-                  <div
-                     style={{
-                        display: "flex",
-                        alignItems: "center",
-                     }}
-                  >
-                     <div
-                        className={CSS.element(baseClass, "color")}
-                        onClick={(e) => {
-                           this.onColorClick(e);
-                        }}
-                     >
-                        <div style={{ backgroundColor: hsla }}></div>
-                     </div>
-                  </div>
-                  <div className={CSS.element(baseClass, "values")}>
-                     <input value={hsla} readOnly />
-                     <input value={rgba} readOnly />
-                     <input value={hex} readOnly />
-                  </div>
-                  {pixelPicker}
-               </div>
-            </div>
-         </div>
-      );
-   }
-
-   onColorClick(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (widget.onColorClick) instance.invoke("onColorClick", e, instance);
-   }
-
-   onHueSelect(e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      let el = e.currentTarget;
-      let bounds = el.getBoundingClientRect();
-
-      let move = (e) => {
-         let pos = getCursorPos(e);
-         let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / el.offsetWidth));
-         this.setColorProp({
-            h: x * 360,
-         });
-      };
-
-      captureMouseOrTouch(e, move);
-      move(e);
-   }
-
-   onAlphaSelect(e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      let el = e.currentTarget;
-      let bounds = getTopLevelBoundingClientRect(el);
-
-      let move = (e) => {
-         let pos = getCursorPos(e);
-         let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / el.offsetWidth));
-         this.setColorProp({
-            a: x,
-         });
-      };
-
-      captureMouseOrTouch(e, move);
-      move(e);
-   }
-
-   onSLSelect(e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      let el = e.currentTarget;
-      let bounds = getTopLevelBoundingClientRect(el);
-
-      let move = (e) => {
-         let pos = getCursorPos(e);
-         let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / el.offsetWidth));
-         let y = Math.max(0, Math.min(1, (pos.clientY + 1 - bounds.top) / el.offsetWidth));
-         let s = x;
-         let l = 1 - y;
-         this.setColorProp({
-            s: s * 100,
-            l: l * 100,
-         });
-      };
-
-      captureMouseOrTouch(e, move);
-      move(e);
-   }
-
-   fix255(v) {
-      return Math.max(0, Math.min(255, Math.round(v)));
-   }
-
-   setColorProp(props, value) {
-      if (isString(props)) {
-         props = {
-            [props]: value,
-         };
-      }
-
-      let state = { ...this.state };
-      let fixAlpha = false;
-
-      for (let prop in props) {
-         value = props[prop];
-
-         switch (prop) {
-            case "h":
-               state.h = Math.min(360, Math.max(0, value));
-               [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
-               fixAlpha = true;
-               break;
-
-            case "s":
-               state.s = Math.min(100, Math.max(0, value));
-               [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
-               fixAlpha = true;
-               break;
-
-            case "l":
-               state.l = Math.min(100, Math.max(0, value));
-               [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
-               fixAlpha = true;
-               break;
-
-            case "r":
-            case "g":
-            case "b":
-               state[prop] = Math.round(Math.min(255, Math.max(0, value)));
-               let [h, s, l] = rgbToHsl(state.r, state.g, state.b);
-               state.h = h;
-               state.s = s;
-               state.l = l;
-               fixAlpha = true;
-               break;
-
-            case "a":
-               state.a = Math.round(100 * Math.min(1, Math.max(0, value))) / 100;
-               break;
-         }
-      }
-
-      state.r = this.fix255(state.r);
-      state.g = this.fix255(state.g);
-      state.b = this.fix255(state.b);
-
-      if (fixAlpha && state.a === 0) state.a = 1;
-
-      this.setState(state, () => {
-         this.props.instance.widget.handleEvent("change", this.props.instance, this.state);
-      });
-   }
-
-   onNumberChange(e, prop) {
-      e.preventDefault();
-      e.stopPropagation();
-      let number = parseFloat(e.target.value || "0");
-      this.setColorProp(prop, number);
-   }
-
-   onWheel(e, prop, delta) {
-      e.preventDefault();
-      e.stopPropagation();
-      let factor = e.deltaY < 0 ? 1 : -1;
-      this.setColorProp(prop, this.state[prop] + delta * factor);
-   }
-
-   onBlur() {
-      this.props.instance.widget.handleEvent("blur", this.props.instance, this.state);
-   }
-}
diff --git a/packages/cx/src/widgets/form/ColorPicker.scss b/packages/cx/src/widgets/form/ColorPicker.scss
index 54b55efda..56e59ae4f 100644
--- a/packages/cx/src/widgets/form/ColorPicker.scss
+++ b/packages/cx/src/widgets/form/ColorPicker.scss
@@ -5,6 +5,8 @@
 //   }
 //}
 
+@use "sass:map";
+
 @mixin cx-checker-background($tile-size: 4px, $color: rgba(gray, 0.5)) {
    background-image: linear-gradient(45deg, $color 25%, transparent 25%),
       linear-gradient(-45deg, $color 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $color 75%),
@@ -23,9 +25,9 @@
    $placeholder: $cx-input-placeholder,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    $size: 220px;
 
diff --git a/packages/cx/src/widgets/form/ColorPicker.tsx b/packages/cx/src/widgets/form/ColorPicker.tsx
new file mode 100644
index 000000000..8f8cc1422
--- /dev/null
+++ b/packages/cx/src/widgets/form/ColorPicker.tsx
@@ -0,0 +1,544 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Field, FieldConfig, FieldInstance } from "./Field";
+import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
+import { hslToRgb } from "../../util/color/hslToRgb";
+import { rgbToHsl } from "../../util/color/rgbToHsl";
+import { rgbToHex } from "../../util/color/rgbToHex";
+import { parseColor } from "../../util/color/parseColor";
+import { getVendorPrefix } from "../../util/getVendorPrefix";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { isString } from "../../util/isString";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import PixelPickerIcon from "../icons/pixel-picker";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { StringProp } from "../../ui/Prop";
+
+// Type declaration for EyeDropper API
+declare global {
+   class EyeDropper {
+      open(): Promise<{ sRGBHex: string }>;
+   }
+   interface Window {
+      EyeDropper: typeof EyeDropper;
+   }
+}
+
+//TODO: Increase HSL precision in calculations, round only RGB values
+//TODO: Resolve alpha input problems
+
+interface ColorState {
+   r: number;
+   g: number;
+   b: number;
+   h: number;
+   s: number;
+   l: number;
+   a: number;
+}
+
+export interface ColorPickerConfig extends FieldConfig {
+   /** Either `rgba`, `hsla` or `hex` value of the selected color. */
+   value?: StringProp;
+
+   /** Format of the color representation. Either `rgba`, `hsla` or `hex`. */
+   format?: "rgba" | "hsla" | "hex";
+
+   /**
+    * A string containing the list of all events that cause that selected value is written to the store.
+    * Default value is `blur change` which means that changes are propagated immediately.
+    */
+   reportOn?: string;
+
+   /** Callback function invoked when the color preview is clicked. */
+   onColorClick?: (e: React.MouseEvent, instance: Instance) => void;
+}
+
+export class ColorPicker extends Field<ColorPickerConfig, FieldInstance<ColorPicker>> {
+   declare format: string;
+   declare reportOn: string;
+   declare onColorClick?: (e: React.MouseEvent, instance: FieldInstance<ColorPicker>) => void;
+
+   constructor(config?: ColorPickerConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: this.emptyValue,
+            format: undefined,
+         },
+         ...args,
+      );
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<ColorPicker>, key: string): React.ReactNode {
+      return <ColorPickerComponent key={key} instance={instance} />;
+   }
+
+   handleEvent(eventType: string, instance: FieldInstance<ColorPicker>, color: ColorState): void {
+      let { data } = instance;
+      if (this.reportOn.indexOf(eventType) != -1) {
+         let value;
+         switch (data.format) {
+            default:
+            case "rgba":
+               value = `rgba(${color.r.toFixed(0)},${color.g.toFixed(0)},${color.b.toFixed(0)},${
+                  Math.round(color.a * 100) / 100
+               })`;
+               break;
+
+            case "hsla":
+               value = `hsla(${color.h.toFixed(0)},${color.s.toFixed(0)}%,${color.l.toFixed(0)}%,${
+                  Math.round(color.a * 100) / 100
+               })`;
+               break;
+
+            case "hex":
+               value = rgbToHex(color.r, color.g, color.b);
+               break;
+         }
+         instance.set("value", value);
+      }
+   }
+}
+
+ColorPicker.prototype.baseClass = "colorpicker";
+ColorPicker.prototype.reportOn = "blur change";
+ColorPicker.prototype.format = "rgba";
+
+Widget.alias("color-picker", ColorPicker);
+
+interface ColorPickerComponentProps {
+   instance: FieldInstance<ColorPicker>;
+}
+
+class ColorPickerComponent extends VDOM.Component<ColorPickerComponentProps, ColorState> {
+   data: Record<string, unknown>;
+
+   constructor(props: ColorPickerComponentProps) {
+      super(props);
+      this.data = props.instance.data;
+      try {
+         this.state = this.parse(props.instance.data.value);
+      } catch (e) {
+         //if web colors are used (e.g. red), fallback to the default color
+         this.state = this.parse(null);
+      }
+   }
+
+   UNSAFE_componentWillReceiveProps(props: ColorPickerComponentProps): void {
+      let { data } = props.instance;
+      let color;
+      try {
+         color = this.parse(data.value);
+      } catch {
+         color = this.parse(null);
+      }
+      if (color.r != this.state.r || color.g != this.state.g || color.b != this.state.b || color.a != this.state.a)
+         this.setState(color);
+   }
+
+   parse(color: string | null): ColorState {
+      let c = parseColor(color);
+      if (c == null) {
+         c = {
+            type: "rgba",
+            r: 128,
+            g: 128,
+            b: 128,
+            a: 0,
+         };
+      }
+
+      c.a = Math.round(c.a * 100) / 100;
+
+      if (c.type == "rgba") {
+         let [h, s, l] = rgbToHsl(c.r, c.g, c.b);
+         return { r: c.r, g: c.g, b: c.b, h, s, l, a: c.a };
+      }
+
+      if (c.type == "hsla") {
+         let [r, g, b] = hslToRgb(c.h, c.s, c.l);
+         r = this.fix255(r);
+         g = this.fix255(g);
+         b = this.fix255(b);
+         return { r: r, g, b, h: c.h, s: c.s, l: c.l, a: c.a };
+      }
+
+      throw new Error(`Color ${color} parsing failed.`);
+   }
+
+   render(): React.ReactNode {
+      let { h, s, l, a, r, g, b } = this.state;
+      let { instance } = this.props;
+      let { widget, data } = instance;
+      let { CSS, baseClass } = widget;
+      let hcolor = `hsl(${h},100%,50%)`;
+      let hsla = `hsla(${h.toFixed(0)},${s.toFixed(0)}%,${l.toFixed(0)}%,${a})`;
+      let rgba = `rgba(${r.toFixed(0)},${g.toFixed(0)},${b.toFixed(0)},${a})`;
+      let hex = rgbToHex(r, g, b);
+      let pixelPicker;
+
+      let alphaGradient = `${getVendorPrefix(
+         "css",
+      )}linear-gradient(left, hsla(${h},${s}%,${l}%,0) 0%, hsla(${h},${s}%,${l}%,1) 100%)`;
+
+      if ("EyeDropper" in window && window.EyeDropper) {
+         pixelPicker = (
+            <div
+               className={CSS.element(baseClass, "pixel-picker")}
+               onClick={(e) => {
+                  const eyeDropper = new EyeDropper();
+                  eyeDropper
+                     .open()
+                     .then((result: { sRGBHex: string }) => {
+                        instance.set("value", result.sRGBHex);
+                     })
+                     .catch((e: any) => {});
+               }}
+            >
+               <PixelPickerIcon />
+            </div>
+         );
+      }
+
+      return (
+         <div
+            className={data.classNames}
+            style={data.style}
+            onBlur={this.onBlur.bind(this)}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+         >
+            <div
+               className={CSS.element(baseClass, "picker")}
+               style={{ backgroundColor: hcolor }}
+               onMouseDown={this.onSLSelect.bind(this)}
+               onTouchStart={this.onSLSelect.bind(this)}
+            >
+               <div
+                  className={CSS.element(baseClass, "indicator")}
+                  style={{
+                     left: `calc(${s}% - 4px)`,
+                     top: `calc(${100 - l}% - 4px)`,
+                     borderColor: `rgba(${r < 128 ? 255 : 0}, ${g < 128 ? 255 : 0}, ${b < 128 ? 255 : 0}, 0.5)`,
+                  }}
+               />
+            </div>
+            <div className={CSS.element(baseClass, "details")}>
+               <div
+                  className={CSS.element(baseClass, "hue")}
+                  onMouseDown={this.onHueSelect.bind(this)}
+                  onTouchStart={this.onHueSelect.bind(this)}
+                  onWheel={(e) => {
+                     this.onWheel(e, "h", 10);
+                  }}
+               >
+                  <div
+                     className={CSS.element(baseClass, "indicator")}
+                     style={{
+                        left: `calc(${h / 3.6}% - 2px)`,
+                     }}
+                  />
+               </div>
+               <div className={CSS.element(baseClass, "inputs")}>
+                  <label>
+                     {"H "}
+                     <input
+                        value={h.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "h");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "h", 10);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"S "}
+                     <input
+                        value={s.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "s");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "s", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"L "}
+                     <input
+                        value={l.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "l");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "l", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"A "}
+                     <input
+                        value={a}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "a");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "a", 0.1);
+                        }}
+                     />
+                  </label>
+               </div>
+               <div
+                  className={CSS.element(baseClass, "alpha")}
+                  onMouseDown={this.onAlphaSelect.bind(this)}
+                  onTouchStart={this.onAlphaSelect.bind(this)}
+                  onWheel={(e) => {
+                     this.onWheel(e, "a", 0.1);
+                  }}
+               >
+                  <div style={{ background: alphaGradient }} />
+                  <div
+                     className={CSS.element(baseClass, "indicator")}
+                     style={{
+                        left: `calc(${a * 100}% - 2px)`,
+                     }}
+                  />
+               </div>
+               <div className={CSS.element(baseClass, "inputs")}>
+                  <label>
+                     {"R "}
+                     <input
+                        value={r.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "r");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "r", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"G "}
+                     <input
+                        value={g.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "g");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "g", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"B "}
+                     <input
+                        value={b.toFixed(0)}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "b");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "b", 5);
+                        }}
+                     />
+                  </label>
+                  <label>
+                     {"A "}
+                     <input
+                        value={a}
+                        onChange={(e) => {
+                           this.onNumberChange(e, "a");
+                        }}
+                        onWheel={(e) => {
+                           this.onWheel(e, "a", 0.1);
+                        }}
+                     />
+                  </label>
+               </div>
+               <div className={CSS.element(baseClass, "preview")}>
+                  <div
+                     style={{
+                        display: "flex",
+                        alignItems: "center",
+                     }}
+                  >
+                     <div
+                        className={CSS.element(baseClass, "color")}
+                        onClick={(e) => {
+                           this.onColorClick(e);
+                        }}
+                     >
+                        <div style={{ backgroundColor: hsla }}></div>
+                     </div>
+                  </div>
+                  <div className={CSS.element(baseClass, "values")}>
+                     <input value={hsla} readOnly />
+                     <input value={rgba} readOnly />
+                     <input value={hex} readOnly />
+                  </div>
+                  {pixelPicker}
+               </div>
+            </div>
+         </div>
+      );
+   }
+
+   onColorClick(e: React.MouseEvent): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if ((widget as ColorPicker).onColorClick) (widget as ColorPicker).onColorClick!(e, instance);
+   }
+
+   onHueSelect(e: React.MouseEvent | React.TouchEvent): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let el = e.currentTarget;
+      let bounds = el.getBoundingClientRect();
+
+      let move = (e: MouseEvent) => {
+         let pos = getCursorPos(e);
+         let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth));
+         this.setColorProp({
+            h: x * 360,
+         });
+      };
+
+      captureMouseOrTouch(e, move);
+      move(e as any);
+   }
+
+   onAlphaSelect(e: React.MouseEvent | React.TouchEvent): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let el = e.currentTarget;
+      let bounds = getTopLevelBoundingClientRect(el);
+
+      let move = (e: MouseEvent | React.MouseEvent) => {
+         let pos = getCursorPos(e);
+         let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth));
+         this.setColorProp({
+            a: x,
+         });
+      };
+
+      captureMouseOrTouch(e, move);
+      move(e as any);
+   }
+
+   onSLSelect(e: React.MouseEvent | React.TouchEvent): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let el = e.currentTarget;
+      let bounds = getTopLevelBoundingClientRect(el);
+
+      let move = (e: MouseEvent) => {
+         let pos = getCursorPos(e);
+         let x = Math.max(0, Math.min(1, (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth));
+         let y = Math.max(0, Math.min(1, (pos.clientY + 1 - bounds.top) / (el as HTMLElement).offsetWidth));
+         let s = x;
+         let l = 1 - y;
+         this.setColorProp({
+            s: s * 100,
+            l: l * 100,
+         });
+      };
+
+      captureMouseOrTouch(e, move);
+      move(e as any);
+   }
+
+   fix255(v: number): number {
+      return Math.max(0, Math.min(255, Math.round(v)));
+   }
+
+   setColorProp(props: string | Partial<ColorState>, value?: number): void {
+      let propsObj: Partial<ColorState>;
+      if (isString(props)) {
+         propsObj = {
+            [props]: value,
+         };
+      } else {
+         propsObj = props;
+      }
+
+      let state = { ...this.state };
+      let fixAlpha = false;
+
+      for (let prop in propsObj) {
+         let propValue = propsObj[prop as keyof ColorState];
+         if (propValue === undefined) continue;
+
+         switch (prop) {
+            case "h":
+               state.h = Math.min(360, Math.max(0, propValue));
+               [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+               fixAlpha = true;
+               break;
+
+            case "s":
+               state.s = Math.min(100, Math.max(0, propValue));
+               [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+               fixAlpha = true;
+               break;
+
+            case "l":
+               state.l = Math.min(100, Math.max(0, propValue));
+               [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+               fixAlpha = true;
+               break;
+
+            case "r":
+            case "g":
+            case "b":
+               state[prop] = Math.round(Math.min(255, Math.max(0, propValue)));
+               let [h, s, l] = rgbToHsl(state.r, state.g, state.b);
+               state.h = h;
+               state.s = s;
+               state.l = l;
+               fixAlpha = true;
+               break;
+
+            case "a":
+               state.a = Math.round(100 * Math.min(1, Math.max(0, propValue))) / 100;
+               break;
+         }
+      }
+
+      state.r = this.fix255(state.r);
+      state.g = this.fix255(state.g);
+      state.b = this.fix255(state.b);
+
+      if (fixAlpha && state.a === 0) state.a = 1;
+
+      this.setState(state, () => {
+         (this.props.instance.widget as ColorPicker).handleEvent("change", this.props.instance, this.state);
+      });
+   }
+
+   onNumberChange(e: React.ChangeEvent<HTMLInputElement>, prop: keyof ColorState): void {
+      e.preventDefault();
+      e.stopPropagation();
+      let number = parseFloat(e.target.value || "0");
+      this.setColorProp(prop, number);
+   }
+
+   onWheel(e: React.WheelEvent, prop: keyof ColorState, delta: number): void {
+      e.preventDefault();
+      e.stopPropagation();
+      let factor = e.deltaY < 0 ? 1 : -1;
+      this.setColorProp(prop, this.state[prop] + delta * factor);
+   }
+
+   onBlur(): void {
+      (this.props.instance.widget as ColorPicker).handleEvent("blur", this.props.instance, this.state);
+   }
+}
diff --git a/packages/cx/src/widgets/form/DateField.d.ts b/packages/cx/src/widgets/form/DateField.d.ts
deleted file mode 100644
index bb6743dc0..000000000
--- a/packages/cx/src/widgets/form/DateField.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as Cx from '../../core';
-import { DateTimeFieldProps } from './DateTimeField';
-
-interface DateFieldProps extends DateTimeFieldProps {}
-
-export class DateField extends Cx.Widget<DateFieldProps> {}
diff --git a/packages/cx/src/widgets/form/DateField.js b/packages/cx/src/widgets/form/DateField.js
deleted file mode 100644
index 831ab43df..000000000
--- a/packages/cx/src/widgets/form/DateField.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Widget} from '../../ui/Widget';
-import {Localization} from '../../ui/Localization';
-import {DateTimeField} from './DateTimeField';
-
-export class DateField extends DateTimeField {}
-
-DateField.prototype.picker = "calendar";
-DateField.prototype.segment = "date";
-
-Widget.alias('datefield', DateField);
-Localization.registerPrototype('cx/widgets/DateField', DateField);
-
diff --git a/packages/cx/src/widgets/form/DateField.ts b/packages/cx/src/widgets/form/DateField.ts
new file mode 100644
index 000000000..dbe3b915f
--- /dev/null
+++ b/packages/cx/src/widgets/form/DateField.ts
@@ -0,0 +1,21 @@
+import { Widget } from "../../ui/Widget";
+import { Localization } from "../../ui/Localization";
+import { DateTimeField, DateTimeFieldConfig } from "./DateTimeField";
+
+export interface DateFieldConfig extends DateTimeFieldConfig {}
+
+export class DateField extends DateTimeField {
+   declare public picker: string;
+   declare public segment: string;
+
+   constructor(config?: DateFieldConfig) {
+      super(config);
+   }
+}
+
+DateField.prototype.picker = "calendar";
+DateField.prototype.segment = "date";
+
+Widget.alias("datefield", DateField);
+Localization.registerPrototype("cx/widgets/DateField", DateField);
+
diff --git a/packages/cx/src/widgets/form/DateTimeField.d.ts b/packages/cx/src/widgets/form/DateTimeField.d.ts
deleted file mode 100644
index ff47f4ded..000000000
--- a/packages/cx/src/widgets/form/DateTimeField.d.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-export interface DateTimeFieldProps extends FieldProps {
-   /** Selected date. This should be a Date object or a valid date string consumable by Date.parse function. */
-   value?: Cx.Prop<string | Date>;
-
-   /** Defaults to false. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** Minimum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   minValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   maxValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** Date format used to display the selected date. See Formatting for more details. */
-   format?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `datefield`. */
-   baseClass?: string;
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string;
-
-   /** Error message used to indicate wrong user input, e.g. invalid date entered. */
-   inputErrorText?: string;
-
-   /** Name or configuration of the icon to be put on the left side of the input.  */
-   icon?: Cx.StringProp | Cx.Record;
-
-   /** Set to false to hide the clear button. It can be used interchangeably with the hideClear property. Default value is true. */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Set to true to hide the clear button. It can be used interchangeably with the showClear property. Default value is false. */
-   hideClear?: boolean;
-
-   /** Determines which segment of date/time is used. Default value is `datetime`. */
-   segment?: "date" | "time" | "datetime";
-
-   /** Set to `true` to indicate that only one segment of the selected date is affected. */
-   partial?: boolean;
-
-   /** The function that will be used to convert Date objects before writing data to the store.
-    * Default implementation is Date.toISOString.
-    * See also Culture.setDefaultDateEncoding.
-    */
-   encoding?: (date: Date) => any;
-
-   /** Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
-   disabledDaysOfWeek?: number[];
-
-   /** Set to true to focus the input field instead of the picker first. */
-   focusInputFirst?: boolean;
-
-   /** Set to true to enable seconds segment in the picker. */
-   showSeconds?: boolean;
-
-   /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
-   dropdownOptions?: Cx.Config;
-}
-
-export class DateTimeField extends Cx.Widget<DateTimeFieldProps> {}
diff --git a/packages/cx/src/widgets/form/DateTimeField.js b/packages/cx/src/widgets/form/DateTimeField.js
deleted file mode 100644
index b090b2374..000000000
--- a/packages/cx/src/widgets/form/DateTimeField.js
+++ /dev/null
@@ -1,576 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Cx } from "../../ui/Cx";
-import { Field, getFieldTooltip } from "./Field";
-import { DateTimePicker } from "./DateTimePicker";
-import { Calendar } from "./Calendar";
-import { Culture } from "../../ui/Culture";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { isTouchDevice } from "../../util/isTouchDevice";
-import { Dropdown } from "../overlay/Dropdown";
-import { StringTemplate } from "../../data/StringTemplate";
-import { zeroTime } from "../../util/date/zeroTime";
-import { dateDiff } from "../../util/date/dateDiff";
-import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { KeyCode } from "../../util/KeyCode";
-import { Localization } from "../../ui/Localization";
-import DropdownIcon from "../icons/drop-down";
-import { Icon } from "../Icon";
-import ClearIcon from "../icons/clear";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { Format } from "../../util/Format";
-import { TimeList } from "./TimeList";
-import { autoFocus } from "../autoFocus";
-import { getActiveElement } from "../../util";
-import { parseDateInvariant } from "../../util";
-
-export class DateTimeField extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: this.emptyValue,
-            disabled: undefined,
-            readOnly: undefined,
-            enabled: undefined,
-            placeholder: undefined,
-            required: undefined,
-            minValue: undefined,
-            minExclusive: undefined,
-            maxValue: undefined,
-            maxExclusive: undefined,
-            format: undefined,
-            icon: undefined,
-            autoOpen: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   init() {
-      if (typeof this.hideClear !== "undefined") this.showClear = !this.hideClear;
-
-      if (this.alwaysShowClear) this.showClear = true;
-
-      if (!this.format) {
-         switch (this.segment) {
-            case "datetime":
-               this.format = "datetime;YYYYMMddhhmm";
-               break;
-
-            case "time":
-               this.format = "time;hhmm";
-               break;
-
-            case "date":
-               this.format = "date;yyyyMMMdd";
-               break;
-         }
-      }
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.value) {
-         let date = parseDateInvariant(data.value);
-         //  let date = new Date(data.value);
-
-         if (isNaN(date.getTime())) data.formatted = String(data.value);
-         else {
-            // handle utc edge cases
-            if (this.segment == "date") date = zeroTime(date);
-            data.formatted = Format.value(date, data.format);
-         }
-         data.date = date;
-      } else data.formatted = "";
-
-      if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
-
-      if (data.maxValue) data.maxValue = parseDateInvariant(data.maxValue);
-
-      if (data.minValue) data.minValue = parseDateInvariant(data.minValue);
-
-      if (this.segment == "date") {
-         if (data.minValue) data.minValue = zeroTime(data.minValue);
-
-         if (data.maxValue) data.maxValue = zeroTime(data.maxValue);
-      }
-
-      instance.lastDropdown = context.lastDropdown;
-
-      super.prepareData(context, instance);
-   }
-
-   validate(context, instance) {
-      super.validate(context, instance);
-      var { data, widget } = instance;
-      if (!data.error && data.date) {
-         if (isNaN(data.date)) data.error = this.inputErrorText;
-         else {
-            let d;
-            if (data.maxValue) {
-               d = dateDiff(data.date, data.maxValue);
-               if (d > 0) data.error = StringTemplate.format(this.maxValueErrorText, data.maxValue);
-               else if (d == 0 && data.maxExclusive)
-                  data.error = StringTemplate.format(this.maxExclusiveErrorText, data.maxValue);
-            }
-            if (data.minValue) {
-               d = dateDiff(data.date, data.minValue);
-               if (d < 0) data.error = StringTemplate.format(this.minValueErrorText, data.minValue);
-               else if (d == 0 && data.minExclusive)
-                  data.error = StringTemplate.format(this.minExclusiveErrorText, data.minValue);
-            }
-            if (widget.disabledDaysOfWeek) {
-               if (widget.disabledDaysOfWeek.includes(data.date.getDay()))
-                  data.error = this.disabledDaysOfWeekErrorText;
-            }
-         }
-      }
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <DateTimeInput
-            key={key}
-            instance={instance}
-            data={instance.data}
-            picker={{
-               value: this.value,
-               minValue: this.minValue,
-               maxValue: this.maxValue,
-               minExclusive: this.minExclusive,
-               maxExclusive: this.maxExclusive,
-               maxValueErrorText: this.maxValueErrorText,
-               maxExclusiveErrorText: this.maxExclusiveErrorText,
-               minValueErrorText: this.minValueErrorText,
-               minExclusiveErrorText: this.minExclusiveErrorText,
-            }}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
-            icon={getContent(this.renderIcon(context, instance, "icon"))}
-         />
-      );
-   }
-
-   formatValue(context, { data }) {
-      return data.value ? data.formatted : null;
-   }
-
-   parseDate(date, instance) {
-      if (!date) return null;
-      if (date instanceof Date) return date;
-      if (this.onParseInput) {
-         let result = instance.invoke("onParseInput", date, instance);
-         if (result !== undefined) return result;
-      }
-      date = Culture.getDateTimeCulture().parse(date, { useCurrentDateForDefaults: true });
-      return date;
-   }
-}
-
-DateTimeField.prototype.baseClass = "datetimefield";
-DateTimeField.prototype.maxValueErrorText = "Select {0:d} or before.";
-DateTimeField.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
-DateTimeField.prototype.minValueErrorText = "Select {0:d} or later.";
-DateTimeField.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
-DateTimeField.prototype.inputErrorText = "Invalid date entered.";
-DateTimeField.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
-
-DateTimeField.prototype.suppressErrorsUntilVisited = true;
-DateTimeField.prototype.icon = "calendar";
-DateTimeField.prototype.showClear = true;
-DateTimeField.prototype.alwaysShowClear = false;
-DateTimeField.prototype.reactOn = "enter blur";
-DateTimeField.prototype.segment = "datetime";
-DateTimeField.prototype.picker = "auto";
-DateTimeField.prototype.disabledDaysOfWeek = null;
-DateTimeField.prototype.focusInputFirst = false;
-
-Widget.alias("datetimefield", DateTimeField);
-Localization.registerPrototype("cx/widgets/DateTimeField", DateTimeField);
-
-class DateTimeInput extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      props.instance.component = this;
-      this.state = {
-         dropdownOpen: false,
-         focus: false,
-      };
-   }
-
-   getDropdown() {
-      if (this.dropdown) return this.dropdown;
-
-      let { widget, lastDropdown } = this.props.instance;
-
-      let pickerConfig;
-
-      switch (widget.picker) {
-         case "calendar":
-            pickerConfig = {
-               type: Calendar,
-               partial: widget.partial,
-               encoding: widget.encoding,
-               disabledDaysOfWeek: widget.disabledDaysOfWeek,
-               focusable: !widget.focusInputFirst,
-            };
-            break;
-
-         case "list":
-            pickerConfig = {
-               type: TimeList,
-               style: "height: 300px",
-               encoding: widget.encoding,
-               step: widget.step,
-               format: widget.format,
-               scrollSelectionIntoView: true,
-            };
-            break;
-
-         default:
-            pickerConfig = {
-               type: DateTimePicker,
-               segment: widget.segment,
-               encoding: widget.encoding,
-               showSeconds: widget.showSeconds,
-            };
-            break;
-      }
-
-      let dropdown = {
-         scrollTracking: true,
-         inline: !isTouchDevice() || !!lastDropdown,
-         matchWidth: false,
-         placementOrder: "down down-right down-left up up-right up-left",
-         touchFriendly: true,
-         firstChildDefinesHeight: true,
-         firstChildDefinesWidth: true,
-         ...widget.dropdownOptions,
-         type: Dropdown,
-         relatedElement: this.input,
-         onFocusOut: (e) => {
-            this.closeDropdown(e);
-         },
-         onMouseDown: stopPropagation,
-         items: {
-            ...pickerConfig,
-            ...this.props.picker,
-            autoFocus: !widget.focusInputFirst,
-            tabIndex: widget.focusInputFirst ? -1 : 0,
-            onKeyDown: (e) => this.onKeyDown(e),
-            onSelect: (e, calendar, date) => {
-               e.stopPropagation();
-               e.preventDefault();
-               let touch = isTouchEvent(e);
-               this.closeDropdown(e, () => {
-                  if (date) {
-                     // If a blur event occurs before we re-render the input,
-                     // the old input value is parsed and written to the store.
-                     // We want to prevent that by eagerly updating the input value.
-                     // This can happen if the date field is within a menu.
-                     let newFormattedValue = Format.value(date, this.props.data.format);
-                     this.input.value = newFormattedValue;
-                  }
-                  if (!touch) this.input.focus();
-               });
-            },
-         },
-      };
-
-      return (this.dropdown = Widget.create(dropdown));
-   }
-
-   render() {
-      let { instance, label, help, icon: iconVDOM } = this.props;
-      let { data, widget, state } = instance;
-      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-      let insideButton, icon;
-
-      if (!data.readOnly && !data.disabled) {
-         if (
-            widget.showClear &&
-            (((widget.alwaysShowClear || !data.required) && !data.empty) || instance.state.inputError)
-         )
-            insideButton = (
-               <div
-                  className={CSS.element(baseClass, "clear")}
-                  onMouseDown={(e) => {
-                     e.preventDefault();
-                     e.stopPropagation();
-                  }}
-                  onClick={(e) => this.onClearClick(e)}
-               >
-                  <ClearIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-         else
-            insideButton = (
-               <div className={CSS.element(baseClass, "right-icon")}>
-                  <DropdownIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-      }
-
-      if (iconVDOM) {
-         icon = <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
-      }
-
-      let dropdown = false;
-      if (this.state.dropdownOpen)
-         dropdown = (
-            <Cx
-               widget={this.getDropdown()}
-               parentInstance={instance}
-               options={{ name: "datefield-dropdown" }}
-               subscribe
-            />
-         );
-
-      let empty = this.input ? !this.input.value : data.empty;
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  visited: state.visited,
-                  focus: this.state.focus || this.state.dropdownOpen,
-                  icon: !!icon,
-                  empty: empty && !data.placeholder,
-                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               }),
-            )}
-            style={data.style}
-            onMouseDown={this.onMouseDown.bind(this)}
-            onTouchStart={stopPropagation}
-         >
-            <input
-               id={data.id}
-               ref={(el) => {
-                  this.input = el;
-               }}
-               type="text"
-               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
-               style={data.inputStyle}
-               defaultValue={data.formatted}
-               disabled={data.disabled}
-               readOnly={data.readOnly}
-               tabIndex={data.tabIndex}
-               placeholder={data.placeholder}
-               {...data.inputAttrs}
-               onInput={(e) => this.onChange(e.target.value, "input")}
-               onChange={(e) => this.onChange(e.target.value, "change")}
-               onKeyDown={(e) => this.onKeyDown(e)}
-               onBlur={(e) => {
-                  this.onBlur(e);
-               }}
-               onFocus={(e) => {
-                  this.onFocus(e);
-               }}
-               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
-               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))}
-            />
-            {icon}
-            {insideButton}
-            {dropdown}
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   onMouseDown(e) {
-      e.stopPropagation();
-
-      if (this.state.dropdownOpen) {
-         this.closeDropdown(e);
-      } else {
-         this.openDropdownOnFocus = true;
-      }
-
-      //icon click
-      if (e.target !== this.input) {
-         e.preventDefault();
-
-         //the field should not focus only in case when dropdown will open and autofocus
-         if (this.props.instance.widget.focusInputFirst || this.state.dropdownOpen) this.input.focus();
-
-         if (this.state.dropdownOpen) this.closeDropdown(e);
-         else this.openDropdown(e);
-      }
-   }
-
-   onFocus(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.trackFocus) {
-         this.setState({
-            focus: true,
-         });
-      }
-      if (this.openDropdownOnFocus || widget.focusInputFirst) this.openDropdown(e);
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.enter:
-            this.onChange(e.target.value, "enter");
-            break;
-
-         case KeyCode.esc:
-            if (this.state.dropdownOpen) {
-               e.stopPropagation();
-               this.closeDropdown(e, () => {
-                  this.input.focus();
-               });
-            }
-            break;
-
-         case KeyCode.left:
-         case KeyCode.right:
-            e.stopPropagation();
-            break;
-
-         case KeyCode.down:
-            this.openDropdown(e);
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-      }
-   }
-
-   onBlur(e) {
-      if (!this.state.dropdownOpen) this.props.instance.setState({ visited: true });
-      else if (this.props.instance.widget.focusInputFirst) this.closeDropdown(e);
-      if (this.state.focus)
-         this.setState({
-            focus: false,
-         });
-      this.onChange(e.target.value, "blur");
-   }
-
-   closeDropdown(e, callback) {
-      if (this.state.dropdownOpen) {
-         if (this.scrollableParents)
-            this.scrollableParents.forEach((el) => {
-               el.removeEventListener("scroll", this.updateDropdownPosition);
-            });
-
-         this.setState({ dropdownOpen: false }, callback);
-         this.props.instance.setState({ visited: true });
-      } else if (callback) callback();
-   }
-
-   openDropdown() {
-      let { data } = this.props.instance;
-      this.openDropdownOnFocus = false;
-
-      if (!this.state.dropdownOpen && !(data.disabled || data.readOnly)) {
-         this.setState({
-            dropdownOpen: true,
-            dropdownOpenTime: Date.now(),
-         });
-      }
-   }
-
-   onClearClick(e) {
-      this.setValue(null);
-      e.stopPropagation();
-      e.preventDefault();
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      let { data, state } = props.instance;
-      if (data.formatted !== this.input.value && (data.formatted !== this.props.data.formatted || !state.inputError)) {
-         this.input.value = data.formatted || "";
-         props.instance.setState({
-            inputError: false,
-         });
-      }
-
-      tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(this.props.instance));
-   }
-
-   componentDidMount() {
-      tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
-      autoFocus(this.input, this);
-      if (this.props.data.autoOpen) this.openDropdown();
-   }
-
-   componentDidUpdate() {
-      autoFocus(this.input, this);
-   }
-
-   componentWillUnmount() {
-      if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
-         this.onChange(this.input.value, "blur");
-      }
-      tooltipParentWillUnmount(this.props.instance);
-   }
-
-   onChange(inputValue, eventType) {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-
-      if (data.disabled || data.readOnly) return;
-
-      if (widget.reactOn.indexOf(eventType) === -1) return;
-
-      if (eventType == "enter") instance.setState({ visited: true });
-
-      this.setValue(inputValue, data.value);
-   }
-
-   setValue(text, baseValue) {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-
-      let date = widget.parseDate(text, instance);
-
-      instance.setState({
-         inputError: isNaN(date) && widget.inputErrorText,
-      });
-
-      if (!isNaN(date)) {
-         let mixed = parseDateInvariant(baseValue);
-         if (date && baseValue && !isNaN(mixed) && widget.partial) {
-            switch (widget.segment) {
-               case "date":
-                  mixed.setFullYear(date.getFullYear());
-                  mixed.setMonth(date.getMonth());
-                  mixed.setDate(date.getDate());
-                  break;
-
-               case "time":
-                  mixed.setHours(date.getHours());
-                  mixed.setMinutes(date.getMinutes());
-                  mixed.setSeconds(date.getSeconds());
-                  break;
-
-               default:
-                  mixed = date;
-                  break;
-            }
-
-            date = mixed;
-         }
-
-         let encode = widget.encoding || Culture.getDefaultDateEncoding();
-
-         let value = date ? encode(date) : widget.emptyValue;
-
-         if (!instance.set("value", value)) this.input.value = value ? Format.value(date, data.format) : "";
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/form/DateTimeField.scss b/packages/cx/src/widgets/form/DateTimeField.scss
index 9b67c2046..ff8627dbd 100644
--- a/packages/cx/src/widgets/form/DateTimeField.scss
+++ b/packages/cx/src/widgets/form/DateTimeField.scss
@@ -1,4 +1,6 @@
 
+@use "sass:map";
+
 @mixin cx-datetimefield(
    $name: 'datetimefield',
    $input-state-style-map: $cx-std-field-state-style-map,
@@ -11,9 +13,9 @@
    $width: $cx-default-input-width,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       @include cxb-field($besm, $input-state-style-map, $width: $width, $input: true);
diff --git a/packages/cx/src/widgets/form/DateTimeField.tsx b/packages/cx/src/widgets/form/DateTimeField.tsx
new file mode 100644
index 000000000..2b67cf443
--- /dev/null
+++ b/packages/cx/src/widgets/form/DateTimeField.tsx
@@ -0,0 +1,726 @@
+/** @jsxImportSource react */
+import { StringTemplate } from "../../data/StringTemplate";
+import { Culture } from "../../ui/Culture";
+import { Cx } from "../../ui/Cx";
+import type { DropdownInstance, Instance } from "../../ui/Instance";
+import { FieldInstance } from "./Field";
+import { Localization } from "../../ui/Localization";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { getActiveElement, parseDateInvariant } from "../../util";
+import { dateDiff } from "../../util/date/dateDiff";
+import { zeroTime } from "../../util/date/zeroTime";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { Format } from "../../util/Format";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+import ClearIcon from "../icons/clear";
+import DropdownIcon from "../icons/drop-down";
+import { Dropdown, DropdownConfig } from "../overlay/Dropdown";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+} from "../overlay/tooltip-ops";
+import { Calendar } from "./Calendar";
+import { DateTimePicker } from "./DateTimePicker";
+import { Field, FieldConfig, getFieldTooltip } from "./Field";
+import { TimeList } from "./TimeList";
+import { BooleanProp, Config, Prop, StringProp } from "../../ui/Prop";
+
+export interface DateTimeFieldConfig extends FieldConfig {
+   /** Selected date. This should be a Date object or a valid date string consumable by Date.parse function. */
+   value?: Prop<string | Date>;
+
+   /** Defaults to false. Used to make the field read-only. */
+   readOnly?: BooleanProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: StringProp;
+
+   /** Minimum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
+   minValue?: Prop<string | Date>;
+
+   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
+   minExclusive?: BooleanProp;
+
+   /** Maximum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
+   maxValue?: Prop<string | Date>;
+
+   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
+   maxExclusive?: BooleanProp;
+
+   /** Date format used to display the selected date. */
+   format?: StringProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `datefield`. */
+   baseClass?: string;
+
+   /** Maximum value error text. */
+   maxValueErrorText?: string;
+
+   /** Maximum exclusive value error text. */
+   maxExclusiveErrorText?: string;
+
+   /** Minimum value error text. */
+   minValueErrorText?: string;
+
+   /** Minimum exclusive value error text. */
+   minExclusiveErrorText?: string;
+
+   /** Error message used to indicate wrong user input. */
+   inputErrorText?: string;
+
+   /** Name or configuration of the icon to be put on the left side of the input. */
+   icon?: StringProp | Config;
+
+   /** Set to false to hide the clear button. Default value is true. */
+   showClear?: boolean;
+
+   /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
+   alwaysShowClear?: boolean;
+
+   /** Set to true to hide the clear button. Default value is false. */
+   hideClear?: boolean;
+
+   /** Determines which segment of date/time is used. Default value is `datetime`. */
+   segment?: "date" | "time" | "datetime";
+
+   /** Set to `true` to indicate that only one segment of the selected date is affected. */
+   partial?: boolean;
+
+   /** The function that will be used to convert Date objects before writing data to the store. */
+   encoding?: (date: Date) => any;
+
+   /** Defines which days of week should be displayed as disabled. */
+   disabledDaysOfWeek?: number[];
+
+   /** Set to true to focus the input field instead of the picker first. */
+   focusInputFirst?: boolean;
+
+   /** Set to true to enable seconds segment in the picker. */
+   showSeconds?: boolean;
+
+   /** Additional configuration to be passed to the dropdown. */
+   dropdownOptions?: Partial<DropdownConfig>;
+
+   /** Custom validation function. */
+   onValidate?:
+      | string
+      | ((value: string | Date, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class DateTimeField extends Field<DateTimeFieldConfig> {
+   declare public showClear?: boolean;
+   declare public alwaysShowClear?: boolean;
+   declare public hideClear?: boolean;
+   declare public format?: string;
+   declare public segment?: string;
+   declare public maxValueErrorText?: string;
+   declare public maxExclusiveErrorText?: string;
+   declare public minValueErrorText?: string;
+   declare public minExclusiveErrorText?: string;
+   declare public inputErrorText?: string;
+   declare public disabledDaysOfWeekErrorText?: string;
+   declare public value?: unknown;
+   declare public minValue?: unknown;
+   declare public maxValue?: unknown;
+   declare public minExclusive?: boolean;
+   declare public maxExclusive?: boolean;
+   declare public picker?: string;
+   declare public partial?: boolean;
+   declare public encoding?: (date: Date) => string;
+   declare public disabledDaysOfWeek?: number[] | null;
+   declare public reactOn?: string;
+   declare public focusInputFirst?: boolean;
+   declare public dropdownOptions?: Partial<DropdownConfig>;
+   declare public onParseInput?: string | ((date: unknown, instance: Instance) => Date | undefined);
+   declare public showSeconds?: boolean;
+   declare public step?: number;
+
+   constructor(config?: DateTimeFieldConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: this.emptyValue,
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            minValue: undefined,
+            minExclusive: undefined,
+            maxValue: undefined,
+            maxExclusive: undefined,
+            format: undefined,
+            icon: undefined,
+            autoOpen: undefined,
+         },
+         ...args,
+      );
+   }
+
+   init(): void {
+      if (typeof this.hideClear !== "undefined") this.showClear = !this.hideClear;
+
+      if (this.alwaysShowClear) this.showClear = true;
+
+      if (!this.format) {
+         switch (this.segment) {
+            case "datetime":
+               this.format = "datetime;YYYYMMddhhmm";
+               break;
+
+            case "time":
+               this.format = "time;hhmm";
+               break;
+
+            case "date":
+               this.format = "date;yyyyMMMdd";
+               break;
+         }
+      }
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<DateTimeField>): void {
+      let { data } = instance;
+      let dropdownInstance = instance as DropdownInstance;
+
+      if (data.value) {
+         let date = parseDateInvariant(data.value);
+         //  let date = new Date(data.value);
+
+         if (isNaN(date.getTime())) data.formatted = String(data.value);
+         else {
+            // handle utc edge cases
+            if (this.segment == "date") date = zeroTime(date);
+            data.formatted = Format.value(date, data.format);
+         }
+         data.date = date;
+      } else data.formatted = "";
+
+      if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
+
+      if (data.maxValue) data.maxValue = parseDateInvariant(data.maxValue);
+
+      if (data.minValue) data.minValue = parseDateInvariant(data.minValue);
+
+      if (this.segment == "date") {
+         if (data.minValue) data.minValue = zeroTime(data.minValue);
+
+         if (data.maxValue) data.maxValue = zeroTime(data.maxValue);
+      }
+
+      dropdownInstance.lastDropdown = context.lastDropdown;
+
+      super.prepareData(context, instance);
+   }
+
+   validate(context: RenderingContext, instance: FieldInstance<DateTimeField>): void {
+      super.validate(context, instance);
+      let { data, widget } = instance;
+      let dateTimeWidget = widget as DateTimeField;
+
+      if (!data.error && data.date) {
+         if (isNaN(data.date)) data.error = this.inputErrorText;
+         else {
+            let d;
+            if (data.maxValue) {
+               d = dateDiff(data.date, data.maxValue);
+               if (d > 0) data.error = StringTemplate.format(this.maxValueErrorText!, data.maxValue);
+               else if (d == 0 && data.maxExclusive)
+                  data.error = StringTemplate.format(this.maxExclusiveErrorText!, data.maxValue);
+            }
+            if (data.minValue) {
+               d = dateDiff(data.date, data.minValue);
+               if (d < 0) data.error = StringTemplate.format(this.minValueErrorText!, data.minValue);
+               else if (d == 0 && data.minExclusive)
+                  data.error = StringTemplate.format(this.minExclusiveErrorText!, data.minValue);
+            }
+            if (dateTimeWidget.disabledDaysOfWeek) {
+               if (dateTimeWidget.disabledDaysOfWeek.includes(data.date.getDay()))
+                  data.error = this.disabledDaysOfWeekErrorText;
+            }
+         }
+      }
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<DateTimeField>, key: string): React.ReactNode {
+      return (
+         <DateTimeInput
+            key={key}
+            instance={instance}
+            data={instance.data}
+            picker={{
+               value: this.value,
+               minValue: this.minValue,
+               maxValue: this.maxValue,
+               minExclusive: this.minExclusive,
+               maxExclusive: this.maxExclusive,
+               maxValueErrorText: this.maxValueErrorText,
+               maxExclusiveErrorText: this.maxExclusiveErrorText,
+               minValueErrorText: this.minValueErrorText,
+               minExclusiveErrorText: this.minExclusiveErrorText,
+            }}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+            icon={getContent(this.renderIcon(context, instance, "icon"))}
+         />
+      );
+   }
+
+   formatValue(context: RenderingContext, { data }: Instance): React.ReactNode {
+      return data.value ? data.formatted : null;
+   }
+
+   parseDate(date: unknown, instance: Instance): Date | null {
+      if (!date) return null;
+      if (date instanceof Date) return date;
+      if (this.onParseInput) {
+         let result = instance.invoke("onParseInput", date, instance);
+         if (result !== undefined) return result;
+      }
+      date = Culture.getDateTimeCulture().parse(date, { useCurrentDateForDefaults: true }) as Date;
+      return date as Date | null;
+   }
+}
+
+DateTimeField.prototype.baseClass = "datetimefield";
+DateTimeField.prototype.maxValueErrorText = "Select {0:d} or before.";
+DateTimeField.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
+DateTimeField.prototype.minValueErrorText = "Select {0:d} or later.";
+DateTimeField.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
+DateTimeField.prototype.inputErrorText = "Invalid date entered.";
+DateTimeField.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
+
+DateTimeField.prototype.suppressErrorsUntilVisited = true;
+DateTimeField.prototype.icon = "calendar";
+DateTimeField.prototype.showClear = true;
+DateTimeField.prototype.alwaysShowClear = false;
+DateTimeField.prototype.reactOn = "enter blur";
+DateTimeField.prototype.segment = "datetime";
+DateTimeField.prototype.picker = "auto";
+DateTimeField.prototype.disabledDaysOfWeek = null;
+DateTimeField.prototype.focusInputFirst = false;
+
+Widget.alias("datetimefield", DateTimeField);
+Localization.registerPrototype("cx/widgets/DateTimeField", DateTimeField);
+
+interface DateTimeInputProps {
+   instance: FieldInstance<DateTimeField>;
+   data: Record<string, unknown>;
+   picker: Record<string, unknown>;
+   label?: React.ReactNode;
+   help?: React.ReactNode;
+   icon?: React.ReactNode;
+}
+
+interface DateTimeInputState {
+   dropdownOpen: boolean;
+   focus: boolean;
+   dropdownOpenTime?: number;
+}
+
+class DateTimeInput extends VDOM.Component<DateTimeInputProps, DateTimeInputState> {
+   input!: HTMLInputElement;
+   dropdown?: Widget;
+   scrollableParents?: Element[];
+   openDropdownOnFocus: boolean = false;
+   updateDropdownPosition: () => void;
+   scrolling?: boolean;
+
+   constructor(props: DateTimeInputProps) {
+      super(props);
+      (props.instance as any).component = this;
+      this.state = {
+         dropdownOpen: false,
+         focus: false,
+      };
+      this.updateDropdownPosition = () => {};
+   }
+
+   getDropdown(): Widget {
+      if (this.dropdown) return this.dropdown;
+
+      let { widget, lastDropdown } = this.props.instance as DropdownInstance;
+      let dateTimeWidget = widget as DateTimeField;
+
+      let pickerConfig;
+
+      switch (dateTimeWidget.picker) {
+         case "calendar":
+            pickerConfig = {
+               type: Calendar,
+               partial: dateTimeWidget.partial,
+               encoding: dateTimeWidget.encoding,
+               disabledDaysOfWeek: dateTimeWidget.disabledDaysOfWeek,
+               focusable: !dateTimeWidget.focusInputFirst,
+            };
+            break;
+
+         case "list":
+            pickerConfig = {
+               type: TimeList,
+               style: "height: 300px",
+               encoding: dateTimeWidget.encoding,
+               step: dateTimeWidget.step,
+               format: dateTimeWidget.format,
+               scrollSelectionIntoView: true,
+            };
+            break;
+
+         default:
+            pickerConfig = {
+               type: DateTimePicker,
+               segment: dateTimeWidget.segment,
+               encoding: dateTimeWidget.encoding,
+               showSeconds: dateTimeWidget.showSeconds,
+            };
+            break;
+      }
+
+      let dropdown = {
+         scrollTracking: true,
+         inline: !isTouchDevice() || !!lastDropdown,
+         matchWidth: false,
+         placementOrder: "down down-right down-left up up-right up-left",
+         touchFriendly: true,
+         firstChildDefinesHeight: true,
+         firstChildDefinesWidth: true,
+         ...dateTimeWidget.dropdownOptions,
+         type: Dropdown,
+         relatedElement: this.input,
+         onFocusOut: (e: unknown) => {
+            this.closeDropdown(e);
+         },
+         onMouseDown: stopPropagation,
+         items: {
+            ...pickerConfig,
+            ...this.props.picker,
+            autoFocus: !dateTimeWidget.focusInputFirst,
+            tabIndex: dateTimeWidget.focusInputFirst ? -1 : 0,
+            onKeyDown: (e: React.KeyboardEvent) => this.onKeyDown(e),
+            onSelect: (e: React.MouseEvent, calendar: any, date: Date) => {
+               e.stopPropagation();
+               e.preventDefault();
+               let touch = isTouchEvent();
+               this.closeDropdown(e, () => {
+                  if (date) {
+                     // If a blur event occurs before we re-render the input,
+                     // the old input value is parsed and written to the store.
+                     // We want to prevent that by eagerly updating the input value.
+                     // This can happen if the date field is within a menu.
+                     let newFormattedValue = Format.value(date, this.props.data.format as string);
+                     this.input.value = newFormattedValue;
+                  }
+                  if (!touch) this.input.focus();
+               });
+            },
+         },
+      };
+
+      return (this.dropdown = Widget.create(dropdown));
+   }
+
+   render(): React.ReactNode {
+      let { instance, label, help, icon: iconVDOM } = this.props;
+      let { data, widget, state } = instance;
+      let { CSS, baseClass, suppressErrorsUntilVisited, showClear, alwaysShowClear } = widget;
+
+      let insideButton, icon;
+
+      if (!data.readOnly && !data.disabled) {
+         if (showClear && (((alwaysShowClear || !data.required) && !data.empty) || instance.state?.inputError))
+            insideButton = (
+               <div
+                  className={CSS.element(baseClass, "clear")}
+                  onMouseDown={(e) => {
+                     e.preventDefault();
+                     e.stopPropagation();
+                  }}
+                  onClick={(e) => this.onClearClick(e)}
+               >
+                  <ClearIcon className={CSS.element(baseClass, "icon")} />
+               </div>
+            );
+         else
+            insideButton = (
+               <div className={CSS.element(baseClass, "right-icon")}>
+                  <DropdownIcon className={CSS.element(baseClass, "icon")} />
+               </div>
+            );
+      }
+
+      if (iconVDOM) {
+         icon = <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
+      }
+
+      let dropdown: React.ReactNode | undefined;
+      if (this.state.dropdownOpen)
+         dropdown = (
+            <Cx
+               widget={this.getDropdown()}
+               parentInstance={instance}
+               options={{ name: "datefield-dropdown" }}
+               subscribe
+            />
+         );
+
+      let empty = this.input ? !this.input.value : data.empty;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  visited: state?.visited,
+                  focus: this.state.focus || this.state.dropdownOpen,
+                  icon: !!icon,
+                  empty: empty && !data.placeholder,
+                  error: data.error && (state?.visited || !suppressErrorsUntilVisited || !empty),
+               }),
+            )}
+            style={data.style as React.CSSProperties}
+            onMouseDown={this.onMouseDown.bind(this)}
+            onTouchStart={stopPropagation}
+         >
+            <input
+               id={data.id as string}
+               ref={(el) => {
+                  this.input = el!;
+               }}
+               type="text"
+               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
+               style={data.inputStyle as React.CSSProperties}
+               defaultValue={data.formatted as string}
+               disabled={data.disabled as boolean}
+               readOnly={data.readOnly as boolean}
+               tabIndex={data.tabIndex as number}
+               placeholder={data.placeholder as string}
+               {...(data.inputAttrs as Record<string, any>)}
+               onInput={(e) => this.onChange((e.target as HTMLInputElement).value, "input")}
+               onChange={(e) => this.onChange(e.target.value, "change")}
+               onKeyDown={(e) => this.onKeyDown(e)}
+               onBlur={(e) => {
+                  this.onBlur(e);
+               }}
+               onFocus={(e) => {
+                  this.onFocus(e);
+               }}
+               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
+               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))}
+            />
+            {icon}
+            {insideButton}
+            {dropdown}
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   onMouseDown(e: React.MouseEvent): void {
+      e.stopPropagation();
+      let { widget } = this.props.instance;
+
+      if (this.state.dropdownOpen) {
+         this.closeDropdown(e);
+      } else {
+         this.openDropdownOnFocus = true;
+      }
+
+      //icon click
+      if (e.target !== this.input) {
+         e.preventDefault();
+
+         //the field should not focus only in case when dropdown will open and autofocus
+         if (widget.focusInputFirst || this.state.dropdownOpen) this.input.focus();
+
+         if (this.state.dropdownOpen) this.closeDropdown(e);
+         else this.openDropdown();
+      }
+   }
+
+   onFocus(e: React.FocusEvent): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (widget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+      }
+      if (this.openDropdownOnFocus || widget.focusInputFirst) this.openDropdown();
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.enter:
+            this.onChange((e.target as HTMLInputElement).value, "enter");
+            break;
+
+         case KeyCode.esc:
+            if (this.state.dropdownOpen) {
+               e.stopPropagation();
+               this.closeDropdown(e, () => {
+                  this.input.focus();
+               });
+            }
+            break;
+
+         case KeyCode.left:
+         case KeyCode.right:
+            e.stopPropagation();
+            break;
+
+         case KeyCode.down:
+            this.openDropdown();
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+      }
+   }
+
+   onBlur(e: React.FocusEvent<HTMLInputElement>): void {
+      let { widget } = this.props.instance;
+      let dateTimeWidget = widget as DateTimeField;
+
+      if (!this.state.dropdownOpen) this.props.instance.setState({ visited: true });
+      else if (dateTimeWidget.focusInputFirst) this.closeDropdown(e);
+      if (this.state.focus)
+         this.setState({
+            focus: false,
+         });
+      this.onChange(e.target.value, "blur");
+   }
+
+   closeDropdown(e: unknown, callback?: () => void): void {
+      if (this.state.dropdownOpen) {
+         if (this.scrollableParents)
+            this.scrollableParents.forEach((el) => {
+               el.removeEventListener("scroll", this.updateDropdownPosition);
+            });
+
+         this.setState({ dropdownOpen: false }, callback);
+         this.props.instance.setState({ visited: true });
+      } else if (callback) callback();
+   }
+
+   openDropdown(): void {
+      let { data } = this.props.instance;
+      this.openDropdownOnFocus = false;
+
+      if (!this.state.dropdownOpen && !(data.disabled || data.readOnly)) {
+         this.setState({
+            dropdownOpen: true,
+            dropdownOpenTime: Date.now(),
+         });
+      }
+   }
+
+   onClearClick(e: React.MouseEvent): void {
+      this.setValue(null);
+      e.stopPropagation();
+      e.preventDefault();
+   }
+
+   UNSAFE_componentWillReceiveProps(props: DateTimeInputProps): void {
+      let { data, state } = props.instance;
+      if (data.formatted !== this.input.value && (data.formatted !== this.props.data.formatted || !state?.inputError)) {
+         this.input.value = data.formatted || "";
+         props.instance.setState({
+            inputError: false,
+         });
+      }
+
+      tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(this.props.instance));
+   }
+
+   componentDidMount(): void {
+      tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
+      autoFocus(this.input, this);
+      if (this.props.data.autoOpen) this.openDropdown();
+   }
+
+   componentDidUpdate(): void {
+      autoFocus(this.input, this);
+   }
+
+   componentWillUnmount(): void {
+      if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
+         this.onChange(this.input.value, "blur");
+      }
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   onChange(inputValue: string, eventType: string): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      let dateTimeWidget = widget as DateTimeField;
+
+      if (data.disabled || data.readOnly) return;
+
+      if (dateTimeWidget.reactOn!.indexOf(eventType) === -1) return;
+
+      if (eventType == "enter") instance.setState({ visited: true });
+
+      this.setValue(inputValue, data.value);
+   }
+
+   setValue(text: string | null, baseValue?: unknown): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      let dateTimeWidget = widget as DateTimeField;
+
+      let date = dateTimeWidget.parseDate(text, instance);
+
+      instance.setState({
+         inputError: isNaN(date as any) && dateTimeWidget.inputErrorText,
+      });
+
+      if (!isNaN(date as any)) {
+         let mixed = parseDateInvariant(baseValue as string);
+         if (date && baseValue && !isNaN(mixed as any) && dateTimeWidget.partial) {
+            switch (dateTimeWidget.segment) {
+               case "date":
+                  mixed.setFullYear(date!.getFullYear());
+                  mixed.setMonth(date!.getMonth());
+                  mixed.setDate(date!.getDate());
+                  break;
+
+               case "time":
+                  mixed.setHours(date!.getHours());
+                  mixed.setMinutes(date!.getMinutes());
+                  mixed.setSeconds(date!.getSeconds());
+                  break;
+
+               default:
+                  mixed = date;
+                  break;
+            }
+
+            date = mixed;
+         }
+
+         let encode = dateTimeWidget.encoding || Culture.getDefaultDateEncoding();
+
+         let value = date ? encode!(date!) : dateTimeWidget.emptyValue;
+
+         if (!instance.set("value", value)) this.input.value = value ? Format.value(date!, data.format as string) : "";
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/form/DateTimePicker.js b/packages/cx/src/widgets/form/DateTimePicker.js
deleted file mode 100644
index cdc0cadb0..000000000
--- a/packages/cx/src/widgets/form/DateTimePicker.js
+++ /dev/null
@@ -1,392 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Culture } from "../../ui/Culture";
-import { KeyCode } from "../../util/KeyCode";
-import { WheelComponent } from "./Wheel";
-import { oneFocusOut, offFocusOut } from "../../ui/FocusManager";
-
-import { enableCultureSensitiveFormatting } from "../../ui/Format";
-import { parseDateInvariant } from "../../util";
-enableCultureSensitiveFormatting();
-
-export class DateTimePicker extends Widget {
-   declareData() {
-      return super.declareData(...arguments, {
-         value: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      return (
-         <DateTimePickerComponent
-            key={key}
-            instance={instance}
-            data={instance.data}
-            size={this.size}
-            segment={this.segment}
-         />
-      );
-   }
-}
-
-DateTimePicker.prototype.baseClass = "datetimepicker";
-DateTimePicker.prototype.styled = true;
-DateTimePicker.prototype.size = 3;
-DateTimePicker.prototype.autoFocus = false;
-DateTimePicker.prototype.segment = "datetime";
-DateTimePicker.prototype.showSeconds = false;
-
-class DateTimePickerComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      let date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
-      if (isNaN(date.getTime())) date = new Date();
-      this.state = {
-         date: date,
-         activeWheel: null,
-      };
-
-      let { widget } = props.instance;
-
-      this.handleChange = this.handleChange.bind(this);
-      this.onFocus = this.onFocus.bind(this);
-      this.onBlur = this.onBlur.bind(this);
-      this.onKeyDown = this.onKeyDown.bind(this);
-
-      let showDate = props.segment.indexOf("date") !== -1;
-      let showTime = props.segment.indexOf("time") !== -1;
-
-      this.wheels = {
-         year: showDate,
-         month: showDate,
-         date: showDate,
-         hours: showTime,
-         minutes: showTime,
-         seconds: showTime && widget.showSeconds,
-      };
-
-      this.keyDownPipes = {};
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      let date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
-      if (isNaN(date.getTime())) date = new Date();
-      this.setState({ date });
-   }
-
-   setDateComponent(date, component, value) {
-      let v = new Date(date);
-      switch (component) {
-         case "year":
-            v.setFullYear(value);
-            break;
-
-         case "month":
-            v.setMonth(value);
-            break;
-
-         case "date":
-            v.setDate(value);
-            break;
-
-         case "hours":
-            v.setHours(value);
-            break;
-
-         case "minutes":
-            v.setMinutes(value);
-            break;
-
-         case "seconds":
-            v.setSeconds(value);
-            break;
-      }
-      return v;
-   }
-
-   handleChange() {
-      let encode = this.props.instance.widget.encoding || Culture.getDefaultDateEncoding();
-      this.props.instance.set("value", encode(this.state.date));
-   }
-
-   render() {
-      let { instance, data, size } = this.props;
-      let { widget } = instance;
-      let { CSS, baseClass } = widget;
-      let date = this.state.date;
-
-      let culture = Culture.getDateTimeCulture();
-      let monthNames = culture.getMonthNames("short");
-
-      let years = [];
-      for (let y = 1970; y <= 2050; y++) years.push(<span key={y}>{y}</span>);
-
-      let days = [];
-      let start = new Date(date.getFullYear(), date.getMonth(), 1);
-      while (start.getMonth() === date.getMonth()) {
-         let day = start.getDate();
-         days.push(<span key={day}>{day < 10 ? "0" + day : day}</span>);
-         start.setDate(start.getDate() + 1);
-      }
-
-      let hours = [];
-      for (let h = 0; h < 24; h++) {
-         hours.push(<span key={h}>{h < 10 ? "0" + h : h}</span>);
-      }
-
-      let minutes = [];
-      for (let m = 0; m < 60; m++) {
-         minutes.push(<span key={m}>{m < 10 ? "0" + m : m}</span>);
-      }
-
-      return (
-         <div
-            tabIndex={0}
-            ref={(el) => {
-               this.el = el;
-            }}
-            className={data.classNames}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            onKeyDown={this.onKeyDown}
-         >
-            {this.wheels.year && (
-               <WheelComponent
-                  size={size}
-                  CSS={CSS}
-                  active={this.state.activeWheel === "year"}
-                  baseClass={baseClass + "-wheel"}
-                  index={date.getFullYear() - 1970}
-                  onChange={(newIndex) => {
-                     this.setState(
-                        (state) => ({
-                           date: this.setDateComponent(this.state.date, "year", newIndex + 1970),
-                        }),
-                        this.handleChange,
-                     );
-                  }}
-                  onPipeKeyDown={(kd) => {
-                     this.keyDownPipes["year"] = kd;
-                  }}
-                  onMouseDown={() => {
-                     this.setState({ activeWheel: "year" });
-                  }}
-               >
-                  {years}
-               </WheelComponent>
-            )}
-            {this.wheels.year && this.wheels.month && <span>-</span>}
-            {this.wheels.month && (
-               <WheelComponent
-                  size={size}
-                  CSS={CSS}
-                  active={this.state.activeWheel === "month"}
-                  baseClass={baseClass + "-wheel"}
-                  index={date.getMonth()}
-                  onChange={(newIndex) => {
-                     this.setState(
-                        (state) => ({
-                           date: this.setDateComponent(this.state.date, "month", newIndex),
-                        }),
-                        this.handleChange,
-                     );
-                  }}
-                  onPipeKeyDown={(kd) => {
-                     this.keyDownPipes["month"] = kd;
-                  }}
-                  onMouseDown={() => {
-                     this.setState({ activeWheel: "month" });
-                  }}
-               >
-                  {monthNames.map((m, i) => (
-                     <span key={i}>{m}</span>
-                  ))}
-               </WheelComponent>
-            )}
-            {this.wheels.month && this.wheels.date && <span>-</span>}
-            {this.wheels.date && (
-               <WheelComponent
-                  size={size}
-                  CSS={CSS}
-                  active={this.state.activeWheel === "date"}
-                  baseClass={baseClass + "-wheel"}
-                  index={date.getDate() - 1}
-                  onChange={(newIndex) => {
-                     this.setState(
-                        (state) => ({
-                           date: this.setDateComponent(this.state.date, "date", newIndex + 1),
-                        }),
-                        this.handleChange,
-                     );
-                  }}
-                  onPipeKeyDown={(kd) => {
-                     this.keyDownPipes["date"] = kd;
-                  }}
-                  onMouseDown={() => {
-                     this.setState({ activeWheel: "date" });
-                  }}
-               >
-                  {days}
-               </WheelComponent>
-            )}
-            {this.wheels.hours && this.wheels.year && <span className={CSS.element(baseClass, "spacer")} />}
-            {this.wheels.hours && (
-               <WheelComponent
-                  size={size}
-                  CSS={CSS}
-                  active={this.state.activeWheel === "hours"}
-                  baseClass={baseClass + "-wheel"}
-                  index={date.getHours()}
-                  onChange={(newIndex) => {
-                     this.setState(
-                        (state) => ({
-                           date: this.setDateComponent(this.state.date, "hours", newIndex),
-                        }),
-                        this.handleChange,
-                     );
-                  }}
-                  onPipeKeyDown={(kd) => {
-                     this.keyDownPipes["hours"] = kd;
-                  }}
-                  onMouseDown={() => {
-                     this.setState({ activeWheel: "hours" });
-                  }}
-               >
-                  {hours}
-               </WheelComponent>
-            )}
-            {this.wheels.hours && this.wheels.minutes && <span>:</span>}
-            {this.wheels.minutes && (
-               <WheelComponent
-                  size={size}
-                  CSS={CSS}
-                  baseClass={baseClass + "-wheel"}
-                  active={this.state.activeWheel === "minutes"}
-                  index={date.getMinutes()}
-                  onChange={(newIndex) => {
-                     this.setState(
-                        (state) => ({
-                           date: this.setDateComponent(this.state.date, "minutes", newIndex),
-                        }),
-                        this.handleChange,
-                     );
-                  }}
-                  onPipeKeyDown={(kd) => {
-                     this.keyDownPipes["minutes"] = kd;
-                  }}
-                  onMouseDown={() => {
-                     this.setState({ activeWheel: "minutes" });
-                  }}
-               >
-                  {minutes}
-               </WheelComponent>
-            )}
-            {this.wheels.minutes && this.wheels.seconds && <span>:</span>}
-            {this.wheels.seconds && (
-               <WheelComponent
-                  size={size}
-                  CSS={CSS}
-                  baseClass={baseClass + "-wheel"}
-                  active={this.state.activeWheel === "seconds"}
-                  index={date.getSeconds()}
-                  onChange={(newIndex) => {
-                     this.setState(
-                        (state) => ({
-                           date: this.setDateComponent(this.state.date, "seconds", newIndex),
-                        }),
-                        this.handleChange,
-                     );
-                  }}
-                  onPipeKeyDown={(kd) => {
-                     this.keyDownPipes["seconds"] = kd;
-                  }}
-                  onMouseDown={() => {
-                     this.setState({ activeWheel: "seconds" });
-                  }}
-               >
-                  {minutes}
-               </WheelComponent>
-            )}
-         </div>
-      );
-   }
-
-   componentDidMount() {
-      if (this.props.instance.widget.autoFocus) this.el.focus();
-   }
-
-   componentWillUnmount() {
-      offFocusOut(this);
-   }
-
-   onFocus() {
-      oneFocusOut(this, this.el, this.onFocusOut.bind(this));
-
-      if (!this.state.activeWheel) {
-         let firstWheel = null;
-         for (let wheel in this.wheels) {
-            if (this.wheels[wheel]) {
-               firstWheel = wheel;
-               break;
-            }
-         }
-
-         this.setState({
-            activeWheel: firstWheel,
-         });
-      }
-   }
-
-   onFocusOut() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.onFocusOut) instance.invoke("onFocusOut", null, instance);
-   }
-
-   onBlur() {
-      this.setState({
-         activeWheel: null,
-      });
-   }
-
-   onKeyDown(e) {
-      let tmp = null;
-      let { instance } = this.props;
-      switch (e.keyCode) {
-         case KeyCode.right:
-            e.preventDefault();
-            for (let wheel in this.wheels) {
-               if (this.wheels[wheel]) {
-                  if (tmp === this.state.activeWheel) {
-                     this.setState({ activeWheel: wheel });
-                     break;
-                  }
-                  tmp = wheel;
-               }
-            }
-            break;
-
-         case KeyCode.left:
-            e.preventDefault();
-            for (let wheel in this.wheels) {
-               if (this.wheels[wheel]) {
-                  if (wheel === this.state.activeWheel && tmp) {
-                     this.setState({ activeWheel: tmp });
-                     break;
-                  }
-                  tmp = wheel;
-               }
-            }
-            break;
-
-         case KeyCode.enter:
-            e.preventDefault();
-            if (instance.widget.onSelect) instance.invoke("onSelect", e, instance, this.state.date);
-            break;
-
-         default:
-            let kdp = this.keyDownPipes[this.state.activeWheel];
-            if (kdp) kdp(e);
-            break;
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/form/DateTimePicker.scss b/packages/cx/src/widgets/form/DateTimePicker.scss
index 168375bd8..633938feb 100644
--- a/packages/cx/src/widgets/form/DateTimePicker.scss
+++ b/packages/cx/src/widgets/form/DateTimePicker.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-datetimepicker(
    $name: 'datetimepicker',
    $dtp-font-size: $cx-default-font-size,
@@ -10,10 +12,10 @@
    $icon-size: $cx-default-input-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       background: $dtp-background-color;
diff --git a/packages/cx/src/widgets/form/DateTimePicker.tsx b/packages/cx/src/widgets/form/DateTimePicker.tsx
new file mode 100644
index 000000000..c0eacc8ab
--- /dev/null
+++ b/packages/cx/src/widgets/form/DateTimePicker.tsx
@@ -0,0 +1,429 @@
+/** @jsxImportSource react */
+import { Culture } from "../../ui/Culture";
+import { offFocusOut, oneFocusOut } from "../../ui/FocusManager";
+import { enableCultureSensitiveFormatting } from "../../ui/Format";
+import type { Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM, Widget } from "../../ui/Widget";
+import { parseDateInvariant } from "../../util";
+import { KeyCode } from "../../util/KeyCode";
+import { WheelComponent } from "./Wheel";
+
+enableCultureSensitiveFormatting();
+
+export class DateTimePicker extends Widget {
+   declare public size: number;
+   declare public segment: string;
+   declare public autoFocus?: boolean;
+   declare public showSeconds?: boolean;
+   declare public encoding?: (date: Date) => string;
+   declare public onFocusOut?: string | ((instance: Instance) => void);
+   declare public onSelect?: string | ((e: React.KeyboardEvent, instance: Instance, date: Date) => void);
+   declare baseClass: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      return super.declareData(...args, {
+         value: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      return (
+         <DateTimePickerComponent
+            key={key}
+            instance={instance}
+            data={instance.data}
+            size={this.size}
+            segment={this.segment}
+         />
+      );
+   }
+}
+
+DateTimePicker.prototype.baseClass = "datetimepicker";
+DateTimePicker.prototype.styled = true;
+DateTimePicker.prototype.size = 3;
+DateTimePicker.prototype.autoFocus = false;
+DateTimePicker.prototype.segment = "datetime";
+DateTimePicker.prototype.showSeconds = false;
+
+interface DateTimePickerComponentProps {
+   instance: Instance;
+   data: Record<string, unknown>;
+   size: number;
+   segment: string;
+}
+
+interface DateTimePickerComponentState {
+   date: Date;
+   activeWheel: string | null;
+}
+
+class DateTimePickerComponent extends VDOM.Component<DateTimePickerComponentProps, DateTimePickerComponentState> {
+   el!: HTMLDivElement;
+   declare wheels: Record<string, boolean>;
+   keyDownPipes: Record<string, (e: React.KeyboardEvent) => void>;
+
+   constructor(props: DateTimePickerComponentProps) {
+      super(props);
+      let date = props.data.value ? parseDateInvariant(props.data.value as string | number | Date) : new Date();
+      if (isNaN(date.getTime())) date = new Date();
+      this.state = {
+         date: date,
+         activeWheel: null,
+      };
+
+      let { widget } = props.instance;
+      let pickerWidget = widget as DateTimePicker;
+
+      this.handleChange = this.handleChange.bind(this);
+      this.onFocus = this.onFocus.bind(this);
+      this.onBlur = this.onBlur.bind(this);
+      this.onKeyDown = this.onKeyDown.bind(this);
+
+      let showDate = props.segment.indexOf("date") !== -1;
+      let showTime = props.segment.indexOf("time") !== -1;
+
+      this.wheels = {
+         year: showDate,
+         month: showDate,
+         date: showDate,
+         hours: showTime,
+         minutes: showTime,
+         seconds: showTime && !!pickerWidget.showSeconds,
+      };
+
+      this.keyDownPipes = {};
+   }
+
+   UNSAFE_componentWillReceiveProps(props: DateTimePickerComponentProps): void {
+      let date = props.data.value ? parseDateInvariant(props.data.value as string | number | Date) : new Date();
+      if (isNaN(date.getTime())) date = new Date();
+      this.setState({ date });
+   }
+
+   setDateComponent(date: Date, component: string, value: number): Date {
+      let v = new Date(date);
+      switch (component) {
+         case "year":
+            v.setFullYear(value);
+            break;
+
+         case "month":
+            v.setMonth(value);
+            break;
+
+         case "date":
+            v.setDate(value);
+            break;
+
+         case "hours":
+            v.setHours(value);
+            break;
+
+         case "minutes":
+            v.setMinutes(value);
+            break;
+
+         case "seconds":
+            v.setSeconds(value);
+            break;
+      }
+      return v;
+   }
+
+   handleChange(): void {
+      let { widget } = this.props.instance;
+      let pickerWidget = widget as DateTimePicker;
+      let encode = pickerWidget.encoding || Culture.getDefaultDateEncoding();
+      this.props.instance.set("value", encode!(this.state.date));
+   }
+
+   render(): React.ReactNode {
+      let { instance, data, size } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      let pickerWidget = widget as DateTimePicker;
+      let date = this.state.date;
+
+      let culture = Culture.getDateTimeCulture();
+      let monthNames = culture.getMonthNames("short");
+
+      let years = [];
+      for (let y = 1970; y <= 2050; y++) years.push(<span key={y}>{y}</span>);
+
+      let days = [];
+      let start = new Date(date.getFullYear(), date.getMonth(), 1);
+      while (start.getMonth() === date.getMonth()) {
+         let day = start.getDate();
+         days.push(<span key={day}>{day < 10 ? "0" + day : day}</span>);
+         start.setDate(start.getDate() + 1);
+      }
+
+      let hours = [];
+      for (let h = 0; h < 24; h++) {
+         hours.push(<span key={h}>{h < 10 ? "0" + h : h}</span>);
+      }
+
+      let minutes = [];
+      for (let m = 0; m < 60; m++) {
+         minutes.push(<span key={m}>{m < 10 ? "0" + m : m}</span>);
+      }
+
+      return (
+         <div
+            tabIndex={0}
+            ref={(el) => {
+               this.el = el!;
+            }}
+            className={data.classNames as string}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+            onKeyDown={this.onKeyDown}
+         >
+            {this.wheels.year && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  active={this.state.activeWheel === "year"}
+                  baseClass={baseClass + "-wheel"}
+                  index={date.getFullYear() - 1970}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "year", newIndex + 1970),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["year"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "year" });
+                  }}
+               >
+                  {years}
+               </WheelComponent>
+            )}
+            {this.wheels.year && this.wheels.month && <span>-</span>}
+            {this.wheels.month && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  active={this.state.activeWheel === "month"}
+                  baseClass={baseClass + "-wheel"}
+                  index={date.getMonth()}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "month", newIndex),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["month"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "month" });
+                  }}
+               >
+                  {monthNames.map((m: string, i: number) => (
+                     <span key={i}>{m}</span>
+                  ))}
+               </WheelComponent>
+            )}
+            {this.wheels.month && this.wheels.date && <span>-</span>}
+            {this.wheels.date && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  active={this.state.activeWheel === "date"}
+                  baseClass={baseClass + "-wheel"}
+                  index={date.getDate() - 1}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "date", newIndex + 1),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["date"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "date" });
+                  }}
+               >
+                  {days}
+               </WheelComponent>
+            )}
+            {this.wheels.hours && this.wheels.year && <span className={CSS.element(baseClass!, "spacer")} />}
+            {this.wheels.hours && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  active={this.state.activeWheel === "hours"}
+                  baseClass={baseClass + "-wheel"}
+                  index={date.getHours()}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "hours", newIndex),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["hours"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "hours" });
+                  }}
+               >
+                  {hours}
+               </WheelComponent>
+            )}
+            {this.wheels.hours && this.wheels.minutes && <span>:</span>}
+            {this.wheels.minutes && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  baseClass={baseClass + "-wheel"}
+                  active={this.state.activeWheel === "minutes"}
+                  index={date.getMinutes()}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "minutes", newIndex),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["minutes"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "minutes" });
+                  }}
+               >
+                  {minutes}
+               </WheelComponent>
+            )}
+            {this.wheels.minutes && this.wheels.seconds && <span>:</span>}
+            {this.wheels.seconds && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  baseClass={baseClass + "-wheel"}
+                  active={this.state.activeWheel === "seconds"}
+                  index={date.getSeconds()}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "seconds", newIndex),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["seconds"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "seconds" });
+                  }}
+               >
+                  {minutes}
+               </WheelComponent>
+            )}
+         </div>
+      );
+   }
+
+   componentDidMount(): void {
+      let { widget } = this.props.instance;
+      let pickerWidget = widget as DateTimePicker;
+      if (pickerWidget.autoFocus) this.el.focus();
+   }
+
+   componentWillUnmount(): void {
+      offFocusOut(this);
+   }
+
+   onFocus(): void {
+      oneFocusOut(this, this.el, this.onFocusOut.bind(this));
+
+      if (!this.state.activeWheel) {
+         let firstWheel: string | null = null;
+         for (let wheel in this.wheels) {
+            if (this.wheels[wheel]) {
+               firstWheel = wheel;
+               break;
+            }
+         }
+
+         this.setState({
+            activeWheel: firstWheel,
+         });
+      }
+   }
+
+   onFocusOut(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      let pickerWidget = widget as DateTimePicker;
+      if (pickerWidget.onFocusOut) instance.invoke("onFocusOut", null, instance);
+   }
+
+   onBlur(): void {
+      this.setState({
+         activeWheel: null,
+      });
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let tmp: string | null = null;
+      let { instance } = this.props;
+      let { widget } = instance;
+      let pickerWidget = widget as DateTimePicker;
+
+      switch (e.keyCode) {
+         case KeyCode.right:
+            e.preventDefault();
+            for (let wheel in this.wheels) {
+               if (this.wheels[wheel]) {
+                  if (tmp === this.state.activeWheel) {
+                     this.setState({ activeWheel: wheel });
+                     break;
+                  }
+                  tmp = wheel;
+               }
+            }
+            break;
+
+         case KeyCode.left:
+            e.preventDefault();
+            for (let wheel in this.wheels) {
+               if (this.wheels[wheel]) {
+                  if (wheel === this.state.activeWheel && tmp) {
+                     this.setState({ activeWheel: tmp });
+                     break;
+                  }
+                  tmp = wheel;
+               }
+            }
+            break;
+
+         case KeyCode.enter:
+            e.preventDefault();
+            if (pickerWidget.onSelect) instance.invoke("onSelect", e, instance, this.state.date);
+            break;
+
+         default: let kdp = this.keyDownPipes[this.state.activeWheel!];
+            if (kdp) kdp(e);
+            break;
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/form/Field.d.ts b/packages/cx/src/widgets/form/Field.d.ts
deleted file mode 100644
index 62b1c79ef..000000000
--- a/packages/cx/src/widgets/form/Field.d.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui";
-
-export interface FieldProps extends Cx.StyledContainerProps {
-   /** Field label. For advanced use cases. */
-   label?: Cx.StringProp | Cx.Config;
-
-   /** Set to `material` to use custom label placement instruction. Used in Material theme to implement animated labels. */
-   labelPlacement?: "material";
-
-   /** Set to `material` to use custom help placement instruction. Used in Material theme to implement absolutely positioned validation messages. */
-   helpPlacement?: "material";
-
-   /* Deprecated */
-   labelWidth?: any;
-
-   /** Either `view` or `edit` (default). In `view` mode, the field is displayed as plain text. */
-   mode?: Cx.Prop<"view" | "edit">;
-
-   /** Set to `true` to switch to widget view mode. Same as `mode="view". Default is false. */
-   viewMode?: Cx.BooleanProp;
-
-   id?: Cx.Prop<string | number>;
-
-   /** Used for validation. If error evaluates to non-null, the field is marked in red. */
-   error?: Cx.StringProp;
-
-   /** Style object applied to the input element. Used for setting visual elements, such as borders and backgrounds. */
-   inputStyle?: Cx.StyleProp;
-
-   /** Additional CSS class applied to the input element. Used for setting visual elements, such as borders and backgrounds. */
-   inputClass?: Cx.ClassProp;
-
-   /** Additional attributes that should be rendered on the input element. E.g. inputAttrs={{ autoComplete: "off" }}. */
-   inputAttrs?: Cx.Config;
-
-   /** Text to be rendered in view mode when the field is empty. */
-   emptyText?: Cx.StringProp;
-
-   /** Set to `true` to make error indicators visible in pristine state. By default, validation errors are not shown until the user visits the field. */
-   visited?: Cx.BooleanProp;
-
-   /** Set to `true` to automatically focus the field, after it renders for the first time. */
-   autoFocus?: Cx.BooleanProp;
-
-   /** Defines how to present validation errors. Default mode is `tooltip`. Other options are `help` and `help-block`. */
-   validationMode?: "tooltip" | "help" | "help-block";
-
-   /** Defaults to `false`. Set to `true` to disable the field. */
-   disabled?: Cx.BooleanProp;
-
-   /** Defaults to `false`. Used to make the field required. */
-   required?: Cx.BooleanProp;
-
-   /** Renamed to suppressErrorsUntilVisited. Used to indicate that required fields should not be marked as invalid before the user visits them. */
-   suppressErrorTooltipsUntilVisited?: boolean;
-
-   /** Error message used to indicate that field is required. */
-   requiredText?: string;
-
-   /** Append asterisk to the label to indicate a required field. */
-   asterisk?: Cx.BooleanProp;
-
-   /** Text displayed to the user to indicate that server-side validation is in progress. */
-   validatingText?: string;
-
-   /** Text displayed to the user to indicate that server-side validation has thrown an exception. */
-   validationExceptionText?: string;
-
-   /** Configuration of the toolitp used to indicate validation errors. */
-   errorTooltip?: Cx.Config;
-
-   /** Tooltip configuration. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp;
-
-   /** Indicates that `help` should be separated from the input with a whitespace. Default is `true`. */
-   helpSpacer?: boolean;
-
-   /**
-    * If set to `true` top level element will get additional CSS class indicating that input is focused.
-    * Used for adding special effects on focus. Default is `false`.
-    */
-   trackFocus?: boolean;
-
-   /** Custom tab index */
-   tabIndex?: Cx.StringProp;
-
-   /**
-    * Additional content to be displayed next to the field.
-    * This is commonly used for presenting additional information or validation errors.
-    */
-   help?: string | Cx.Config;
-
-   /** Custom validation function. */
-   onValidate?: string | ((value, instance: Instance, validationParams) => any);
-
-   /** Validation parameters to be passed to the validation function. */
-   validationParams?: Cx.Config;
-
-   onValidationException?: string | ((error: any, instance: Instance) => void);
-
-   /** Value to be set in the store if the field is empty. Default value is null. */
-   emptyValue?: any;
-
-   /** Additional CSS style to be passed to the label object. */
-   labelStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be passed to the label object. */
-   labelClass?: Cx.ClassProp;
-}
-
-export class Field extends Cx.Widget<FieldProps> {}
diff --git a/packages/cx/src/widgets/form/Field.js b/packages/cx/src/widgets/form/Field.js
deleted file mode 100644
index 09d74f371..000000000
--- a/packages/cx/src/widgets/form/Field.js
+++ /dev/null
@@ -1,446 +0,0 @@
-import { VDOM, getContent } from "../../ui/Widget";
-import { PureContainer } from "../../ui/PureContainer";
-import { ValidationError } from "./ValidationError";
-import { HelpText } from "./HelpText";
-import { Label } from "./Label";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { isSelector } from "../../data/isSelector";
-import { Localization } from "../../ui/Localization";
-import { isPromise } from "../../util/isPromise";
-import { Console } from "../../util/Console";
-import { parseStyle } from "../../util/parseStyle";
-import { FocusManager } from "../../ui/FocusManager";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
-import { coalesce } from "../../util/coalesce";
-import { isUndefined } from "../../util/isUndefined";
-import { shallowEquals } from "../../util/shallowEquals";
-import { FieldIcon } from "./FieldIcon";
-
-export class Field extends PureContainer {
-   declareData() {
-      super.declareData(
-         {
-            label: undefined,
-            labelWidth: undefined,
-            mode: undefined,
-            viewMode: undefined,
-            id: undefined,
-            error: undefined,
-            inputStyle: { structured: true },
-            inputClass: { structured: true },
-            inputAttrs: { structured: true },
-            emptyText: undefined,
-            visited: undefined,
-            autoFocus: undefined,
-            tabOnEnterKey: undefined,
-            tabIndex: undefined,
-            validationParams: { structured: true },
-         },
-         ...arguments,
-      );
-   }
-
-   init() {
-      this.inputStyle = parseStyle(this.inputStyle);
-      super.init();
-   }
-
-   initComponents(context, instance) {
-      if (this.validationMode == "tooltip" && isUndefined(this.errorTooltip)) {
-         this.errorTooltip = {
-            text: { bind: "$error" },
-            mod: "error",
-            ...this.errorTooltip,
-         };
-      }
-
-      if (isUndefined(this.help)) {
-         switch (this.validationMode) {
-            case "help":
-            case "help-inline":
-               this.help = ValidationError;
-               break;
-
-            case "help-block":
-               this.help = {
-                  type: ValidationError,
-                  mod: "block",
-               };
-               break;
-         }
-      }
-
-      if (this.help != null) {
-         let helpConfig = {};
-
-         if (this.help.isComponentType) helpConfig = this.help;
-         else if (isSelector(this.help)) helpConfig.text = this.help;
-         else Object.assign(helpConfig, this.help);
-
-         this.help = HelpText.create(helpConfig);
-      }
-
-      if (this.label != null) {
-         let labelConfig = {
-            mod: this.mod,
-            disabled: this.disabled,
-            required: this.required,
-            asterisk: this.asterisk,
-            style: this.labelStyle,
-            class: this.labelClass,
-         };
-
-         if (this.label.isComponentType) labelConfig = this.label;
-         else if (isSelector(this.label)) labelConfig.text = this.label;
-         else Object.assign(labelConfig, this.label);
-
-         this.label = Label.create(labelConfig);
-      }
-
-      if (this.icon != null) {
-         let iconConfig = {
-            className: this.CSS.element(this.baseClass, "icon"),
-         };
-         if (isSelector(this.icon)) iconConfig.name = this.icon;
-         else Object.assign(iconConfig, this.icon);
-
-         this.icon = FieldIcon.create(iconConfig);
-      }
-
-      return super.initComponents(...arguments, {
-         label: this.label,
-         help: this.help,
-         icon: this.icon,
-      });
-   }
-
-   initState(context, instance) {
-      instance.state = {
-         inputError: false,
-         visited: this.visited === true,
-      };
-   }
-
-   prepareData(context, instance) {
-      let { data, state } = instance;
-      if (!data.id) data.id = "fld-" + instance.id;
-
-      data._disabled = data.disabled;
-      data._readOnly = data.readOnly;
-      data._viewMode = data.mode === "view" || data.viewMode;
-      data._tabOnEnterKey = data.tabOnEnterKey;
-      data.validationValue = this.getValidationValue(data);
-      instance.parentDisabled = context.parentDisabled;
-      instance.parentReadOnly = context.parentReadOnly;
-      instance.parentViewMode = context.parentViewMode;
-      instance.parentTabOnEnterKey = context.parentTabOnEnterKey;
-      instance.parentVisited = context.parentVisited;
-
-      if (typeof data.enabled !== "undefined") data._disabled = !data.enabled;
-
-      this.disableOrValidate(context, instance);
-
-      data.inputStyle = parseStyle(data.inputStyle);
-
-      if (this.labelPlacement && this.label) data.mod = [data.mod, "label-placement-" + this.labelPlacement];
-
-      if (this.helpPlacement && this.help) data.mod = [data.mod, "help-placement-" + this.helpPlacement];
-
-      data.empty = this.isEmpty(data);
-
-      super.prepareData(...arguments);
-   }
-
-   disableOrValidate(context, instance) {
-      let { data, state } = instance;
-
-      //if the parent is strict and sets some flag to true, it is not allowed to overrule that flag by field settings
-
-      data.disabled = coalesce(
-         context.parentStrict ? context.parentDisabled : null,
-         data._disabled,
-         context.parentDisabled,
-      );
-      data.readOnly = coalesce(
-         context.parentStrict ? context.parentReadOnly : null,
-         data._readOnly,
-         context.parentReadOnly,
-      );
-      data.viewMode = coalesce(
-         context.parentStrict ? context.parentViewMode : null,
-         data._viewMode,
-         context.parentViewMode,
-      );
-      data.tabOnEnterKey = coalesce(
-         context.parentStrict ? context.parentTabOnEnterKey : null,
-         data._tabOnEnterKey,
-         context.parentTabOnEnterKey,
-      );
-      data.visited = coalesce(context.parentStrict ? context.parentVisited : null, data.visited, context.parentVisited);
-
-      if (!data.error && !data.disabled && !data.viewMode) this.validate(context, instance);
-
-      if (data.visited && !state.visited) {
-         //feels hacky but it should be ok since we're in the middle of a new render cycle
-         state.visited = true;
-      }
-
-      data.stateMods = {
-         ...data.stateMods,
-         disabled: data.disabled,
-         "edit-mode": !data.viewMode,
-         "view-mode": data.viewMode,
-      };
-   }
-
-   explore(context, instance) {
-      let { data, state } = instance;
-
-      instance.parentDisabled = context.parentDisabled;
-      instance.parentReadOnly = context.parentReadOnly;
-      instance.parentViewMode = context.parentViewMode;
-      instance.parentTabOnEnterKey = context.parentTabOnEnterKey;
-      instance.parentVisited = context.parentVisited;
-
-      if (
-         instance.cache("parentDisabled", context.parentDisabled) ||
-         instance.cache("parentReadOnly", context.parentReadOnly) ||
-         instance.cache("parentViewMode", context.parentViewMode) ||
-         instance.cache("parentTabOnEnterKey", context.parentTabOnEnterKey) ||
-         instance.cache("parentVisited", context.parentVisited)
-      ) {
-         instance.markShouldUpdate(context);
-         this.disableOrValidate(context, instance);
-         this.prepareCSS(context, instance);
-      }
-
-      if (!context.validation)
-         context.validation = {
-            errors: [],
-         };
-
-      if (data.error) {
-         context.validation.errors.push({
-            fieldId: data.id,
-            message: data.error,
-            visited: state.visited,
-            type: "error",
-         });
-      }
-
-      context.push("lastFieldId", data.id);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("lastFieldId");
-   }
-
-   isEmpty(data) {
-      return data.value == null || data.value === this.emptyValue;
-   }
-
-   validateRequired(context, instance) {
-      let { data } = instance;
-      if (this.isEmpty(data)) return this.requiredText;
-   }
-
-   getValidationValue(data) {
-      return data.value;
-   }
-
-   validate(context, instance) {
-      let { data, state } = instance;
-      state = state || {};
-
-      let empty = this.isEmpty(data);
-
-      if (!data.error) {
-         if (state.inputError) data.error = state.inputError;
-         else if (state.validating && !empty) data.error = this.validatingText;
-         else if (
-            state.validationError &&
-            data.validationValue === state.lastValidatedValue &&
-            shallowEquals(data.validationParams, state.lastValidationParams)
-         )
-            data.error = state.validationError;
-         else if (data.required) data.error = this.validateRequired(context, instance);
-      }
-
-      if (
-         !empty &&
-         !state.validating &&
-         !data.error &&
-         this.onValidate &&
-         (!state.previouslyValidated ||
-            data.validationValue != state.lastValidatedValue ||
-            data.validationParams != state.lastValidationParams)
-      ) {
-         let result = instance.invoke("onValidate", data.validationValue, instance, data.validationParams);
-         if (isPromise(result)) {
-            data.error = this.validatingText;
-            instance.setState({
-               validating: true,
-               lastValidatedValue: data.validationValue,
-               previouslyValidated: true,
-               lastValidationParams: data.validationParams,
-            });
-            result
-               .then((r) => {
-                  let { data, state } = instance;
-                  let error =
-                     data.validationValue == state.lastValidatedValue &&
-                     shallowEquals(data.validationParams, state.lastValidationParams)
-                        ? r
-                        : this.validatingText; //parameters changed, this will be revalidated
-
-                  instance.setState({
-                     validating: false,
-                     validationError: error,
-                  });
-               })
-               .catch((e) => {
-                  instance.setState({
-                     validating: false,
-                     validationError: this.validationExceptionText,
-                  });
-                  if (this.onValidationException) instance.invoke("onValidationException", e, instance);
-                  else {
-                     Console.warn("Unhandled validation exception:", e);
-                  }
-               });
-         } else {
-            data.error = result;
-         }
-      }
-   }
-
-   renderLabel(context, instance, key) {
-      if (instance.components.label) return getContent(instance.components.label.vdom);
-   }
-
-   renderInput(context, instance, key) {
-      throw new Error("Not implemented.");
-   }
-
-   renderHelp(context, instance, key) {
-      if (instance.components.help) return getContent(instance.components.help.render(context, key));
-   }
-
-   renderIcon(context, instance, key) {
-      if (instance.components.icon) return getContent(instance.components.icon.render(context, key));
-   }
-
-   formatValue(context, { data }) {
-      return data.text || data.value;
-   }
-
-   renderValue(context, instance, key) {
-      let text = this.formatValue(context, instance);
-      if (text) {
-         return (
-            <span
-               key={key}
-               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            >
-               {text}
-            </span>
-         );
-      }
-   }
-
-   renderContent(context, instance, key) {
-      let content = this.renderValue(...arguments) || this.renderEmptyText(...arguments);
-      return this.renderWrap(context, instance, key, content);
-   }
-
-   renderWrap(context, instance, key, content) {
-      let { data } = instance;
-      let interactive = !data.viewMode && !data.disabled;
-      return (
-         <div
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            onMouseDown={interactive ? stopPropagation : null}
-            onTouchStart={interactive ? stopPropagation : null}
-         >
-            {content}
-            {this.labelPlacement && this.renderLabel(context, instance, "label")}
-         </div>
-      );
-   }
-
-   renderEmptyText(context, { data }, key) {
-      return (
-         <span key={key} className={this.CSS.element(this.baseClass, "empty-text")}>
-            {data.emptyText || <span>&nbsp;</span>}
-         </span>
-      );
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      let content = !data.viewMode
-         ? this.renderInput(context, instance, key)
-         : this.renderContent(context, instance, key);
-
-      return {
-         label: !this.labelPlacement && this.renderLabel(context, instance, key),
-         content: content,
-         helpSpacer: this.helpSpacer && instance.components.help ? " " : null,
-         help: !this.helpPlacement && this.renderHelp(context, instance, key),
-      };
-   }
-
-   handleKeyDown(e, instance) {
-      if (this.onKeyDown && instance.invoke("onKeyDown", e, instance) === false) return false;
-
-      if (instance.data.tabOnEnterKey && e.keyCode === 13) {
-         let target = e.target;
-         setTimeout(() => {
-            if (!instance.state.inputError) FocusManager.focusNext(target);
-         }, 10);
-      }
-   }
-}
-
-Field.prototype.validationMode = "tooltip";
-Field.prototype.suppressErrorsUntilVisited = false;
-Field.prototype.requiredText = "This field is required.";
-Field.prototype.autoFocus = false;
-Field.prototype.asterisk = false;
-Field.prototype.validatingText = "Validation is in progress...";
-Field.prototype.validationExceptionText = "Something went wrong during input validation. Check log for more details.";
-Field.prototype.helpSpacer = true;
-Field.prototype.trackFocus = false; //add cxs-focus on parent element
-Field.prototype.labelPlacement = false;
-Field.prototype.helpPlacement = false;
-Field.prototype.emptyValue = null;
-Field.prototype.styled = true;
-
-//These flags are inheritable and should not be set to false
-//Field.prototype.visited = null;
-//Field.prototype.disabled = null;
-//Field.prototype.readOnly = null;
-//Field.prototype.viewMode = null;
-
-Localization.registerPrototype("cx/widgets/Field", Field);
-
-export function getFieldTooltip(instance) {
-   let { widget, data, state } = instance;
-
-   if (widget.errorTooltip && data.error && (!state || state.visited || !widget.suppressErrorsUntilVisited))
-      return [
-         instance,
-         widget.errorTooltip,
-         {
-            data: {
-               $error: data.error,
-            },
-         },
-      ];
-   return [instance, widget.tooltip];
-}
diff --git a/packages/cx/src/widgets/form/Field.scss b/packages/cx/src/widgets/form/Field.scss
index aca29ab28..10e7d8667 100644
--- a/packages/cx/src/widgets/form/Field.scss
+++ b/packages/cx/src/widgets/form/Field.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cxb-field($besm, $state-style-map, $input: true, $box: false, $width: null) {
    position: relative;
    display: inline-block;
@@ -37,7 +39,7 @@
       height: cx-get-state-rule($state-style-map, default, "height");
    }
 
-   $state: map-get($besm, state);
+   $state: map.get($besm, state);
 
    &.#{$state}view-mode {
       line-height: $line-height;
@@ -49,7 +51,7 @@
 }
 
 @mixin cxe-field-input($besm, $state-style-map, $overrides: null, $placeholder: null, $width: 100%, $input: true) {
-   $state: map-get($besm, state);
+   $state: map.get($besm, state);
 
    $styles: cx-deep-map-merge($state-style-map, $overrides);
 
diff --git a/packages/cx/src/widgets/form/Field.tsx b/packages/cx/src/widgets/form/Field.tsx
new file mode 100644
index 000000000..6f8a98b3a
--- /dev/null
+++ b/packages/cx/src/widgets/form/Field.tsx
@@ -0,0 +1,608 @@
+/** @jsxImportSource react */
+import { TooltipConfig, TooltipOptions, TooltipParentInstance } from "../overlay/tooltip-ops";
+import { isSelector } from "../../data/isSelector";
+import { FocusManager } from "../../ui/FocusManager";
+import { Instance, PartialInstance } from "../../ui/Instance";
+import { Localization } from "../../ui/Localization";
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { getContent, WidgetStyleConfig } from "../../ui/Widget";
+import { coalesce } from "../../util/coalesce";
+import { Console } from "../../util/Console";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { isPromise } from "../../util/isPromise";
+import { isUndefined } from "../../util/isUndefined";
+import { parseStyle } from "../../util/parseStyle";
+import { shallowEquals } from "../../util/shallowEquals";
+import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
+import { FieldIcon } from "./FieldIcon";
+import { HelpText } from "./HelpText";
+import { Label } from "./Label";
+import { ValidationError } from "./ValidationError";
+import { BooleanProp, ClassProp, Config, Prop, StringProp, StructuredProp, StyleProp } from "../../ui/Prop";
+import type { TooltipInstance } from "../overlay";
+import type { FormRenderingContext } from "./ValidationGroup";
+
+export interface FieldConfig extends PureContainerConfig, WidgetStyleConfig {
+   /** Field label. For advanced use cases. */
+   label?: StringProp | Config;
+
+   /** Set to `material` to use custom label placement instruction. Used in Material theme to implement animated labels. */
+   labelPlacement?: "material";
+
+   /** Set to `material` to use custom help placement instruction. Used in Material theme to implement absolutely positioned validation messages. */
+   helpPlacement?: "material";
+
+   /** Either `view` or `edit` (default). In `view` mode, the field is displayed as plain text. */
+   mode?: Prop<"view" | "edit">;
+
+   /** Set to `true` to switch to widget view mode. Same as `mode="view"`. Default is false. */
+   viewMode?: BooleanProp;
+
+   id?: Prop<string | number>;
+
+   /** Used for validation. If error evaluates to non-null, the field is marked in red. */
+   error?: StringProp;
+
+   /** Style object applied to the input element. Used for setting visual elements, such as borders and backgrounds. */
+   inputStyle?: StyleProp;
+
+   /** Additional CSS class applied to the input element. Used for setting visual elements, such as borders and backgrounds. */
+   inputClass?: ClassProp;
+
+   /** Additional attributes that should be rendered on the input element. E.g. inputAttrs={{ autoComplete: "off" }}. */
+   inputAttrs?: Config;
+
+   /** Text to be rendered in view mode when the field is empty. */
+   emptyText?: StringProp;
+
+   /** Set to `true` to make error indicators visible in pristine state. By default, validation errors are not shown until the user visits the field. */
+   visited?: BooleanProp;
+
+   /** Set to `true` to automatically focus the field, after it renders for the first time. */
+   autoFocus?: BooleanProp;
+
+   /** Defines how to present validation errors. Default mode is `tooltip`. Other options are `help` and `help-block`. */
+   validationMode?: "tooltip" | "help" | "help-block";
+
+   /** Defaults to `false`. Set to `true` to disable the field. */
+   disabled?: BooleanProp;
+
+   /** Defaults to `false`. Used to make the field required. */
+   required?: BooleanProp;
+
+   /** Used to indicate that required fields should not be marked as invalid before the user visits them. */
+   suppressErrorsUntilVisited?: boolean;
+
+   /** Error message used to indicate that field is required. */
+   requiredText?: string;
+
+   /** Append asterisk to the label to indicate a required field. */
+   asterisk?: BooleanProp;
+
+   /** Text displayed to the user to indicate that server-side validation is in progress. */
+   validatingText?: string;
+
+   /** Text displayed to the user to indicate that server-side validation has thrown an exception. */
+   validationExceptionText?: string;
+
+   /** Configuration of the tooltip used to indicate validation errors. */
+   errorTooltip?: Config;
+
+   /** Tooltip configuration. */
+   tooltip?: StringProp | StructuredProp;
+
+   /** Indicates that `help` should be separated from the input with a whitespace. Default is `true`. */
+   helpSpacer?: boolean;
+
+   /** If set to `true` top level element will get additional CSS class indicating that input is focused. Default is `false`. */
+   trackFocus?: boolean;
+
+   /** Custom tab index */
+   tabIndex?: StringProp;
+
+   /** Additional content to be displayed next to the field. */
+   help?: string | Config;
+
+   /** Validation parameters to be passed to the validation function. */
+   validationParams?: Config;
+
+   onValidationException?: string | ((error: unknown, instance: FieldInstance) => void);
+
+   /** Value to be set in the store if the field is empty. Default value is null. */
+   emptyValue?: unknown;
+
+   /** Additional CSS style to be passed to the label object. */
+   labelStyle?: StyleProp;
+
+   /** Additional CSS class to be passed to the label object. */
+   labelClass?: ClassProp;
+}
+
+export class FieldInstance<F extends Field<any, any> = Field<any, any>>
+   extends Instance<F>
+   implements TooltipParentInstance
+{
+   declare state: Record<string, any>;
+   declare parentDisabled?: boolean;
+   declare parentReadOnly?: boolean;
+   declare parentViewMode?: boolean | string;
+   declare parentTabOnEnterKey?: boolean;
+   declare parentVisited?: boolean;
+   declare tooltips: { [key: string]: TooltipInstance };
+}
+
+export class Field<
+   Config extends FieldConfig = FieldConfig,
+   InstanceType extends FieldInstance<any> = FieldInstance<any>,
+> extends PureContainerBase<Config, InstanceType> {
+   declare public inputStyle?: Record<string, unknown> | string;
+   declare public validationMode?: string;
+   declare public errorTooltip?: Record<string, unknown>;
+   declare public tooltip?: TooltipConfig;
+   declare public help?: Record<string, unknown> | string;
+   declare public label?: Record<string, unknown> | string;
+   declare public mod?: Record<string, unknown>;
+   declare public disabled?: boolean;
+   declare public required?: boolean;
+   declare public asterisk?: boolean;
+   declare public labelStyle?: Record<string, unknown> | string;
+   declare public labelClass?: string;
+   declare public icon?: null | string;
+   declare public visited?: boolean;
+   declare public labelPlacement?: string | boolean;
+   declare public helpPlacement?: string | boolean;
+   declare public emptyValue?: unknown;
+   declare public requiredText?: string;
+   declare public validatingText?: string;
+   declare public onValidate?:
+      | string
+      | ((value: unknown, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+   declare public validationExceptionText?: string;
+   declare public onValidationException?: string | ((error: unknown, instance: Instance) => void);
+   declare public onKeyDown?: string | ((e: React.KeyboardEvent, instance: Instance) => boolean | void);
+   declare public suppressErrorsUntilVisited?: boolean;
+   declare public autoFocus?: boolean;
+   declare public helpSpacer?: boolean;
+   declare public trackFocus?: boolean;
+   declare public baseClass: string;
+
+   public declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            label: undefined,
+            labelWidth: undefined,
+            mode: undefined,
+            viewMode: undefined,
+            id: undefined,
+            error: undefined,
+            inputStyle: { structured: true },
+            inputClass: { structured: true },
+            inputAttrs: { structured: true },
+            emptyText: undefined,
+            visited: undefined,
+            autoFocus: undefined,
+            tabOnEnterKey: undefined,
+            tabIndex: undefined,
+            validationParams: { structured: true },
+         },
+         ...args,
+      );
+   }
+
+   public init(): void {
+      this.inputStyle = parseStyle(this.inputStyle);
+      super.init();
+   }
+
+   public initComponents(_context: RenderingContext, instance: Instance): void {
+      if (this.validationMode == "tooltip" && isUndefined(this.errorTooltip)) {
+         this.errorTooltip = {
+            text: { bind: "$error" },
+            mod: "error",
+            ...(this.errorTooltip || {}),
+         };
+      }
+
+      if (isUndefined(this.help)) {
+         switch (this.validationMode) {
+            case "help":
+            case "help-inline":
+               this.help = ValidationError as any;
+               break;
+
+            case "help-block":
+               this.help = {
+                  type: ValidationError as any,
+                  mod: "block",
+               };
+               break;
+         }
+      }
+
+      if (this.help != null) {
+         let helpConfig: any = {};
+
+         if ((this.help as any).isComponentType) helpConfig = this.help;
+         else if (isSelector(this.help)) helpConfig.text = this.help;
+         else Object.assign(helpConfig, this.help);
+
+         this.help = HelpText.create(helpConfig) as any;
+      }
+
+      if (this.label != null) {
+         let labelConfig: any = {
+            mod: this.mod,
+            disabled: this.disabled,
+            required: this.required,
+            asterisk: this.asterisk,
+            style: this.labelStyle,
+            class: this.labelClass,
+         };
+
+         if ((this.label as any).isComponentType) labelConfig = this.label;
+         else if (isSelector(this.label)) labelConfig.text = this.label;
+         else Object.assign(labelConfig, this.label);
+
+         this.label = Label.create(labelConfig) as any;
+      }
+
+      if (this.icon != null) {
+         let iconConfig: any = {
+            className: this.CSS.element(this.baseClass, "icon"),
+         };
+         if (isSelector(this.icon)) iconConfig.name = this.icon;
+         else Object.assign(iconConfig, this.icon);
+
+         this.icon = FieldIcon.create(iconConfig) as any;
+      }
+
+      super.initComponents({
+         label: this.label,
+         help: this.help,
+         icon: this.icon,
+      });
+   }
+
+   public initState(_context: RenderingContext, instance: InstanceType): void {
+      instance.state = {
+         inputError: false,
+         visited: this.visited === true,
+      };
+   }
+
+   public prepareData(context: FormRenderingContext, instance: InstanceType, ...args: Record<string, unknown>[]): void {
+      let { data, state } = instance;
+      if (!data.id) data.id = "fld-" + instance.id;
+
+      data._disabled = data.disabled;
+      data._readOnly = data.readOnly;
+      data._viewMode = data.mode === "view" || data.viewMode;
+      data._tabOnEnterKey = data.tabOnEnterKey;
+      data.validationValue = this.getValidationValue(data);
+      instance.parentDisabled = context.parentDisabled;
+      instance.parentReadOnly = context.parentReadOnly;
+      instance.parentViewMode = context.parentViewMode;
+      instance.parentTabOnEnterKey = context.parentTabOnEnterKey;
+      instance.parentVisited = context.parentVisited;
+
+      if (typeof data.enabled !== "undefined") data._disabled = !data.enabled;
+
+      this.disableOrValidate(context, instance);
+
+      data.inputStyle = parseStyle(data.inputStyle);
+
+      if (this.labelPlacement && this.label) data.mod = [data.mod, "label-placement-" + this.labelPlacement];
+
+      if (this.helpPlacement && this.help) data.mod = [data.mod, "help-placement-" + this.helpPlacement];
+
+      data.empty = this.isEmpty(data);
+
+      super.prepareData(context, instance);
+   }
+
+   protected disableOrValidate(context: FormRenderingContext, instance: Instance): void {
+      let { data, state } = instance;
+
+      //if the parent is strict and sets some flag to true, it is not allowed to overrule that flag by field settings
+
+      data.disabled = coalesce(
+         context.parentStrict ? context.parentDisabled : null,
+         data._disabled,
+         context.parentDisabled,
+      );
+      data.readOnly = coalesce(
+         context.parentStrict ? context.parentReadOnly : null,
+         data._readOnly,
+         context.parentReadOnly,
+      );
+      data.viewMode = coalesce(
+         context.parentStrict ? context.parentViewMode : null,
+         data._viewMode,
+         context.parentViewMode,
+      );
+      data.tabOnEnterKey = coalesce(
+         context.parentStrict ? context.parentTabOnEnterKey : null,
+         data._tabOnEnterKey,
+         context.parentTabOnEnterKey,
+      );
+      data.visited = coalesce(context.parentStrict ? context.parentVisited : null, data.visited, context.parentVisited);
+
+      if (!data.error && !data.disabled && !data.viewMode) this.validate(context, instance);
+
+      if (data.visited && !state?.visited) {
+         //feels hacky but it should be ok since we're in the middle of a new render cycle
+         state!.visited = true;
+      }
+
+      data.stateMods = {
+         ...data.stateMods,
+         disabled: data.disabled,
+         "edit-mode": !data.viewMode,
+         "view-mode": data.viewMode,
+      };
+   }
+
+   explore(context: FormRenderingContext, instance: InstanceType): void {
+      let { data, state } = instance;
+
+      instance.parentDisabled = context.parentDisabled;
+      instance.parentReadOnly = context.parentReadOnly;
+      instance.parentViewMode = context.parentViewMode;
+      instance.parentTabOnEnterKey = context.parentTabOnEnterKey;
+      instance.parentVisited = context.parentVisited;
+
+      if (
+         instance.cache("parentDisabled", context.parentDisabled) ||
+         instance.cache("parentReadOnly", context.parentReadOnly) ||
+         instance.cache("parentViewMode", context.parentViewMode) ||
+         instance.cache("parentTabOnEnterKey", context.parentTabOnEnterKey) ||
+         instance.cache("parentVisited", context.parentVisited)
+      ) {
+         instance.markShouldUpdate(context);
+         this.disableOrValidate(context, instance);
+         this.prepareCSS(context, instance);
+      }
+
+      if (!context.validation)
+         context.validation = {
+            errors: [],
+         };
+
+      if (data.error) {
+         context.validation.errors.push({
+            fieldId: data.id,
+            message: data.error,
+            visited: state?.visited,
+            type: "error",
+         });
+      }
+
+      context.push("lastFieldId", data.id);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: FormRenderingContext, instance: Instance): void {
+      context.pop("lastFieldId");
+   }
+
+   isEmpty(data: Record<string, unknown>): boolean {
+      return data.value == null || data.value === this.emptyValue;
+   }
+
+   validateRequired(context: FormRenderingContext, instance: Instance): string | undefined {
+      let { data } = instance;
+      if (this.isEmpty(data)) return this.requiredText;
+   }
+
+   getValidationValue(data: Record<string, unknown>): unknown {
+      return data.value;
+   }
+
+   validate(context: FormRenderingContext, instance: Instance): void {
+      let { data } = instance;
+      let state = instance.state || {};
+
+      let empty = this.isEmpty(data);
+
+      if (!data.error) {
+         if (state.inputError) data.error = state.inputError;
+         else if (state.validating && !empty) data.error = this.validatingText;
+         else if (
+            state.validationError &&
+            data.validationValue === state.lastValidatedValue &&
+            shallowEquals(data.validationParams, state.lastValidationParams)
+         )
+            data.error = state.validationError;
+         else if (data.required) data.error = this.validateRequired(context, instance);
+      }
+
+      if (
+         !empty &&
+         !state.validating &&
+         !data.error &&
+         this.onValidate &&
+         (!state.previouslyValidated ||
+            data.validationValue != state.lastValidatedValue ||
+            data.validationParams != state.lastValidationParams)
+      ) {
+         let result = instance.invoke("onValidate", data.validationValue, instance, data.validationParams);
+         if (isPromise(result)) {
+            data.error = this.validatingText;
+            instance.setState({
+               validating: true,
+               lastValidatedValue: data.validationValue,
+               previouslyValidated: true,
+               lastValidationParams: data.validationParams,
+            });
+            result
+               .then((r) => {
+                  let { data, state } = instance;
+                  let error =
+                     data.validationValue == state?.lastValidatedValue &&
+                     shallowEquals(data.validationParams, state?.lastValidationParams)
+                        ? r
+                        : this.validatingText; //parameters changed, this will be revalidated
+
+                  instance.setState({
+                     validating: false,
+                     validationError: error,
+                  });
+               })
+               .catch((e) => {
+                  instance.setState({
+                     validating: false,
+                     validationError: this.validationExceptionText,
+                  });
+                  if (this.onValidationException) instance.invoke("onValidationException", e, instance);
+                  else {
+                     Console.warn("Unhandled validation exception:", e);
+                  }
+               });
+         } else {
+            data.error = result;
+         }
+      }
+   }
+
+   renderLabel(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      if (instance.components?.label) return getContent(instance.components.label.vdom);
+   }
+
+   renderInput(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      throw new Error("Not implemented.");
+   }
+
+   renderHelp(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      if (instance.components?.help) return getContent(instance.components.help.render(context));
+   }
+
+   renderIcon(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      if (instance.components?.icon) return getContent(instance.components.icon.render(context));
+   }
+
+   formatValue(context: RenderingContext, { data }: Instance): string | React.ReactNode {
+      return data.text || data.value;
+   }
+
+   renderValue(context: RenderingContext, instance: FieldInstance, key?: string | number): React.ReactNode {
+      let text = this.formatValue(context, instance as Instance);
+      if (text) {
+         return (
+            <span
+               key={key}
+               onMouseMove={(e: any) => {
+                  const tooltip = getFieldTooltip(instance);
+                  if (tooltip) (tooltipMouseMove as any)(e, tooltip, null, null);
+               }}
+               onMouseLeave={(e: any) => {
+                  const tooltip = getFieldTooltip(instance);
+                  if (tooltip) (tooltipMouseLeave as any)(e, tooltip, null, null);
+               }}
+            >
+               {text}
+            </span>
+         );
+      }
+   }
+
+   protected renderContent(context: RenderingContext, instance: FieldInstance, key: string): React.ReactNode {
+      let content = this.renderValue(context, instance, key) || this.renderEmptyText(context, instance, key);
+      return this.renderWrap(context, instance, key, content);
+   }
+
+   protected renderWrap(
+      context: RenderingContext,
+      instance: Instance,
+      key: string,
+      content: React.ReactNode,
+   ): React.ReactNode {
+      let { data } = instance;
+      let interactive = !data.viewMode && !data.disabled;
+      return (
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            onMouseDown={interactive ? stopPropagation : undefined}
+            onTouchStart={interactive ? stopPropagation : undefined}
+         >
+            {content}
+            {this.labelPlacement && this.renderLabel(context, instance, "label")}
+         </div>
+      );
+   }
+
+   protected renderEmptyText(_context: RenderingContext, { data }: Instance, key: string): React.ReactNode {
+      return (
+         <span key={key} className={this.CSS.element(this.baseClass, "empty-text")}>
+            {data.emptyText || <span>&nbsp;</span>}
+         </span>
+      );
+   }
+
+   public render(context: RenderingContext, instance: InstanceType, key: string): Record<string, React.ReactNode> {
+      let { data } = instance;
+      let content = !data.viewMode
+         ? this.renderInput(context, instance, key)
+         : this.renderContent(context, instance, key);
+
+      return {
+         label: !this.labelPlacement && this.renderLabel(context, instance, key),
+         content: content,
+         helpSpacer: this.helpSpacer && instance.components?.help ? " " : undefined,
+         help: !this.helpPlacement && this.renderHelp(context, instance, key),
+      };
+   }
+
+   public handleKeyDown(e: React.KeyboardEvent, instance: Instance): boolean | void {
+      if (this.onKeyDown && instance.invoke("onKeyDown", e, instance) === false) return false;
+
+      if (instance.data.tabOnEnterKey && e.keyCode === 13) {
+         let target = e.target;
+         setTimeout(() => {
+            if (!instance.state?.inputError) (FocusManager as any).focusNext(target);
+         }, 10);
+      }
+   }
+}
+
+Field.prototype.validationMode = "tooltip";
+Field.prototype.suppressErrorsUntilVisited = false;
+Field.prototype.requiredText = "This field is required.";
+Field.prototype.autoFocus = false;
+Field.prototype.asterisk = false;
+Field.prototype.validatingText = "Validation is in progress...";
+Field.prototype.validationExceptionText = "Something went wrong during input validation. Check log for more details.";
+Field.prototype.helpSpacer = true;
+Field.prototype.trackFocus = false; //add cxs-focus on parent element
+Field.prototype.labelPlacement = false;
+Field.prototype.helpPlacement = false;
+Field.prototype.emptyValue = null;
+Field.prototype.styled = true;
+
+//These flags are inheritable and should not be set to false
+//Field.prototype.visited = null;
+//Field.prototype.disabled = null;
+//Field.prototype.readOnly = null;
+//Field.prototype.viewMode = null;
+
+Localization.registerPrototype("cx/widgets/Field", Field);
+
+export function getFieldTooltip(
+   instance: FieldInstance<any>,
+): [FieldInstance<any>, TooltipConfig, TooltipOptions | undefined] {
+   let { widget, data, state } = instance;
+
+   if (widget.errorTooltip && data.error && (!state || state.visited || !widget.suppressErrorsUntilVisited))
+      return [
+         instance,
+         widget.errorTooltip,
+         {
+            data: {
+               $error: data.error,
+            },
+         },
+      ];
+   return [instance, widget.tooltip!, undefined];
+}
diff --git a/packages/cx/src/widgets/form/FieldGroup.d.ts b/packages/cx/src/widgets/form/FieldGroup.d.ts
deleted file mode 100644
index 8e43bb4d1..000000000
--- a/packages/cx/src/widgets/form/FieldGroup.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as Cx from '../../core';
-import { ValidationGroupProps } from './ValidationGroup';
-
-export interface FieldGroupProps extends ValidationGroupProps {}
-
-export class FieldGroup extends Cx.Widget<FieldGroupProps> {}
diff --git a/packages/cx/src/widgets/form/FieldGroup.js b/packages/cx/src/widgets/form/FieldGroup.js
deleted file mode 100644
index 54217676a..000000000
--- a/packages/cx/src/widgets/form/FieldGroup.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {Widget} from '../../ui/Widget';
-import {ValidationGroup} from './ValidationGroup';
-
-export class FieldGroup extends ValidationGroup {}
-
-Widget.alias('field-group', FieldGroup);
\ No newline at end of file
diff --git a/packages/cx/src/widgets/form/FieldGroup.ts b/packages/cx/src/widgets/form/FieldGroup.ts
new file mode 100644
index 000000000..2dfd76244
--- /dev/null
+++ b/packages/cx/src/widgets/form/FieldGroup.ts
@@ -0,0 +1,10 @@
+import { Widget } from "../../ui/Widget";
+import { ValidationGroup, ValidationGroupConfig } from "./ValidationGroup";
+
+export interface FieldGroupConfig extends ValidationGroupConfig {}
+
+export class FieldGroup<
+   TConfig extends FieldGroupConfig = FieldGroupConfig
+> extends ValidationGroup<TConfig> {}
+
+Widget.alias("field-group", FieldGroup);
diff --git a/packages/cx/src/widgets/form/FieldIcon.js b/packages/cx/src/widgets/form/FieldIcon.js
deleted file mode 100644
index 50f3d5f5f..000000000
--- a/packages/cx/src/widgets/form/FieldIcon.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Widget } from "../../ui/Widget";
-import { Icon } from "../Icon";
-import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
-
-export class FieldIcon extends Widget {
-   declareData(...args) {
-      super.declareData(...args, {
-         name: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      if (!data.name) return null;
-
-      let onClick, onMouseMove, onMouseLeave;
-
-      if (this.onClick)
-         onClick = (e) => {
-            instance.invoke("onClick", e, instance);
-         };
-
-      if (this.tooltip) {
-         onMouseLeave = (e) => {
-            tooltipMouseLeave(e, instance, this.tooltip);
-         };
-         onMouseMove = (e) => {
-            tooltipMouseMove(e, instance, this.tooltip);
-         };
-      }
-
-      return Icon.render(data.name, {
-         className: data.classNames,
-         style: data.style,
-         onClick,
-         onMouseMove,
-         onMouseLeave,
-      });
-   }
-}
-
-FieldIcon.prototype.styled = true;
diff --git a/packages/cx/src/widgets/form/FieldIcon.ts b/packages/cx/src/widgets/form/FieldIcon.ts
new file mode 100644
index 000000000..0aef406f4
--- /dev/null
+++ b/packages/cx/src/widgets/form/FieldIcon.ts
@@ -0,0 +1,61 @@
+import { Widget, WidgetConfig } from "../../ui/Widget";
+import { Icon } from "../Icon";
+import { tooltipMouseLeave, tooltipMouseMove, TooltipConfig, TooltipParentInstance } from "../overlay/tooltip-ops";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+import type { TooltipInstance } from "../overlay/Tooltip";
+import { StringProp } from "../../ui/Prop";
+
+export interface FieldIconConfig extends WidgetConfig {
+   onClick?: (e: MouseEvent, instance: FieldIconInstance) => void;
+   tooltip?: TooltipConfig;
+   name: StringProp;
+}
+
+export class FieldIconInstance extends Instance<FieldIcon> implements TooltipParentInstance {
+   declare tooltips: { [key: string]: TooltipInstance };
+}
+
+export class FieldIcon extends Widget {
+   declare onClick?: (e: MouseEvent, instance: FieldIconInstance) => void;
+   declare tooltip?: TooltipConfig;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         name: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: FieldIconInstance, key: string): React.ReactNode {
+      let { data } = instance;
+      if (!data.name) return null;
+
+      let onClick: ((e: React.MouseEvent) => void) | undefined;
+      let onMouseMove: ((e: React.MouseEvent) => void) | undefined;
+      let onMouseLeave: ((e: React.MouseEvent) => void) | undefined;
+
+      if (this.onClick)
+         onClick = (e: React.MouseEvent) => {
+            instance.invoke("onClick", e, instance);
+         };
+
+      if (this.tooltip) {
+         onMouseLeave = (e: React.MouseEvent) => {
+            tooltipMouseLeave(e, instance, this.tooltip!, {});
+         };
+         onMouseMove = (e: React.MouseEvent) => {
+            tooltipMouseMove(e, instance, this.tooltip!, {});
+         };
+      }
+
+      return Icon.render(data.name, {
+         className: data.classNames,
+         style: data.style,
+         onClick,
+         onMouseMove,
+         onMouseLeave,
+      });
+   }
+}
+
+FieldIcon.prototype.styled = true;
diff --git a/packages/cx/src/widgets/form/HelpText.d.ts b/packages/cx/src/widgets/form/HelpText.d.ts
deleted file mode 100644
index c73130f80..000000000
--- a/packages/cx/src/widgets/form/HelpText.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as Cx from '../../core';
-import { ValidationGroupProps } from './ValidationGroup';
-
-export interface HelpTextProps extends Cx.HtmlElementProps {
-
-   /** Base CSS class to be applied to the field. Defaults to `helptext`. */
-   baseClass?: string
-}
-
-export class HelpText extends Cx.Widget<HelpTextProps> {}
diff --git a/packages/cx/src/widgets/form/HelpText.js b/packages/cx/src/widgets/form/HelpText.js
deleted file mode 100644
index 7d7ae8cab..000000000
--- a/packages/cx/src/widgets/form/HelpText.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import {HtmlElement} from '../HtmlElement';
-import {Widget} from '../../ui/Widget';
-
-export class HelpText extends HtmlElement {}
-
-HelpText.prototype.tag = 'span';
-HelpText.prototype.baseClass = 'helptext';
-
-Widget.alias('help-text', HelpText);
diff --git a/packages/cx/src/widgets/form/HelpText.scss b/packages/cx/src/widgets/form/HelpText.scss
index e9bf5f26b..e067ad552 100644
--- a/packages/cx/src/widgets/form/HelpText.scss
+++ b/packages/cx/src/widgets/form/HelpText.scss
@@ -1,12 +1,13 @@
+@use "sass:map";
 
 @mixin cx-helptext(
    $name: 'helptext',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       font-size: smaller;
diff --git a/packages/cx/src/widgets/form/HelpText.ts b/packages/cx/src/widgets/form/HelpText.ts
new file mode 100644
index 000000000..0b3d4f425
--- /dev/null
+++ b/packages/cx/src/widgets/form/HelpText.ts
@@ -0,0 +1,15 @@
+import { Widget } from "../../ui/Widget";
+import { HtmlElement, HtmlElementConfig } from "../HtmlElement";
+
+export interface HelpTextConfig extends HtmlElementConfig {}
+
+export class HelpText extends HtmlElement {
+   constructor(config?: HelpTextConfig) {
+      super(config);
+   }
+}
+
+HelpText.prototype.tag = "span";
+HelpText.prototype.baseClass = "helptext";
+
+Widget.alias("help-text", HelpText);
diff --git a/packages/cx/src/widgets/form/Label.d.ts b/packages/cx/src/widgets/form/Label.d.ts
deleted file mode 100644
index f6cd6e5f8..000000000
--- a/packages/cx/src/widgets/form/Label.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as Cx from "../../core";
-
-interface LabelProps extends Cx.HtmlElementProps {
-   /** Used in combination with `asterisk` to indicate required fields. */
-   required?: Cx.BooleanProp;
-
-   /** Set to true to disable the label. */
-   disabled?: Cx.BooleanProp;
-
-   /** Id of the field. */
-   htmlFor?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string;
-
-   /** Set to `true` to add red asterisk for required fields. */
-   asterisk?: Cx.BooleanProp;
-
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string;
-}
-
-export class Label extends Cx.Widget<LabelProps> {}
diff --git a/packages/cx/src/widgets/form/Label.js b/packages/cx/src/widgets/form/Label.js
deleted file mode 100644
index de36984e5..000000000
--- a/packages/cx/src/widgets/form/Label.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { FocusManager } from "../../ui/FocusManager";
-import { isArray } from "../../util/isArray";
-import { coalesce } from "../../util/coalesce";
-
-export class Label extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         required: undefined,
-         disabled: undefined,
-         htmlFor: undefined,
-         asterisk: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         disabled: data.disabled,
-      };
-      data._disabled = data.disabled;
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
-
-      data.disabled = data.stateMods.disabled = coalesce(
-         context.parentStrict ? context.parentDisabled : null,
-         data._disabled,
-         context.parentDisabled
-      );
-
-      data.asterisk = context.parentAsterisk || data.asterisk;
-
-      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
-         instance.markShouldUpdate(context);
-         this.prepareCSS(context, instance);
-      }
-
-      super.explore(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "asterisk":
-         case "required":
-            return false;
-      }
-      return super.isValidHtmlAttribute(attrName);
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-
-      if (data.htmlFor) {
-         props.htmlFor = data.htmlFor;
-
-         if (!props.onClick)
-            props.onClick = () => {
-               //additional focus for LookupFields which are not input based
-               let el = document.getElementById(instance.data.htmlFor);
-               if (el) FocusManager.focusFirst(el);
-            };
-      }
-
-      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
-
-      if (data.required && data.asterisk) {
-         if (!isArray(props.children)) props.children = [props.children];
-         props.children.push(" ");
-         props.children.push(
-            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
-               *
-            </span>
-         );
-      }
-   }
-}
-
-Label.prototype.baseClass = "label";
-Label.prototype.tag = "label";
-Label.prototype.asterisk = false;
diff --git a/packages/cx/src/widgets/form/Label.scss b/packages/cx/src/widgets/form/Label.scss
index dc4a26c8a..80d28d7c4 100644
--- a/packages/cx/src/widgets/form/Label.scss
+++ b/packages/cx/src/widgets/form/Label.scss
@@ -1,13 +1,14 @@
+@use "sass:map";
 
 @mixin cx-label(
    $name: 'label',
    $state-style-map: $cx-label-state-style-map,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}label {
       display: inline-block;
diff --git a/packages/cx/src/widgets/form/Label.tsx b/packages/cx/src/widgets/form/Label.tsx
new file mode 100644
index 000000000..7a71cee1b
--- /dev/null
+++ b/packages/cx/src/widgets/form/Label.tsx
@@ -0,0 +1,117 @@
+/** @jsxImportSource react */
+import { FocusManager } from "../../ui/FocusManager";
+import type { Instance, RenderProps } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+import { coalesce } from "../../util/coalesce";
+import { isArray } from "../../util/isArray";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../HtmlElement";
+import type { FormRenderingContext } from "./ValidationGroup";
+
+export interface LabelConfig extends HtmlElementConfig {
+   /** Used in combination with `asterisk` to indicate required fields. */
+   required?: BooleanProp;
+
+   /** Set to true to disable the label. */
+   disabled?: BooleanProp;
+
+   /** Id of the field. */
+   htmlFor?: StringProp;
+
+   /** Set to `true` to add red asterisk for required fields. */
+   asterisk?: BooleanProp;
+}
+
+export class Label extends HtmlElement {
+   declare required?: BooleanProp;
+   declare disabled?: BooleanProp;
+   declare htmlFor?: StringProp;
+   declare asterisk?: BooleanProp;
+
+   constructor(config?: LabelConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         required: undefined,
+         disabled: undefined,
+         htmlFor: undefined,
+         asterisk: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         disabled: data.disabled,
+      };
+      data._disabled = data.disabled;
+      super.prepareData(context, instance);
+   }
+
+   explore(context: FormRenderingContext, instance: Instance): void {
+      let { data } = instance;
+
+      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
+
+      data.disabled = data.stateMods.disabled = coalesce(
+         context.parentStrict ? context.parentDisabled : null,
+         data._disabled,
+         context.parentDisabled,
+      );
+
+      data.asterisk = context.parentAsterisk || data.asterisk;
+
+      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
+         instance.markShouldUpdate(context);
+         this.prepareCSS(context, instance);
+      }
+
+      super.explore(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName: string): string | false {
+      switch (attrName) {
+         case "asterisk":
+         case "required":
+            return false;
+      }
+      return super.isValidHtmlAttribute(attrName);
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: RenderProps): void {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+
+      if (data.htmlFor) {
+         props.htmlFor = data.htmlFor;
+
+         if (!props.onClick)
+            props.onClick = () => {
+               //additional focus for LookupFields which are not input based
+               let el = document.getElementById(instance.data.htmlFor);
+               if (el) FocusManager.focusFirst(el);
+            };
+      }
+
+      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
+
+      if (data.required && data.asterisk) {
+         if (!isArray(props.children)) props.children = [props.children];
+         const children = props.children as React.ReactNode[];
+         children.push(" ");
+         children.push(
+            <span key="asterisk" className={this.CSS.element(this.baseClass!, "asterisk")}>
+               *
+            </span>,
+         );
+      }
+   }
+}
+
+Label.prototype.baseClass = "label";
+Label.prototype.tag = "label";
+Label.prototype.asterisk = false;
diff --git a/packages/cx/src/widgets/form/LabeledContainer.d.ts b/packages/cx/src/widgets/form/LabeledContainer.d.ts
deleted file mode 100644
index ecce9f374..000000000
--- a/packages/cx/src/widgets/form/LabeledContainer.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as Cx from "../../core";
-import { FieldGroupProps } from "./FieldGroup";
-
-interface LabeledContainerProps extends FieldGroupProps {
-   /** The label. */
-   label?: Cx.StringProp | Cx.Config;
-}
-
-export class LabeledContainer extends Cx.Widget<LabeledContainerProps> {}
diff --git a/packages/cx/src/widgets/form/LabeledContainer.js b/packages/cx/src/widgets/form/LabeledContainer.js
deleted file mode 100644
index ee1f9e663..000000000
--- a/packages/cx/src/widgets/form/LabeledContainer.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import {Widget} from '../../ui/Widget';
-import {FieldGroup} from './FieldGroup';
-import {Label} from './Label';
-import {isSelector} from '../../data/isSelector';
-
-export class LabeledContainer extends FieldGroup
-{
-   declareData() {
-      super.declareData({
-         label: undefined
-      }, ...arguments);
-   }
-
-   init() {
-
-      if (this.label != null) {
-         let labelConfig = {
-            type: Label,
-            disabled: this.disabled,
-            mod: this.mod,
-            asterisk: this.asterisk,
-            required: true
-         };
-
-         if (this.label.isComponentType)
-            labelConfig = this.label;
-         else if (isSelector(this.label))
-            labelConfig.text = this.label;
-         else
-            Object.assign(labelConfig, this.label);
-
-         this.label = Widget.create(labelConfig);
-      }
-
-      super.init();
-   }
-
-   initComponents(context, instance) {
-      return super.initComponents(...arguments, {
-         label: this.label
-      });
-   }
-
-   renderLabel(context, instance, key) {
-      if (instance.components.label)
-         return instance.components.label.render(context, key);
-   }
-
-   render(context, instance, key) {
-      return {
-         label: this.renderLabel(context, instance),
-         content: this.renderChildren(context, instance)
-      }
-   }
-}
-
-LabeledContainer.prototype.styled = true;
-
-Widget.alias('labeled-container', LabeledContainer);
diff --git a/packages/cx/src/widgets/form/LabeledContainer.ts b/packages/cx/src/widgets/form/LabeledContainer.ts
new file mode 100644
index 000000000..1a5b45147
--- /dev/null
+++ b/packages/cx/src/widgets/form/LabeledContainer.ts
@@ -0,0 +1,77 @@
+import { isSelector } from "../../data/isSelector";
+import type { Instance } from "../../ui/Instance";
+import type { CxChild, RenderingContext } from "../../ui/RenderingContext";
+import { Widget } from "../../ui/Widget";
+import { FieldGroup, FieldGroupConfig } from "./FieldGroup";
+import { Label, LabelConfig } from "./Label";
+import { StringProp, Config, BooleanProp, ModProp } from "../../ui/Prop";
+import { Create } from "../../util/Component";
+
+export interface LabeledContainerConfig extends FieldGroupConfig {
+   /** The label. */
+   label?: StringProp | Create<typeof Widget> | LabelConfig;
+
+   /** Set to true to disable the field. */
+   disabled?: BooleanProp;
+
+   /** CSS modifier classes. */
+   mod?: ModProp;
+
+   /** Set to true to display an asterisk next to the label. */
+   asterisk?: BooleanProp;
+}
+
+export class LabeledContainer extends FieldGroup<LabeledContainerConfig> {
+   declare label?: string | Record<string, unknown> | Label | Widget; // Can be string, selector, Label widget config, or Widget
+   declare disabled?: boolean;
+   declare mod?: Record<string, unknown>;
+   declare asterisk?: boolean;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         label: undefined,
+      });
+   }
+
+   init(): void {
+      if (this.label != null) {
+         let labelConfig: any = {
+            type: Label,
+            disabled: this.disabled,
+            mod: this.mod,
+            asterisk: this.asterisk,
+            required: true,
+         };
+
+         if ((this.label as any).isComponentType) labelConfig = this.label as Record<string, unknown>;
+         else if (isSelector(this.label)) labelConfig.text = this.label;
+         else Object.assign(labelConfig, this.label);
+
+         this.label = Widget.create(labelConfig);
+      }
+
+      super.init();
+   }
+
+   initComponents(context: RenderingContext, instance: Instance, ...args: Record<string, unknown>[]): void {
+      return super.initComponents(context, instance, ...args, {
+         label: this.label,
+      });
+   }
+
+   renderLabel(context: RenderingContext, instance: Instance, key?: string): CxChild {
+      if (instance.components && instance.components.label) return instance.components.label.render(context);
+      return null;
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): { label: CxChild; content: CxChild } {
+      return {
+         label: this.renderLabel(context, instance),
+         content: this.renderChildren(context, instance),
+      };
+   }
+}
+
+LabeledContainer.prototype.styled = true;
+
+Widget.alias("labeled-container", LabeledContainer);
diff --git a/packages/cx/src/widgets/form/LookupField.d.ts b/packages/cx/src/widgets/form/LookupField.d.ts
deleted file mode 100644
index b4b2e2ad3..000000000
--- a/packages/cx/src/widgets/form/LookupField.d.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { Instance } from "./../../ui/Instance";
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-export interface LookupBinding {
-   local: string;
-   remote: string;
-   key?: boolean;
-}
-
-interface LookupFieldProps<TOption = unknown, TRecord = unknown> extends FieldProps {
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: Cx.BooleanProp;
-
-   /** Selected value. Used only if `multiple` is set to `false`. */
-   value?: Cx.Prop<number | string>;
-
-   /** A list of selected ids. Used only if `multiple` is set to `true`. */
-   values?: Cx.Prop<(number | string)[]>;
-
-   /** A list of selected records. Used only if `multiple` is set to `true`. */
-   records?: Cx.Prop<TRecord[]>;
-
-   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
-   text?: Cx.StringProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** A list of available options. */
-   options?: Cx.Prop<TOption[]>;
-
-   /**
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
-    * No effect if `multiple` is used. Default value is `false`.
-    */
-   hideClear?: boolean;
-
-   /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
-    * No effect if `multiple` is used. Default value is `true`.
-    */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
-   baseClass?: string;
-
-   /* TODO: Check type */
-
-   /** Additional config to be applied to all items */
-   itemsConfig?: any;
-
-   /**
-    * An array of objects describing the mapping of option data to store data.
-    * Each entry must define `local`, `remote` bindings. `key: true` is used to indicate fields that are used in the primary key.
-    */
-   bindings?: LookupBinding[];
-
-   /** A delay in milliseconds between the moment the user stops typing and when tha query is made. Default value is `150`. */
-   queryDelay?: number;
-
-   /** Minimal number of characters required before query is made. */
-   minQueryLength?: number;
-
-   /** Set to `true` to hide the search field. */
-   hideSearchField?: boolean;
-
-   /**
-    * Number of options required to show the search field.
-    * If there are only a few options, there is no need for search. Defaults to `7`.
-    */
-   minOptionsForSearchField?: number;
-
-   /** Text to display while data is being loaded. */
-   loadingText?: string;
-
-   /** Error message displayed to the user if server query throws an exception. */
-   queryErrorText?: string;
-
-   /** Message to be displayed if no entries match the user query. */
-   noResultsText?: string;
-
-   /** Name of the field which holds the id of the option. Default value is `id`. */
-   optionIdField?: string;
-
-   /** Name of the field which holds the display text of the option. Default value is `text`. */
-   optionTextField?: string;
-
-   /**
-    * Available only in `multiple` selection mode and without custom `bindings`.
-    * Name of the field to store id of the selected value. Default value is `id`.
-    */
-   valueIdField?: string;
-
-   /**
-    * Available only in `multiple` selection mode.
-    * Name of the field to store display text of the selected value. Default value is `text`.
-    */
-   valueTextField?: string;
-
-   /**
-    * If `true` `onQuery` will be called only once to fetch all options.
-    * After that options are filtered client-side.
-    */
-   fetchAll?: boolean;
-
-   /**
-    * If this flag is set along with `fetchAll`, fetched options are cached for the lifetime of the widget.
-    * Otherwise, data is fetched whenever the dropdown is shown.
-    */
-   cacheAll?: boolean;
-
-   /** Close the dropdown after selection. Default is `true`. */
-   closeOnSelect?: boolean;
-
-   /** Message to be displayed to the user if the entered search query is too short. */
-   minQueryLengthMessageText?: string;
-
-   /** Name or configuration of the icon to be put on the left side of the input.  */
-   icon?: Cx.StringProp | Cx.Record;
-
-   /** Query function. */
-   onQuery?:
-      | string
-      | ((
-           query: string | { query: string; page: number; pageSize: number },
-           instance: Instance,
-        ) => TOption[] | Promise<TOption[]>);
-
-   /** Set to true to sort dropdown options. */
-   sort?: boolean;
-
-   /** Additional list options, such as grouping configuration, custom sorting, etc. */
-   listOptions?: Cx.Config;
-
-   /** Set to true to show the dropdown immediately after the component has mounted.
-    * This is commonly used for cell editing in grids. */
-   autoOpen?: Cx.BooleanProp;
-
-   /** Set to true to allow enter key events to be propagated. This is useful for submitting forms or closing grid cell editors. */
-   submitOnEnterKey?: Cx.BooleanProp;
-
-   /** Set to true to allow dropdown enter key events to be propagated. This is useful for submitting forms on dropdown enter key selection. */
-   submitOnDropdownEnterKey?: Cx.BooleanProp;
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** Set to `true` to enable loading of additional lookup options when the scroll is reaching the end. */
-   infinite?: boolean;
-
-   /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
-   pageSize?: number;
-
-   /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
-   quickSelectAll?: boolean;
-
-   /** Parameters that affect filtering. */
-   filterParams?: Cx.StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (option: TOption) => boolean;
-
-   /** Used in multiple selection lookups in combination with records, to construct the display text out of multiple fields or when additional formatting is needed. */
-   onGetRecordDisplayText?: (record: TRecord, instance?: Instance) => string;
-
-   /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
-   dropdownOptions?: Cx.Config;
-}
-
-export class LookupField<TOption = unknown, TRecord = unknown> extends Cx.Widget<LookupFieldProps<TOption, TRecord>> {}
diff --git a/packages/cx/src/widgets/form/LookupField.js b/packages/cx/src/widgets/form/LookupField.js
deleted file mode 100644
index de15ebc9d..000000000
--- a/packages/cx/src/widgets/form/LookupField.js
+++ /dev/null
@@ -1,1135 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Cx } from "../../ui/Cx";
-import { Field, getFieldTooltip } from "./Field";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { HtmlElement } from "../HtmlElement";
-import { Binding } from "../../data/Binding";
-import { debug } from "../../util/Debug";
-import { Dropdown } from "../overlay/Dropdown";
-import { FocusManager } from "../../ui/FocusManager";
-import { isFocused } from "../../util/DOM";
-import { isTouchDevice } from "../../util/isTouchDevice";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
-import ClearIcon from "../icons/clear";
-import DropdownIcon from "../icons/drop-down";
-import { getSearchQueryPredicate } from "../../util/getSearchQueryPredicate";
-import { KeyCode } from "../../util/KeyCode";
-import { Localization } from "../../ui/Localization";
-import { StringTemplate } from "../../data/StringTemplate";
-import { Icon } from "../Icon";
-import { isString } from "../../util/isString";
-import { isDefined } from "../../util/isDefined";
-import { isArray } from "../../util/isArray";
-import { isNonEmptyArray } from "../../util/isNonEmptyArray";
-import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
-import { List } from "../List";
-import { Selection } from "../../ui/selection/Selection";
-import { HighlightedSearchText } from "../HighlightedSearchText";
-import { autoFocus } from "../autoFocus";
-import { bind } from "../../ui";
-import { isAccessorChain } from "../../data/createAccessorModelProxy";
-
-export class LookupField extends Field {
-   declareData() {
-      let additionalAttributes = this.multiple
-         ? { values: undefined, records: undefined }
-         : { value: undefined, text: undefined };
-
-      super.declareData(
-         {
-            disabled: undefined,
-            enabled: undefined,
-            placeholder: undefined,
-            required: undefined,
-            options: undefined,
-            icon: undefined,
-            autoOpen: undefined,
-            readOnly: undefined,
-            filterParams: { structured: true },
-         },
-         additionalAttributes,
-         ...arguments,
-      );
-   }
-
-   init() {
-      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
-
-      if (this.alwaysShowClear) this.showClear = true;
-
-      if (!this.bindings) {
-         let b = [];
-         if (this.value) {
-            if (isAccessorChain(this.value)) this.value = bind(this.value);
-            if (this.value.bind)
-               b.push({
-                  key: true,
-                  local: this.value.bind,
-                  remote: `$option.${this.optionIdField}`,
-                  set: this.value.set,
-               });
-         }
-
-         if (this.text) {
-            if (isAccessorChain(this.text)) this.text = bind(this.text);
-            if (this.text.bind)
-               b.push({
-                  local: this.text.bind,
-                  remote: `$option.${this.optionTextField}`,
-                  set: this.text.set,
-               });
-         }
-
-         this.bindings = b;
-      }
-
-      if (this.bindings.length == 0 && this.multiple)
-         this.bindings = [
-            {
-               key: true,
-               local: `$value.${this.valueIdField}`,
-               remote: `$option.${this.optionIdField}`,
-            },
-            {
-               local: `$value.${this.valueTextField}`,
-               remote: `$option.${this.optionTextField}`,
-            },
-         ];
-
-      this.keyBindings = this.bindings.filter((b) => b.key);
-
-      if (!this.items && !this.children)
-         this.items = {
-            $type: HighlightedSearchText,
-            text: { bind: `$option.${this.optionTextField}` },
-            query: { bind: "$query" },
-         };
-
-      this.itemConfig = this.children || this.items;
-
-      delete this.items;
-      delete this.children;
-
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data, store } = instance;
-
-      data.stateMods = {
-         multiple: this.multiple,
-         single: !this.multiple,
-         disabled: data.disabled,
-         readonly: data.readOnly,
-      };
-
-      data.visibleOptions = data.options;
-      if (this.onCreateVisibleOptionsFilter && isArray(data.options)) {
-         let filterPredicate = instance.invoke("onCreateVisibleOptionsFilter", data.filterParams, instance);
-         data.visibleOptions = data.options.filter(filterPredicate);
-      }
-
-      data.selectedKeys = [];
-
-      if (this.multiple) {
-         if (isArray(data.values) && isArray(data.options)) {
-            data.selectedKeys = data.values.map((v) => (this.keyBindings.length == 1 ? [v] : v));
-            let map = {};
-            data.options.filter(($option) => {
-               let optionKey = getOptionKey(this.keyBindings, { $option });
-               for (let i = 0; i < data.selectedKeys.length; i++)
-                  if (areKeysEqual(optionKey, data.selectedKeys[i])) {
-                     map[i] = convertOption(this.bindings, { $option });
-                     break;
-                  }
-            });
-            data.records = [];
-            for (let i = 0; i < data.selectedKeys.length; i++) if (map[i]) data.records.push(map[i]);
-         } else if (isArray(data.records))
-            data.selectedKeys.push(
-               ...data.records.map(($value) => this.keyBindings.map((b) => Binding.get(b.local).value({ $value }))),
-            );
-      } else {
-         let dataViewData = store.getData();
-         data.selectedKeys.push(this.keyBindings.map((b) => Binding.get(b.local).value(dataViewData)));
-         if (!this.text && isArray(data.options)) {
-            let option = data.options.find(($option) =>
-               areKeysEqual(getOptionKey(this.keyBindings, { $option }), data.selectedKeys[0]),
-            );
-            data.text = (option && option[this.optionTextField]) || "";
-         }
-      }
-
-      instance.lastDropdown = context.lastDropdown;
-
-      super.prepareData(context, instance);
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <LookupComponent
-            key={key}
-            multiple={this.multiple}
-            instance={instance}
-            itemConfig={this.itemConfig}
-            bindings={this.bindings}
-            baseClass={this.baseClass}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
-            forceUpdate={context.forceUpdate}
-            icon={this.renderIcon(context, instance, "icon")}
-         />
-      );
-   }
-
-   filterOptions(instance, options, query) {
-      if (!query) return options;
-      let textPredicate = getSearchQueryPredicate(query);
-      return options.filter((o) => isString(o[this.optionTextField]) && textPredicate(o[this.optionTextField]));
-   }
-
-   isEmpty(data) {
-      if (this.multiple) return !isNonEmptyArray(data.values) && !isNonEmptyArray(data.records);
-      return super.isEmpty(data);
-   }
-
-   getValidationValue(data) {
-      if (this.multiple) return data.records ?? data.values;
-      return super.getValidationValue(data);
-   }
-
-   formatValue(context, instance) {
-      if (!this.multiple) return super.formatValue(context, instance);
-
-      let { records, values, options } = instance.data;
-      if (isArray(records)) {
-         let valueTextFormatter =
-            this.onGetRecordDisplayText ?? ((record) => record[this.valueTextField] || record[this.valueIdField]);
-         return records.map((record) => valueTextFormatter(record, instance));
-      }
-
-      if (isArray(values)) {
-         if (isArray(options))
-            return values
-               .map((id) => {
-                  let option = options.find((o) => o[this.optionIdField] == id);
-                  return option ? option[this.valueTextField] : id;
-               })
-               .filter(Boolean)
-               .join(", ");
-
-         return values.join(", ");
-      }
-
-      return null;
-   }
-}
-
-LookupField.prototype.baseClass = "lookupfield";
-//LookupField.prototype.memoize = false;
-LookupField.prototype.multiple = false;
-LookupField.prototype.queryDelay = 150;
-LookupField.prototype.minQueryLength = 0;
-LookupField.prototype.hideSearchField = false;
-LookupField.prototype.minOptionsForSearchField = 7;
-LookupField.prototype.loadingText = "Loading...";
-LookupField.prototype.queryErrorText = "Error occurred while querying for lookup data.";
-LookupField.prototype.noResultsText = "No results found.";
-LookupField.prototype.optionIdField = "id";
-LookupField.prototype.optionTextField = "text";
-LookupField.prototype.valueIdField = "id";
-LookupField.prototype.valueTextField = "text";
-LookupField.prototype.suppressErrorsUntilVisited = true;
-LookupField.prototype.fetchAll = false;
-LookupField.prototype.cacheAll = false;
-LookupField.prototype.showClear = true;
-LookupField.prototype.alwaysShowClear = false;
-LookupField.prototype.closeOnSelect = true;
-LookupField.prototype.minQueryLengthMessageText = "Type in at least {0} character(s).";
-LookupField.prototype.icon = null;
-LookupField.prototype.sort = false;
-LookupField.prototype.listOptions = null;
-LookupField.prototype.autoOpen = false;
-LookupField.prototype.submitOnEnterKey = false;
-LookupField.prototype.submitOnDropdownEnterKey = false;
-LookupField.prototype.pageSize = 100;
-LookupField.prototype.infinite = false;
-LookupField.prototype.quickSelectAll = false;
-LookupField.prototype.onGetRecordDisplayText = null;
-
-Localization.registerPrototype("cx/widgets/LookupField", LookupField);
-
-Widget.alias("lookupfield", LookupField);
-
-function getOptionKey(bindings, data) {
-   return bindings.filter((a) => a.key).map((b) => Binding.get(b.remote).value(data));
-}
-
-function areKeysEqual(key1, key2) {
-   if (!key1 || !key2 || key1.length != key2.length) return false;
-
-   for (let i = 0; i < key1.length; i++) if (key1[i] !== key2[i]) return false;
-
-   return true;
-}
-
-function convertOption(bindings, data) {
-   let result = { $value: {} };
-   bindings.forEach((b) => {
-      let value = Binding.get(b.remote).value(data);
-      result = Binding.get(b.local).set(result, value);
-   });
-   return result.$value;
-}
-
-class SelectionDelegate extends Selection {
-   constructor({ delegate }) {
-      super();
-      this.delegate = delegate;
-   }
-
-   getIsSelectedDelegate(store) {
-      return (record, index) => this.delegate(record, index);
-   }
-
-   select() {
-      return false;
-   }
-}
-
-class LookupComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      let { data, store } = this.props.instance;
-      this.dom = {};
-      this.state = {
-         options: [],
-         formatted: data.formatted,
-         value: data.formatted,
-         dropdownOpen: false,
-         focus: false,
-      };
-
-      this.itemStore = new ReadOnlyDataView({
-         store: store,
-      });
-   }
-
-   getOptionKey(data) {
-      return this.props.bindings.filter((a) => a.key).map((b) => Binding.get(b.remote).value(data));
-   }
-
-   getLocalKey(data) {
-      return this.props.bindings.filter((a) => a.key).map((b) => Binding.get(b.local).value(data));
-   }
-
-   findOption(options, key) {
-      if (!key) return -1;
-      for (let i = 0; i < options.length; i++) {
-         let optionKey = this.getOptionKey({ $option: options[i] });
-         if (areKeysEqual(key, optionKey)) return i;
-      }
-      return -1;
-   }
-
-   getDropdown() {
-      if (this.dropdown) return this.dropdown;
-
-      let { widget, lastDropdown } = this.props.instance;
-
-      this.list = Widget.create(
-         <cx>
-            <List
-               sortField={widget.sort && widget.optionTextField}
-               sortDirection="ASC"
-               mod="dropdown"
-               scrollSelectionIntoView
-               cached={widget.infinite}
-               {...widget.listOptions}
-               records-bind="$options"
-               recordName="$option"
-               onItemClick={(e, inst) => this.onItemClick(e, inst)}
-               pipeKeyDown={(kd) => {
-                  this.listKeyDown = kd;
-               }}
-               selectOnTab
-               focusable={false}
-               selection={{
-                  type: SelectionDelegate,
-                  delegate: (data) =>
-                     this.props.instance.data.selectedKeys.find((x) =>
-                        areKeysEqual(x, this.getOptionKey({ $option: data })),
-                     ) != null,
-               }}
-            >
-               {this.props.itemConfig}
-            </List>
-         </cx>,
-      );
-
-      let dropdown = {
-         constrain: true,
-         scrollTracking: true,
-         inline: !isTouchDevice() || !!lastDropdown,
-         placementOrder: "down-right down-left up-right up-left",
-         ...widget.dropdownOptions,
-         type: Dropdown,
-         relatedElement: this.dom.input,
-         renderChildren: () => this.renderDropdownContents(),
-         onFocusOut: (e) => this.closeDropdown(e),
-         memoize: false,
-         touchFriendly: isTouchDevice(),
-         onMeasureNaturalContentSize: () => {
-            if (this.dom.dropdown && this.dom.list) {
-               return {
-                  height:
-                     this.dom.dropdown.offsetHeight -
-                     this.dom.list.offsetHeight +
-                     (this.dom.list.firstElementChild?.offsetHeight || 0),
-               };
-            }
-         },
-         onDismissAfterScroll: () => {
-            this.closeDropdown(null, true);
-            return false;
-         },
-      };
-
-      return (this.dropdown = Widget.create(dropdown));
-   }
-
-   renderDropdownContents() {
-      let content;
-      let { instance } = this.props;
-      let { data, widget } = instance;
-      let { CSS, baseClass } = widget;
-
-      let searchVisible =
-         !widget.hideSearchField &&
-         (!isArray(data.visibleOptions) ||
-            (widget.minOptionsForSearchField && data.visibleOptions.length >= widget.minOptionsForSearchField));
-
-      if (this.state.status == "loading") {
-         content = (
-            <div key="msg" className={CSS.element(baseClass, "message", "loading")}>
-               {widget.loadingText}
-            </div>
-         );
-      } else if (this.state.status == "error") {
-         content = (
-            <div key="msg" className={CSS.element(baseClass, "message", "error")}>
-               {widget.queryErrorText}
-            </div>
-         );
-      } else if (this.state.status == "info") {
-         content = (
-            <div key="msg" className={CSS.element(baseClass, "message", "info")}>
-               {this.state.message}
-            </div>
-         );
-      } else if (this.state.options.length == 0) {
-         content = (
-            <div key="msg" className={CSS.element(baseClass, "message", "no-results")}>
-               {widget.noResultsText}
-            </div>
-         );
-      } else {
-         content = (
-            <div
-               key="msg"
-               ref={(el) => {
-                  this.dom.list = el;
-                  this.subscribeListOnWheel(el);
-                  this.subscribeListOnScroll(el);
-               }}
-               className={CSS.element(baseClass, "scroll-container")}
-            >
-               <Cx widget={this.list} store={this.itemStore} options={{ name: "lookupfield-list" }} />
-            </div>
-         );
-      }
-
-      return (
-         <div
-            key="dropdown"
-            ref={(el) => {
-               this.dom.dropdown = el;
-            }}
-            className={CSS.element(baseClass, "dropdown")}
-            tabIndex={0}
-            onFocus={(e) => this.onDropdownFocus(e)}
-            onKeyDown={(e) => this.onDropdownKeyPress(e)}
-         >
-            {searchVisible && (
-               <input
-                  key="query"
-                  ref={(el) => {
-                     this.dom.query = el;
-                  }}
-                  type="text"
-                  className={CSS.element(baseClass, "query")}
-                  onClick={(e) => {
-                     e.preventDefault();
-                     e.stopPropagation();
-                  }}
-                  onChange={(e) => this.query(e.target.value)}
-                  onBlur={(e) => this.onQueryBlur(e)}
-               />
-            )}
-            {content}
-         </div>
-      );
-   }
-
-   onListWheel(e) {
-      let { list } = this.dom;
-      if (
-         (list.scrollTop + list.offsetHeight == list.scrollHeight && e.deltaY > 0) ||
-         (list.scrollTop == 0 && e.deltaY < 0)
-      ) {
-         e.preventDefault();
-         e.stopPropagation();
-      }
-   }
-
-   onListScroll() {
-      if (!this.dom.list) return;
-      var el = this.dom.list;
-      if (el.scrollTop > el.scrollHeight - 2 * el.offsetHeight) {
-         this.loadAdditionalOptionPages();
-      }
-   }
-
-   onDropdownFocus(e) {
-      if (this.dom.query && !isFocused(this.dom.query) && !isTouchDevice()) FocusManager.focus(this.dom.query);
-   }
-
-   getPlaceholder(text) {
-      let { CSS, baseClass } = this.props.instance.widget;
-
-      if (text) return <span className={CSS.element(baseClass, "placeholder")}>{text}</span>;
-
-      return <span className={CSS.element(baseClass, "placeholder")}>&nbsp;</span>;
-   }
-
-   render() {
-      let { instance, label, help, icon: iconVDOM } = this.props;
-      let { data, widget, state } = instance;
-      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-      let icon = iconVDOM && (
-         <div
-            key="icon"
-            className={CSS.element(baseClass, "left-icon")}
-            onMouseDown={preventDefault}
-            onClick={(e) => {
-               this.openDropdown(e);
-               e.stopPropagation();
-               e.preventDefault();
-            }}
-         >
-            {iconVDOM}
-         </div>
-      );
-
-      let dropdown;
-      if (this.state.dropdownOpen) {
-         this.itemStore.setData({
-            $options: this.state.options,
-            $query: this.lastQuery,
-         });
-         dropdown = (
-            <Cx widget={this.getDropdown()} store={this.itemStore} options={{ name: "lookupfield-dropdown" }} />
-         );
-      }
-
-      let insideButton = null;
-      let multipleEntries = this.props.multiple && isArray(data.records) && data.records.length > 1;
-
-      if (!data.readOnly) {
-         if (
-            widget.showClear &&
-            !data.disabled &&
-            !data.empty &&
-            (widget.alwaysShowClear || (!data.required && !this.props.multiple) || multipleEntries)
-         ) {
-            insideButton = (
-               <div
-                  key="ib"
-                  onMouseDown={preventDefault}
-                  onClick={(e) => (!this.props.multiple ? this.onClearClick(e) : this.onClearMultipleClick(e))}
-                  className={CSS.element(baseClass, "clear")}
-               >
-                  <ClearIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-         } else {
-            insideButton = (
-               <div
-                  key="ib"
-                  className={CSS.element(baseClass, "tool")}
-                  onMouseDown={preventDefault}
-                  onClick={(e) => {
-                     this.toggleDropdown(e, true);
-                     e.stopPropagation();
-                     e.preventDefault();
-                  }}
-               >
-                  <DropdownIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-         }
-      }
-
-      let text;
-
-      if (this.props.multiple) {
-         let readOnly = data.disabled || data.readOnly;
-         if (isNonEmptyArray(data.records)) {
-            let valueTextFormatter = widget.onGetRecordDisplayText ?? ((record) => record[widget.valueTextField]);
-            text = data.records.map((v, i) => (
-               <div
-                  key={i}
-                  className={CSS.element(baseClass, "tag", {
-                     readonly: readOnly,
-                  })}
-               >
-                  <span className={CSS.element(baseClass, "tag-value")}>{valueTextFormatter(v, instance)}</span>
-                  {!readOnly && (
-                     <div
-                        className={CSS.element(baseClass, "tag-clear")}
-                        onMouseDown={(e) => {
-                           e.preventDefault();
-                           e.stopPropagation();
-                        }}
-                        onClick={(e) => this.onClearClick(e, v)}
-                     >
-                        <ClearIcon className={CSS.element(baseClass, "icon")} />
-                     </div>
-                  )}
-               </div>
-            ));
-         } else {
-            text = this.getPlaceholder(data.placeholder);
-         }
-      } else {
-         text = !data.empty ? data.text || this.getPlaceholder() : this.getPlaceholder(data.placeholder);
-      }
-
-      let states = {
-         visited: state.visited,
-         focus: this.state.focus || this.state.dropdownOpen,
-         icon: !!iconVDOM,
-         empty: !data.placeholder && data.empty,
-         error: data.error && (state.visited || !suppressErrorsUntilVisited || !data.empty),
-      };
-
-      return (
-         <div
-            className={CSS.expand(data.classNames, CSS.state(states))}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-            onKeyDown={(e) => this.onKeyDown(e)}
-         >
-            <div
-               id={data.id}
-               className={CSS.expand(CSS.element(widget.baseClass, "input"), data.inputClass)}
-               style={data.inputStyle}
-               tabIndex={data.disabled ? null : data.tabIndex || 0}
-               ref={(el) => {
-                  this.dom.input = el;
-               }}
-               aria-labelledby={data.id + "-label"}
-               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
-               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))}
-               onClick={(e) => this.onClick(e)}
-               onInput={(e) => this.onChange(e, "input")}
-               onChange={(e) => this.onChange(e, "change")}
-               onKeyDown={(e) => this.onInputKeyDown(e)}
-               onMouseDown={(e) => this.onMouseDown(e)}
-               onBlur={(e) => this.onBlur(e)}
-               onFocus={(e) => this.onFocus(e)}
-            >
-               {text}
-            </div>
-            {insideButton}
-            {icon}
-            {dropdown}
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   onMouseDown(e) {
-      //skip touch start to allow touch scrolling
-      if (isTouchEvent()) return;
-      e.preventDefault();
-      e.stopPropagation();
-      this.toggleDropdown(e, true);
-   }
-
-   onClick(e) {
-      //mouse down will handle it for non-touch events
-      if (!isTouchEvent()) return;
-      e.preventDefault();
-      e.stopPropagation();
-      this.toggleDropdown(e, true);
-   }
-
-   onItemClick(e, { store }) {
-      this.select(e, [store.getData()]);
-      if (!this.props.instance.widget.submitOnEnterKey || e.type != "keydown") e.stopPropagation();
-      if (e.keyCode != KeyCode.tab) e.preventDefault();
-   }
-
-   onClearClick(e, value) {
-      let { instance } = this.props;
-      let { data, store, widget } = instance;
-      let { keyBindings } = widget;
-      e.stopPropagation();
-      e.preventDefault();
-      if (widget.multiple) {
-         if (isArray(data.records)) {
-            let itemKey = this.getLocalKey({ $value: value });
-            let newRecords = data.records.filter((v) => !areKeysEqual(this.getLocalKey({ $value: v }), itemKey));
-
-            instance.set("records", newRecords);
-
-            let newValues = newRecords
-               .map((rec) => this.getLocalKey({ $value: rec }))
-               .map((k) => (keyBindings.length == 1 ? k[0] : k));
-
-            instance.set("values", newValues);
-         }
-      } else {
-         this.props.bindings.forEach((b) => {
-            store.set(b.local, widget.emptyValue);
-         });
-      }
-
-      if (!isTouchEvent(e)) this.dom.input.focus();
-   }
-
-   onClearMultipleClick(e) {
-      let { instance } = this.props;
-      instance.set("records", []);
-      instance.set("values", []);
-   }
-
-   select(e, itemsData, reset) {
-      let { instance } = this.props;
-      let { store, data, widget } = instance;
-      let { bindings, keyBindings } = widget;
-
-      if (widget.multiple) {
-         let { selectedKeys, records } = data;
-
-         let newRecords = reset ? [] : [...(records || [])];
-         let singleSelect = itemsData.length == 1;
-         let optionKey = null;
-         if (singleSelect) optionKey = this.getOptionKey(itemsData[0]);
-
-         // deselect
-         if (singleSelect && selectedKeys.find((k) => areKeysEqual(optionKey, k))) {
-            newRecords = records.filter((v) => !areKeysEqual(optionKey, this.getLocalKey({ $value: v })));
-         } else {
-            itemsData.forEach((itemData) => {
-               let valueData = {
-                  $value: {},
-               };
-               bindings.forEach((b) => {
-                  valueData = Binding.get(b.local).set(valueData, Binding.get(b.remote).value(itemData));
-               });
-               newRecords.push(valueData.$value);
-            });
-         }
-
-         instance.set("records", newRecords);
-
-         let newValues = newRecords
-            .map((rec) => this.getLocalKey({ $value: rec }))
-            .map((k) => (keyBindings.length == 1 ? k[0] : k));
-
-         instance.set("values", newValues);
-      } else {
-         bindings.forEach((b) => {
-            let v = Binding.get(b.remote).value(itemsData[0]);
-            if (b.set) b.set(v, instance);
-            else store.set(b.local, v);
-         });
-      }
-
-      if (widget.closeOnSelect) {
-         //Pressing Tab should work it's own thing. Focus will move elsewhere and the dropdown will close.
-         if (e.keyCode != KeyCode.tab) {
-            if (!isTouchEvent(e)) this.dom.input.focus();
-            this.closeDropdown(e);
-         }
-      }
-
-      if (e.keyCode == KeyCode.enter && widget.submitOnDropdownEnterKey) {
-         this.submitOnEnter(e);
-      }
-   }
-
-   onDropdownKeyPress(e) {
-      switch (e.keyCode) {
-         case KeyCode.esc:
-            this.closeDropdown(e);
-            this.dom.input.focus();
-            break;
-
-         case KeyCode.tab:
-            // if tab needs to do a list selection, we have to first call List's handleKeyDown
-            if (this.listKeyDown) this.listKeyDown(e);
-            // if next focusable element is disabled, recalculate and update the dom before switching focus
-            this.props.forceUpdate();
-            break;
-
-         case KeyCode.a:
-            if (!e.ctrlKey) return;
-
-            let { quickSelectAll, multiple } = this.props.instance.widget;
-            if (!quickSelectAll || !multiple) return;
-
-            let optionsToSelect = this.state.options.map((o) => ({
-               $option: o,
-            }));
-            this.select(e, optionsToSelect, true);
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-
-         default:
-            if (this.listKeyDown) this.listKeyDown(e);
-            break;
-      }
-   }
-
-   onKeyDown(e) {
-      switch (e.keyCode) {
-         case KeyCode.pageDown:
-         case KeyCode.pageUp:
-            if (this.state.dropdownOpen) e.preventDefault();
-            break;
-      }
-   }
-
-   onInputKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.delete:
-            this.onClearClick(e);
-            return;
-
-         case KeyCode.shift:
-         case KeyCode.ctrl:
-         case KeyCode.tab:
-         case KeyCode.left:
-         case KeyCode.right:
-         case KeyCode.pageUp:
-         case KeyCode.pageDown:
-         case KeyCode.insert:
-         case KeyCode.esc:
-            break;
-
-         case KeyCode.down:
-            this.openDropdown(e);
-            e.stopPropagation();
-            break;
-
-         case KeyCode.enter:
-            if (this.props.instance.widget.submitOnEnterKey) {
-               this.submitOnEnter(e);
-            } else {
-               this.openDropdown(e);
-            }
-            break;
-
-         default:
-            this.openDropdown(e);
-            break;
-      }
-   }
-
-   onQueryBlur(e) {
-      FocusManager.nudge();
-   }
-
-   onFocus(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.trackFocus) {
-         this.setState({
-            focus: true,
-         });
-      }
-
-      if (this.props.instance.data.autoOpen) this.openDropdown(null);
-   }
-
-   onBlur(e) {
-      if (!this.state.dropdownOpen) this.props.instance.setState({ visited: true });
-
-      if (this.state.focus)
-         this.setState({
-            focus: false,
-         });
-   }
-
-   toggleDropdown(e, keepFocus) {
-      if (this.state.dropdownOpen) this.closeDropdown(e, keepFocus);
-      else this.openDropdown(e);
-   }
-
-   closeDropdown(e, keepFocus) {
-      if (this.state.dropdownOpen) {
-         this.setState(
-            {
-               dropdownOpen: false,
-            },
-            () => keepFocus && this.dom.input.focus(),
-         );
-
-         this.props.instance.setState({
-            visited: true,
-         });
-      }
-
-      //delete results valid only while the dropdown is open
-      delete this.tmpCachedResult;
-   }
-
-   openDropdown(e) {
-      let { instance } = this.props;
-      let { data } = instance;
-      if (!this.state.dropdownOpen && !data.disabled && !data.readOnly) {
-         this.query("");
-         this.setState(
-            {
-               dropdownOpen: true,
-            },
-            () => {
-               if (this.dom.dropdown) this.dom.dropdown.focus();
-            },
-         );
-      }
-   }
-
-   query(q) {
-      /*
-       In fetchAll mode onQuery should fetch all data and after
-       that everything is done filtering is done client-side.
-       If cacheAll is set results are cached for the lifetime of the
-       widget, otherwise cache is invalidated when dropdown closes.
-       */
-
-      let { instance } = this.props;
-      let { widget, data } = instance;
-
-      this.lastQuery = q;
-
-      //do not make duplicate queries if fetchAll is enabled
-      if (widget.fetchAll && this.state.status == "loading") return;
-
-      if (this.queryTimeoutId) clearTimeout(this.queryTimeoutId);
-
-      if (q.length < widget.minQueryLength) {
-         this.setState({
-            status: "info",
-            message: StringTemplate.format(widget.minQueryLengthMessageText, widget.minQueryLength),
-         });
-         return;
-      }
-
-      if (isArray(data.visibleOptions)) {
-         let results = widget.filterOptions(this.props.instance, data.visibleOptions, q);
-         this.setState({
-            options: results,
-            status: "loaded",
-         });
-      }
-
-      if (widget.onQuery) {
-         let { queryDelay, fetchAll, cacheAll, pageSize } = widget;
-
-         if (fetchAll) queryDelay = 0;
-
-         if (!this.cachedResult) {
-            this.setState({
-               status: "loading",
-            });
-         }
-
-         this.queryTimeoutId = setTimeout(() => {
-            delete this.queryTimeoutId;
-
-            let result = this.tmpCachedResult || this.cachedResult;
-            let query = fetchAll ? "" : q;
-            let params = !widget.infinite
-               ? query
-               : {
-                    query,
-                    page: 1,
-                    pageSize,
-                 };
-
-            if (!result) result = instance.invoke("onQuery", params, instance);
-
-            let queryId = (this.lastQueryId = Date.now());
-
-            Promise.resolve(result)
-               .then((results) => {
-                  //discard results which do not belong to the last query
-                  if (queryId !== this.lastQueryId) return;
-
-                  if (!isArray(results)) results = [];
-
-                  if (fetchAll) {
-                     if (cacheAll) this.cachedResult = results;
-                     else this.tmpCachedResult = results;
-
-                     results = widget.filterOptions(this.props.instance, results, this.lastQuery);
-                  }
-
-                  this.setState(
-                     {
-                        page: 1,
-                        query,
-                        options: results,
-                        status: "loaded",
-                     },
-                     () => {
-                        if (widget.infinite) this.onListScroll();
-                     },
-                  );
-               })
-               .catch((err) => {
-                  this.setState({ status: "error" });
-                  debug("Lookup query error:", err);
-               });
-         }, queryDelay);
-      }
-   }
-
-   loadAdditionalOptionPages() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (!widget.infinite) return;
-
-      let { query, page, status, options } = this.state;
-
-      let blockerKey = query;
-
-      if (status != "loaded") return;
-
-      if (options.length < page * widget.pageSize) return; //some pages were not full which means we reached the end
-
-      if (this.extraPageLoadingBlocker === blockerKey) return;
-
-      this.extraPageLoadingBlocker = blockerKey;
-
-      let params = {
-         page: page + 1,
-         query,
-         pageSize: widget.pageSize,
-      };
-
-      var result = instance.invoke("onQuery", params, instance);
-
-      Promise.resolve(result)
-         .then((results) => {
-            //discard results which do not belong to the last query
-            if (this.extraPageLoadingBlocker !== blockerKey) return;
-
-            this.extraPageLoadingBlocker = false;
-
-            if (!isArray(results)) return;
-
-            this.setState(
-               {
-                  page: params.page,
-                  query,
-                  options: [...options, ...results],
-               },
-               () => {
-                  this.onListScroll();
-               },
-            );
-         })
-         .catch((err) => {
-            if (this.extraPageLoadingBlocker !== blockerKey) return;
-            this.extraPageLoadingBlocker = false;
-            this.setState({ status: "error" });
-            debug("Lookup query error:", err);
-            console.error(err);
-         });
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      tooltipParentWillReceiveProps(this.dom.input, ...getFieldTooltip(props.instance));
-   }
-
-   componentDidMount() {
-      tooltipParentDidMount(this.dom.input, ...getFieldTooltip(this.props.instance));
-      autoFocus(this.dom.input, this);
-   }
-
-   componentDidUpdate() {
-      autoFocus(this.dom.input, this);
-   }
-
-   componentWillUnmount() {
-      if (this.queryTimeoutId) clearTimeout(this.queryTimeoutId);
-      tooltipParentWillUnmount(this.props.instance);
-      this.subscribeListOnWheel(null);
-   }
-
-   subscribeListOnWheel(list) {
-      if (this.unsubscribeListOnWheel) {
-         this.unsubscribeListOnWheel();
-         this.unsubscribeListOnWheel = null;
-      }
-      if (list) {
-         this.unsubscribeListOnWheel = addEventListenerWithOptions(list, "wheel", (e) => this.onListWheel(e), {
-            passive: false,
-         });
-      }
-   }
-
-   subscribeListOnScroll(list) {
-      if (this.unsubscribeListOnScroll) {
-         this.unsubscribeListOnScroll();
-         this.unsubscribeListOnScroll = null;
-      }
-      if (list) {
-         this.unsubscribeListOnScroll = addEventListenerWithOptions(list, "scroll", (e) => this.onListScroll(e), {
-            passive: false,
-         });
-      }
-   }
-
-   submitOnEnter(e) {
-      let instance = this.props.instance.parent;
-      while (instance) {
-         if (instance.events && instance.events.onSubmit) {
-            instance.events.onSubmit(e, instance);
-            break;
-         } else {
-            instance = instance.parent;
-         }
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/form/LookupField.scss b/packages/cx/src/widgets/form/LookupField.scss
index 3e47245d2..58cb10eda 100644
--- a/packages/cx/src/widgets/form/LookupField.scss
+++ b/packages/cx/src/widgets/form/LookupField.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-lookupfield(
    $name: "lookupfield",
    $state-style-map: $cx-std-field-state-style-map,
@@ -12,9 +14,9 @@
    $tag-clear-state-style-map: $cx-input-tag-clear-state-style-map,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    $padding: cx-get-state-rule($state-style-map, default, padding);
    $border-radius-offset: round(cx-get-state-rule($tag-state-style-map, default, border-radius) * 0.25);
diff --git a/packages/cx/src/widgets/form/LookupField.spec.tsx b/packages/cx/src/widgets/form/LookupField.spec.tsx
new file mode 100644
index 000000000..ddd481880
--- /dev/null
+++ b/packages/cx/src/widgets/form/LookupField.spec.tsx
@@ -0,0 +1,93 @@
+import { createAccessorModelProxy } from "../../data/createAccessorModelProxy";
+import { LookupField } from "./LookupField";
+
+interface User {
+   id: number;
+   name: string;
+   email: string;
+}
+
+interface SelectedUser {
+   id: number;
+   name: string;
+}
+
+interface Model {
+   users: User[];
+   selectedUsers: SelectedUser[];
+   selectedUserId: number;
+}
+
+describe("LookupField", () => {
+   it("infers TOption from AccessorChain<T[]> in options prop", () => {
+      const model = createAccessorModelProxy<Model>();
+
+      // TOption should be inferred as User from model.users (AccessorChain<User[]>)
+      let widget = (
+         <cx>
+            <LookupField
+               options={model.users}
+               onQuery={(query, instance) => {
+                  // Should return User[]
+                  return [] as User[];
+               }}
+               onCreateVisibleOptionsFilter={(params, instance) => (option) => {
+                  // option should be typed as User
+                  const id: number = option.id;
+                  const name: string = option.name;
+                  const email: string = option.email;
+                  return true;
+               }}
+            />
+         </cx>
+      );
+   });
+
+   it("infers TRecord from AccessorChain<T[]> in records prop", () => {
+      const model = createAccessorModelProxy<Model>();
+
+      // TRecord should be inferred as SelectedUser from model.selectedUsers
+      let widget = (
+         <cx>
+            <LookupField
+               multiple
+               records={model.selectedUsers}
+               onGetRecordDisplayText={(record, instance) => {
+                  // record should be typed as SelectedUser
+                  const id: number = record.id;
+                  const name: string = record.name;
+                  return record.name;
+               }}
+            />
+         </cx>
+      );
+   });
+
+   it("infers both TOption and TRecord from accessor chains", () => {
+      const model = createAccessorModelProxy<Model>();
+
+      let widget = (
+         <cx>
+            <LookupField
+               multiple
+               options={model.users}
+               records={model.selectedUsers}
+               onQuery={(query) => {
+                  // Should return User[]
+                  return [] as User[];
+               }}
+               onCreateVisibleOptionsFilter={(params) => (option) => {
+                  // option should be User
+                  const email: string = option.email;
+                  return true;
+               }}
+               onGetRecordDisplayText={(record) => {
+                  // record should be SelectedUser
+                  const name: string = record.name;
+                  return name;
+               }}
+            />
+         </cx>
+      );
+   });
+});
diff --git a/packages/cx/src/widgets/form/LookupField.tsx b/packages/cx/src/widgets/form/LookupField.tsx
new file mode 100644
index 000000000..3bcc47e0d
--- /dev/null
+++ b/packages/cx/src/widgets/form/LookupField.tsx
@@ -0,0 +1,1421 @@
+/**@jsxImportSource react */
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Cx } from "../../ui/Cx";
+import { Field, getFieldTooltip, FieldInstance } from "./Field";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { HtmlElement, HtmlElementInstance } from "../HtmlElement";
+import { Binding, BindingInput } from "../../data/Binding";
+import { debug } from "../../util/Debug";
+import { Dropdown, DropdownConfig } from "../overlay/Dropdown";
+import { FocusManager } from "../../ui/FocusManager";
+import { isFocused } from "../../util/DOM";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import {
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   tooltipMouseMove,
+   tooltipMouseLeave,
+   tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
+import ClearIcon from "../icons/clear";
+import DropdownIcon from "../icons/drop-down";
+import { getSearchQueryPredicate } from "../../util/getSearchQueryPredicate";
+import { KeyCode } from "../../util/KeyCode";
+import { Localization } from "../../ui/Localization";
+import { StringTemplate } from "../../data/StringTemplate";
+import { Icon } from "../Icon";
+import { isString } from "../../util/isString";
+import { isDefined } from "../../util/isDefined";
+import { isArray } from "../../util/isArray";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
+import { List } from "../List";
+import { Selection } from "../../ui/selection/Selection";
+import { HighlightedSearchText } from "../HighlightedSearchText";
+import { autoFocus } from "../autoFocus";
+import { bind } from "../../ui";
+import { AccessorChain, isAccessorChain } from "../../data/createAccessorModelProxy";
+import type { CxChild, RenderingContext } from "../../ui/RenderingContext";
+import type { DropdownInstance, Instance } from "../../ui/Instance";
+import { FieldConfig } from "./Field";
+import { Prop, BooleanProp, StringProp, StructuredProp, DataRecord } from "../../ui/Prop";
+
+export interface LookupBinding {
+   local: string;
+   remote: string;
+   key?: boolean;
+}
+
+export interface LookupFieldConfig<TOption = unknown, TRecord = unknown> extends FieldConfig {
+   /** Defaults to `false`. Set to `true` to enable multiple selection. */
+   multiple?: BooleanProp;
+
+   /** Selected value. Used only if `multiple` is set to `false`. */
+   value?: Prop<number | string>;
+
+   /** A list of selected ids. Used only if `multiple` is set to `true`. */
+   values?: Prop<(number | string)[]>;
+
+   /** A list of selected records. Used only if `multiple` is set to `true`. */
+   records?: Prop<TRecord[]>;
+
+   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
+   text?: StringProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: BooleanProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: StringProp;
+
+   /** A list of available options. */
+   options?: Prop<TOption[]>;
+
+   /** Set to `true` to hide the clear button. Default value is `false`. */
+   hideClear?: boolean;
+
+   /** Set to `false` to hide the clear button. Default value is `true`. */
+   showClear?: boolean;
+
+   /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
+   alwaysShowClear?: boolean;
+
+   /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
+   baseClass?: string;
+
+   /** Name or configuration of the icon to be put on the left side of the input. */
+   icon?: StringProp | Record<string, any>;
+
+   /** Additional config to be applied to all items. */
+   itemConfig?: any;
+
+   /** An array of objects describing the mapping of option data to store data. */
+   bindings?: LookupBinding[];
+
+   /** A delay in milliseconds between typing stop and query. Default is `150`. */
+   queryDelay?: number;
+
+   /** Minimal number of characters required before query is made. */
+   minQueryLength?: number;
+
+   /** Set to `true` to hide the search field. */
+   hideSearchField?: boolean;
+
+   /** Number of options required to show search field. Defaults to `7`. */
+   minOptionsForSearchField?: number;
+
+   /** Text to display while data is being loaded. */
+   loadingText?: string;
+
+   /** Error message displayed if server query throws an exception. */
+   queryErrorText?: string;
+
+   /** Message to be displayed if no entries match the user query. */
+   noResultsText?: string;
+
+   /** Name of the field which holds the id of the option. Default is `id`. */
+   optionIdField?: string;
+
+   /** Name of the field which holds the display text of the option. Default is `text`. */
+   optionTextField?: string;
+
+   /** Name of the field to store id of selected value in multiple mode. Default is `id`. */
+   valueIdField?: string;
+
+   /** Name of the field to store display text of selected value. Default is `text`. */
+   valueTextField?: string;
+
+   /** `onQuery` will be called once to fetch all options; filtering occurs client-side. */
+   fetchAll?: boolean;
+
+   /** When set with `fetchAll`, fetched options are cached for widget lifetime. */
+   cacheAll?: boolean;
+
+   /** Close the dropdown after selection. Default is `true`. */
+   closeOnSelect?: boolean;
+
+   /** Message displayed if the entered search query is too short. */
+   minQueryLengthMessageText?: string;
+
+   /** Query function called to fetch options. */
+   onQuery?:
+      | string
+      | ((
+           query: string | { query: string; page: number; pageSize: number },
+           instance: Instance,
+        ) => TOption[] | Promise<TOption[]>);
+
+   /** Set to `true` to sort dropdown options. */
+   sort?: boolean;
+
+   /** Additional list options, such as grouping configuration, custom sorting, etc. */
+   listOptions?: Record<string, any>;
+
+   /** Show dropdown immediately after component mount; useful for cell editing. */
+   autoOpen?: BooleanProp;
+
+   /** Allow enter key events to propagate; useful for forms or grid cell editors. */
+   submitOnEnterKey?: BooleanProp;
+
+   /** Allow dropdown enter key events to propagate for form submission. */
+   submitOnDropdownEnterKey?: BooleanProp;
+
+   /** Number of additional items loaded in `infinite` mode. Default is `100`. */
+   pageSize?: number;
+
+   /** Set to `true` to enable loading additional options when scroll reaches end. */
+   infinite?: boolean;
+
+   /** Allow quick selection of all displayed items on `Ctrl + A` key combination. */
+   quickSelectAll?: boolean;
+
+   /** Parameters that affect filtering. */
+   filterParams?: StructuredProp;
+
+   /** Used in multiple selection lookups to construct display text from multiple fields. */
+   onGetRecordDisplayText?: ((record: TRecord, instance: Instance) => string) | null;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateVisibleOptionsFilter?:
+      | string
+      | ((filterParams: unknown, instance: Instance) => (option: TOption) => boolean);
+
+   /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
+   dropdownOptions?: Partial<DropdownConfig>;
+
+   /** Custom validation function. */
+   onValidate?:
+      | string
+      | ((value: number | string, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class LookupField<TOption = unknown, TRecord = unknown> extends Field<
+   LookupFieldConfig<TOption, TRecord>
+> {
+   declare public baseClass: string;
+   declare public multiple: boolean;
+   declare public hideClear?: boolean;
+   declare public showClear: boolean;
+   declare public alwaysShowClear: boolean;
+   declare public hideSearchField: boolean;
+   declare public minOptionsForSearchField: number;
+   declare public loadingText: string;
+   declare public queryErrorText: string;
+   declare public noResultsText: string;
+   declare public optionIdField: string;
+   declare public optionTextField: string;
+   declare public valueIdField: string;
+   declare public valueTextField: string;
+   declare public fetchAll: boolean;
+   declare public cacheAll: boolean;
+   declare public closeOnSelect: boolean;
+   declare public minQueryLengthMessageText: string;
+   declare public sort?: boolean;
+   declare public listOptions?: Record<string, any> | null;
+   declare public autoOpen?: boolean;
+   declare public submitOnEnterKey?: boolean;
+   declare public submitOnDropdownEnterKey?: boolean;
+   declare public pageSize: number;
+   declare public infinite?: boolean;
+   declare public quickSelectAll?: boolean;
+   declare public queryDelay: number;
+   declare public minQueryLength: number;
+   declare public onGetRecordDisplayText?: ((record: Record<string, any>, instance: Instance) => string) | null;
+   declare public onQuery?:
+      | string
+      | ((
+           params: string | { query: string; page: number; pageSize: number },
+           instance: Instance,
+        ) => Promise<Record<string, any>[]> | Record<string, any>[]);
+   declare public onCreateVisibleOptionsFilter?:
+      | string
+      | ((filterParams: unknown, instance: Instance) => (option: Record<string, any>) => boolean);
+   declare public value?: BindingInput;
+   declare public text?: BindingInput<string>;
+   declare public records?: Record<string, any>[];
+   declare public values?: unknown[];
+   declare public options?: Record<string, any>[];
+
+   declare public enabled?: boolean;
+   declare public placeholder?: string;
+   declare public readOnly?: boolean;
+   declare public dropdownOptions?: Partial<DropdownConfig>;
+   declare public bindings?: BindingConfig[];
+   declare public keyBindings?: BindingConfig[];
+   declare public itemConfig?: CxChild;
+
+   declareData(...args: Record<string, any>[]): void {
+      let additionalAttributes = this.multiple
+         ? { values: undefined, records: undefined }
+         : { value: undefined, text: undefined };
+
+      super.declareData(
+         {
+            disabled: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            options: undefined,
+            icon: undefined,
+            autoOpen: undefined,
+            readOnly: undefined,
+            filterParams: { structured: true },
+         },
+         additionalAttributes,
+         ...args,
+      );
+   }
+
+   init(): void {
+      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
+
+      if (this.alwaysShowClear) this.showClear = true;
+
+      if (!this.bindings) {
+         let b: BindingConfig[] = [];
+         if (this.value) {
+            if (isAccessorChain(this.value)) this.value = bind(this.value);
+            if ((this.value as any).bind)
+               b.push({
+                  key: true,
+                  local: (this.value as any).bind,
+                  remote: `$option.${this.optionIdField}`,
+                  set: (this.value as any).set,
+               });
+         }
+
+         if (this.text as string | AccessorChain<unknown>) {
+            if (isAccessorChain(this.text)) this.text = bind(this.text);
+            if ((this.text as any).bind)
+               b.push({
+                  local: (this.text as any).bind,
+                  remote: `$option.${this.optionTextField}`,
+                  set: (this.text as any).set,
+               });
+         }
+
+         this.bindings = b;
+      }
+
+      if (this.bindings.length == 0 && this.multiple)
+         this.bindings = [
+            {
+               key: true,
+               local: `$value.${this.valueIdField}`,
+               remote: `$option.${this.optionIdField}`,
+            },
+            {
+               local: `$value.${this.valueTextField}`,
+               remote: `$option.${this.optionTextField}`,
+            },
+         ];
+
+      this.keyBindings = this.bindings.filter((b) => b.key);
+
+      if (!this.items && !this.children)
+         this.items = {
+            type: HighlightedSearchText,
+            text: { bind: `$option.${this.optionTextField}` },
+            query: { bind: "$query" },
+         } as any;
+
+      this.itemConfig = this.children || this.items;
+
+      this.items = [];
+      delete this.children;
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<LookupField>): void {
+      let { data, store } = instance;
+
+      data.stateMods = {
+         multiple: this.multiple,
+         single: !this.multiple,
+         disabled: data.disabled,
+         readonly: data.readOnly,
+      };
+
+      data.visibleOptions = data.options;
+      if (this.onCreateVisibleOptionsFilter && isArray(data.options)) {
+         let filterPredicate = instance.invoke("onCreateVisibleOptionsFilter", data.filterParams, instance);
+         data.visibleOptions = data.options.filter(filterPredicate);
+      }
+
+      data.selectedKeys = [];
+
+      if (this.multiple) {
+         if (isArray(data.values) && isArray(data.options)) {
+            data.selectedKeys = data.values.map((v) => (this.keyBindings!.length == 1 ? [v] : v));
+            let map: Record<number, Record<string, any>> = {};
+            data.options.filter(($option) => {
+               let optionKey = getOptionKey(this.keyBindings!, { $option });
+               for (let i = 0; i < data.selectedKeys.length; i++)
+                  if (areKeysEqual(optionKey, data.selectedKeys[i])) {
+                     map[i] = convertOption(this.bindings!, { $option });
+                     break;
+                  }
+            });
+            data.records = [];
+            for (let i = 0; i < data.selectedKeys.length; i++) if (map[i]) data.records.push(map[i]);
+         } else if (isArray(data.records))
+            data.selectedKeys.push(
+               ...data.records.map(($value) => this.keyBindings!.map((b) => Binding.get(b.local).value({ $value }))),
+            );
+      } else {
+         let dataViewData = store.getData();
+         data.selectedKeys.push(this.keyBindings!.map((b) => Binding.get(b.local).value(dataViewData)));
+         if (!this.text && isArray(data.options)) {
+            let option = data.options.find(($option) =>
+               areKeysEqual(getOptionKey(this.keyBindings!, { $option }), data.selectedKeys[0]),
+            );
+            data.text = (option && (option as any)[this.optionTextField!]) || "";
+         }
+      }
+
+      (instance as DropdownInstance).lastDropdown = context.lastDropdown;
+
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<LookupField>, key: string): React.ReactNode {
+      return (
+         <LookupComponent
+            key={key}
+            multiple={this.multiple!}
+            instance={instance}
+            itemConfig={this.itemConfig}
+            bindings={this.bindings!}
+            baseClass={this.baseClass!}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+            forceUpdate={context.forceUpdate}
+            icon={this.renderIcon(context, instance, "icon")}
+         />
+      );
+   }
+
+   filterOptions(instance: Instance, options: DataRecord[], query?: string): DataRecord[] {
+      if (!query) return options;
+      let textPredicate = getSearchQueryPredicate(query);
+      return options.filter(
+         (o) => isString(o[this.optionTextField!]) && textPredicate((o as any)[this.optionTextField!] as string),
+      );
+   }
+
+   isEmpty(data: Record<string, any>): boolean {
+      if (this.multiple) return !isNonEmptyArray(data.values) && !isNonEmptyArray(data.records);
+      return super.isEmpty(data);
+   }
+
+   getValidationValue(data: Record<string, any>): unknown {
+      if (this.multiple) return data.records ?? data.values;
+      return super.getValidationValue(data);
+   }
+
+   formatValue(context: RenderingContext, instance: Instance): string | React.ReactNode {
+      if (!this.multiple) return super.formatValue(context, instance);
+
+      let { records, values, options } = instance.data;
+      if (isArray(records)) {
+         let valueTextFormatter =
+            typeof this.onGetRecordDisplayText === "function"
+               ? this.onGetRecordDisplayText
+               : (record: Record<string, any>) =>
+                    (record as any)[this.valueTextField!] || (record as any)[this.valueIdField!];
+         return records.map((record) => valueTextFormatter(record as any, instance));
+      }
+
+      if (isArray(values)) {
+         if (isArray(options))
+            return values
+               .map((id) => {
+                  let option = options.find((o) => (o as any)[this.optionIdField!] == id);
+                  return option ? (option as any)[this.valueTextField!] : id;
+               })
+               .filter(Boolean)
+               .join(", ");
+
+         return values.join(", ");
+      }
+
+      return null;
+   }
+}
+
+LookupField.prototype.baseClass = "lookupfield";
+//LookupField.prototype.memoize = false;
+LookupField.prototype.multiple = false;
+LookupField.prototype.queryDelay = 150;
+LookupField.prototype.minQueryLength = 0;
+LookupField.prototype.hideSearchField = false;
+LookupField.prototype.minOptionsForSearchField = 7;
+LookupField.prototype.loadingText = "Loading...";
+LookupField.prototype.queryErrorText = "Error occurred while querying for lookup data.";
+LookupField.prototype.noResultsText = "No results found.";
+LookupField.prototype.optionIdField = "id";
+LookupField.prototype.optionTextField = "text";
+LookupField.prototype.valueIdField = "id";
+LookupField.prototype.valueTextField = "text";
+LookupField.prototype.suppressErrorsUntilVisited = true;
+LookupField.prototype.fetchAll = false;
+LookupField.prototype.cacheAll = false;
+LookupField.prototype.showClear = true;
+LookupField.prototype.alwaysShowClear = false;
+LookupField.prototype.closeOnSelect = true;
+LookupField.prototype.minQueryLengthMessageText = "Type in at least {0} character(s).";
+LookupField.prototype.icon = null;
+LookupField.prototype.sort = false;
+LookupField.prototype.listOptions = null;
+LookupField.prototype.autoOpen = false;
+LookupField.prototype.submitOnEnterKey = false;
+LookupField.prototype.submitOnDropdownEnterKey = false;
+LookupField.prototype.pageSize = 100;
+LookupField.prototype.infinite = false;
+LookupField.prototype.quickSelectAll = false;
+LookupField.prototype.onGetRecordDisplayText = null;
+
+Localization.registerPrototype("cx/widgets/LookupField", LookupField);
+
+Widget.alias("lookupfield", LookupField);
+
+interface BindingConfig {
+   local: string;
+   remote: string;
+   key?: boolean;
+   set?: (value: unknown, instance: Instance) => void;
+}
+
+function getOptionKey(bindings: BindingConfig[], data: Record<string, any>): unknown[] {
+   return bindings.filter((a) => a.key).map((b) => Binding.get(b.remote).value(data));
+}
+
+function areKeysEqual(key1: unknown[], key2: unknown[]): boolean {
+   if (!key1 || !key2 || key1.length != key2.length) return false;
+
+   for (let i = 0; i < key1.length; i++) if (key1[i] !== key2[i]) return false;
+
+   return true;
+}
+
+function convertOption(bindings: BindingConfig[], data: Record<string, any>): Record<string, any> {
+   let result: Record<string, any> = { $value: {} };
+   bindings.forEach((b) => {
+      let value = Binding.get(b.remote).value(data);
+      result = Binding.get(b.local).set(result, value);
+   });
+   return result.$value as Record<string, any>;
+}
+
+class SelectionDelegate extends Selection {
+   delegate: (record: Record<string, any>, index: number) => boolean;
+
+   constructor({ delegate }: { delegate: (record: Record<string, any>, index: number) => boolean }) {
+      super();
+      this.delegate = delegate;
+   }
+
+   getIsSelectedDelegate(store: unknown): (record: Record<string, any>, index: number) => boolean {
+      return (record: Record<string, any>, index: number) => this.delegate(record, index);
+   }
+
+   select(): boolean {
+      return false;
+   }
+}
+
+interface LookupComponentProps {
+   instance: FieldInstance<LookupField>;
+   multiple: boolean;
+   itemConfig: unknown;
+   bindings: BindingConfig[];
+   baseClass: string;
+   label?: React.ReactNode;
+   help?: React.ReactNode;
+   forceUpdate: () => void;
+   icon?: React.ReactNode;
+}
+
+interface LookupComponentState {
+   options: unknown[];
+   formatted?: string;
+   value?: string;
+   dropdownOpen: boolean;
+   focus: boolean;
+   status?: string;
+   message?: string;
+   query?: string;
+   page?: number;
+   hover?: boolean;
+}
+
+class LookupComponent extends VDOM.Component<LookupComponentProps, LookupComponentState> {
+   dom: {
+      input?: HTMLDivElement | null;
+      dropdown?: HTMLDivElement | null;
+      list?: HTMLDivElement | null;
+      query?: HTMLInputElement | null;
+   } = {};
+   itemStore: ReadOnlyDataView;
+   dropdown?: Widget;
+   list?: Widget;
+   listKeyDown?: (e: React.KeyboardEvent) => void;
+   queryTimeoutId?: ReturnType<typeof setTimeout>;
+   cachedResult?: Record<string, any>[];
+   tmpCachedResult?: Record<string, any>[];
+   lastQueryId?: number;
+   lastQuery?: string;
+   extraPageLoadingBlocker?: string | false;
+   unsubscribeListOnWheel?: (() => void) | null;
+   unsubscribeListOnScroll?: (() => void) | null;
+
+   constructor(props: LookupComponentProps) {
+      super(props);
+      let { data, store } = this.props.instance;
+      this.dom = {};
+      this.state = {
+         options: [],
+         formatted: data.formatted,
+         value: data.formatted,
+         dropdownOpen: false,
+         focus: false,
+      };
+
+      this.itemStore = new ReadOnlyDataView({
+         store: store,
+      });
+   }
+
+   getOptionKey(data: Record<string, any>): unknown[] {
+      return this.props.bindings.filter((a) => a.key).map((b) => Binding.get(b.remote).value(data));
+   }
+
+   getLocalKey(data: Record<string, any>): unknown[] {
+      return this.props.bindings.filter((a) => a.key).map((b) => Binding.get(b.local).value(data));
+   }
+
+   findOption(options: Record<string, any>[], key: unknown[]): number {
+      if (!key) return -1;
+      for (let i = 0; i < options.length; i++) {
+         let optionKey = this.getOptionKey({ $option: options[i] });
+         if (areKeysEqual(key, optionKey)) return i;
+      }
+      return -1;
+   }
+
+   getDropdown(): Widget {
+      if (this.dropdown) return this.dropdown;
+
+      let { widget }: { widget: LookupField } = this.props.instance as unknown as { widget: LookupField };
+      let { lastDropdown } = this.props.instance as DropdownInstance;
+
+      this.list = Widget.create({
+         type: List,
+         sortField: widget.sort && widget.optionTextField,
+         sortDirection: "ASC",
+         mod: "dropdown",
+         scrollSelectionIntoView: true,
+         cached: widget.infinite,
+         ...widget.listOptions,
+         records: bind("$options"),
+         recordName: "$option",
+         onItemClick: (e: React.MouseEvent, inst: Instance) => this.onItemClick(e, inst),
+         pipeKeyDown: (kd: (e: React.KeyboardEvent) => void) => {
+            this.listKeyDown = kd;
+         },
+         selectOnTab: true,
+         focusable: false,
+         selection: {
+            type: SelectionDelegate,
+            delegate: (data: any) =>
+               this.props.instance.data.selectedKeys.find((x: any) =>
+                  areKeysEqual(x, this.getOptionKey({ $option: data })),
+               ) != null,
+         },
+         children: this.props.itemConfig,
+      });
+
+      let dropdown = {
+         constrain: true,
+         scrollTracking: true,
+         inline: !isTouchDevice() || !!lastDropdown,
+         placementOrder: "down-right down-left up-right up-left",
+         ...widget.dropdownOptions,
+         type: Dropdown,
+         relatedElement: this.dom.input,
+         renderChildren: () => this.renderDropdownContents(),
+         onFocusOut: (e: React.MouseEvent) => this.closeDropdown(e),
+         memoize: false,
+         touchFriendly: isTouchDevice(),
+         onMeasureNaturalContentSize: () => {
+            if (this.dom.dropdown && this.dom.list) {
+               return {
+                  height:
+                     this.dom.dropdown.offsetHeight -
+                     this.dom.list.offsetHeight +
+                     ((this.dom.list.firstElementChild as HTMLElement)?.offsetHeight || 0),
+               };
+            }
+         },
+         onDismissAfterScroll: () => {
+            this.closeDropdown(null, true);
+            return false;
+         },
+      };
+
+      return (this.dropdown = Widget.create(dropdown));
+   }
+
+   renderDropdownContents(): React.ReactNode {
+      let content;
+      let { instance } = this.props;
+      let { data, widget }: { data: Record<string, any>; widget: LookupField } = instance as unknown as {
+         data: Record<string, any>;
+         widget: LookupField;
+      };
+      let { CSS, baseClass } = widget;
+
+      let searchVisible =
+         !widget.hideSearchField &&
+         (!isArray(data.visibleOptions) ||
+            (widget.minOptionsForSearchField && data.visibleOptions.length >= widget.minOptionsForSearchField));
+
+      if (this.state.status == "loading") {
+         content = (
+            <div key="msg" className={CSS.element(baseClass, "message", "loading")}>
+               {widget.loadingText}
+            </div>
+         );
+      } else if (this.state.status == "error") {
+         content = (
+            <div key="msg" className={CSS.element(baseClass, "message", "error")}>
+               {widget.queryErrorText}
+            </div>
+         );
+      } else if (this.state.status == "info") {
+         content = (
+            <div key="msg" className={CSS.element(baseClass, "message", "info")}>
+               {this.state.message}
+            </div>
+         );
+      } else if (this.state.options.length == 0) {
+         content = (
+            <div key="msg" className={CSS.element(baseClass, "message", "no-results")}>
+               {widget.noResultsText}
+            </div>
+         );
+      } else {
+         content = (
+            <div
+               key="msg"
+               ref={(el) => {
+                  this.dom.list = el;
+                  this.subscribeListOnWheel(el);
+                  this.subscribeListOnScroll(el);
+               }}
+               className={CSS.element(baseClass, "scroll-container")}
+            >
+               <Cx widget={this.list} store={this.itemStore} options={{ name: "lookupfield-list" }} />
+            </div>
+         );
+      }
+
+      return (
+         <div
+            key="dropdown"
+            ref={(el) => {
+               this.dom.dropdown = el as HTMLDivElement;
+            }}
+            className={CSS.element(baseClass, "dropdown")}
+            tabIndex={0}
+            onFocus={(e) => this.onDropdownFocus(e)}
+            onKeyDown={(e) => this.onDropdownKeyPress(e)}
+         >
+            {searchVisible && (
+               <input
+                  key="query"
+                  ref={(el) => {
+                     this.dom.query = el as HTMLInputElement;
+                  }}
+                  type="text"
+                  className={CSS.element(baseClass, "query")}
+                  onClick={(e) => {
+                     e.preventDefault();
+                     e.stopPropagation();
+                  }}
+                  onChange={(e) => this.query(e.target.value)}
+                  onBlur={(e) => this.onQueryBlur(e)}
+               />
+            )}
+            {content}
+         </div>
+      );
+   }
+
+   onListWheel(e: WheelEvent): void {
+      let { list } = this.dom;
+      if (
+         list &&
+         ((list.scrollTop + list.offsetHeight == list.scrollHeight && e.deltaY > 0) ||
+            (list.scrollTop == 0 && e.deltaY < 0))
+      ) {
+         e.preventDefault();
+         e.stopPropagation();
+      }
+   }
+
+   onListScroll(): void {
+      if (!this.dom.list) return;
+      var el = this.dom.list;
+      if (el.scrollTop > el.scrollHeight - 2 * el.offsetHeight) {
+         this.loadAdditionalOptionPages();
+      }
+   }
+
+   onDropdownFocus(e: React.FocusEvent): void {
+      if (this.dom.query && !isFocused(this.dom.query) && !isTouchDevice()) FocusManager.focus(this.dom.query);
+   }
+
+   getPlaceholder(text?: string): React.ReactNode {
+      let { CSS, baseClass } = this.props.instance.widget;
+
+      if (text) return <span className={CSS.element(baseClass, "placeholder")}>{text}</span>;
+
+      return <span className={CSS.element(baseClass, "placeholder")}>&nbsp;</span>;
+   }
+
+   render(): React.ReactNode {
+      let { instance, label, help, icon: iconVDOM } = this.props;
+      let { data, widget, state } = instance;
+      let { CSS, baseClass, suppressErrorsUntilVisited } = widget as LookupField;
+
+      let icon = iconVDOM && (
+         <div
+            key="icon"
+            className={CSS.element(baseClass, "left-icon")}
+            onMouseDown={preventDefault}
+            onClick={(e) => {
+               this.openDropdown(e);
+               e.stopPropagation();
+               e.preventDefault();
+            }}
+         >
+            {iconVDOM}
+         </div>
+      );
+
+      let dropdown;
+      if (this.state.dropdownOpen) {
+         this.itemStore.setData({
+            $options: this.state.options,
+            $query: this.lastQuery,
+         });
+         dropdown = (
+            <Cx widget={this.getDropdown()} store={this.itemStore} options={{ name: "lookupfield-dropdown" }} />
+         );
+      }
+
+      let insideButton = null;
+      let multipleEntries = this.props.multiple && isArray(data.records) && data.records.length > 1;
+
+      if (!data.readOnly) {
+         if (
+            widget.showClear &&
+            !data.disabled &&
+            !data.empty &&
+            (widget.alwaysShowClear || (!data.required && !this.props.multiple) || multipleEntries)
+         ) {
+            insideButton = (
+               <div
+                  key="ib"
+                  onMouseDown={preventDefault}
+                  onClick={(e) => (!this.props.multiple ? this.onClearClick(e) : this.onClearMultipleClick(e))}
+                  className={CSS.element(baseClass, "clear")}
+               >
+                  <ClearIcon className={CSS.element(baseClass, "icon")} />
+               </div>
+            );
+         } else {
+            insideButton = (
+               <div
+                  key="ib"
+                  className={CSS.element(baseClass, "tool")}
+                  onMouseDown={preventDefault}
+                  onClick={(e) => {
+                     this.toggleDropdown(e, true);
+                     e.stopPropagation();
+                     e.preventDefault();
+                  }}
+               >
+                  <DropdownIcon className={CSS.element(baseClass, "icon")} />
+               </div>
+            );
+         }
+      }
+
+      let text;
+
+      if (this.props.multiple) {
+         let readOnly = data.disabled || data.readOnly;
+         if (isNonEmptyArray(data.records)) {
+            let valueTextFormatter =
+               widget.onGetRecordDisplayText ??
+               ((record: Record<string, any>) => record[widget.valueTextField] as string);
+            text = data.records.map((v, i) => (
+               <div
+                  key={i}
+                  className={CSS.element(baseClass, "tag", {
+                     readonly: readOnly,
+                  })}
+               >
+                  <span className={CSS.element(baseClass, "tag-value")}>{valueTextFormatter(v, instance)}</span>
+                  {!readOnly && (
+                     <div
+                        className={CSS.element(baseClass, "tag-clear")}
+                        onMouseDown={(e) => {
+                           e.preventDefault();
+                           e.stopPropagation();
+                        }}
+                        onClick={(e) => this.onClearClick(e, v)}
+                     >
+                        <ClearIcon className={CSS.element(baseClass, "icon")} />
+                     </div>
+                  )}
+               </div>
+            ));
+         } else {
+            text = this.getPlaceholder(data.placeholder);
+         }
+      } else {
+         text = !data.empty ? data.text || this.getPlaceholder() : this.getPlaceholder(data.placeholder);
+      }
+
+      let states = {
+         visited: state.visited,
+         focus: this.state.focus || this.state.dropdownOpen,
+         icon: !!iconVDOM,
+         empty: !data.placeholder && data.empty,
+         error: data.error && (state.visited || !suppressErrorsUntilVisited || !data.empty),
+      };
+
+      return (
+         <div
+            className={CSS.expand(data.classNames, CSS.state(states))}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+            onKeyDown={(e) => this.onKeyDown(e)}
+         >
+            <div
+               id={data.id}
+               className={CSS.expand(CSS.element(widget.baseClass, "input"), data.inputClass)}
+               style={data.inputStyle}
+               tabIndex={data.disabled ? null : data.tabIndex || 0}
+               ref={(el) => {
+                  this.dom.input = el;
+               }}
+               aria-labelledby={data.id + "-label"}
+               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
+               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))}
+               onClick={(e) => this.onClick(e)}
+               onKeyDown={(e) => this.onInputKeyDown(e)}
+               onMouseDown={(e) => this.onMouseDown(e)}
+               onBlur={(e) => this.onBlur(e)}
+               onFocus={(e) => this.onFocus(e)}
+            >
+               {text}
+            </div>
+            {insideButton}
+            {icon}
+            {dropdown}
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   onMouseDown(e: React.MouseEvent): void {
+      //skip touch start to allow touch scrolling
+      if (isTouchEvent()) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.toggleDropdown(e, true);
+   }
+
+   onClick(e: React.MouseEvent): void {
+      //mouse down will handle it for non-touch events
+      if (!isTouchEvent()) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.toggleDropdown(e, true);
+   }
+
+   onItemClick(
+      e: React.KeyboardEvent | React.MouseEvent,
+      { store }: { store: { getData: () => Record<string, any> } },
+   ): void {
+      this.select(e, [store.getData()]);
+      if (!this.props.instance.widget.submitOnEnterKey || e.type != "keydown") e.stopPropagation();
+      if ((e as React.KeyboardEvent).keyCode != KeyCode.tab) e.preventDefault();
+   }
+
+   onClearClick(e: React.MouseEvent | React.KeyboardEvent, value?: Record<string, any>): void {
+      let { instance } = this.props;
+      let { data, store, widget } = instance;
+      let { keyBindings } = widget;
+      e.stopPropagation();
+      e.preventDefault();
+      if (widget.multiple) {
+         if (isArray(data.records)) {
+            let itemKey = this.getLocalKey({ $value: value });
+            let newRecords = data.records.filter((v) => !areKeysEqual(this.getLocalKey({ $value: v }), itemKey));
+
+            instance.set("records", newRecords);
+
+            let newValues = newRecords
+               .map((rec) => this.getLocalKey({ $value: rec }))
+               .map((k) => (keyBindings!.length == 1 ? k[0] : k));
+
+            instance.set("values", newValues);
+         }
+      } else {
+         this.props.bindings.forEach((b) => {
+            store.set(b.local, widget.emptyValue);
+         });
+      }
+
+      if (!isTouchEvent()) this.dom.input!.focus();
+   }
+
+   onClearMultipleClick(e: React.MouseEvent): void {
+      let { instance } = this.props;
+      instance.set("records", []);
+      instance.set("values", []);
+   }
+
+   select(e: React.KeyboardEvent | React.MouseEvent, itemsData: Record<string, any>[], reset?: boolean): void {
+      let { instance } = this.props;
+      let { store, data, widget } = instance;
+      let { bindings, keyBindings } = widget;
+
+      if (widget.multiple) {
+         let { selectedKeys, records } = data;
+
+         let newRecords = reset ? [] : [...(records || [])];
+         let singleSelect = itemsData.length == 1;
+         let optionKey: unknown[] | null = null;
+         if (singleSelect) optionKey = this.getOptionKey(itemsData[0]);
+
+         // deselect
+         if (singleSelect && selectedKeys.find((k: any) => areKeysEqual(optionKey!, k))) {
+            newRecords = records.filter((v: any) => !areKeysEqual(optionKey!, this.getLocalKey({ $value: v })));
+         } else {
+            itemsData.forEach((itemData) => {
+               let valueData: Record<string, any> = {
+                  $value: {},
+               };
+               bindings!.forEach((b) => {
+                  valueData = Binding.get(b.local).set(valueData, Binding.get(b.remote).value(itemData));
+               });
+               newRecords.push(valueData.$value as Record<string, any>);
+            });
+         }
+
+         instance.set("records", newRecords);
+
+         let newValues = newRecords
+            .map((rec) => this.getLocalKey({ $value: rec }))
+            .map((k) => (keyBindings!.length == 1 ? k[0] : k));
+
+         instance.set("values", newValues);
+      } else {
+         bindings!.forEach((b) => {
+            let v = Binding.get(b.remote).value(itemsData[0]);
+            if (b.set) b.set(v, instance);
+            else store.set(b.local, v);
+         });
+      }
+
+      if (widget.closeOnSelect) {
+         //Pressing Tab should work it's own thing. Focus will move elsewhere and the dropdown will close.
+         if ((e as React.KeyboardEvent).keyCode != KeyCode.tab) {
+            if (!isTouchEvent()) this.dom.input!.focus();
+            this.closeDropdown(e);
+         }
+      }
+
+      if ((e as React.KeyboardEvent).keyCode == KeyCode.enter && widget.submitOnDropdownEnterKey) {
+         this.submitOnEnter(e as React.KeyboardEvent);
+      }
+   }
+
+   onDropdownKeyPress(e: React.KeyboardEvent): void {
+      switch (e.keyCode) {
+         case KeyCode.esc:
+            this.closeDropdown(e);
+            this.dom.input!.focus();
+            break;
+
+         case KeyCode.tab:
+            // if tab needs to do a list selection, we have to first call List's handleKeyDown
+            if (this.listKeyDown) this.listKeyDown(e);
+            // if next focusable element is disabled, recalculate and update the dom before switching focus
+            this.props.forceUpdate();
+            break;
+
+         case KeyCode.a:
+            if (!e.ctrlKey) return;
+
+            let { quickSelectAll, multiple } = this.props.instance.widget;
+            if (!quickSelectAll || !multiple) return;
+
+            let optionsToSelect = this.state.options.map((o) => ({
+               $option: o,
+            }));
+            this.select(e, optionsToSelect, true);
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+
+         default:
+            if (this.listKeyDown) this.listKeyDown(e);
+            break;
+      }
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      switch (e.keyCode) {
+         case KeyCode.pageDown:
+         case KeyCode.pageUp:
+            if (this.state.dropdownOpen) e.preventDefault();
+            break;
+      }
+   }
+
+   onInputKeyDown(e: React.KeyboardEvent): void {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.delete:
+            this.onClearClick(e);
+            return;
+
+         case KeyCode.shift:
+         case KeyCode.ctrl:
+         case KeyCode.tab:
+         case KeyCode.left:
+         case KeyCode.right:
+         case KeyCode.pageUp:
+         case KeyCode.pageDown:
+         case KeyCode.insert:
+         case KeyCode.esc:
+            break;
+
+         case KeyCode.down:
+            this.openDropdown(e);
+            e.stopPropagation();
+            break;
+
+         case KeyCode.enter:
+            if (this.props.instance.widget.submitOnEnterKey) {
+               this.submitOnEnter(e);
+            } else {
+               this.openDropdown(e);
+            }
+            break;
+
+         default:
+            this.openDropdown(e);
+            break;
+      }
+   }
+
+   onQueryBlur(e: React.FocusEvent): void {
+      FocusManager.nudge();
+   }
+
+   onFocus(e: React.FocusEvent): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+      }
+
+      if (this.props.instance.data.autoOpen) this.openDropdown(null);
+   }
+
+   onBlur(e: React.FocusEvent): void {
+      if (!this.state.dropdownOpen) this.props.instance.setState({ visited: true });
+
+      if (this.state.focus)
+         this.setState({
+            focus: false,
+         });
+   }
+
+   toggleDropdown(e: React.KeyboardEvent | React.MouseEvent, keepFocus?: boolean): void {
+      if (this.state.dropdownOpen) this.closeDropdown(e, keepFocus);
+      else this.openDropdown(e);
+   }
+
+   closeDropdown(e?: React.KeyboardEvent | React.MouseEvent | null, keepFocus?: boolean): void {
+      if (this.state.dropdownOpen) {
+         this.setState(
+            {
+               dropdownOpen: false,
+            },
+            () => keepFocus && this.dom.input?.focus(),
+         );
+
+         this.props.instance.setState({
+            visited: true,
+         });
+      }
+
+      //delete results valid only while the dropdown is open
+      delete this.tmpCachedResult;
+   }
+
+   openDropdown(e: React.KeyboardEvent | React.MouseEvent | null): void {
+      let { instance } = this.props;
+      let { data } = instance;
+      if (!this.state.dropdownOpen && !data.disabled && !data.readOnly) {
+         this.query("");
+         this.setState(
+            {
+               dropdownOpen: true,
+            },
+            () => {
+               if (this.dom.dropdown) this.dom.dropdown.focus();
+            },
+         );
+      }
+   }
+
+   query(q: string): void {
+      /*
+       In fetchAll mode onQuery should fetch all data and after
+       that everything is done filtering is done client-side.
+       If cacheAll is set results are cached for the lifetime of the
+       widget, otherwise cache is invalidated when dropdown closes.
+       */
+
+      let { instance } = this.props;
+      let { widget, data } = instance;
+
+      this.lastQuery = q;
+
+      //do not make duplicate queries if fetchAll is enabled
+      if (widget.fetchAll && this.state.status == "loading") return;
+
+      if (this.queryTimeoutId) clearTimeout(this.queryTimeoutId);
+
+      if (q.length < widget.minQueryLength) {
+         this.setState({
+            status: "info",
+            message: StringTemplate.format(widget.minQueryLengthMessageText, widget.minQueryLength),
+         });
+         return;
+      }
+
+      if (isArray(data.visibleOptions)) {
+         let results = widget.filterOptions(this.props.instance, data.visibleOptions as DataRecord[], q);
+         this.setState({
+            options: results,
+            status: "loaded",
+         });
+      }
+
+      if (widget.onQuery) {
+         let { queryDelay, fetchAll, cacheAll, pageSize } = widget;
+
+         if (fetchAll) queryDelay = 0;
+
+         if (!this.cachedResult) {
+            this.setState({
+               status: "loading",
+            });
+         }
+
+         this.queryTimeoutId = setTimeout(() => {
+            delete this.queryTimeoutId;
+
+            let result = this.tmpCachedResult || this.cachedResult;
+            let query = fetchAll ? "" : q;
+            let params = !widget.infinite
+               ? query
+               : {
+                    query,
+                    page: 1,
+                    pageSize,
+                 };
+
+            if (!result) result = instance.invoke("onQuery", params, instance);
+
+            let queryId = (this.lastQueryId = Date.now());
+
+            Promise.resolve(result)
+               .then((results) => {
+                  //discard results which do not belong to the last query
+                  if (queryId !== this.lastQueryId) return;
+
+                  if (!isArray(results)) results = [];
+
+                  if (fetchAll) {
+                     if (cacheAll) this.cachedResult = results;
+                     else this.tmpCachedResult = results;
+
+                     results = widget.filterOptions(this.props.instance, results, this.lastQuery);
+                  }
+
+                  this.setState(
+                     {
+                        page: 1,
+                        query,
+                        options: results,
+                        status: "loaded",
+                     },
+                     () => {
+                        if (widget.infinite) this.onListScroll();
+                     },
+                  );
+               })
+               .catch((err) => {
+                  this.setState({ status: "error" });
+                  debug("Lookup query error:", err);
+               });
+         }, queryDelay);
+      }
+   }
+
+   loadAdditionalOptionPages(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (!widget.infinite) return;
+
+      let { query, page, status, options } = this.state;
+      if (!page) page = 1;
+
+      let blockerKey = query;
+
+      if (status != "loaded") return;
+
+      if (options.length < page * widget.pageSize) return; //some pages were not full which means we reached the end
+
+      if (this.extraPageLoadingBlocker === blockerKey) return;
+
+      this.extraPageLoadingBlocker = blockerKey;
+
+      let params = {
+         page: page + 1,
+         query,
+         pageSize: widget.pageSize,
+      };
+
+      var result = instance.invoke("onQuery", params, instance);
+
+      Promise.resolve(result)
+         .then((results) => {
+            //discard results which do not belong to the last query
+            if (this.extraPageLoadingBlocker !== blockerKey) return;
+
+            this.extraPageLoadingBlocker = false;
+
+            if (!isArray(results)) return;
+
+            this.setState(
+               {
+                  page: params.page,
+                  query,
+                  options: [...options, ...results],
+               },
+               () => {
+                  this.onListScroll();
+               },
+            );
+         })
+         .catch((err) => {
+            if (this.extraPageLoadingBlocker !== blockerKey) return;
+            this.extraPageLoadingBlocker = false;
+            this.setState({ status: "error" });
+            debug("Lookup query error:", err);
+            console.error(err);
+         });
+   }
+
+   UNSAFE_componentWillReceiveProps(props: LookupComponentProps): void {
+      if (this.dom.input) {
+         tooltipParentWillReceiveProps(this.dom.input, ...getFieldTooltip(props.instance));
+      }
+   }
+
+   componentDidMount(): void {
+      if (this.dom.input) {
+         tooltipParentDidMount(this.dom.input, ...getFieldTooltip(this.props.instance));
+         autoFocus(this.dom.input, this);
+      }
+   }
+
+   componentDidUpdate(): void {
+      if (this.dom.input) {
+         autoFocus(this.dom.input, this);
+      }
+   }
+
+   componentWillUnmount(): void {
+      if (this.queryTimeoutId) clearTimeout(this.queryTimeoutId);
+      tooltipParentWillUnmount(this.props.instance);
+      this.subscribeListOnWheel(null);
+   }
+
+   subscribeListOnWheel(list: HTMLDivElement | null): void {
+      if (this.unsubscribeListOnWheel) {
+         this.unsubscribeListOnWheel();
+         this.unsubscribeListOnWheel = null;
+      }
+      if (list) {
+         this.unsubscribeListOnWheel = addEventListenerWithOptions(
+            list,
+            "wheel",
+            (e) => this.onListWheel(e as WheelEvent),
+            {
+               passive: false,
+            },
+         );
+      }
+   }
+
+   subscribeListOnScroll(list: HTMLDivElement | null): void {
+      if (this.unsubscribeListOnScroll) {
+         this.unsubscribeListOnScroll();
+         this.unsubscribeListOnScroll = null;
+      }
+      if (list) {
+         this.unsubscribeListOnScroll = addEventListenerWithOptions(list, "scroll", () => this.onListScroll(), {
+            passive: false,
+         });
+      }
+   }
+
+   submitOnEnter(e: React.KeyboardEvent): void {
+      let instance = this.props.instance.parent;
+      while (instance) {
+         let htmlInstance = instance as HtmlElementInstance;
+         if (htmlInstance.events && htmlInstance.events.onSubmit) {
+            htmlInstance.events.onSubmit(e, instance);
+            break;
+         } else {
+            instance = instance.parent;
+         }
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/form/MonthField.d.ts b/packages/cx/src/widgets/form/MonthField.d.ts
deleted file mode 100644
index 7c9f7822b..000000000
--- a/packages/cx/src/widgets/form/MonthField.d.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface MonthFieldProps extends FieldProps {
-   /** Selected month. This should be a Date object or a valid date string consumable by Date.parse function. */
-   value?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to allow range select. */
-   range?: Cx.BooleanProp;
-
-   /**
-    * Start of the selected month range. This should be a Date object or a valid date string consumable by Date.parse function.
-    * Used only if `range` is set to `true`.
-    */
-   from?: Cx.Prop<string | Date>;
-
-   /**
-    * End of the selected month range. This should be a Date object or a valid date string consumable by Date.parse function.
-    * Used only if `range` is set to `true`.
-    */
-   to?: Cx.Prop<string | Date>;
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** Minimum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   minValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   maxValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** String representing culture. Default is `en` */
-   culture?: string;
-
-   /**
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
-    * Default value is `false`.
-    */
-   hideClear?: boolean;
-
-   /** Base CSS class to be applied on the field. Defaults to `monthfield`. */
-   baseClass?: string;
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string;
-
-   /** Invalid input error text. */
-   inputErrorText?: string;
-
-   /** Name or configuration of the icon to be put on the left side of the input.  */
-   icon?: Cx.StringProp | Cx.Record;
-
-   /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
-    * Default value is `true`.
-    */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** The function that will be used to convert Date objects before writing data to the store.
-    * Default implementation is Date.toISOString.
-    * See also Culture.setDefaultDateEncoding.
-    */
-   encoding?: (date: Date) => any;
-
-   /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
-   dropdownOptions?: Cx.Config;
-
-   /** A boolean flag that determines whether the `to` date is included in the range.
-    * When set to true the value stored in the to field would be the last day of the month, i.e. `2024-12-31`. */
-   inclusiveTo?: boolean;
-
-   /** Optional configuration options for the MonthPicker component rendered within the dropdown.
-    * You can pass any valid additional MonthPicker props here, such as `startYear`, `endYear`, etc.
-    * Refer to the MonthPicker component documentation for a full list of supported options. */
-   monthPickerOptions?: Cx.Config;
-}
-
-export class MonthField extends Cx.Widget<MonthFieldProps> {}
diff --git a/packages/cx/src/widgets/form/MonthField.js b/packages/cx/src/widgets/form/MonthField.js
deleted file mode 100644
index 9f7514cea..000000000
--- a/packages/cx/src/widgets/form/MonthField.js
+++ /dev/null
@@ -1,524 +0,0 @@
-import { DateTimeCulture } from "intl-io";
-import { StringTemplate } from "../../data/StringTemplate";
-import { Culture } from "../../ui";
-import { Cx } from "../../ui/Cx";
-import { Localization } from "../../ui/Localization";
-import { VDOM, Widget, getContent } from "../../ui/Widget";
-import { Console } from "../../util/Console";
-import { Format } from "../../util/Format";
-import { KeyCode } from "../../util/KeyCode";
-import { dateDiff } from "../../util/date/dateDiff";
-import { parseDateInvariant } from "../../util";
-import { monthStart } from "../../util/date/monthStart";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { isDefined } from "../../util/isDefined";
-import { isTouchDevice } from "../../util/isTouchDevice";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { autoFocus } from "../autoFocus";
-import ClearIcon from "../icons/clear";
-import DropdownIcon from "../icons/drop-down";
-import { Dropdown } from "../overlay/Dropdown";
-import {
-   tooltipMouseLeave,
-   tooltipMouseMove,
-   tooltipParentDidMount,
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-} from "../overlay/tooltip-ops";
-import { Field, getFieldTooltip } from "./Field";
-import { MonthPicker } from "./MonthPicker";
-import { getActiveElement } from "../../util/getActiveElement";
-
-export class MonthField extends Field {
-   declareData() {
-      if (this.mode == "range") {
-         this.range = true;
-         this.mode = "edit";
-         Console.warn('Please use the range flag on MonthFields. Syntax mode="range" is deprecated.', this);
-      }
-
-      let values = {};
-
-      if (this.range) {
-         values = {
-            from: null,
-            to: null,
-         };
-      } else {
-         values = {
-            value: this.emptyValue,
-         };
-      }
-
-      super.declareData(
-         values,
-         {
-            disabled: undefined,
-            readOnly: undefined,
-            enabled: undefined,
-            placeholder: undefined,
-            required: undefined,
-            minValue: undefined,
-            minExclusive: undefined,
-            maxValue: undefined,
-            maxExclusive: undefined,
-            icon: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   isEmpty(data) {
-      return this.range ? data.from == null : data.value == null;
-   }
-
-   init() {
-      if (!this.culture) this.culture = new DateTimeCulture(Format.culture);
-
-      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
-
-      if (this.alwaysShowClear) this.showClear = true;
-
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(context, instance);
-
-      let { data } = instance;
-
-      let formatOptions = {
-         year: "numeric",
-         month: "short",
-      };
-
-      if (!this.range && data.value) {
-         data.date = parseDateInvariant(data.value);
-         data.formatted = this.culture.format(data.date, formatOptions);
-      } else if (this.range && data.from && data.to) {
-         data.from = parseDateInvariant(data.from);
-         data.to = parseDateInvariant(data.to);
-         if (!this.inclusiveTo) data.to.setDate(data.to.getDate() - 1);
-         let fromStr = this.culture.format(data.from, formatOptions);
-         let toStr = this.culture.format(data.to, formatOptions);
-         if (fromStr != toStr) data.formatted = fromStr + " - " + toStr;
-         else data.formatted = fromStr;
-      }
-
-      if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
-
-      if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
-
-      if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
-
-      instance.lastDropdown = context.lastDropdown;
-   }
-
-   validateRequired(context, instance) {
-      var { data } = instance;
-      if (this.range) {
-         if (!data.from || !data.to) return this.requiredText;
-      } else return super.validateRequired(context, instance);
-   }
-
-   validate(context, instance) {
-      super.validate(context, instance);
-      var { data } = instance;
-      if (!data.error && data.date) {
-         var d;
-         if (data.maxValue) {
-            d = dateDiff(data.date, data.maxValue);
-            if (d > 0) data.error = StringTemplate.format(this.maxValueErrorText, data.maxValue);
-            else if (d == 0 && data.maxExclusive)
-               data.error = StringTemplate.format(this.maxExclusiveErrorText, data.maxValue);
-         }
-
-         if (data.minValue) {
-            d = dateDiff(data.date, data.minValue);
-            if (d < 0) data.error = StringTemplate.format(this.minValueErrorText, data.minValue);
-            else if (d == 0 && data.minExclusive)
-               data.error = StringTemplate.format(this.minExclusiveErrorText, data.minValue);
-         }
-      }
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <MonthInput
-            key={key}
-            data={instance.data}
-            instance={instance}
-            monthPicker={{
-               ...this.monthPickerOptions,
-               value: this.value,
-               from: this.from,
-               to: this.to,
-               range: this.range,
-               minValue: this.minValue,
-               maxValue: this.maxValue,
-               minExclusive: this.minExclusive,
-               maxExclusive: this.maxExclusive,
-               maxValueErrorText: this.maxValueErrorText,
-               maxExclusiveErrorText: this.maxExclusiveErrorText,
-               minValueErrorText: this.minValueErrorText,
-               minExclusiveErrorText: this.minExclusiveErrorText,
-            }}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
-            icon={this.renderIcon(context, instance, "icon")}
-         />
-      );
-   }
-
-   formatValue(context, { data }) {
-      return data.formatted || "";
-   }
-
-   parseDate(date) {
-      if (!date) return null;
-      if (date instanceof Date) return date;
-      date = this.culture.parse(date, { useCurrentDateForDefaults: true });
-      return date;
-   }
-
-   handleSelect(instance, date1, date2) {
-      let { widget } = instance;
-      let encode = widget.encoding || Culture.getDefaultDateEncoding();
-      instance.setState({
-         inputError: false,
-      });
-      if (this.range) {
-         let d1 = date1 ? encode(date1) : this.emptyValue;
-         let toDate = date2;
-         if (date2 && this.inclusiveTo) {
-            toDate = new Date(date2);
-            toDate.setDate(toDate.getDate() - 1);
-         }
-         let d2 = toDate ? encode(toDate) : this.emptyValue;
-         instance.set("from", d1);
-         instance.set("to", d2);
-      } else {
-         let value = date1 ? encode(date1) : this.emptyValue;
-         instance.set("value", value);
-      }
-   }
-}
-
-MonthField.prototype.baseClass = "monthfield";
-MonthField.prototype.maxValueErrorText = "Select {0:d} or before.";
-MonthField.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
-MonthField.prototype.minValueErrorText = "Select {0:d} or later.";
-MonthField.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
-MonthField.prototype.inputErrorText = "Invalid date entered";
-MonthField.prototype.suppressErrorsUntilVisited = true;
-MonthField.prototype.icon = "calendar";
-MonthField.prototype.showClear = true;
-MonthField.prototype.alwaysShowClear = false;
-MonthField.prototype.range = false;
-MonthField.prototype.reactOn = "enter blur";
-MonthField.prototype.inclusiveTo = false;
-
-Localization.registerPrototype("cx/widgets/MonthField", MonthField);
-
-Widget.alias("monthfield", MonthField);
-
-class MonthInput extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.props.instance.component = this;
-      this.state = {
-         dropdownOpen: false,
-         focus: false,
-      };
-   }
-
-   getDropdown() {
-      if (this.dropdown) return this.dropdown;
-
-      let { widget, lastDropdown } = this.props.instance;
-
-      var dropdown = {
-         scrollTracking: true,
-         inline: !isTouchDevice() || !!lastDropdown,
-         placementOrder:
-            "down down-left down-right up up-left up-right right right-up right-down left left-up left-down",
-         touchFriendly: true,
-         ...widget.dropdownOptions,
-         type: Dropdown,
-         relatedElement: this.input,
-         items: {
-            type: MonthPicker,
-            ...this.props.monthPicker,
-            encoding: widget.encoding,
-            inclusiveTo: widget.inclusiveTo,
-            autoFocus: true,
-            onFocusOut: (e) => {
-               this.closeDropdown(e);
-            },
-            onKeyDown: (e) => this.onKeyDown(e),
-            onSelect: (e) => {
-               let touch = isTouchEvent(e);
-               this.closeDropdown(e, () => {
-                  if (!touch) this.input.focus();
-               });
-            },
-         },
-         constrain: true,
-         firstChildDefinesWidth: true,
-      };
-
-      return (this.dropdown = Widget.create(dropdown));
-   }
-
-   render() {
-      var { instance, label, help, data, icon: iconVDOM } = this.props;
-      var { widget, state } = instance;
-      var { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-      let insideButton, icon;
-
-      if (!data.readOnly && !data.disabled) {
-         if (
-            widget.showClear &&
-            (((widget.alwaysShowClear || !data.required) && !data.empty) || instance.state.inputError)
-         )
-            insideButton = (
-               <div
-                  className={CSS.element(baseClass, "clear")}
-                  onMouseDown={(e) => {
-                     e.preventDefault();
-                     e.stopPropagation();
-                  }}
-                  onClick={(e) => {
-                     this.onClearClick(e);
-                  }}
-               >
-                  <ClearIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-         else
-            insideButton = (
-               <div className={CSS.element(baseClass, "right-icon")}>
-                  <DropdownIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-      }
-
-      if (iconVDOM) {
-         icon = <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
-      }
-
-      var dropdown = false;
-      if (this.state.dropdownOpen)
-         dropdown = (
-            <Cx
-               widget={this.getDropdown()}
-               parentInstance={instance}
-               options={{ name: "monthfield-dropdown" }}
-               subscribe
-            />
-         );
-
-      let empty = this.input ? !this.input.value : data.empty;
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  visited: state.visited,
-                  focus: this.state.focus || this.state.dropdownOpen,
-                  icon: !!icon,
-                  empty: empty && !data.placeholder,
-                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               }),
-            )}
-            style={data.style}
-            onMouseDown={this.onMouseDown.bind(this)}
-            onTouchStart={stopPropagation}
-            onClick={stopPropagation}
-         >
-            <input
-               id={data.id}
-               ref={(el) => {
-                  this.input = el;
-               }}
-               type="text"
-               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
-               style={data.inputStyle}
-               defaultValue={data.formatted}
-               disabled={data.disabled}
-               readOnly={data.readOnly}
-               tabIndex={data.tabIndex}
-               placeholder={data.placeholder}
-               onInput={(e) => this.onChange(e.target.value, "input")}
-               onChange={(e) => this.onChange(e.target.value, "change")}
-               onKeyDown={(e) => this.onKeyDown(e)}
-               onBlur={(e) => {
-                  this.onBlur(e);
-               }}
-               onFocus={(e) => {
-                  this.onFocus(e);
-               }}
-               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
-               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))}
-            />
-            {icon}
-            {insideButton}
-            {dropdown}
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   onMouseDown(e) {
-      e.stopPropagation();
-
-      if (this.state.dropdownOpen) this.closeDropdown(e);
-      else {
-         this.openDropdownOnFocus = true;
-      }
-
-      //icon click
-      if (e.target != this.input) {
-         e.preventDefault();
-         if (!this.state.dropdownOpen) this.openDropdown(e);
-         else this.input.focus();
-      }
-   }
-
-   onFocus(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.trackFocus) {
-         this.setState({
-            focus: true,
-         });
-      }
-      if (this.openDropdownOnFocus) this.openDropdown(e);
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.enter:
-            e.stopPropagation();
-            this.onChange(e.target.value, "enter");
-            break;
-
-         case KeyCode.esc:
-            if (this.state.dropdownOpen) {
-               e.stopPropagation();
-               this.closeDropdown(e, () => {
-                  this.input.focus();
-               });
-            }
-            break;
-
-         case KeyCode.left:
-         case KeyCode.right:
-            e.stopPropagation();
-            break;
-
-         case KeyCode.down:
-            this.openDropdown(e);
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-      }
-   }
-
-   onBlur(e) {
-      if (!this.state.dropdownOpen) this.props.instance.setState({ visited: true });
-
-      if (this.state.focus)
-         this.setState({
-            focus: false,
-         });
-      this.onChange(e.target.value, "blur");
-   }
-
-   closeDropdown(e, callback) {
-      if (this.state.dropdownOpen) {
-         if (this.scrollableParents)
-            this.scrollableParents.forEach((el) => {
-               el.removeEventListener("scroll", this.updateDropdownPosition);
-            });
-
-         this.props.instance.setState({ visited: true });
-         this.setState({ dropdownOpen: false }, callback);
-      } else if (callback) callback();
-   }
-
-   openDropdown(e) {
-      var { data } = this.props.instance;
-      this.openDropdownOnFocus = false;
-
-      if (!this.state.dropdownOpen && !(data.disabled || data.readOnly)) {
-         this.setState({ dropdownOpen: true });
-      }
-   }
-
-   onClearClick(e) {
-      e.stopPropagation();
-      e.preventDefault();
-
-      var { instance } = this.props;
-      var { widget } = instance;
-
-      widget.handleSelect(instance, null, null);
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      var { data, state } = props.instance;
-      if (data.formatted != this.input.value && (data.formatted != this.props.data.formatted || !state.inputError)) {
-         this.input.value = data.formatted || "";
-         props.instance.setState({
-            inputError: false,
-         });
-      }
-      tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(this.props.instance));
-   }
-
-   componentDidMount() {
-      tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
-      autoFocus(this.input, this);
-   }
-
-   componentDidUpdate() {
-      autoFocus(this.input, this);
-   }
-
-   componentWillUnmount() {
-      if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
-         this.onChange(this.input.value, "blur");
-      }
-      tooltipParentWillUnmount(this.props.instance);
-   }
-
-   onChange(inputValue, eventType) {
-      var { instance } = this.props;
-      var { widget } = instance;
-
-      if (widget.reactOn.indexOf(eventType) == -1) return;
-
-      var parts = inputValue.split("-");
-      var date1 = widget.parseDate(parts[0]);
-      var date2 = widget.parseDate(parts[1]) || date1;
-
-      if ((date1 != null && isNaN(date1)) || (date2 != null && isNaN(date2))) {
-         instance.setState({
-            inputError: widget.inputErrorText,
-         });
-      } else if (eventType == "blur" || eventType == "enter") {
-         if (date2) date2 = new Date(date2.getFullYear(), date2.getMonth() + 1, 1);
-         instance.setState({
-            visited: true,
-         });
-         widget.handleSelect(instance, date1, date2);
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/form/MonthField.scss b/packages/cx/src/widgets/form/MonthField.scss
index 1f24b4b51..ea7cb99d5 100644
--- a/packages/cx/src/widgets/form/MonthField.scss
+++ b/packages/cx/src/widgets/form/MonthField.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 
 @mixin cx-monthfield(
    $name: 'monthfield',
@@ -11,9 +12,9 @@
    $width: $cx-default-input-width,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       @include cxb-field(
diff --git a/packages/cx/src/widgets/form/MonthField.tsx b/packages/cx/src/widgets/form/MonthField.tsx
new file mode 100644
index 000000000..d21a1617a
--- /dev/null
+++ b/packages/cx/src/widgets/form/MonthField.tsx
@@ -0,0 +1,670 @@
+/**@jsxImportSource react */
+
+// @ts-expect-error
+import { DateTimeCulture } from "intl-io";
+import { StringTemplate } from "../../data/StringTemplate";
+import { Culture } from "../../ui";
+import { Cx } from "../../ui/Cx";
+import { Localization } from "../../ui/Localization";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { Console } from "../../util/Console";
+import { KeyCode } from "../../util/KeyCode";
+import { dateDiff } from "../../util/date/dateDiff";
+import { parseDateInvariant } from "../../util";
+import { monthStart } from "../../util/date/monthStart";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { isDefined } from "../../util/isDefined";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { autoFocus } from "../autoFocus";
+import ClearIcon from "../icons/clear";
+import DropdownIcon from "../icons/drop-down";
+import { Dropdown, DropdownConfig } from "../overlay/Dropdown";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+} from "../overlay/tooltip-ops";
+import { Field, getFieldTooltip, FieldInstance, FieldConfig } from "./Field";
+import { MonthPicker } from "./MonthPicker";
+import { getActiveElement } from "../../util/getActiveElement";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance, DropdownWidgetProps } from "../../ui/Instance";
+import type { Config, Prop, BooleanProp, StringProp } from "../../ui/Prop";
+
+export class MonthFieldInstance<F extends MonthField = MonthField>
+   extends FieldInstance<F>
+   implements DropdownWidgetProps
+{
+   lastDropdown?: Instance;
+   dropdownOpen?: boolean;
+   selectedIndex?: number;
+   component?: any;
+}
+
+export interface MonthFieldConfig extends FieldConfig {
+   /** Selected month. This should be a Date object or a valid date string consumable by Date.parse function. */
+   value?: Prop<string | Date>;
+
+   /** Set to `true` to allow range select. */
+   range?: BooleanProp;
+
+   /** Start of the selected month range. Used only if `range` is set to `true`. */
+   from?: Prop<string | Date>;
+
+   /** End of the selected month range. Used only if `range` is set to `true`. */
+   to?: Prop<string | Date>;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: BooleanProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: StringProp;
+
+   /** Minimum date value. */
+   minValue?: Prop<string | Date>;
+
+   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
+   minExclusive?: BooleanProp;
+
+   /** Maximum date value. */
+   maxValue?: Prop<string | Date>;
+
+   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
+   maxExclusive?: BooleanProp;
+
+   /** String representing culture. Default is `en`. */
+   culture?: string;
+
+   /** Set to `true` to hide the clear button. Default value is `false`. */
+   hideClear?: boolean;
+
+   /** Base CSS class to be applied on the field. Defaults to `monthfield`. */
+   baseClass?: string;
+
+   /** Maximum value error text. */
+   maxValueErrorText?: string;
+
+   /** Maximum exclusive value error text. */
+   maxExclusiveErrorText?: string;
+
+   /** Minimum value error text. */
+   minValueErrorText?: string;
+
+   /** Minimum exclusive value error text. */
+   minExclusiveErrorText?: string;
+
+   /** Invalid input error text. */
+   inputErrorText?: string;
+
+   /** Name or configuration of the icon to be put on the left side of the input. */
+   icon?: StringProp | Config;
+
+   /** Set to `false` to hide the clear button. Default value is `true`. */
+   showClear?: boolean;
+
+   /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
+   alwaysShowClear?: boolean;
+
+   /** The function that will be used to convert Date objects before writing data to the store. */
+   encoding?: (date: Date) => any;
+
+   /** Additional configuration to be passed to the dropdown. */
+   dropdownOptions?: Partial<DropdownConfig>;
+
+   /** A boolean flag that determines whether the `to` date is included in the range. */
+   inclusiveTo?: boolean;
+
+   /** Optional configuration options for the MonthPicker component rendered within the dropdown. */
+   monthPickerOptions?: Config;
+
+   /** Custom validation function. */
+   onValidate?:
+      | string
+      | ((value: string | Date, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class MonthField<Config extends MonthFieldConfig = MonthFieldConfig> extends Field<Config, MonthFieldInstance> {
+   declare public baseClass: string;
+   declare public mode?: string;
+   declare public range?: BooleanProp;
+   declare public from?: Prop<string | Date>;
+   declare public to?: Prop<string | Date>;
+   declare public value?: Prop<string | Date>;
+   declare public culture: DateTimeCulture;
+   declare public hideClear?: boolean;
+   declare public showClear?: boolean;
+   declare public alwaysShowClear?: boolean;
+   declare public encoding?: (date: Date) => string;
+   declare public dropdownOptions?: Partial<DropdownConfig>;
+   declare public inclusiveTo?: boolean;
+   declare public monthPickerOptions?: Record<string, any>;
+   declare public maxValueErrorText: string;
+   declare public maxExclusiveErrorText: string;
+   declare public minValueErrorText: string;
+   declare public minExclusiveErrorText: string;
+   declare public inputErrorText?: string;
+   declare public minExclusive?: BooleanProp;
+   declare public maxExclusive?: BooleanProp;
+   declare public minValue?: Prop<string | Date>;
+   declare public maxValue?: Prop<string | Date>;
+   declare public placeholder?: StringProp;
+   declare public reactOn: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      if (this.mode == "range") {
+         this.range = true;
+         this.mode = "edit";
+         Console.warn('Please use the range flag on MonthFields. Syntax mode="range" is deprecated.', this);
+      }
+
+      let values: Record<string, unknown> = {};
+
+      if (this.range) {
+         values = {
+            from: null,
+            to: null,
+         };
+      } else {
+         values = {
+            value: this.emptyValue,
+         };
+      }
+
+      super.declareData(
+         values,
+         {
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            minValue: undefined,
+            minExclusive: undefined,
+            maxValue: undefined,
+            maxExclusive: undefined,
+            icon: undefined,
+         },
+         ...args,
+      );
+   }
+
+   isEmpty(data: Record<string, unknown>): boolean {
+      return this.range ? data.from == null : data.value == null;
+   }
+
+   init(): void {
+      if (!this.culture) this.culture = Culture.getDateTimeCulture();
+
+      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
+
+      if (this.alwaysShowClear) this.showClear = true;
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: MonthFieldInstance): void {
+      super.prepareData(context, instance);
+
+      let { data } = instance;
+
+      let formatOptions = {
+         year: "numeric",
+         month: "short",
+      };
+
+      if (!this.range && data.value) {
+         data.date = parseDateInvariant(data.value);
+         data.formatted = this.culture.format(data.date, formatOptions);
+      } else if (this.range && data.from && data.to) {
+         data.from = parseDateInvariant(data.from);
+         data.to = parseDateInvariant(data.to);
+         if (!this.inclusiveTo) data.to.setDate(data.to.getDate() - 1);
+         let fromStr = this.culture.format(data.from, formatOptions);
+         let toStr = this.culture.format(data.to, formatOptions);
+         if (fromStr != toStr) data.formatted = fromStr + " - " + toStr;
+         else data.formatted = fromStr;
+      }
+
+      if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
+
+      if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
+
+      if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
+
+      instance.lastDropdown = context.lastDropdown;
+   }
+
+   validateRequired(context: RenderingContext, instance: MonthFieldInstance): string | undefined {
+      const { data } = instance;
+      if (this.range) {
+         if (!data.from || !data.to) return this.requiredText;
+      } else return super.validateRequired(context, instance);
+   }
+
+   validate(context: RenderingContext, instance: MonthFieldInstance): void {
+      super.validate(context, instance);
+      var { data } = instance;
+      if (!data.error && data.date) {
+         var d;
+         if (data.maxValue) {
+            d = dateDiff(data.date, data.maxValue);
+            if (d > 0) data.error = StringTemplate.format(this.maxValueErrorText, data.maxValue);
+            else if (d == 0 && data.maxExclusive)
+               data.error = StringTemplate.format(this.maxExclusiveErrorText, data.maxValue);
+         }
+
+         if (data.minValue) {
+            d = dateDiff(data.date, data.minValue);
+            if (d < 0) data.error = StringTemplate.format(this.minValueErrorText, data.minValue);
+            else if (d == 0 && data.minExclusive)
+               data.error = StringTemplate.format(this.minExclusiveErrorText, data.minValue);
+         }
+      }
+   }
+
+   renderInput(context: RenderingContext, instance: MonthFieldInstance, key: string): React.ReactNode {
+      return (
+         <MonthInput
+            key={key}
+            data={instance.data}
+            instance={instance}
+            monthPicker={{
+               ...this.monthPickerOptions,
+               value: this.value,
+               from: this.from,
+               to: this.to,
+               range: this.range,
+               minValue: this.minValue,
+               maxValue: this.maxValue,
+               minExclusive: this.minExclusive,
+               maxExclusive: this.maxExclusive,
+               maxValueErrorText: this.maxValueErrorText,
+               maxExclusiveErrorText: this.maxExclusiveErrorText,
+               minValueErrorText: this.minValueErrorText,
+               minExclusiveErrorText: this.minExclusiveErrorText,
+            }}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+            icon={this.renderIcon(context, instance, "icon")}
+         />
+      );
+   }
+
+   formatValue(context: RenderingContext, instance: Instance): string {
+      return instance.data.formatted || "";
+   }
+
+   parseDate(date: string | Date | null): Date | null {
+      if (!date) return null;
+      if (date instanceof Date) return date;
+      let parsed = this.culture.parse(date, { useCurrentDateForDefaults: true });
+      return parsed;
+   }
+
+   handleSelect(instance: MonthFieldInstance, date1: Date | null, date2: Date | null): void {
+      let { widget } = instance;
+      let encode = widget.encoding ?? Culture.getDefaultDateEncoding();
+      instance.setState({
+         inputError: false,
+      });
+      if (this.range) {
+         let d1 = date1 ? encode(date1) : this.emptyValue;
+         let toDate = date2;
+         if (date2 && this.inclusiveTo) {
+            toDate = new Date(date2);
+            toDate.setDate(toDate.getDate() - 1);
+         }
+         let d2 = toDate ? encode(toDate) : this.emptyValue;
+         instance.set("from", d1);
+         instance.set("to", d2);
+      } else {
+         let value = date1 ? encode(date1) : this.emptyValue;
+         instance.set("value", value);
+      }
+   }
+}
+
+MonthField.prototype.baseClass = "monthfield";
+MonthField.prototype.maxValueErrorText = "Select {0:d} or before.";
+MonthField.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
+MonthField.prototype.minValueErrorText = "Select {0:d} or later.";
+MonthField.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
+MonthField.prototype.inputErrorText = "Invalid date entered";
+MonthField.prototype.suppressErrorsUntilVisited = true;
+MonthField.prototype.icon = "calendar";
+MonthField.prototype.showClear = true;
+MonthField.prototype.alwaysShowClear = false;
+MonthField.prototype.range = false;
+MonthField.prototype.reactOn = "enter blur";
+MonthField.prototype.inclusiveTo = false;
+
+Localization.registerPrototype("cx/widgets/MonthField", MonthField);
+
+Widget.alias("monthfield", MonthField);
+
+interface MonthInputProps {
+   instance: MonthFieldInstance;
+   data: Record<string, any>;
+   monthPicker: Record<string, any>;
+   label?: React.ReactNode;
+   help?: React.ReactNode;
+   icon?: React.ReactNode;
+}
+
+interface MonthInputState {
+   dropdownOpen: boolean;
+   focus: boolean;
+}
+
+class MonthInput extends VDOM.Component<MonthInputProps, MonthInputState> {
+   input?: HTMLInputElement | null;
+   dropdown?: Widget;
+   openDropdownOnFocus: boolean = false;
+   scrollableParents?: Element[];
+   updateDropdownPosition: () => void = () => {};
+
+   constructor(props: MonthInputProps) {
+      super(props);
+      this.props.instance.component = this;
+      this.state = {
+         dropdownOpen: false,
+         focus: false,
+      };
+   }
+
+   getDropdown(): Widget {
+      if (this.dropdown) return this.dropdown;
+
+      let { widget, lastDropdown } = this.props.instance;
+
+      var dropdown = {
+         scrollTracking: true,
+         inline: !isTouchDevice() || !!lastDropdown,
+         placementOrder:
+            "down down-left down-right up up-left up-right right right-up right-down left left-up left-down",
+         touchFriendly: true,
+         ...widget.dropdownOptions,
+         type: Dropdown,
+         relatedElement: this.input,
+         items: {
+            type: MonthPicker,
+            ...this.props.monthPicker,
+            encoding: widget.encoding,
+            inclusiveTo: widget.inclusiveTo,
+            autoFocus: true,
+            onFocusOut: (e: React.MouseEvent) => {
+               this.closeDropdown(e);
+            },
+            onKeyDown: (e: React.KeyboardEvent) => this.onKeyDown(e),
+            onSelect: (e: React.MouseEvent) => {
+               let touch = isTouchEvent();
+               this.closeDropdown(e, () => {
+                  if (!touch) this.input!.focus();
+               });
+            },
+         },
+         constrain: true,
+         firstChildDefinesWidth: true,
+      };
+
+      return (this.dropdown = Widget.create(dropdown));
+   }
+
+   render(): React.ReactNode {
+      const { instance, label, help, data, icon: iconVDOM } = this.props;
+      const { widget, state } = instance;
+      var { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+
+      let insideButton, icon;
+
+      if (!data.readOnly && !data.disabled) {
+         if (
+            widget.showClear &&
+            (((widget.alwaysShowClear || !data.required) && !data.empty) || instance.state.inputError)
+         )
+            insideButton = (
+               <div
+                  className={CSS.element(baseClass, "clear")}
+                  onMouseDown={(e) => {
+                     e.preventDefault();
+                     e.stopPropagation();
+                  }}
+                  onClick={(e) => {
+                     this.onClearClick(e);
+                  }}
+               >
+                  <ClearIcon className={CSS.element(baseClass, "icon")} />
+               </div>
+            );
+         else
+            insideButton = (
+               <div className={CSS.element(baseClass, "right-icon")}>
+                  <DropdownIcon className={CSS.element(baseClass, "icon")} />
+               </div>
+            );
+      }
+
+      if (iconVDOM) {
+         icon = <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
+      }
+
+      var dropdown: React.ReactElement | false = false;
+      if (this.state.dropdownOpen)
+         dropdown = (
+            <Cx
+               widget={this.getDropdown()}
+               parentInstance={instance}
+               options={{ name: "monthfield-dropdown" }}
+               subscribe
+            />
+         );
+
+      let empty = this.input ? !this.input.value : data.empty;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  visited: state.visited,
+                  focus: this.state.focus || this.state.dropdownOpen,
+                  icon: !!icon,
+                  empty: empty && !data.placeholder,
+                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
+               }),
+            )}
+            style={data.style}
+            onMouseDown={this.onMouseDown.bind(this)}
+            onTouchStart={stopPropagation}
+            onClick={stopPropagation}
+         >
+            <input
+               id={data.id}
+               ref={(el) => {
+                  this.input = el;
+               }}
+               type="text"
+               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
+               style={data.inputStyle}
+               defaultValue={data.formatted}
+               disabled={data.disabled}
+               readOnly={data.readOnly}
+               tabIndex={data.tabIndex}
+               placeholder={data.placeholder}
+               onInput={(e) => this.onChange((e.target as HTMLInputElement).value, "input")}
+               onChange={(e) => this.onChange((e.target as HTMLInputElement).value, "change")}
+               onKeyDown={(e) => this.onKeyDown(e)}
+               onBlur={(e) => {
+                  this.onBlur(e);
+               }}
+               onFocus={(e) => {
+                  this.onFocus(e);
+               }}
+               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
+               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))}
+            />
+            {icon}
+            {insideButton}
+            {dropdown}
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   onMouseDown(e: React.MouseEvent): void {
+      e.stopPropagation();
+
+      if (this.state.dropdownOpen) this.closeDropdown(e);
+      else {
+         this.openDropdownOnFocus = true;
+      }
+
+      //icon click
+      if (e.target != this.input) {
+         e.preventDefault();
+         if (!this.state.dropdownOpen) this.openDropdown(e);
+         else this.input!.focus();
+      }
+   }
+
+   onFocus(e: React.FocusEvent): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+      }
+      if (this.openDropdownOnFocus) this.openDropdown(e);
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.enter:
+            e.stopPropagation();
+            this.onChange((e.target as HTMLInputElement).value, "enter");
+            break;
+
+         case KeyCode.esc:
+            if (this.state.dropdownOpen) {
+               e.stopPropagation();
+               this.closeDropdown(e, () => {
+                  this.input!.focus();
+               });
+            }
+            break;
+
+         case KeyCode.left:
+         case KeyCode.right:
+            e.stopPropagation();
+            break;
+
+         case KeyCode.down:
+            this.openDropdown(e);
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+      }
+   }
+
+   onBlur(e: React.FocusEvent): void {
+      if (!this.state.dropdownOpen) this.props.instance.setState({ visited: true });
+
+      if (this.state.focus)
+         this.setState({
+            focus: false,
+         });
+      this.onChange((e.target as HTMLInputElement).value, "blur");
+   }
+
+   closeDropdown(e?: React.KeyboardEvent | React.MouseEvent, callback?: () => void): void {
+      if (this.state.dropdownOpen) {
+         if (this.scrollableParents)
+            this.scrollableParents.forEach((el) => {
+               el.removeEventListener("scroll", this.updateDropdownPosition);
+            });
+
+         this.props.instance.setState({ visited: true });
+         this.setState({ dropdownOpen: false }, callback);
+      } else if (callback) callback();
+   }
+
+   openDropdown(e?: React.KeyboardEvent | React.MouseEvent | React.FocusEvent): void {
+      const { data } = this.props.instance;
+      this.openDropdownOnFocus = false;
+
+      if (!this.state.dropdownOpen && !(data.disabled || data.readOnly)) {
+         this.setState({ dropdownOpen: true });
+      }
+   }
+
+   onClearClick(e: React.MouseEvent): void {
+      e.stopPropagation();
+      e.preventDefault();
+
+      const { instance } = this.props;
+      const { widget } = instance;
+
+      widget.handleSelect(instance, null, null);
+   }
+
+   UNSAFE_componentWillReceiveProps(props: MonthInputProps): void {
+      const { data, state } = props.instance;
+      if (data.formatted != this.input!.value && (data.formatted != this.props.data.formatted || !state.inputError)) {
+         this.input!.value = data.formatted || "";
+         props.instance.setState({
+            inputError: false,
+         });
+      }
+      tooltipParentWillReceiveProps(this.input!, ...getFieldTooltip(this.props.instance));
+   }
+
+   componentDidMount(): void {
+      tooltipParentDidMount(this.input!, ...getFieldTooltip(this.props.instance));
+      autoFocus(this.input, this);
+   }
+
+   componentDidUpdate(): void {
+      autoFocus(this.input, this);
+   }
+
+   componentWillUnmount(): void {
+      if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
+         this.onChange(this.input.value, "blur");
+      }
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   onChange(inputValue: string, eventType: string): void {
+      const { instance } = this.props;
+      const { widget } = instance;
+
+      if (widget.reactOn.indexOf(eventType) == -1) return;
+
+      var parts = inputValue.split("-");
+      var date1 = widget.parseDate(parts[0]);
+      var date2 = widget.parseDate(parts[1]) || date1;
+
+      if ((date1 != null && isNaN(date1.getTime())) || (date2 != null && isNaN(date2.getTime()))) {
+         instance.setState({
+            inputError: widget.inputErrorText,
+         });
+      } else if (eventType == "blur" || eventType == "enter") {
+         if (date2) date2 = new Date(date2.getFullYear(), date2.getMonth() + 1, 1);
+         instance.setState({
+            visited: true,
+         });
+         widget.handleSelect(instance, date1, date2);
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/form/MonthPicker.d.ts b/packages/cx/src/widgets/form/MonthPicker.d.ts
deleted file mode 100644
index 7ed499163..000000000
--- a/packages/cx/src/widgets/form/MonthPicker.d.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui";
-import { FieldProps } from "./Field";
-
-interface MonthPickerProps extends FieldProps {
-   /** Set to `true` to allow range select. */
-   range?: Cx.BooleanProp;
-
-   /**
-    * Start of the selected month range. This should be a Date object or a valid date string consumable by Date.parse function.
-    * Used only if `range` is set to `true`.
-    */
-   from?: Cx.Prop<string | Date>;
-
-   /**
-    * End of the selected month range. This should be a Date object or a valid date string consumable by Date.parse function.
-    * Used only if `range` is set to `true`.
-    */
-   to?: Cx.Prop<string | Date>;
-
-   /**
-    * Selected month date. This should be a Date object or a valid date string consumable by Date.parse function.
-    * Used only if `range` is set to `false` (default).
-    */
-   value?: Cx.Prop<string | Date>;
-
-   /** View reference date. If no date is selected, this date is used to determine which month to show in the calendar. */
-   refDate?: Cx.Prop<string | Date>;
-
-   /** Minimum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   minValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   maxValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied on the field. Defaults to `monthfield`. */
-   baseClass?: string;
-
-   /** Minimum year available in the range. */
-   startYear?: number;
-
-   /** Max year available in the range. */
-   endYear?: number;
-
-   /** Number of years to be rendered in each render chunk. */
-   bufferSize?: number;
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string;
-
-   /** The function that will be used to convert Date objects before writing data to the store.
-    * Default implementation is Date.toISOString.
-    * See also Culture.setDefaultDateEncoding.
-    */
-   encoding?: (date: Date) => any;
-
-   /** A boolean flag that determines whether the `to` date is included in the range.
-    * When set to true the value stored in the to field would be the last day of the month, i.e. `2024-12-31`. */
-   inclusiveTo?: boolean;
-
-   /** Callback function that is called before writing data to the store. Return false to short-circuit updating the state. */
-   onBeforeSelect: (e: Event, instance: Instance, dateFrom?: Date, dateTo?: Date) => boolean;
-
-   /** Callback function that is called after value or date range has changed */
-   onSelect: (instance: Instance, dateFrom?: Date, dateTo?: Date) => void;
-
-   /**
-    * Optional parameter to hide the quarters period section on the picker.
-    * When true, the quarters section will not render.
-    */
-   hideQuarters?: boolean;
-
-   /**
-    * Callback to create a function that determines if a date is selectable.
-    * Return `false` on factory method to disable specific month, quarter or a whole year.
-    *
-    * Note: Use the `onValidate` callback for validation purposes.
-    */
-   onCreateIsMonthDateSelectable?: (validationParams: Cx.Config, instance: Instance) => (monthDate: Date) => boolean;
-}
-
-export class MonthPicker extends Cx.Widget<MonthPickerProps> {}
diff --git a/packages/cx/src/widgets/form/MonthPicker.js b/packages/cx/src/widgets/form/MonthPicker.js
deleted file mode 100644
index 169784507..000000000
--- a/packages/cx/src/widgets/form/MonthPicker.js
+++ /dev/null
@@ -1,687 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import { Culture } from "../../ui/Culture";
-import { FocusManager, oneFocusOut, offFocusOut, preventFocusOnTouch } from "../../ui/FocusManager";
-import { StringTemplate } from "../../data/StringTemplate";
-import { monthStart } from "../../util/date/monthStart";
-import { dateDiff } from "../../util/date/dateDiff";
-import { minDate } from "../../util/date/minDate";
-import { maxDate } from "../../util/date/maxDate";
-import { lowerBoundCheck } from "../../util/date/lowerBoundCheck";
-import { upperBoundCheck } from "../../util/date/upperBoundCheck";
-import { Console } from "../../util/Console";
-import { KeyCode } from "../../util/KeyCode";
-import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { Localization } from "../../ui/Localization";
-import { scrollElementIntoView } from "../../util/scrollElementIntoView";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { isString } from "../../util/isString";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { getCursorPos } from "../overlay/captureMouse";
-
-import { enableCultureSensitiveFormatting } from "../../ui/Format";
-import { parseDateInvariant } from "../../util";
-enableCultureSensitiveFormatting();
-
-export class MonthPicker extends Field {
-   declareData() {
-      let values = {};
-
-      if (this.mode == "range") {
-         this.range = true;
-         this.mode = "edit";
-         Console.warn('Please use the range flag on MonthPickers. Syntax mode="range" is deprecated.', this);
-      }
-
-      if (this.range) {
-         values = {
-            from: null,
-            to: null,
-         };
-      } else {
-         values = {
-            value: this.emptyValue,
-         };
-      }
-
-      super.declareData(
-         values,
-         {
-            refDate: undefined,
-            disabled: undefined,
-            minValue: undefined,
-            minExclusive: undefined,
-            maxValue: undefined,
-            maxExclusive: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   init() {
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         disabled: data.disabled,
-      };
-
-      if (!this.range && data.value) data.date = monthStart(parseDateInvariant(data.value));
-
-      if (this.range) {
-         if (data.from) data.from = monthStart(parseDateInvariant(data.from));
-
-         if (data.to) {
-            let date = parseDateInvariant(data.to);
-            if (this.inclusiveTo) date.setDate(date.getDate() + 1);
-            data.to = monthStart(date);
-         }
-      }
-
-      if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
-
-      if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
-
-      if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
-
-      if (this.onCreateIsMonthDateSelectable) {
-         instance.isMonthDateSelectable = instance.invoke(
-            "onCreateIsMonthDateSelectable",
-            data.validationParams,
-            instance,
-         );
-      }
-
-      super.prepareData(...arguments);
-   }
-
-   validate(context, instance) {
-      super.validate(context, instance);
-      let { data } = instance;
-      if (!data.error && data.date) {
-         let d;
-         if (data.maxValue) {
-            d = dateDiff(data.date, data.maxValue);
-            if (d > 0) data.error = StringTemplate.format(this.maxValueErrorText, data.maxValue);
-            else if (d == 0 && data.maxExclusive)
-               data.error = StringTemplate.format(this.maxExclusiveErrorText, data.maxValue);
-         }
-
-         if (data.minValue) {
-            d = dateDiff(data.date, data.minValue);
-            if (d < 0) data.error = StringTemplate.format(this.minValueErrorText, data.minValue);
-            else if (d == 0 && data.minExclusive)
-               data.error = StringTemplate.format(this.minExclusiveErrorText, data.minValue);
-         }
-      }
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <MonthPickerComponent
-            key={key}
-            instance={instance}
-            onBlur={this.onBlur}
-            onFocusOut={this.onFocusOut}
-            onKeyDown={this.onKeyDown}
-            autoFocus={this.autoFocus}
-         />
-      );
-   }
-
-   handleSelect(e, instance, date1, date2) {
-      let { data, widget, isMonthDateSelectable } = instance;
-      let encode = widget.encoding || Culture.getDefaultDateEncoding();
-
-      if (data.disabled) return;
-
-      if (isMonthDateSelectable && !isMonthDateSelectable(date1)) return;
-      if (!dateSelectableCheck(date1, data)) return;
-
-      if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date1, date2) === false) return;
-
-      if (this.range) {
-         instance.set("from", encode(date1));
-         let toDate = new Date(date2);
-         if (this.inclusiveTo) toDate.setDate(toDate.getDate() - 1);
-         instance.set("to", encode(toDate));
-      } else instance.set("value", encode(date1));
-
-      if (this.onSelect) instance.invoke("onSelect", instance, date1, date2);
-   }
-}
-
-MonthPicker.prototype.baseClass = "monthpicker";
-MonthPicker.prototype.range = false;
-MonthPicker.prototype.startYear = 1980;
-MonthPicker.prototype.endYear = 2030;
-MonthPicker.prototype.bufferSize = 15;
-MonthPicker.prototype.hideQuarters = false;
-
-// Localization
-MonthPicker.prototype.maxValueErrorText = "Select {0:d} or before.";
-MonthPicker.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
-MonthPicker.prototype.minValueErrorText = "Select {0:d} or later.";
-MonthPicker.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
-MonthPicker.prototype.inclusiveTo = false;
-
-Localization.registerPrototype("cx/widgets/MonthPicker", MonthPicker);
-
-Widget.alias("month-picker", MonthPicker);
-
-const dateSelectableCheck = (date, data) => {
-   if (data.maxValue && !upperBoundCheck(date, data.maxValue, data.maxExclusive)) return false;
-
-   if (data.minValue && !lowerBoundCheck(date, data.minValue, data.minExclusive)) return false;
-
-   return true;
-};
-
-const monthNumber = (date) => {
-   return date.getFullYear() * 12 + date.getMonth();
-};
-
-export class MonthPickerComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      let { data, widget } = props.instance;
-
-      let cursor = monthStart(data.refDate ? data.refDate : data.date || data.from || new Date());
-
-      this.dom = {};
-
-      this.state = {
-         cursorYear: cursor.getFullYear(),
-         cursorMonth: cursor.getMonth() + 1,
-         cursorQuarter: cursor.getMonth() / 3,
-         column: "M",
-         start: widget.startYear,
-         end: Math.min(widget.startYear + widget.bufferSize, widget.endYear),
-      };
-
-      this.handleMouseDown = this.handleMouseDown.bind(this);
-      this.handleMouseUp = this.handleMouseUp.bind(this);
-      this.handleMouseEnter = this.handleMouseEnter.bind(this);
-      this.handleKeyPress = this.handleKeyPress.bind(this);
-      this.handleTouchMove = this.handleTouchMove.bind(this);
-      this.handleTouchEnd = this.handleTouchEnd.bind(this);
-   }
-
-   extractCursorInfo(el) {
-      if (!el.attributes["data-point"].value) return false;
-      let parts = el.attributes["data-point"].value.split("-");
-      if (parts[0] != "Y") return false;
-      let cursor = {
-         column: "Y",
-         cursorYear: Number(parts[1]),
-      };
-      if (parts.length == 4) {
-         cursor.column = parts[2];
-         if (cursor.column == "M") cursor.cursorMonth = Number(parts[3]);
-         else cursor.cursorQuarter = Number(parts[3]);
-      }
-      return cursor;
-   }
-
-   moveCursor(e, data, options = {}) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (data.cursorYear) {
-         let { startYear, endYear } = this.props.instance.widget;
-         data.cursorYear = Math.max(startYear, Math.min(endYear, data.cursorYear));
-      }
-
-      if (Object.keys(data).every((k) => this.state[k] == data[k])) return;
-
-      this.setState(data, () => {
-         if (options.ensureVisible) {
-            let index = this.state.cursorYear - this.state.start;
-            let tbody = this.dom.table.children[index];
-            if (tbody) scrollElementIntoView(tbody);
-         }
-      });
-   }
-
-   handleKeyPress(e) {
-      let { widget } = this.props.instance;
-      let { cursorMonth, cursorYear, cursorQuarter, column } = this.state;
-
-      switch (e.keyCode) {
-         case KeyCode.enter:
-            // if (widget.range && e.shiftKey && !this.dragStartDates) {
-            //    this.handleMouseDown(e, {}, false);
-            // } else {
-            //    this.handleMouseUp(e);
-            // }
-            this.handleMouseUp(e);
-            e.preventDefault();
-            e.stopPropagation();
-            break;
-
-         case KeyCode.left:
-            if (column == "Y") this.moveCursor(e, { cursorQuarter: 3, cursorYear: cursorYear - 1, column: "Q" });
-            else if (column == "Q") this.moveCursor(e, { cursorMonth: cursorQuarter * 4, column: "M" });
-            else if (column == "M" && (cursorMonth - 1) % 3 == 0) this.moveCursor(e, { column: "Y" });
-            else this.moveCursor(e, { cursorMonth: cursorMonth - 1 });
-            break;
-
-         case KeyCode.right:
-            if (column == "Y") this.moveCursor(e, { cursorMonth: 1, column: "M" });
-            else if (column == "Q")
-               this.moveCursor(e, { column: "Y", cursorYear: cursorQuarter == 3 ? cursorYear + 1 : cursorYear });
-            else if (column == "M" && (cursorMonth - 1) % 3 == 2)
-               this.moveCursor(e, { column: "Q", cursorQuarter: Math.floor((cursorMonth - 1) / 3) });
-            else this.moveCursor(e, { cursorMonth: cursorMonth + 1 });
-            break;
-
-         case KeyCode.up:
-            if (column == "Y") this.moveCursor(e, { cursorYear: cursorYear - 1 }, { ensureVisible: true });
-            else if (column == "Q")
-               this.moveCursor(
-                  e,
-                  {
-                     cursorQuarter: (cursorQuarter + 3) % 4,
-                     cursorYear: cursorQuarter == 0 ? cursorYear - 1 : cursorYear,
-                  },
-                  { ensureVisible: true },
-               );
-            else if (column == "M")
-               if (cursorMonth > 3) this.moveCursor(e, { cursorMonth: cursorMonth - 3 }, { ensureVisible: true });
-               else
-                  this.moveCursor(
-                     e,
-                     { cursorMonth: cursorMonth + 9, cursorYear: cursorYear - 1 },
-                     { ensureVisible: true },
-                  );
-            break;
-
-         case KeyCode.down:
-            if (column == "Y") this.moveCursor(e, { cursorYear: cursorYear + 1 }, { ensureVisible: true });
-            else if (column == "Q")
-               this.moveCursor(
-                  e,
-                  {
-                     cursorQuarter: (cursorQuarter + 1) % 4,
-                     cursorYear: cursorQuarter == 3 ? cursorYear + 1 : cursorYear,
-                  },
-                  { ensureVisible: true },
-               );
-            else if (column == "M")
-               if (cursorMonth < 10) this.moveCursor(e, { cursorMonth: cursorMonth + 3 }, { ensureVisible: true });
-               else
-                  this.moveCursor(
-                     e,
-                     { cursorMonth: cursorMonth - 9, cursorYear: cursorYear + 1 },
-                     { ensureVisible: true },
-                  );
-            break;
-
-         case KeyCode.pageUp:
-            this.moveCursor(e, { cursorYear: this.state.cursorYear - 1 });
-            break;
-
-         case KeyCode.pageDown:
-            this.moveCursor(e, { cursorYear: this.state.cursorYear + 1 });
-            break;
-
-         default:
-            if (this.props.onKeyDown) this.props.onKeyDown(e, this.props.instance);
-            break;
-      }
-   }
-
-   handleBlur(e) {
-      FocusManager.nudge();
-      if (this.props.onBlur) this.props.onBlur();
-      this.setState({
-         focused: false,
-      });
-   }
-
-   handleFocus(e) {
-      this.setState({
-         focused: true,
-      });
-      if (this.props.onFocusOut) oneFocusOut(this, this.dom.el, this.handleFocusOut.bind(this));
-   }
-
-   handleFocusOut() {
-      if (this.props.onFocusOut) this.props.onFocusOut();
-   }
-
-   getCursorDates(cursor) {
-      let { cursorMonth, cursorYear, cursorQuarter, column } = cursor || this.state;
-      switch (column) {
-         case "M":
-            return [new Date(cursorYear, cursorMonth - 1, 1), new Date(cursorYear, cursorMonth, 1)];
-
-         case "Q":
-            return [new Date(cursorYear, cursorQuarter * 3, 1), new Date(cursorYear, cursorQuarter * 3 + 3, 1)];
-
-         case "Y":
-            return [new Date(cursorYear, 0, 1), new Date(cursorYear + 1, 0, 1)];
-      }
-   }
-
-   handleTouchMove(e) {
-      let cursor = getCursorPos(e);
-      let el = document.elementFromPoint(cursor.clientX, cursor.clientY);
-      if (this.dom.table.contains(el) && isString(el.dataset.point)) {
-         let cursor = this.extractCursorInfo(el);
-         this.moveCursor(e, cursor);
-      }
-   }
-
-   handleTouchEnd(e) {
-      if (this.state.state == "drag") this.handleMouseUp(e);
-   }
-
-   handleMouseEnter(e) {
-      let cursor = this.extractCursorInfo(e.target);
-      cursor.hover = !isTouchEvent();
-      this.moveCursor(e, cursor);
-   }
-
-   handleMouseDown(e, cursor, drag = true) {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (!cursor) {
-         cursor = this.extractCursorInfo(e.currentTarget);
-         this.moveCursor(e, cursor);
-      }
-
-      e.stopPropagation();
-      preventFocusOnTouch(e);
-
-      this.dragStartDates = this.getCursorDates(cursor);
-      if (drag) {
-         this.setState({
-            state: "drag",
-            ...cursor,
-         });
-      }
-   }
-
-   handleMouseUp(e) {
-      let { instance } = this.props;
-      let { widget, data } = instance;
-
-      e.stopPropagation();
-      e.preventDefault();
-
-      let [cursorFromDate, cursorToDate] = this.getCursorDates();
-      let originFromDate = cursorFromDate,
-         originToDate = cursorToDate;
-      if (widget.range && e.shiftKey) {
-         if (data.from) originFromDate = data.from;
-         if (data.to) originToDate = data.to;
-      } else if (this.state.state == "drag") {
-         if (widget.range) {
-            [originFromDate, originToDate] = this.dragStartDates;
-         }
-         this.setState({ state: "normal" });
-      } else {
-         //skip mouse events originated somewhere else
-         if (e.type != "keydown") return;
-      }
-      widget.handleSelect(e, instance, minDate(originFromDate, cursorFromDate), maxDate(originToDate, cursorToDate));
-   }
-
-   render() {
-      let { instance } = this.props;
-      let { data, widget, isMonthDateSelectable } = instance;
-      let { CSS, baseClass, startYear, endYear, hideQuarters } = widget;
-
-      let years = [];
-
-      let { start, end } = this.state;
-
-      let from = 10000,
-         to = 0,
-         a,
-         b;
-
-      if (data.date && !widget.range) {
-         from = monthNumber(data.date);
-         to = from + 0.1;
-      } else if (widget.range) {
-         if (this.state.state == "drag") {
-            let [originFromDate, originToDate] = this.dragStartDates;
-            let [cursorFromDate, cursorToDate] = this.getCursorDates();
-            a = Math.min(monthNumber(originFromDate), monthNumber(cursorFromDate));
-            b = Math.max(monthNumber(originToDate), monthNumber(cursorToDate));
-            from = Math.min(a, b);
-            to = Math.max(a, b);
-         } else if (data.from && data.to) {
-            a = monthNumber(data.from);
-            b = monthNumber(data.to);
-            from = Math.min(a, b);
-            to = Math.max(a, b);
-         }
-      }
-
-      let monthNames = Culture.getDateTimeCulture().getMonthNames("short");
-      let showCursor = this.state.hover || this.state.focused;
-
-      for (let y = start; y <= end; y++) {
-         let selectableMonths = 0b111111111111;
-         // Loop through the months in a year to check if all months are unselectable
-         for (let i = 0; i < 12; i++) {
-            if (
-               (isMonthDateSelectable && !isMonthDateSelectable(new Date(y, i, 1))) ||
-               !dateSelectableCheck(new Date(y, i, 1), data)
-            ) {
-               // Set month as unselectable at specified bit
-               selectableMonths &= ~(1 << i);
-            }
-         }
-
-         // All bits are 0 - all months are unselectable
-         const unselectableYear = selectableMonths === 0;
-
-         let rows = [];
-         for (let q = 0; q < 4; q++) {
-            let row = [];
-            if (q == 0) {
-               row.push(
-                  <th
-                     key="year"
-                     rowSpan={4}
-                     data-point={`Y-${y}`}
-                     className={CSS.expand(
-                        CSS.element(baseClass, "year", {
-                           cursor: showCursor && this.state.column == "Y" && y == this.state.cursorYear,
-                        }),
-                        CSS.state({ unselectable: unselectableYear }),
-                     )}
-                     onMouseEnter={unselectableYear ? null : this.handleMouseEnter}
-                     onMouseDown={unselectableYear ? null : this.handleMouseDown}
-                     onMouseUp={unselectableYear ? null : this.handleMouseUp}
-                  >
-                     {y}
-                  </th>,
-               );
-            }
-
-            for (let i = 0; i < 3; i++) {
-               let m = q * 3 + i + 1;
-               const unselectableMonth = (selectableMonths & (1 << (m - 1))) === 0;
-               let mno = y * 12 + m - 1;
-               let handle = true; //isTouchDevice(); //mno === from || mno === to - 1;
-               row.push(
-                  <td
-                     key={`M${m}`}
-                     className={CSS.state({
-                        cursor:
-                           showCursor &&
-                           this.state.column == "M" &&
-                           y == this.state.cursorYear &&
-                           m == this.state.cursorMonth,
-                        handle,
-                        selected: mno >= from && mno < to,
-                        unselectable: unselectableMonth,
-                     })}
-                     data-point={`Y-${y}-M-${m}`}
-                     onMouseEnter={unselectableMonth ? null : this.handleMouseEnter}
-                     onMouseDown={unselectableMonth ? null : this.handleMouseDown}
-                     onMouseUp={unselectableMonth ? null : this.handleMouseUp}
-                     onTouchStart={unselectableMonth ? null : this.handleMouseDown}
-                     onTouchMove={unselectableMonth ? null : this.handleTouchMove}
-                     onTouchEnd={this.handleMouseUp}
-                  >
-                     {monthNames[m - 1].substr(0, 3)}
-                  </td>,
-               );
-            }
-
-            if (!hideQuarters) {
-               let unselectableQuarter = true;
-               const start = q * 3;
-               for (let i = start; i < start + 3; i++) {
-                  if ((selectableMonths & (1 << i)) !== 0) {
-                     // found a selectable month in a quarter
-                     unselectableQuarter = false;
-                     break;
-                  }
-               }
-
-               row.push(
-                  <th
-                     key={`q${q}`}
-                     className={CSS.state({
-                        cursor:
-                           showCursor &&
-                           this.state.column == "Q" &&
-                           y == this.state.cursorYear &&
-                           q == this.state.cursorQuarter,
-                        unselectable: unselectableQuarter,
-                     })}
-                     data-point={`Y-${y}-Q-${q}`}
-                     onMouseEnter={unselectableQuarter ? null : this.handleMouseEnter}
-                     onMouseDown={unselectableQuarter ? null : this.handleMouseDown}
-                     onMouseUp={unselectableQuarter ? null : this.handleMouseUp}
-                  >
-                     {`Q${q + 1}`}
-                  </th>,
-               );
-            }
-
-            rows.push(row);
-         }
-         years.push(rows);
-      }
-
-      return (
-         <div
-            ref={(el) => {
-               this.dom.el = el;
-            }}
-            className={data.classNames}
-            style={data.style}
-            tabIndex={data.disabled ? null : data.tabIndex || 0}
-            onKeyDown={this.handleKeyPress}
-            onMouseDown={stopPropagation}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
-            onMouseLeave={this.handleMouseLeave.bind(this)}
-            onFocus={(e) => this.handleFocus(e)}
-            onBlur={this.handleBlur.bind(this)}
-            onScroll={this.onScroll.bind(this)}
-         >
-            {this.state.yearHeight && <div style={{ height: `${(start - startYear) * this.state.yearHeight}px` }} />}
-            <table
-               ref={(el) => {
-                  this.dom.table = el;
-               }}
-            >
-               {years.map((rows, y) => (
-                  <tbody key={start + y}>
-                     {rows.map((cells, i) => (
-                        <tr key={i}>{cells}</tr>
-                     ))}
-                  </tbody>
-               ))}
-            </table>
-            {this.state.yearHeight && (
-               <div style={{ height: `${Math.max(0, endYear - end) * this.state.yearHeight}px` }} />
-            )}
-         </div>
-      );
-   }
-
-   onScroll() {
-      let { startYear, endYear, bufferSize } = this.props.instance.widget;
-      let visibleItems = ceil5(Math.ceil(this.dom.el.offsetHeight / this.state.yearHeight));
-      let start = Math.max(
-         startYear,
-         startYear + floor5(Math.floor(this.dom.el.scrollTop / this.state.yearHeight)) - visibleItems,
-      );
-      if (start != this.state.start && start + bufferSize <= endYear) {
-         this.setState({
-            start,
-            end: start + 15,
-         });
-      }
-   }
-
-   handleMouseLeave(e) {
-      tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance));
-      this.moveCursor(e, {
-         hover: false,
-      });
-   }
-
-   componentDidMount() {
-      //non-input, ok to focus on mobile
-      if (this.props.autoFocus) this.dom.el.focus();
-
-      tooltipParentDidMount(this.dom.el, ...getFieldTooltip(this.props.instance));
-      let yearHeight = this.dom.table.scrollHeight / (this.props.instance.widget.bufferSize + 1);
-      this.setState(
-         {
-            yearHeight: yearHeight,
-         },
-         () => {
-            let { widget, data } = this.props.instance;
-            let { startYear } = widget;
-            let yearCount = 1;
-            if (widget.range && data.from && data.to) {
-               yearCount = data.to.getFullYear() - data.from.getFullYear() + 1;
-               if (data.to.getMonth() == 0 && data.to.getDate() == 1) yearCount--;
-            }
-            this.dom.el.scrollTop =
-               (this.state.cursorYear - startYear + yearCount / 2) * this.state.yearHeight -
-               this.dom.el.offsetHeight / 2;
-         },
-      );
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      this.setState({
-         state: "normal",
-      });
-      tooltipParentWillReceiveProps(this.dom.el, ...getFieldTooltip(props.instance));
-   }
-
-   componentWillUnmount() {
-      offFocusOut(this);
-      tooltipParentWillUnmount(this.props.instance);
-   }
-}
-
-function ceil5(x) {
-   return Math.ceil(x / 5) * 5;
-}
-
-function floor5(x) {
-   return Math.floor(x / 5) * 5;
-}
diff --git a/packages/cx/src/widgets/form/MonthPicker.scss b/packages/cx/src/widgets/form/MonthPicker.scss
index 948dedd1f..8c4587fca 100644
--- a/packages/cx/src/widgets/form/MonthPicker.scss
+++ b/packages/cx/src/widgets/form/MonthPicker.scss
@@ -1,7 +1,10 @@
+@use "sass:map";
+@use "sass:color";
+
 @mixin cx-monthpicker($name: "monthpicker", $state-style-map: $cx-input-state-style-map, $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       overflow-y: scroll;
@@ -26,7 +29,7 @@
 
       th,
       td {
-         border-top: 1px solid transparentize($border-color, 0.5);
+         border-top: 1px solid color.adjust($border-color, $alpha: -0.5);
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
 
@@ -112,7 +115,7 @@
    .#{$block}#{$name}.#{$state}disabled {
       background-color: transparent;
       border-color: transparent;
-      color: darken(#fff, 18);
+      color: color.adjust(#fff, $lightness: -18%);
       pointer-events: none;
    }
 }
diff --git a/packages/cx/src/widgets/form/MonthPicker.tsx b/packages/cx/src/widgets/form/MonthPicker.tsx
new file mode 100644
index 000000000..42610397d
--- /dev/null
+++ b/packages/cx/src/widgets/form/MonthPicker.tsx
@@ -0,0 +1,822 @@
+/**@jsxImportSource react */
+
+import { Widget, VDOM } from "../../ui/Widget";
+import { Field, getFieldTooltip, FieldInstance, FieldConfig } from "./Field";
+import { Culture } from "../../ui/Culture";
+import { FocusManager, oneFocusOut, offFocusOut, preventFocusOnTouch } from "../../ui/FocusManager";
+import { StringTemplate } from "../../data/StringTemplate";
+import { monthStart } from "../../util/date/monthStart";
+import { dateDiff } from "../../util/date/dateDiff";
+import { minDate } from "../../util/date/minDate";
+import { maxDate } from "../../util/date/maxDate";
+import { lowerBoundCheck } from "../../util/date/lowerBoundCheck";
+import { upperBoundCheck } from "../../util/date/upperBoundCheck";
+import { Console } from "../../util/Console";
+import { KeyCode } from "../../util/KeyCode";
+import {
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   tooltipMouseMove,
+   tooltipMouseLeave,
+   tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { Localization } from "../../ui/Localization";
+import { scrollElementIntoView } from "../../util/scrollElementIntoView";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { isString } from "../../util/isString";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { getCursorPos } from "../overlay/captureMouse";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import type { Prop, BooleanProp } from "../../ui/Prop";
+
+import { enableCultureSensitiveFormatting } from "../../ui/Format";
+import { parseDateInvariant } from "../../util";
+import { HtmlElement } from "../HtmlElement";
+enableCultureSensitiveFormatting();
+
+export class MonthPickerInstance<F extends MonthPicker = MonthPicker> extends FieldInstance<F> {
+   isMonthDateSelectable?: (monthDate: Date) => boolean;
+}
+
+export interface MonthPickerConfig extends FieldConfig {
+   range?: BooleanProp;
+   from?: Prop<string | Date>;
+   to?: Prop<string | Date>;
+   value?: Prop<string | Date>;
+   refDate?: Prop<string | Date>;
+   minValue?: Prop<string | Date>;
+   minExclusive?: BooleanProp;
+   maxValue?: Prop<string | Date>;
+   maxExclusive?: BooleanProp;
+   startYear?: number;
+   endYear?: number;
+   bufferSize?: number;
+   maxValueErrorText?: string;
+   maxExclusiveErrorText?: string;
+   minValueErrorText?: string;
+   minExclusiveErrorText?: string;
+   encoding?: (date: Date) => any;
+   inclusiveTo?: boolean;
+   onBeforeSelect?: (e: Event, instance: MonthPickerInstance, dateFrom?: Date, dateTo?: Date) => boolean;
+   onSelect?: (instance: MonthPickerInstance, dateFrom?: Date, dateTo?: Date) => void;
+   hideQuarters?: boolean;
+   onCreateIsMonthDateSelectable?: (
+      validationParams: Record<string, any>,
+      instance: MonthPickerInstance,
+   ) => (monthDate: Date) => boolean;
+   handleSelect?: (e: React.MouseEvent, instance: MonthPickerInstance, dateFrom?: Date, dateTo?: Date) => void;
+   onBlur?: string | ((e: React.FocusEvent, instance: MonthPickerInstance) => void);
+   onFocusOut?: string | ((e: React.FocusEvent, instance: MonthPickerInstance) => void);
+   autoFocus?: boolean;
+}
+
+export class MonthPicker<Config extends MonthPickerConfig = MonthPickerConfig> extends Field<
+   Config,
+   MonthPickerInstance
+> {
+   declare public baseClass: string;
+   declare public mode?: string;
+   declare public range?: BooleanProp;
+   declare public from?: Prop<string | Date>;
+   declare public to?: Prop<string | Date>;
+   declare public value?: Prop<string | Date>;
+   declare public refDate?: Prop<string | Date>;
+   declare public minValue?: Prop<string | Date>;
+   declare public minExclusive?: BooleanProp;
+   declare public maxValue?: Prop<string | Date>;
+   declare public maxExclusive?: BooleanProp;
+   declare public startYear: number;
+   declare public endYear: number;
+   declare public bufferSize: number;
+   declare public maxValueErrorText: string;
+   declare public maxExclusiveErrorText: string;
+   declare public minValueErrorText: string;
+   declare public minExclusiveErrorText: string;
+   declare public encoding?: (date: Date) => any;
+   declare public inclusiveTo?: boolean;
+   declare public onBeforeSelect?: (e: Event, instance: MonthPickerInstance, dateFrom?: Date, dateTo?: Date) => boolean;
+   declare public onSelect?: (instance: MonthPickerInstance, dateFrom?: Date, dateTo?: Date) => void;
+   declare public hideQuarters?: boolean;
+   declare public onCreateIsMonthDateSelectable?: (
+      validationParams: Record<string, any>,
+      instance: MonthPickerInstance,
+   ) => (monthDate: Date) => boolean;
+   declare public onBlur?: string | ((e: React.FocusEvent, instance: MonthPickerInstance) => void);
+   declare public onFocusOut?: string | ((e: React.FocusEvent, instance: MonthPickerInstance) => void);
+
+   declareData(...args: Record<string, unknown>[]): void {
+      let values: Record<string, unknown> = {};
+
+      if (this.mode == "range") {
+         this.range = true;
+         this.mode = "edit";
+         Console.warn('Please use the range flag on MonthPickers. Syntax mode="range" is deprecated.', this);
+      }
+
+      if (this.range) {
+         values = {
+            from: null,
+            to: null,
+         };
+      } else {
+         values = {
+            value: this.emptyValue,
+         };
+      }
+
+      super.declareData(
+         values,
+         {
+            refDate: undefined,
+            disabled: undefined,
+            minValue: undefined,
+            minExclusive: undefined,
+            maxValue: undefined,
+            maxExclusive: undefined,
+         },
+         ...args,
+      );
+   }
+
+   init(): void {
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: MonthPickerInstance): void {
+      let { data } = instance;
+      data.stateMods = {
+         disabled: data.disabled,
+      };
+
+      if (!this.range && data.value) data.date = monthStart(parseDateInvariant(data.value));
+
+      if (this.range) {
+         if (data.from) data.from = monthStart(parseDateInvariant(data.from));
+
+         if (data.to) {
+            let date = parseDateInvariant(data.to);
+            if (this.inclusiveTo) date.setDate(date.getDate() + 1);
+            data.to = monthStart(date);
+         }
+      }
+
+      if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
+
+      if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
+
+      if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
+
+      if (this.onCreateIsMonthDateSelectable) {
+         instance.isMonthDateSelectable = instance.invoke(
+            "onCreateIsMonthDateSelectable",
+            data.validationParams,
+            instance,
+         );
+      }
+
+      super.prepareData(context, instance);
+   }
+
+   validate(context: RenderingContext, instance: MonthPickerInstance): void {
+      super.validate(context, instance);
+      let { data } = instance;
+      if (!data.error && data.date) {
+         let d;
+         if (data.maxValue) {
+            d = dateDiff(data.date, data.maxValue);
+            if (d > 0) data.error = StringTemplate.format(this.maxValueErrorText, data.maxValue);
+            else if (d == 0 && data.maxExclusive)
+               data.error = StringTemplate.format(this.maxExclusiveErrorText, data.maxValue);
+         }
+
+         if (data.minValue) {
+            d = dateDiff(data.date, data.minValue);
+            if (d < 0) data.error = StringTemplate.format(this.minValueErrorText, data.minValue);
+            else if (d == 0 && data.minExclusive)
+               data.error = StringTemplate.format(this.minExclusiveErrorText, data.minValue);
+         }
+      }
+   }
+
+   renderInput(context: RenderingContext, instance: MonthPickerInstance, key: string): React.ReactNode {
+      return <MonthPickerComponent key={key} instance={instance} autoFocus={this.autoFocus} />;
+   }
+
+   handleSelect(
+      e: React.KeyboardEvent | React.MouseEvent | React.TouchEvent,
+      instance: MonthPickerInstance,
+      date1: Date,
+      date2: Date,
+   ): void {
+      let { data, widget, isMonthDateSelectable } = instance;
+      let encode = widget.encoding || Culture.getDefaultDateEncoding();
+
+      if (data.disabled) return;
+
+      if (isMonthDateSelectable && !isMonthDateSelectable(date1)) return;
+      if (!dateSelectableCheck(date1, data)) return;
+
+      if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date1, date2) === false) return;
+
+      if (this.range) {
+         instance.set("from", encode(date1));
+         let toDate = new Date(date2);
+         if (this.inclusiveTo) toDate.setDate(toDate.getDate() - 1);
+         instance.set("to", encode(toDate));
+      } else instance.set("value", encode(date1));
+
+      if (this.onSelect) instance.invoke("onSelect", instance, date1, date2);
+   }
+}
+
+MonthPicker.prototype.baseClass = "monthpicker";
+MonthPicker.prototype.range = false;
+MonthPicker.prototype.startYear = 1980;
+MonthPicker.prototype.endYear = 2030;
+MonthPicker.prototype.bufferSize = 15;
+MonthPicker.prototype.hideQuarters = false;
+
+// Localization
+MonthPicker.prototype.maxValueErrorText = "Select {0:d} or before.";
+MonthPicker.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
+MonthPicker.prototype.minValueErrorText = "Select {0:d} or later.";
+MonthPicker.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
+MonthPicker.prototype.inclusiveTo = false;
+
+Localization.registerPrototype("cx/widgets/MonthPicker", MonthPicker);
+
+Widget.alias("month-picker", MonthPicker);
+
+const dateSelectableCheck = (date: Date, data: Record<string, any>): boolean => {
+   if (data.maxValue && !upperBoundCheck(date, data.maxValue as Date, data.maxExclusive)) return false;
+
+   if (data.minValue && !lowerBoundCheck(date, data.minValue as Date, data.minExclusive)) return false;
+
+   return true;
+};
+
+const monthNumber = (date: Date): number => {
+   return date.getFullYear() * 12 + date.getMonth();
+};
+
+interface MonthPickerComponentProps {
+   instance: MonthPickerInstance;
+   onBlur?: string | ((e: React.FocusEvent, instance: MonthPickerInstance) => void);
+   onFocusOut?: string | ((e: React.FocusEvent, instance: MonthPickerInstance) => void);
+   onKeyDown?: string | ((e: React.KeyboardEvent, instance: MonthPickerInstance) => boolean | void);
+   autoFocus?: boolean;
+}
+
+interface MonthPickerComponentState {
+   cursorYear: number;
+   cursorMonth: number;
+   cursorQuarter: number;
+   column: string;
+   start: number;
+   end: number;
+   state?: string;
+   hover?: boolean;
+   focused?: boolean;
+   yearHeight?: number;
+}
+
+interface CursorInfo {
+   column: string;
+   cursorYear: number;
+   cursorMonth: number;
+   cursorQuarter: number;
+   hover?: boolean;
+}
+
+export class MonthPickerComponent extends VDOM.Component<MonthPickerComponentProps, MonthPickerComponentState> {
+   dom: {
+      el?: HTMLDivElement | null;
+      table?: HTMLTableElement | null;
+   } = {};
+   dragStartDates?: [Date, Date];
+
+   constructor(props: MonthPickerComponentProps) {
+      super(props);
+      let { data, widget } = props.instance;
+
+      let cursor = monthStart(data.refDate ? data.refDate : data.date || data.from || new Date());
+
+      this.dom = {};
+
+      this.state = {
+         cursorYear: cursor.getFullYear(),
+         cursorMonth: cursor.getMonth() + 1,
+         cursorQuarter: cursor.getMonth() / 3,
+         column: "M",
+         start: widget.startYear,
+         end: Math.min(widget.startYear + widget.bufferSize, widget.endYear),
+      };
+
+      this.handleMouseDown = this.handleMouseDown.bind(this);
+      this.handleMouseUp = this.handleMouseUp.bind(this);
+      this.handleMouseEnter = this.handleMouseEnter.bind(this);
+      this.handleKeyPress = this.handleKeyPress.bind(this);
+      this.handleTouchMove = this.handleTouchMove.bind(this);
+      this.handleTouchEnd = this.handleTouchEnd.bind(this);
+   }
+
+   extractCursorInfo(el: HTMLElement): CursorInfo | false {
+      const dataPoint = el.getAttribute("data-point");
+      if (!dataPoint) return false;
+      let parts = dataPoint.split("-");
+      if (parts[0] != "Y") return false;
+      let cursor: CursorInfo = {
+         column: "Y",
+         cursorYear: Number(parts[1]),
+         cursorMonth: 1,
+         cursorQuarter: 1,
+      };
+      if (parts.length == 4) {
+         cursor.column = parts[2];
+         if (cursor.column == "M") cursor.cursorMonth = Number(parts[3]);
+         else cursor.cursorQuarter = Number(parts[3]);
+      }
+      return cursor;
+   }
+
+   moveCursor<K extends keyof MonthPickerComponentState>(
+      e: React.KeyboardEvent | React.MouseEvent | React.TouchEvent,
+      data: Pick<MonthPickerComponentState, K>,
+      options: { ensureVisible?: boolean } = {},
+   ): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if ("cursorYear" in data && data.cursorYear !== undefined) {
+         let { startYear, endYear } = this.props.instance.widget;
+         (data as any).cursorYear = Math.max(startYear, Math.min(endYear, data.cursorYear as number));
+      }
+
+      if (Object.keys(data).every((k) => this.state[k as K] == (data as any)[k])) return;
+
+      this.setState(data, () => {
+         if (options.ensureVisible) {
+            let index = this.state.cursorYear - this.state.start;
+            let tbody = this.dom.table?.children?.[index];
+            if (tbody) scrollElementIntoView(tbody);
+         }
+      });
+   }
+
+   handleKeyPress(e: React.KeyboardEvent): void {
+      let { instance } = this.props;
+      let { widget } = this.props.instance;
+      let { cursorMonth, cursorYear, cursorQuarter, column } = this.state;
+
+      switch (e.keyCode) {
+         case KeyCode.enter:
+            // if (widget.range && e.shiftKey && !this.dragStartDates) {
+            //    this.handleMouseDown(e, {}, false);
+            // } else {
+            //    this.handleMouseUp(e);
+            // }
+            this.handleMouseUp(e);
+            e.preventDefault();
+            e.stopPropagation();
+            break;
+
+         case KeyCode.left:
+            if (column == "Y") this.moveCursor(e, { cursorQuarter: 3, cursorYear: cursorYear - 1, column: "Q" });
+            else if (column == "Q") this.moveCursor(e, { cursorMonth: cursorQuarter * 4, column: "M" });
+            else if (column == "M" && (cursorMonth - 1) % 3 == 0) this.moveCursor(e, { column: "Y" });
+            else this.moveCursor(e, { cursorMonth: cursorMonth - 1 });
+            break;
+
+         case KeyCode.right:
+            if (column == "Y") this.moveCursor(e, { cursorMonth: 1, column: "M" });
+            else if (column == "Q")
+               this.moveCursor(e, { column: "Y", cursorYear: cursorQuarter == 3 ? cursorYear + 1 : cursorYear });
+            else if (column == "M" && (cursorMonth - 1) % 3 == 2)
+               this.moveCursor(e, { column: "Q", cursorQuarter: Math.floor((cursorMonth - 1) / 3) });
+            else this.moveCursor(e, { cursorMonth: cursorMonth + 1 });
+            break;
+
+         case KeyCode.up:
+            if (column == "Y") this.moveCursor(e, { cursorYear: cursorYear - 1 }, { ensureVisible: true });
+            else if (column == "Q")
+               this.moveCursor(
+                  e,
+                  {
+                     cursorQuarter: (cursorQuarter + 3) % 4,
+                     cursorYear: cursorQuarter == 0 ? cursorYear - 1 : cursorYear,
+                  },
+                  { ensureVisible: true },
+               );
+            else if (column == "M")
+               if (cursorMonth > 3) this.moveCursor(e, { cursorMonth: cursorMonth - 3 }, { ensureVisible: true });
+               else
+                  this.moveCursor(
+                     e,
+                     { cursorMonth: cursorMonth + 9, cursorYear: cursorYear - 1 },
+                     { ensureVisible: true },
+                  );
+            break;
+
+         case KeyCode.down:
+            if (column == "Y") this.moveCursor(e, { cursorYear: cursorYear + 1 }, { ensureVisible: true });
+            else if (column == "Q")
+               this.moveCursor(
+                  e,
+                  {
+                     cursorQuarter: (cursorQuarter + 1) % 4,
+                     cursorYear: cursorQuarter == 3 ? cursorYear + 1 : cursorYear,
+                  },
+                  { ensureVisible: true },
+               );
+            else if (column == "M")
+               if (cursorMonth < 10) this.moveCursor(e, { cursorMonth: cursorMonth + 3 }, { ensureVisible: true });
+               else
+                  this.moveCursor(
+                     e,
+                     { cursorMonth: cursorMonth - 9, cursorYear: cursorYear + 1 },
+                     { ensureVisible: true },
+                  );
+            break;
+
+         case KeyCode.pageUp:
+            this.moveCursor(e, { cursorYear: this.state.cursorYear - 1 });
+            break;
+
+         case KeyCode.pageDown:
+            this.moveCursor(e, { cursorYear: this.state.cursorYear + 1 });
+            break;
+
+         default:
+            if (widget.onKeyDown) instance.invoke("onKeyDown", e, instance);
+            break;
+      }
+   }
+
+   handleBlur(e: React.FocusEvent): void {
+      FocusManager.nudge();
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.onBlur) instance.invoke("onBlur", e, instance);
+      this.setState({
+         focused: false,
+      });
+   }
+
+   handleFocus(e: React.FocusEvent): void {
+      this.setState({
+         focused: true,
+      });
+      if (this.props.onFocusOut && this.dom.el) oneFocusOut(this, this.dom.el, this.handleFocusOut.bind(this));
+   }
+
+   handleFocusOut(e: React.FocusEvent): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.onFocusOut) instance.invoke("onFocusOut", e, instance);
+   }
+
+   getCursorDates(cursor?: CursorInfo): [Date, Date] {
+      let { cursorMonth, cursorYear, cursorQuarter, column } = cursor ?? this.state;
+      switch (column) {
+         case "M":
+            return [new Date(cursorYear, cursorMonth - 1, 1), new Date(cursorYear, cursorMonth, 1)];
+
+         case "Q":
+            return [new Date(cursorYear, cursorQuarter * 3, 1), new Date(cursorYear, cursorQuarter * 3 + 3, 1)];
+
+         default:
+         case "Y":
+            return [new Date(cursorYear, 0, 1), new Date(cursorYear + 1, 0, 1)];
+      }
+   }
+
+   handleTouchMove(e: React.TouchEvent): void {
+      let cursorPos = getCursorPos(e);
+      let el = document.elementFromPoint(cursorPos.clientX, cursorPos.clientY);
+      if (
+         this.dom.table &&
+         el &&
+         this.dom.table.contains(el) &&
+         el instanceof HTMLElement &&
+         isString(el.dataset.point)
+      ) {
+         let cursor = this.extractCursorInfo(el);
+         if (cursor) this.moveCursor(e, cursor);
+      }
+   }
+
+   handleTouchEnd(e: React.TouchEvent): void {
+      if (this.state.state == "drag") this.handleMouseUp(e);
+   }
+
+   handleMouseEnter(e: React.MouseEvent): void {
+      let cursor = this.extractCursorInfo(e.target as HTMLElement);
+      if (cursor) {
+         cursor.hover = !isTouchEvent();
+         this.moveCursor(e, cursor);
+      }
+   }
+
+   handleMouseDown(e: React.MouseEvent | React.TouchEvent, cursor?: CursorInfo | false, drag: boolean = true): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (!cursor) {
+         cursor = this.extractCursorInfo(e.currentTarget as HTMLElement);
+         if (!cursor) return;
+         this.moveCursor(e, cursor);
+      }
+
+      e.stopPropagation();
+      preventFocusOnTouch(e);
+
+      this.dragStartDates = this.getCursorDates(cursor);
+      if (drag) {
+         this.setState({
+            state: "drag",
+            ...cursor,
+         });
+      }
+   }
+
+   handleMouseUp(e: React.KeyboardEvent | React.MouseEvent | React.TouchEvent): void {
+      let { instance } = this.props;
+      let { widget, data } = instance;
+
+      e.stopPropagation();
+      e.preventDefault();
+
+      let [cursorFromDate, cursorToDate] = this.getCursorDates();
+      let originFromDate = cursorFromDate,
+         originToDate = cursorToDate;
+      if (widget.range && e.shiftKey) {
+         if (data.from) originFromDate = data.from;
+         if (data.to) originToDate = data.to;
+      } else if (this.state.state == "drag") {
+         if (widget.range) {
+            [originFromDate, originToDate] = this.dragStartDates!;
+         }
+         this.setState({ state: "normal" });
+      } else {
+         //skip mouse events originated somewhere else
+         if (e.type != "keydown") return;
+      }
+      widget.handleSelect(e, instance, minDate(originFromDate, cursorFromDate), maxDate(originToDate, cursorToDate));
+   }
+
+   render(): React.ReactNode {
+      let { instance } = this.props;
+      let { data, widget, isMonthDateSelectable } = instance;
+      let { CSS, baseClass, startYear, endYear, hideQuarters } = widget;
+
+      let years = [];
+
+      let { start, end } = this.state;
+
+      let from = 10000,
+         to = 0,
+         a,
+         b;
+
+      if (data.date && !widget.range) {
+         from = monthNumber(data.date);
+         to = from + 0.1;
+      } else if (widget.range) {
+         if (this.state.state == "drag") {
+            let [originFromDate, originToDate] = this.dragStartDates!;
+            let [cursorFromDate, cursorToDate] = this.getCursorDates();
+            a = Math.min(monthNumber(originFromDate), monthNumber(cursorFromDate));
+            b = Math.max(monthNumber(originToDate), monthNumber(cursorToDate));
+            from = Math.min(a, b);
+            to = Math.max(a, b);
+         } else if (data.from && data.to) {
+            a = monthNumber(data.from);
+            b = monthNumber(data.to);
+            from = Math.min(a, b);
+            to = Math.max(a, b);
+         }
+      }
+
+      let monthNames = Culture.getDateTimeCulture().getMonthNames("short");
+      let showCursor = this.state.hover || this.state.focused;
+
+      for (let y = start; y <= end; y++) {
+         let selectableMonths = 0b111111111111;
+         // Loop through the months in a year to check if all months are unselectable
+         for (let i = 0; i < 12; i++) {
+            if (
+               (isMonthDateSelectable && !isMonthDateSelectable(new Date(y, i, 1))) ||
+               !dateSelectableCheck(new Date(y, i, 1), data)
+            ) {
+               // Set month as unselectable at specified bit
+               selectableMonths &= ~(1 << i);
+            }
+         }
+
+         // All bits are 0 - all months are unselectable
+         const unselectableYear = selectableMonths === 0;
+
+         let rows = [];
+         for (let q = 0; q < 4; q++) {
+            let row = [];
+            if (q == 0) {
+               row.push(
+                  <th
+                     key="year"
+                     rowSpan={4}
+                     data-point={`Y-${y}`}
+                     className={CSS.expand(
+                        CSS.element(baseClass, "year", {
+                           cursor: showCursor && this.state.column == "Y" && y == this.state.cursorYear,
+                        }),
+                        CSS.state({ unselectable: unselectableYear }),
+                     )}
+                     onMouseEnter={unselectableYear ? undefined : this.handleMouseEnter}
+                     onMouseDown={unselectableYear ? undefined : this.handleMouseDown}
+                     onMouseUp={unselectableYear ? undefined : this.handleMouseUp}
+                  >
+                     {y}
+                  </th>,
+               );
+            }
+
+            for (let i = 0; i < 3; i++) {
+               let m = q * 3 + i + 1;
+               const unselectableMonth = (selectableMonths & (1 << (m - 1))) === 0;
+               let mno = y * 12 + m - 1;
+               let handle = true; //isTouchDevice(); //mno === from || mno === to - 1;
+               row.push(
+                  <td
+                     key={`M${m}`}
+                     className={CSS.state({
+                        cursor:
+                           showCursor &&
+                           this.state.column == "M" &&
+                           y == this.state.cursorYear &&
+                           m == this.state.cursorMonth,
+                        handle,
+                        selected: mno >= from && mno < to,
+                        unselectable: unselectableMonth,
+                     })}
+                     data-point={`Y-${y}-M-${m}`}
+                     onMouseEnter={unselectableMonth ? undefined : this.handleMouseEnter}
+                     onMouseDown={unselectableMonth ? undefined : this.handleMouseDown}
+                     onMouseUp={unselectableMonth ? undefined : this.handleMouseUp}
+                     onTouchStart={unselectableMonth ? undefined : this.handleMouseDown}
+                     onTouchMove={unselectableMonth ? undefined : this.handleTouchMove}
+                     onTouchEnd={this.handleMouseUp}
+                  >
+                     {monthNames[m - 1].substr(0, 3)}
+                  </td>,
+               );
+            }
+
+            if (!hideQuarters) {
+               let unselectableQuarter = true;
+               const start = q * 3;
+               for (let i = start; i < start + 3; i++) {
+                  if ((selectableMonths & (1 << i)) !== 0) {
+                     // found a selectable month in a quarter
+                     unselectableQuarter = false;
+                     break;
+                  }
+               }
+
+               row.push(
+                  <th
+                     key={`q${q}`}
+                     className={CSS.state({
+                        cursor:
+                           showCursor &&
+                           this.state.column == "Q" &&
+                           y == this.state.cursorYear &&
+                           q == this.state.cursorQuarter,
+                        unselectable: unselectableQuarter,
+                     })}
+                     data-point={`Y-${y}-Q-${q}`}
+                     onMouseEnter={unselectableQuarter ? undefined : this.handleMouseEnter}
+                     onMouseDown={unselectableQuarter ? undefined : this.handleMouseDown}
+                     onMouseUp={unselectableQuarter ? undefined : this.handleMouseUp}
+                  >
+                     {`Q${q + 1}`}
+                  </th>,
+               );
+            }
+
+            rows.push(row);
+         }
+         years.push(rows);
+      }
+
+      return (
+         <div
+            ref={(el) => {
+               this.dom.el = el;
+            }}
+            className={data.classNames}
+            style={data.style}
+            tabIndex={data.disabled ? null : data.tabIndex || 0}
+            onKeyDown={this.handleKeyPress}
+            onMouseDown={stopPropagation}
+            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
+            onMouseLeave={this.handleMouseLeave.bind(this)}
+            onFocus={(e) => this.handleFocus(e)}
+            onBlur={this.handleBlur.bind(this)}
+            onScroll={this.onScroll.bind(this)}
+         >
+            {this.state.yearHeight && <div style={{ height: `${(start - startYear) * this.state.yearHeight}px` }} />}
+            <table
+               ref={(el) => {
+                  this.dom.table = el;
+               }}
+            >
+               {years.map((rows, y) => (
+                  <tbody key={start + y}>
+                     {rows.map((cells, i) => (
+                        <tr key={i}>{cells}</tr>
+                     ))}
+                  </tbody>
+               ))}
+            </table>
+            {this.state.yearHeight && (
+               <div style={{ height: `${Math.max(0, endYear - end) * this.state.yearHeight}px` }} />
+            )}
+         </div>
+      );
+   }
+
+   onScroll(): void {
+      if (!this.dom.el || !this.state.yearHeight) return;
+      let { startYear, endYear, bufferSize } = this.props.instance.widget;
+      let visibleItems = ceil5(Math.ceil(this.dom.el.offsetHeight / this.state.yearHeight));
+      let start = Math.max(
+         startYear,
+         startYear + floor5(Math.floor(this.dom.el.scrollTop / this.state.yearHeight)) - visibleItems,
+      );
+      if (start != this.state.start && start + bufferSize <= endYear) {
+         this.setState({
+            start,
+            end: start + 15,
+         });
+      }
+   }
+
+   handleMouseLeave(e: React.MouseEvent): void {
+      tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance));
+      this.moveCursor(e, {
+         hover: false,
+      });
+   }
+
+   componentDidMount(): void {
+      //non-input, ok to focus on mobile
+      if (this.props.autoFocus && this.dom.el) this.dom.el.focus();
+
+      if (this.dom.el && this.dom.table) {
+         tooltipParentDidMount(this.dom.el, ...getFieldTooltip(this.props.instance));
+         let yearHeight = this.dom.table.scrollHeight / (this.props.instance.widget.bufferSize + 1);
+         this.setState(
+            {
+               yearHeight: yearHeight,
+            },
+            () => {
+               let { widget, data } = this.props.instance;
+               let { startYear } = widget;
+               let yearCount = 1;
+               if (widget.range && data.from && data.to) {
+                  yearCount = data.to.getFullYear() - data.from.getFullYear() + 1;
+                  if (data.to.getMonth() == 0 && data.to.getDate() == 1) yearCount--;
+               }
+               if (this.dom.el && this.state.yearHeight) {
+                  this.dom.el.scrollTop =
+                     (this.state.cursorYear - startYear + yearCount / 2) * this.state.yearHeight -
+                     this.dom.el.offsetHeight / 2;
+               }
+            },
+         );
+      }
+   }
+
+   UNSAFE_componentWillReceiveProps(props: MonthPickerComponentProps): void {
+      this.setState({
+         state: "normal",
+      });
+      if (this.dom.el) {
+         tooltipParentWillReceiveProps(this.dom.el, ...getFieldTooltip(props.instance));
+      }
+   }
+
+   componentWillUnmount(): void {
+      offFocusOut(this);
+      tooltipParentWillUnmount(this.props.instance);
+   }
+}
+
+function ceil5(x: number): number {
+   return Math.ceil(x / 5) * 5;
+}
+
+function floor5(x: number): number {
+   return Math.floor(x / 5) * 5;
+}
diff --git a/packages/cx/src/widgets/form/NumberField.d.ts b/packages/cx/src/widgets/form/NumberField.d.ts
deleted file mode 100644
index c039eef3e..000000000
--- a/packages/cx/src/widgets/form/NumberField.d.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface NumberFieldProps extends FieldProps {
-   /** Value of the input. */
-   value?: Cx.NumberProp;
-
-   /** Defaults to false. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** Template used to format the value. Examples: `ps` - percentage sign; `n;2` - two decimals.
-    * By default, number formatting is applied with optional maximum decimal precision. */
-   format?: Cx.StringProp;
-
-   /** Minimum number value. */
-   minValue?: Cx.NumberProp;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum number value. */
-   maxValue?: Cx.NumberProp;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** When specified, values lower than `minValue` or higher than `maxValue` will be constrained to `minValue` that is, `maxValue`, respectively. */
-   constrain?: Cx.BooleanProp;
-
-   /**
-    * Percentage used to calculate the increment when it's not explicitly specified.
-    * Default value is `0.1` (10%).
-    */
-   incrementPercentage?: Cx.NumberProp;
-
-   /** Increment/decrement value when using arrow keys or mouse wheel. */
-   increment?: Cx.NumberProp;
-
-   /** Increment/decrement value when using arrow keys or mouse wheel. */
-   step?: number;
-
-   /** Base CSS class to be applied to the field. Defaults to `numberfield`. */
-   baseClass?: string;
-
-   /** Round values to the nearest tick. Default is `true`. */
-   snapToIncrement?: boolean;
-
-   /** Name or configuration of the icon to be put on the left side of the input.  */
-   icon?: Cx.StringProp | Cx.Record;
-
-   /** Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. Default value is `true`. */
-   showClear?: boolean;
-
-   /** Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property. Default value is `false`. */
-   hideClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Defaults to `input`. Other permitted values are `enter` and `blur`. Multiple values should be separated by space, .e.g. 'enter blur'. */
-   reactOn?: string;
-
-   /** Defaults to `text`. Other permitted value is `password`. */
-   inputType?: "text" | "password";
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string;
-
-   /** Invalid input error text. */
-   inputErrorText?: string;
-
-   /** A scale used to define mapping between displayed and stored values. E.g. 0.01 for percentages. DV = (SV - OFFSET) / SCALE */
-   scale?: number;
-
-   /** Offset to define mapping between displayed and stored values. DV = (SV - OFFSET) / SCALE */
-   offset?: number;
-}
-
-export class NumberField extends Cx.Widget<NumberFieldProps> {}
diff --git a/packages/cx/src/widgets/form/NumberField.js b/packages/cx/src/widgets/form/NumberField.js
deleted file mode 100644
index f35be6380..000000000
--- a/packages/cx/src/widgets/form/NumberField.js
+++ /dev/null
@@ -1,459 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import { Format } from "../../ui/Format";
-import { Culture } from "../../ui/Culture";
-import { StringTemplate } from "../../data/StringTemplate";
-import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { Localization } from "../../ui/Localization";
-import ClearIcon from "../icons/clear";
-import { isString } from "../../util/isString";
-import { isNumber } from "../../util/isNumber";
-import { isDefined } from "../../util/isDefined";
-import { getActiveElement } from "../../util/getActiveElement";
-
-import { enableCultureSensitiveFormatting } from "../../ui/Format";
-import { KeyCode } from "../../util/KeyCode";
-import { autoFocus } from "../autoFocus";
-
-enableCultureSensitiveFormatting();
-
-export class NumberField extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: this.emptyValue,
-            disabled: undefined,
-            readOnly: undefined,
-            enabled: undefined,
-            placeholder: undefined,
-            required: undefined,
-            format: undefined,
-            minValue: undefined,
-            maxValue: undefined,
-            constrain: undefined,
-            minExclusive: undefined,
-            maxExclusive: undefined,
-            incrementPercentage: undefined,
-            increment: undefined,
-            icon: undefined,
-            scale: undefined,
-            offset: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   init() {
-      if (isDefined(this.step)) this.increment = this.step;
-
-      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
-
-      if (this.alwaysShowClear) this.showClear = true;
-
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data, state, cached } = instance;
-      data.formatted = Format.value(data.value, data.format);
-
-      if (!cached.data || data.value != cached.data.value) state.empty = data.value == null;
-
-      super.prepareData(context, instance);
-   }
-
-   formatValue(context, { data }) {
-      return data.formatted;
-   }
-
-   parseValue(value, instance) {
-      if (this.onParseInput) {
-         let result = instance.invoke("onParseInput", value, instance);
-         if (result !== undefined) return result;
-      }
-      return Culture.getNumberCulture().parse(value);
-   }
-
-   validate(context, instance) {
-      super.validate(context, instance);
-
-      let { data } = instance;
-      if (isNumber(data.value) && !data.error) {
-         if (isNumber(data.minValue)) {
-            if (data.value < data.minValue)
-               data.error = StringTemplate.format(this.minValueErrorText, Format.value(data.minValue, data.format));
-            else if (data.value == data.minValue && data.minExclusive)
-               data.error = StringTemplate.format(this.minExclusiveErrorText, Format.value(data.minValue, data.format));
-         }
-
-         if (isNumber(data.maxValue)) {
-            if (data.value > data.maxValue)
-               data.error = StringTemplate.format(this.maxValueErrorText, Format.value(data.maxValue, data.format));
-            else if (data.value == data.maxValue && data.maxExclusive)
-               data.error = StringTemplate.format(this.maxExclusiveErrorText, Format.value(data.maxValue, data.format));
-         }
-      }
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <Input
-            key={key}
-            data={instance.data}
-            instance={instance}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
-            icon={this.renderIcon(context, instance, "icon")}
-         />
-      );
-   }
-
-   validateRequired(context, instance) {
-      return instance.state.empty && this.requiredText;
-   }
-}
-
-NumberField.prototype.baseClass = "numberfield";
-NumberField.prototype.reactOn = "enter blur";
-NumberField.prototype.format = "n";
-NumberField.prototype.inputType = "text";
-
-NumberField.prototype.maxValueErrorText = "Enter {0} or less.";
-NumberField.prototype.maxExclusiveErrorText = "Enter a number less than {0}.";
-NumberField.prototype.minValueErrorText = "Enter {0} or more.";
-NumberField.prototype.minExclusiveErrorText = "Enter a number greater than {0}.";
-NumberField.prototype.inputErrorText = "Invalid number entered.";
-NumberField.prototype.suppressErrorsUntilVisited = true;
-
-NumberField.prototype.incrementPercentage = 0.1;
-NumberField.prototype.scale = 1;
-NumberField.prototype.offset = 0;
-NumberField.prototype.snapToIncrement = true;
-NumberField.prototype.icon = null;
-NumberField.prototype.showClear = false;
-NumberField.prototype.alwaysShowClear = false;
-
-Widget.alias("numberfield", NumberField);
-Localization.registerPrototype("cx/widgets/NumberField", NumberField);
-
-class Input extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         focus: false,
-      };
-   }
-
-   render() {
-      let { data, instance, label, help, icon: iconVDOM } = this.props;
-      let { widget, state } = instance;
-      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-      let icon = iconVDOM && <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
-
-      let insideButton;
-      if (!data.readOnly && !data.disabled) {
-         if (
-            widget.showClear &&
-            (((widget.alwaysShowClear || !data.required) && !data.empty) || instance.state.inputError)
-         )
-            insideButton = (
-               <div
-                  className={CSS.element(baseClass, "clear")}
-                  onMouseDown={(e) => e.preventDefault()}
-                  onClick={(e) => this.onClearClick(e)}
-               >
-                  <ClearIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-      }
-
-      let empty = this.input ? !this.input.value : data.empty;
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  visited: state.visited,
-                  focus: this.state.focus,
-                  icon: !!icon,
-                  empty: empty && !data.placeholder,
-                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               }),
-            )}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-         >
-            <input
-               id={data.id}
-               type={widget.inputType}
-               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
-               defaultValue={data.formatted}
-               ref={(el) => {
-                  this.input = el;
-               }}
-               style={data.inputStyle}
-               disabled={data.disabled}
-               readOnly={data.readOnly}
-               tabIndex={data.tabIndex}
-               placeholder={data.placeholder}
-               {...data.inputAttrs}
-               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
-               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))}
-               onChange={(e) => this.onChange(e, "change")}
-               onKeyDown={this.onKeyDown.bind(this)}
-               onBlur={(e) => {
-                  this.onChange(e, "blur");
-               }}
-               onFocus={(e) => this.onFocus()}
-               onWheel={(e) => {
-                  this.onChange(e, "wheel");
-               }}
-               onClick={stopPropagation}
-            />
-            {insideButton}
-            {icon}
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      let { data, state } = props.instance;
-      if (this.props.data.formatted != data.formatted && !state.inputError) {
-         this.input.value = props.data.formatted || "";
-         props.instance.setState({
-            inputError: false,
-         });
-      }
-      tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(props.instance));
-   }
-
-   componentDidMount() {
-      tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
-      autoFocus(this.input, this);
-   }
-
-   componentDidUpdate() {
-      autoFocus(this.input, this);
-   }
-
-   componentWillUnmount() {
-      if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
-         this.onChange({ target: { value: this.input.value } }, "blur");
-      }
-      tooltipParentWillUnmount(this.props.instance);
-   }
-
-   getPreCursorDigits(text, cursor, decimalSeparator) {
-      let res = "";
-      for (let i = 0; i < cursor; i++) {
-         if ("0" <= text[i] && text[i] <= "9") res += text[i];
-         else if (text[i] == decimalSeparator) res += ".";
-         else if (text[i] == "-") res += "-";
-      }
-      return res;
-   }
-
-   getLengthWithoutSuffix(text, decimalSeparator) {
-      let l = text.length;
-      while (l > 0) {
-         if ("0" <= text[l - 1] && text[l - 1] <= "9") break;
-         if (text[l - 1] == decimalSeparator) break;
-         l--;
-      }
-      return l;
-   }
-
-   getDecimalSeparator(format) {
-      let text = Format.value(0.11111111, format);
-      for (let i = text.length - 1; i >= 0; i--) {
-         if ("0" <= text[i] && text[i] <= "9") continue;
-         if (text[i] == "," || text[i] == ".") return text[i];
-         break;
-      }
-      return null;
-   }
-
-   updateCursorPosition(preCursorText) {
-      if (isString(preCursorText)) {
-         let cursor = 0;
-         let preCursor = 0;
-         let text = this.input.value || "";
-         while (preCursor < preCursorText.length && cursor < text.length) {
-            if (text[cursor] == preCursorText[preCursor]) {
-               cursor++;
-               preCursor++;
-            } else {
-               cursor++;
-            }
-         }
-         this.input.setSelectionRange(cursor, cursor);
-      }
-   }
-
-   calculateIncrement(value, strength) {
-      if (value == 0) return 0.1;
-      let absValue = Math.abs(value * strength);
-      let log10 = Math.floor(Math.log10(absValue) + 0.001);
-      let size = Math.pow(10, log10);
-      if (absValue / size > 4.999) return 5 * size;
-      if (absValue / size > 1.999) return 2 * size;
-      return size;
-   }
-
-   onClearClick(e) {
-      this.input.value = "";
-      let { instance } = this.props;
-      instance.set("value", instance.widget.emptyValue, { immediate: true });
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.enter:
-            this.onChange(e, "enter");
-            break;
-
-         case KeyCode.left:
-         case KeyCode.right:
-            e.stopPropagation();
-            break;
-      }
-   }
-
-   onChange(e, change) {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-
-      if (data.required) {
-         instance.setState({
-            empty: !e.target.value,
-         });
-      }
-
-      if (change == "blur" && this.state.focus) {
-         this.setState({
-            focus: false,
-         });
-      }
-
-      let immediate = change == "blur" || change == "enter";
-
-      if ((widget.reactOn.indexOf(change) == -1 && !immediate) || data.disabled || data.readOnly) return;
-
-      if (immediate) instance.setState({ visited: true });
-
-      let value = null;
-
-      if (e.target.value) {
-         let displayValue = widget.parseValue(e.target.value, instance);
-         if (isNaN(displayValue)) {
-            instance.setState({
-               inputError: instance.widget.inputErrorText,
-            });
-            return;
-         }
-
-         value = displayValue * data.scale + data.offset;
-
-         if (change == "wheel") {
-            e.preventDefault();
-            let increment =
-               data.increment != null ? data.increment : this.calculateIncrement(value, data.incrementPercentage);
-            value = value + (e.deltaY < 0 ? increment : -increment);
-            if (widget.snapToIncrement) {
-               value = Math.round(value / increment) * increment;
-            }
-
-            if (data.minValue != null) {
-               if (data.minExclusive) {
-                  if (value <= data.minValue) return;
-               } else {
-                  value = Math.max(value, data.minValue);
-               }
-            }
-
-            if (data.maxValue != null) {
-               if (data.maxExclusive) {
-                  if (value >= data.maxValue) return;
-               } else {
-                  value = Math.min(value, data.maxValue);
-               }
-            }
-         }
-
-         if (data.constrain) {
-            if (data.minValue != null) {
-               if (value < data.minValue) {
-                  value = data.minValue;
-               }
-            }
-
-            if (data.maxValue != null) {
-               if (value > data.maxValue) {
-                  value = data.maxValue;
-               }
-            }
-         }
-
-         let fmt = data.format;
-         let decimalSeparator = this.getDecimalSeparator(fmt) || Format.value(1.1, "n;1")[1];
-
-         let formatted = Format.value(value, fmt);
-         // Re-parse to avoid differences between formatted value and value in the store
-
-         value = widget.parseValue(formatted, instance) * data.scale + data.offset;
-
-         // Allow users to type numbers like 100.0003 or -0.05 without interruptions
-         // If the last typed character is zero or dot (decimal separator), skip processing it
-         if (
-            change == "change" &&
-            this.input.selectionStart == this.input.selectionEnd &&
-            this.input.selectionEnd >= this.getLengthWithoutSuffix(this.input.value, decimalSeparator) &&
-            (e.target.value[this.input.selectionEnd - 1] == decimalSeparator ||
-               (e.target.value.indexOf(decimalSeparator) >= 0 && e.target.value[this.input.selectionEnd - 1] == "0") ||
-               (this.input.selectionEnd == 2 && e.target.value[0] === "-" && e.target.value[1] === "0"))
-         )
-            return;
-
-         if (change != "blur") {
-            // Format, but keep the correct cursor position
-            let preCursorText = this.getPreCursorDigits(this.input.value, this.input.selectionStart, decimalSeparator);
-            this.input.value = formatted;
-            this.updateCursorPosition(preCursorText);
-         } else {
-            this.input.value = formatted;
-         }
-      }
-
-      instance.set("value", value, { immediate });
-
-      instance.setState({
-         inputError: false,
-         visited: true,
-      });
-   }
-
-   onFocus() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.trackFocus) {
-         this.setState({
-            focus: true,
-         });
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/form/NumberField.scss b/packages/cx/src/widgets/form/NumberField.scss
index 9b1df32eb..4185b9338 100644
--- a/packages/cx/src/widgets/form/NumberField.scss
+++ b/packages/cx/src/widgets/form/NumberField.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-numberfield(
    $name: "numberfield",
    $state-style-map: $cx-std-field-state-style-map,
@@ -10,9 +12,9 @@
    $width: $cx-default-input-width,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
    $padding: cx-get-state-rule($state-style-map, default, "padding");
 
    .#{$block}#{$name} {
diff --git a/packages/cx/src/widgets/form/NumberField.tsx b/packages/cx/src/widgets/form/NumberField.tsx
new file mode 100644
index 000000000..88c82ab53
--- /dev/null
+++ b/packages/cx/src/widgets/form/NumberField.tsx
@@ -0,0 +1,543 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Field, getFieldTooltip, FieldInstance, FieldConfig } from "./Field";
+import { Format } from "../../ui/Format";
+import { Culture } from "../../ui/Culture";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { StringTemplate } from "../../data/StringTemplate";
+import {
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   tooltipMouseMove,
+   tooltipMouseLeave,
+   tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { Localization } from "../../ui/Localization";
+import ClearIcon from "../icons/clear";
+import { isString } from "../../util/isString";
+import { isNumber } from "../../util/isNumber";
+import { isDefined } from "../../util/isDefined";
+import { getActiveElement } from "../../util/getActiveElement";
+
+import { enableCultureSensitiveFormatting } from "../../ui/Format";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+import { Prop, NumberProp, StringProp, BooleanProp } from "../../ui/Prop";
+
+enableCultureSensitiveFormatting();
+
+export interface NumberFieldConfig extends FieldConfig {
+   value?: NumberProp;
+   readOnly?: BooleanProp;
+   enabled?: BooleanProp;
+   placeholder?: StringProp;
+   format?: StringProp;
+   minValue?: NumberProp;
+   minExclusive?: BooleanProp;
+   maxValue?: NumberProp;
+   maxExclusive?: BooleanProp;
+   constrain?: BooleanProp;
+   incrementPercentage?: NumberProp;
+   increment?: NumberProp;
+   step?: number;
+   baseClass?: string;
+   snapToIncrement?: boolean;
+   showClear?: boolean;
+   hideClear?: boolean;
+   alwaysShowClear?: boolean;
+   reactOn?: string;
+   inputType?: "text" | "password";
+   maxValueErrorText?: string;
+   maxExclusiveErrorText?: string;
+   minValueErrorText?: string;
+   minExclusiveErrorText?: string;
+   inputErrorText?: string;
+   scale?: number;
+   offset?: number;
+
+   /** Custom validation function. */
+   onValidate?: string | ((value: number, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class NumberField<Config extends NumberFieldConfig = NumberFieldConfig> extends Field<Config> {
+   declare public baseClass: string;
+   declare public reactOn: string;
+   declare public format: string;
+   declare public inputType: string;
+   declare public incrementPercentage: number;
+   declare public increment?: number;
+   declare public scale: number;
+   declare public offset: number;
+   declare public step?: number;
+   declare public hideClear?: boolean;
+   declare public showClear?: boolean;
+   declare public alwaysShowClear?: boolean;
+   declare public snapToIncrement?: boolean;
+   declare public onParseInput?: string | ((value: string, instance: Instance) => number | undefined);
+   declare public minValueErrorText: string;
+   declare public maxValueErrorText: string;
+   declare public minExclusiveErrorText: string;
+   declare public maxExclusiveErrorText: string;
+   declare public inputErrorText?: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: this.emptyValue,
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            format: undefined,
+            minValue: undefined,
+            maxValue: undefined,
+            constrain: undefined,
+            minExclusive: undefined,
+            maxExclusive: undefined,
+            incrementPercentage: undefined,
+            increment: undefined,
+            icon: undefined,
+            scale: undefined,
+            offset: undefined,
+         },
+         ...args,
+      );
+   }
+
+   init(): void {
+      if (isDefined(this.step)) this.increment = this.step;
+
+      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
+
+      if (this.alwaysShowClear) this.showClear = true;
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<NumberField>): void {
+      let { data, state, cached } = instance;
+      data.formatted = Format.value(data.value, data.format);
+
+      if (!cached.data || data.value != cached.data.value) state.empty = data.value == null;
+
+      super.prepareData(context, instance);
+   }
+
+   formatValue(context: RenderingContext, { data }: FieldInstance<NumberField>): string | number | undefined {
+      return data.formatted;
+   }
+
+   parseValue(value: string, instance: FieldInstance<NumberField>): number {
+      if (this.onParseInput) {
+         let result = instance.invoke("onParseInput", value, instance);
+         if (result !== undefined) return result;
+      }
+      return Culture.getNumberCulture().parse(value);
+   }
+
+   validate(context: RenderingContext, instance: FieldInstance<NumberField>): void {
+      super.validate(context, instance);
+
+      let { data } = instance;
+      if (isNumber(data.value) && !data.error) {
+         if (isNumber(data.minValue)) {
+            if (data.value < data.minValue)
+               data.error = StringTemplate.format(this.minValueErrorText, Format.value(data.minValue, data.format));
+            else if (data.value == data.minValue && data.minExclusive)
+               data.error = StringTemplate.format(this.minExclusiveErrorText, Format.value(data.minValue, data.format));
+         }
+
+         if (isNumber(data.maxValue)) {
+            if (data.value > data.maxValue)
+               data.error = StringTemplate.format(this.maxValueErrorText, Format.value(data.maxValue, data.format));
+            else if (data.value == data.maxValue && data.maxExclusive)
+               data.error = StringTemplate.format(this.maxExclusiveErrorText, Format.value(data.maxValue, data.format));
+         }
+      }
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<NumberField>, key: string): React.ReactNode {
+      return (
+         <Input
+            key={key}
+            data={instance.data}
+            instance={instance}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+            icon={this.renderIcon(context, instance, "icon")}
+         />
+      );
+   }
+
+   validateRequired(context: RenderingContext, instance: FieldInstance<NumberField>): string | undefined {
+      return instance.state.empty && this.requiredText;
+   }
+}
+
+NumberField.prototype.baseClass = "numberfield";
+NumberField.prototype.reactOn = "enter blur";
+NumberField.prototype.format = "n";
+NumberField.prototype.inputType = "text";
+
+NumberField.prototype.maxValueErrorText = "Enter {0} or less.";
+NumberField.prototype.maxExclusiveErrorText = "Enter a number less than {0}.";
+NumberField.prototype.minValueErrorText = "Enter {0} or more.";
+NumberField.prototype.minExclusiveErrorText = "Enter a number greater than {0}.";
+NumberField.prototype.inputErrorText = "Invalid number entered.";
+NumberField.prototype.suppressErrorsUntilVisited = true;
+
+NumberField.prototype.incrementPercentage = 0.1;
+NumberField.prototype.scale = 1;
+NumberField.prototype.offset = 0;
+NumberField.prototype.snapToIncrement = true;
+NumberField.prototype.icon = null;
+NumberField.prototype.showClear = false;
+NumberField.prototype.alwaysShowClear = false;
+
+Widget.alias("numberfield", NumberField);
+Localization.registerPrototype("cx/widgets/NumberField", NumberField);
+
+interface InputProps {
+   instance: FieldInstance<NumberField>;
+   data: Record<string, any>;
+   label?: React.ReactNode;
+   help?: React.ReactNode;
+   icon?: React.ReactNode;
+}
+
+interface InputState {
+   focus: boolean;
+}
+
+class Input extends VDOM.Component<InputProps, InputState> {
+   input?: HTMLInputElement;
+
+   constructor(props: InputProps) {
+      super(props);
+      this.state = {
+         focus: false,
+      };
+   }
+
+   render(): React.ReactNode {
+      let { data, instance, label, help, icon: iconVDOM } = this.props;
+      let { widget, state } = instance;
+      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+
+      let icon = iconVDOM && <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
+
+      let insideButton;
+      if (!data.readOnly && !data.disabled) {
+         if (
+            widget.showClear &&
+            (((widget.alwaysShowClear || !data.required) && !data.empty) || instance.state.inputError)
+         )
+            insideButton = (
+               <div
+                  className={CSS.element(baseClass, "clear")}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={(e) => this.onClearClick(e)}
+               >
+                  <ClearIcon className={CSS.element(baseClass, "icon")} />
+               </div>
+            );
+      }
+
+      let empty = this.input ? !this.input.value : data.empty;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  visited: state.visited,
+                  focus: this.state.focus,
+                  icon: !!icon,
+                  empty: empty && !data.placeholder,
+                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
+               }),
+            )}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+         >
+            <input
+               id={data.id}
+               type={widget.inputType}
+               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
+               defaultValue={data.formatted}
+               ref={(el: HTMLInputElement | null) => {
+                  this.input = el || undefined;
+               }}
+               style={data.inputStyle}
+               disabled={data.disabled}
+               readOnly={data.readOnly}
+               tabIndex={data.tabIndex}
+               placeholder={data.placeholder}
+               {...data.inputAttrs}
+               onMouseMove={(e: React.MouseEvent<HTMLInputElement>) =>
+                  tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))
+               }
+               onMouseLeave={(e: React.MouseEvent<HTMLInputElement>) =>
+                  tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))
+               }
+               onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.onChange(e, "change")}
+               onKeyDown={this.onKeyDown.bind(this)}
+               onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+                  this.onChange(e, "blur");
+               }}
+               onFocus={(e: React.FocusEvent<HTMLInputElement>) => this.onFocus()}
+               onWheel={(e: React.WheelEvent<HTMLInputElement>) => {
+                  this.onChange(e, "wheel");
+               }}
+               onClick={stopPropagation}
+            />
+            {insideButton}
+            {icon}
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   UNSAFE_componentWillReceiveProps(props: InputProps): void {
+      let { data, state } = props.instance;
+      if (this.props.data.formatted != data.formatted && !state.inputError) {
+         this.input!.value = props.data.formatted || "";
+         props.instance.setState({
+            inputError: false,
+         });
+      }
+      tooltipParentWillReceiveProps(this.input!, ...getFieldTooltip(props.instance));
+   }
+
+   componentDidMount(): void {
+      tooltipParentDidMount(this.input!, ...getFieldTooltip(this.props.instance));
+      autoFocus(this.input, this);
+   }
+
+   componentDidUpdate(): void {
+      autoFocus(this.input, this);
+   }
+
+   componentWillUnmount(): void {
+      if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
+         this.onChange({ currentTarget: this.input } as React.SyntheticEvent<HTMLInputElement>, "blur");
+      }
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   getPreCursorDigits(text: string, cursor: number, decimalSeparator: string): string {
+      let res = "";
+      for (let i = 0; i < cursor; i++) {
+         if ("0" <= text[i] && text[i] <= "9") res += text[i];
+         else if (text[i] == decimalSeparator) res += ".";
+         else if (text[i] == "-") res += "-";
+      }
+      return res;
+   }
+
+   getLengthWithoutSuffix(text: string, decimalSeparator: string): number {
+      let l = text.length;
+      while (l > 0) {
+         if ("0" <= text[l - 1] && text[l - 1] <= "9") break;
+         if (text[l - 1] == decimalSeparator) break;
+         l--;
+      }
+      return l;
+   }
+
+   getDecimalSeparator(format: string): string | null {
+      let text = Format.value(0.11111111, format);
+      for (let i = text.length - 1; i >= 0; i--) {
+         if ("0" <= text[i] && text[i] <= "9") continue;
+         if (text[i] == "," || text[i] == ".") return text[i];
+         break;
+      }
+      return null;
+   }
+
+   updateCursorPosition(preCursorText: string | undefined): void {
+      if (isString(preCursorText)) {
+         let cursor = 0;
+         let preCursor = 0;
+         let text = this.input!.value || "";
+         while (preCursor < preCursorText.length && cursor < text.length) {
+            if (text[cursor] == preCursorText[preCursor]) {
+               cursor++;
+               preCursor++;
+            } else {
+               cursor++;
+            }
+         }
+         this.input!.setSelectionRange(cursor, cursor);
+      }
+   }
+
+   calculateIncrement(value: number, strength: number): number {
+      if (value == 0) return 0.1;
+      let absValue = Math.abs(value * strength);
+      let log10 = Math.floor(Math.log10(absValue) + 0.001);
+      let size = Math.pow(10, log10);
+      if (absValue / size > 4.999) return 5 * size;
+      if (absValue / size > 1.999) return 2 * size;
+      return size;
+   }
+
+   onClearClick(e: React.MouseEvent): void {
+      this.input!.value = "";
+      let { instance } = this.props;
+      instance.set("value", instance.widget.emptyValue, { immediate: true });
+   }
+
+   onKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.enter:
+            this.onChange(e, "enter");
+            break;
+
+         case KeyCode.left:
+         case KeyCode.right:
+            e.stopPropagation();
+            break;
+      }
+   }
+
+   onChange(e: React.SyntheticEvent<HTMLInputElement> | React.WheelEvent<HTMLInputElement>, change: string): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      let inputValue = e.currentTarget.value;
+
+      if (data.required) {
+         instance.setState({
+            empty: !inputValue,
+         });
+      }
+
+      if (change == "blur" && this.state.focus) {
+         this.setState({
+            focus: false,
+         });
+      }
+
+      let immediate = change == "blur" || change == "enter";
+
+      if ((widget.reactOn.indexOf(change) == -1 && !immediate) || data.disabled || data.readOnly) return;
+
+      if (immediate) instance.setState({ visited: true });
+
+      let value = null;
+
+      if (inputValue) {
+         let displayValue = widget.parseValue(inputValue, instance);
+         if (isNaN(displayValue)) {
+            instance.setState({
+               inputError: instance.widget.inputErrorText,
+            });
+            return;
+         }
+
+         value = displayValue * data.scale + data.offset;
+
+         if (change == "wheel") {
+            e.preventDefault();
+            let increment =
+               data.increment != null ? data.increment : this.calculateIncrement(value, data.incrementPercentage);
+            let deltaY = (e as React.WheelEvent<HTMLInputElement>).deltaY;
+            value = value + (deltaY < 0 ? increment : -increment);
+            if (widget.snapToIncrement) {
+               value = Math.round(value / increment) * increment;
+            }
+
+            if (data.minValue != null) {
+               if (data.minExclusive) {
+                  if (value <= data.minValue) return;
+               } else {
+                  value = Math.max(value, data.minValue);
+               }
+            }
+
+            if (data.maxValue != null) {
+               if (data.maxExclusive) {
+                  if (value >= data.maxValue) return;
+               } else {
+                  value = Math.min(value, data.maxValue);
+               }
+            }
+         }
+
+         if (data.constrain) {
+            if (data.minValue != null) {
+               if (value < data.minValue) {
+                  value = data.minValue;
+               }
+            }
+
+            if (data.maxValue != null) {
+               if (value > data.maxValue) {
+                  value = data.maxValue;
+               }
+            }
+         }
+
+         let fmt = data.format;
+         let decimalSeparator = this.getDecimalSeparator(fmt) || Format.value(1.1, "n;1")[1];
+
+         let formatted = Format.value(value, fmt);
+         // Re-parse to avoid differences between formatted value and value in the store
+
+         value = widget.parseValue(formatted, instance) * data.scale + data.offset;
+
+         // Allow users to type numbers like 100.0003 or -0.05 without interruptions
+         // If the last typed character is zero or dot (decimal separator), skip processing it
+         let selectionEnd = this.input!.selectionEnd;
+         if (
+            change == "change" &&
+            this.input!.selectionStart == selectionEnd &&
+            selectionEnd != null &&
+            selectionEnd >= this.getLengthWithoutSuffix(this.input!.value, decimalSeparator) &&
+            (inputValue[selectionEnd - 1] == decimalSeparator ||
+               (inputValue.indexOf(decimalSeparator) >= 0 && inputValue[selectionEnd - 1] == "0") ||
+               (selectionEnd == 2 && inputValue[0] === "-" && inputValue[1] === "0"))
+         )
+            return;
+
+         if (change != "blur") {
+            // Format, but keep the correct cursor position
+            let preCursorText = this.getPreCursorDigits(
+               this.input!.value,
+               this.input!.selectionStart!,
+               decimalSeparator,
+            );
+            this.input!.value = formatted;
+            this.updateCursorPosition(preCursorText);
+         } else {
+            this.input!.value = formatted;
+         }
+      }
+
+      instance.set("value", value, { immediate });
+
+      instance.setState({
+         inputError: false,
+         visited: true,
+      });
+   }
+
+   onFocus(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/form/Radio.d.ts b/packages/cx/src/widgets/form/Radio.d.ts
deleted file mode 100644
index 331443c57..000000000
--- a/packages/cx/src/widgets/form/Radio.d.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
-
-interface RadioProps extends FieldProps {
-
-   /** Selected value. If the value is equal to `option`, the radio button appears checked. */
-   value?: Cx.Prop< number | string | boolean >,
-
-   /** Selected value. If the value is equal to `option`, the radio button appears checked. */
-   selection?: Cx.Prop< number | string | boolean >,
-
-   /** Value to be written into `value` if radio button is clicked. */
-   option?: Cx.Prop< number | string | boolean >,
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp,
-
-   /** Text description. */
-   text?: Cx.StringProp,
-
-   /** Base CSS class to be applied to the field. Defaults to `radio`. */
-   baseClass?: string,
-
-   /** 
-    * Use native radio HTML element (`<input type="radio"/>`). 
-    * Default is `false`. Native radio buttons are difficult to style.
-    */
-   native?: boolean,
-
-   /**
-    * Set to `true` to set the make the radio initially selected.
-    */
-   default?: boolean
-
-}
-
-export class Radio extends Cx.Widget<RadioProps> {}
diff --git a/packages/cx/src/widgets/form/Radio.js b/packages/cx/src/widgets/form/Radio.js
deleted file mode 100644
index a7fc1d69f..000000000
--- a/packages/cx/src/widgets/form/Radio.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { KeyCode } from "../../util/KeyCode";
-import { isUndefined } from "../../util/isUndefined";
-
-export class Radio extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: undefined,
-            selection: undefined,
-            option: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            readOnly: undefined,
-            required: undefined,
-            text: undefined,
-         },
-         ...arguments
-      );
-   }
-
-   init() {
-      if (this.selection) this.value = this.selection;
-
-      super.init();
-   }
-
-   formatValue(context, { data }) {
-      return data.text;
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(...arguments);
-      let { data } = instance;
-      data.checked = data.value === data.option;
-      if (this.default && isUndefined(data.value)) instance.set("value", data.option);
-   }
-
-   renderValue(context, { data }) {
-      if (data.value === data.option) return super.renderValue(...arguments);
-      return null;
-   }
-
-   renderWrap(context, instance, key, content) {
-      var { data } = instance;
-      return (
-         <label
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            onClick={(e) => {
-               this.handleClick(e, instance);
-            }}
-            htmlFor={data.id}
-         >
-            {content}
-            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-         </label>
-      );
-   }
-
-   renderNativeCheck(context, instance) {
-      var { CSS, baseClass } = this;
-      var { data } = instance;
-      return (
-         <input
-            key="input"
-            className={CSS.element(baseClass, "radio")}
-            id={data.id}
-            type="radio"
-            checked={data.checked}
-            disabled={data.disabled}
-            {...data.inputAttrs}
-            onClick={stopPropagation}
-            onChange={(e) => {
-               this.handleChange(e, instance);
-            }}
-         />
-      );
-   }
-
-   renderCheck(context, instance) {
-      return <RadioCmp key="check" instance={instance} data={instance.data} />;
-   }
-
-   renderInput(context, instance, key) {
-      var { data } = instance;
-      var text = data.text || this.renderChildren(context, instance);
-      var { CSS, baseClass } = this;
-      return this.renderWrap(context, instance, key, [
-         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
-         text ? (
-            <div key="text" className={CSS.element(baseClass, "text")}>
-               {text}
-            </div>
-         ) : (
-            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
-               &nbsp;
-            </span>
-         ),
-      ]);
-   }
-
-   handleClick(e, instance) {
-      if (this.native) e.stopPropagation();
-      else {
-         var el = document.getElementById(instance.data.id);
-         if (el) el.focus();
-         e.preventDefault();
-         this.handleChange(e, instance);
-      }
-   }
-
-   handleChange(e, instance) {
-      var { data } = instance;
-      if (data.disabled || data.readOnly || data.viewMode) return;
-      instance.set("value", data.option);
-   }
-}
-
-Radio.prototype.baseClass = "radio";
-Radio.prototype.native = false;
-Radio.prototype.default = false;
-
-Widget.alias("radio", Radio);
-
-class RadioCmp extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         value: props.data.checked,
-      };
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      this.setState({
-         value: props.data.checked,
-      });
-   }
-
-   render() {
-      var { instance, data } = this.props;
-      var { widget } = instance;
-      var { baseClass, CSS } = widget;
-
-      return (
-         <span
-            key="check"
-            tabIndex={data.disabled ? null : data.tabIndex || 0}
-            className={CSS.element(baseClass, "input", {
-               checked: this.state.value,
-            })}
-            style={CSS.parseStyle(data.inputStyle)}
-            id={data.id}
-            onClick={this.onClick.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
-         />
-      );
-   }
-
-   onClick(e) {
-      var { instance, data } = this.props;
-      var { widget } = instance;
-      if (!data.disabled && !data.readOnly) {
-         e.stopPropagation();
-         e.preventDefault();
-         widget.handleChange(e, instance);
-      }
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.space:
-            this.onClick(e);
-            break;
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/form/Radio.scss b/packages/cx/src/widgets/form/Radio.scss
index 5d3f9dc2f..29f539ef1 100644
--- a/packages/cx/src/widgets/form/Radio.scss
+++ b/packages/cx/src/widgets/form/Radio.scss
@@ -1,12 +1,14 @@
+@use "sass:map";
+
 @mixin cx-radio(
    $name: "radio",
    $state-style-map: $cx-radio-state-style-map,
    $size: $cx-default-radio-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    $padding: cx-get-state-rule($state-style-map, default, padding);
    $border-width: cx-get-state-rule($state-style-map, default, border-width);
diff --git a/packages/cx/src/widgets/form/Radio.tsx b/packages/cx/src/widgets/form/Radio.tsx
new file mode 100644
index 000000000..c4cf05c84
--- /dev/null
+++ b/packages/cx/src/widgets/form/Radio.tsx
@@ -0,0 +1,249 @@
+/** @jsxImportSource react */
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
+import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import { isUndefined } from "../../util/isUndefined";
+import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
+
+export interface RadioConfig extends FieldConfig {
+   /** Selected value. If the value is equal to `option`, the radio button appears checked. */
+   value?: Prop<number | string | boolean>;
+
+   /** Selected value. If the value is equal to `option`, the radio button appears checked. */
+   selection?: Prop<number | string | boolean>;
+
+   /** Value to be written into `value` if radio button is clicked. */
+   option?: Prop<number | string | boolean>;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: BooleanProp;
+
+   /** Text description. */
+   text?: StringProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `radio`. */
+   baseClass?: string;
+
+   /** Use native radio HTML element. Default is `false`. */
+   native?: boolean;
+
+   /** Set to `true` to make the radio initially selected. */
+   default?: boolean;
+
+   /** Custom validation function. */
+   onValidate?:
+      | string
+      | ((value: number | string | boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class Radio extends Field<RadioConfig> {
+   declare public selection?: Prop<number | string | boolean>;
+   declare public option?: Prop<number | string | boolean>;
+   declare public native?: boolean;
+   declare public default?: boolean;
+   declare public value?: Prop<number | string | boolean>;
+
+   constructor(config?: RadioConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: undefined,
+            selection: undefined,
+            option: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            required: undefined,
+            text: undefined,
+         },
+         ...args,
+      );
+   }
+
+   init(): void {
+      if (this.selection) this.value = this.selection;
+
+      super.init();
+   }
+
+   formatValue(context: RenderingContext, { data }: Instance): React.ReactNode {
+      return data.text;
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<Radio>): void {
+      super.prepareData(context, instance);
+      let { data } = instance;
+      data.checked = data.value === data.option;
+      if (this.default && isUndefined(data.value)) instance.set("value", data.option);
+   }
+
+   renderValue(context: RenderingContext, { data }: FieldInstance): React.ReactNode {
+      if (data.value === data.option) return super.renderValue(context, { data } as FieldInstance);
+      return null;
+   }
+
+   renderWrap(
+      context: RenderingContext,
+      instance: FieldInstance,
+      key: string,
+      content: React.ReactNode,
+   ): React.ReactElement {
+      var { data } = instance;
+      return (
+         <label
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+            onMouseMove={(e: React.MouseEvent) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
+            onMouseLeave={(e: React.MouseEvent) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
+            onClick={(e: React.MouseEvent) => {
+               this.handleClick(e, instance);
+            }}
+            htmlFor={data.id}
+         >
+            {content}
+            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+         </label>
+      );
+   }
+
+   renderNativeCheck(context: RenderingContext, instance: Instance): React.ReactElement {
+      var { CSS, baseClass } = this;
+      var { data } = instance;
+      return (
+         <input
+            key="input"
+            className={CSS.element(baseClass, "radio")}
+            id={data.id}
+            type="radio"
+            checked={data.checked}
+            disabled={data.disabled}
+            {...data.inputAttrs}
+            onClick={stopPropagation}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+               this.handleChange(e, instance);
+            }}
+         />
+      );
+   }
+
+   renderCheck(context: RenderingContext, instance: FieldInstance<Radio>): React.ReactElement {
+      return <RadioCmp key="check" instance={instance} data={instance.data} />;
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<Radio>, key: string): React.ReactElement {
+      var { data } = instance;
+      var text = data.text || this.renderChildren(context, instance);
+      var { CSS, baseClass } = this;
+      return this.renderWrap(context, instance, key, [
+         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
+         text ? (
+            <div key="text" className={CSS.element(baseClass, "text")}>
+               {text}
+            </div>
+         ) : (
+            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
+               &nbsp;
+            </span>
+         ),
+      ]);
+   }
+
+   handleClick(e: React.MouseEvent, instance: Instance): void {
+      if (this.native) e.stopPropagation();
+      else {
+         var el = document.getElementById(instance.data.id);
+         if (el) el.focus();
+         e.preventDefault();
+         this.handleChange(e, instance);
+      }
+   }
+
+   handleChange(e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent, instance: Instance): void {
+      var { data } = instance;
+      if (data.disabled || data.readOnly || data.viewMode) return;
+      instance.set("value", data.option);
+   }
+}
+
+Radio.prototype.baseClass = "radio";
+Radio.prototype.native = false;
+Radio.prototype.default = false;
+
+Widget.alias("radio", Radio);
+
+interface RadioCmpProps {
+   key?: string;
+   instance: FieldInstance<Radio>;
+   data: Record<string, any>;
+}
+
+interface RadioCmpState {
+   value: unknown;
+}
+
+class RadioCmp extends VDOM.Component<RadioCmpProps, RadioCmpState> {
+   constructor(props: RadioCmpProps) {
+      super(props);
+      this.state = {
+         value: props.data.checked,
+      };
+   }
+
+   UNSAFE_componentWillReceiveProps(props: RadioCmpProps): void {
+      this.setState({
+         value: props.data.checked,
+      });
+   }
+
+   render(): React.ReactElement {
+      var { instance, data } = this.props;
+      var { widget } = instance;
+      var { baseClass, CSS } = widget;
+
+      return (
+         <span
+            key="check"
+            tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
+            className={CSS.element(baseClass, "input", {
+               checked: this.state.value,
+            })}
+            style={CSS.parseStyle(data.inputStyle)}
+            id={data.id}
+            onClick={this.onClick.bind(this)}
+            onKeyDown={this.onKeyDown.bind(this)}
+         />
+      );
+   }
+
+   onClick(e: React.MouseEvent): void {
+      var { instance, data } = this.props;
+      var { widget } = instance;
+      if (!data.disabled && !data.readOnly) {
+         e.stopPropagation();
+         e.preventDefault();
+         (widget as Radio).handleChange(e, instance);
+      }
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let { instance } = this.props;
+      const widget = instance.widget as Radio;
+      if (widget.handleKeyDown && widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.space:
+            this.onClick(e as unknown as React.MouseEvent);
+            break;
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/form/Select.d.ts b/packages/cx/src/widgets/form/Select.d.ts
deleted file mode 100644
index 4de1ba5fa..000000000
--- a/packages/cx/src/widgets/form/Select.d.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface SelectProps extends FieldProps {
-   /** Select value. */
-   value?: Cx.Prop<number | string>;
-
-   /** Value when no selection is made. Default is `undefined` */
-   emptyValue?: any;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /**
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property. Default value is `false`.
-    * Note, the `placeholder` needs to be specified for the clear button to render.
-    */
-   hideClear?: boolean;
-
-   /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. Default value is `true`.
-    * Note, the `placeholder` needs to be specified for the clear button to render.
-    */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to `select`. */
-   baseClass?: string;
-
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: boolean;
-
-   /**
-    * Convert values before selection.
-    * Useful for converting strings into numbers. Default is `true`.
-    */
-   convertValues?: boolean;
-
-   /** String value used to indicate a `null` entry */
-   nullString?: string;
-
-   /** Name or configuration of the icon to be put on the left side of the input.  */
-   icon?: Cx.StringProp | Cx.Record;
-}
-
-export class Select extends Cx.Widget<SelectProps> {}
-
-interface OptionProps extends Cx.HtmlElementProps {
-   /** Value property. */
-   value?: Cx.StringProp;
-
-   /** Defaults to `false`. Set to `true` to disable the field. */
-   disabled?: Cx.BooleanProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Defaults to `false`. Set to `true` to select the the option. */
-   selected?: Cx.BooleanProp;
-}
-
-export class Option extends Cx.Widget<OptionProps> {}
diff --git a/packages/cx/src/widgets/form/Select.js b/packages/cx/src/widgets/form/Select.js
deleted file mode 100644
index 7c636197b..000000000
--- a/packages/cx/src/widgets/form/Select.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { Field, getFieldTooltip } from "./Field";
-import {
-   tooltipParentWillReceiveProps,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
-import DropdownIcon from "../icons/drop-down";
-import ClearIcon from "../icons/clear";
-import { Localization } from "../../ui/Localization";
-import { isString } from "../../util/isString";
-import { isDefined } from "../../util/isDefined";
-import { KeyCode } from "../../util/KeyCode";
-import { autoFocus } from "../autoFocus";
-
-export class Select extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            required: undefined,
-            placeholder: undefined,
-            icon: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   init() {
-      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
-      if (this.alwaysShowClear) this.showClear = true;
-      super.init();
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <SelectComponent
-            key={key}
-            instance={instance}
-            multiple={this.multiple}
-            select={(v) => this.select(v, instance)}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
-            icon={this.renderIcon(context, instance, "icon")}
-         >
-            {this.renderChildren(context, instance)}
-         </SelectComponent>
-      );
-   }
-
-   convert(value) {
-      if (value == this.nullString) return null;
-      if (value == "true") return true;
-      if (value == "false") return false;
-      if (value.match(/^\d+(\.\d+)?$/)) return Number(value);
-      return value;
-   }
-
-   select(value, instance) {
-      if (this.convertValues && value != null) value = this.convert(value);
-      instance.set("value", value);
-   }
-
-   add(item) {
-      if (isString(item)) return;
-      super.add(item);
-   }
-}
-
-Select.prototype.baseClass = "select";
-Select.prototype.multiple = false;
-Select.prototype.convertValues = true;
-Select.prototype.nullString = "";
-Select.prototype.suppressErrorsUntilVisited = true;
-Select.prototype.showClear = true;
-Select.prototype.alwaysShowClear = false;
-Select.prototype.icon = null;
-
-Widget.alias("select", Select);
-Localization.registerPrototype("cx/widgets/Select", Select);
-
-class SelectComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         visited: false,
-         focus: false,
-      };
-   }
-
-   render() {
-      let { multiple, select, instance, label, help, icon: iconVDOM } = this.props;
-      let { data, widget, state } = instance;
-      let { CSS, baseClass } = widget;
-
-      let icon = iconVDOM && <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
-
-      let insideButton,
-         readOnly = data.disabled || data.readOnly;
-
-      if (
-         widget.showClear &&
-         !readOnly &&
-         !this.props.multiple &&
-         (widget.alwaysShowClear || !data.required) &&
-         data.placeholder &&
-         !data.empty
-      ) {
-         insideButton = (
-            <div
-               onMouseDown={preventDefault}
-               onClick={(e) => this.onClearClick(e)}
-               className={CSS.element(baseClass, "clear")}
-            >
-               <ClearIcon className={CSS.element(baseClass, "icon")} />
-            </div>
-         );
-      } else {
-         insideButton = (
-            <div className={CSS.element(baseClass, "tool")}>
-               <DropdownIcon className={CSS.element(baseClass, "icon")} />
-            </div>
-         );
-      }
-
-      let placeholder;
-      if (data.placeholder) {
-         placeholder = (
-            <option value={widget.nullString} className={CSS.element(baseClass, "placeholder")} disabled hidden>
-               {data.placeholder}
-            </option>
-         );
-      }
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  visited: state.visited,
-                  icon: !!iconVDOM,
-                  focus: this.state.focus,
-                  error: state.visited && data.error,
-                  empty: data.empty && !data.placeholder,
-               }),
-            )}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-         >
-            <select
-               id={data.id}
-               ref={(el) => {
-                  this.select = el;
-               }}
-               className={CSS.expand(CSS.element(baseClass, "select"), data.inputClass)}
-               style={data.inputStyle}
-               value={data.value == null ? widget.nullString : String(data.value)}
-               multiple={multiple}
-               disabled={data.disabled}
-               tabIndex={data.tabIndex}
-               {...data.inputAttrs}
-               onBlur={this.onBlur.bind(this)}
-               onFocus={(e) => this.onFocus()}
-               onKeyDown={this.onKeyDown.bind(this)}
-               onChange={(e) => {
-                  e.preventDefault();
-                  select(e.target.value);
-               }}
-               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            >
-               {placeholder}
-               {this.props.children}
-            </select>
-            {insideButton}
-            {icon}
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   onBlur() {
-      this.props.instance.setState({ visited: true });
-      if (this.state.focus)
-         this.setState({
-            focus: false,
-         });
-   }
-
-   onFocus() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.trackFocus) {
-         this.setState({
-            focus: true,
-         });
-      }
-   }
-
-   onClearClick(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      let { instance } = this.props;
-      let { widget } = instance;
-      instance.set("value", widget.emptyValue);
-   }
-
-   onKeyDown(e) {
-      switch (e.keyCode) {
-         case KeyCode.up:
-         case KeyCode.down:
-            e.stopPropagation();
-            break;
-      }
-   }
-
-   componentDidMount() {
-      var { select } = this.props;
-      select(this.select.value);
-      tooltipParentDidMount(this.select, ...getFieldTooltip(this.props.instance));
-      autoFocus(this.select, this);
-   }
-
-   componentDidUpdate() {
-      autoFocus(this.select, this);
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      tooltipParentWillReceiveProps(this.select, ...getFieldTooltip(props.instance));
-   }
-}
-
-export class Option extends HtmlElement {
-   declareData() {
-      super.declareData(
-         {
-            value: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            selected: undefined,
-            text: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, { data }) {
-      super.prepareData(...arguments);
-      if (!data.empty) data.value = data.value.toString();
-   }
-
-   render(context, instance, key) {
-      var { data } = instance;
-      return (
-         <option key={key} value={data.value}>
-            {data.text || this.renderChildren(context, instance)}
-         </option>
-      );
-   }
-}
-
-Widget.alias("option", Option);
diff --git a/packages/cx/src/widgets/form/Select.scss b/packages/cx/src/widgets/form/Select.scss
index 401fbc622..cf3007e8d 100644
--- a/packages/cx/src/widgets/form/Select.scss
+++ b/packages/cx/src/widgets/form/Select.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @import "../overlay/Dropdown";
 
 @mixin cx-select(
@@ -12,10 +14,10 @@
    $icon-size: $cx-default-input-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
diff --git a/packages/cx/src/widgets/form/Select.tsx b/packages/cx/src/widgets/form/Select.tsx
new file mode 100644
index 000000000..65ddc2157
--- /dev/null
+++ b/packages/cx/src/widgets/form/Select.tsx
@@ -0,0 +1,327 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { HtmlElement, HtmlElementInstance } from "../HtmlElement";
+import { Field, getFieldTooltip, FieldInstance } from "./Field";
+import {
+   tooltipParentWillReceiveProps,
+   tooltipMouseMove,
+   tooltipMouseLeave,
+   tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
+import DropdownIcon from "../icons/drop-down";
+import ClearIcon from "../icons/clear";
+import { Localization } from "../../ui/Localization";
+import { isString } from "../../util/isString";
+import { isDefined } from "../../util/isDefined";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { FieldConfig } from "./Field";
+import { Prop, StringProp, BooleanProp } from "../../ui/Prop";
+
+export interface SelectConfig extends FieldConfig {
+   value?: Prop<number | string>;
+   emptyValue?: unknown;
+   enabled?: BooleanProp;
+   placeholder?: StringProp;
+   hideClear?: boolean;
+   showClear?: boolean;
+   alwaysShowClear?: boolean;
+   baseClass?: string;
+   multiple?: boolean;
+   convertValues?: boolean;
+   nullString?: string;
+
+   /** Custom validation function. */
+   onValidate?:
+      | string
+      | ((value: number | string, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class Select<Config extends SelectConfig = SelectConfig> extends Field<Config> {
+   declare public baseClass: string;
+   declare public hideClear?: boolean;
+   declare public showClear: boolean;
+   declare public alwaysShowClear: boolean;
+   declare public multiple: boolean;
+   declare public convertValues: boolean;
+   declare public nullString: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            required: undefined,
+            placeholder: undefined,
+            icon: undefined,
+         },
+         ...args,
+      );
+   }
+
+   init(): void {
+      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
+      if (this.alwaysShowClear) this.showClear = true;
+      super.init();
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<Select>, key: string): React.ReactNode {
+      return (
+         <SelectComponent
+            key={key}
+            instance={instance}
+            multiple={this.multiple}
+            select={(v: string) => this.select(v, instance)}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+            icon={this.renderIcon(context, instance, "icon")}
+         >
+            {this.renderChildren(context, instance)}
+         </SelectComponent>
+      );
+   }
+
+   convert(value: string): string | number | boolean | null {
+      if (value == this.nullString) return null;
+      if (value == "true") return true;
+      if (value == "false") return false;
+      if (value.match(/^\d+(\.\d+)?$/)) return Number(value);
+      return value;
+   }
+
+   select(value: string, instance: Instance): void {
+      let processedValue: string | number | boolean | null = value;
+      if (this.convertValues && value != null) processedValue = this.convert(value);
+      instance.set("value", processedValue);
+   }
+
+   add(item: unknown): void {
+      if (isString(item)) return;
+      super.add(item);
+   }
+}
+
+Select.prototype.baseClass = "select";
+Select.prototype.multiple = false;
+Select.prototype.convertValues = true;
+Select.prototype.nullString = "";
+Select.prototype.suppressErrorsUntilVisited = true;
+Select.prototype.showClear = true;
+Select.prototype.alwaysShowClear = false;
+Select.prototype.icon = null;
+
+Widget.alias("select", Select);
+Localization.registerPrototype("cx/widgets/Select", Select);
+
+interface SelectComponentProps {
+   instance: FieldInstance<Select>;
+   multiple: boolean;
+   select: (value: string) => void;
+   label?: React.ReactNode;
+   help?: React.ReactNode;
+   icon?: React.ReactNode;
+   children?: React.ReactNode;
+}
+
+interface SelectComponentState {
+   visited: boolean;
+   focus: boolean;
+}
+
+class SelectComponent extends VDOM.Component<SelectComponentProps, SelectComponentState> {
+   select: HTMLSelectElement | null = null;
+
+   constructor(props: SelectComponentProps) {
+      super(props);
+      this.state = {
+         visited: false,
+         focus: false,
+      };
+   }
+
+   render(): React.ReactNode {
+      let { multiple, select, instance, label, help, icon: iconVDOM } = this.props;
+      let { data, widget, state } = instance;
+      let { CSS, baseClass } = widget;
+
+      let icon = iconVDOM && <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
+
+      let insideButton,
+         readOnly = data.disabled || data.readOnly;
+
+      if (
+         widget.showClear &&
+         !readOnly &&
+         !this.props.multiple &&
+         (widget.alwaysShowClear || !data.required) &&
+         data.placeholder &&
+         !data.empty
+      ) {
+         insideButton = (
+            <div
+               onMouseDown={preventDefault}
+               onClick={(e) => this.onClearClick(e)}
+               className={CSS.element(baseClass, "clear")}
+            >
+               <ClearIcon className={CSS.element(baseClass, "icon")} />
+            </div>
+         );
+      } else {
+         insideButton = (
+            <div className={CSS.element(baseClass, "tool")}>
+               <DropdownIcon className={CSS.element(baseClass, "icon")} />
+            </div>
+         );
+      }
+
+      let placeholder;
+      if (data.placeholder) {
+         placeholder = (
+            <option value={widget.nullString} className={CSS.element(baseClass, "placeholder")} disabled hidden>
+               {data.placeholder}
+            </option>
+         );
+      }
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  visited: state.visited,
+                  icon: !!iconVDOM,
+                  focus: this.state.focus,
+                  error: state.visited && data.error,
+                  empty: data.empty && !data.placeholder,
+               }),
+            )}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+         >
+            <select
+               id={data.id}
+               ref={(el) => {
+                  this.select = el;
+               }}
+               className={CSS.expand(CSS.element(baseClass, "select"), data.inputClass)}
+               style={data.inputStyle}
+               value={data.value == null ? widget.nullString : String(data.value)}
+               multiple={multiple}
+               disabled={data.disabled}
+               tabIndex={data.tabIndex}
+               {...data.inputAttrs}
+               onBlur={this.onBlur.bind(this)}
+               onFocus={(e) => this.onFocus()}
+               onKeyDown={this.onKeyDown.bind(this)}
+               onChange={(e) => {
+                  e.preventDefault();
+                  select(e.target.value);
+               }}
+               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
+               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
+            >
+               {placeholder}
+               {this.props.children}
+            </select>
+            {insideButton}
+            {icon}
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   onBlur(): void {
+      this.props.instance.setState({ visited: true });
+      if (this.state.focus)
+         this.setState({
+            focus: false,
+         });
+   }
+
+   onFocus(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+      }
+   }
+
+   onClearClick(e: React.MouseEvent): void {
+      e.preventDefault();
+      e.stopPropagation();
+      let { instance } = this.props;
+      let { widget } = instance;
+      instance.set("value", widget.emptyValue);
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      switch (e.keyCode) {
+         case KeyCode.up:
+         case KeyCode.down:
+            e.stopPropagation();
+            break;
+      }
+   }
+
+   componentDidMount(): void {
+      const { select } = this.props;
+      if (this.select) {
+         select(this.select.value);
+         tooltipParentDidMount(this.select, ...getFieldTooltip(this.props.instance));
+         autoFocus(this.select, this);
+      }
+   }
+
+   componentDidUpdate(): void {
+      if (this.select) {
+         autoFocus(this.select, this);
+      }
+   }
+
+   UNSAFE_componentWillReceiveProps(props: SelectComponentProps): void {
+      if (this.select) {
+         tooltipParentWillReceiveProps(this.select, ...getFieldTooltip(props.instance));
+      }
+   }
+}
+
+export class Option extends HtmlElement {
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            value: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            selected: undefined,
+            text: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
+      super.prepareData(context, instance);
+      const { data } = instance;
+      if (!data.empty) data.value = data.value.toString();
+   }
+
+   render(context: RenderingContext, instance: HtmlElementInstance, key: string): React.ReactNode {
+      const { data } = instance;
+      return (
+         <option key={key} value={data.value}>
+            {data.text || this.renderChildren(context, instance)}
+         </option>
+      );
+   }
+}
+
+Widget.alias("option", Option);
diff --git a/packages/cx/src/widgets/form/Slider.d.ts b/packages/cx/src/widgets/form/Slider.d.ts
deleted file mode 100644
index d65bd5b7d..000000000
--- a/packages/cx/src/widgets/form/Slider.d.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
-
-interface SliderProps extends FieldProps {
-
-   /** Low value of the slider range. */
-   from?: Cx.NumberProp,
-
-   /** High value of the slider range. */
-   to?: Cx.NumberProp,
-
-   /** Rounding step. */
-   step?: Cx.NumberProp,
-
-   /** Minimum allowed value. Default is `0`. */
-   minValue?: Cx.NumberProp,
-
-   /** Maximum allowed value. Default is `100`. */
-   maxValue?: Cx.NumberProp,
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp,
-
-   /** Style object to be applied on the selected axis range. */
-   rangeStyle?: Cx.StyleProp,
-
-   /** Style object to be applied on the handle. */
-   handleStyle?: Cx.StyleProp,
-
-   /** Minimum allowed value. Default is `0`. */
-   min?: Cx.NumberProp,
-
-   /** Maximum allowed value. Default is `100`. */
-   max?: Cx.NumberProp,
-   
-   /** High value of the slider range. */
-   value?: Cx.NumberProp,
-
-   /** Base CSS class to be applied to the field. Defaults to `slider`. */
-   baseClass?: string,
-
-   /** Set to `true` to orient the slider vertically. */
-   vertical?: boolean,
-   
-   /** Invert vertical slider behavior. Set this to `true` if you want the slider to go from `top` to `bottom`. */
-   invert?: boolean,
-
-   /** Range tooltip configuration. */
-   toTooltip?: Cx.StringProp | Cx.StructuredProp,
-
-   /** Range tooltip configuration. */
-   valueTooltip?: Cx.StringProp | Cx.StructuredProp,
-
-   /** Range tooltip configuration. */
-   fromTooltip?: Cx.StringProp | Cx.StructuredProp, 
-
-   /** When set to `true`, slider respondes to mouse wheel events, while hovering it. It will not work if both `from` and `to` values are used. Default value is `false`. */
-   wheel?: Cx.BooleanProp,
-
-   /** Value increment/decrement, when controlling the slider with mouse wheel. Default value is set to `1%` of range. */
-   increment?: Cx.NumberProp
-   
-}
-
-export class Slider extends Cx.Widget<SliderProps> {}
diff --git a/packages/cx/src/widgets/form/Slider.js b/packages/cx/src/widgets/form/Slider.js
deleted file mode 100644
index 7b59c8f02..000000000
--- a/packages/cx/src/widgets/form/Slider.js
+++ /dev/null
@@ -1,351 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
-import { isUndefined } from "../../util/isUndefined";
-import { isDefined } from "../../util/isDefined";
-import { isArray } from "../../util/isArray";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
-
-export class Slider extends Field {
-   declareData() {
-      super.declareData(
-         {
-            from: 0,
-            to: 0,
-            step: undefined,
-            minValue: undefined,
-            maxValue: undefined,
-            increment: undefined,
-            incrementPercentage: undefined,
-            wheel: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            readOnly: undefined,
-            rangeStyle: {
-               structured: true,
-            },
-            handleStyle: {
-               structured: true,
-            },
-            invert: false,
-         },
-         ...arguments
-      );
-   }
-
-   init() {
-      if (isDefined(this.min)) this.minValue = this.min;
-
-      if (isDefined(this.max)) this.maxValue = this.max;
-
-      if (this.value != null) this.to = this.value;
-
-      if (isUndefined(this.from)) this.from = this.minValue;
-      else this.showFrom = true;
-
-      if (isUndefined(this.to)) this.to = this.maxValue;
-      else this.showTo = true;
-
-      if (this.valueTooltip) this.toTooltip = this.valueTooltip;
-
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         horizontal: !this.vertical,
-         vertical: this.vertical,
-         disabled: data.disabled,
-      };
-      super.prepareData(context, instance);
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <SliderComponent
-            key={key}
-            instance={instance}
-            data={instance.data}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-         />
-      );
-   }
-}
-
-Slider.prototype.baseClass = "slider";
-Slider.prototype.minValue = 0;
-Slider.prototype.maxValue = 100;
-Slider.prototype.vertical = false;
-Slider.prototype.incrementPercentage = 0.01;
-Slider.prototype.wheel = false;
-Slider.prototype.invert = false;
-
-Widget.alias("slider", Slider);
-
-class SliderComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.dom = {};
-      let { data } = props;
-      this.state = {
-         from: data.from,
-         to: data.to,
-      };
-   }
-
-   render() {
-      let { instance, data, label } = this.props;
-      let { widget } = instance;
-      let { CSS, baseClass } = widget;
-      let { minValue, maxValue } = data;
-      let { from, to } = this.state;
-
-      from = Math.min(maxValue, Math.max(minValue, from));
-      to = Math.min(maxValue, Math.max(minValue, to));
-
-      let handleStyle = CSS.parseStyle(data.handleStyle);
-      let anchor = widget.vertical ? (widget.invert ? "top" : "bottom") : "left";
-      let rangeStart = from - minValue;
-      let rangeSize = to - from;
-
-      let fromHandleStyle = {
-         ...handleStyle,
-         [anchor]: `${(100 * (from - minValue)) / (maxValue - minValue)}%`,
-      };
-
-      let toHandleStyle = {
-         ...handleStyle,
-         [anchor]: `${(100 * (to - minValue)) / (maxValue - minValue)}%`,
-      };
-
-      let rangeStyle = {
-         ...CSS.parseStyle(data.rangeStyle),
-         [anchor]: `${(100 * rangeStart) / (maxValue - minValue)}%`,
-         [widget.vertical ? "height" : "width"]: `${(100 * rangeSize) / (maxValue - minValue)}%`,
-      };
-
-      return (
-         <div
-            className={data.classNames}
-            style={data.style}
-            id={data.id}
-            onClick={(e) => this.onClick(e)}
-            ref={(el) => (this.dom.el = el)}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-         >
-            {label}&nbsp;
-            <div className={CSS.element(baseClass, "axis")}>
-               {rangeSize > 0 && <div key="range" className={CSS.element(baseClass, "range")} style={rangeStyle} />}
-               <div key="space" className={CSS.element(baseClass, "space")} ref={(c) => (this.dom.range = c)}>
-                  {widget.showFrom && (
-                     <div
-                        key="from"
-                        className={CSS.element(baseClass, "handle")}
-                        tabIndex={data.disabled ? null : data.tabIndex || 0}
-                        style={fromHandleStyle}
-                        onMouseDown={(e) => this.onHandleMouseDown(e, "from")}
-                        onMouseMove={(e) =>
-                           tooltipMouseMove(e, instance, widget.fromTooltip, { tooltipName: "fromTooltip" })
-                        }
-                        onMouseLeave={(e) => this.onHandleMouseLeave(e, "from")}
-                        onTouchStart={(e) => this.onHandleMouseDown(e, "from")}
-                        ref={(c) => (this.dom.from = c)}
-                     />
-                  )}
-                  {widget.showTo && (
-                     <div
-                        key="to"
-                        className={CSS.element(baseClass, "handle")}
-                        tabIndex={data.disabled ? null : 0}
-                        style={toHandleStyle}
-                        onMouseDown={(e) => this.onHandleMouseDown(e, "to")}
-                        onMouseMove={(e) =>
-                           tooltipMouseMove(e, instance, widget.toTooltip, { tooltipName: "toTooltip" })
-                        }
-                        onMouseLeave={(e) => this.onHandleMouseLeave(e, "to")}
-                        onTouchStart={(e) => this.onHandleMouseDown(e, "to")}
-                        ref={(c) => (this.dom.to = c)}
-                     />
-                  )}
-               </div>
-            </div>
-         </div>
-      );
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      this.setState({
-         from: props.data.from,
-         to: props.data.to,
-      });
-
-      let { instance } = props;
-      let { widget } = instance;
-      tooltipParentWillReceiveProps(this.dom.to, instance, widget.toTooltip, { tooltipName: "toTooltip" });
-      tooltipParentWillReceiveProps(this.dom.from, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
-   }
-
-   componentWillUnmount() {
-      tooltipParentWillUnmount(this.props.instance);
-      this.unsubscribeOnWheel();
-   }
-
-   componentDidMount() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      tooltipParentDidMount(this.dom.to, instance, widget.toTooltip, { tooltipName: "toTooltip" });
-      tooltipParentDidMount(this.dom.from, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
-
-      this.unsubscribeOnWheel = addEventListenerWithOptions(this.dom.el, "wheel", (e) => this.onWheel(e), {
-         passive: false,
-      });
-   }
-
-   onHandleMouseLeave(e, handle) {
-      if (!this.state.drag) {
-         let tooltipName = handle + "Tooltip";
-         let { instance } = this.props;
-         let tooltip = instance.widget[tooltipName];
-         tooltipMouseLeave(e, instance, tooltip, { tooltipName });
-      }
-   }
-
-   onHandleMouseDown(e, handle) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      let { instance } = this.props;
-      let { data, widget } = instance;
-      if (data.disabled || data.readOnly) return;
-
-      let handleEl = this.dom[handle];
-      let b = getTopLevelBoundingClientRect(handleEl);
-      let pos = getCursorPos(e);
-      let dx = pos.clientX - (b.left + b.right) / 2;
-      let dy = pos.clientY - (b.top + b.bottom) / 2;
-
-      let tooltipName = handle + "Tooltip";
-      let tooltip = widget[tooltipName];
-
-      this.setState({
-         drag: true,
-      });
-
-      captureMouseOrTouch(
-         e,
-         (e) => {
-            let { value } = this.getValues(e, widget.vertical ? dy : dx);
-            if (handle === "from") {
-               if (instance.set("from", value)) this.setState({ from: value });
-               if (value > this.state.to) {
-                  if (instance.set("to", value)) this.setState({ to: value });
-               }
-            } else if (handle === "to") {
-               if (instance.set("to", value)) this.setState({ to: value });
-               if (value < this.state.from) {
-                  if (instance.set("from", value)) this.setState({ from: value });
-               }
-            }
-            tooltipMouseMove(e, instance, tooltip, { tooltipName, target: handleEl });
-         },
-         (e) => {
-            this.setState({
-               drag: false,
-            });
-            let pos = getCursorPos(e);
-            let el = document.elementFromPoint(pos.clientX, pos.clientY);
-            if (el !== handleEl) tooltipMouseLeave(e, instance, tooltip, { tooltipName, target: handleEl });
-         }
-      );
-   }
-
-   getValues(e, d = 0) {
-      let { data, widget } = this.props.instance;
-      let { minValue, maxValue } = data;
-      let b = getTopLevelBoundingClientRect(this.dom.range);
-      let pos = getCursorPos(e);
-      let pct = widget.vertical
-         ? widget.invert
-            ? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range.offsetHeight))
-            : Math.max(0, Math.min(1, (b.bottom - pos.clientY + d) / this.dom.range.offsetHeight))
-         : Math.max(0, Math.min(1, (pos.clientX - b.left - d) / this.dom.range.offsetWidth));
-      let delta = (maxValue - minValue) * pct;
-      if (data.step) {
-         let currentValue = Math.round(delta / data.step) * data.step + minValue;
-         let value = this.checkBoundaries(currentValue);
-
-         if (maxValue % data.step === 0) delta = Math.round(delta / data.step) * data.step;
-
-         delta = value - minValue;
-      }
-
-      return {
-         percent: delta / (maxValue - minValue),
-         value: minValue + delta,
-      };
-   }
-
-   onClick(e) {
-      let { instance } = this.props;
-      let { data, widget } = instance;
-      if (!data.disabled && !data.readOnly) {
-         let { value } = this.getValues(e);
-         this.props.instance.set("value", value, { immediate: true });
-
-         if (widget.showFrom) {
-            this.setState({ from: value });
-            this.props.instance.set("from", value, { immediate: true });
-         }
-         if (widget.showTo) {
-            this.setState({ to: value });
-            this.props.instance.set("to", value, { immediate: true });
-         }
-      }
-   }
-
-   onWheel(e) {
-      let { instance } = this.props;
-      let { data, widget } = instance;
-      if ((widget.showFrom && widget.showTo) || !data.wheel) return;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      let increment = e.deltaY > 0 ? this.getIncrement() : -this.getIncrement();
-
-      if (!data.disabled && !data.readOnly) {
-         if (widget.showFrom) {
-            let value = this.checkBoundaries(data.from + increment);
-            if (instance.set("from", value)) this.setState({ from: value });
-         } else if (widget.showTo) {
-            let value = this.checkBoundaries(data.to + increment);
-            if (instance.set("to", value)) this.setState({ to: value });
-         }
-      }
-   }
-
-   checkBoundaries(value) {
-      let { data } = this.props.instance;
-      if (value > data.maxValue) value = data.maxValue;
-      else if (value < data.minValue) value = data.minValue;
-      return value;
-   }
-
-   getIncrement() {
-      let { instance } = this.props;
-      let { data } = instance;
-      let increment = data.increment || (data.maxValue - data.minValue) * data.incrementPercentage;
-      return increment;
-   }
-}
diff --git a/packages/cx/src/widgets/form/Slider.scss b/packages/cx/src/widgets/form/Slider.scss
index e90862376..42f997d1f 100644
--- a/packages/cx/src/widgets/form/Slider.scss
+++ b/packages/cx/src/widgets/form/Slider.scss
@@ -1,3 +1,6 @@
+
+@use "sass:map";
+
 @mixin cx-slider(
    $name: "slider",
    $state-style-map: $cx-input-state-style-map,
@@ -9,9 +12,9 @@
    $range-background-color: $cx-default-slider-range-background-color,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       width: $width;
diff --git a/packages/cx/src/widgets/form/Slider.tsx b/packages/cx/src/widgets/form/Slider.tsx
new file mode 100644
index 000000000..d86607cac
--- /dev/null
+++ b/packages/cx/src/widgets/form/Slider.tsx
@@ -0,0 +1,473 @@
+/** @jsxImportSource react */
+
+import { BooleanProp, NumberProp, StringProp, StructuredProp, StyleProp } from "../../ui/Prop";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isDefined } from "../../util/isDefined";
+import { isUndefined } from "../../util/isUndefined";
+import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   type TooltipConfig,
+} from "../overlay/tooltip-ops";
+import { Field, FieldConfig, FieldInstance, getFieldTooltip } from "./Field";
+import type { Instance } from "../../ui/Instance";
+
+export interface SliderConfig extends FieldConfig {
+   /** Low value of the slider range. */
+   from?: NumberProp;
+
+   /** High value of the slider range. */
+   to?: NumberProp;
+
+   /** Rounding step. */
+   step?: NumberProp;
+
+   /** Minimum allowed value. Default is `0`. */
+   minValue?: NumberProp;
+
+   /** Maximum allowed value. Default is `100`. */
+   maxValue?: NumberProp;
+
+   /** Style object to be applied on the selected axis range. */
+   rangeStyle?: StyleProp;
+
+   /** Style object to be applied on the handle. */
+   handleStyle?: StyleProp;
+
+   /** Minimum allowed value. Default is `0`. */
+   min?: NumberProp;
+
+   /** Maximum allowed value. Default is `100`. */
+   max?: NumberProp;
+
+   /** High value of the slider range. */
+   value?: NumberProp;
+
+   /** Set to `true` to orient the slider vertically. */
+   vertical?: boolean;
+
+   /** Invert vertical slider behavior. Set this to `true` if you want the slider to go from `top` to `bottom`. */
+   invert?: boolean;
+
+   /** Range tooltip configuration. */
+   toTooltip?: StringProp | StructuredProp;
+
+   /** Range tooltip configuration. */
+   valueTooltip?: StringProp | StructuredProp;
+
+   /** Range tooltip configuration. */
+   fromTooltip?: StringProp | StructuredProp;
+
+   /** When set to `true`, slider responds to mouse wheel events, while hovering it. It will not work if both `from` and `to` values are used. Default value is `false`. */
+   wheel?: BooleanProp;
+
+   /** Value increment/decrement, when controlling the slider with mouse wheel. Default value is set to `1%` of range. */
+   increment?: NumberProp;
+
+   /** Increment percentage. Default value is `0.01` (1%). */
+   incrementPercentage?: number;
+
+   /** Set to `true` to make the slider read-only. */
+   readOnly?: BooleanProp;
+
+   /** Custom validation function. */
+   onValidate?: string | ((value: number, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class Slider extends Field<SliderConfig, FieldInstance<Slider>> {
+   declare baseClass: string;
+   declare min?: number;
+   declare max?: number;
+   declare minValue: number;
+   declare maxValue: number;
+   declare value?: number;
+   declare vertical: boolean;
+   declare invert: boolean;
+   declare from?: number;
+   declare to?: number;
+   declare showFrom?: boolean;
+   declare showTo?: boolean;
+   declare toTooltip?: TooltipConfig;
+   declare fromTooltip?: TooltipConfig;
+   declare valueTooltip?: TooltipConfig;
+   declare incrementPercentage: number;
+   declare wheel: boolean;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            from: 0,
+            to: 0,
+            step: undefined,
+            minValue: undefined,
+            maxValue: undefined,
+            increment: undefined,
+            incrementPercentage: undefined,
+            wheel: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            rangeStyle: {
+               structured: true,
+            },
+            handleStyle: {
+               structured: true,
+            },
+            invert: false,
+         },
+         ...args,
+      );
+   }
+
+   init(): void {
+      if (isDefined(this.min)) this.minValue = this.min;
+
+      if (isDefined(this.max)) this.maxValue = this.max;
+
+      if (this.value != null) this.to = this.value;
+
+      if (isUndefined(this.from)) this.from = this.minValue;
+      else this.showFrom = true;
+
+      if (isUndefined(this.to)) this.to = this.maxValue;
+      else this.showTo = true;
+
+      if (this.valueTooltip) this.toTooltip = this.valueTooltip;
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<Slider>): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         horizontal: !this.vertical,
+         vertical: this.vertical,
+         disabled: data.disabled,
+      };
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<Slider>, key: string): React.ReactNode {
+      return (
+         <SliderComponent
+            key={key}
+            instance={instance}
+            data={instance.data}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+         />
+      );
+   }
+}
+
+Slider.prototype.baseClass = "slider";
+Slider.prototype.minValue = 0;
+Slider.prototype.maxValue = 100;
+Slider.prototype.vertical = false;
+Slider.prototype.incrementPercentage = 0.01;
+Slider.prototype.wheel = false;
+Slider.prototype.invert = false;
+
+Widget.alias("slider", Slider);
+
+interface SliderComponentProps {
+   instance: FieldInstance<Slider>;
+   data: Record<string, any>;
+   label?: React.ReactNode;
+}
+
+interface SliderComponentState {
+   from: number;
+   to: number;
+   drag?: boolean;
+}
+
+interface DomRefs {
+   el?: HTMLElement;
+   range?: HTMLElement;
+   from?: HTMLElement;
+   to?: HTMLElement;
+}
+
+class SliderComponent extends VDOM.Component<SliderComponentProps, SliderComponentState> {
+   dom: DomRefs;
+   unsubscribeOnWheel?: () => void;
+
+   constructor(props: SliderComponentProps) {
+      super(props);
+      this.dom = {};
+      let { data } = props;
+      this.state = {
+         from: data.from as number,
+         to: data.to as number,
+      };
+   }
+
+   render(): React.ReactNode {
+      let { instance, data, label } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      let { minValue, maxValue } = data;
+      let { from, to } = this.state;
+
+      from = Math.min(maxValue, Math.max(minValue, from));
+      to = Math.min(maxValue, Math.max(minValue, to));
+
+      let handleStyle = CSS.parseStyle(data.handleStyle);
+      let anchor = widget.vertical ? (widget.invert ? "top" : "bottom") : "left";
+      let rangeStart = from - minValue;
+      let rangeSize = to - from;
+
+      let fromHandleStyle = {
+         ...handleStyle,
+         [anchor]: `${(100 * (from - minValue)) / (maxValue - minValue)}%`,
+      };
+
+      let toHandleStyle = {
+         ...handleStyle,
+         [anchor]: `${(100 * (to - minValue)) / (maxValue - minValue)}%`,
+      };
+
+      let rangeStyle = {
+         ...CSS.parseStyle(data.rangeStyle),
+         [anchor]: `${(100 * rangeStart) / (maxValue - minValue)}%`,
+         [widget.vertical ? "height" : "width"]: `${(100 * rangeSize) / (maxValue - minValue)}%`,
+      };
+
+      return (
+         <div
+            className={data.classNames}
+            style={data.style}
+            id={data.id}
+            onClick={(e: React.MouseEvent) => this.onClick(e)}
+            ref={(el: HTMLDivElement | null) => {
+               this.dom.el = el || undefined;
+            }}
+            onMouseMove={(e: React.MouseEvent) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
+            onMouseLeave={(e: React.MouseEvent) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
+         >
+            {label}&nbsp;
+            <div className={CSS.element(baseClass, "axis")}>
+               {rangeSize > 0 && <div key="range" className={CSS.element(baseClass, "range")} style={rangeStyle} />}
+               <div
+                  key="space"
+                  className={CSS.element(baseClass, "space")}
+                  ref={(c: HTMLDivElement | null) => {
+                     this.dom.range = c || undefined;
+                  }}
+               >
+                  {widget.showFrom && (
+                     <div
+                        key="from"
+                        className={CSS.element(baseClass, "handle")}
+                        tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
+                        style={fromHandleStyle}
+                        onMouseDown={(e: React.MouseEvent) => this.onHandleMouseDown(e, "from")}
+                        onMouseMove={(e: React.MouseEvent) =>
+                           tooltipMouseMove(e, instance, widget.fromTooltip, { tooltipName: "fromTooltip" })
+                        }
+                        onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "from")}
+                        onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "from")}
+                        ref={(c: HTMLDivElement | null) => {
+                           this.dom.from = c || undefined;
+                        }}
+                     />
+                  )}
+                  {widget.showTo && (
+                     <div
+                        key="to"
+                        className={CSS.element(baseClass, "handle")}
+                        tabIndex={data.disabled ? undefined : 0}
+                        style={toHandleStyle}
+                        onMouseDown={(e: React.MouseEvent) => this.onHandleMouseDown(e, "to")}
+                        onMouseMove={(e: React.MouseEvent) =>
+                           tooltipMouseMove(e, instance, widget.toTooltip, { tooltipName: "toTooltip" })
+                        }
+                        onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "to")}
+                        onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "to")}
+                        ref={(c: HTMLDivElement | null) => {
+                           this.dom.to = c || undefined;
+                        }}
+                     />
+                  )}
+               </div>
+            </div>
+         </div>
+      );
+   }
+
+   UNSAFE_componentWillReceiveProps(props: SliderComponentProps): void {
+      this.setState({
+         from: props.data.from,
+         to: props.data.to,
+      });
+
+      let { instance } = props;
+      let { widget } = instance;
+      tooltipParentWillReceiveProps(this.dom.to!, instance, widget.toTooltip, { tooltipName: "toTooltip" });
+      tooltipParentWillReceiveProps(this.dom.from!, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
+   }
+
+   componentWillUnmount(): void {
+      tooltipParentWillUnmount(this.props.instance);
+      this.unsubscribeOnWheel?.();
+   }
+
+   componentDidMount(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      tooltipParentDidMount(this.dom.to!, instance, widget.toTooltip, { tooltipName: "toTooltip" });
+      tooltipParentDidMount(this.dom.from!, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
+
+      this.unsubscribeOnWheel = addEventListenerWithOptions(this.dom.el!, "wheel", (e) => this.onWheel(e), {
+         passive: false,
+      });
+   }
+
+   onHandleMouseLeave(e: React.MouseEvent, handle: "from" | "to"): void {
+      if (!this.state.drag) {
+         let tooltipName = handle + "Tooltip";
+         let { instance } = this.props;
+         let tooltip = handle == "from" ? instance.widget.fromTooltip : instance.widget.toTooltip;
+         tooltipMouseLeave(e, instance, tooltip, { tooltipName });
+      }
+   }
+
+   onHandleMouseDown(e: React.MouseEvent | React.TouchEvent, handle: "from" | "to"): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      if (data.disabled || data.readOnly) return;
+
+      let handleEl = this.dom[handle];
+      let b = getTopLevelBoundingClientRect(handleEl!);
+      let pos = getCursorPos(e);
+      let dx = pos.clientX - (b.left + b.right) / 2;
+      let dy = pos.clientY - (b.top + b.bottom) / 2;
+
+      let tooltipName = handle + "Tooltip";
+      let tooltip = handle == "from" ? widget.fromTooltip : widget.toTooltip;
+
+      this.setState({
+         drag: true,
+      });
+
+      captureMouseOrTouch(
+         e,
+         (e) => {
+            let { value } = this.getValues(e, widget.vertical ? dy : dx);
+            if (handle === "from") {
+               if (instance.set("from", value)) this.setState({ from: value });
+               if (value > this.state.to) {
+                  if (instance.set("to", value)) this.setState({ to: value });
+               }
+            } else if (handle === "to") {
+               if (instance.set("to", value)) this.setState({ to: value });
+               if (value < this.state.from) {
+                  if (instance.set("from", value)) this.setState({ from: value });
+               }
+            }
+            tooltipMouseMove(e, instance, tooltip, { tooltipName, target: handleEl });
+         },
+         (e: any) => {
+            this.setState({
+               drag: false,
+            });
+            let pos = getCursorPos(e);
+            let el = document.elementFromPoint(pos.clientX, pos.clientY);
+            if (el !== handleEl) tooltipMouseLeave(e, instance, tooltip as any, { tooltipName, target: handleEl });
+         },
+      );
+   }
+
+   getValues(
+      e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+      d: number = 0,
+   ): { percent: number; value: number } {
+      let { data, widget } = this.props.instance;
+      let { minValue, maxValue } = data;
+      let b = getTopLevelBoundingClientRect(this.dom.range!);
+      let pos = getCursorPos(e as any);
+      let pct = widget.vertical
+         ? widget.invert
+            ? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range!.offsetHeight))
+            : Math.max(0, Math.min(1, (b.bottom - pos.clientY + d) / this.dom.range!.offsetHeight))
+         : Math.max(0, Math.min(1, (pos.clientX - b.left - d) / this.dom.range!.offsetWidth));
+      let delta = (maxValue - minValue) * pct;
+      if (data.step) {
+         let currentValue = Math.round(delta / data.step) * data.step + minValue;
+         let value = this.checkBoundaries(currentValue);
+
+         if (maxValue % data.step === 0) delta = Math.round(delta / data.step) * data.step;
+
+         delta = value - minValue;
+      }
+
+      return {
+         percent: delta / (maxValue - minValue),
+         value: minValue + delta,
+      };
+   }
+
+   onClick(e: React.MouseEvent): void {
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      if (!data.disabled && !data.readOnly) {
+         let { value } = this.getValues(e);
+         this.props.instance.set("value", value, { immediate: true });
+
+         if (widget.showFrom) {
+            this.setState({ from: value });
+            this.props.instance.set("from", value, { immediate: true });
+         }
+         if (widget.showTo) {
+            this.setState({ to: value });
+            this.props.instance.set("to", value, { immediate: true });
+         }
+      }
+   }
+
+   onWheel(e: WheelEvent): void {
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      if ((widget.showFrom && widget.showTo) || !data.wheel) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      let increment = e.deltaY > 0 ? this.getIncrement() : -this.getIncrement();
+
+      if (!data.disabled && !data.readOnly) {
+         if (widget.showFrom) {
+            let value = this.checkBoundaries(data.from + increment);
+            if (instance.set("from", value)) this.setState({ from: value });
+         } else if (widget.showTo) {
+            let value = this.checkBoundaries(data.to + increment);
+            if (instance.set("to", value)) this.setState({ to: value });
+         }
+      }
+   }
+
+   checkBoundaries(value: number): number {
+      let { data } = this.props.instance;
+      if (value > data.maxValue) value = data.maxValue;
+      else if (value < data.minValue) value = data.minValue;
+      return value;
+   }
+
+   getIncrement(): number {
+      let { instance } = this.props;
+      let { data } = instance;
+      let increment = data.increment || (data.maxValue - data.minValue) * data.incrementPercentage;
+      return increment;
+   }
+}
diff --git a/packages/cx/src/widgets/form/Switch.d.ts b/packages/cx/src/widgets/form/Switch.d.ts
deleted file mode 100644
index 9e0ad80c3..000000000
--- a/packages/cx/src/widgets/form/Switch.d.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
-
-interface SwitchProps extends FieldProps {
-
-   /** Value indicating that switch is on. */
-   on?: Cx.BooleanProp,
-
-   /** Value indicating that switch is off. */
-   off?: Cx.BooleanProp,
-   
-   /** Value indicating that switch is on. */
-   value?: Cx.BooleanProp,
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp,
-
-   /** Text description. */
-   text?: Cx.StringProp,
-
-   /** Style object to be applied on the axis range when the switch is on. */
-   rangeStyle?: Cx.StyleProp,
-   
-   /** Style object to be applied on the switch handle. */
-   handleStyle?: Cx.StyleProp,
-
-   /** Base CSS class to be applied to the field. Defaults to `switch`. */
-   baseClass?: string,
-   
-   /** 
-    * Determines if button should receive focus on mousedown event. 
-    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key. 
-    */
-   focusOnMouseDown?: boolean
-   
-}
-
-export class Switch extends Cx.Widget<SwitchProps> {}
diff --git a/packages/cx/src/widgets/form/Switch.js b/packages/cx/src/widgets/form/Switch.js
deleted file mode 100644
index c31cd1b1a..000000000
--- a/packages/cx/src/widgets/form/Switch.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { KeyCode } from "../../util/KeyCode";
-import { parseStyle } from "../../util/parseStyle";
-import { Field, getFieldTooltip } from "./Field";
-import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
-import { preventFocus } from "../../ui/FocusManager";
-import { isDefined } from "../../util/isDefined";
-
-export class Switch extends Field {
-   declareData() {
-      super.declareData(
-         {
-            on: false,
-            off: true,
-            value: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            readOnly: undefined,
-            text: undefined,
-            rangeStyle: {
-               structured: true,
-            },
-            handleStyle: {
-               structured: true,
-            },
-         },
-         ...arguments
-      );
-   }
-
-   isEmpty() {
-      return false;
-   }
-
-   init() {
-      if (isDefined(this.value)) this.on = this.value;
-
-      this.rangeStyle = parseStyle(this.rangeStyle);
-      this.handleStyle = parseStyle(this.handleStyle);
-
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (isDefined(this.off)) data.on = !data.off;
-
-      data.stateMods = {
-         ...data.stateMods,
-         on: data.on,
-         disabled: data.disabled,
-      };
-      super.prepareData(context, instance);
-   }
-
-   renderInput(context, instance, key) {
-      let { data, widget } = instance;
-      let { rangeStyle, handleStyle } = data;
-      let { CSS, baseClass } = this;
-
-      let text = data.text || this.renderChildren(context, instance);
-      let renderTextElement = text?.length != 0;
-
-      return (
-         <div
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            id={data.id}
-            tabIndex={data.disabled ? null : data.tabIndex || 0}
-            onMouseDown={(e) => {
-               e.stopPropagation();
-               if (!this.focusOnMouseDown) preventFocus(e);
-            }}
-            onClick={(e) => {
-               this.toggle(e, instance);
-            }}
-            onKeyDown={(e) => {
-               if (widget.handleKeyDown(e, instance) === false) return;
-               if (e.keyCode == KeyCode.space) {
-                  this.toggle(e, instance);
-               }
-            }}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-         >
-            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            &nbsp;
-            <div className={CSS.element(baseClass, "axis")}>
-               <div className={CSS.element(baseClass, "range")} style={parseStyle(rangeStyle)} />
-               <div className={CSS.element(baseClass, "space")}>
-                  <div className={CSS.element(baseClass, "handle")} style={parseStyle(handleStyle)} />
-               </div>
-            </div>
-            {renderTextElement && (
-               <div key="text" className={CSS.element(this.baseClass, "text")}>
-                  {text}
-               </div>
-            )}
-         </div>
-      );
-   }
-
-   toggle(e, instance) {
-      let { data } = instance;
-      if (data.readOnly || data.disabled) return;
-      instance.set("on", !data.on);
-      instance.set("off", data.on);
-      e.preventDefault();
-      e.stopPropagation();
-   }
-}
-
-Switch.prototype.baseClass = "switch";
-Switch.prototype.focusOnMouseDown = false;
-
-Widget.alias("switch", Switch);
diff --git a/packages/cx/src/widgets/form/Switch.scss b/packages/cx/src/widgets/form/Switch.scss
index 70c0e0e50..d25a4ec7c 100644
--- a/packages/cx/src/widgets/form/Switch.scss
+++ b/packages/cx/src/widgets/form/Switch.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-switch(
    $name: "switch",
    $state-style-map: $cx-input-state-style-map,
@@ -10,9 +12,9 @@
    $empty-text: $cx-empty-text,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    $padding: cx-get-state-rule($state-style-map, default, padding);
    $border-width: cx-get-state-rule($state-style-map, default, border-width);
diff --git a/packages/cx/src/widgets/form/Switch.tsx b/packages/cx/src/widgets/form/Switch.tsx
new file mode 100644
index 000000000..e061a7887
--- /dev/null
+++ b/packages/cx/src/widgets/form/Switch.tsx
@@ -0,0 +1,176 @@
+/** @jsxImportSource react */
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { KeyCode } from "../../util/KeyCode";
+import { parseStyle } from "../../util/parseStyle";
+import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
+import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
+import { preventFocus } from "../../ui/FocusManager";
+import { isDefined } from "../../util/isDefined";
+import { BooleanProp, StringProp, StyleProp } from "../../ui/Prop";
+
+export interface SwitchConfig extends FieldConfig {
+   /** Value indicating that switch is on. */
+   on?: BooleanProp;
+
+   /** Value indicating that switch is off. */
+   off?: BooleanProp;
+
+   /** Value indicating that switch is on. */
+   value?: BooleanProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: BooleanProp;
+
+   /** Text description. */
+   text?: StringProp;
+
+   /** Style object to be applied on the axis range when the switch is on. */
+   rangeStyle?: StyleProp;
+
+   /** Style object to be applied on the switch handle. */
+   handleStyle?: StyleProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `switch`. */
+   baseClass?: string;
+
+   /** Determines if button should receive focus on mousedown event. Default is `false`. */
+   focusOnMouseDown?: boolean;
+
+   /** Custom validation function. */
+   onValidate?: string | ((value: boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class Switch extends Field<SwitchConfig> {
+   declare public on?: unknown;
+   declare public off?: unknown;
+   declare public value?: unknown;
+   declare public rangeStyle?: Record<string, unknown> | string;
+   declare public handleStyle?: Record<string, unknown> | string;
+   declare public focusOnMouseDown?: boolean;
+
+   constructor(config?: SwitchConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            on: false,
+            off: true,
+            value: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            text: undefined,
+            rangeStyle: {
+               structured: true,
+            },
+            handleStyle: {
+               structured: true,
+            },
+         },
+         ...args,
+      );
+   }
+
+   isEmpty(): boolean {
+      return false;
+   }
+
+   init(): void {
+      if (isDefined(this.value)) this.on = this.value;
+
+      this.rangeStyle = parseStyle(this.rangeStyle);
+      this.handleStyle = parseStyle(this.handleStyle);
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<Switch>): void {
+      let { data } = instance;
+
+      if (isDefined(this.off)) data.on = !data.off;
+
+      data.stateMods = {
+         ...data.stateMods,
+         on: data.on,
+         disabled: data.disabled,
+      };
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance, key: string): React.ReactElement {
+      let { data, widget } = instance;
+      let { rangeStyle, handleStyle } = data;
+      let { CSS, baseClass } = this;
+
+      let text = data.text || this.renderChildren(context, instance);
+      let renderTextElement = text?.length != 0;
+
+      return (
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            id={data.id}
+            tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
+            onMouseDown={(e: React.MouseEvent) => {
+               e.stopPropagation();
+               if (!this.focusOnMouseDown) preventFocus(e);
+            }}
+            onClick={(e: React.MouseEvent) => {
+               this.toggle(e, instance);
+            }}
+            onKeyDown={(e: React.KeyboardEvent) => {
+               const switchWidget = widget as Switch;
+               if (switchWidget.handleKeyDown && switchWidget.handleKeyDown(e, instance) === false) return;
+               if (e.keyCode == KeyCode.space) {
+                  this.toggle(e, instance);
+               }
+            }}
+            onMouseMove={(e: React.MouseEvent) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseMove(e, ...tooltip);
+               }
+            }}
+            onMouseLeave={(e: React.MouseEvent) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseLeave(e, ...tooltip);
+               }
+            }}
+         >
+            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            &nbsp;
+            <div className={CSS.element(baseClass, "axis")}>
+               <div className={CSS.element(baseClass, "range")} style={parseStyle(rangeStyle)} />
+               <div className={CSS.element(baseClass, "space")}>
+                  <div className={CSS.element(baseClass, "handle")} style={parseStyle(handleStyle)} />
+               </div>
+            </div>
+            {renderTextElement && (
+               <div key="text" className={CSS.element(this.baseClass, "text")}>
+                  {text}
+               </div>
+            )}
+         </div>
+      );
+   }
+
+   toggle(e: React.MouseEvent | React.KeyboardEvent, instance: Instance): void {
+      let { data } = instance;
+      if (data.readOnly || data.disabled) return;
+      instance.set("on", !data.on);
+      instance.set("off", data.on);
+      e.preventDefault();
+      e.stopPropagation();
+   }
+}
+
+Switch.prototype.baseClass = "switch";
+Switch.prototype.focusOnMouseDown = false;
+
+Widget.alias("switch", Switch);
diff --git a/packages/cx/src/widgets/form/TextArea.d.ts b/packages/cx/src/widgets/form/TextArea.d.ts
deleted file mode 100644
index 8120bcf65..000000000
--- a/packages/cx/src/widgets/form/TextArea.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as Cx from '../../core';
-import { TextFieldProps } from './TextField';
-
-interface TextAreaProps extends TextFieldProps {
-   
-   /** Specifies the number of visible lines. */
-   rows?: Cx.NumberProp,
-
-   /** Event used to report on a new value. Defaults to `blur`. Other permitted value is `input`. */
-   reachOn?: string,
-   
-   /** Base CSS class to be applied to the element. Defaults to `textarea`. */
-   baseClass?: string
-   
-}
-
-export class TextArea extends Cx.Widget<TextAreaProps> {}
diff --git a/packages/cx/src/widgets/form/TextArea.js b/packages/cx/src/widgets/form/TextArea.js
deleted file mode 100644
index 06d3ac3a5..000000000
--- a/packages/cx/src/widgets/form/TextArea.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { TextField } from "./TextField";
-import { getFieldTooltip } from "./Field";
-import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { KeyCode } from "../../util/KeyCode";
-import { autoFocus } from "../autoFocus";
-import { getActiveElement } from "../../util/getActiveElement";
-
-export class TextArea extends TextField {
-   declareData() {
-      super.declareData(
-         {
-            rows: undefined,
-         },
-         ...arguments
-      );
-   }
-
-   prepareData(context, instance) {
-      let { state, data, cached } = instance;
-      if (!cached.data || data.value != cached.data.value) state.empty = !data.value;
-      super.prepareData(context, instance);
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <Input
-            key={key}
-            data={instance.data}
-            instance={instance}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
-         />
-      );
-   }
-
-   validateRequired(context, instance) {
-      return instance.state.empty && this.requiredText;
-   }
-}
-
-TextArea.prototype.baseClass = "textarea";
-TextArea.prototype.reactOn = "blur";
-TextArea.prototype.suppressErrorsUntilVisited = true;
-
-class Input extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         focus: false,
-      };
-   }
-
-   render() {
-      let { instance, label, help } = this.props;
-      let { widget, data, state } = instance;
-      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-      let empty = this.input ? !this.input.value : data.empty;
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  visited: state.visited,
-                  focus: this.state.focus,
-                  empty: empty && !data.placeholder,
-                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               })
-            )}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-         >
-            <textarea
-               className={CSS.element(baseClass, "input")}
-               ref={(el) => {
-                  this.input = el;
-               }}
-               id={data.id}
-               rows={data.rows}
-               style={data.inputStyle}
-               defaultValue={data.value}
-               disabled={data.disabled}
-               readOnly={data.readOnly}
-               tabIndex={data.tabIndex}
-               placeholder={data.placeholder}
-               {...data.inputAttrs}
-               onInput={(e) => this.onChange(e.target.value, "input")}
-               onChange={(e) => this.onChange(e.target.value, "change")}
-               onBlur={(e) => this.onBlur(e)}
-               onFocus={(e) => this.onFocus()}
-               onClick={stopPropagation}
-               onKeyDown={(e) => this.onKeyDown(e)}
-               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            />
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   componentWillUnmount() {
-      if (this.input == getActiveElement()) {
-         this.onChange(this.input.value, "blur");
-      }
-      tooltipParentWillUnmount(this.props.instance);
-   }
-
-   componentDidMount() {
-      tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
-      autoFocus(this.input, this);
-   }
-
-   componentDidUpdate() {
-      autoFocus(this.input, this);
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.down:
-         case KeyCode.up:
-         case KeyCode.left:
-         case KeyCode.right:
-            e.stopPropagation();
-            break;
-      }
-   }
-
-   UNSAFE_componentWillReceiveProps({ data, instance }) {
-      if (data.value != this.props.data.value) {
-         this.input.value = data.value || "";
-      }
-      tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(instance));
-   }
-
-   onChange(inputValue, change) {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-
-      if (change == "blur") {
-         instance.setState({ visited: true });
-         if (this.state.focus)
-            this.setState({
-               focus: false,
-            });
-      }
-
-      if (data.required) {
-         instance.setState({
-            empty: !inputValue,
-         });
-      }
-
-      if (instance.widget.reactOn.indexOf(change) != -1) {
-         let value = inputValue || widget.emptyValue;
-         instance.set("value", value);
-      }
-   }
-
-   onFocus() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.trackFocus) {
-         this.setState({
-            focus: true,
-         });
-
-         instance.set("focused", true);
-      }
-   }
-
-   onBlur(e) {
-      const { instance } = this.props;
-      if (instance.widget.trackFocus) {
-         instance.set("focused", false);
-      }
-
-      this.onChange(e.target.value, "blur");
-   }
-}
-
-Widget.alias("textarea", TextArea);
diff --git a/packages/cx/src/widgets/form/TextArea.scss b/packages/cx/src/widgets/form/TextArea.scss
index a4077c93e..59572e36b 100644
--- a/packages/cx/src/widgets/form/TextArea.scss
+++ b/packages/cx/src/widgets/form/TextArea.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-textarea(
    $name: "textarea",
    $state-style-map: $cx-textarea-state-style-map,
@@ -8,10 +10,10 @@
    $width: $cx-default-textarea-width,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       line-height: 0;
diff --git a/packages/cx/src/widgets/form/TextArea.tsx b/packages/cx/src/widgets/form/TextArea.tsx
new file mode 100644
index 000000000..06f123e24
--- /dev/null
+++ b/packages/cx/src/widgets/form/TextArea.tsx
@@ -0,0 +1,229 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { TextField, TextFieldConfig } from "./TextField";
+import { getFieldTooltip, FieldInstance } from "./Field";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import {
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   tooltipMouseMove,
+   tooltipMouseLeave,
+   tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+import { getActiveElement } from "../../util/getActiveElement";
+import { NumberProp } from "../../ui/Prop";
+
+export interface TextAreaConfig extends TextFieldConfig {
+   /** Specifies the number of visible lines. */
+   rows?: NumberProp;
+
+   /** Event used to report on a new value. Defaults to `blur`. Other permitted value is `input`. */
+   reactOn?: string;
+
+   /** Base CSS class to be applied to the element. Defaults to `textarea`. */
+   baseClass?: string;
+}
+
+export class TextArea extends TextField<TextAreaConfig> {
+   constructor(config?: TextAreaConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         rows: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<TextArea>): void {
+      let { state, data, cached } = instance;
+      if (!cached.data || data.value != cached.data.value) state.empty = !data.value;
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<TextArea>, key: string): React.ReactNode {
+      return (
+         <Input
+            key={key}
+            data={instance.data}
+            instance={instance}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+         />
+      );
+   }
+
+   validateRequired(context: RenderingContext, instance: FieldInstance<TextArea>): string | undefined {
+      return instance.state.empty && this.requiredText;
+   }
+}
+
+TextArea.prototype.baseClass = "textarea";
+TextArea.prototype.reactOn = "blur";
+TextArea.prototype.suppressErrorsUntilVisited = true;
+
+interface InputProps {
+   instance: FieldInstance<TextArea>;
+   data: Record<string, any>;
+   label?: React.ReactNode;
+   help?: React.ReactNode;
+}
+
+interface InputState {
+   focus: boolean;
+}
+
+class Input extends VDOM.Component<InputProps, InputState> {
+   input?: HTMLTextAreaElement;
+
+   constructor(props: InputProps) {
+      super(props);
+      this.state = {
+         focus: false,
+      };
+   }
+
+   render(): React.ReactNode {
+      let { instance, label, help } = this.props;
+      let { widget, data, state } = instance;
+      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+
+      let empty = this.input ? !this.input.value : data.empty;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  visited: state.visited,
+                  focus: this.state.focus,
+                  empty: empty && !data.placeholder,
+                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
+               }),
+            )}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+         >
+            <textarea
+               className={CSS.element(baseClass, "input")}
+               ref={(el: HTMLTextAreaElement | null) => {
+                  this.input = el || undefined;
+               }}
+               id={data.id}
+               rows={data.rows}
+               style={data.inputStyle}
+               defaultValue={data.value}
+               disabled={data.disabled}
+               readOnly={data.readOnly}
+               tabIndex={data.tabIndex}
+               placeholder={data.placeholder}
+               {...data.inputAttrs}
+               onInput={(e: React.FormEvent<HTMLTextAreaElement>) => this.onChange(e.currentTarget.value, "input")}
+               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => this.onChange(e.target.value, "change")}
+               onBlur={(e: React.FocusEvent<HTMLTextAreaElement>) => this.onBlur(e)}
+               onFocus={(e: React.FocusEvent<HTMLTextAreaElement>) => this.onFocus()}
+               onClick={stopPropagation}
+               onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => this.onKeyDown(e)}
+               onMouseMove={(e: React.MouseEvent<HTMLTextAreaElement>) =>
+                  tooltipMouseMove(e, ...getFieldTooltip(instance))
+               }
+               onMouseLeave={(e: React.MouseEvent<HTMLTextAreaElement>) =>
+                  tooltipMouseLeave(e, ...getFieldTooltip(instance))
+               }
+            />
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   componentWillUnmount(): void {
+      if (this.input == getActiveElement()) {
+         this.onChange(this.input.value, "blur");
+      }
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   componentDidMount(): void {
+      tooltipParentDidMount(this.input!, ...getFieldTooltip(this.props.instance));
+      autoFocus(this.input, this);
+   }
+
+   componentDidUpdate(): void {
+      autoFocus(this.input, this);
+   }
+
+   onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>): void {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.down:
+         case KeyCode.up:
+         case KeyCode.left:
+         case KeyCode.right:
+            e.stopPropagation();
+            break;
+      }
+   }
+
+   UNSAFE_componentWillReceiveProps({ data, instance }: InputProps): void {
+      if (data.value != this.props.data.value) {
+         this.input!.value = data.value || "";
+      }
+      tooltipParentWillReceiveProps(this.input!, ...getFieldTooltip(instance));
+   }
+
+   onChange(inputValue: string, change: string): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+
+      if (change == "blur") {
+         instance.setState({ visited: true });
+         if (this.state.focus)
+            this.setState({
+               focus: false,
+            });
+      }
+
+      if (data.required) {
+         instance.setState({
+            empty: !inputValue,
+         });
+      }
+
+      if (instance.widget.reactOn.indexOf(change) != -1) {
+         let value = inputValue || widget.emptyValue;
+         instance.set("value", value);
+      }
+   }
+
+   onFocus(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+
+         instance.set("focused", true);
+      }
+   }
+
+   onBlur(e: React.FocusEvent<HTMLTextAreaElement>): void {
+      const { instance } = this.props;
+      if (instance.widget.trackFocus) {
+         instance.set("focused", false);
+      }
+
+      this.onChange(e.target.value, "blur");
+   }
+}
+
+Widget.alias("textarea", TextArea);
diff --git a/packages/cx/src/widgets/form/TextField.d.ts b/packages/cx/src/widgets/form/TextField.d.ts
deleted file mode 100644
index 0fd7db89d..000000000
--- a/packages/cx/src/widgets/form/TextField.d.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui/Instance";
-import { FieldProps } from "./Field";
-
-export interface TextFieldProps extends FieldProps {
-   /**
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
-    * Default value is `true`.
-    */
-   hideClear?: boolean;
-
-   /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
-    * Default value is `false`.
-    */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Textual value of the input. */
-   value?: Cx.StringProp;
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** Minimal length of the input text. */
-   minLength?: Cx.NumberProp;
-
-   /** Maximal length of the input text. */
-   maxLength?: Cx.NumberProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `textfield`. */
-   baseClass?: string;
-
-   /**
-    * Event used to report a new value. Defaults to `input`, which means that entered value will be written to the store on each keystroke.
-    * Other permitted values are `enter` (Enter key pressed) and `blur` (field looses focus).
-    * Multiple values should be separated by space, e.g. `enter blur`.
-    */
-   reactOn?: string;
-
-   /** Defaults to `text`. Other permitted value is `password`. */
-   inputType?: "text" | "password";
-
-   /** Message to be shown to the user if validation fails. */
-   validationErrorText?: string;
-
-   /** Message to be shown to the user if input text is too short. */
-   minLengthValidationErrorText?: string;
-
-   /** Message to be shown to the user if input text is too long. */
-   maxLengthValidationErrorText?: string;
-
-   /** Regular expression used to validate the user's input. */
-   validationRegExp?: RegExp;
-
-   /** Name or configuration of the icon to be put on the left side of the input.  */
-   icon?: Cx.StringProp | Cx.Record;
-
-   /** If trackFocus is set, this value will be set when the field receives or loses focus. */
-   focused?: Cx.BooleanProp;
-
-   /** Trim text to remove whitespace. Default is false. */
-   trim?: Cx.BooleanProp;
-
-   onKeyDown?: string | ((event: KeyboardEvent, instance: Instance) => boolean | void);
-}
-
-export class TextField extends Cx.Widget<TextFieldProps> {}
diff --git a/packages/cx/src/widgets/form/TextField.js b/packages/cx/src/widgets/form/TextField.js
deleted file mode 100644
index b3c9d95ba..000000000
--- a/packages/cx/src/widgets/form/TextField.js
+++ /dev/null
@@ -1,290 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
-import { StringTemplate } from "../../data/StringTemplate";
-import { Icon } from "../Icon";
-import { KeyCode } from "../../util/KeyCode";
-import { Localization } from "../../ui/Localization";
-import ClearIcon from "../icons/clear";
-import { autoFocus } from "../autoFocus";
-import { isString } from "../../util/isString";
-import { getActiveElement } from "../../util/getActiveElement";
-
-export class TextField extends Field {
-   init() {
-      if (typeof this.hideClear !== "undefined") this.showClear = !this.hideClear;
-
-      if (this.alwaysShowClear) this.showClear = true;
-
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            value: this.emptyValue,
-            disabled: undefined,
-            readOnly: undefined,
-            enabled: undefined,
-            placeholder: undefined,
-            required: undefined,
-            minLength: undefined,
-            maxLength: undefined,
-            icon: undefined,
-            trim: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <Input
-            key={key}
-            instance={instance}
-            data={instance.data}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
-            icon={this.renderIcon(context, instance, "icon")}
-         />
-      );
-   }
-
-   validate(context, instance) {
-      super.validate(context, instance);
-
-      let { data } = instance;
-
-      if (!data.error && data.value) {
-         if (this.validationRegExp) this.validationRegExp.lastIndex = 0;
-         if (this.validationRegExp && !this.validationRegExp.test(data.value)) data.error = this.validationErrorText;
-         else if (typeof data.value === "string" && data.minLength != null && data.value.length < data.minLength)
-            data.error = StringTemplate.format(this.minLengthValidationErrorText, data.minLength, data.value.length);
-         else if (typeof data.value === "string" && data.maxLength != null && data.value.length > data.maxLength)
-            data.error = StringTemplate.format(this.maxLengthValidationErrorText, data.maxLength, data.value.length);
-      }
-   }
-}
-
-TextField.prototype.baseClass = "textfield";
-TextField.prototype.reactOn = "change input blur enter";
-TextField.prototype.inputType = "text";
-TextField.prototype.validationErrorText = "The entered value is not valid.";
-TextField.prototype.minLengthValidationErrorText = "Enter {[{0}-{1}]} more character(s).";
-TextField.prototype.maxLengthValidationErrorText = "Use {0} characters or fewer.";
-TextField.prototype.suppressErrorsUntilVisited = true;
-TextField.prototype.icon = null;
-TextField.prototype.showClear = false;
-TextField.prototype.alwaysShowClear = false;
-TextField.prototype.keyboardShortcut = false;
-TextField.prototype.trim = false;
-
-Localization.registerPrototype("cx/widgets/TextField", TextField);
-
-class Input extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         focus: false,
-      };
-   }
-
-   render() {
-      let { instance, data, label, help, icon: iconVDOM } = this.props;
-      let { widget, state } = instance;
-      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-      let icon = iconVDOM && (
-         <div
-            className={CSS.element(baseClass, "left-icon")}
-            onMouseDown={preventDefault}
-            onClick={(e) => this.onChange(e.target.value, "enter")}
-         >
-            {iconVDOM}
-         </div>
-      );
-
-      let insideButton;
-      if (
-         widget.showClear &&
-         !data.empty &&
-         !data.readOnly &&
-         !data.disabled &&
-         (widget.alwaysShowClear || !data.required)
-      ) {
-         insideButton = (
-            <div
-               className={CSS.element(baseClass, "clear")}
-               onMouseDown={(e) => e.preventDefault()}
-               onClick={(e) => this.onClearClick(e)}
-            >
-               <ClearIcon className={CSS.element(baseClass, "icon")} />
-            </div>
-         );
-      }
-
-      let empty = this.input ? !this.trimmed(this.input.value) : data.empty;
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  visited: state.visited,
-                  focus: this.state.focus,
-                  icon: !!icon,
-                  clear: insideButton != null,
-                  empty: empty && !data.placeholder,
-                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               }),
-            )}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-         >
-            <input
-               ref={(el) => {
-                  this.input = el;
-               }}
-               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
-               defaultValue={data.value}
-               id={data.id}
-               style={data.inputStyle}
-               type={widget.inputType}
-               disabled={data.disabled}
-               readOnly={data.readOnly}
-               tabIndex={data.tabIndex}
-               placeholder={data.placeholder}
-               {...data.inputAttrs}
-               onMouseMove={this.onMouseMove.bind(this)}
-               onMouseLeave={this.onMouseLeave.bind(this)}
-               onInput={(e) => this.onChange(e.target.value, "input")}
-               onChange={(e) => this.onChange(e.target.value, "change")}
-               onKeyDown={this.onKeyDown.bind(this)}
-               onFocus={this.onFocus.bind(this)}
-               onBlur={this.onBlur.bind(this)}
-               onClick={stopPropagation}
-            />
-            {insideButton}
-            {icon}
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   onFocus() {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      if (widget.trackFocus) {
-         this.setState({
-            focus: true,
-         });
-         instance.set("focused", true);
-      }
-      if (data.error && data.value) instance.setState({ visited: true });
-   }
-
-   onBlur(e) {
-      if (this.state.focus) {
-         this.setState({
-            focus: false,
-         });
-         this.props.instance.set("focused", false);
-      }
-      this.onChange(e.target.value, "blur");
-   }
-
-   onClearClick(e) {
-      this.input.value = ""; // prevent onChange call with old text value on blur or component unmount
-      this.props.instance.set("value", this.props.instance.widget.emptyValue, { immediate: true });
-   }
-
-   onMouseMove(e) {
-      tooltipMouseMove(e, ...getFieldTooltip(this.props.instance));
-   }
-
-   onMouseLeave(e) {
-      tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance));
-   }
-
-   componentDidMount() {
-      tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
-      autoFocus(this.input, this);
-   }
-
-   componentDidUpdate() {
-      autoFocus(this.input, this);
-   }
-
-   componentWillUnmount() {
-      if (this.input == getActiveElement() && this.input.value != this.props.data.value)
-         this.onChange(this.input.value, "blur");
-      tooltipParentWillUnmount(this.props.instance);
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.enter:
-            this.onChange(e.target.value, "enter");
-            break;
-
-         case KeyCode.left:
-         case KeyCode.right:
-            e.stopPropagation();
-            break;
-      }
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      let { data } = props;
-      // The second check is required for debouncing, sometimes the value in the store lags after the input
-      // and update may be caused by some other property, i.e. visited
-      if (data.value != this.input.value && data.value != this.props.data.value) this.input.value = data.value || "";
-      tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(props.instance));
-   }
-
-   onChange(textValue, change) {
-      let { instance, data } = this.props;
-
-      let immediate = change == "blur" || change == "enter";
-
-      if (immediate) {
-         instance.setState({ visited: true });
-      }
-
-      let { widget } = instance;
-
-      if (widget.reactOn.indexOf(change) != -1) {
-         let text = this.trimmed(textValue);
-         if (data.maxLength != null && text.length > data.maxLength) {
-            text = text.substring(0, data.maxLength);
-            this.input.value = text;
-         }
-
-         let value = text || widget.emptyValue;
-         if (!instance.set("value", value, { immediate })) {
-            if (text != this.input.value && immediate) this.input.value = text;
-         } else {
-            if (value) instance.setState({ visited: true });
-         }
-      }
-   }
-
-   trimmed(value) {
-      if (this.props.data.trim && isString(value)) return value.trim();
-      return value;
-   }
-}
-
-Widget.alias("textfield", TextField);
diff --git a/packages/cx/src/widgets/form/TextField.scss b/packages/cx/src/widgets/form/TextField.scss
index aff94c3b4..f54ff6809 100644
--- a/packages/cx/src/widgets/form/TextField.scss
+++ b/packages/cx/src/widgets/form/TextField.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-textfield(
    $name: "textfield",
    $state-style-map: $cx-std-field-state-style-map,
@@ -9,10 +11,10 @@
    $width: $cx-default-input-width,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
diff --git a/packages/cx/src/widgets/form/TextField.tsx b/packages/cx/src/widgets/form/TextField.tsx
new file mode 100644
index 000000000..5fea03f5c
--- /dev/null
+++ b/packages/cx/src/widgets/form/TextField.tsx
@@ -0,0 +1,407 @@
+/** @jsxImportSource react */
+
+import { Widget, getContent } from "../../ui/Widget";
+import { Field, FieldConfig, getFieldTooltip } from "./Field";
+import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+
+export interface TextFieldConfig extends FieldConfig {
+   /** Textual value of the input field. */
+   value?: Prop<any>;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: StringProp;
+
+   /** Defaults to `false`. Set to `true` to disable the field. */
+   disabled?: BooleanProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: BooleanProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: BooleanProp;
+
+   /** Defaults to `false`. Used to make the field required. */
+   required?: BooleanProp;
+
+   /** Minimal length of the input text. */
+   minLength?: NumberProp;
+
+   /** Maximal length of the input text. */
+   maxLength?: NumberProp;
+
+   /** Regular expression used to validate the user's input. */
+   validationRegExp?: Prop<RegExp>;
+
+   /** Error message displayed upon validation failure. */
+   validationErrorText?: StringProp;
+
+   /** Error message displayed when input text is too short. */
+   minLengthValidationErrorText?: StringProp;
+
+   /** Error message displayed when input text is too long. */
+   maxLengthValidationErrorText?: StringProp;
+
+   /** Event triggering value updates. Possible values are `input` (default), `enter`, or `blur`. Multiple values can be separated by space. */
+   reactOn?: StringProp;
+
+   /** Input type. Defaults to `text`. Other common value is `password`. */
+   inputType?: StringProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `textfield`. */
+   baseClass?: string;
+
+   /** Keyboard shortcut used to focus the field. */
+   keyboardShortcut?: StringProp;
+
+   /** Set to `true` to remove leading and trailing whitespace. Default is `false`. */
+   trim?: BooleanProp;
+
+   /** Set to `true` to hide the clear button. Default value is `false`. */
+   hideClear?: BooleanProp;
+
+   /** Set to `false` to hide the clear button. Default value is `true`. */
+   showClear?: BooleanProp;
+
+   /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
+   alwaysShowClear?: BooleanProp;
+
+   /** Name or configuration of the icon to be put on the left side of the input. */
+   icon?: Prop<any>;
+
+   /** Additional attributes to be passed to the input element. */
+   inputAttrs?: Prop<any>;
+
+   /** If `trackFocus` is set, this value will be set when the field receives or loses focus. */
+   focused?: BooleanProp;
+
+   /** Callback invoked when the value changes. */
+   onChange?: string | ((value: any, instance: Instance) => void);
+
+   /** Callback invoked on each input event. */
+   onInput?: string | ((value: any, instance: Instance) => void);
+
+   /** Callback invoked when the field receives focus. */
+   onFocus?: string | ((e: FocusEvent, instance: Instance) => void);
+
+   /** Callback invoked when the field loses focus. */
+   onBlur?: string | ((e: FocusEvent, instance: Instance) => void);
+
+   /** Handler triggered on key down events. Return `false` to prevent default behavior. */
+   onKeyDown?: string | ((e: KeyboardEvent, instance: Instance) => boolean | void);
+
+   /** Custom validation function. */
+   onValidate?: string | ((value: string, instance: Instance, validationParams: any) => string | undefined | false);
+}
+
+// Legacy alias for backward compatibility
+export interface TextFieldProps extends TextFieldConfig {}
+
+import {
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   tooltipMouseMove,
+   tooltipMouseLeave,
+   tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
+import { StringTemplate } from "../../data/StringTemplate";
+import { Icon } from "../Icon";
+import { KeyCode } from "../../util/KeyCode";
+import { Localization } from "../../ui/Localization";
+import ClearIcon from "../icons/clear";
+import { autoFocus } from "../autoFocus";
+import { isString } from "../../util/isString";
+import { getActiveElement } from "../../util/getActiveElement";
+import { VDOM } from "../../ui/VDOM";
+
+export class TextField<Config extends TextFieldConfig = TextFieldConfig> extends Field<Config> {
+   declare public hideClear?: boolean;
+   declare public showClear?: boolean;
+   declare public alwaysShowClear?: boolean;
+   declare public validationRegExp?: RegExp;
+   declare public validationErrorText?: string;
+   declare public minLengthValidationErrorText: string;
+   declare public maxLengthValidationErrorText: string;
+   declare public reactOn: string;
+   declare public inputType?: string;
+   declare public keyboardShortcut?: string;
+   declare public trim?: boolean;
+
+   public init(): void {
+      if (typeof this.hideClear !== "undefined") this.showClear = !this.hideClear;
+
+      if (this.alwaysShowClear) this.showClear = true;
+
+      super.init();
+   }
+
+   public declareData(...args: any[]): void {
+      super.declareData(
+         {
+            value: this.emptyValue,
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            minLength: undefined,
+            maxLength: undefined,
+            icon: undefined,
+            trim: undefined,
+         },
+         ...args,
+      );
+   }
+
+   public renderInput(context: any, instance: any, key?: any): any {
+      return (
+         <Input
+            key={key}
+            instance={instance}
+            data={instance.data}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+            icon={this.renderIcon(context, instance, "icon")}
+         />
+      );
+   }
+
+   public validate(context: any, instance: any): void {
+      super.validate(context, instance);
+
+      let { data } = instance;
+
+      if (!data.error && data.value) {
+         if (this.validationRegExp) this.validationRegExp.lastIndex = 0;
+         if (this.validationRegExp && !this.validationRegExp.test(data.value)) data.error = this.validationErrorText;
+         else if (typeof data.value === "string" && data.minLength != null && data.value.length < data.minLength)
+            data.error = StringTemplate.format(this.minLengthValidationErrorText, data.minLength, data.value.length);
+         else if (typeof data.value === "string" && data.maxLength != null && data.value.length > data.maxLength)
+            data.error = StringTemplate.format(this.maxLengthValidationErrorText, data.maxLength, data.value.length);
+      }
+   }
+}
+
+TextField.prototype.baseClass = "textfield";
+TextField.prototype.reactOn = "change input blur enter";
+TextField.prototype.inputType = "text";
+TextField.prototype.validationErrorText = "The entered value is not valid.";
+TextField.prototype.minLengthValidationErrorText = "Enter {[{0}-{1}]} more character(s).";
+TextField.prototype.maxLengthValidationErrorText = "Use {0} characters or fewer.";
+TextField.prototype.suppressErrorsUntilVisited = true;
+TextField.prototype.icon = null;
+TextField.prototype.showClear = false;
+TextField.prototype.alwaysShowClear = false;
+TextField.prototype.keyboardShortcut = "false";
+TextField.prototype.trim = false;
+
+Localization.registerPrototype("cx/widgets/TextField", TextField);
+
+class Input extends VDOM.Component<any, any> {
+   public input?: HTMLInputElement;
+
+   constructor(props: any) {
+      super(props);
+      this.state = {
+         focus: false,
+      };
+   }
+
+   render(): any {
+      let { instance, data, label, help, icon: iconVDOM } = this.props;
+      let { widget, state } = instance;
+      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+
+      let icon = iconVDOM && (
+         <div
+            className={CSS.element(baseClass, "left-icon")}
+            onMouseDown={preventDefault}
+            onClick={(e: any) => this.onChange((e.target as any).value, "enter")}
+         >
+            {iconVDOM}
+         </div>
+      );
+
+      let insideButton;
+      if (
+         widget.showClear &&
+         !data.empty &&
+         !data.readOnly &&
+         !data.disabled &&
+         (widget.alwaysShowClear || !data.required)
+      ) {
+         insideButton = (
+            <div
+               className={CSS.element(baseClass, "clear")}
+               onMouseDown={(e: any) => e.preventDefault()}
+               onClick={(e: any) => this.onClearClick(e)}
+            >
+               <ClearIcon className={CSS.element(baseClass, "icon")} />
+            </div>
+         );
+      }
+
+      let empty = this.input ? !this.trimmed(this.input.value) : data.empty;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  visited: state.visited,
+                  focus: this.state.focus,
+                  icon: !!icon,
+                  clear: insideButton != null,
+                  empty: empty && !data.placeholder,
+                  error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
+               }),
+            )}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onTouchStart={stopPropagation}
+         >
+            <input
+               ref={(el: HTMLInputElement | null) => {
+                  this.input = el || undefined;
+               }}
+               className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
+               defaultValue={data.value}
+               id={data.id}
+               style={data.inputStyle}
+               type={widget.inputType}
+               disabled={data.disabled}
+               readOnly={data.readOnly}
+               tabIndex={data.tabIndex}
+               placeholder={data.placeholder}
+               {...data.inputAttrs}
+               onMouseMove={this.onMouseMove.bind(this)}
+               onMouseLeave={this.onMouseLeave.bind(this)}
+               onInput={(e: any) => this.onChange(e.target.value, "input")}
+               onChange={(e: any) => this.onChange((e.target as any).value, "change")}
+               onKeyDown={this.onKeyDown.bind(this)}
+               onFocus={this.onFocus.bind(this)}
+               onBlur={this.onBlur.bind(this)}
+               onClick={stopPropagation}
+            />
+            {insideButton}
+            {icon}
+            {label}
+            {help}
+         </div>
+      );
+   }
+
+   onFocus(): void {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      if (widget.trackFocus) {
+         this.setState({
+            focus: true,
+         });
+         instance.set("focused", true);
+      }
+      if (data.error && data.value) instance.setState({ visited: true });
+   }
+
+   onBlur(e: any): void {
+      if (this.state.focus) {
+         this.setState({
+            focus: false,
+         });
+         this.props.instance.set("focused", false);
+      }
+      this.onChange((e.target as any).value, "blur");
+   }
+
+   onClearClick(_e: any): void {
+      if (this.input) this.input.value = ""; // prevent onChange call with old text value on blur or component unmount
+      this.props.instance.set("value", this.props.instance.widget.emptyValue, { immediate: true });
+   }
+
+   onMouseMove(e: any): void {
+      const tooltip = getFieldTooltip(this.props.instance);
+      tooltipMouseMove(e, tooltip[0], tooltip[1], tooltip[2]);
+   }
+
+   onMouseLeave(e: any): void {
+      const tooltip = getFieldTooltip(this.props.instance);
+      tooltipMouseLeave(e, tooltip[0], tooltip[1], tooltip[2]);
+   }
+
+   componentDidMount(): void {
+      const tooltip = getFieldTooltip(this.props.instance);
+      tooltipParentDidMount(this.input!, tooltip[0], tooltip[1], tooltip[2]);
+      autoFocus(this.input, this);
+   }
+
+   componentDidUpdate(): void {
+      autoFocus(this.input, this);
+   }
+
+   componentWillUnmount(): void {
+      if (this.input == getActiveElement() && this.input && this.input.value != this.props.data.value)
+         this.onChange(this.input.value, "blur");
+      tooltipParentWillUnmount(this.props.instance);
+   }
+
+   onKeyDown(e: any): void {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.enter:
+            this.onChange(e.target.value, "enter");
+            break;
+
+         case KeyCode.left:
+         case KeyCode.right:
+            e.stopPropagation();
+            break;
+      }
+   }
+
+   UNSAFE_componentWillReceiveProps(props: any): void {
+      let { data } = props;
+      // The second check is required for debouncing, sometimes the value in the store lags after the input
+      // and update may be caused by some other property, i.e. visited
+      if (this.input && data.value != this.input.value && data.value != this.props.data.value)
+         this.input.value = data.value || "";
+      const tooltip = getFieldTooltip(props.instance);
+      tooltipParentWillReceiveProps(this.input!, tooltip[0], tooltip[1], tooltip[2]);
+   }
+
+   onChange(textValue: any, change: string): void {
+      let { instance, data } = this.props;
+
+      let immediate = change == "blur" || change == "enter";
+
+      if (immediate) {
+         instance.setState({ visited: true });
+      }
+
+      let { widget } = instance;
+
+      if (widget.reactOn.indexOf(change) != -1) {
+         let text = this.trimmed(textValue);
+         if (data.maxLength != null && text.length > data.maxLength) {
+            text = text.substring(0, data.maxLength);
+            if (this.input) this.input.value = text;
+         }
+
+         let value = text || widget.emptyValue;
+         if (!instance.set("value", value, { immediate })) {
+            if (this.input && text != this.input.value && immediate) this.input.value = text;
+         } else {
+            if (value) instance.setState({ visited: true });
+         }
+      }
+   }
+
+   trimmed(value: any): any {
+      if (this.props.data.trim && isString(value)) return value.trim();
+      return value;
+   }
+}
+
+Widget.alias("textfield", TextField);
diff --git a/packages/cx/src/widgets/form/TimeField.d.ts b/packages/cx/src/widgets/form/TimeField.d.ts
deleted file mode 100644
index f750e774a..000000000
--- a/packages/cx/src/widgets/form/TimeField.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as Cx from '../../core';
-import { DateTimeFieldProps } from './DateTimeField';
-
-interface TimeFieldProps extends DateTimeFieldProps {}
-
-export class TimeField extends Cx.Widget<TimeFieldProps> {}
diff --git a/packages/cx/src/widgets/form/TimeField.js b/packages/cx/src/widgets/form/TimeField.js
deleted file mode 100644
index d931716bc..000000000
--- a/packages/cx/src/widgets/form/TimeField.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Widget} from '../../ui/Widget';
-import {Localization} from '../../ui/Localization';
-import {DateTimeField} from './DateTimeField';
-
-export class TimeField extends DateTimeField {}
-
-TimeField.prototype.segment = "time";
-
-Widget.alias('timefield', TimeField);
-Localization.registerPrototype('cx/widgets/TimeField', TimeField);
-
diff --git a/packages/cx/src/widgets/form/TimeField.ts b/packages/cx/src/widgets/form/TimeField.ts
new file mode 100644
index 000000000..bd20af25a
--- /dev/null
+++ b/packages/cx/src/widgets/form/TimeField.ts
@@ -0,0 +1,10 @@
+import { Widget } from "../../ui/Widget";
+import { Localization } from "../../ui/Localization";
+import { DateTimeField } from "./DateTimeField";
+
+export class TimeField extends DateTimeField {}
+
+TimeField.prototype.segment = "time";
+
+Widget.alias("timefield", TimeField);
+Localization.registerPrototype("cx/widgets/TimeField", TimeField);
diff --git a/packages/cx/src/widgets/form/TimeList.js b/packages/cx/src/widgets/form/TimeList.js
deleted file mode 100644
index d46ff9817..000000000
--- a/packages/cx/src/widgets/form/TimeList.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ContentResolver } from "../../ui/ContentResolver";
-import { DataProxy } from "../../ui/DataProxy";
-import { List } from "../List";
-import { KeySelection } from "../../ui/selection/KeySelection";
-import { createFunctionalComponent } from "../../ui/createFunctionalComponent";
-import { zeroTime } from "../../util/date/zeroTime";
-import { Format } from "../../util/Format";
-import { Culture } from "../../ui/Culture";
-import { isString } from "../../util/isString";
-import { isFunction } from "../../util/isFunction";
-
-export const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }) => {
-   return (
-      <cx>
-         <ContentResolver
-            params={{ step, format, dummy: true }}
-            onResolve={({ step, format }) => {
-               let max = 24 * 60;
-               if (!step) step = 15;
-               if (step < 1) step = 1;
-               let times = [];
-               let today = zeroTime(new Date()).valueOf();
-               for (let m = 0; m < max; m += step) {
-                  let time = m * 60 * 1000;
-                  times.push({
-                     id: m * 60 * 1000,
-                     text: Format.value(today + time, format || "datetime;HHmm"),
-                  });
-               }
-               let stepMs = step * 60 * 1000;
-               return (
-                  <cx>
-                     <DataProxy data={{ $value: value }} immutable>
-                        <DataProxy
-                           data={{
-                              $selection: {
-                                 get: ({ $value }) => {
-                                    if ($value == null) return null;
-                                    let selectionDate = new Date($value);
-                                    let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
-                                    return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
-                                 },
-                                 set: (value, instance) => {
-                                    let { store } = instance;
-                                    let $value = store.get("$value");
-                                    let copy = $value ? new Date($value) : new Date();
-                                    let today = zeroTime(new Date()).valueOf();
-                                    let date = new Date(today + value);
-                                    copy.setHours(date.getHours());
-                                    copy.setMinutes(date.getMinutes());
-                                    copy.setSeconds(date.getSeconds());
-                                    copy.setMilliseconds(0);
-                                    let encode = encoding || Culture.getDefaultDateEncoding();
-                                    store.set("$value", encode(copy));
-                                 },
-                              },
-                           }}
-                        >
-                           <List
-                              records={times}
-                              recordAlias="$time"
-                              selection={{
-                                 type: KeySelection,
-                                 selection: { bind: "$selection" },
-                              }}
-                              {...props}
-                              onItemClick={(e, instance) => {
-                                 if (!onSelect) return;
-                                 let date = new Date(instance.store.get('$value'));
-                                 if (isString(onSelect)) instance.invokeControllerMethod(onSelect, e, instance, date);
-                                 else if (isFunction(onSelect)) onSelect(e, instance, date);
-                              }}
-                           >
-                              <div text-bind="$time.text" />
-                           </List>
-                        </DataProxy>
-                     </DataProxy>
-                  </cx>
-               );
-            }}
-         />
-      </cx>
-   );
-});
diff --git a/packages/cx/src/widgets/form/TimeList.tsx b/packages/cx/src/widgets/form/TimeList.tsx
new file mode 100644
index 000000000..fde31d772
--- /dev/null
+++ b/packages/cx/src/widgets/form/TimeList.tsx
@@ -0,0 +1,105 @@
+import { ContentResolver } from "../../ui/ContentResolver";
+import { DataProxy } from "../../ui/DataProxy";
+import { List } from "../List";
+import { KeySelection } from "../../ui/selection/KeySelection";
+import { createFunctionalComponent } from "../../ui/createFunctionalComponent";
+import { zeroTime } from "../../util/date/zeroTime";
+import { Format } from "../../util/Format";
+import { Culture } from "../../ui/Culture";
+import { isString } from "../../util/isString";
+import { isFunction } from "../../util/isFunction";
+import { bind } from "../../ui/bind";
+import type { Instance } from "../../ui/Instance";
+
+export interface TimeListProps {
+   /** Selected time value. Should be a Date object or a valid date string. */
+   value?: unknown;
+
+   /** Time step in minutes. Default is `15`. */
+   step?: number;
+
+   /** Time format string. Default is `datetime;HHmm`. */
+   format?: string;
+
+   /** Function to encode the Date object before storing. */
+   encoding?: (date: Date) => unknown;
+
+   /** Callback invoked when a time is selected. */
+   onSelect?: string | ((e: React.MouseEvent, instance: Instance, date: Date) => void);
+
+   /** Additional properties passed to the underlying component. */
+   [key: string]: unknown;
+}
+
+export const TimeList = createFunctionalComponent(
+   ({ value, step, format, encoding, onSelect, ...props }: TimeListProps) => (
+      <cx>
+         <ContentResolver
+            params={{ step, format, dummy: true }}
+            onResolve={({ step, format }: { step?: number; format?: string }) => {
+               let max = 24 * 60;
+               if (!step) step = 15;
+               if (step < 1) step = 1;
+               let times = [];
+               let today = zeroTime(new Date()).valueOf();
+               for (let m = 0; m < max; m += step) {
+                  let time = m * 60 * 1000;
+                  times.push({
+                     id: m * 60 * 1000,
+                     text: Format.value(today + time, format || "datetime;HHmm"),
+                  });
+               }
+               let stepMs = step * 60 * 1000;
+               return (
+                  <cx>
+                     <DataProxy data={{ $value: value }} immutable>
+                        <DataProxy
+                           data={{
+                              $selection: {
+                                 get: ({ $value }: { $value?: unknown }) => {
+                                    if ($value == null) return null;
+                                    let selectionDate = new Date($value as any);
+                                    let selectionTime =
+                                       selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
+                                    return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
+                                 },
+                                 set: (value: unknown, instance: Instance) => {
+                                    let { store } = instance;
+                                    let $value = store.get("$value");
+                                    let copy = $value ? new Date($value as any) : new Date();
+                                    let today = zeroTime(new Date()).valueOf();
+                                    let date = new Date(today + (value as number));
+                                    copy.setHours(date.getHours());
+                                    copy.setMinutes(date.getMinutes());
+                                    copy.setSeconds(date.getSeconds());
+                                    copy.setMilliseconds(0);
+                                    let encode = encoding || Culture.getDefaultDateEncoding();
+                                    store.set("$value", encode(copy));
+                                 },
+                              },
+                           }}
+                        >
+                           <List
+                              records={times}
+                              recordAlias="$time"
+                              selection={{ type: KeySelection, selection: bind("$selection") }}
+                              {...props}
+                              onItemClick={(e, instance) => {
+                                 if (!onSelect) return;
+                                 let date = new Date(instance.store.get("$value") as any);
+                                 if (isString(onSelect))
+                                    instance.invokeControllerMethod(onSelect, e, instance, date);
+                                 else if (isFunction(onSelect)) onSelect(e, instance, date);
+                              }}
+                           >
+                              <div text={bind("$time.text")} />
+                           </List>
+                        </DataProxy>
+                     </DataProxy>
+                  </cx>
+               );
+            }}
+         />
+      </cx>
+   ),
+);
diff --git a/packages/cx/src/widgets/form/UploadButton.d.ts b/packages/cx/src/widgets/form/UploadButton.d.ts
deleted file mode 100644
index b5482eef6..000000000
--- a/packages/cx/src/widgets/form/UploadButton.d.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface UploadButtonProps extends FieldProps {
-   /** Text description. */
-   text?: Cx.StringProp;
-
-   url?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
-   baseClass?: string;
-
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: boolean;
-
-   method?: string;
-   uploadInProgressText?: string;
-
-   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
-   abortOnDestroy?: boolean;
-
-   /** Defines file types that are accepted for upload. */
-   accept?: Cx.StringProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp;
-
-   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
-   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-}
-
-export class UploadButton extends Cx.Widget<UploadButtonProps> {}
diff --git a/packages/cx/src/widgets/form/UploadButton.js b/packages/cx/src/widgets/form/UploadButton.js
deleted file mode 100644
index 1fe861b85..000000000
--- a/packages/cx/src/widgets/form/UploadButton.js
+++ /dev/null
@@ -1,213 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Icon } from "../Icon";
-import { Field } from "./Field";
-import { Url } from "../../ui/app/Url";
-import { Localization } from "../../ui/Localization";
-
-//TODO: Implement UploadStatus which will enable canceling
-
-export class UploadButton extends Field {
-   declareData() {
-      super.declareData(
-         {
-            disabled: undefined,
-            enabled: undefined,
-            text: undefined,
-            url: undefined,
-            icon: undefined,
-            accept: undefined
-         },
-         ...arguments
-      );
-   }
-
-   renderInput(context, instance, key) {
-      let { data } = instance;
-      return (
-         <UploadButtonComponent key={key} instance={instance}>
-            {data.text || this.renderChildren(context, instance)}
-         </UploadButtonComponent>
-      );
-   }
-}
-
-UploadButton.prototype.baseClass = "uploadbutton";
-UploadButton.prototype.multiple = false;
-UploadButton.prototype.method = "POST";
-UploadButton.prototype.abortOnDestroy = false;
-UploadButton.prototype.uploadInProgressText = "Upload is in progress.";
-
-Localization.registerPrototype("cx/widgets/UploadButton", UploadButton);
-
-class UploadButtonComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.uploads = {};
-      this.state = {
-         progress: 100,
-         uploadKey: 0,
-      };
-   }
-
-   render() {
-      let { instance, children } = this.props;
-      let { widget, data } = instance;
-      let { CSS, baseClass } = widget;
-
-      let icon;
-
-      let className = data.classNames;
-
-      if (data.icon) {
-         icon = Icon.render(data.icon, {
-            className: CSS.element(baseClass, "icon"),
-         });
-         className = CSS.expand(className, CSS.state("icon"), children.length == 0 && CSS.state("empty"));
-      }
-
-      return (
-         <div
-            ref={(el) => {
-               this.el = el;
-            }}
-            className={className}
-            style={data.style}
-         >
-            <div
-               key="progress"
-               className={CSS.element(baseClass, "progress", { done: this.state.progress == 100 })}
-               style={{ width: `${this.state.progress}%` }}
-            />
-            {icon}
-            {children}
-            {!data.disabled && (
-               <input
-                  key={this.state.uploadKey}
-                  className={CSS.element(baseClass, "input")}
-                  type="file"
-                  title=" "
-                  accept={data.accept}
-                  multiple={widget.multiple}
-                  tabIndex={data.tabIndex}
-                  onChange={this.onFileSelected.bind(this)}
-               />
-            )}
-         </div>
-      );
-   }
-
-   onFileSelected(e) {
-      let files = e.dataTransfer ? e.dataTransfer.files : e.target ? e.target.files : [];
-      for (let i = 0; i < files.length; i++) this.uploadFile(files[i]);
-   }
-
-   componentDidMount() {
-      if (this.props.instance.data.autoFocus) this.el.focus();
-   }
-
-   componentWillUnmount() {
-      if (this.props.instance.widget.abortOnDestroy) {
-         for (let key in this.uploads) {
-            let upload = this.uploads[key];
-            upload.xhr.abort();
-         }
-      }
-   }
-
-   uploadFile(file) {
-      let { instance } = this.props;
-      let { data, widget } = instance;
-
-      if (widget.onResolveUrl) {
-         Promise.resolve(instance.invoke("onResolveUrl", file, instance)).then((url) => {
-            this.doUpload(file, url);
-         });
-      } else {
-         this.doUpload(file, data.url);
-      }
-   }
-
-   doUpload(file, url) {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (!url) throw new Error("Upload URL not set.");
-
-      let xhr = new XMLHttpRequest();
-      xhr.open(widget.method, Url.resolve(url));
-
-      let formData = new FormData();
-      formData.append("file", file);
-
-      let key = this.state.uploadKey;
-      this.setState({
-         uploadKey: key + 1,
-      });
-
-      let startingPromise = widget.onUploadStarting
-         ? instance.invoke("onUploadStarting", xhr, instance, file, formData)
-         : true;
-
-      Promise.resolve(startingPromise)
-         .then((result) => {
-            if (result === false) return;
-
-            let upload = (this.uploads[key] = {
-               progress: 0,
-               size: file.size || 1,
-               file: file,
-               xhr: xhr,
-            });
-
-            xhr.onload = () => {
-               delete this.uploads[key];
-               if (widget.onUploadComplete) instance.invoke("onUploadComplete", xhr, instance, file, formData);
-               this.reportProgress();
-            };
-            xhr.onerror = (e) => {
-               delete this.uploads[key];
-               if (widget.onUploadError) instance.invoke("onUploadError", e, instance, file, formData);
-               this.reportProgress();
-            };
-
-            xhr.upload.onprogress = (event) => {
-               if (event.lengthComputable) {
-                  upload.progress = event.loaded / event.total;
-                  this.reportProgress();
-                  if (widget.onUploadProgress) instance.invoke("onUploadProgress", event, instance, file, formData);
-               }
-            };
-
-            xhr.send(formData);
-         })
-         .catch((err) => {
-            if (widget.onUploadError) instance.invoke("onUploadError", err, instance, file, formData);
-            else console.error("Unhandled upload error.", err);
-         });
-
-      this.reportProgress();
-   }
-
-   reportProgress() {
-      let totalSize = 0;
-      let uploaded = 0;
-
-      for (let key in this.uploads) {
-         let upload = this.uploads[key];
-         totalSize += upload.size;
-         uploaded += upload.size * upload.progress;
-      }
-
-      let progress = 100 * (totalSize ? uploaded / totalSize : 1);
-
-      this.props.instance.setState({
-         inputError: progress == 100 ? false : this.props.instance.uploadInProgressText,
-      });
-
-      this.setState({
-         progress: Math.max(0.001, Math.floor(progress)),
-      });
-   }
-}
-
-Widget.alias("upload-button", UploadButton);
diff --git a/packages/cx/src/widgets/form/UploadButton.scss b/packages/cx/src/widgets/form/UploadButton.scss
index 628eb1d06..7f70ef3fe 100644
--- a/packages/cx/src/widgets/form/UploadButton.scss
+++ b/packages/cx/src/widgets/form/UploadButton.scss
@@ -1,4 +1,6 @@
 
+@use "sass:map";
+
 @import "../Button";
 
 @mixin cx-uploadbutton(
@@ -7,9 +9,9 @@
    $mods: $cx-button-mods,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    @include cx-button($name,
       $mods: $mods,
diff --git a/packages/cx/src/widgets/form/UploadButton.tsx b/packages/cx/src/widgets/form/UploadButton.tsx
new file mode 100644
index 000000000..4dcb338d8
--- /dev/null
+++ b/packages/cx/src/widgets/form/UploadButton.tsx
@@ -0,0 +1,307 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM } from "../../ui/Widget";
+import { Icon } from "../Icon";
+import { Field, FieldConfig, FieldInstance } from "./Field";
+import { Url } from "../../ui/app/Url";
+import { Localization } from "../../ui/Localization";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+
+//TODO: Implement UploadStatus which will enable canceling
+
+export interface UploadButtonConfig extends FieldConfig {
+   /** Set to `true` to allow multiple file selection. Default is `false`. */
+   multiple?: boolean;
+
+   /** HTTP method used for upload. Default is `POST`. */
+   method?: string;
+
+   /** Set to `true` to abort uploads when the component is destroyed. Default is `false`. */
+   abortOnDestroy?: boolean;
+
+   /** Text displayed while upload is in progress. */
+   uploadInProgressText?: string;
+
+   /** URL to upload files to. */
+   url?: StringProp;
+
+   /** Text displayed on the button. */
+   text?: StringProp;
+
+   /** Name or configuration of the icon to be displayed on the button. */
+   icon?: StringProp;
+
+   /** File types accepted for upload. E.g. `image/*`, `.pdf`, etc. */
+   accept?: StringProp;
+
+   /** Base CSS class to be applied to the button. Defaults to `uploadbutton`. */
+   baseClass?: string;
+
+   /** Callback to resolve the upload URL for each file. */
+   onResolveUrl?: string | ((file: File, instance: Instance) => string | Promise<string>);
+
+   /** Callback invoked before upload starts. Return `false` to cancel the upload. */
+   onUploadStarting?:
+      | string
+      | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => boolean | Promise<boolean>);
+
+   /** Callback invoked when upload completes successfully. */
+   onUploadComplete?: string | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => void);
+
+   /** Callback invoked to report upload progress. */
+   onUploadProgress?: string | ((event: ProgressEvent, instance: Instance, file: File, formData: FormData) => void);
+
+   /** Callback invoked when an upload error occurs. */
+   onUploadError?: string | ((error: unknown, instance: Instance, file: File, formData: FormData) => void);
+}
+
+export class UploadButton extends Field<UploadButtonConfig> {
+   declare public multiple: boolean;
+   declare public method: string;
+   declare public abortOnDestroy: boolean;
+   declare public uploadInProgressText: string;
+   declare public onResolveUrl?: string | ((file: File, instance: Instance) => string | Promise<string>);
+   declare public onUploadStarting?:
+      | string
+      | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => boolean | Promise<boolean>);
+   declare public onUploadComplete?:
+      | string
+      | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => void);
+   declare public onUploadProgress?:
+      | string
+      | ((event: ProgressEvent, instance: Instance, file: File, formData: FormData) => void);
+   declare public onUploadError?: string | ((error: unknown, instance: Instance, file: File, formData: FormData) => void);
+
+   constructor(config?: UploadButtonConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            disabled: undefined,
+            enabled: undefined,
+            text: undefined,
+            url: undefined,
+            icon: undefined,
+            accept: undefined,
+         },
+         ...args,
+      );
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<UploadButton>, key: string): React.ReactNode {
+      let { data } = instance;
+      return (
+         <UploadButtonComponent key={key} instance={instance}>
+            {data.text || this.renderChildren(context, instance)}
+         </UploadButtonComponent>
+      );
+   }
+}
+
+UploadButton.prototype.baseClass = "uploadbutton";
+UploadButton.prototype.multiple = false;
+UploadButton.prototype.method = "POST";
+UploadButton.prototype.abortOnDestroy = false;
+UploadButton.prototype.uploadInProgressText = "Upload is in progress.";
+
+Localization.registerPrototype("cx/widgets/UploadButton", UploadButton);
+
+interface UploadButtonComponentProps {
+   instance: FieldInstance<UploadButton>;
+   children?: React.ReactNode;
+}
+
+interface UploadButtonComponentState {
+   progress: number;
+   uploadKey: number;
+}
+
+interface Upload {
+   progress: number;
+   size: number;
+   file: File;
+   xhr: XMLHttpRequest;
+}
+
+class UploadButtonComponent extends VDOM.Component<UploadButtonComponentProps, UploadButtonComponentState> {
+   uploads: Record<string, Upload>;
+   el?: HTMLDivElement;
+
+   constructor(props: UploadButtonComponentProps) {
+      super(props);
+      this.uploads = {};
+      this.state = {
+         progress: 100,
+         uploadKey: 0,
+      };
+   }
+
+   render(): React.ReactNode {
+      let { instance, children } = this.props;
+      let { widget, data } = instance;
+      let { CSS, baseClass } = widget;
+
+      let icon;
+
+      let className = data.classNames;
+
+      if (data.icon) {
+         icon = Icon.render(data.icon, {
+            className: CSS.element(baseClass, "icon"),
+         });
+         className = CSS.expand(className, CSS.state("icon"), !isNonEmptyArray(children) && CSS.state("empty"));
+      }
+
+      return (
+         <div
+            ref={(el: HTMLDivElement | null) => {
+               this.el = el || undefined;
+            }}
+            className={className}
+            style={data.style}
+         >
+            <div
+               key="progress"
+               className={CSS.element(baseClass, "progress", { done: this.state.progress == 100 })}
+               style={{ width: `${this.state.progress}%` }}
+            />
+            {icon}
+            {children}
+            {!data.disabled && (
+               <input
+                  key={this.state.uploadKey}
+                  className={CSS.element(baseClass, "input")}
+                  type="file"
+                  title=" "
+                  accept={data.accept as string}
+                  multiple={widget.multiple}
+                  tabIndex={data.tabIndex as number}
+                  onChange={this.onFileSelected.bind(this)}
+               />
+            )}
+         </div>
+      );
+   }
+
+   onFileSelected(e: React.ChangeEvent<HTMLInputElement>): void {
+      let files = e.target.files;
+      if (files) {
+         for (let i = 0; i < files.length; i++) this.uploadFile(files[i]);
+      }
+   }
+
+   componentDidMount(): void {
+      if (this.props.instance.data.autoFocus) this.el!.focus();
+   }
+
+   componentWillUnmount(): void {
+      if (this.props.instance.widget.abortOnDestroy) {
+         for (let key in this.uploads) {
+            let upload = this.uploads[key];
+            upload.xhr.abort();
+         }
+      }
+   }
+
+   uploadFile(file: File): void {
+      let { instance } = this.props;
+      let { data, widget } = instance;
+
+      if (widget.onResolveUrl) {
+         Promise.resolve(instance.invoke("onResolveUrl", file, instance)).then((url) => {
+            this.doUpload(file, url);
+         });
+      } else {
+         this.doUpload(file, data.url);
+      }
+   }
+
+   doUpload(file: File, url: string): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (!url) throw new Error("Upload URL not set.");
+
+      let xhr = new XMLHttpRequest();
+      xhr.open(widget.method, Url.resolve(url));
+
+      let formData = new FormData();
+      formData.append("file", file);
+
+      let key = this.state.uploadKey;
+      this.setState({
+         uploadKey: key + 1,
+      });
+
+      let startingPromise = widget.onUploadStarting
+         ? instance.invoke("onUploadStarting", xhr, instance, file, formData)
+         : true;
+
+      Promise.resolve(startingPromise)
+         .then((result) => {
+            if (result === false) return;
+
+            let upload = (this.uploads[key] = {
+               progress: 0,
+               size: file.size || 1,
+               file: file,
+               xhr: xhr,
+            });
+
+            xhr.onload = () => {
+               delete this.uploads[key];
+               if (widget.onUploadComplete) instance.invoke("onUploadComplete", xhr, instance, file, formData);
+               this.reportProgress();
+            };
+            xhr.onerror = (e) => {
+               delete this.uploads[key];
+               if (widget.onUploadError) instance.invoke("onUploadError", e, instance, file, formData);
+               this.reportProgress();
+            };
+
+            xhr.upload.onprogress = (event) => {
+               if (event.lengthComputable) {
+                  upload.progress = event.loaded / event.total;
+                  this.reportProgress();
+                  if (widget.onUploadProgress) instance.invoke("onUploadProgress", event, instance, file, formData);
+               }
+            };
+
+            xhr.send(formData);
+         })
+         .catch((err) => {
+            if (widget.onUploadError) instance.invoke("onUploadError", err, instance, file, formData);
+            else console.error("Unhandled upload error.", err);
+         });
+
+      this.reportProgress();
+   }
+
+   reportProgress(): void {
+      let totalSize = 0;
+      let uploaded = 0;
+
+      for (let key in this.uploads) {
+         let upload = this.uploads[key];
+         totalSize += upload.size;
+         uploaded += upload.size * upload.progress;
+      }
+
+      let progress = 100 * (totalSize ? uploaded / totalSize : 1);
+
+      this.props.instance.setState({
+         inputError: progress == 100 ? false : this.props.instance.widget.uploadInProgressText,
+      });
+
+      this.setState({
+         progress: Math.max(0.001, Math.floor(progress)),
+      });
+   }
+}
+
+Widget.alias("upload-button", UploadButton);
diff --git a/packages/cx/src/widgets/form/ValidationError.d.ts b/packages/cx/src/widgets/form/ValidationError.d.ts
deleted file mode 100644
index 1b41bf4fa..000000000
--- a/packages/cx/src/widgets/form/ValidationError.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as Cx from '../../core';
-
-interface ValidationErrorProps extends Cx.WidgetProps {
-
-   /** Base CSS class to be applied to the field. Defaults to `validationerror`. */
-   baseClass?: boolean,
-
-}
-
-export class ValidationError extends Cx.Widget<ValidationErrorProps> {}
diff --git a/packages/cx/src/widgets/form/ValidationError.js b/packages/cx/src/widgets/form/ValidationError.js
deleted file mode 100644
index c6e8cb397..000000000
--- a/packages/cx/src/widgets/form/ValidationError.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-
-export class ValidationError extends Widget {
-   checkVisible(context, instance, data) {
-      if (
-         data.visible &&
-         context.lastFieldId &&
-         context.validation &&
-         context.validation.errors &&
-         context.validation.errors.length > 0
-      ) {
-         var lastError = (instance.lastError = context.validation.errors[context.validation.errors.length - 1]);
-         return lastError.fieldId == context.lastFieldId && lastError.visited;
-      }
-
-      return false;
-   }
-
-   explore(context, instance) {
-      var { data, lastError } = instance;
-      let c1 = instance.cache("lastErrorMessage", lastError.message);
-      let c2 = instance.cache("lastErrorFieldId", lastError.fieldId);
-      if (c1 || c2) {
-         data.errorMessage = lastError.message;
-         data.fieldId = lastError.fieldId;
-         instance.markShouldUpdate(context);
-      }
-      super.explore(context, instance);
-   }
-
-   render(context, instance, key) {
-      var { data } = instance;
-      return (
-         <label key={key} className={data.classNames} htmlFor={data.fieldId} style={data.style}>
-            {data.errorMessage}
-         </label>
-      );
-   }
-}
-
-ValidationError.prototype.baseClass = "validationerror";
-ValidationError.prototype.styled = true;
-
-Widget.alias("validation-error", ValidationError);
diff --git a/packages/cx/src/widgets/form/ValidationError.scss b/packages/cx/src/widgets/form/ValidationError.scss
index cab64f589..7a981674f 100644
--- a/packages/cx/src/widgets/form/ValidationError.scss
+++ b/packages/cx/src/widgets/form/ValidationError.scss
@@ -1,11 +1,12 @@
+@use "sass:map";
 
 @mixin cx-validationerror(
    $name: 'uploadbutton',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $mod: map.get($besm, mod);
 
    .#{$block}validationerror {
       color: rgb(220, 0, 9);
diff --git a/packages/cx/src/widgets/form/ValidationError.tsx b/packages/cx/src/widgets/form/ValidationError.tsx
new file mode 100644
index 000000000..7c0a7e6e0
--- /dev/null
+++ b/packages/cx/src/widgets/form/ValidationError.tsx
@@ -0,0 +1,72 @@
+/** @jsxImportSource react */
+
+import type { Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { Widget } from "../../ui/Widget";
+import type { FormRenderingContext } from "./ValidationGroup";
+
+interface ValidationErrorData {
+   visible?: boolean;
+   classNames?: string;
+   fieldId?: string;
+   errorMessage?: string;
+   style?: Record<string, string | number> | string;
+}
+
+interface ValidationErrorInstance extends Instance {
+   lastError?: {
+      fieldId: string;
+      message: string;
+      visited: boolean;
+      type: string;
+   };
+   data: ValidationErrorData;
+}
+
+export class ValidationError extends Widget {
+   checkVisible(context: FormRenderingContext, instance: ValidationErrorInstance, data: ValidationErrorData): boolean {
+      if (
+         data.visible &&
+         context.lastFieldId &&
+         context.validation &&
+         context.validation.errors &&
+         context.validation.errors.length > 0
+      ) {
+         var lastError = (instance.lastError = context.validation.errors[context.validation.errors.length - 1]);
+         return lastError.fieldId == context.lastFieldId && lastError.visited;
+      }
+
+      return false;
+   }
+
+   explore(context: FormRenderingContext, instance: ValidationErrorInstance): void {
+      var { data, lastError } = instance;
+      let c1 = instance.cache("lastErrorMessage", lastError?.message);
+      let c2 = instance.cache("lastErrorFieldId", lastError?.fieldId);
+      if (c1 || c2) {
+         data.errorMessage = lastError?.message;
+         data.fieldId = lastError?.fieldId;
+         instance.markShouldUpdate(context);
+      }
+      super.explore(context, instance);
+   }
+
+   render(context: RenderingContext, instance: ValidationErrorInstance, key: string): React.ReactElement {
+      var { data } = instance;
+      return (
+         <label
+            key={key}
+            className={data.classNames as string}
+            htmlFor={data.fieldId}
+            style={data.style as React.CSSProperties}
+         >
+            {data.errorMessage}
+         </label>
+      );
+   }
+}
+
+ValidationError.prototype.baseClass = "validationerror";
+ValidationError.prototype.styled = true;
+
+Widget.alias("validation-error", ValidationError);
diff --git a/packages/cx/src/widgets/form/ValidationGroup.d.ts b/packages/cx/src/widgets/form/ValidationGroup.d.ts
deleted file mode 100644
index 9b7189e8d..000000000
--- a/packages/cx/src/widgets/form/ValidationGroup.d.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as Cx from "../../core";
-
-export interface ValidationGroupProps extends Cx.PureContainerProps {
-   /** Binding used to store validation errors in the store. */
-   errors?: Cx.Record[];
-
-   /** Binding which will be set to true if all child form field are valid. */
-   valid?: Cx.BooleanProp;
-
-   /** Binding which will be set to true if any of child form field reports validation error. */
-   invalid?: Cx.BooleanProp;
-
-   /** Set to `false` to disable all inner elements that support `disabled` property. */
-   enabled?: Cx.BooleanProp;
-
-   /** Set to `true` to disable all inner elements that support `disabled` property. */
-   disabled?: Cx.BooleanProp;
-
-   /** Set to `true` to make read-only all inner elements that support `readOnly` property. */
-   readOnly?: Cx.BooleanProp;
-
-   /** Set to `true` to isolate children from participating in outer validation scopes. */
-   isolated?: Cx.BooleanProp;
-
-   /** Set to `true` to notify all children to report errors. */
-   visited?: Cx.BooleanProp;
-
-   /** Set to `true` to tab on Enter key for all children. */
-   tabOnEnterKey?: Cx.BooleanProp;
-
-   /** Set to `true` to set all child fields to view mode. */
-   viewMode?: Cx.BooleanProp;
-
-   /** Set to `true` to force children to respect disabled, readOnly, viewMode and visited flags set on the group level. */
-   strict?: Cx.BooleanProp;
-
-   /** Set to `true` to add red asterisk for all required fields inside the group. */
-   asterisk?: Cx.BooleanProp;
-}
-
-export class ValidationGroup extends Cx.Widget<ValidationGroupProps> {}
diff --git a/packages/cx/src/widgets/form/ValidationGroup.js b/packages/cx/src/widgets/form/ValidationGroup.js
deleted file mode 100644
index b8c154876..000000000
--- a/packages/cx/src/widgets/form/ValidationGroup.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Widget } from "../../ui/Widget";
-import { PureContainer } from "../../ui/PureContainer";
-import { isDefined } from "../../util/isDefined";
-import { shallowEquals } from "../../util/shallowEquals";
-import { coalesce } from "../../util/coalesce";
-
-export class ValidationGroup extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         errors: undefined,
-         valid: undefined,
-         invalid: undefined,
-         disabled: undefined,
-         enabled: undefined,
-         readOnly: undefined,
-         viewMode: undefined,
-         tabOnEnterKey: undefined,
-         isolated: undefined,
-         visited: undefined,
-         strict: undefined,
-         asterisk: undefined,
-      });
-   }
-
-   explore(context, instance) {
-      if (isDefined(instance.data.enabled)) instance.data.disabled = !instance.data.enabled;
-
-      instance.validation = {
-         errors: [],
-      };
-
-      context.push("parentStrict", coalesce(instance.data.strict, context.parentStrict));
-      context.push("parentDisabled", coalesce(instance.data.disabled, context.parentDisabled));
-      context.push("parentReadOnly", coalesce(instance.data.readOnly, context.parentReadOnly));
-      context.push("parentViewMode", coalesce(instance.data.viewMode, context.parentViewMode));
-      context.push("parentTabOnEnterKey", coalesce(instance.data.tabOnEnterKey, context.parentTabOnEnterKey));
-      context.push("parentVisited", coalesce(instance.data.visited, context.parentVisited));
-      context.push("parentAsterisk", coalesce(instance.data.asterisk, context.parentAsterisk));
-      context.push("validation", instance.validation);
-
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("validation");
-      context.pop("parentVisited");
-      context.pop("parentDisabled");
-      context.pop("parentReadOnly");
-      context.pop("parentViewMode");
-      context.pop("parentTabOnEnterKey");
-      context.pop("parentStrict");
-      context.pop("parentAsterisk");
-
-      instance.valid = instance.validation.errors.length == 0;
-      if (!instance.valid && !this.isolated && context.validation)
-         context.validation.errors.push(...instance.validation.errors);
-
-      instance.set("valid", instance.valid);
-      instance.set("invalid", !instance.valid);
-
-      if (this.errors && !shallowEquals(instance.data.errors, instance.validation.errors))
-         instance.set("errors", instance.validation.errors);
-   }
-}
-
-ValidationGroup.prototype.isolated = false;
-
-Widget.alias("validation-group", ValidationGroup);
diff --git a/packages/cx/src/widgets/form/ValidationGroup.spec.js b/packages/cx/src/widgets/form/ValidationGroup.spec.js
deleted file mode 100644
index 7b0cfc4cc..000000000
--- a/packages/cx/src/widgets/form/ValidationGroup.spec.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import { Cx } from "../../ui/Cx";
-import { VDOM } from "../../ui/VDOM";
-import { Store } from "../../data/Store";
-import { HtmlElement } from "../HtmlElement";
-import { ValidationGroup } from "./ValidationGroup";
-import { Validator } from "./Validator";
-
-import renderer from "react-test-renderer";
-import assert from "assert";
-
-describe("ValidationGroup", () => {
-   it("performs validation and sets the flags", () => {
-      let widget = (
-         <cx>
-            <ValidationGroup invalid-bind="invalid" valid-bind="valid">
-               <Validator onValidate={() => "Something is wrong..."} />
-               <div visible-bind="invalid">Invalid</div>
-            </ValidationGroup>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-      assert.equal(tree.type, "div");
-      assert.equal(store.get("invalid"), true);
-      assert.equal(store.get("valid"), false);
-   });
-
-   it("nested validation works", () => {
-      let widget = (
-         <cx>
-            <div>
-               <ValidationGroup invalid-bind="invalid">
-                  <ValidationGroup invalid-bind="invalid1">
-                     <Validator onValidate={() => "Something is wrong..."} />
-                  </ValidationGroup>
-                  <ValidationGroup invalid-bind="invalid2">
-                     <Validator onValidate={() => false} />
-                  </ValidationGroup>
-               </ValidationGroup>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      let tree = component.toJSON();
-      assert.equal(store.get("invalid"), true);
-      assert.equal(store.get("invalid1"), true);
-      assert.equal(store.get("invalid2"), false);
-   });
-
-   it("isolated validation group does not affect the parent", () => {
-      let widget = (
-         <cx>
-            <div>
-               <ValidationGroup invalid-bind="invalid">
-                  <ValidationGroup invalid-bind="invalid1" isolated>
-                     <Validator onValidate={() => "Something is wrong..."} />
-                  </ValidationGroup>
-                  <ValidationGroup invalid-bind="invalid2">
-                     <Validator onValidate={() => false} />
-                  </ValidationGroup>
-               </ValidationGroup>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      let tree = component.toJSON();
-      assert.equal(store.get("invalid"), false);
-      assert.equal(store.get("invalid1"), true);
-      assert.equal(store.get("invalid2"), false);
-   });
-
-   it("visited flag is propagated into nested validation groups", () => {
-      let visited = false;
-
-      let widget = (
-         <cx>
-            <div>
-               <ValidationGroup visited>
-                  <ValidationGroup>
-                     <div
-                        onExplore={(context, instance) => {
-                           if (context.parentVisited) visited = true;
-                        }}
-                     />
-                  </ValidationGroup>
-               </ValidationGroup>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      let tree = component.toJSON();
-      assert(visited);
-   });
-
-   it("disabled flag can be overruled by the field props", () => {
-      let widget = (
-         <cx>
-            <div>
-               <ValidationGroup invalid-bind="invalid" disabled>
-                  <Validator onValidate={() => "Something is wrong..."} disabled={false} />
-               </ValidationGroup>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      let tree = component.toJSON();
-      assert.equal(store.get("invalid"), true);
-   });
-
-   it("strict flag is used to enforce disabled flag", () => {
-      let widget = (
-         <cx>
-            <div>
-               <ValidationGroup invalid-bind="invalid" disabled strict>
-                  <Validator onValidate={() => "Something is wrong..."} disabled={false} />
-               </ValidationGroup>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe />);
-
-      let tree = component.toJSON();
-      assert.equal(store.get("invalid"), false);
-   });
-});
diff --git a/packages/cx/src/widgets/form/ValidationGroup.spec.tsx b/packages/cx/src/widgets/form/ValidationGroup.spec.tsx
new file mode 100644
index 000000000..1be06d03c
--- /dev/null
+++ b/packages/cx/src/widgets/form/ValidationGroup.spec.tsx
@@ -0,0 +1,147 @@
+import { Store } from "../../data/Store";
+import { ValidationGroup } from "./ValidationGroup";
+import { Validator } from "./Validator";
+import { bind } from "../../ui/bind";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+
+import assert from "assert";
+
+describe("ValidationGroup", () => {
+   it("performs validation and sets the flags", async () => {
+      let widget = (
+         <cx>
+            <ValidationGroup invalid={bind("invalid")} valid={bind("valid")}>
+               <Validator onValidate={() => "Something is wrong..."} />
+               <div visible={bind("invalid")}>Invalid</div>
+            </ValidationGroup>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree));
+      assert.equal(tree.type, "div");
+      assert.equal(store.get("invalid"), true);
+      assert.equal(store.get("valid"), false);
+   });
+
+   it("nested validation works", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup invalid={bind("invalid")}>
+                  <ValidationGroup invalid={bind("invalid1")}>
+                     <Validator onValidate={() => "Something is wrong..."} />
+                  </ValidationGroup>
+                  <ValidationGroup invalid={bind("invalid2")}>
+                     <Validator onValidate={() => false} />
+                  </ValidationGroup>
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(store.get("invalid"), true);
+      assert.equal(store.get("invalid1"), true);
+      assert.equal(store.get("invalid2"), false);
+   });
+
+   it("isolated validation group does not affect the parent", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup invalid={bind("invalid")}>
+                  <ValidationGroup invalid={bind("invalid1")} isolated>
+                     <Validator onValidate={() => "Something is wrong..."} />
+                  </ValidationGroup>
+                  <ValidationGroup invalid={bind("invalid2")}>
+                     <Validator onValidate={() => false} />
+                  </ValidationGroup>
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(store.get("invalid"), false);
+      assert.equal(store.get("invalid1"), true);
+      assert.equal(store.get("invalid2"), false);
+   });
+
+   it("visited flag is propagated into nested validation groups", async () => {
+      let visited = false;
+
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup visited>
+                  <ValidationGroup>
+                     <div
+                        onExplore={(context, instance) => {
+                           if (context.parentVisited) visited = true;
+                        }}
+                     />
+                  </ValidationGroup>
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(visited);
+   });
+
+   it("disabled flag can be overruled by the field props", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup invalid={bind("invalid")} disabled>
+                  <Validator onValidate={() => "Something is wrong..."} disabled={false} />
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(store.get("invalid"), true);
+   });
+
+   it("strict flag is used to enforce disabled flag", async () => {
+      let widget = (
+         <cx>
+            <div>
+               <ValidationGroup invalid={bind("invalid")} disabled strict>
+                  <Validator onValidate={() => "Something is wrong..."} disabled={false} />
+               </ValidationGroup>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(store.get("invalid"), false);
+   });
+});
diff --git a/packages/cx/src/widgets/form/ValidationGroup.ts b/packages/cx/src/widgets/form/ValidationGroup.ts
new file mode 100644
index 000000000..5b6bd8291
--- /dev/null
+++ b/packages/cx/src/widgets/form/ValidationGroup.ts
@@ -0,0 +1,141 @@
+import { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { Widget } from "../../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import { isDefined } from "../../util/isDefined";
+import { shallowEquals } from "../../util/shallowEquals";
+import { coalesce } from "../../util/coalesce";
+import { BooleanProp, Prop } from "../../ui/Prop";
+
+/** Typed context interface for form-related context properties */
+export interface FormRenderingContext extends RenderingContext {
+   parentDisabled?: boolean;
+   parentReadOnly?: boolean;
+   parentViewMode?: boolean | string;
+   parentTabOnEnterKey?: boolean;
+   parentVisited?: boolean;
+   parentStrict?: boolean;
+   parentAsterisk?: boolean;
+   validation?: { errors: ValidationErrorData[] };
+   lastFieldId?: string;
+}
+
+export interface ValidationErrorData {
+   fieldId: string;
+   message: string;
+   visited: boolean;
+   type: string;
+}
+
+export interface ValidationGroupInstance extends Instance {
+   validation: {
+      errors: ValidationErrorData[];
+   };
+   valid?: boolean;
+}
+
+export interface ValidationGroupConfig extends PureContainerConfig {
+   /** Binding used to store validation errors in the store. */
+   errors?: Prop<ValidationErrorData[]>;
+
+   /** Binding which will be set to true if all child form field are valid. */
+   valid?: BooleanProp;
+
+   /** Binding which will be set to true if any of child form field reports validation error. */
+   invalid?: BooleanProp;
+
+   /** Set to `false` to disable all inner elements that support `disabled` property. */
+   enabled?: BooleanProp;
+
+   /** Set to `true` to disable all inner elements that support `disabled` property. */
+   disabled?: BooleanProp;
+
+   /** Set to `true` to make read-only all inner elements that support `readOnly` property. */
+   readOnly?: BooleanProp;
+
+   /** Set to `true` to isolate children from participating in outer validation scopes. */
+   isolated?: BooleanProp;
+
+   /** Set to `true` to notify all children to report errors. */
+   visited?: BooleanProp;
+
+   /** Set to `true` to tab on Enter key for all children. */
+   tabOnEnterKey?: BooleanProp;
+
+   /** Set to `true` to set all child fields to view mode. */
+   viewMode?: BooleanProp;
+
+   /** Set to `true` to force children to respect disabled, readOnly, viewMode and visited flags set on the group level. */
+   strict?: BooleanProp;
+
+   /** Set to `true` to add red asterisk for all required fields inside the group. */
+   asterisk?: BooleanProp;
+}
+
+export class ValidationGroup<
+   TConfig extends ValidationGroupConfig = ValidationGroupConfig
+> extends PureContainerBase<TConfig, ValidationGroupInstance> {
+   declare errors?: Prop<ValidationErrorData[]>;
+   declare isolated?: boolean;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         errors: undefined,
+         valid: undefined,
+         invalid: undefined,
+         disabled: undefined,
+         enabled: undefined,
+         readOnly: undefined,
+         viewMode: undefined,
+         tabOnEnterKey: undefined,
+         isolated: undefined,
+         visited: undefined,
+         strict: undefined,
+         asterisk: undefined,
+      });
+   }
+
+   explore(context: FormRenderingContext, instance: ValidationGroupInstance): void {
+      if (isDefined(instance.data.enabled)) instance.data.disabled = !instance.data.enabled;
+
+      instance.validation = {
+         errors: [],
+      };
+
+      context.push("parentStrict", coalesce(instance.data.strict, context.parentStrict));
+      context.push("parentDisabled", coalesce(instance.data.disabled, context.parentDisabled));
+      context.push("parentReadOnly", coalesce(instance.data.readOnly, context.parentReadOnly));
+      context.push("parentViewMode", coalesce(instance.data.viewMode, context.parentViewMode));
+      context.push("parentTabOnEnterKey", coalesce(instance.data.tabOnEnterKey, context.parentTabOnEnterKey));
+      context.push("parentVisited", coalesce(instance.data.visited, context.parentVisited));
+      context.push("parentAsterisk", coalesce(instance.data.asterisk, context.parentAsterisk));
+      context.push("validation", instance.validation);
+
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: FormRenderingContext, instance: ValidationGroupInstance): void {
+      context.pop("validation");
+      context.pop("parentVisited");
+      context.pop("parentDisabled");
+      context.pop("parentReadOnly");
+      context.pop("parentViewMode");
+      context.pop("parentTabOnEnterKey");
+      context.pop("parentStrict");
+      context.pop("parentAsterisk");
+
+      instance.valid = instance.validation.errors.length == 0;
+      if (!instance.valid && !this.isolated && context.validation)
+         context.validation.errors.push(...instance.validation.errors);
+
+      instance.set("valid", instance.valid);
+      instance.set("invalid", !instance.valid);
+
+      if (this.errors && !shallowEquals(instance.data.errors, instance.validation.errors))
+         instance.set("errors", instance.validation.errors);
+   }
+}
+
+ValidationGroup.prototype.isolated = false;
+
+Widget.alias("validation-group", ValidationGroup);
diff --git a/packages/cx/src/widgets/form/Validator.d.ts b/packages/cx/src/widgets/form/Validator.d.ts
deleted file mode 100644
index eaf64230f..000000000
--- a/packages/cx/src/widgets/form/Validator.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface ValidatorProps extends FieldProps {
-   value: Cx.StructuredProp;
-}
-
-export class Validator extends Cx.Widget<ValidatorProps> {}
diff --git a/packages/cx/src/widgets/form/Validator.js b/packages/cx/src/widgets/form/Validator.js
deleted file mode 100644
index ecfeaa944..000000000
--- a/packages/cx/src/widgets/form/Validator.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Field } from "./Field";
-
-export class Validator extends Field {
-   declareData() {
-      return super.declareData(...arguments, {
-         value: {
-            structured: true,
-         },
-         disabled: undefined,
-      });
-   }
-
-   isEmpty(data) {
-      return false;
-   }
-
-   render(context, instance, key) {
-      if (!instance.state.visited || !instance.data.error) return;
-      return this.renderChildren(context, instance, key);
-   }
-}
diff --git a/packages/cx/src/widgets/form/Validator.ts b/packages/cx/src/widgets/form/Validator.ts
new file mode 100644
index 000000000..3e68179dd
--- /dev/null
+++ b/packages/cx/src/widgets/form/Validator.ts
@@ -0,0 +1,60 @@
+import { Field, FieldConfig } from "./Field";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import type { StructuredProp, ResolvePropType } from "../../ui/Prop";
+
+/**
+ * Configuration for Validator widget.
+ *
+ * The value type parameter enables type inference for the onValidate callback:
+ * - Literal values preserve their types
+ * - AccessorChain<T> resolves to T
+ * - Bind/Tpl/Expr resolve to any
+ * - Structured props (objects) have each property resolved individually
+ *
+ * @example
+ * ```typescript
+ * <Validator
+ *    value={{
+ *       password: model.user.password,
+ *       confirmPassword: model.user.confirmPassword
+ *    }}
+ *    onValidate={(value) => {
+ *       if (value.password !== value.confirmPassword)
+ *          return "Passwords do not match";
+ *    }}
+ * />
+ * ```
+ */
+export interface ValidatorConfig<V = StructuredProp> extends FieldConfig {
+   /** The value to be validated. Can be a structured object with multiple fields. */
+   value?: V;
+
+   /** Custom validation function. */
+   onValidate?:
+      | string
+      | ((value: ResolvePropType<V>, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class Validator<V = StructuredProp> extends Field<ValidatorConfig<V>> {
+   constructor(config?: ValidatorConfig<V>) {
+      super(config);
+   }
+   declareData(...args: Record<string, unknown>[]): void {
+      return super.declareData(...args, {
+         value: {
+            structured: true,
+         },
+         disabled: undefined,
+      });
+   }
+
+   isEmpty(data: Record<string, unknown>): boolean {
+      return false;
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): any {
+      if (!instance.state?.visited || !instance.data.error) return null;
+      return this.renderChildren(context, instance, key);
+   }
+}
diff --git a/packages/cx/src/widgets/form/Wheel.js b/packages/cx/src/widgets/form/Wheel.js
deleted file mode 100644
index c59b5ddfd..000000000
--- a/packages/cx/src/widgets/form/Wheel.js
+++ /dev/null
@@ -1,261 +0,0 @@
-import { VDOM } from "../../ui/Widget";
-import { PureContainer } from "../../ui/PureContainer";
-import { KeyCode } from "../../util/KeyCode";
-import { Icon } from "../Icon";
-import { addEventListenerWithOptions } from "../../util";
-
-export class Wheel extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         value: undefined,
-         options: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      let { value, options } = data;
-      let index = options.findIndex((a) => a.id === value);
-      if (index === -1) index = Math.floor(options.length / 2);
-
-      return (
-         <WheelComponent
-            key={key}
-            size={this.size}
-            focusable
-            CSS={this.CSS}
-            baseClass={this.baseClass}
-            className={data.classNames}
-            style={data.style}
-            index={index}
-            onChange={(newIndex) => {
-               let option = options[newIndex];
-               instance.set("value", option.id);
-            }}
-         >
-            {options.map((o, i) => (
-               <span key={0}>{o.text}</span>
-            ))}
-         </WheelComponent>
-      );
-   }
-}
-
-Wheel.prototype.baseClass = "wheel";
-Wheel.prototype.size = 3;
-Wheel.prototype.styled = true;
-
-export class WheelComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {};
-      this.index = props.index || 0;
-      this.wheelRef = (el) => {
-         this.wheelEl = el;
-      };
-      this.scrollRef = (el) => {
-         this.scrollEl = el;
-      };
-      this.onWheel = this.onWheel.bind(this);
-      this.onKeyDown = this.onKeyDown.bind(this);
-   }
-
-   render() {
-      let { size, children, CSS, baseClass, active, className, style, onMouseDown } = this.props;
-      let optionClass = CSS.element(baseClass, "option");
-      let dummyClass = CSS.element(baseClass, "option", { dummy: true });
-
-      let tpad = [],
-         bpad = [],
-         padSize = 0;
-
-      for (let i = 0; i < (size - 1) / 2; i++) {
-         tpad.push({ key: -1 - i, child: children[0], cls: dummyClass });
-         bpad.push({ key: -100 - i, child: children[0], cls: dummyClass });
-         padSize++;
-      }
-
-      let displayedOptions = [
-         ...tpad,
-         ...children.map((c, i) => ({
-            key: i,
-            child: c,
-            cls: optionClass,
-         })),
-         ...bpad,
-      ];
-
-      if (!this.state.wheelHeight) displayedOptions = displayedOptions.slice(this.index, this.index + size);
-
-      return (
-         <div
-            tabIndex={this.props.focusable ? data.tabIndex || 0 : null}
-            className={className || CSS.element(baseClass, "container", { active })}
-            style={style}
-            onKeyDown={this.onKeyDown}
-         >
-            <div
-               className={CSS.element(baseClass, "clip")}
-               style={{
-                  width: this.state.wheelWidth,
-               }}
-               onMouseDown={onMouseDown}
-            >
-               <div
-                  className={CSS.element(baseClass, "vscroll")}
-                  ref={this.scrollRef}
-                  onTouchStart={this.onTouchStart.bind(this)}
-                  onTouchEnd={this.onTouchEnd.bind(this)}
-               >
-                  <div
-                     className={CSS.element(baseClass, "wheel")}
-                     style={{
-                        height: this.state.wheelHeight,
-                     }}
-                     ref={this.wheelRef}
-                  >
-                     {displayedOptions.map((opt) => (
-                        <div key={opt.key} className={opt.cls}>
-                           {opt.child}
-                        </div>
-                     ))}
-                  </div>
-               </div>
-               <div
-                  className={CSS.element(baseClass, "mask")}
-                  style={{
-                     top: `0`,
-                     bottom: `${(50 + 50 / size).toFixed(3)}%`,
-                  }}
-               />
-               <div
-                  className={CSS.element(baseClass, "mask")}
-                  style={{
-                     top: `${(50 + 50 / size).toFixed(3)}%`,
-                     bottom: `0`,
-                  }}
-               />
-               <div
-                  className={CSS.element(baseClass, "selection")}
-                  style={{
-                     height: `${(100 / size).toFixed(3)}%`,
-                     top: `${(50 - 50 / size).toFixed(3)}%`,
-                  }}
-               />
-            </div>
-            <div
-               className={CSS.element(baseClass, "arrow-up")}
-               onClick={(e) => {
-                  e.preventDefault();
-                  this.select(this.index - 1);
-               }}
-            >
-               {Icon.render("drop-down", { className: CSS.element(baseClass, "arrow-icon") })}
-            </div>
-            <div
-               className={CSS.element(baseClass, "arrow-down")}
-               onClick={(e) => {
-                  e.preventDefault();
-                  this.select(this.index + 1);
-               }}
-            >
-               {Icon.render("drop-down", { className: CSS.element(baseClass, "arrow-icon") })}
-            </div>
-         </div>
-      );
-   }
-
-   componentDidMount() {
-      this.unsubscribeOnWheel = addEventListenerWithOptions(this.wheelEl, "wheel", this.onWheel, { passive: false });
-
-      this.setState(
-         {
-            wheelHeight: this.wheelEl.offsetHeight,
-            wheelWidth: this.wheelEl.offsetWidth,
-         },
-         () => {
-            this.scrollEl.scrollTop = (this.index * this.state.wheelHeight) / this.props.size;
-         }
-      );
-
-      if (this.props.onPipeKeyDown) this.props.onPipeKeyDown(this.onKeyDown);
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      this.index = props.index || 0;
-      this.scrollTo();
-   }
-
-   componentWillUnmount() {
-      this.scrolling = false;
-      this.unsubscribeOnWheel();
-   }
-
-   onKeyDown(e) {
-      switch (e.keyCode) {
-         case KeyCode.up:
-            e.preventDefault();
-            this.select(this.index - 1);
-            break;
-
-         case KeyCode.down:
-            e.preventDefault();
-            this.select(this.index + 1);
-            break;
-      }
-   }
-
-   onWheel(e) {
-      e.preventDefault();
-      let index = this.index;
-      if (e.deltaY > 0) index++;
-      else index--;
-      this.select(index);
-   }
-
-   onTouchStart(e) {
-      this.scrolling = false;
-   }
-
-   onTouchEnd(e) {
-      let { size } = this.props;
-      let index = Math.round(this.scrollEl.scrollTop / (this.state.wheelHeight / size));
-      this.select(index);
-   }
-
-   select(newIndex) {
-      let { children } = this.props;
-      newIndex = Math.max(0, Math.min(children.length - 1, newIndex));
-      if (this.index !== newIndex) {
-         this.index = newIndex;
-         this.props.onChange(newIndex);
-      }
-      this.scrollTo();
-   }
-
-   scrollTo() {
-      let { size } = this.props;
-
-      let callback = () => {
-         if (!this.scrolling) return;
-
-         let x = (this.index * this.state.wheelHeight) / size;
-         let delta = Math.round(x - this.scrollEl.scrollTop);
-         if (delta === 0) {
-            this.scrolling = false;
-            return;
-         }
-         let sign = delta > 0 ? 1 : -1;
-         delta = Math.abs(delta) / 10;
-         if (delta < 1) delta = 1;
-
-         this.scrollEl.scrollTop += sign * delta;
-         requestAnimationFrame(callback);
-      };
-
-      if (!this.scrolling) {
-         this.scrolling = true;
-         requestAnimationFrame(callback);
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/form/Wheel.scss b/packages/cx/src/widgets/form/Wheel.scss
index 94ad26107..3165e2ed6 100644
--- a/packages/cx/src/widgets/form/Wheel.scss
+++ b/packages/cx/src/widgets/form/Wheel.scss
@@ -1,12 +1,14 @@
+@use "sass:map";
+
 @mixin cx-wheel-elements(
    $name: "wheel",
    $tool-size: $cx-default-input-tool-size,
    $icon-size: $cx-default-input-icon-size,
    $besm: $cx-besm
 ) {
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$element}#{$name}-container {
       position: relative;
@@ -117,10 +119,10 @@
    $icon-size: $cx-default-input-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       display: inline-block;
diff --git a/packages/cx/src/widgets/form/Wheel.tsx b/packages/cx/src/widgets/form/Wheel.tsx
new file mode 100644
index 000000000..56252dfac
--- /dev/null
+++ b/packages/cx/src/widgets/form/Wheel.tsx
@@ -0,0 +1,314 @@
+/** @jsxImportSource react */
+
+import { VDOM } from "../../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import { KeyCode } from "../../util/KeyCode";
+import { Icon } from "../Icon";
+import { addEventListenerWithOptions } from "../../util";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import type { CSS } from "../../ui/CSS";
+import { Prop, StructuredProp } from "../../ui/Prop";
+
+export interface WheelConfig extends PureContainerConfig {
+   /** The selected value. */
+   value?: Prop<any>;
+
+   /** Array of available options. */
+   options?: StructuredProp;
+
+   /** Number of visible options in the wheel. Default is 3. */
+   size?: number;
+}
+
+export class Wheel extends PureContainerBase<WheelConfig> {
+   declare size: number;
+   declare baseClass: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      return super.declareData(...args, {
+         value: undefined,
+         options: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data } = instance;
+      let { value, options } = data;
+      let index = options.findIndex((a: any) => a.id === value);
+      if (index === -1) index = Math.floor(options.length / 2);
+
+      return (
+         <WheelComponent
+            key={key}
+            size={this.size}
+            focusable
+            CSS={this.CSS}
+            baseClass={this.baseClass}
+            className={data.classNames}
+            style={data.style}
+            index={index}
+            onChange={(newIndex) => {
+               let option = options[newIndex];
+               instance.set("value", option.id);
+            }}
+         >
+            {options.map((o: any, i: number) => (
+               <span key={0}>{o.text}</span>
+            ))}
+         </WheelComponent>
+      );
+   }
+}
+
+Wheel.prototype.baseClass = "wheel";
+Wheel.prototype.size = 3;
+Wheel.prototype.styled = true;
+
+export interface WheelComponentProps {
+   size: number;
+   children: React.ReactNode[];
+   CSS: typeof CSS;
+   baseClass: string;
+   active?: boolean;
+   className?: string;
+   style?: React.CSSProperties;
+   index?: number;
+   onChange: (newIndex: number) => void;
+   onPipeKeyDown?: (fn: (e: React.KeyboardEvent) => void) => void;
+   onMouseDown?: () => void;
+   focusable?: boolean;
+}
+
+interface WheelComponentState {
+   wheelHeight?: number;
+   wheelWidth?: number;
+}
+
+export class WheelComponent extends VDOM.Component<WheelComponentProps, WheelComponentState> {
+   index: number;
+   wheelEl!: HTMLDivElement;
+   scrollEl!: HTMLDivElement;
+   unsubscribeOnWheel!: () => void;
+   declare scrolling?: boolean;
+
+   constructor(props: WheelComponentProps) {
+      super(props);
+      this.state = {};
+      this.index = props.index || 0;
+      this.wheelRef = (el: HTMLDivElement | null) => {
+         if (el) this.wheelEl = el;
+      };
+      this.scrollRef = (el: HTMLDivElement | null) => {
+         if (el) this.scrollEl = el;
+      };
+      this.onWheel = this.onWheel.bind(this);
+      this.onKeyDown = this.onKeyDown.bind(this);
+   }
+
+   wheelRef: (el: HTMLDivElement | null) => void;
+   scrollRef: (el: HTMLDivElement | null) => void;
+
+   render(): React.ReactNode {
+      let { size, children, CSS, baseClass, active, className, style, onMouseDown } = this.props;
+      let optionClass = CSS.element(baseClass, "option");
+      let dummyClass = CSS.element(baseClass, "option", { dummy: true });
+
+      let tpad = [],
+         bpad = [],
+         padSize = 0;
+
+      for (let i = 0; i < (size - 1) / 2; i++) {
+         tpad.push({ key: -1 - i, child: children[0], cls: dummyClass });
+         bpad.push({ key: -100 - i, child: children[0], cls: dummyClass });
+         padSize++;
+      }
+
+      let displayedOptions = [
+         ...tpad,
+         ...children.map((c, i) => ({
+            key: i,
+            child: c,
+            cls: optionClass,
+         })),
+         ...bpad,
+      ];
+
+      if (!this.state.wheelHeight) displayedOptions = displayedOptions.slice(this.index, this.index + size);
+
+      return (
+         <div
+            tabIndex={this.props.focusable ? 0 : undefined}
+            className={className || CSS.element(baseClass, "container", { active })}
+            style={style}
+            onKeyDown={this.onKeyDown}
+         >
+            <div
+               className={CSS.element(baseClass, "clip")}
+               style={{
+                  width: this.state.wheelWidth,
+               }}
+               onMouseDown={onMouseDown}
+            >
+               <div
+                  className={CSS.element(baseClass, "vscroll")}
+                  ref={this.scrollRef}
+                  onTouchStart={this.onTouchStart.bind(this)}
+                  onTouchEnd={this.onTouchEnd.bind(this)}
+               >
+                  <div
+                     className={CSS.element(baseClass, "wheel")}
+                     style={{
+                        height: this.state.wheelHeight,
+                     }}
+                     ref={this.wheelRef}
+                  >
+                     {displayedOptions.map((opt) => (
+                        <div key={opt.key} className={opt.cls}>
+                           {opt.child}
+                        </div>
+                     ))}
+                  </div>
+               </div>
+               <div
+                  className={CSS.element(baseClass, "mask")}
+                  style={{
+                     top: `0`,
+                     bottom: `${(50 + 50 / size).toFixed(3)}%`,
+                  }}
+               />
+               <div
+                  className={CSS.element(baseClass, "mask")}
+                  style={{
+                     top: `${(50 + 50 / size).toFixed(3)}%`,
+                     bottom: `0`,
+                  }}
+               />
+               <div
+                  className={CSS.element(baseClass, "selection")}
+                  style={{
+                     height: `${(100 / size).toFixed(3)}%`,
+                     top: `${(50 - 50 / size).toFixed(3)}%`,
+                  }}
+               />
+            </div>
+            <div
+               className={CSS.element(baseClass, "arrow-up")}
+               onClick={(e) => {
+                  e.preventDefault();
+                  this.select(this.index - 1);
+               }}
+            >
+               {Icon.render("drop-down", { className: CSS.element(baseClass, "arrow-icon") })}
+            </div>
+            <div
+               className={CSS.element(baseClass, "arrow-down")}
+               onClick={(e) => {
+                  e.preventDefault();
+                  this.select(this.index + 1);
+               }}
+            >
+               {Icon.render("drop-down", { className: CSS.element(baseClass, "arrow-icon") })}
+            </div>
+         </div>
+      );
+   }
+
+   componentDidMount(): void {
+      this.unsubscribeOnWheel = addEventListenerWithOptions(this.wheelEl, "wheel", this.onWheel, { passive: false });
+
+      this.setState(
+         {
+            wheelHeight: this.wheelEl.offsetHeight,
+            wheelWidth: this.wheelEl.offsetWidth,
+         },
+         () => {
+            if (this.state.wheelHeight !== undefined) {
+               this.scrollEl.scrollTop = (this.index * this.state.wheelHeight) / this.props.size;
+            }
+         },
+      );
+
+      if (this.props.onPipeKeyDown) this.props.onPipeKeyDown(this.onKeyDown);
+   }
+
+   UNSAFE_componentWillReceiveProps(props: WheelComponentProps): void {
+      this.index = props.index || 0;
+      this.scrollTo();
+   }
+
+   componentWillUnmount(): void {
+      this.scrolling = false;
+      this.unsubscribeOnWheel();
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      switch (e.keyCode) {
+         case KeyCode.up:
+            e.preventDefault();
+            this.select(this.index - 1);
+            break;
+
+         case KeyCode.down:
+            e.preventDefault();
+            this.select(this.index + 1);
+            break;
+      }
+   }
+
+   onWheel(e: WheelEvent): void {
+      e.preventDefault();
+      let index = this.index;
+      if (e.deltaY > 0) index++;
+      else index--;
+      this.select(index);
+   }
+
+   onTouchStart(e: React.TouchEvent): void {
+      this.scrolling = false;
+   }
+
+   onTouchEnd(e: React.TouchEvent): void {
+      let { size } = this.props;
+      if (this.state.wheelHeight !== undefined) {
+         let index = Math.round(this.scrollEl.scrollTop / (this.state.wheelHeight / size));
+         this.select(index);
+      }
+   }
+
+   select(newIndex: number): void {
+      let { children } = this.props;
+      newIndex = Math.max(0, Math.min(children.length - 1, newIndex));
+      if (this.index !== newIndex) {
+         this.index = newIndex;
+         this.props.onChange(newIndex);
+      }
+      this.scrollTo();
+   }
+
+   scrollTo(): void {
+      let { size } = this.props;
+
+      let callback = (): void => {
+         if (!this.scrolling || this.state.wheelHeight === undefined) return;
+
+         let x = (this.index * this.state.wheelHeight) / size;
+         let delta = Math.round(x - this.scrollEl.scrollTop);
+         if (delta === 0) {
+            this.scrolling = false;
+            return;
+         }
+         let sign = delta > 0 ? 1 : -1;
+         delta = Math.abs(delta) / 10;
+         if (delta < 1) delta = 1;
+
+         this.scrollEl.scrollTop += sign * delta;
+         requestAnimationFrame(callback);
+      };
+
+      if (!this.scrolling) {
+         this.scrolling = true;
+         requestAnimationFrame(callback);
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/form/index.d.ts b/packages/cx/src/widgets/form/index.d.ts
deleted file mode 100644
index 8fa0914f4..000000000
--- a/packages/cx/src/widgets/form/index.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export * from './Field';
-export * from './TextField';
-export * from './Checkbox';
-export * from './Radio';
-export * from './Select';
-export * from './Calendar';
-export * from './DateTimeField';
-export * from './DateField';
-export * from './TimeField';
-export * from './LookupField';
-export * from './NumberField';
-export * from './TextArea';
-export * from './LabeledContainer';
-export * from './ValidationError';
-export * from './ValidationGroup';
-export * from './FieldGroup';
-export * from './MonthPicker';
-export * from './ColorPicker';
-export * from './MonthField';
-export * from './ColorField';
-export * from './UploadButton';
-export * from './Slider';
-export * from './Switch';
-export * from './HelpText';
-export * from './Label';
-export * from './Validator';
diff --git a/packages/cx/src/widgets/form/index.js b/packages/cx/src/widgets/form/index.ts
similarity index 100%
rename from packages/cx/src/widgets/form/index.js
rename to packages/cx/src/widgets/form/index.ts
diff --git a/packages/cx/src/widgets/form/variables.scss b/packages/cx/src/widgets/form/variables.scss
index f2c55720d..a976333f9 100644
--- a/packages/cx/src/widgets/form/variables.scss
+++ b/packages/cx/src/widgets/form/variables.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @if cx-call-once("cx/widgets/checker-background") {
    %cx-checker-bg {
       background-repeat: repeat;
@@ -305,7 +307,7 @@ $cx-input-tag-clear-state-style-map: cx-deep-map-merge(
 @import "Radio.variables";
 @import "ColorPicker.variables";
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
diff --git a/packages/cx/src/widgets/grid/Grid.d.ts b/packages/cx/src/widgets/grid/Grid.d.ts
deleted file mode 100644
index e43cf90a8..000000000
--- a/packages/cx/src/widgets/grid/Grid.d.ts
+++ /dev/null
@@ -1,445 +0,0 @@
-import * as React from "react";
-import { Instance } from "../../ui/Instance";
-import { DragEvent } from "../drag-drop/ops";
-import { View } from "../../data/View";
-import {
-   BooleanProp,
-   ClassProp,
-   CollatorOptions,
-   Config,
-   NumberProp,
-   Prop,
-   Record,
-   RecordAlias,
-   SortDirection,
-   SortersProp,
-   StringProp,
-   StructuredProp,
-   StyledContainerProps,
-   StyleProp,
-   UnknownProp,
-   Widget,
-} from "../../core";
-import { DataAdapterRecord } from "../../ui/adapter/DataAdapter";
-
-type FetchRecordsResult<T> = T[] | { records: T[]; lastPage?: boolean; totalRecordCount?: number };
-
-interface MappedGridRecord<T = unknown> extends DataAdapterRecord<T> {
-   row: Instance;
-   vdom: unknown;
-}
-
-interface GridDragEvent<T> extends DragEvent {
-   target: {
-      recordBefore: MappedGridRecord<T>;
-      recordAfter: MappedGridRecord<T>;
-      insertionIndex: number;
-      totalRecordCount: number;
-   };
-}
-
-interface GridRowDragEvent<T> extends DragEvent {
-   target: {
-      record: MappedGridRecord<T>;
-      index: number;
-   };
-}
-
-interface GridColumnDropEvent extends DragEvent {
-   target: {
-      grid: any;
-      instance: Instance;
-      index: number;
-   };
-}
-
-interface GridGroupingKey {
-   [key: string]:
-      | Prop<any>
-      | {
-           value: Prop<any>;
-           direction: SortDirection;
-        };
-}
-
-interface GroupingResult<T> {
-   key: any;
-   aggregates: any;
-   name: string;
-   indexes: number[];
-   records: MappedGridRecord<T>[];
-}
-
-type GridColumnAlignment = "left" | "right" | "center";
-
-interface GridGroupingConfig<T> {
-   key: GridGroupingKey;
-   aggregates?: StructuredProp;
-   showCaption?: boolean;
-   showFooter?: boolean;
-   showHeader?: boolean;
-   caption?: StringProp;
-   name?: StringProp;
-   text?: StringProp;
-   comparer?: (a: GroupingResult<T>, b: GroupingResult<T>) => number;
-}
-
-// TODO: Check Column config
-// Props are in order based on docs
-
-interface GridColumnHeaderConfig {
-   text?: StringProp;
-   colSpan?: NumberProp;
-   rowSpan?: NumberProp;
-   align?: GridColumnAlignment;
-   allowSorting?: boolean;
-   items?: React.ReactNode;
-   children?: React.ReactNode;
-   tool?: React.ReactNode;
-   style?: StyleProp;
-   class?: ClassProp;
-   className?: ClassProp;
-   tooltip?: StringProp | StructuredProp;
-   defaultWidth?: NumberProp;
-   width?: NumberProp;
-   resizable?: boolean;
-}
-
-interface GridColumnFooterConfig {
-   value?: Prop<any>;
-   format?: StringProp;
-   style?: StyleProp;
-   class?: StyleProp;
-   expand?: boolean;
-}
-
-interface GridColumnCaptionConfig {
-   value?: Prop<any>;
-   format?: StringProp;
-   style?: StyleProp;
-   class?: StyleProp;
-   children?: React.ReactNode;
-   items?: React.ReactNode;
-   expand?: boolean;
-}
-
-interface GridColumnConfig {
-   align?: GridColumnAlignment;
-   field?: string;
-   format?: StringProp;
-   header?: StringProp | GridColumnHeaderConfig;
-   header1?: StringProp | GridColumnHeaderConfig;
-   header2?: StringProp | GridColumnHeaderConfig;
-   header3?: StringProp | GridColumnHeaderConfig;
-   fixed?: BooleanProp;
-   sortable?: boolean;
-   aggregate?: "min" | "max" | "count" | "sum" | "distinct" | "avg";
-   aggregateAlias?: string;
-   aggregateField?: string;
-   aggregateValue?: UnknownProp;
-   caption?: GridColumnCaptionConfig | StringProp | false;
-   class?: ClassProp;
-   className?: ClassProp;
-   draggable?: boolean;
-   editable?: boolean;
-   editor?: React.ReactNode;
-   footer?: GridColumnFooterConfig | StringProp | false;
-   items?: React.ReactNode;
-   children?: React.ReactNode;
-   key?: string;
-   pad?: boolean;
-   sortField?: string;
-   sortValue?: Prop<any>;
-   style?: StyleProp;
-   trimWhitespace?: boolean;
-   visible?: BooleanProp;
-   if?: BooleanProp;
-   weightField?: string;
-
-   // Not in docs
-   value?: Prop<any>;
-   defaultWidth?: NumberProp;
-   width?: NumberProp;
-   resizable?: boolean;
-   comparer?: (a: any, b: any) => number;
-
-   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
-   sortOptions?: CollatorOptions;
-   colSpan?: NumberProp;
-
-   mergeCells?: Prop<null | false | "same-value" | "always">;
-   primarySortDirection?: "ASC" | "DESC";
-}
-
-interface GridRowLineConfig {
-   visible?: BooleanProp;
-   columns: GridColumnConfig[];
-}
-
-interface GridRowConfig {
-   invalid?: BooleanProp;
-   valid?: BooleanProp;
-   style?: StyleProp;
-   class?: ClassProp;
-   className?: ClassProp;
-   line1?: GridRowLineConfig;
-   line2?: GridRowLineConfig;
-   line3?: GridRowLineConfig;
-   mod?: StringProp | Prop<string[]> | StructuredProp;
-}
-
-interface GridProps<T = unknown> extends StyledContainerProps {
-   /** An array of records to be displayed in the grid. */
-   records?: Prop<T[]>;
-
-   /** Set to true to add a vertical scroll and a fixed header to the grid. */
-   scrollable?: boolean;
-
-   /** A binding used to store the sorting order list. Commonly used for server-side sorting. */
-   sorters?: SortersProp;
-
-   /** A list of sorters to be prepended to the actual list of sorters. */
-   preSorters?: SortersProp;
-
-   /** A binding used to store the name of the field used for sorting grids. Available only if sorters are not used. */
-   sortField?: StringProp;
-
-   /** A binding used to store the sort direction. Available only if sorters are not used. Possible values are "ASC" and "DESC". Defaults to "ASC". */
-   sortDirection?: StringProp;
-
-   /** Default sort field. Used if neither sortField or sorters are set. */
-   defaultSortField?: string;
-
-   /** Default sort direction. */
-   defaultSortDirection?: "ASC" | "DESC";
-
-   /** Set to true to add vertical gridlines. */
-   vlines?: boolean;
-
-   /** Text to be displayed instead of an empty table. */
-   emptyText?: StringProp;
-
-   /** Drag source configuration. Define mode as 'move' or 'copy` and additional data. */
-   dragSource?: StructuredProp;
-
-   /** Drop zone configuration. Define mode as either preview or insertion. */
-   dropZone?: StructuredProp;
-
-   /** Row configuration. See grid examples. */
-   row?: GridRowConfig;
-
-   /**An array of columns. Check column configuration options in the section below. */
-   columns?: GridColumnConfig[];
-
-   /** Whenever columnParams change, columns are recalculated using the onGetColumn callback. */
-   columnParams?: Config;
-
-   /** Selection configuration. */
-   selection?: Config;
-
-   /** An array of grouping level definitions. Check allowed grouping level properties in the section below. */
-   grouping?: GridGroupingConfig<T>[];
-
-   /** Params for grouping. Whenever params change grouping is recalculated using the onGetGrouping callback. */
-   groupingParams?: Config;
-
-   /**
-    * Determines header appearance. Supported values are plain and default. Default mode is used if some of the columns are sortable.
-    * Plain mode better suits reports and other scenarios in which users do not interact with the grid.
-    */
-   headerMode?: StringProp;
-
-   /** Set to true to add default border around the table. Automatically set if grid is scrollable. */
-   border?: BooleanProp;
-
-   /** Base CSS class to be applied to the element. Default is 'grid'. */
-   baseClass?: string;
-
-   /** A field used to get the unique identifier of the record. Setting keyField improves grid performance on sort operations as the widget is able to identify row movement inside the grid.  */
-   keyField?: string;
-
-   /** Show grid header within the group. Useful for long report-like (printable) grids. Defaults to false. */
-   showHeader?: boolean;
-
-   /** Show grid footer. Defaults to false. */
-   showFooter?: boolean;
-
-   /** Record alias. Default is $record. */
-   recordName?: RecordAlias;
-
-   /** Record alias. Default is $record. */
-   recordAlias?: RecordAlias;
-
-   /** Set to true if sorting is done remotely, on the server-side. Default value is false. */
-   remoteSort?: boolean;
-
-   /** Set to true to enable row caching. This greatly improves grid performance
-    on subsequent render operations, however, only changes on records
-    are allowed. If grid rows display any data outside records, changes on that
-    data will be ignored. */
-   cached?: boolean;
-
-   /** Render only rows visible on the screen. */
-   buffered?: boolean;
-
-   /** Specifies how many rows should be visible on the screen */
-   bufferSize?: number;
-
-   /** Specifies how many rows needs to be scrolled in order to recalculate buffer */
-   bufferStep?: number;
-
-   /** Used when rows have variable heights to improve buffered rendering by measuring and caching rendered row heights. Default value is false. */
-   measureRowHeights?: boolean;
-
-   /** Scrolls selection into the view. Default value is false. */
-   scrollSelectionIntoView?: boolean;
-
-   /**
-    * Set to true to lock column widths after the first render.
-    * This is helpful in pagination scenarios to maintain consistent looks across pages.
-    */
-   lockColumnWidths?: boolean;
-
-   lockColumnWidthsRequiredRowCount?: number;
-   focused?: boolean;
-   showBorder?: boolean;
-
-   /** Data adapter used to convert data in list of records. Used to enable grouping and tree operations. */
-   dataAdapter?: any;
-
-   /** Additional CSS class to be added to each grid row. */
-   rowClass?: ClassProp;
-
-   /** Additional CSS styles to be added to each grid row. */
-   rowStyle?: StyleProp;
-
-   // drag-drop handlers
-   onDrop?: string | ((e: GridDragEvent<T>, instance: Instance) => void);
-   onDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
-   onDragStart?: string | ((e: DragEvent, instance: Instance) => void);
-   onDragEnd?: string | ((e: DragEvent, instance: Instance) => void);
-   onDragOver?: string | ((e: GridDragEvent<T>, instance: Instance) => void | boolean);
-
-   onRowDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
-   onRowDragOver?: string | ((e: GridRowDragEvent<T>, instance: Instance) => void | boolean);
-   onRowDrop?: string | ((e: GridRowDragEvent<T>, instance: Instance) => void | boolean);
-
-   onColumnDrop?: string | ((e: GridColumnDropEvent, instance: Instance) => void);
-   onColumnDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
-
-   /** Parameters that affect filtering. */
-   filterParams?: StructuredProp;
-
-   /** Callback function to be executed when a row is right-clicked.  */
-   onRowContextMenu?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
-
-   /** Enable infinite scrolling */
-   infinite?: boolean;
-
-   /** If set, clicking on the column header will loop between ASC, DESC and no sorting order, instead of ASC and DESC only. */
-   clearableSort?: boolean;
-
-   /** A callback to fetch records during infinite loading */
-   onFetchRecords?: (
-      pageInfo: {
-         page: number;
-         pageSize: number;
-         sorters?: Record[];
-         sortField?: string;
-         sortDirection?: string;
-      },
-      instance?: Instance,
-   ) => FetchRecordsResult<T> | Promise<FetchRecordsResult<T>>;
-
-   /** Callback function to be executed when a row is double-clicked. */
-   onRowDoubleClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
-
-   /** Callback function to be executed on key down. Accepts instance of the currently focused record as the second argument. */
-   onRowKeyDown?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
-
-   /** Callback function to be executed when a row is clicked. */
-   onRowClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
-
-   /** Set to true to add a fixed footer at the bottom of the grid. */
-   fixedFooter?: boolean;
-
-   /** Set to true to enable cell editing. Please note that all editable columns should specify the editor field. */
-   cellEditable?: boolean;
-
-   /** A callback function which is executed before a cell editor is initialized. Return false from the callback to prevent the cell from going into the edit mode. */
-   onBeforeCellEdit?: string | ((change: GridCellBeforeEditInfo, record: DataAdapterRecord<T>) => any);
-
-   /** A callback function which is executed after a cell has been successfully edited. */
-   onCellEdited?: string | ((change: GridCellEditInfo<T>, record: DataAdapterRecord<T>) => void);
-
-   /** A callback function which is executed after a column has been resized. */
-   onColumnResize?: (data: { width: number; column: Record }, instance: Instance) => void;
-
-   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
-   sortOptions?: CollatorOptions;
-
-   /** Callback to create a function that can be used to check whether a record is selectable. */
-   onCreateIsRecordSelectable?: (
-      params: any,
-      instance: Instance,
-   ) => (record: T, options?: { range?: boolean; toggle?: boolean }) => boolean;
-
-   /** Parameters whose change will cause scroll to be reset. */
-   scrollResetParams?: StructuredProp;
-
-   /** Enable precise (sub-pixel) measurements. Useful for grids with many columns. Better behavior at small zoom factors. */
-   preciseMeasurements?: boolean;
-
-   /** A value used to identify the group of components participating in hover effect synchronization. */
-   hoverChannel?: string;
-
-   /** A value used to uniquely identify the record within the hover sync group. */
-   rowHoverId?: Prop<string | number>;
-
-   /** Set to true or false to explicitly define if grid is allowed to receive focus. */
-   focusable?: boolean;
-
-   /** Callback function to retrieve grouping data. */
-   onGetGrouping?: (params: any, instance: Instance) => GridGroupingConfig<T>[];
-
-   /** Callback function to dynamically calculate columns.  */
-   onGetColumns?: (params: any, instance: Instance) => GridColumnConfig[] | GridRowConfig;
-
-   /** Allow grid to receive drag and drop operations containing files. */
-   allowsFileDrops?: boolean;
-
-   /**
-    * Callback function to track and retrieve displayed records.
-    * Accepts new records as a first argument.
-    * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
-    */
-   onTrackMappedRecords?: string | ((records: DataAdapterRecord<T>[], instance: Instance) => void);
-
-   /** Callback to create a function that can be used to check whether a record is draggable. */
-   onCreateIsRecordDraggable?: (params: any, instance: Instance) => (record: T) => boolean;
-
-   /** Callback function to get grid component and instance references on component init. */
-   onRef?: string | ((element: any, instance: Instance) => void);
-
-   /** When enabled, groups are shown in the same order as the source records. */
-   preserveGroupOrder?: boolean;
-}
-
-interface GridCellInfo {
-   column: any;
-   field: string;
-}
-
-interface GridCellBeforeEditInfo extends GridCellInfo {
-   data: any;
-}
-
-interface GridCellEditInfo<T> extends GridCellInfo {
-   oldData: T;
-   newData: T;
-}
-
-export class Grid<T = unknown> extends Widget<GridProps<T>> {}
diff --git a/packages/cx/src/widgets/grid/Grid.js b/packages/cx/src/widgets/grid/Grid.js
deleted file mode 100644
index 64f238d61..000000000
--- a/packages/cx/src/widgets/grid/Grid.js
+++ /dev/null
@@ -1,3431 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { PureContainer } from "../../ui/PureContainer";
-import { getSelector } from "../../data/getSelector";
-import { isSelector } from "../../data/isSelector";
-import { Format } from "../../ui/Format";
-import { Selection } from "../../ui/selection/Selection";
-import { DataAdapter } from "../../ui/adapter/DataAdapter";
-import { GroupAdapter } from "../../ui/adapter/GroupAdapter";
-import { ResizeManager } from "../../ui/ResizeManager";
-import { KeyCode } from "../../util/KeyCode";
-import { scrollElementIntoView } from "../../util/scrollElementIntoView";
-import { findScrollableParent } from "../../util/findScrollableParent";
-import { FocusManager, oneFocusOut, offFocusOut } from "../../ui/FocusManager";
-import DropDownIcon from "../icons/sort-asc";
-import { ddMouseDown, ddDetect, initiateDragDrop, registerDropZone } from "../drag-drop/ops";
-import { GridRow, GridRowComponent } from "./GridRow";
-import { Localization } from "../../ui/Localization";
-import { SubscriberList } from "../../util/SubscriberList";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { isNonEmptyArray } from "../../util/isNonEmptyArray";
-import { isObject } from "../../util/isObject";
-import { isString } from "../../util/isString";
-import { isDefined } from "../../util/isDefined";
-import { isArray } from "../../util/isArray";
-import { isNumber } from "../../util/isNumber";
-import { debounce } from "../../util/debounce";
-import { shallowEquals } from "../../util/shallowEquals";
-import { InstanceCache } from "../../ui/Instance";
-import { Cx } from "../../ui/Cx";
-import { Console } from "../../util/Console";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
-import { ValidationGroup } from "../form/ValidationGroup";
-import { closest } from "../../util/DOM";
-import { captureMouse2, getCursorPos } from "../overlay/captureMouse";
-import { getAccessor } from "../../data/getAccessor";
-import { getActiveElement } from "../../util/getActiveElement";
-import { GridCellEditor } from "./GridCellEditor";
-import { batchUpdates } from "../../ui/batchUpdates";
-import { parseStyle } from "cx/src/util/parseStyle";
-import { StaticText } from "../../ui/StaticText";
-import { unfocusElement } from "../../ui/FocusManager";
-import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
-import { Container } from "../../ui/Container";
-import { findFirstChild } from "../../util/DOM";
-import { Binding } from "../../data/Binding";
-
-export class Grid extends Container {
-   declareData(...args) {
-      let selection = this.selection.configureWidget(this);
-
-      super.declareData(
-         ...args,
-         {
-            records: undefined,
-            sorters: undefined,
-            preSorters: undefined,
-            scrollable: undefined,
-            sortField: undefined,
-            sortDirection: undefined,
-            emptyText: undefined,
-            dragSource: { structured: true },
-            dropZone: { structured: true },
-            filterParams: { structured: true },
-            groupingParams: { structured: true },
-            scrollResetParams: { structured: true },
-            page: undefined,
-            totalRecordCount: undefined,
-            tabIndex: undefined,
-            columnParams: { structured: true },
-         },
-         selection,
-      );
-   }
-
-   init() {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.indexAlias) this.indexName = this.indexAlias;
-
-      if (this.infinite) {
-         this.buffered = true;
-         this.remoteSort = true;
-      }
-
-      if (this.buffered) this.scrollable = true;
-
-      this.recordsAccessor = getAccessor(this.records);
-
-      this.selection = Selection.create(this.selection, {
-         records: this.records,
-      });
-
-      if (!this.selection.isDummy || this.onRowClick || this.onRowDoubleClick) this.selectable = true;
-      if (this.focusable == null) this.focusable = !this.selection.isDummy || this.cellEditable;
-
-      super.init();
-   }
-
-   initState(context, instance) {
-      instance.state = {
-         colWidth: {},
-         lockedColWidth: {},
-         dimensionsVersion: 0,
-         disableDefaultSort: false,
-      };
-      instance.v = 0;
-      if (this.infinite)
-         instance.buffer = {
-            records: [],
-            totalRecordCount: 0,
-            page: 1,
-         };
-   }
-
-   applyParentStore(instance) {
-      super.applyParentStore(instance);
-
-      // force prepareData to execute again and propagate the store change to the records
-      if (instance.cached) delete instance.cached.rawData;
-   }
-
-   createRowTemplate(context, columnParams, instance, groupingData) {
-      var row = this.row || {};
-      let columns = this.columns;
-      if (this.onGetColumns) {
-         let result = instance.invoke("onGetColumns", columnParams, instance);
-         if (isArray(result)) columns = result;
-         else row = result;
-      }
-
-      if (columns)
-         row.line1 = {
-            columns,
-         };
-
-      row.hasSortableColumns = false;
-      row.hasResizableColumns = false;
-      row.hasMergedCells = false;
-      row.mergedColumns = [];
-
-      let aggregates = {};
-      let showFooter = false;
-      let lines = [];
-      for (let i = 0; i < 10; i++) {
-         let l = row["line" + i];
-         if (l) {
-            if (isArray(l.columns))
-               for (let c = 0; c < l.columns.length; c++)
-                  l.columns[c].uniqueColumnId = `l${i}-${l.columns[c].key || c}`;
-            lines.push(l);
-         }
-      }
-
-      row.header = PureContainer.create({
-         items: GridColumnHeaderLine.create(lines),
-      });
-
-      row.header.items.forEach((line) => {
-         line.items.forEach((c, index) => {
-            if (c.sortable) row.hasSortableColumns = true;
-
-            if (c.mergeCells) {
-               if (row.header.items.length > 1)
-                  Console.warn("Merged columns are only supported in grids in which rows have only one line of cells.");
-               else {
-                  row.hasMergedCells = true;
-                  row.mergedColumns.push({ uniqueColumnId: c.uniqueColumnId, index, mode: c.mergeCells });
-               }
-            }
-
-            if (
-               c.resizable ||
-               (c.header && c.header.resizable) ||
-               (c.header1 && c.header1.resizable) ||
-               (c.header2 && c.header2.resizable) ||
-               (c.header3 && c.header3.resizable)
-            )
-               row.hasResizableColumns = true;
-
-            if (c.aggregate && c.aggregateAlias && (c.aggregateField || isDefined(c.aggregateValue))) {
-               aggregates[c.aggregateAlias] = {
-                  value: isDefined(c.aggregateValue)
-                     ? c.aggregateValue
-                     : isDefined(c.value)
-                       ? c.value
-                       : c.aggregateField
-                         ? { bind: this.recordName + "." + c.aggregateField }
-                         : null,
-                  weight:
-                     c.weight != null
-                        ? c.weight
-                        : c.weightField && {
-                             bind: this.recordName + "." + c.weightField,
-                          },
-                  type: c.aggregate,
-               };
-            } else if (c.footer && !showFooter) {
-               showFooter = true;
-            }
-         });
-      });
-
-      //add default footer if some columns have aggregates and grouping is not defined
-      if (!groupingData && (Object.keys(aggregates).length > 0 || this.fixedFooter || showFooter))
-         groupingData = [
-            {
-               key: {},
-               showFooter: true,
-            },
-         ];
-
-      let { grouping, showHeader } = this.resolveGrouping(groupingData);
-
-      this.showHeader = showHeader;
-
-      if (this.fixedFooter && isNonEmptyArray(grouping)) {
-         grouping[0].showFooter = true;
-         if (grouping[0].key && Object.keys(grouping[0].key).length > 0)
-            Console.warn(
-               "First grouping level in grids with a fixed footer must group all data. The key field should be omitted.",
-            );
-      }
-
-      instance.dataAdapter = DataAdapter.create(
-         {
-            type: (this.dataAdapter && this.dataAdapter.type) || GroupAdapter,
-            recordsAccessor: this.recordsAccessor,
-            keyField: this.keyField,
-            aggregates: aggregates,
-            recordName: this.recordName,
-            indexName: this.indexName,
-            sortOptions: this.sortOptions,
-            groupings: grouping,
-            preserveOrder: this.preserveGroupOrder,
-         },
-         this.dataAdapter,
-      );
-
-      instance.dataAdapter.initInstance(context, instance);
-
-      return Widget.create(GridRow, {
-         class: this.CSS.element(this.baseClass, "data"),
-         className: this.rowClass,
-         style: this.rowStyle,
-         recordName: this.recordName,
-         hoverId: this.rowHoverId,
-         ...row,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data, state, cached, row } = instance;
-
-      let grouping = this.grouping;
-
-      if (this.onGetGrouping) {
-         if (!cached.data || cached.data.groupingParams !== data.groupingParams)
-            grouping = instance.invoke("onGetGrouping", data.groupingParams, instance);
-         else grouping = cached.grouping;
-      }
-
-      let groupingChanged = instance.cache("grouping", grouping);
-
-      if (instance.cache("columnParams", data.columnParams) || groupingChanged || !row) {
-         row = instance.row = this.createRowTemplate(context, data.columnParams, instance, grouping);
-      }
-
-      data.version = ++instance.v;
-
-      if (!this.infinite) data.totalRecordCount = isArray(data.records) ? data.records.length : 0;
-      else {
-         if (isNumber(data.totalRecordCount)) instance.buffer.totalRecordCount = data.totalRecordCount;
-         else data.totalRecordCount = instance.buffer.totalRecordCount;
-
-         if (isDefined(data.records)) instance.buffer.records = data.records;
-         else data.records = instance.buffer.records;
-
-         if (isNumber(data.page)) instance.buffer.page = data.page;
-         else data.page = instance.buffer.page;
-
-         data.offset = (data.page - 1) * this.pageSize;
-      }
-
-      if (!isArray(data.records)) data.records = [];
-
-      if (state.sorters && !isDefined(this.sorters)) data.sorters = state.sorters;
-
-      let sortField = null;
-
-      if (isDefined(this.sortField) && isDefined(this.sortDirection)) {
-         let sorter = {
-            field: data.sortField,
-            direction: data.sortDirection,
-         };
-         sortField = data.sortField;
-         data.sorters = [sorter];
-      }
-
-      let skipDefaultSorting = this.clearableSort && instance.state.disableDefaultSort;
-      if (!skipDefaultSorting && !isNonEmptyArray(data.sorters) && this.defaultSortField) {
-         let sorter = {
-            field: this.defaultSortField,
-            direction: this.defaultSortDirection || "ASC",
-         };
-         sortField = this.defaultSortField;
-         data.sorters = [sorter];
-      }
-
-      if (sortField) {
-         for (let l = 1; l < 10; l++) {
-            let line = instance.row[`line${l}`];
-            let sortColumn = line && line.columns && line.columns.find((c) => c.field == sortField);
-            if (sortColumn) {
-               data.sorters[0].value = sortColumn.sortValue || sortColumn.value;
-               data.sorters[0].comparer = sortColumn.comparer;
-               data.sorters[0].sortOptions = sortColumn.sortOptions;
-               break;
-            }
-         }
-      }
-
-      let headerMode = this.headerMode;
-
-      if (this.headerMode == null) {
-         if (this.scrollable || row.hasSortableColumns || row.hasResizableColumns) headerMode = "default";
-         else headerMode = "plain";
-      }
-
-      let border = this.border;
-
-      if (this.showBorder || (border == null && this.scrollable)) border = true;
-
-      let dragMode = false;
-      if (data.dragSource) dragMode = data.dragSource.mode || "move";
-
-      let dropMode = data.dropZone && data.dropZone.mode;
-
-      if (this.onDrop && !dropMode) dropMode = "preview";
-
-      data.dropMode = dropMode;
-
-      data.stateMods = {
-         selectable: this.selectable,
-         "cell-editable": this.cellEditable,
-         scrollable: data.scrollable,
-         buffered: this.buffered,
-         ["header-" + headerMode]: true,
-         border: border,
-         vlines: this.vlines,
-         ["drag-" + dragMode]: dragMode,
-         ["drop-" + dropMode]: dropMode,
-         resizable: row.hasResizableColumns,
-      };
-
-      super.prepareData(context, instance);
-
-      instance.records = this.mapRecords(context, instance);
-
-      //tree adapters can have additional (child) records, filtering also affects actual record count
-      if (instance.records && !this.infinite) {
-         //apply record count after filtering
-         data.totalRecordCount = instance.records.length;
-
-         //recheck if there are any actual records
-         //when grouping is enabled group header/footer are always in
-         if (instance.records.length < 5) {
-            data.empty = true;
-            for (let i = 0; i < instance.records.length; i++)
-               if (instance.records[i].type == "data") {
-                  data.empty = false;
-                  break;
-               }
-         } else data.empty = data.totalRecordCount == 0;
-      } else data.empty = data.totalRecordCount == 0;
-
-      if (this.onCreateIsRecordSelectable) {
-         instance.isRecordSelectable = instance.invoke("onCreateIsRecordSelectable", null, instance);
-      }
-
-      if (this.onCreateIsRecordDraggable) {
-         instance.isRecordDraggable = instance.invoke("onCreateIsRecordDraggable", null, instance);
-      }
-
-      if (this.onTrackMappedRecords) {
-         instance.invoke("onTrackMappedRecords", instance.records, instance);
-      }
-   }
-
-   initInstance(context, instance) {
-      instance.fixedHeaderResizeEvent = new SubscriberList();
-      super.initInstance(context, instance);
-   }
-
-   explore(context, instance) {
-      context.push("parentPositionChangeEvent", instance.fixedHeaderResizeEvent);
-
-      instance.hoverSync = context.hoverSync;
-
-      super.explore(context, instance);
-
-      instance.header = instance.getChild(context, instance.row.header, "header");
-      instance.header.scheduleExploreIfVisible(context);
-
-      let { store } = instance;
-      instance.isSelected = this.selection.getIsSelectedDelegate(store);
-
-      //do not process rows in buffered mode or cached mode if nothing has changed;
-      if (!this.buffered && (!this.cached || instance.shouldUpdate)) {
-         for (let i = 0; i < instance.records.length; i++) {
-            let record = instance.records[i];
-            if (record.type == "data") {
-               let row = (record.row = instance.getChild(context, instance.row, record.key, record.store));
-               row.selected = instance.isSelected(record.data, record.index);
-               let changed = false;
-               if (row.cache("selected", row.selected)) changed = true;
-               if (row.cache("recordData", record.data)) changed = true;
-               if (this.cached && !changed && !row.childStateDirty) row.shouldUpdate = false;
-               else row.scheduleExploreIfVisible(context);
-            }
-         }
-      }
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("parentPositionChangeEvent");
-      let fixedColumnCount = 0,
-         visibleColumns = [];
-      instance.header.children.forEach((line) => {
-         line.children.forEach((col) => {
-            if (col.data.fixed) fixedColumnCount++;
-            visibleColumns.push(col.widget);
-         });
-      });
-      instance.visibleColumns = visibleColumns;
-      instance.hasFixedColumns = fixedColumnCount > 0;
-      instance.fixedColumnCount = fixedColumnCount;
-      if (fixedColumnCount > 0) {
-         instance.data.classNames += ` ${instance.widget.CSS.state("fixed-columns")}`;
-      }
-   }
-
-   resolveGrouping(grouping) {
-      if (grouping) {
-         if (!isArray(grouping)) {
-            if (isString(grouping) || isObject(grouping)) grouping = [grouping];
-            else throw new Error("Dynamic grouping should be an array of grouping objects.");
-         }
-
-         grouping = grouping.map((g, i) => {
-            let group;
-            if (isString(g))
-               group = {
-                  key: {
-                     [g]: {
-                        bind: this.recordName + "." + g,
-                     },
-                  },
-                  showHeader: !this.scrollable && i == grouping.length - 1,
-                  showFooter: true,
-                  caption: { bind: `$group.${g}` },
-                  text: { bind: `${this.recordName}.${g}` },
-               };
-            else
-               group = {
-                  ...g,
-               };
-            if (group.caption) group.caption = getSelector(group.caption);
-            return group;
-         });
-      }
-
-      let showHeader = !isArray(grouping) || !grouping.some((g) => g.showHeader);
-
-      return { showHeader, grouping };
-   }
-
-   groupBy(groupingData, options) {
-      let { grouping, showHeader } = this.resolveGrouping(groupingData);
-      this.grouping = grouping;
-      if (options?.autoConfigure) this.showHeader = showHeader;
-      this.update();
-   }
-
-   render(context, instance, key) {
-      let { data, hasFixedColumns } = instance;
-
-      let fixedHeader =
-         data.scrollable && this.showHeader && this.renderHeader(context, instance, "header", true, false);
-
-      let fixedColumnsFixedHeader =
-         data.scrollable &&
-         this.showHeader &&
-         hasFixedColumns &&
-         this.renderHeader(context, instance, "header", true, true);
-
-      if (!this.buffered) this.renderRows(context, instance);
-
-      if (this.fixedFooter) this.renderFixedFooter(context, instance);
-
-      let header = this.showHeader && this.renderHeader(context, instance, "header", false, false);
-
-      let fixedColumnsHeader =
-         this.showHeader && hasFixedColumns && this.renderHeader(context, instance, "header", false, true);
-
-      return (
-         <GridComponent
-            key={key}
-            instance={instance}
-            data={instance.data}
-            shouldUpdate={instance.shouldUpdate}
-            header={header}
-            fixedColumnsHeader={fixedColumnsHeader}
-            fixedColumnsFixedHeader={fixedColumnsFixedHeader}
-            fixedHeader={fixedHeader}
-            fixedFooter={instance.fixedFooterVDOM}
-            fixedColumnsFixedFooter={instance.fixedColumnsFixedFooterVDOM}
-         >
-            {this.renderChildren(context, instance)}
-         </GridComponent>
-      );
-   }
-
-   renderResizer(instance, hdinst, header, colIndex, forPreviousColumn) {
-      let { widget } = instance;
-
-      let { CSS, baseClass } = widget;
-
-      let hdwidget = hdinst.widget;
-
-      let resizerClassName = "col-resizer";
-      if (forPreviousColumn) resizerClassName += "-prev-col";
-
-      return (
-         <div
-            className={CSS.element(baseClass, resizerClassName)}
-            onClick={(e) => {
-               e.stopPropagation();
-            }}
-            data-unique-col-id={hdwidget.uniqueColumnId}
-            onMouseDown={(e) => {
-               if (e.buttons != 1) return;
-               let resizeOverlayEl = document.createElement("div");
-
-               let gridEl =
-                  e.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
-               let uniqueColId = e.currentTarget.dataset.uniqueColId;
-
-               // if we use fixed columns, rhs resizer of the last fixed column is within regular columns header tbody
-               let headerCell = findFirstChild(
-                  gridEl,
-                  (el) => el.tagName == "TH" && el.dataset && el.dataset.uniqueColId == uniqueColId,
-               );
-
-               let initialWidth = headerCell.offsetWidth;
-               let initialPosition = getCursorPos(e);
-               resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
-               resizeOverlayEl.style.width = `${initialWidth}px`;
-               resizeOverlayEl.style.left = `${
-                  headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
-               }px`;
-               gridEl.appendChild(resizeOverlayEl);
-               captureMouse2(e, {
-                  onMouseMove: (e) => {
-                     let cursor = getCursorPos(e);
-                     let width = Math.max(30, Math.round(initialWidth + cursor.clientX - initialPosition.clientX));
-                     resizeOverlayEl.style.width = `${width}px`;
-                  },
-                  onMouseUp: (e) => {
-                     if (!resizeOverlayEl) return; //dblclick
-                     let width = resizeOverlayEl.offsetWidth;
-                     hdinst.assignedWidth = width;
-                     gridEl.removeChild(resizeOverlayEl);
-                     resizeOverlayEl = null;
-                     if (widget.onColumnResize) instance.invoke("onColumnResize", { width, column: hdwidget }, hdinst);
-                     header.set("width", width);
-                     instance.setState({
-                        dimensionsVersion: instance.state.dimensionsVersion + 1,
-                        colWidth: {
-                           ...instance.state.colWidth,
-                           [hdwidget.uniqueColumnId]: width,
-                        },
-                     });
-                  },
-                  onDblClick: () => {
-                     let table = gridEl.querySelector("table");
-                     let parentEl = table.parentElement;
-                     let tableClone = table.cloneNode(true);
-                     tableClone.childNodes.forEach((tbody) => {
-                        tbody.childNodes.forEach((tr) => {
-                           tr.childNodes.forEach((td, index) => {
-                              if (index == colIndex) {
-                                 td.style.maxWidth = null;
-                                 td.style.minWidth = null;
-                                 td.style.width = "auto";
-                              } else {
-                                 td.style.display = "none";
-                              }
-                           });
-                        });
-                     });
-                     tableClone.style.position = "absolute";
-                     tableClone.style.visibility = "hidden";
-                     tableClone.style.top = 0;
-                     tableClone.style.left = 0;
-                     tableClone.style.width = "auto";
-                     parentEl.appendChild(tableClone);
-                     let width = tableClone.offsetWidth;
-                     parentEl.removeChild(tableClone);
-                     header.set("width", width);
-                     instance.setState({
-                        dimensionsVersion: instance.state.dimensionsVersion + 1,
-                        colWidth: {
-                           ...instance.state.colWidth,
-                           [hdwidget.uniqueColumnId]: width,
-                        },
-                     });
-                  },
-               });
-            }}
-         />
-      );
-   }
-
-   renderHeader(context, instance, key, fixed, fixedColumns) {
-      let { data, widget, header } = instance;
-
-      let { CSS, baseClass } = widget;
-
-      let headerRows = [];
-
-      if (!header) return null;
-
-      let skip = {};
-      let lineIndex = 0;
-
-      header.children.forEach((line) => {
-         let empty = [true, true, true];
-         let result = [[], [], []];
-
-         line.children.forEach((hdinst, colIndex) => {
-            let hdwidget = hdinst.widget;
-            for (let l = 0; l < 3; l++) {
-               let colKey = `${lineIndex + l}-${colIndex}`;
-
-               if (skip[colKey]) continue;
-
-               if (Boolean(hdinst.data.fixed) != fixedColumns) continue;
-
-               let header = hdinst.components[`header${l + 1}`];
-               let colSpan,
-                  rowSpan,
-                  style,
-                  cls,
-                  mods = [],
-                  content,
-                  sortIcon,
-                  tool;
-
-               let resizer = null,
-                  prevColumnResizer = null;
-
-               if (header) {
-                  empty[l] = false;
-
-                  if (header.widget.align) mods.push("aligned-" + header.widget.align);
-                  else if (hdwidget.align) mods.push("aligned-" + hdwidget.align);
-
-                  if (hdwidget.sortable && header.widget.allowSorting) {
-                     mods.push("sortable");
-                     if (data.sorters && data.sorters[0].field == (hdwidget.sortField || hdwidget.field)) {
-                        mods.push("sorted-" + data.sorters[0].direction.toLowerCase());
-                        sortIcon = <DropDownIcon className={CSS.element(baseClass, "column-sort-icon")} />;
-                     }
-                  }
-
-                  let uniqueColumnId = header.data.colSpan > 1 ? null : hdwidget.uniqueColumnId;
-
-                  style = header.data.style;
-                  let customWidth =
-                     header.data.width ||
-                     instance.state.colWidth[uniqueColumnId] ||
-                     header.data.defaultWidth ||
-                     instance.state.lockedColWidth[uniqueColumnId];
-                  if (customWidth) {
-                     if (instance.state.colWidth[uniqueColumnId] != customWidth)
-                        instance.state.colWidth[uniqueColumnId] = customWidth;
-                     let s = `${customWidth}px`;
-                     style = {
-                        ...style,
-                        width: s,
-                        minWidth: s,
-                        maxWidth: s,
-                     };
-                  }
-
-                  if (header.data.classNames) cls = header.data.classNames;
-
-                  content = header.render(context);
-
-                  if (header.components && header.components.tool) {
-                     tool = (
-                        <div className={CSS.element(baseClass, "col-header-tool")}>
-                           {getContent(header.components.tool.render(context))}
-                        </div>
-                     );
-                     mods.push("tool");
-                  }
-
-                  if (header.data.colSpan > 1 || header.data.rowSpan > 1) {
-                     colSpan = header.data.colSpan;
-                     rowSpan = header.data.rowSpan;
-
-                     for (let r = 0; r < header.data.rowSpan; r++)
-                        for (let c = 0; c < header.data.colSpan; c++)
-                           skip[`${lineIndex + l + r}-${colIndex + c}`] = true;
-                  }
-
-                  if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
-                     resizer = this.renderResizer(instance, hdinst, header, colIndex);
-                  }
-
-                  if (colIndex > 0) {
-                     let hdinstPrev = line.children[colIndex - 1];
-                     let prevLine = 3;
-                     let headerPrev;
-                     while (!headerPrev && prevLine >= 0) {
-                        headerPrev = hdinstPrev.components[`header${prevLine + 1}`];
-                        prevLine--;
-                     }
-                     if (
-                        (hdinstPrev.widget.resizable || headerPrev?.data?.resizable) &&
-                        headerPrev?.data?.colSpan < 2
-                     ) {
-                        prevColumnResizer = this.renderResizer(instance, hdinstPrev, headerPrev, colIndex - 1, true);
-                     }
-                  }
-               }
-
-               cls = CSS.element(baseClass, "col-header", mods) + (cls ? " " + cls : "");
-
-               let onContextMenu;
-
-               if (this.onColumnContextMenu) onContextMenu = (e) => instance.invoke("onColumnContextMenu", e, hdinst);
-
-               result[l].push(
-                  <th
-                     key={colIndex}
-                     colSpan={colSpan}
-                     rowSpan={rowSpan}
-                     className={cls}
-                     style={style}
-                     onMouseDown={ddMouseDown}
-                     onMouseMove={(e) => this.onHeaderMouseMove(e, hdwidget, hdinst, instance, l)}
-                     onMouseLeave={(e) => this.onHeaderMouseLeave(e, hdinst, l)}
-                     onClick={(e) => this.onHeaderClick(e, hdwidget, instance, l)}
-                     onContextMenu={onContextMenu}
-                     data-unique-col-id={colSpan > 1 ? null : hdwidget.uniqueColumnId}
-                  >
-                     {getContent(content)}
-                     {sortIcon}
-                     {tool}
-                     {prevColumnResizer}
-                     {resizer}
-                  </th>,
-               );
-            }
-         });
-
-         result = result.filter((_, i) => !empty[i]);
-         lineIndex += result.length;
-
-         if (result[0]) {
-            if (fixed && !fixedColumns) {
-               result[0].push(
-                  <th key="dummy" rowSpan={result.length} className={CSS.element(baseClass, "col-header")} />,
-               );
-            }
-
-            headerRows.push(...result.map((h, i) => <tr key={`${lineIndex}-${i}`}>{h}</tr>));
-         }
-      });
-
-      if (headerRows.length == 0) return null;
-
-      return (
-         <tbody key={"h" + key} className={CSS.element(baseClass, "header")}>
-            {headerRows}
-         </tbody>
-      );
-   }
-
-   onHeaderMouseMove(e, column, columnInstance, gridInstance, headerLine) {
-      let { baseClass, CSS } = gridInstance.widget;
-      if (columnInstance.data.fixed) return;
-      let headerInstance = columnInstance.components[`header${headerLine + 1}`];
-      if (!headerInstance) return;
-      let { store, data } = headerInstance;
-      if (headerInstance.widget?.tooltip) {
-         tooltipMouseMove(e, headerInstance, headerInstance.widget.tooltip);
-      }
-      if (data.draggable && !data.fixed && ddDetect(e) && e.buttons == 1) {
-         initiateDragDrop(
-            e,
-            {
-               sourceEl: e.currentTarget,
-               source: {
-                  type: "grid-column",
-                  store,
-                  column,
-                  columnInstance,
-                  headerInstance,
-                  gridInstance,
-                  headerLine,
-               },
-               clone: {
-                  store: store,
-                  matchCursorOffset: true,
-                  matchWidth: true,
-                  widget: () => <div className={CSS.element(baseClass, "col-header-drag-clone")}>{data.text}</div>,
-               },
-            },
-            () => {},
-         );
-      }
-   }
-
-   onHeaderMouseLeave(e, columnInstance, headerLine) {
-      let headerInstance = columnInstance.components[`header${headerLine + 1}`];
-      if (!headerInstance) return;
-      if (headerInstance.widget?.tooltip) {
-         tooltipMouseLeave(e, headerInstance, headerInstance.widget.tooltip);
-      }
-   }
-
-   onHeaderClick(e, column, instance, headerLine) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      let { data } = instance;
-      let header = column.components[`header${headerLine + 1}`];
-
-      let field = column.sortField || column.field;
-      let value = column.sortValue || column.value;
-      let comparer = column.comparer;
-      let sortOptions = column.sortOptions;
-
-      if (header && header.allowSorting && column.sortable && (field || value || data.sortField)) {
-         let direction = column.primarySortDirection ?? "ASC";
-         if (
-            isNonEmptyArray(data.sorters) &&
-            ((!!data.sorters[0].field && data.sorters[0].field == (field || data.sortField)) ||
-               (!!value && data.sorters[0].value == value))
-         ) {
-            if (data.sorters[0].direction == "ASC" && (!this.clearableSort || direction == "ASC")) direction = "DESC";
-            else if (data.sorters[0].direction == "DESC" && (!this.clearableSort || direction == "DESC"))
-               direction = "ASC";
-            else {
-               direction = null;
-               instance.state.disableDefaultSort = true;
-            }
-         }
-
-         let sorters = direction
-            ? [
-                 {
-                    field,
-                    direction,
-                    value,
-                    comparer,
-                    sortOptions,
-                 },
-              ]
-            : null;
-
-         if (sorters == null) field = null;
-
-         instance.set("sorters", sorters);
-         instance.set("sortField", field);
-         instance.set("sortDirection", direction);
-
-         if (!this.remoteSort || this.infinite) instance.setState({ sorters });
-      }
-   }
-
-   renderGroupHeader(context, instance, g, level, group, i, store, fixedColumns) {
-      let { CSS, baseClass } = this;
-      let data = store.getData();
-      if (g.caption) {
-         let caption = g.caption(data);
-         return (
-            <tbody
-               key={`g-${level}-${group.$key}`}
-               className={CSS.element(baseClass, "group-caption", ["level-" + level])}
-               data-group-key={group.$key}
-               data-group-element={`group-caption-${level}`}
-            >
-               <tr>
-                  <td colSpan={1000}>{caption}</td>
-               </tr>
-            </tbody>
-         );
-      } else if (g.showCaption) {
-         let skip = 0;
-
-         let { header } = instance;
-
-         let lines = [];
-         header.children.forEach((line, lineIndex) => {
-            let empty = true;
-
-            let cells = line.children.map((ci, i) => {
-               if (--skip >= 0) return null;
-
-               if (Boolean(ci.data.fixed) != fixedColumns) return null;
-
-               let v,
-                  c = ci.widget,
-                  colSpan,
-                  pad,
-                  cls = "",
-                  style = null;
-               if (c.caption) {
-                  if (c.caption.children)
-                     v = <Cx widget={c.caption.children} store={store} parentInstance={instance} subscribe />;
-                  else {
-                     v = c.caption.value(data);
-                     let fmt = c.caption.format(data);
-                     if (fmt) v = Format.value(v, fmt);
-                  }
-                  pad = c.caption.pad;
-                  colSpan = c.caption.colSpan;
-                  empty = false;
-                  cls = CSS.expand(c.caption.class(data)) || "";
-                  style = parseStyle(c.caption.style(data));
-                  if (c.caption.expand) {
-                     colSpan = 1;
-                     for (
-                        let ind = i + 1;
-                        ind < line.children.length &&
-                        !line.children[ind].widget.caption &&
-                        !line.children[ind].widget.aggregate;
-                        ind++
-                     )
-                        colSpan++;
-                  }
-
-                  if (colSpan > 1) skip = colSpan - 1;
-               } else if (c.aggregate && c.aggregateAliasGetter && c.caption !== false) {
-                  empty = false;
-                  v = c.aggregateAliasGetter(group);
-                  if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
-               }
-
-               if (cls) cls += " ";
-               if (c.align) cls += CSS.state("aligned-" + c.align);
-
-               if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
-
-               return (
-                  <td key={i} className={cls} colSpan={colSpan} style={style}>
-                     {v}
-                  </td>
-               );
-            });
-
-            if (empty) return;
-
-            lines.push(<tr key={lineIndex}>{cells}</tr>);
-         });
-
-         if (lines.length == 0) return null;
-
-         return (
-            <tbody
-               key={"c" + group.$key}
-               className={CSS.element(baseClass, "group-caption", ["level-" + level])}
-               data-group-key={group.$key}
-               data-group-element={`group-caption-${level}`}
-            >
-               {lines}
-            </tbody>
-         );
-      }
-   }
-
-   renderGroupFooter(context, instance, g, level, group, i, store, fixed, fixedColumns) {
-      let { CSS, baseClass } = this;
-      let data = store.getData();
-      let skip = 0;
-
-      let { header, state } = instance;
-      let rowStyle = {};
-
-      let lines = [];
-      header.children.forEach((line, lineIndex) => {
-         let empty = true;
-
-         let cells = line.children.map((ci, i) => {
-            if (--skip >= 0) return null;
-
-            if (Boolean(ci.data.fixed) != fixedColumns) return null;
-
-            let v,
-               c = ci.widget,
-               colSpan = 1,
-               pad,
-               cls = "",
-               style = null;
-            if (c.footer) {
-               v = c.footer.value(data);
-               let fmt = c.footer.format(data);
-               if (fmt) v = Format.value(v, fmt);
-               pad = c.footer.pad;
-               colSpan = c.footer.colSpan;
-               empty = false;
-               cls = CSS.expand(c.footer.class(data)) || "";
-               style = parseStyle(c.footer.style(data));
-               if (c.footer.expand) {
-                  colSpan = 1;
-                  for (
-                     let ind = i + 1;
-                     ind < line.children.length &&
-                     !line.children[ind].widget.footer &&
-                     !line.children[ind].widget.aggregate;
-                     ind++
-                  )
-                     colSpan++;
-               }
-
-               if (colSpan > 1) skip = colSpan - 1;
-            } else if (c.aggregate && c.aggregateAliasGetter && c.footer !== false) {
-               empty = false;
-               v = c.aggregateAliasGetter(group);
-               if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
-            }
-
-            if (cls) cls += " ";
-            if (c.align) cls += CSS.state("aligned-" + c.align);
-
-            if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
-
-            // apply column width to footers too, but only if colSpan == 1,
-            //  otherwise set 1px so that the footer is not participating in the layout
-
-            let maxWidth = 1;
-            if (colSpan == 1) maxWidth = state.colWidth[c.uniqueColumnId];
-            style = {
-               ...style,
-               maxWidth,
-            };
-
-            return (
-               <td key={i} className={cls} colSpan={colSpan} style={style}>
-                  {v}
-               </td>
-            );
-         });
-
-         if (empty) return;
-
-         if (fixed && !fixedColumns)
-            cells.push(<td key="dummy" className={CSS.element(baseClass, "fixed-footer-corner")} />);
-
-         lines.push(<tr key={lineIndex}>{cells}</tr>);
-      });
-
-      if (lines.length == 0) return null;
-
-      return (
-         <tbody
-            key={"f" + i}
-            style={rowStyle}
-            className={CSS.element(baseClass, "group-footer", ["level-" + level])}
-            data-group-key={group.$key}
-            data-group-element={`group-footer-${level}`}
-         >
-            {lines}
-         </tbody>
-      );
-   }
-
-   renderRows(context, instance) {
-      let { records, hasFixedColumns } = instance;
-
-      if (!isArray(records)) return null;
-
-      let record, g;
-
-      for (let i = 0; i < records.length; i++) {
-         record = records[i];
-         if (record.type == "data") record.vdom = record.row.render(context, record.key);
-
-         if (record.type == "group-header") {
-            record.vdom = [];
-            record.fixedVdom = [];
-            g = record.grouping;
-            if (g.caption || g.showCaption)
-               record.vdom.push(
-                  this.renderGroupHeader(
-                     context,
-                     instance,
-                     g,
-                     record.level,
-                     record.group,
-                     record.key + "-caption",
-                     record.store,
-                     false,
-                  ),
-               );
-
-            if (hasFixedColumns)
-               record.fixedVdom.push(
-                  this.renderGroupHeader(
-                     context,
-                     instance,
-                     g,
-                     record.level,
-                     record.group,
-                     record.key + "-caption",
-                     record.store,
-                     true,
-                  ),
-               );
-
-            if (g.showHeader) {
-               record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false));
-               if (hasFixedColumns)
-                  record.fixedVdom.push(this.renderHeader(context, instance, record.key + "-header", false, true));
-            }
-         }
-
-         if (record.type == "group-footer") {
-            g = record.grouping;
-            if (g.showFooter) {
-               record.vdom = this.renderGroupFooter(
-                  context,
-                  instance,
-                  g,
-                  record.level,
-                  record.group,
-                  record.key + "-footer",
-                  record.store,
-                  false,
-                  false,
-               );
-               if (hasFixedColumns)
-                  record.fixedVdom = this.renderGroupFooter(
-                     context,
-                     instance,
-                     g,
-                     record.level,
-                     record.group,
-                     record.key + "-footer",
-                     record.store,
-                     false,
-                     true,
-                  );
-            }
-         }
-      }
-   }
-
-   renderFixedFooter(context, instance) {
-      let { records, hasFixedColumns, data } = instance;
-
-      instance.fixedFooterVDOM = null;
-      instance.fixedColumnsFixedFooterVDOM = null;
-
-      if (data.empty || !isNonEmptyArray(records)) return;
-
-      //all type of records are allowed here because the footer can be based on pre-computed data
-      //it doesn't make sense to show the footer if the grid is empty though
-      let record = records[records.length - 1];
-
-      instance.fixedFooterOverlap = true;
-      instance.fixedFooterIsGroupFooter = record.type == "group-footer";
-
-      instance.fixedFooterVDOM = this.renderGroupFooter(
-         context,
-         instance,
-         record.grouping,
-         record.level || 1,
-         record.group || { $key: "fixed-footer" },
-         record.key + "-footer",
-         record.store,
-         true,
-         false,
-      );
-
-      if (hasFixedColumns)
-         instance.fixedColumnsFixedFooterVDOM = this.renderGroupFooter(
-            context,
-            instance,
-            record.grouping,
-            record.level,
-            record.group || { $key: "fixed-footer" },
-            record.key + "-footer",
-            record.store,
-            true,
-            true,
-         );
-   }
-
-   mapRecords(context, instance) {
-      let { data, store, dataAdapter } = instance;
-
-      let filter = null;
-      if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
-
-      let sorters = !this.remoteSort && data.sorters;
-
-      //apply pre-sorters only if some sorting is applied
-      if (isNonEmptyArray(data.sorters) && isNonEmptyArray(data.preSorters)) {
-         sorters = [...data.preSorters, ...data.sorters];
-      }
-
-      dataAdapter.setFilter(filter);
-      dataAdapter.sort(sorters);
-
-      //if no filtering or sorting applied, let the component maps records on demand
-      if (
-         this.buffered &&
-         !this.fixedFooter &&
-         !filter &&
-         !isNonEmptyArray(sorters) &&
-         !dataAdapter.isTreeAdapter &&
-         !instance.dataAdapter.groupings
-      )
-         return null;
-
-      return dataAdapter.getRecords(context, instance, data.records, store);
-   }
-
-   mapRecord(context, instance, data, index) {
-      return instance.dataAdapter.mapRecord(context, instance, data, instance.store, this.recordsAccessor, index);
-   }
-}
-
-Grid.prototype.baseClass = "grid";
-Grid.prototype.showHeader = true;
-Grid.prototype.showFooter = false;
-Grid.prototype.recordName = "$record";
-Grid.prototype.indexName = "$index";
-Grid.prototype.remoteSort = false;
-Grid.prototype.lockColumnWidths = false;
-Grid.prototype.lockColumnWidthsRequiredRowCount = 3;
-Grid.prototype.focused = false;
-Grid.prototype.emptyText = false;
-Grid.prototype.showBorder = false; // show border override for material theme
-Grid.prototype.cached = false;
-Grid.prototype.buffered = false;
-Grid.prototype.bufferStep = 15;
-Grid.prototype.bufferSize = 60;
-Grid.prototype.pageSize = 100;
-Grid.prototype.infinite = false;
-Grid.prototype.styled = true;
-Grid.prototype.scrollSelectionIntoView = false;
-Grid.prototype.clearableSort = false;
-Grid.prototype.cellEditable = false;
-Grid.prototype.preciseMeasurements = false;
-Grid.prototype.hoverChannel = "default";
-Grid.prototype.focusable = null; // automatically resolved
-Grid.prototype.allowsFileDrops = false;
-Grid.prototype.preserveGroupOrder = false;
-
-Widget.alias("grid", Grid);
-Localization.registerPrototype("cx/widgets/Grid", Grid);
-
-class GridComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.dom = {};
-      let { widget } = props.instance;
-
-      let end = Math.min(widget.bufferSize, props.data.totalRecordCount);
-
-      this.state = {
-         cursor: widget.focused && widget.selectable ? 0 : -1,
-         cursorCellIndex: 0,
-         focused: widget.focused,
-         dropInsertionIndex: null,
-         dropNextToTheRowAbove: null,
-         start: 0,
-         end: end,
-      };
-
-      this.syncBuffering = false;
-
-      if (widget.infinite) {
-         this.start = 0;
-         this.end = end;
-         this.loadingStartPage = 0;
-         this.loadingEndPage = 0;
-      }
-
-      this.scrollerRef = (el) => {
-         this.dom.scroller = el;
-      };
-
-      this.fixedScrollerRef = (el) => {
-         this.dom.fixedScroller = el;
-      };
-
-      this.gridRef = (el) => {
-         this.dom.el = el;
-      };
-   }
-
-   getBufferStartEnd() {
-      //{start, end};
-      return this.syncBuffering ? this : this.state;
-   }
-
-   renderCellEditor(key, CSS, baseClass, instance, column) {
-      //add an inner div with fixed height in order to help IE absolutely position the contents inside
-      return (
-         <td key={key} className={CSS.element(baseClass, "cell-editor")}>
-            <Cx parentInstance={instance} subscribe>
-               <GridCellEditor
-                  className={CSS.element(baseClass, "cell-editor-wrap")}
-                  style={
-                     this.rowHeight > 0
-                        ? {
-                             height: this.rowHeight + 1,
-                          }
-                        : null
-                  }
-               >
-                  <ValidationGroup
-                     valid={{
-                        get: () => this.cellEditorValid,
-                        set: (value) => {
-                           this.cellEditorValid = value;
-                        },
-                     }}
-                  >
-                     {column.editor}
-                  </ValidationGroup>
-               </GridCellEditor>
-            </Cx>
-         </td>
-      );
-   }
-
-   createRowRenderer(cellWrap) {
-      let { instance, data } = this.props;
-      let { widget, isRecordSelectable, visibleColumns, isRecordDraggable, row } = instance;
-      let { CSS, baseClass } = widget;
-      let { dragSource } = data;
-      let { dragged, cursor, cursorCellIndex, cellEdit, dropInsertionIndex, dropTarget } = this.state;
-      let { colWidth, dimensionsVersion } = instance.state;
-      let { hasMergedCells } = row;
-
-      return (record, index, standalone, fixed) => {
-         let { store, key, row } = record;
-         let isDragged = dragged && (row.selected || record == dragged);
-         let mod = {
-            selected: row.selected,
-            dragged: isDragged,
-            cursor: widget.selectable && index == cursor,
-            over: dropTarget == "row" && dropInsertionIndex === index,
-            alternate: index % 2 == 1,
-         };
-
-         if (isRecordSelectable) {
-            let selectable = isRecordSelectable(record.data, {});
-            mod["selectable"] = selectable;
-            mod["non-selectable"] = !selectable;
-         }
-
-         let draggable =
-            dragSource &&
-            (!row.dragHandles || row.dragHandles.length == 0) &&
-            (!isRecordDraggable || isRecordDraggable(record.data));
-         mod["draggable"] = draggable;
-         mod["non-draggable"] = !draggable;
-
-         let wrap = (children) => {
-            let skipCells = {};
-            return (
-               <GridRowComponent
-                  key={key}
-                  className={CSS.state(mod)}
-                  store={store}
-                  dragSource={dragSource}
-                  instance={row}
-                  grid={instance}
-                  record={record}
-                  parent={this}
-                  cursorIndex={index}
-                  selected={row.selected}
-                  isBeingDragged={dragged}
-                  isDraggedOver={mod.over}
-                  cursor={mod.cursor}
-                  cursorCellIndex={index == cursor && cursorCellIndex}
-                  cellEdit={index == cursor && cursorCellIndex != null && cellEdit}
-                  shouldUpdate={row.shouldUpdate}
-                  dimensionsVersion={dimensionsVersion}
-                  fixed={fixed}
-                  useTrTag={hasMergedCells}
-               >
-                  {children.content.map(({ key, data, content }, line) => {
-                     let cells = content.map(
-                        ({ key, data, content, uniqueColumnId, merged, mergeRowSpan }, cellIndex) => {
-                           if (Boolean(data.fixed) !== fixed) return null;
-                           if (merged) return null;
-                           let cellected =
-                              index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
-                           let className = cellected
-                              ? CSS.expand(data.classNames, CSS.state("cellected"))
-                              : data.classNames;
-                           if (cellected && cellEdit) {
-                              let column = visibleColumns[cursorCellIndex];
-                              if (column && column.editor && data.editable)
-                                 return this.renderCellEditor(key, CSS, baseClass, row, column);
-                           }
-                           let width = colWidth[uniqueColumnId];
-                           let style = data.style;
-                           if (width) {
-                              style = {
-                                 ...style,
-                                 maxWidth: `${width}px`,
-                              };
-                           }
-
-                           if (skipCells[`${line}-${cellIndex}`]) return null;
-
-                           if (data.colSpan > 1 || data.rowSpan > 1) {
-                              for (let r = line; r < line + (data.rowSpan ?? 1); r++)
-                                 for (let c = cellIndex; c < cellIndex + (data.colSpan ?? 1); c++)
-                                    skipCells[`${r}-${c}`] = true;
-                           }
-
-                           if (cellWrap) content = cellWrap(content);
-
-                           return (
-                              <td
-                                 key={key}
-                                 className={className}
-                                 style={style}
-                                 colSpan={data.colSpan}
-                                 rowSpan={mergeRowSpan ?? data.rowSpan}
-                              >
-                                 {content}
-                              </td>
-                           );
-                        },
-                     );
-                     if (hasMergedCells) return cells;
-                     return (
-                        <tr key={key} className={data.classNames} style={data.style}>
-                           {cells}
-                        </tr>
-                     );
-                  })}
-               </GridRowComponent>
-            );
-         };
-
-         if (!standalone) return wrap(record.vdom);
-
-         return (
-            <Cx
-               key={key}
-               instance={record.row}
-               parentInstance={instance}
-               options={{ name: "grid-row" }}
-               contentFactory={(x) =>
-                  wrap({
-                     content: Array.isArray(x.children) ? x.children : x.children != null ? [x.children] : [],
-                     data: {},
-                  })
-               }
-               params={{
-                  ...mod,
-                  dimensionsVersion: dimensionsVersion,
-                  cursorIndex: index,
-                  data: record.data,
-                  cursorCellIndex: index == cursor && cursorCellIndex,
-                  cellEdit: index == cursor && cursorCellIndex != null && cellEdit,
-               }}
-            />
-         );
-      };
-   }
-
-   render() {
-      let { instance, data, fixedFooter, fixedColumnsFixedFooter } = this.props;
-      let { widget, hasFixedColumns } = instance;
-      let { CSS, baseClass } = widget;
-      let { start, end } = this.getBufferStartEnd();
-
-      let cellWrap = false;
-
-      if (widget.cellEditable && (widget.hasResizableColumns || hasFixedColumns)) {
-         cellWrap = (children) => <div className="cxe-grid-cell-clip">{children}</div>;
-      }
-
-      let children = [],
-         fixedChildren = [];
-
-      let renderRow = this.createRowRenderer(cellWrap);
-
-      let addRow = (record, index, standalone) => {
-         children.push(renderRow(record, index, standalone, false));
-         if (hasFixedColumns) fixedChildren.push(renderRow(record, index, standalone, true));
-
-         //avoid re-rendering on cursor change
-         record.row.shouldUpdate = false;
-      };
-
-      if (widget.buffered) {
-         let context = new RenderingContext();
-         let dummyDataClass = CSS.element(baseClass, "data", { dummy: true });
-         if (!instance.recordInstanceCache) instance.recordInstanceCache = new InstanceCache(instance);
-         instance.recordInstanceCache.mark();
-         this.getRecordsSlice(start, end).forEach((r, i) => {
-            if (r == null) {
-               addRow(
-                  {
-                     key: "dummy-" + start + i,
-                     row: {
-                        data: { classNames: dummyDataClass },
-                        widget: instance.row,
-                     },
-                     vdom: {
-                        content: [
-                           {
-                              key: 0,
-                              data: {},
-                              content: [
-                                 {
-                                    key: 0,
-                                    data: {
-                                       colSpan: 1000,
-                                       style: {
-                                          height: `${this.rowHeight}px`,
-                                       },
-                                    },
-                                 },
-                              ],
-                           },
-                        ],
-                     },
-                  },
-                  start + i,
-               );
-            } else {
-               let record = instance.records
-                  ? r
-                  : widget.mapRecord(context, instance, r, widget.infinite ? start + i - data.offset : start + i);
-               let row = (record.row = instance.recordInstanceCache.getChild(instance.row, record.store, record.key));
-               instance.recordInstanceCache.addChild(row);
-               row.detached = true;
-               row.selected = instance.isSelected(record.data, record.index);
-
-               if (record.type == "data") {
-                  addRow(record, start + i, true);
-               } else if (record.type == "group-header") {
-                  let g = record.grouping;
-                  if (g.caption || g.showCaption) {
-                     children.push(
-                        widget.renderGroupHeader(
-                           null,
-                           instance,
-                           g,
-                           record.level,
-                           record.group,
-                           record.key + "-caption",
-                           record.store,
-                           false,
-                        ),
-                     );
-
-                     if (hasFixedColumns)
-                        fixedChildren.push(
-                           widget.renderGroupHeader(
-                              null,
-                              instance,
-                              g,
-                              record.level,
-                              record.group,
-                              record.key + "-caption",
-                              record.store,
-                              true,
-                           ),
-                        );
-                  }
-               } else if (record.type == "group-footer") {
-                  let g = record.grouping;
-                  if (g.showFooter && (!widget.fixedFooter || start + i != instance.records.length - 1)) {
-                     children.push(
-                        widget.renderGroupFooter(
-                           null,
-                           instance,
-                           g,
-                           record.level,
-                           record.group,
-                           record.key + "-footer",
-                           record.store,
-                           false,
-                           false,
-                        ),
-                     );
-
-                     if (hasFixedColumns)
-                        fixedChildren.push(
-                           widget.renderGroupFooter(
-                              null,
-                              instance,
-                              g,
-                              record.level,
-                              record.group,
-                              record.key + "-footer",
-                              record.store,
-                              false,
-                              true,
-                           ),
-                        );
-                  }
-               }
-            }
-         });
-         instance.recordInstanceCache.sweep();
-      } else {
-         let { row } = instance;
-         let { hasMergedCells, mergedColumns } = row;
-         if (hasMergedCells) {
-            // merge adjacent cells with the same value in columns that are marked as merged
-            let rowSpan = {};
-            let getCellRenderInfo = (vdom, cellIndex) => vdom.content[0]?.content[cellIndex];
-            for (let index = instance.records.length - 1; index >= 0; index--) {
-               let row = instance.records[index];
-               let prevRow = instance.records[index - 1];
-               if (row.type == "data") {
-                  let stopMerge = false;
-                  for (let mi = 0; mi < mergedColumns.length; mi++) {
-                     let mergedCol = mergedColumns[mi];
-                     let cellInfo = getCellRenderInfo(row.vdom, mergedCol.index);
-                     cellInfo.merged = false;
-                     delete cellInfo.mergeRowSpan;
-                     if (prevRow?.type == "data") {
-                        let shouldMerge = false;
-                        switch (mergedCol.mode) {
-                           case "always":
-                              shouldMerge = true;
-                              break;
-                           case "same-value":
-                              let prevCellInfo = getCellRenderInfo(prevRow.vdom, mergedCol.index);
-                              shouldMerge = !stopMerge && cellInfo.data.value === prevCellInfo.data.value;
-                              break;
-                        }
-
-                        if (shouldMerge) {
-                           cellInfo.merged = true;
-                           rowSpan[mergedCol.uniqueColumnId] = (rowSpan[mergedCol.uniqueColumnId] ?? 1) + 1;
-                        } else {
-                           if (mergedCol.mode == "same-value") stopMerge = true;
-                        }
-                     }
-                     if (!cellInfo.merged && rowSpan[mergedCol.uniqueColumnId] > 1) {
-                        cellInfo.mergeRowSpan = rowSpan[mergedCol.uniqueColumnId];
-                        rowSpan[mergedCol.uniqueColumnId] = 1;
-                     }
-                  }
-               } else rowSpan = {};
-            }
-         }
-
-         instance.records.forEach((record, i) => {
-            if (record.type == "data") addRow(record, i, false);
-            else {
-               children.push(record.vdom);
-               if (hasFixedColumns) fixedChildren.push(record.fixedVdom);
-            }
-         });
-      }
-
-      if (this.state.dropTarget == "grid" && this.state.dropInsertionIndex != null) {
-         let dragInsertionRow = (
-            <tbody key="dropzone">
-               <tr>
-                  <td
-                     className={CSS.element(baseClass, "dropzone")}
-                     colSpan={1000}
-                     style={{
-                        height: data.dropMode == "insertion" ? 0 : this.state.dropItemHeight,
-                     }}
-                  />
-               </tr>
-            </tbody>
-         );
-
-         let dataRecordClass = CSS.element(baseClass, "data");
-
-         let isDataRecord = widget.buffered
-            ? (item) => item?.props?.instance?.data?.class == dataRecordClass
-            : (item) => item?.props?.record?.type;
-
-         let index = 0;
-         while (index < children.length && !isDataRecord(children[index])) index++;
-
-         let count = 0;
-         while (index < children.length && count < this.state.dropInsertionIndex) {
-            if (isDataRecord(children[index])) count++;
-            index++;
-         }
-
-         let savedIndexPos = index;
-
-         if (!this.state.dropNextToTheRowAbove)
-            while (index < children.length && !isDataRecord(children[index])) index++;
-
-         // do not allow insertion after the last group footer
-         if (savedIndexPos < index && index == children.length) index = savedIndexPos;
-
-         children.splice(index, 0, dragInsertionRow);
-      }
-
-      let content = [],
-         fixedColumnsContent = [];
-
-      //instance.records holds the record count after filtering
-      if (data.emptyText && data.empty) {
-         children = [
-            <tbody key="empty" className={CSS.element(baseClass, "empty-text")}>
-               <tr>
-                  <td colSpan={1000}>{data.emptyText}</td>
-               </tr>
-            </tbody>,
-         ];
-      } else if (widget.fixedFooter && (widget.buffered || !instance.fixedFooterIsGroupFooter)) {
-         //add fixed footer content for buffered grids
-         if (fixedFooter || fixedColumnsFixedFooter) {
-            children.push(fixedFooter);
-            if (hasFixedColumns) fixedChildren.push(fixedColumnsFixedFooter);
-         }
-      }
-
-      let shouldRenderFixedFooter = widget.scrollable && (fixedFooter || fixedColumnsFixedFooter);
-
-      if (hasFixedColumns) {
-         fixedColumnsContent.push(
-            <div
-               key="fixedscroller"
-               ref={this.fixedScrollerRef}
-               className={CSS.element(baseClass, "fixed-scroll-area", {
-                  "fixed-header": !!this.props.header,
-                  "fixed-footer": shouldRenderFixedFooter,
-               })}
-            >
-               <div className={CSS.element(baseClass, "fixed-table-wrapper")}>
-                  <table
-                     ref={(el) => {
-                        this.dom.fixedTable = el;
-                     }}
-                  >
-                     {this.props.fixedColumnsHeader}
-                     {fixedChildren}
-                  </table>
-               </div>
-            </div>,
-         );
-      }
-
-      content.push(
-         <div
-            key="scroller"
-            ref={this.scrollerRef}
-            onScroll={this.onScroll.bind(this)}
-            className={CSS.element(baseClass, "scroll-area", {
-               "fixed-header": !!this.props.header,
-               "fixed-footer": shouldRenderFixedFooter,
-            })}
-         >
-            <div className={CSS.element(baseClass, "table-wrapper")}>
-               <table
-                  ref={(el) => {
-                     this.dom.table = el;
-                     if (this.props.instance.widget.onRef) this.props.instance.invoke("onRef", el, this.props.instance);
-                  }}
-               >
-                  {this.props.header}
-                  {children}
-               </table>
-            </div>
-         </div>,
-      );
-
-      if (this.props.fixedHeader)
-         content.push(
-            <div
-               key="fh"
-               ref={(el) => {
-                  this.dom.fixedHeader = el;
-               }}
-               className={CSS.element(baseClass, "fixed-header")}
-               style={{
-                  display: this.scrollWidth > 0 ? "block" : "none",
-               }}
-            >
-               <table>{this.props.fixedHeader}</table>
-            </div>,
-         );
-
-      if (this.props.fixedColumnsFixedHeader)
-         fixedColumnsContent.push(
-            <div
-               key="fcfh"
-               ref={(el) => {
-                  this.dom.fixedColumnsFixedHeader = el;
-               }}
-               className={CSS.element(baseClass, "fixed-fixed-header")}
-               style={{
-                  display: this.scrollWidth > 0 ? "block" : "none",
-               }}
-            >
-               <table>{this.props.fixedColumnsFixedHeader}</table>
-            </div>,
-         );
-
-      if (shouldRenderFixedFooter) {
-         content.push(
-            <div
-               key="ff"
-               ref={(el) => {
-                  this.dom.fixedFooter = el;
-               }}
-               className={CSS.element(baseClass, "fixed-footer")}
-            >
-               <table>{fixedFooter}</table>
-            </div>,
-         );
-
-         if (hasFixedColumns)
-            fixedColumnsContent.push(
-               <div
-                  key="fcff"
-                  ref={(el) => {
-                     this.dom.fixedColumnsFixedFooter = el;
-                  }}
-                  className={CSS.element(baseClass, "fixed-fixed-footer")}
-               >
-                  <table>{fixedColumnsFixedFooter}</table>
-               </div>,
-            );
-      }
-
-      let columnInsertionMarker = null;
-      if (this.state.dropTarget == "column") {
-         columnInsertionMarker = (
-            <div
-               className={CSS.element(baseClass, "col-insertion-marker")}
-               style={{
-                  left: this.state.colDropInsertionLeft,
-               }}
-            />
-         );
-      }
-
-      return (
-         <div
-            className={data.classNames}
-            style={{ ...data.style, counterReset: `cx-row-number ${start}` }}
-            tabIndex={widget.focusable ? data.tabIndex || 0 : null}
-            ref={this.gridRef}
-            onKeyDown={this.handleKeyDown.bind(this)}
-            onFocus={this.onFocus.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-            onDragEnter={this.onFileDragEnter.bind(this)}
-            onDragOver={this.onFileDragOver.bind(this)}
-            onDragLeave={this.onFileDragLeave.bind(this)}
-            onDrop={this.onFileDrop.bind(this)}
-         >
-            {fixedColumnsContent}
-            {content}
-            {columnInsertionMarker}
-            {this.props.children}
-         </div>
-      );
-   }
-
-   getRecordsSlice(start, end) {
-      let { data, instance } = this.props;
-      let { widget } = instance;
-      if (!widget.infinite) {
-         let source = instance.records || data.records;
-         return source.slice(start, end);
-      }
-
-      let { offset, records } = data;
-      let result = [];
-      for (let i = start; i < Math.min(end, data.totalRecordCount); i++) {
-         if (i >= offset && i < offset + records.length) result.push(records[i - offset]);
-         else result.push(null);
-      }
-
-      return result;
-   }
-
-   ensureData(visibleStart, visibleEnd) {
-      if (this.loading) return;
-
-      let { instance } = this.props;
-      let { widget } = instance;
-      let { pageSize } = widget;
-
-      let startPage = Math.trunc(visibleStart / pageSize) + 1,
-         endPage = Math.trunc((visibleEnd - 1) / pageSize) + 1;
-
-      //debouncing restricts excessive page loading on fast scrolling as rendering data is
-      //useless because visible region is scrolled away before data appears
-      //the user should spent some time on the page before loading it
-
-      if (!this.loadPageRange)
-         this.loadPageRange = debounce((startPage, endPage) => {
-            let { data } = this.props;
-            let { records, offset } = data;
-            let promises = [];
-
-            for (let page = startPage; page <= endPage; page++) {
-               let s = (page - 1) * pageSize,
-                  e = s + pageSize;
-               if (s >= offset && e <= offset + records.length) {
-                  promises.push(Promise.resolve(records.slice(s - offset, e - offset)));
-               } else {
-                  let result = instance.invoke(
-                     "onFetchRecords",
-                     {
-                        page,
-                        pageSize,
-                        sorters: data.sorters,
-                        sortField: data.sortField,
-                        sortDirection: data.sortDirection,
-                        filterParams: data.filterParams,
-                        state: this.prevFetchRecordsState,
-                     },
-                     instance,
-                  );
-                  promises.push(Promise.resolve(result));
-               }
-            }
-
-            this.loading = true;
-
-            Promise.all(promises)
-               .then((pageRecords) => {
-                  this.loading = false;
-                  let records = [];
-                  let totalRecordCount;
-                  let lastPage;
-
-                  pageRecords.forEach((page) => {
-                     if (Array.isArray(page)) {
-                        records.push(...page);
-                     } else {
-                        if (!Array.isArray(page.records))
-                           throw new Error(
-                              "onFetchRecords should return an array of records or an object with results inside records property.",
-                           );
-                        totalRecordCount = page.totalRecordCount;
-                        lastPage = page.lastPage;
-                        this.prevFetchRecordsState = page.state;
-                        records.push(...page.records);
-                     }
-                  });
-
-                  let { data } = this.props;
-
-                  if (!isNumber(totalRecordCount)) {
-                     totalRecordCount = (startPage - 1) * pageSize + records.length;
-                     if (!lastPage && records.length == (endPage - startPage + 1) * pageSize) totalRecordCount++;
-                     if (data.totalRecordCount > totalRecordCount) totalRecordCount = data.totalRecordCount;
-                  }
-
-                  instance.buffer.totalRecordCount = data.totalRecordCount = totalRecordCount;
-                  instance.buffer.records = data.records = records;
-                  instance.buffer.page = data.page = startPage;
-                  data.offset = (startPage - 1) * pageSize;
-
-                  instance.store.silently(() => {
-                     instance.set("records", records);
-                     instance.set("page", startPage);
-                     instance.set("totalRecordCount", totalRecordCount);
-                  });
-
-                  let stateChanges = {
-                     startPage,
-                     endPage,
-                  };
-
-                  if (this.state.end == 0) stateChanges.end = Math.min(widget.bufferSize, totalRecordCount);
-
-                  this.setState(stateChanges, () => {
-                     this.loadingStartPage = startPage;
-                     this.loadingEndPage = endPage;
-                     this.onScroll();
-                  });
-               })
-               .catch((error) => {
-                  this.loading = false;
-                  if (widget.onLoadingError) instance.invoke(error, "onLoadingError", instance);
-               });
-         }, 30);
-
-      if (startPage < this.loadingStartPage || endPage > this.loadingEndPage) {
-         this.loadingStartPage = startPage;
-         this.loadingEndPage = endPage;
-         this.loadPageRange(startPage, endPage);
-      }
-   }
-
-   onScroll() {
-      //check if unmounted
-      if (!this.dom.scroller) return;
-
-      if (this.dom.fixedHeader) {
-         this.dom.fixedHeader.scrollLeft = this.dom.scroller.scrollLeft;
-      }
-
-      if (this.dom.fixedFooter) {
-         this.dom.fixedFooter.scrollLeft = this.dom.scroller.scrollLeft;
-      }
-
-      if (this.dom.fixedScroller) {
-         this.dom.fixedScroller.scrollTop = this.dom.scroller.scrollTop;
-      }
-
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      if (widget.buffered && !this.pending) {
-         let start = 0;
-         if (widget.measureRowHeights && instance.records)
-            start = Math.max(0, this.estimateStart(instance.records, this.dom.scroller.scrollTop) - widget.bufferStep);
-         else if (this.rowHeight > 0)
-            start = Math.round(this.dom.scroller.scrollTop / this.rowHeight - widget.bufferStep);
-
-         start = Math.round(start / widget.bufferStep) * widget.bufferStep;
-         start = Math.max(0, Math.min(start, data.totalRecordCount - widget.bufferSize));
-         let end = Math.min(data.totalRecordCount, start + widget.bufferSize);
-
-         if (widget.infinite) {
-            this.ensureData(start, end);
-         }
-
-         if (this.syncBuffering) {
-            this.start = start;
-            this.end = end;
-         } else if (this.state.end != end) {
-            this.pending = true;
-            this.setState({ start, end }, () => {
-               this.pending = false;
-            });
-         }
-      }
-   }
-
-   onFixedColumnsWheel(e) {
-      this.dom.scroller.scrollTop += e.deltaY;
-      e.preventDefault();
-   }
-
-   shouldComponentUpdate(props, state) {
-      return props.shouldUpdate !== false || state !== this.state;
-   }
-
-   componentDidMount() {
-      this.componentDidUpdate();
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.scrollable) {
-         //update fixed header/footer on resize
-         this.offResize = ResizeManager.trackElement(this.dom.scroller, () => {
-            requestAnimationFrame(() => {
-               //ignore changes if the element is not visible on the page
-               if (!this.dom.scroller?.offsetWidth) return;
-               this.componentDidUpdate();
-               instance.setState({
-                  dimensionsVersion: instance.state.dimensionsVersion + 1,
-                  lockedColWidth: {},
-               });
-            });
-         });
-      }
-      if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", this.handleKeyDown.bind(this), instance);
-      this.unregisterDropZone = registerDropZone(this);
-      if (widget.infinite) this.ensureData(0, 0);
-      if (this.dom.fixedScroller) {
-         this.onFixedColumnsWheel = this.onFixedColumnsWheel.bind(this);
-         this.dom.fixedScroller.addEventListener("wheel", this.onFixedColumnsWheel, { passive: false });
-      }
-   }
-
-   onDragStart(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.onDragStart) instance.invoke("onDragStart", e, instance);
-   }
-
-   onDrop(e) {
-      try {
-         let { instance } = this.props;
-         let { widget } = instance;
-         let { start } = this.getBufferStartEnd();
-         let { dropInsertionIndex, dropTarget, dropNextToTheRowAbove } = this.state;
-         if (dropTarget == "grid" && widget.onDrop && dropInsertionIndex != null) {
-            e.target = {
-               insertionIndex: start + dropInsertionIndex,
-               recordBefore: this.getDataRecordAt(start + dropInsertionIndex - 1),
-               recordAfter: this.getDataRecordAt(start + dropInsertionIndex),
-               dropNextToTheRowAbove,
-            };
-            instance.invoke("onDrop", e, instance);
-         } else if (dropTarget == "row") {
-            e.target = {
-               index: start + dropInsertionIndex,
-               record: this.getDataRecordAt(start + dropInsertionIndex),
-            };
-            instance.invoke("onRowDrop", e, instance);
-         } else if (dropTarget == "column" && widget.onColumnDrop) {
-            e.target = {
-               index: this.state.colDropInsertionIndex,
-               grid: widget,
-               instance,
-            };
-            instance.invoke("onColumnDrop", e, instance);
-         }
-      } catch (err) {
-         console.error("Grid drop operation failed. Please fix this error:", err);
-      }
-
-      //in some cases drop operation is not followed by leave
-      this.onDragLeave(e);
-   }
-
-   onDropTest(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      let grid = widget.onDropTest && instance.invoke("onDropTest", e, instance);
-      let row = widget.onRowDropTest && instance.invoke("onRowDropTest", e, instance);
-      let column = widget.onColumnDropTest && instance.invoke("onColumnDropTest", e, instance);
-      return (grid || row || column) && { grid, row, column };
-   }
-
-   onDragEnd(e) {
-      this.setState({
-         dropTarget: null,
-         dropInsertionIndex: null,
-         colDropInsertionIndex: null,
-         colDropInsertionLeft: null,
-      });
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.onDragEnd) instance.invoke("onDragEnd", e, instance);
-   }
-
-   onDragMeasure(e, { test: { grid, row, column } }) {
-      //columns can be dropped anywhere, while rows only in the scrollable area
-      let r = getTopLevelBoundingClientRect(column ? this.dom.el : this.dom.scroller);
-      let { clientX, clientY } = e.cursor;
-
-      if (clientX < r.left || clientX >= r.right || clientY < r.top || clientY >= r.bottom) return false;
-
-      return {
-         over: 1000,
-      };
-   }
-
-   onColumnDragOver(ev) {
-      let headerTBody = this.dom.table.firstChild;
-      let positions = [];
-      let bounds;
-
-      let exists = {};
-
-      for (let r = 0; r < headerTBody.children.length; r++) {
-         let cells = headerTBody.children[r].children;
-         for (let c = 0; c < cells.length; c++) {
-            bounds = cells[c].getBoundingClientRect();
-            let key = bounds.left.toFixed(0);
-            if (exists[key]) continue;
-            positions.push(bounds.left);
-            exists[key] = true;
-         }
-         if (r == 0) positions.push(bounds.right);
-      }
-
-      //due to the order of enumeration it's possible that positions are out of order
-      positions.sort((a, b) => a - b);
-      let index = 0;
-      while (index + 1 < positions.length && ev.cursor.clientX > positions[index + 1]) index++;
-
-      let { fixedColumnCount } = this.props.instance;
-
-      this.setState({
-         colDropInsertionIndex: fixedColumnCount + index,
-         colDropInsertionLeft:
-            positions[index] - positions[0] - this.dom.scroller.scrollLeft + this.dom.scroller.offsetLeft,
-         dropTarget: "column",
-      });
-   }
-
-   onDragOver(ev, { test: { grid, row, column } }) {
-      if (column) this.onColumnDragOver(ev);
-
-      if (!grid && !row) return;
-
-      let { instance } = this.props;
-      let { widget, data } = instance;
-      let { CSS, baseClass } = widget;
-      let rowClass = CSS.element(baseClass, "data");
-      let nodes = Array.from(this.dom.table.children).filter(
-         (node) => node.className && node.className.indexOf(rowClass) != -1,
-      );
-      let { start } = this.getBufferStartEnd();
-
-      let s = 0,
-         e = nodes.length,
-         m,
-         b;
-      let parentOffset = getParentFrameBoundingClientRect(this.dom.scroller);
-      let cy = ev.cursor.clientY - parentOffset.top;
-
-      let rowOverIndex = null;
-      let nextToTheRowAbove = false;
-
-      while (s < e) {
-         m = Math.floor((s + e) / 2);
-         b = nodes[m].getBoundingClientRect();
-
-         //dragged items might be invisible and have no client bounds
-         if (b.top == 0 && b.bottom == 0) {
-            //it's important to go all the way in one direction otherwise infinite loop might occur
-            while (m > s && b.top == 0 && b.bottom == 0) {
-               m--;
-               b = nodes[m].getBoundingClientRect();
-            }
-            while (m + 1 < e && b.top == 0 && b.bottom == 0) {
-               m = m + 1;
-               b = nodes[m].getBoundingClientRect();
-            }
-            if (b.top == 0 && b.bottom == 0) {
-               s = e = m;
-               break;
-            }
-         }
-
-         if (cy < b.top) e = m;
-         else if (cy > b.bottom) s = m + 1;
-         else {
-            //hovering over a row here
-            if (row) {
-               let confirmed = !grid;
-               if (!confirmed) {
-                  let insertionZone = (b.bottom - b.top) / 4;
-                  confirmed = cy > b.top + insertionZone && cy < b.bottom - insertionZone;
-               }
-               if (confirmed) {
-                  rowOverIndex = m;
-                  break;
-               }
-            }
-
-            if (cy > (b.bottom + b.top) / 2) {
-               s = e = m + 1;
-               nextToTheRowAbove = true;
-            } else s = e = m;
-         }
-      }
-
-      let cancel = false;
-
-      if (rowOverIndex != null) {
-         let evt = {
-            ...ev,
-            target: {
-               record: this.getRecordAt(rowOverIndex),
-               index: start + rowOverIndex,
-            },
-         };
-         if (widget.onRowDragOver && instance.invoke("onRowDragOver", evt, instance) === false) cancel = true;
-         else if (rowOverIndex != this.state.dropInsertionIndex || this.state.dropTarget != "row") {
-            this.setState({
-               dropInsertionIndex: rowOverIndex,
-               dropNextToTheRowAbove: false,
-               dropItemHeight: ev.source.height - 1,
-               dropTarget: "row",
-            });
-         }
-      } else if (grid) {
-         let evt = {
-            ...ev,
-            target: {
-               recordBefore: this.getRecordAt(s - 1),
-               recordAfter: this.getRecordAt(s),
-               insertionIndex: start + s,
-               totalRecordCount: data.totalRecordCount,
-            },
-         };
-         if (widget.onDragOver && instance.invoke("onDragOver", evt, instance) === false) cancel = true;
-         else if (s != this.state.dropInsertionIndex || this.state.dropTarget != "grid") {
-            this.setState({
-               dropInsertionIndex: s,
-               dropNextToTheRowAbove: nextToTheRowAbove,
-               dropItemHeight: ev.source.height - 1,
-               dropTarget: "grid",
-            });
-         }
-      }
-      if (cancel) {
-         this.setState({
-            dropInsertionIndex: null,
-            dropNextToTheRowAbove: null,
-            dropTarget: null,
-         });
-      }
-   }
-
-   onDragLeave(e) {
-      this.setState({
-         dropInsertionIndex: null,
-         dropNextToTheRowAbove: null,
-         dropTarget: null,
-      });
-   }
-
-   onGetHScrollParent() {
-      let { widget } = this.props.instance;
-      if (widget.scrollable) return this.dom.scroller;
-      return findScrollableParent(this.dom.table, true);
-   }
-
-   onGetVScrollParent({ test: { grid, row, column } }) {
-      if (column && !grid && !row) return null;
-      let { widget } = this.props.instance;
-      if (widget.scrollable) return this.dom.scroller;
-      return findScrollableParent(this.dom.table);
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      let { data, widget } = props.instance;
-      if (this.state.cursor >= data.totalRecordCount)
-         this.setState({
-            cursor: data.totalRecordCount - 1,
-         });
-      else if (widget.selectable && this.state.focused && this.state.cursor < 0)
-         this.setState({
-            cursor: 0,
-         });
-   }
-
-   componentWillUnmount() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (this.offResize) this.offResize();
-
-      offFocusOut(this);
-
-      if (this.unregisterDropZone) this.unregisterDropZone();
-
-      if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", null, instance);
-
-      if (this.dom.fixedScroller) {
-         this.dom.fixedScroller.removeEventListener("wheel", this.onFixedColumnsWheel);
-      }
-   }
-
-   estimateHeight(records, start, end, breakCondition) {
-      let avgDataRowHeight = this.heightStats.estimate("data");
-      let totalHeight = 0;
-      for (let i = start; i < end; i++) {
-         let record = records[i];
-         switch (record.type) {
-            case "data":
-               if (record.key in this.rowHeights) totalHeight += this.rowHeights[record.key];
-               else totalHeight += avgDataRowHeight;
-               break;
-
-            case "group-header":
-               if (record.grouping.showCaption) {
-                  let captionKey = "group-caption-" + record.level;
-                  if (`${captionKey}-${record.group.$key}` in this.rowHeights)
-                     totalHeight += this.rowHeights[`${captionKey}-${record.group.$key}`];
-                  else totalHeight += this.heightStats.estimate(captionKey) || avgDataRowHeight;
-               }
-               break;
-
-            case "group-footer":
-               if (record.grouping.showFooter) {
-                  let captionKey = "group-footer-" + record.level;
-                  if (`${captionKey}-${record.group.$key}` in this.rowHeights)
-                     totalHeight += this.rowHeights[`${captionKey}-${record.group.$key}`];
-                  else totalHeight += this.heightStats.estimate(captionKey) || avgDataRowHeight;
-               }
-               break;
-
-            default:
-               Console.warn("UNPROCESSED RECORD TYPE", record);
-               break;
-         }
-
-         if (breakCondition && breakCondition(i, totalHeight) === false) break;
-      }
-      return totalHeight;
-   }
-
-   estimateStart(records, height) {
-      let start = 0;
-      if (height == 0) return 0;
-      this.estimateHeight(records, 0, records.length, (index, h) => {
-         start = index;
-         return h < height;
-      });
-      return start;
-   }
-
-   componentDidUpdate() {
-      let { instance, data } = this.props;
-      let { widget, fixedFooterOverlap } = instance;
-
-      if (
-         widget.lockColumnWidths &&
-         isArray(data.records) &&
-         data.records.length >= widget.lockColumnWidthsRequiredRowCount
-      ) {
-         let headerTBody = this.dom.table.firstChild;
-         for (let r = 0; r < headerTBody.children.length; r++) {
-            let sr = headerTBody.children[r];
-            for (let c = 0; c < sr.children.length; c++) {
-               let cell = sr.children[c];
-               cell.style.width = cell.style.minWidth = cell.style.maxWidth = `${sr.children[c].offsetWidth}px`;
-               cell.style.boxSizing = "border-box";
-               if (cell.dataset.uniqueColId)
-                  instance.state.lockedColWidth[cell.dataset.uniqueColId] = sr.children[c].offsetWidth;
-            }
-         }
-      }
-
-      if (widget.scrollable) {
-         this.scrollWidth = this.dom.scroller.offsetWidth - this.dom.scroller.clientWidth;
-
-         let resized = false,
-            headerHeight = 0,
-            footerHeight = 0,
-            rowHeight = 0;
-
-         if (this.dom.fixedTable) syncHeaderHeights(this.dom.table.firstChild, this.dom.fixedTable.firstChild);
-
-         if (this.dom.fixedHeader) {
-            let fixedHeaderTBody = this.dom.fixedHeader.firstChild.firstChild;
-
-            resized = widget.preciseMeasurements
-               ? copyCellSizePrecise(this.dom.table.firstChild, fixedHeaderTBody)
-               : copyCellSize(this.dom.table.firstChild, fixedHeaderTBody);
-
-            let scrollColumnEl = fixedHeaderTBody.firstChild.lastChild;
-            if (scrollColumnEl) scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth = this.scrollWidth + "px";
-
-            this.dom.fixedHeader.style.display = "block";
-            headerHeight = this.dom.fixedHeader.offsetHeight;
-            this.dom.scroller.style.marginTop = `${headerHeight}px`;
-            if (this.dom.fixedScroller) this.dom.fixedScroller.style.marginTop = `${headerHeight}px`;
-            else if (this.dom.fixedHeader.style.left != null) this.dom.fixedHeader.style.left = null;
-         } else {
-            this.dom.scroller.style.marginTop = 0;
-            if (this.dom.fixedScroller) this.dom.fixedScroller.style.marginTop = 0;
-         }
-
-         if (this.dom.fixedColumnsFixedHeader) {
-            let fixedColumnsWidth = `${this.dom.fixedScroller.offsetWidth}px`;
-            this.dom.fixedColumnsFixedHeader.style.right = "auto";
-            this.dom.fixedColumnsFixedHeader.style.width = fixedColumnsWidth;
-            if (this.dom.fixedHeader) this.dom.fixedHeader.style.left = fixedColumnsWidth;
-
-            this.dom.fixedColumnsFixedHeader.style.display = "block";
-
-            let fixedHeaderTBody = this.dom.fixedColumnsFixedHeader.firstChild.firstChild;
-
-            if (this.dom.fixedTable.firstChild) {
-               resized = copyCellSize(this.dom.fixedTable.firstChild, fixedHeaderTBody);
-            }
-         }
-
-         if (this.dom.fixedFooter || this.dom.fixedColumnsFixedFooter) {
-            if (this.dom.fixedColumnsFixedFooter) {
-               let fixedColumnsWidth = `${this.dom.fixedScroller.offsetWidth}px`;
-               this.dom.fixedColumnsFixedFooter.style.right = "auto";
-               this.dom.fixedColumnsFixedFooter.style.width = fixedColumnsWidth;
-
-               let dstTableBody = this.dom.fixedColumnsFixedFooter.firstChild.firstChild;
-               if (dstTableBody) {
-                  let srcTableBody = this.dom.fixedTable.lastChild;
-                  copyCellSize(srcTableBody, dstTableBody, fixedFooterOverlap);
-                  this.dom.fixedColumnsFixedFooter.style.display = "block";
-                  footerHeight = this.dom.fixedFooter.offsetHeight;
-               }
-            }
-
-            if (this.dom.fixedFooter) {
-               let dstTableBody = this.dom.fixedFooter.firstChild.firstChild;
-
-               if (dstTableBody) {
-                  let srcTableBody = this.dom.table.lastChild;
-
-                  copyCellSize(srcTableBody, dstTableBody, fixedFooterOverlap);
-
-                  let scrollColumnEl = dstTableBody.firstChild.lastChild;
-                  if (scrollColumnEl)
-                     scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth = this.scrollWidth + "px";
-
-                  this.dom.fixedFooter.style.display = "block";
-                  footerHeight = this.dom.fixedFooter.offsetHeight;
-               }
-
-               if (this.dom.fixedScroller) this.dom.fixedFooter.style.left = `${this.dom.fixedScroller.offsetWidth}px`;
-               else if (this.dom.fixedFooter.style.left != null) this.dom.fixedFooter.style.left = null;
-            }
-
-            this.dom.scroller.style.marginBottom = `${footerHeight}px`;
-            if (this.dom.fixedScroller) this.dom.fixedScroller.style.marginBottom = `${footerHeight}px`;
-         } else {
-            this.dom.scroller.style.marginBottom = 0;
-            if (this.dom.fixedScroller) this.dom.fixedScroller.style.marginBottom = 0;
-         }
-
-         let scrollOverlap = fixedFooterOverlap ? footerHeight : 0;
-
-         if (widget.buffered) {
-            let { start, end } = this.getBufferStartEnd();
-            let remaining = 0,
-               count = Math.min(data.totalRecordCount, end - start);
-
-            if (widget.measureRowHeights) {
-               if (!this.rowHeights) this.rowHeights = {};
-               if (!this.heightStats) this.heightStats = new AvgHeight();
-               for (let i = 0; i < this.dom.table.children.length; i++) {
-                  let body = this.dom.table.children[i];
-                  if (body.dataset.recordKey != null) {
-                     if (!(body.dataset.recordKey in this.rowHeights)) this.heightStats.add("data", body.offsetHeight);
-                     this.rowHeights[body.dataset.recordKey] = body.offsetHeight;
-                  } else if (body.dataset.groupKey) {
-                     let key = body.dataset.groupElement + "-" + body.dataset.groupKey;
-                     this.rowHeights[key] = body.offsetHeight;
-                     if (!(body.dataset.recordKey in this.rowHeights))
-                        this.heightStats.add(body.dataset.groupElement, body.offsetHeight);
-                  }
-               }
-            }
-
-            if (count > 0) {
-               //do not change row height while a drag-drop operation is in place
-               rowHeight = this.state.dragged
-                  ? this.rowHeight
-                  : Math.round((this.dom.table.offsetHeight - headerHeight) / count);
-               // if (this.rowHeight && this.rowHeight != rowHeight) {
-               //    console.warn("ROW-HEIGHT-CHANGE", this.rowHeight, rowHeight);
-               // }
-               remaining = Math.max(0, data.totalRecordCount - end);
-            }
-
-            let upperMargin = 0,
-               lowerMargin = 0;
-            if (widget.measureRowHeights && instance.records) {
-               upperMargin = this.estimateHeight(instance.records, 0, start);
-               lowerMargin = this.estimateHeight(instance.records, end, instance.records.length);
-            } else {
-               upperMargin = start * rowHeight;
-               lowerMargin = remaining * rowHeight;
-            }
-
-            //console.log(upperMargin, start * rowHeight, this.rowHeights, this.heightStats);
-
-            this.dom.table.style.marginTop = `${(-headerHeight + upperMargin).toFixed(0)}px`;
-            this.dom.table.style.marginBottom = `${(lowerMargin - scrollOverlap).toFixed(0)}px`;
-         } else {
-            this.dom.table.style.marginTop = `${-headerHeight}px`;
-            this.dom.table.style.marginBottom = `${-scrollOverlap}px`;
-         }
-
-         if (this.dom.fixedTable) {
-            this.dom.fixedTable.style.marginTop = this.dom.table.style.marginTop;
-            this.dom.fixedTable.style.marginBottom = this.dom.table.style.marginBottom;
-         }
-
-         this.rowHeight = rowHeight;
-
-         let sortersChanged = widget.infinite && !shallowEquals(data.sorters, this.lastSorters);
-
-         if (data.empty && !widget.infinite) {
-            this.dom.scroller.scrollTop = 0;
-         }
-
-         if (
-            sortersChanged ||
-            data.filterParams !== this.lastScrollFilterParams ||
-            data.scrollResetParams !== this.lastScrollResetParams
-         ) {
-            this.dom.scroller.scrollTop = 0;
-            this.lastScrollFilterParams = data.filterParams;
-            this.lastScrollResetParams = data.scrollResetParams;
-            this.lastSorters = data.sorters;
-            if (widget.infinite) {
-               this.loadingStartPage = 0;
-               this.loadingEndPage = 0;
-               instance.buffer.records = data.records = [];
-               instance.buffer.totalRecordCount = 0;
-               instance.buffer.page = 1;
-               this.prevFetchRecordsState = null;
-               this.loading = false;
-            }
-         }
-
-         if (widget.scrollSelectionIntoView && !widget.buffered) {
-            let { CSS, baseClass } = widget;
-            let selectedRowSelector = `.${CSS.element(baseClass, "data")}.${CSS.state("selected")}`;
-            let firstSelectedRow = this.dom.table.querySelector(selectedRowSelector);
-            if (firstSelectedRow != this.selectedEl) {
-               firstSelectedRow && scrollElementIntoView(firstSelectedRow);
-               this.selectedEl = firstSelectedRow;
-            }
-         }
-
-         setTimeout(this.onScroll.bind(this), 0);
-
-         if (resized) instance.fixedHeaderResizeEvent.notify();
-      }
-   }
-
-   moveCursor(
-      index,
-      { focused, hover, scrollIntoView, select, selectRange, selectOptions, cellIndex, cellEdit, cancelEdit } = {},
-   ) {
-      let { widget, visibleColumns } = this.props.instance;
-      if (!widget.selectable && !widget.cellEditable) return;
-
-      let newState = {};
-
-      if (cellEdit != null && cellEdit != this.state.cellEdit) {
-         newState.cellEdit = cellEdit;
-         if (
-            cellEdit &&
-            (!visibleColumns[this.state.cursorCellIndex] || !visibleColumns[this.state.cursorCellIndex].editor)
-         )
-            newState.cellEdit = false;
-      }
-
-      if (cellIndex != null && cellIndex != this.state.cursorCellIndex) {
-         newState.cursorCellIndex = cellIndex;
-         newState.cellEdit = false;
-      }
-
-      if (widget.focused) focused = true;
-
-      if (focused != null && this.state.focused != focused) {
-         newState.focused = focused;
-         newState.cellEdit = false;
-      }
-
-      if (index != this.state.cursor) {
-         newState.cursor = index;
-         newState.cellEdit = false;
-      }
-
-      batchUpdates(() => {
-         if (select) {
-            let start = selectRange && this.state.selectionStart >= 0 ? this.state.selectionStart : index;
-            if (start < 0) start = index;
-            this.selectRange(start, index, selectOptions);
-            if (!selectRange) newState.selectionStart = index;
-         }
-
-         if (Object.keys(newState).length > 0) {
-            let prevState = this.state;
-            let wasCellEditing = prevState.focused && prevState.cellEdit;
-            let futureState = { ...this.state, ...newState };
-
-            if (!futureState.cellEdit && wasCellEditing) {
-               // If cell editing is in progress, moving the cursor may cause that the cell editor to unmount before
-               // the blur event which may cause data loss for components which do not have reactOn=change set, e.g. NumberField.
-               unfocusElement(null, false);
-               let record = this.getRecordAt(prevState.cursor);
-               if ((!this.cellEditorValid || cancelEdit) && this.cellEditUndoData)
-                  record.store.set(widget.recordName, this.cellEditUndoData);
-               else {
-                  let newData = record.store.get(widget.recordName); //record.data might be stale at this point
-                  if (widget.onCellEdited && newData != this.cellEditUndoData) {
-                     this.props.instance.invoke(
-                        "onCellEdited",
-                        {
-                           column: visibleColumns[prevState.cursorCellIndex],
-                           newData,
-                           oldData: this.cellEditUndoData,
-                           field: visibleColumns[prevState.cursorCellIndex].field,
-                        },
-                        record,
-                     );
-                     this.cellEditUndoData = newData;
-                  }
-               }
-            }
-
-            if (futureState.cellEdit && !wasCellEditing) {
-               let record = this.getRecordAt(futureState.cursor);
-               let cellEditUndoData = record.data;
-
-               if (
-                  widget.onBeforeCellEdit &&
-                  this.props.instance.invoke(
-                     "onBeforeCellEdit",
-                     {
-                        column: visibleColumns[futureState.cursorCellIndex],
-                        data: cellEditUndoData,
-                        field: visibleColumns[futureState.cursorCellIndex].field,
-                     },
-                     record,
-                  ) === false
-               )
-                  return;
-
-               this.cellEditUndoData = cellEditUndoData;
-            }
-
-            this.setState(newState, () => {
-               if (this.state.focused && !this.state.cellEdit && wasCellEditing) FocusManager.focus(this.dom.el);
-
-               if (scrollIntoView) {
-                  let record = this.getRecordAt(index);
-
-                  let item = record && this.dom.table.querySelector(`tbody[data-record-key="${record.key}"]`);
-
-                  let hscroll = false;
-                  if (item) {
-                     if (widget.cellEditable)
-                        if (this.state.cursorCellIndex >= this.props.instance.fixedColumnCount) {
-                           hscroll = true;
-                           item =
-                              item.firstChild.children[
-                                 this.state.cursorCellIndex - this.props.instance.fixedColumnCount
-                              ];
-                        } else {
-                           let fixedItem = this.dom.fixedTable.querySelector(`tbody[data-record-key="${record.key}"]`);
-                           let cell = fixedItem && fixedItem.firstChild.children[this.state.cursorCellIndex];
-                           if (cell) scrollElementIntoView(cell, false, true, 10);
-                        }
-
-                     scrollElementIntoView(item, true, hscroll, widget.cellEditable ? 10 : 0);
-                  }
-               }
-            });
-         }
-      });
-   }
-
-   showCursor(focused) {
-      let { records, isSelected } = this.props.instance;
-      let cursor = this.state.cursor;
-      if (cursor == -1) {
-         if (records) {
-            cursor = records.findIndex((x) => isSelected(x.data, x.index));
-            //if there are no selected records, find the first data record (skip group header)
-            if (cursor == -1) cursor = records.findIndex((x) => x.type == "data");
-         } else cursor = 0;
-      }
-      this.moveCursor(cursor, { focused: true, scrollIntoView: false });
-   }
-
-   onFocus() {
-      FocusManager.nudge();
-
-      //focus moved within the grid
-      if (this.state.focused) {
-         if (this.state.cellEdit && this.dom.el == getActiveElement())
-            this.moveCursor(this.state.cursor, {
-               cellEdit: false,
-            });
-         return;
-      }
-
-      let { widget } = this.props.instance;
-
-      //the cursor will be set if focus in originating from a mouse event
-      setTimeout(() => {
-         this.showCursor(true);
-      }, 0);
-
-      if (!widget.focused) {
-         if (this.dom.el) {
-            //if an inner element is focused first (autoFocus), this.dom.el might be undefined
-            oneFocusOut(this, this.dom.el, () => {
-               this.moveCursor(-1, { focused: false });
-            });
-         }
-      }
-
-      this.setState({
-         focused: true,
-      });
-   }
-
-   onBlur() {
-      FocusManager.nudge();
-   }
-
-   selectRange(from, to, options) {
-      let { instance, data } = this.props;
-      let { records, widget } = instance;
-
-      if (from > to) {
-         let tmp = from;
-         from = to;
-         to = tmp;
-      }
-
-      options = {
-         ...options,
-         range: from < to,
-      };
-
-      let selection = [],
-         indexes = [];
-
-      for (let cursor = from; cursor <= to; cursor++) {
-         let record;
-         if (records) record = records[cursor];
-         else {
-            let offset = widget.infinite ? data.offset : 0;
-            let r = data.records[cursor - offset];
-            if (r) record = widget.mapRecord(null, instance, r, cursor - offset);
-         }
-         if (record && record.type == "data") {
-            if (instance.isRecordSelectable && !instance.isRecordSelectable(record.data, options)) continue;
-            selection.push(record.data);
-            indexes.push(record.index);
-         }
-      }
-
-      widget.selection.selectMultiple(instance.store, selection, indexes, options);
-   }
-
-   getDataRecordAt(index) {
-      let { records } = this.props.instance;
-      if (!records) return this.getRecordAt(index);
-      let dataRecords = records.filter((r) => r.type == "data");
-      return dataRecords[index];
-   }
-
-   getRecordAt(cursor) {
-      let { instance, data } = this.props;
-      let { records, widget } = instance;
-
-      if (records) return records[cursor];
-
-      let offset = widget.infinite ? data.offset : 0;
-      let r = data.records[cursor - offset];
-      if (r) return widget.mapRecord(null, instance, r, cursor - offset);
-
-      return null;
-   }
-
-   getRecordInstanceAt(cursor) {
-      let record = this.getRecordAt(cursor);
-      if (!record) return null;
-      let { instance } = this.props;
-      if (instance.recordInstanceCache)
-         return instance.recordInstanceCache.getChild(instance.row, record.store, record.key);
-
-      //different signature
-      return instance.getChild(null, instance.row, record.key, record.store);
-   }
-
-   handleKeyDown(e) {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-
-      if (widget.onKeyDown && instance.invoke("onKeyDown", e, instance) === false) return;
-
-      let recordInstance = this.getRecordInstanceAt(this.state.cursor);
-      if (recordInstance && widget.onRowKeyDown && instance.invoke("onRowKeyDown", e, recordInstance) === false) return;
-
-      if (widget.onCellKeyDown && widget.cellEditable && this.state.cursorCellIndex != -1) {
-         if (
-            instance.invoke("onCellKeyDown", e, instance, {
-               cellIndex: this.state.cursorCellIndex,
-               record: recordInstance,
-            }) === false
-         )
-            return;
-      }
-
-      switch (e.keyCode) {
-         case KeyCode.enter:
-            this.moveCursor(this.state.cursor, {
-               select: true,
-               selectOptions: {
-                  toggle: e.ctrlKey && !e.shiftKey,
-                  add: e.ctrlKey && e.shiftKey,
-               },
-               selectRange: e.shiftKey,
-               cellEdit: widget.cellEditable && !this.state.cellEdit,
-               focused: true,
-            });
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-
-         case KeyCode.esc:
-            if (this.state.cellEdit) {
-               this.moveCursor(this.state.cursor, {
-                  cellEdit: false,
-                  focused: true,
-                  cancelEdit: true,
-               });
-               e.stopPropagation();
-               e.preventDefault();
-            }
-            break;
-
-         case KeyCode.tab:
-            if (widget.cellEditable) {
-               e.stopPropagation();
-               e.preventDefault();
-               let direction = e.shiftKey ? -1 : +1;
-               let cursor = this.state.cursor;
-               let cellIndex = (this.state.cursorCellIndex + direction) % instance.row.line1.columns.length;
-               if (cellIndex == -1) {
-                  cellIndex += instance.row.line1.columns.length;
-                  cursor--;
-               } else if (cellIndex == 0 && direction > 0) cursor++;
-               for (; ; cursor += direction) {
-                  let record = this.getRecordAt(cursor);
-                  if (!record) break;
-                  if (record.type != "data") continue;
-                  this.moveCursor(cursor, {
-                     focused: true,
-                     cellIndex,
-                     scrollIntoView: true,
-                     cellEdit: false,
-                  });
-                  break;
-               }
-            }
-            break;
-
-         case KeyCode.down:
-            for (let cursor = this.state.cursor + 1; ; cursor++) {
-               let record = this.getRecordAt(cursor);
-               if (!record) break;
-               if (record.type != "data") continue;
-               this.moveCursor(cursor, {
-                  focused: true,
-                  scrollIntoView: true,
-                  select: e.shiftKey,
-                  selectRange: e.shiftKey,
-               });
-               break;
-            }
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-
-         case KeyCode.up:
-            for (let cursor = this.state.cursor - 1; cursor >= 0; cursor--) {
-               let record = this.getRecordAt(cursor);
-               if (!record) break;
-               if (record.type != "data") continue;
-               this.moveCursor(cursor, {
-                  focused: true,
-                  scrollIntoView: true,
-                  select: e.shiftKey,
-                  selectRange: e.shiftKey,
-               });
-               break;
-            }
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-
-         case KeyCode.right:
-            if (widget.cellEditable) {
-               if (this.state.cursorCellIndex + 1 < instance.row.line1.columns.length) {
-                  this.moveCursor(this.state.cursor, {
-                     focused: true,
-                     cellIndex: this.state.cursorCellIndex + 1,
-                     scrollIntoView: true,
-                  });
-               }
-               e.stopPropagation();
-               e.preventDefault();
-            }
-            break;
-
-         case KeyCode.left:
-            if (widget.cellEditable) {
-               if (this.state.cursorCellIndex > 0) {
-                  this.moveCursor(this.state.cursor, {
-                     focused: true,
-                     cellIndex: this.state.cursorCellIndex - 1,
-                     scrollIntoView: true,
-                  });
-               }
-               e.stopPropagation();
-               e.preventDefault();
-            }
-            break;
-
-         case KeyCode.a:
-            if (!e.ctrlKey || !widget.selection.multiple) return;
-
-            if (e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA") return;
-
-            this.selectRange(0, data.totalRecordCount);
-
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-      }
-   }
-
-   beginDragDrop(e, record) {
-      let { instance, data } = this.props;
-      let { widget, store } = instance;
-      let { isRecordDraggable } = instance;
-
-      if (isRecordDraggable && !isRecordDraggable(record.data)) return;
-
-      //get a fresh isSelected delegate
-      let isSelected = widget.selection.getIsSelectedDelegate(store);
-
-      let selected = [];
-
-      let add = (rec, data, index, force) => {
-         if (!data || !(force || isSelected(data, index)) || (isRecordDraggable && !isRecordDraggable(data))) return;
-         let mappedRecord = rec ? { ...rec } : widget.mapRecord(null, instance, data, index);
-         let row = (mappedRecord.row = instance.getDetachedChild(
-            instance.row,
-            "DD:" + mappedRecord.key,
-            mappedRecord.store,
-         ));
-         row.selected = true;
-         selected.push(mappedRecord);
-      };
-
-      if (!record.selected) {
-         if (instance.records) instance.records.forEach((r) => add(r, r.data, r.index));
-         else this.getRecordsSlice(0, data.totalRecordCount).forEach((r, index) => add(null, r, index));
-      }
-
-      if (selected.length == 0) add(record, record.data, record.index, true);
-
-      let renderRow = this.createRowRenderer(false);
-
-      let contents = selected.map((record, i) => ({
-         type: StaticText,
-         text: renderRow(record, i, true, false),
-      }));
-
-      initiateDragDrop(
-         e,
-         {
-            sourceEl: closest(e.currentTarget, (a) => a.tagName == "TBODY"),
-            source: {
-               data: data.dragSource.data,
-               store: store,
-               record: record,
-               records: selected,
-            },
-            clone: {
-               store: record.store,
-               matchCursorOffset: true,
-               matchWidth: true,
-               widget: (
-                  <cx>
-                     <div className={data.classNames}>
-                        <table>{contents}</table>
-                     </div>
-                  </cx>
-               ),
-            },
-         },
-         () => {
-            this.setState({
-               dragged: false,
-            });
-         },
-      );
-
-      this.setState({
-         dragged: record,
-      });
-   }
-
-   onFileDragEnter(ev) {
-      if (!this.props.instance.widget.allowsFileDrops) return;
-      let event = getDragDropEvent(ev);
-      var test = this.onDropTest(event);
-      if (test) {
-         ev.preventDefault();
-         ev.stopPropagation();
-         this.onDragStart(ev);
-      }
-   }
-   onFileDragOver(ev) {
-      if (!this.props.instance.widget.allowsFileDrops) return;
-      let event = getDragDropEvent(ev);
-      var test = this.onDropTest(event);
-      if (test) {
-         ev.preventDefault();
-         ev.stopPropagation();
-         this.onDragOver(event, { test });
-      }
-   }
-   onFileDragLeave(ev) {
-      if (!this.props.instance.widget.allowsFileDrops) return;
-      if (ev.target != this.dom.el) {
-         //The dragleave event fires when the cursor leave any of the child elements.
-         //We need to be sure that the cursor left the top element too.
-         let el = document.elementFromPoint(ev.clientX, ev.clientY);
-         if (el == this.dom.el || this.dom.el.contains(el)) return;
-      }
-      let event = getDragDropEvent(ev);
-      var test = this.onDropTest(event);
-      if (test) {
-         this.onDragLeave(event);
-      }
-   }
-   onFileDrop(ev) {
-      if (!this.props.instance.widget.allowsFileDrops) return;
-      let event = getDragDropEvent(ev);
-      var test = this.onDropTest(event);
-      if (test) {
-         ev.preventDefault();
-         ev.stopPropagation();
-         this.onDrop(event);
-      }
-   }
-}
-
-class GridColumnHeaderLine extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         showHeader: undefined,
-      });
-   }
-
-   init() {
-      this.items = Widget.create(GridColumnHeader, this.columns || []);
-      this.visible = this.showHeader;
-      this.style = this.headerStyle;
-      this.className = this.headerClass;
-      this.class = null;
-      super.init();
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      return (
-         <tr key={key} className={data.classNames} style={data.style}>
-            {this.renderChildren(context, instance)}
-         </tr>
-      );
-   }
-}
-
-GridColumnHeaderLine.prototype.isPureContainer = false;
-GridColumnHeaderLine.prototype.styled = true;
-GridColumnHeaderLine.prototype.showHeader = true;
-GridColumnHeaderLine.autoInit = true;
-
-class GridColumnHeader extends Widget {
-   declareData() {
-      return super.declareData(...arguments, {
-         format: undefined,
-         width: undefined,
-         defaultWidth: undefined,
-         fixed: undefined,
-      });
-   }
-
-   init() {
-      delete this.style;
-      delete this.className;
-      delete this.class;
-
-      if (this.header) this.header1 = this.header;
-
-      if (this.header1 || this.resizable || this.width || this.defaultWidth || this.sortable || this.draggable) {
-         if (!isObject(this.header1))
-            this.header1 = {
-               text: this.header1 || "",
-            };
-
-         if (this.resizable) this.header1.resizable = this.resizable;
-
-         if (this.width) this.header1.width = this.width;
-
-         if (this.defaultWidth) this.header1.defaultWidth = this.defaultWidth;
-
-         if (this.draggable) this.header1.draggable = this.draggable;
-      }
-
-      if (this.header2 && isSelector(this.header2))
-         this.header2 = {
-            text: this.header2,
-         };
-
-      if (this.header3 && isSelector(this.header3))
-         this.header3 = {
-            text: this.header3,
-         };
-
-      if (!this.aggregateField && this.field) this.aggregateField = this.field;
-
-      if (!this.aggregateAlias) this.aggregateAlias = this.aggregateField;
-      if (this.aggregateAlias) this.aggregateAliasGetter = Binding.get(this.aggregateAlias).value;
-
-      if (this.footer && isSelector(this.footer))
-         this.footer = {
-            value: this.footer,
-            pad: this.pad,
-            colSpan: this.colSpan,
-         };
-
-      if (this.footer) {
-         this.footer.value = getSelector(this.footer.value);
-         this.footer.class = getSelector(this.footer.class);
-         this.footer.style = getSelector(this.footer.style);
-         this.footer.format = getSelector(this.footer.format);
-      }
-
-      if (this.caption && isSelector(this.caption))
-         this.caption = {
-            value: this.caption,
-            pad: this.pad,
-            format: this.format,
-         };
-
-      if (this.caption) {
-         let children = this.caption.children || this.caption.items;
-         if (children) {
-            delete this.caption.items;
-            this.caption.children = Widget.create(children);
-         } else {
-            this.caption.value = getSelector(this.caption.value);
-            this.caption.format = getSelector(this.caption.format);
-         }
-         this.caption.class = getSelector(this.caption.class);
-         this.caption.style = getSelector(this.caption.style);
-      }
-
-      super.init();
-   }
-
-   initComponents() {
-      return super.initComponents({
-         header1: this.header1 && GridColumnHeaderCell.create(this.header1),
-         header2: this.header2 && GridColumnHeaderCell.create(this.header2),
-         header3: this.header3 && GridColumnHeaderCell.create(this.header3),
-      });
-   }
-
-   render() {
-      return null;
-   }
-}
-
-GridColumnHeader.autoInit = true;
-
-class GridColumnHeaderCell extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         text: undefined,
-         colSpan: undefined,
-         rowSpan: undefined,
-         width: undefined,
-         defaultWidth: undefined,
-         resizable: undefined,
-         fixed: undefined,
-         draggable: undefined,
-      });
-   }
-
-   initComponents() {
-      return super.initComponents(...arguments, {
-         tool: this.tool && Widget.create(this.tool),
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      return data.text || super.render(context, instance, key);
-   }
-}
-
-GridColumnHeaderCell.prototype.colSpan = 1;
-GridColumnHeaderCell.prototype.rowSpan = 1;
-GridColumnHeaderCell.prototype.allowSorting = true;
-GridColumnHeaderCell.prototype.styled = true;
-GridColumnHeaderCell.prototype.fixed = false;
-
-// function initGrouping(grouping) {
-//    grouping.forEach((g) => {
-//       if (g.caption) g.caption = getSelector(g.caption);
-//    });
-// }
-
-function copyCellSize(srcTableBody, dstTableBody, applyHeight = true) {
-   if (!srcTableBody || !dstTableBody) return false;
-
-   let changed = false;
-   for (let r = 0; r < dstTableBody.children.length && r < srcTableBody.children.length; r++) {
-      let sr = srcTableBody.children[r];
-      let dr = dstTableBody.children[r];
-      for (let c = 0; c < dr.children.length && c < sr.children.length; c++) {
-         let dc = dr.children[c];
-         let ws = `${sr.children[c].offsetWidth}px`;
-         if (!changed && dc.style.width != ws) changed = true;
-         dc.style.width = dc.style.minWidth = dc.style.maxWidth = ws;
-         if (applyHeight) dc.style.height = `${sr.children[c].offsetHeight}px`;
-      }
-   }
-   return changed;
-}
-
-function copyCellSizePrecise(srcTableBody, dstTableBody, applyHeight = true) {
-   if (!srcTableBody || !dstTableBody) return false;
-   let changed = false;
-   for (let r = 0; r < dstTableBody.children.length && r < srcTableBody.children.length; r++) {
-      let sr = srcTableBody.children[r];
-      let dr = dstTableBody.children[r];
-      for (let c = 0; c < dr.children.length && c < sr.children.length; c++) {
-         let dc = dr.children[c];
-         let bounds = sr.children[c].getBoundingClientRect();
-         let ws = `${bounds.width}px`;
-         if (!changed && dc.style.width != ws) changed = true;
-         dc.style.width = dc.style.minWidth = dc.style.maxWidth = ws;
-         if (applyHeight) dc.style.height = `${bounds.height}px`;
-      }
-   }
-   return changed;
-}
-
-function syncHeaderHeights(header1, header2) {
-   /**
-    * In the first pass measure all row heights.
-    * In the second pass apply those heights.
-    * Use getBoundingClientRect() for sub-pixel accuracy.
-    */
-
-   if (!header1 || !header2) return;
-   const rowCount = Math.max(header1.children.length, header2.children.length);
-   let rowHeight = [];
-   for (let r = 0; r < rowCount; r++) {
-      rowHeight.push(0);
-      let tr1 = header1.children[r];
-      let tr2 = header2.children[r];
-      if (tr1) {
-         for (let i = 0; i < tr1.children.length; i++) {
-            let td = tr1.children[i];
-            let h = td.getBoundingClientRect().height;
-            if (td.rowSpan == 1 && h > rowHeight[r]) {
-               rowHeight[r] = h;
-               break;
-            }
-         }
-      }
-      if (tr2) {
-         for (let i = 0; i < tr2.children.length; i++) {
-            let td = tr2.children[i];
-            let h = td.getBoundingClientRect().height;
-            if (td.rowSpan == 1 && h > rowHeight[r]) {
-               rowHeight[r] = h;
-               break;
-            }
-         }
-      }
-   }
-
-   for (let r = 0; r < rowCount; r++) {
-      let tr1 = header1.children[r];
-      let tr2 = header2.children[r];
-      if (tr1) {
-         for (let i = 0; i < tr1.children.length; i++) {
-            let td = tr1.children[i];
-            let h = 0;
-            for (let x = 0; x < td.rowSpan; x++) h += rowHeight[r + x];
-            td.style.height = `${h}px`;
-         }
-      }
-      if (tr2) {
-         for (let i = 0; i < tr2.children.length; i++) {
-            let td = tr2.children[i];
-            let h = 0;
-            for (let x = 0; x < td.rowSpan; x++) h += rowHeight[r + x];
-            td.style.height = `${h}px`;
-         }
-      }
-   }
-}
-
-class AvgHeight {
-   constructor() {
-      this.groups = {};
-   }
-
-   add(group, height) {
-      let g = this.groups[group];
-      if (!g) g = this.groups[group] = { sum: 0, count: 0 };
-      g.sum += height;
-      g.count++;
-   }
-
-   estimate(group) {
-      let g = this.groups[group];
-      if (!g || g.count == 0) return null;
-      return Math.round(g.sum / g.count);
-   }
-}
-
-function getDragDropEvent(ev) {
-   return {
-      event: ev,
-      cursor: getCursorPos(ev),
-      dataTransfer: ev.dataTransfer,
-      source: {
-         width: 32,
-         height: 32,
-         margin: [],
-      },
-   };
-}
diff --git a/packages/cx/src/widgets/grid/Grid.scss b/packages/cx/src/widgets/grid/Grid.scss
index 10400a4fb..5e6712b9c 100644
--- a/packages/cx/src/widgets/grid/Grid.scss
+++ b/packages/cx/src/widgets/grid/Grid.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-grid(
    $name: "grid",
    $header-state-style-map: $cx-grid-header-state-style-map,
@@ -6,10 +8,10 @@
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       box-sizing: border-box;
diff --git a/packages/cx/src/widgets/grid/Grid.tsx b/packages/cx/src/widgets/grid/Grid.tsx
new file mode 100644
index 000000000..dbc15ecf4
--- /dev/null
+++ b/packages/cx/src/widgets/grid/Grid.tsx
@@ -0,0 +1,4243 @@
+/** @jsxImportSource react */
+import { View } from "../../data";
+import { Binding } from "../../data/Binding";
+import { getAccessor } from "../../data/getAccessor";
+import { getSelector } from "../../data/getSelector";
+import { isSelector } from "../../data/isSelector";
+import { ArrayAdapter } from "../../ui/adapter/ArrayAdapter";
+import { DataAdapter, DataAdapterRecord } from "../../ui/adapter/DataAdapter";
+import { GroupAdapter } from "../../ui/adapter/GroupAdapter";
+import { batchUpdates } from "../../ui/batchUpdates";
+import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { Cx } from "../../ui/Cx";
+import { FocusManager, offFocusOut, oneFocusOut, unfocusElement } from "../../ui/FocusManager";
+import { Format } from "../../ui/Format";
+import { Instance, InstanceCache } from "../../ui/Instance";
+import { Localization } from "../../ui/Localization";
+import {
+   BooleanProp,
+   ClassProp,
+   CollatorOptions,
+   Config,
+   DataRecord,
+   NumberProp,
+   Prop,
+   RecordAlias,
+   SortDirection,
+   SortersProp,
+   StringProp,
+   StructuredProp,
+   StyleProp,
+   UnknownProp,
+} from "../../ui/Prop";
+import { PureContainer, PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { Selection, SimpleSelection } from "../../ui/selection/Selection";
+import type { KeySelection } from "../../ui/selection/KeySelection";
+import type { PropertySelection } from "../../ui/selection/PropertySelection";
+import { StaticText } from "../../ui/StaticText";
+import { getContent, VDOM, Widget, WidgetConfig } from "../../ui/Widget";
+import { Console } from "../../util/Console";
+import { debounce } from "../../util/debounce";
+import { closest, findFirstChild } from "../../util/DOM";
+import { findScrollableParent } from "../../util/findScrollableParent";
+import { getActiveElement } from "../../util/getActiveElement";
+import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isArray } from "../../util/isArray";
+import { isDefined } from "../../util/isDefined";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { isNumber } from "../../util/isNumber";
+import { isObject } from "../../util/isObject";
+import { isString } from "../../util/isString";
+import { isTextInputElement } from "../../util/isTextInputElement";
+import { KeyCode } from "../../util/KeyCode";
+import { parseStyle } from "../../util/parseStyle";
+import { scrollElementIntoView } from "../../util/scrollElementIntoView";
+import { shallowEquals } from "../../util/shallowEquals";
+import { SubscriberList } from "../../util/SubscriberList";
+import {
+   ddDetect,
+   ddMouseDown,
+   DragDropOperationContext,
+   DragEvent,
+   initiateDragDrop,
+   registerDropZone,
+} from "../drag-drop/ops";
+import { HtmlElement } from "../HtmlElement";
+import DropDownIcon from "../icons/sort-asc";
+import { captureMouse2, getCursorPos } from "../overlay/captureMouse";
+import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
+import { createGridCellEditor } from "./createGridCellEditor";
+import { GridRow, GridRowComponent, GridRowConfig, GridRowInstance } from "./GridRow";
+import { Create, CreateConfig } from "../../util";
+import type { TreeAdapter } from "../../ui/adapter/TreeAdapter";
+export { GridRowConfig };
+
+export type GridFetchRecordsResult<T> = T[] | { records: T[]; lastPage?: boolean; totalRecordCount?: number };
+
+export interface MappedGridRecord<T = any> extends DataAdapterRecord<T> {
+   row?: GridRowInstance;
+   vdom?: any;
+   fixedVdom?: any;
+   grouping?: any;
+   level?: number;
+   group?: any;
+}
+
+export interface GridDragEvent<T> extends DragEvent {
+   target: {
+      recordBefore?: MappedGridRecord<T>;
+      recordAfter?: MappedGridRecord<T>;
+      insertionIndex: number;
+      totalRecordCount: number;
+      dropNextToTheRowAbove?: boolean | null;
+   };
+}
+
+export interface GridRowDragEvent<T> extends DragEvent {
+   target: {
+      record: MappedGridRecord<T>;
+      index: number;
+   };
+}
+
+export interface GridColumnDropEvent extends DragEvent {
+   target: {
+      grid: any;
+      instance: Instance;
+      index: number;
+   };
+}
+
+interface GridDropOperationContext extends DragDropOperationContext {
+   test: {
+      grid: any;
+      row: any;
+      column: any;
+   };
+}
+
+interface GridMoveCursorOptions {
+   focused?: boolean;
+   hover?: any;
+   scrollIntoView?: boolean;
+   select?: boolean;
+   selectRange?: boolean;
+   selectOptions?: any;
+   cellIndex?: number;
+   cellEdit?: boolean;
+   cancelEdit?: boolean;
+}
+
+export interface GridGroupingKey {
+   [key: string]:
+      | Prop<any>
+      | {
+           value: Prop<any>;
+           direction: SortDirection;
+        };
+}
+
+interface GroupingResult<T> {
+   key: any;
+   aggregates: any;
+   name: string;
+   indexes: number[];
+   records: MappedGridRecord<T>[];
+}
+
+export type GridColumnAlignment = "left" | "right" | "center";
+
+export interface GridGroupingConfig<T> {
+   key: GridGroupingKey;
+   aggregates?: StructuredProp;
+   showCaption?: boolean;
+   showFooter?: boolean;
+   showHeader?: boolean;
+   caption?: StringProp;
+   name?: StringProp;
+   text?: StringProp;
+   comparer?: (a: GroupingResult<T>, b: GroupingResult<T>) => number;
+}
+
+export interface GridColumnHeaderConfig {
+   text?: StringProp;
+   colSpan?: NumberProp;
+   rowSpan?: NumberProp;
+   align?: GridColumnAlignment;
+   allowSorting?: boolean;
+   items?: React.ReactNode;
+   children?: React.ReactNode;
+   tool?: React.ReactNode;
+   style?: StyleProp;
+   class?: ClassProp;
+   className?: ClassProp;
+   tooltip?: StringProp | StructuredProp;
+   defaultWidth?: NumberProp;
+   width?: NumberProp;
+   resizable?: boolean;
+}
+
+export interface GridColumnFooterConfig {
+   value?: Prop<any>;
+   format?: StringProp;
+   style?: StyleProp;
+   class?: StyleProp;
+   expand?: boolean;
+}
+
+export interface GridColumnCaptionConfig {
+   value?: Prop<any>;
+   format?: StringProp;
+   style?: StyleProp;
+   class?: StyleProp;
+   children?: React.ReactNode;
+   items?: React.ReactNode;
+   expand?: boolean;
+}
+
+export interface GridColumnConfig {
+   align?: GridColumnAlignment;
+   field?: string;
+   format?: StringProp;
+   header?: StringProp | GridColumnHeaderConfig;
+   header1?: StringProp | GridColumnHeaderConfig;
+   header2?: StringProp | GridColumnHeaderConfig;
+   header3?: StringProp | GridColumnHeaderConfig;
+   fixed?: BooleanProp;
+   sortable?: boolean;
+   aggregate?: "min" | "max" | "count" | "sum" | "distinct" | "avg";
+   aggregateAlias?: string;
+   aggregateField?: string;
+   aggregateValue?: UnknownProp;
+   caption?: GridColumnCaptionConfig | StringProp | false;
+   class?: ClassProp;
+   className?: ClassProp;
+   draggable?: boolean;
+   editable?: boolean;
+   editor?: React.ReactNode;
+   footer?: GridColumnFooterConfig | StringProp | false;
+   items?: React.ReactNode;
+   children?: React.ReactNode;
+   key?: string;
+   pad?: boolean;
+   sortField?: string;
+   sortValue?: Prop<any>;
+   style?: StyleProp;
+   trimWhitespace?: boolean;
+   visible?: BooleanProp;
+   if?: BooleanProp;
+   weightField?: string;
+
+   // Not in docs
+   value?: Prop<any>;
+   defaultWidth?: NumberProp;
+   width?: NumberProp;
+   resizable?: boolean;
+   comparer?: (a: any, b: any) => number;
+
+   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
+   sortOptions?: CollatorOptions;
+   colSpan?: NumberProp;
+
+   mergeCells?: Prop<null | false | "same-value" | "always">;
+   primarySortDirection?: "ASC" | "DESC";
+}
+
+export interface GridConfig<T = any> extends StyledContainerConfig {
+   /** An array of records to be displayed in the grid. */
+   records?: Prop<T[]>;
+
+   /** Set to true to add a vertical scroll and a fixed header to the grid. */
+   scrollable?: boolean;
+
+   /** A binding used to store the sorting order list. Commonly used for server-side sorting. */
+   sorters?: SortersProp;
+
+   /** A list of sorters to be prepended to the actual list of sorters. */
+   preSorters?: SortersProp;
+
+   /** A binding used to store the name of the field used for sorting grids. Available only if sorters are not used. */
+   sortField?: StringProp;
+
+   /** A binding used to store the sort direction. Available only if sorters are not used. Possible values are "ASC" and "DESC". Defaults to "ASC". */
+   sortDirection?: StringProp;
+
+   /** Default sort field. Used if neither sortField or sorters are set. */
+   defaultSortField?: string;
+
+   /** Default sort direction. */
+   defaultSortDirection?: "ASC" | "DESC";
+
+   /** Set to true to add vertical gridlines. */
+   vlines?: boolean;
+
+   /** Text to be displayed instead of an empty table. */
+   emptyText?: StringProp;
+
+   /** Drag source configuration. Define mode as 'move' or 'copy` and additional data. */
+   dragSource?: StructuredProp;
+
+   /** Drop zone configuration. Define mode as either preview or insertion. */
+   dropZone?: StructuredProp;
+
+   /** Row configuration. See grid examples. */
+   row?: GridRowConfig;
+
+   /**An array of columns. Check column configuration options in the section below. */
+   columns?: GridColumnConfig[];
+
+   /** Whenever columnParams change, columns are recalculated using the onGetColumn callback. */
+   columnParams?: StructuredProp;
+
+   /** Selection configuration. */
+   selection?:
+      | CreateConfig<typeof Selection>
+      | CreateConfig<typeof KeySelection>
+      | CreateConfig<typeof PropertySelection>
+      | CreateConfig<typeof SimpleSelection>;
+
+   /** A grouping definition, field name, or an array of grouping level definitions. */
+   grouping?: string | GridGroupingConfig<T> | (string | GridGroupingConfig<T>)[];
+
+   /** Params for grouping. Whenever params change grouping is recalculated using the onGetGrouping callback. */
+   groupingParams?: StructuredProp;
+
+   /**
+    * Determines header appearance. Supported values are plain and default. Default mode is used if some of the columns are sortable.
+    * Plain mode better suits reports and other scenarios in which users do not interact with the grid.
+    */
+   headerMode?: StringProp;
+
+   /** Set to true to add default border around the table. Automatically set if grid is scrollable. */
+   border?: BooleanProp;
+
+   /** Base CSS class to be applied to the element. Default is 'grid'. */
+   baseClass?: string;
+
+   /** A field used to get the unique identifier of the record. Setting keyField improves grid performance on sort operations as the widget is able to identify row movement inside the grid.  */
+   keyField?: string;
+
+   /** Show grid header within the group. Useful for long report-like (printable) grids. Defaults to false. */
+   showHeader?: boolean;
+
+   /** Show grid footer. Defaults to false. */
+   showFooter?: boolean;
+
+   /** Record alias. Default is $record. */
+   recordName?: RecordAlias;
+
+   /** Record alias. Default is $record. */
+   recordAlias?: RecordAlias;
+
+   /** Set to true if sorting is done remotely, on the server-side. Default value is false. */
+   remoteSort?: boolean;
+
+   /** Set to true to enable row caching. This greatly improves grid performance
+    on subsequent render operations, however, only changes on records
+    are allowed. If grid rows display any data outside records, changes on that
+    data will be ignored. */
+   cached?: boolean;
+
+   /** Render only rows visible on the screen. */
+   buffered?: boolean;
+
+   /** Specifies how many rows should be visible on the screen */
+   bufferSize?: number;
+
+   /** Specifies how many rows needs to be scrolled in order to recalculate buffer */
+   bufferStep?: number;
+
+   /** Used when rows have variable heights to improve buffered rendering by measuring and caching rendered row heights. Default value is false. */
+   measureRowHeights?: boolean;
+
+   /** Scrolls selection into the view. Default value is false. */
+   scrollSelectionIntoView?: boolean;
+
+   /**
+    * Set to true to lock column widths after the first render.
+    * This is helpful in pagination scenarios to maintain consistent looks across pages.
+    */
+   lockColumnWidths?: boolean;
+
+   lockColumnWidthsRequiredRowCount?: number;
+   focused?: boolean;
+   showBorder?: boolean;
+
+   /** Data adapter used to convert data in list of records. Used to enable grouping and tree operations. */
+   dataAdapter?:
+      | Create<typeof DataAdapter>
+      | Create<typeof ArrayAdapter>
+      | Create<typeof TreeAdapter>
+      | Create<typeof GroupAdapter>;
+
+   /** Additional CSS class to be added to each grid row. */
+   rowClass?: ClassProp;
+
+   /** Additional CSS styles to be added to each grid row. */
+   rowStyle?: StyleProp;
+
+   // drag-drop handlers
+   onDrop?: string | ((e: GridDragEvent<T>, instance: Instance) => void);
+   onDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
+   onDragStart?: string | ((e: DragEvent, instance: Instance) => void);
+   onDragEnd?: string | ((e: DragEvent, instance: Instance) => void);
+   onDragOver?: string | ((e: GridDragEvent<T>, instance: Instance) => void | boolean);
+
+   onRowDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
+   onRowDragOver?: string | ((e: GridRowDragEvent<T>, instance: Instance) => void | boolean);
+   onRowDrop?: string | ((e: GridRowDragEvent<T>, instance: Instance) => void | boolean);
+
+   onColumnDrop?: string | ((e: GridColumnDropEvent, instance: Instance) => void);
+   onColumnDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
+
+   /** Parameters that affect filtering. */
+   filterParams?: StructuredProp;
+
+   /** Callback function to be executed when a row is right-clicked.  */
+   onRowContextMenu?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
+
+   /** Enable infinite scrolling */
+   infinite?: boolean;
+
+   /** If set, clicking on the column header will loop between ASC, DESC and no sorting order, instead of ASC and DESC only. */
+   clearableSort?: boolean;
+
+   /** A callback to fetch records during infinite loading */
+   onFetchRecords?: (
+      pageInfo: {
+         page: number;
+         pageSize: number;
+         sorters?: DataRecord[];
+         sortField?: string;
+         sortDirection?: string;
+      },
+      instance?: Instance,
+   ) => GridFetchRecordsResult<T> | Promise<GridFetchRecordsResult<T>>;
+
+   /** Callback function to be executed when a row is double-clicked. */
+   onRowDoubleClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
+
+   /** Callback function to be executed on key down. Accepts instance of the currently focused record as the second argument. */
+   onRowKeyDown?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
+
+   /** Callback function to be executed when a row is clicked. */
+   onRowClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
+
+   /** Set to true to add a fixed footer at the bottom of the grid. */
+   fixedFooter?: boolean;
+
+   /** Set to true to enable cell editing. Please note that all editable columns should specify the editor field. */
+   cellEditable?: boolean;
+
+   /** A callback function which is executed before a cell editor is initialized. Return false from the callback to prevent the cell from going into the edit mode. */
+   onBeforeCellEdit?: string | ((change: GridCellBeforeEditInfo, record: DataAdapterRecord<T>) => any);
+
+   /** A callback function which is executed after a cell has been successfully edited. */
+   onCellEdited?: string | ((change: GridCellEditInfo<T>, record: DataAdapterRecord<T>) => void);
+
+   /** A callback function which is executed after a column has been resized. */
+   onColumnResize?: (data: { width: number; column: Config }, instance: Instance) => void;
+
+   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
+   sortOptions?: CollatorOptions;
+
+   /** Callback to create a function that can be used to check whether a record is selectable. */
+   onCreateIsRecordSelectable?: (
+      params: any,
+      instance: Instance,
+   ) => (record: T, options?: { range?: boolean; toggle?: boolean }) => boolean;
+
+   /** Parameters whose change will cause scroll to be reset. */
+   scrollResetParams?: StructuredProp;
+
+   /** Enable precise (sub-pixel) measurements. Useful for grids with many columns. Better behavior at small zoom factors. */
+   preciseMeasurements?: boolean;
+
+   /** A value used to identify the group of components participating in hover effect synchronization. */
+   hoverChannel?: string;
+
+   /** A value used to uniquely identify the record within the hover sync group. */
+   rowHoverId?: Prop<string | number>;
+
+   /** Set to true or false to explicitly define if grid is allowed to receive focus. */
+   focusable?: boolean;
+
+   /** Callback function to retrieve grouping data. */
+   onGetGrouping?: (params: any, instance: Instance) => GridGroupingConfig<T>[];
+
+   /** Callback function to dynamically calculate columns.  */
+   onGetColumns?: (params: any, instance: Instance) => GridColumnConfig[] | GridRowConfig;
+
+   /** Allow grid to receive drag and drop operations containing files. */
+   allowsFileDrops?: boolean;
+
+   /**
+    * Callback function to track and retrieve displayed records.
+    * Accepts new records as a first argument.
+    * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
+    */
+   onTrackMappedRecords?: string | ((records: DataAdapterRecord<T>[], instance: Instance) => void);
+
+   /** Callback to create a function that can be used to check whether a record is draggable. */
+   onCreateIsRecordDraggable?: (params: any, instance: Instance) => (record: T) => boolean;
+
+   /** Callback function to get grid component and instance references on component init. */
+   onRef?: string | ((element: any, instance: Instance) => void);
+
+   /** When enabled, groups are shown in the same order as the source records. */
+   preserveGroupOrder?: boolean;
+}
+
+export interface GridCellInfo {
+   column: any;
+   field: string;
+}
+
+export interface GridCellBeforeEditInfo extends GridCellInfo {
+   data: any;
+}
+
+export interface GridCellEditInfo<T> extends GridCellInfo {
+   oldData: T;
+   newData: T;
+}
+
+export interface GridInstance<T = any> extends Instance<Grid<T>> {
+   widget: Grid<T>;
+   isRecordSelectable?: (record: any, options?: any) => boolean;
+   visibleColumns: any[];
+   isRecordDraggable?: (record: any) => boolean;
+   row?: any;
+   fixedFooterVDOM?: any;
+   fixedColumnsFixedFooterVDOM?: any;
+   hasFixedColumns?: boolean;
+   recordInstanceCache?: any;
+   records?: MappedGridRecord<T>[];
+   isSelected: (record: any, index?: number) => boolean;
+   v: number;
+   buffer?: any;
+   dataAdapter: ArrayAdapter<T>;
+   fixedFooterIsGroupFooter?: boolean;
+   state?: any;
+   fixedColumnCount: number;
+   fixedHeaderResizeEvent?: any;
+   hoverSync?: any;
+   header?: any;
+   cached: any;
+   fixedFooterOverlap?: boolean;
+}
+
+export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance<T>> {
+   constructor(config?: GridConfig<T>) {
+      super(config);
+   }
+
+   declare records?: any;
+   declare scrollable?: boolean;
+   declare sorters?: any;
+   declare preSorters?: any;
+   declare sortField?: any;
+   declare sortDirection?: any;
+   declare defaultSortField?: string;
+   declare defaultSortDirection?: "ASC" | "DESC";
+   declare vlines?: boolean;
+   declare emptyText?: any;
+   declare dragSource?: any;
+   declare dropZone?: any;
+   declare row?: any;
+   declare columns?: any[];
+   declare columnParams?: any;
+   declare selection: any;
+   declare grouping?: string | GridGroupingConfig<any> | (string | GridGroupingConfig<any>)[];
+   declare groupingParams?: any;
+   declare headerMode?: any;
+   declare border?: any;
+   declare baseClass: string;
+   declare keyField?: string;
+   declare showHeader: boolean;
+   declare showFooter: boolean;
+   declare recordName: string;
+   declare recordAlias?: string;
+   declare indexName: string;
+   declare indexAlias?: string;
+   declare remoteSort: boolean;
+   declare cached: boolean;
+   declare buffered: boolean;
+   declare bufferSize: number;
+   declare bufferStep: number;
+   declare pageSize: number;
+   declare measureRowHeights?: boolean;
+   declare scrollSelectionIntoView: boolean;
+   declare lockColumnWidths: boolean;
+   declare lockColumnWidthsRequiredRowCount: number;
+   declare focused: boolean;
+   declare showBorder: boolean;
+   declare dataAdapter?: DataAdapter;
+   declare rowClass?: any;
+   declare rowStyle?: any;
+   declare onDrop?: any;
+   declare onDropTest?: any;
+   declare onDragStart?: any;
+   declare onDragEnd?: any;
+   declare onDragOver?: any;
+   declare onRowDropTest?: any;
+   declare onRowDragOver?: any;
+   declare onRowDrop?: any;
+   declare onColumnDrop?: any;
+   declare onColumnDropTest?: any;
+   declare filterParams?: any;
+   declare onRowContextMenu?: any;
+   declare onColumnContextMenu?: any;
+   declare onCreateFilter?: any;
+   declare infinite: boolean;
+   declare clearableSort: boolean;
+   declare onFetchRecords?: any;
+   declare onRowDoubleClick?: any;
+   declare onRowKeyDown?: any;
+   declare onKeyDown?: any;
+   declare onCellKeyDown?: any;
+   declare onRowClick?: any;
+   declare fixedFooter?: boolean;
+   declare cellEditable: boolean;
+   declare onBeforeCellEdit?: any;
+   declare onCellEdited?: any;
+   declare onColumnResize?: any;
+   declare sortOptions?: any;
+   declare onCreateIsRecordSelectable?: any;
+   declare scrollResetParams?: any;
+   declare preciseMeasurements: boolean;
+   declare hoverChannel: string;
+   declare rowHoverId?: any;
+   declare focusable: boolean | null;
+   declare onGetGrouping?: any;
+   declare onGetColumns?: any;
+   declare allowsFileDrops: boolean;
+   declare onTrackMappedRecords?: any;
+   declare onCreateIsRecordDraggable?: any;
+   declare onRef?: any;
+   declare preserveGroupOrder: boolean;
+   declare styled: boolean;
+   declare selectable?: boolean;
+   declare recordsAccessor: any;
+   declare hasResizableColumns?: boolean;
+   declare pipeKeyDown?: any;
+   declare onLoadingError?: any;
+
+   declareData(...args: any[]) {
+      let selection = this.selection.configureWidget(this);
+
+      super.declareData(
+         ...args,
+         {
+            records: undefined,
+            sorters: undefined,
+            preSorters: undefined,
+            scrollable: undefined,
+            sortField: undefined,
+            sortDirection: undefined,
+            emptyText: undefined,
+            dragSource: { structured: true },
+            dropZone: { structured: true },
+            filterParams: { structured: true },
+            groupingParams: { structured: true },
+            scrollResetParams: { structured: true },
+            page: undefined,
+            totalRecordCount: undefined,
+            tabIndex: undefined,
+            columnParams: { structured: true },
+         },
+         selection,
+      );
+   }
+
+   init() {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.indexAlias) this.indexName = this.indexAlias;
+
+      if (this.infinite) {
+         this.buffered = true;
+         this.remoteSort = true;
+      }
+
+      if (this.buffered) this.scrollable = true;
+
+      this.recordsAccessor = getAccessor(this.records);
+
+      this.selection = Selection.create(this.selection, {
+         records: this.records,
+      });
+
+      if (!this.selection.isDummy || this.onRowClick || this.onRowDoubleClick) this.selectable = true;
+      if (this.focusable == null) this.focusable = !this.selection.isDummy || this.cellEditable;
+
+      super.init();
+   }
+
+   initState(context: RenderingContext, instance: GridInstance) {
+      instance.state = {
+         colWidth: {},
+         lockedColWidth: {},
+         dimensionsVersion: 0,
+         disableDefaultSort: false,
+      };
+      instance.v = 0;
+      if (this.infinite)
+         instance.buffer = {
+            records: [],
+            totalRecordCount: 0,
+            page: 1,
+         };
+   }
+
+   applyParentStore(instance: GridInstance) {
+      super.applyParentStore(instance);
+
+      // force prepareData to execute again and propagate the store change to the records
+      if (instance.cached) delete instance.cached.rawData;
+   }
+
+   createRowTemplate(context: RenderingContext, columnParams: any, instance: GridInstance, groupingData: any) {
+      var row = this.row || {};
+      let columns = this.columns;
+      if (this.onGetColumns) {
+         let result = instance.invoke("onGetColumns", columnParams, instance);
+         if (isArray(result)) columns = result;
+         else row = result;
+      }
+
+      if (columns)
+         row.line1 = {
+            columns,
+         };
+
+      row.hasSortableColumns = false;
+      row.hasResizableColumns = false;
+      row.hasMergedCells = false;
+      row.mergedColumns = [];
+
+      let aggregates: Record<string, { value: any; weight: any; type: any }> = {};
+      let showFooter = false;
+      let lines = [];
+      for (let i = 0; i < 10; i++) {
+         let l = row["line" + i];
+         if (l) {
+            if (isArray(l.columns))
+               for (let c = 0; c < l.columns.length; c++)
+                  l.columns[c].uniqueColumnId = `l${i}-${l.columns[c].key || c}`;
+            lines.push(l);
+         }
+      }
+
+      row.header = PureContainer.create({
+         items: GridColumnHeaderLine.create(lines),
+      });
+
+      row.header.items.forEach((line: any) => {
+         line.items.forEach((c: any, index: number) => {
+            if (c.sortable) row.hasSortableColumns = true;
+
+            if (c.mergeCells) {
+               if (row.header.items.length > 1)
+                  Console.warn("Merged columns are only supported in grids in which rows have only one line of cells.");
+               else {
+                  row.hasMergedCells = true;
+                  row.mergedColumns.push({ uniqueColumnId: c.uniqueColumnId, index, mode: c.mergeCells });
+               }
+            }
+
+            if (
+               c.resizable ||
+               (c.header && c.header.resizable) ||
+               (c.header1 && c.header1.resizable) ||
+               (c.header2 && c.header2.resizable) ||
+               (c.header3 && c.header3.resizable)
+            )
+               row.hasResizableColumns = true;
+
+            if (c.aggregate && c.aggregateAlias && (c.aggregateField || isDefined(c.aggregateValue))) {
+               aggregates[c.aggregateAlias] = {
+                  value: isDefined(c.aggregateValue)
+                     ? c.aggregateValue
+                     : isDefined(c.value)
+                       ? c.value
+                       : c.aggregateField
+                         ? { bind: this.recordName + "." + c.aggregateField }
+                         : null,
+                  weight:
+                     c.weight != null
+                        ? c.weight
+                        : c.weightField && {
+                             bind: this.recordName + "." + c.weightField,
+                          },
+                  type: c.aggregate,
+               };
+            } else if (c.footer && !showFooter) {
+               showFooter = true;
+            }
+         });
+      });
+
+      //add default footer if some columns have aggregates and grouping is not defined
+      if (!groupingData && (Object.keys(aggregates).length > 0 || this.fixedFooter || showFooter))
+         groupingData = [
+            {
+               key: {},
+               showFooter: true,
+            },
+         ];
+
+      let { grouping, showHeader } = this.resolveGrouping(groupingData);
+
+      this.showHeader = showHeader;
+
+      if (this.fixedFooter && isNonEmptyArray(grouping)) {
+         grouping[0].showFooter = true;
+         if (grouping[0].key && Object.keys(grouping[0].key).length > 0)
+            Console.warn(
+               "First grouping level in grids with a fixed footer must group all data. The key field should be omitted.",
+            );
+      }
+
+      instance.dataAdapter =
+         this.dataAdapter instanceof ArrayAdapter
+            ? this.dataAdapter
+            : GroupAdapter.create(
+                 {
+                    recordsAccessor: this.recordsAccessor,
+                    keyField: this.keyField,
+                    aggregates: aggregates,
+                    recordName: this.recordName,
+                    indexName: this.indexName,
+                    sortOptions: this.sortOptions,
+                    groupings: grouping,
+                    preserveOrder: this.preserveGroupOrder,
+                 },
+                 this.dataAdapter,
+              );
+
+      instance.dataAdapter.initInstance(context, instance);
+
+      return Widget.create(GridRow, {
+         class: this.CSS.element(this.baseClass, "data"),
+         className: this.rowClass,
+         style: this.rowStyle,
+         recordName: this.recordName,
+         hoverId: this.rowHoverId,
+         ...row,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: GridInstance) {
+      let { data, state, cached, row } = instance;
+
+      let grouping = this.grouping;
+
+      if (this.onGetGrouping) {
+         if (!cached.data || cached.data.groupingParams !== data.groupingParams)
+            grouping = instance.invoke("onGetGrouping", data.groupingParams, instance);
+         else grouping = cached.grouping;
+      }
+
+      let groupingChanged = instance.cache("grouping", grouping);
+
+      if (instance.cache("columnParams", data.columnParams) || groupingChanged || !row) {
+         row = instance.row = this.createRowTemplate(context, data.columnParams, instance, grouping);
+      }
+
+      data.version = instance.v++;
+
+      if (!this.infinite) data.totalRecordCount = isArray(data.records) ? data.records.length : 0;
+      else {
+         if (isNumber(data.totalRecordCount)) instance.buffer.totalRecordCount = data.totalRecordCount;
+         else data.totalRecordCount = instance.buffer.totalRecordCount;
+
+         if (isDefined(data.records)) instance.buffer.records = data.records;
+         else data.records = instance.buffer.records;
+
+         if (isNumber(data.page)) instance.buffer.page = data.page;
+         else data.page = instance.buffer.page;
+
+         data.offset = (data.page - 1) * this.pageSize;
+      }
+
+      if (!isArray(data.records)) data.records = [];
+
+      if (state.sorters && !isDefined(this.sorters)) data.sorters = state.sorters;
+
+      let sortField = null;
+
+      if (isDefined(this.sortField) && isDefined(this.sortDirection)) {
+         let sorter = {
+            field: data.sortField,
+            direction: data.sortDirection,
+         };
+         sortField = data.sortField;
+         data.sorters = [sorter];
+      }
+
+      let skipDefaultSorting = this.clearableSort && instance.state.disableDefaultSort;
+      if (!skipDefaultSorting && !isNonEmptyArray(data.sorters) && this.defaultSortField) {
+         let sorter = {
+            field: this.defaultSortField,
+            direction: this.defaultSortDirection || "ASC",
+         };
+         sortField = this.defaultSortField;
+         data.sorters = [sorter];
+      }
+
+      if (sortField) {
+         for (let l = 1; l < 10; l++) {
+            let line = instance.row[`line${l}`];
+            let sortColumn = line && line.columns && line.columns.find((c: any) => c.field == sortField);
+            if (sortColumn) {
+               data.sorters[0].value = sortColumn.sortValue || sortColumn.value;
+               data.sorters[0].comparer = sortColumn.comparer;
+               data.sorters[0].sortOptions = sortColumn.sortOptions;
+               break;
+            }
+         }
+      }
+
+      let headerMode = this.headerMode;
+
+      if (this.headerMode == null) {
+         if (this.scrollable || row.hasSortableColumns || row.hasResizableColumns) headerMode = "default";
+         else headerMode = "plain";
+      }
+
+      let border = this.border;
+
+      if (this.showBorder || (border == null && this.scrollable)) border = true;
+
+      let dragMode = false;
+      if (data.dragSource) dragMode = data.dragSource.mode || "move";
+
+      let dropMode = data.dropZone && data.dropZone.mode;
+
+      if (this.onDrop && !dropMode) dropMode = "preview";
+
+      data.dropMode = dropMode;
+
+      data.stateMods = {
+         selectable: this.selectable,
+         "cell-editable": this.cellEditable,
+         scrollable: data.scrollable,
+         buffered: this.buffered,
+         ["header-" + headerMode]: true,
+         border: border,
+         vlines: this.vlines,
+         ["drag-" + dragMode]: dragMode,
+         ["drop-" + dropMode]: dropMode,
+         resizable: row.hasResizableColumns,
+      };
+
+      super.prepareData(context, instance);
+
+      instance.records = this.mapRecords(context, instance);
+
+      //tree adapters can have additional (child) records, filtering also affects actual record count
+      if (instance.records && !this.infinite) {
+         //apply record count after filtering
+         data.totalRecordCount = instance.records.length;
+
+         //recheck if there are any actual records
+         //when grouping is enabled group header/footer are always in
+         if (instance.records.length < 5) {
+            data.empty = true;
+            for (let i = 0; i < instance.records.length; i++)
+               if (instance.records[i].type == "data") {
+                  data.empty = false;
+                  break;
+               }
+         } else data.empty = data.totalRecordCount == 0;
+      } else data.empty = data.totalRecordCount == 0;
+
+      if (this.onCreateIsRecordSelectable) {
+         instance.isRecordSelectable = instance.invoke("onCreateIsRecordSelectable", null, instance);
+      }
+
+      if (this.onCreateIsRecordDraggable) {
+         instance.isRecordDraggable = instance.invoke("onCreateIsRecordDraggable", null, instance);
+      }
+
+      if (this.onTrackMappedRecords) {
+         instance.invoke("onTrackMappedRecords", instance.records, instance);
+      }
+   }
+
+   initInstance(context: RenderingContext, instance: GridInstance) {
+      instance.fixedHeaderResizeEvent = new SubscriberList();
+      super.initInstance(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: GridInstance) {
+      context.push("parentPositionChangeEvent", instance.fixedHeaderResizeEvent);
+
+      instance.hoverSync = context.hoverSync;
+
+      super.explore(context, instance);
+
+      instance.header = instance.getChild(context, instance.row.header, "header");
+      instance.header.scheduleExploreIfVisible(context);
+
+      let { store } = instance;
+      instance.isSelected = this.selection.getIsSelectedDelegate(store);
+
+      //do not process rows in buffered mode or cached mode if nothing has changed;
+      if (!this.buffered && (!this.cached || instance.shouldUpdate)) {
+         for (let i = 0; i < instance.records!.length; i++) {
+            let record = instance.records![i];
+            if (record.type == "data") {
+               let row = (record.row = instance.getChild(
+                  context,
+                  instance.row,
+                  record.key,
+                  record.store,
+               ) as GridRowInstance);
+               row.selected = instance.isSelected(record.data, record.index);
+               let changed = false;
+               if (row.cache("selected", row.selected)) changed = true;
+               if (row.cache("recordData", record.data)) changed = true;
+               if (this.cached && !changed && !row.childStateDirty) row.shouldUpdate = false;
+               else row.scheduleExploreIfVisible(context);
+            }
+         }
+      }
+   }
+
+   exploreCleanup(context: RenderingContext, instance: GridInstance) {
+      context.pop("parentPositionChangeEvent");
+      let fixedColumnCount = 0,
+         visibleColumns: any[] = [];
+      instance.header.children.forEach((line: any) => {
+         line.children.forEach((col: any) => {
+            if (col.data.fixed) fixedColumnCount++;
+            visibleColumns.push(col.widget);
+         });
+      });
+      instance.visibleColumns = visibleColumns;
+      instance.hasFixedColumns = fixedColumnCount > 0;
+      instance.fixedColumnCount = fixedColumnCount;
+      if (fixedColumnCount > 0) {
+         instance.data.classNames += ` ${instance.widget.CSS.state("fixed-columns")}`;
+      }
+   }
+
+   resolveGrouping(grouping: any) {
+      if (grouping) {
+         if (!isArray(grouping)) {
+            if (isString(grouping) || isObject(grouping)) grouping = [grouping];
+            else throw new Error("Dynamic grouping should be an array of grouping objects.");
+         }
+
+         grouping = grouping.map((g: any, i: any) => {
+            let group;
+            if (isString(g))
+               group = {
+                  key: {
+                     [g]: {
+                        bind: this.recordName + "." + g,
+                     },
+                  },
+                  showHeader: !this.scrollable && i == grouping.length - 1,
+                  showFooter: true,
+                  caption: { bind: `$group.${g}` },
+                  text: { bind: `${this.recordName}.${g}` },
+               };
+            else
+               group = {
+                  ...g,
+               };
+            if (group.caption) group.caption = getSelector(group.caption);
+            return group;
+         });
+      }
+
+      let showHeader = !isArray(grouping) || !grouping.some((g: any) => g.showHeader);
+
+      return { showHeader, grouping };
+   }
+
+   groupBy(groupingData: any, options?: any) {
+      let { grouping, showHeader } = this.resolveGrouping(groupingData);
+      this.grouping = grouping;
+      if (options?.autoConfigure) this.showHeader = showHeader;
+      this.update();
+   }
+
+   render(context: RenderingContext, instance: GridInstance, key: string) {
+      let { data, hasFixedColumns } = instance;
+
+      let fixedHeader =
+         data.scrollable && this.showHeader && this.renderHeader(context, instance, "header", true, false);
+
+      let fixedColumnsFixedHeader =
+         data.scrollable &&
+         this.showHeader &&
+         hasFixedColumns &&
+         this.renderHeader(context, instance, "header", true, true);
+
+      if (!this.buffered) this.renderRows(context, instance);
+
+      if (this.fixedFooter) this.renderFixedFooter(context, instance);
+
+      let header = this.showHeader && this.renderHeader(context, instance, "header", false, false);
+
+      let fixedColumnsHeader =
+         this.showHeader && hasFixedColumns && this.renderHeader(context, instance, "header", false, true);
+
+      return (
+         <GridComponent
+            key={key}
+            instance={instance}
+            data={instance.data}
+            shouldUpdate={instance.shouldUpdate}
+            header={header}
+            fixedColumnsHeader={fixedColumnsHeader}
+            fixedColumnsFixedHeader={fixedColumnsFixedHeader}
+            fixedHeader={fixedHeader}
+            fixedFooter={instance.fixedFooterVDOM}
+            fixedColumnsFixedFooter={instance.fixedColumnsFixedFooterVDOM}
+         >
+            {this.renderChildren(context, instance)}
+         </GridComponent>
+      );
+   }
+
+   renderResizer(instance: GridInstance, hdinst: any, header: any, colIndex: number, forPreviousColumn?: any) {
+      let { widget } = instance;
+
+      let { CSS, baseClass } = widget;
+
+      let hdwidget = hdinst.widget;
+
+      let resizerClassName = "col-resizer";
+      if (forPreviousColumn) resizerClassName += "-prev-col";
+
+      return (
+         <div
+            className={CSS.element(baseClass, resizerClassName)}
+            onClick={(e) => {
+               e.stopPropagation();
+            }}
+            data-unique-col-id={hdwidget.uniqueColumnId}
+            onMouseDown={(e) => {
+               if (e.buttons != 1) return;
+               let resizeOverlayEl: HTMLDivElement | null = document.createElement("div");
+
+               let gridEl = (e.target as HTMLElement).parentElement!.parentElement!.parentElement!.parentElement!
+                  .parentElement!.parentElement!;
+               let uniqueColId = (e.currentTarget as HTMLElement).dataset.uniqueColId;
+
+               // if we use fixed columns, rhs resizer of the last fixed column is within regular columns header tbody
+               let headerCell = findFirstChild(
+                  gridEl,
+                  (el) =>
+                     el.tagName == "TH" &&
+                     (el as HTMLElement).dataset &&
+                     (el as HTMLElement).dataset.uniqueColId == uniqueColId,
+               );
+
+               let initialWidth = (headerCell as HTMLElement).offsetWidth;
+               let initialPosition = getCursorPos(e);
+               resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
+               resizeOverlayEl.style.width = `${initialWidth}px`;
+               resizeOverlayEl.style.left = `${
+                  (headerCell as HTMLElement).getBoundingClientRect().left - gridEl.getBoundingClientRect().left
+               }px`;
+               gridEl.appendChild(resizeOverlayEl);
+               captureMouse2(e, {
+                  onMouseMove: (e) => {
+                     let cursor = getCursorPos(e);
+                     let width = Math.max(30, Math.round(initialWidth + cursor.clientX - initialPosition.clientX));
+                     resizeOverlayEl!.style.width = `${width}px`;
+                  },
+                  onMouseUp: (e) => {
+                     if (!resizeOverlayEl) return; //dblclick
+                     let width = resizeOverlayEl.offsetWidth;
+                     hdinst.assignedWidth = width;
+                     gridEl.removeChild(resizeOverlayEl);
+                     resizeOverlayEl = null;
+                     if (widget.onColumnResize) instance.invoke("onColumnResize", { width, column: hdwidget }, hdinst);
+                     header.set("width", width);
+                     instance.setState({
+                        dimensionsVersion: instance.state.dimensionsVersion + 1,
+                        colWidth: {
+                           ...instance.state.colWidth,
+                           [hdwidget.uniqueColumnId]: width,
+                        },
+                     });
+                  },
+                  onDblClick: () => {
+                     let table = gridEl.querySelector("table")!;
+                     let parentEl = table.parentElement!;
+                     let tableClone: HTMLTableElement = table.cloneNode(true) as HTMLTableElement;
+                     tableClone.childNodes.forEach((tbody: any) => {
+                        tbody.childNodes.forEach((tr: any) => {
+                           tr.childNodes.forEach((td: any, index: number) => {
+                              if (index == colIndex) {
+                                 td.style.maxWidth = null;
+                                 td.style.minWidth = null;
+                                 td.style.width = "auto";
+                              } else {
+                                 td.style.display = "none";
+                              }
+                           });
+                        });
+                     });
+                     tableClone.style.position = "absolute";
+                     tableClone.style.visibility = "hidden";
+                     tableClone.style.top = "0";
+                     tableClone.style.left = "0";
+                     tableClone.style.width = "auto";
+                     parentEl.appendChild(tableClone);
+                     let width = tableClone.offsetWidth;
+                     parentEl.removeChild(tableClone);
+                     header.set("width", width);
+                     instance.setState({
+                        dimensionsVersion: instance.state.dimensionsVersion + 1,
+                        colWidth: {
+                           ...instance.state.colWidth,
+                           [hdwidget.uniqueColumnId]: width,
+                        },
+                     });
+                  },
+               });
+            }}
+         />
+      );
+   }
+
+   renderHeader(context: RenderingContext, instance: GridInstance, key: any, fixed: any, fixedColumns: any) {
+      let { data, widget, header } = instance;
+
+      let { CSS, baseClass } = widget;
+
+      let headerRows: any[] = [];
+
+      if (!header) return null;
+
+      let skip: any = {};
+      let lineIndex = 0;
+
+      header.children.forEach((line: any) => {
+         let empty = [true, true, true];
+         let result: any[] = [[], [], []];
+
+         line.children.forEach((hdinst: any, colIndex: number) => {
+            let hdwidget = hdinst.widget;
+            for (let l = 0; l < 3; l++) {
+               let colKey = `${lineIndex + l}-${colIndex}`;
+
+               if (skip[colKey]) continue;
+
+               if (Boolean(hdinst.data.fixed) != fixedColumns) continue;
+
+               let header = hdinst.components[`header${l + 1}`];
+               let colSpan,
+                  rowSpan,
+                  style,
+                  cls,
+                  mods = [],
+                  content,
+                  sortIcon,
+                  tool;
+
+               let resizer = null,
+                  prevColumnResizer = null;
+
+               if (header) {
+                  empty[l] = false;
+
+                  if (header.widget.align) mods.push("aligned-" + header.widget.align);
+                  else if (hdwidget.align) mods.push("aligned-" + hdwidget.align);
+
+                  if (hdwidget.sortable && header.widget.allowSorting) {
+                     mods.push("sortable");
+                     if (data.sorters && data.sorters[0].field == (hdwidget.sortField || hdwidget.field)) {
+                        mods.push("sorted-" + data.sorters[0].direction.toLowerCase());
+                        sortIcon = <DropDownIcon className={CSS.element(baseClass, "column-sort-icon")} />;
+                     }
+                  }
+
+                  let uniqueColumnId = header.data.colSpan > 1 ? null : hdwidget.uniqueColumnId;
+
+                  style = header.data.style;
+                  let customWidth =
+                     header.data.width ||
+                     instance.state.colWidth[uniqueColumnId] ||
+                     header.data.defaultWidth ||
+                     instance.state.lockedColWidth[uniqueColumnId];
+                  if (customWidth) {
+                     if (instance.state.colWidth[uniqueColumnId] != customWidth)
+                        instance.state.colWidth[uniqueColumnId] = customWidth;
+                     let s = `${customWidth}px`;
+                     style = {
+                        ...style,
+                        width: s,
+                        minWidth: s,
+                        maxWidth: s,
+                     };
+                  }
+
+                  if (header.data.classNames) cls = header.data.classNames;
+
+                  content = header.render(context);
+
+                  if (header.components && header.components.tool) {
+                     tool = (
+                        <div className={CSS.element(baseClass, "col-header-tool")}>
+                           {getContent(header.components.tool.render(context))}
+                        </div>
+                     );
+                     mods.push("tool");
+                  }
+
+                  if (header.data.colSpan > 1 || header.data.rowSpan > 1) {
+                     colSpan = header.data.colSpan;
+                     rowSpan = header.data.rowSpan;
+
+                     for (let r = 0; r < header.data.rowSpan; r++)
+                        for (let c = 0; c < header.data.colSpan; c++)
+                           skip[`${lineIndex + l + r}-${colIndex + c}`] = true;
+                  }
+
+                  if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
+                     resizer = this.renderResizer(instance, hdinst, header, colIndex);
+                  }
+
+                  if (colIndex > 0) {
+                     let hdinstPrev = line.children[colIndex - 1];
+                     let prevLine = 3;
+                     let headerPrev;
+                     while (!headerPrev && prevLine >= 0) {
+                        headerPrev = hdinstPrev.components[`header${prevLine + 1}`];
+                        prevLine--;
+                     }
+                     if (
+                        (hdinstPrev.widget.resizable || headerPrev?.data?.resizable) &&
+                        headerPrev?.data?.colSpan < 2
+                     ) {
+                        prevColumnResizer = this.renderResizer(instance, hdinstPrev, headerPrev, colIndex - 1, true);
+                     }
+                  }
+               }
+
+               cls = CSS.element(baseClass, "col-header", mods) + (cls ? " " + cls : "");
+
+               let onContextMenu;
+
+               if (this.onColumnContextMenu)
+                  onContextMenu = (e: any) => instance.invoke("onColumnContextMenu", e, hdinst);
+
+               result[l].push(
+                  <th
+                     key={colIndex}
+                     colSpan={colSpan}
+                     rowSpan={rowSpan}
+                     className={cls}
+                     style={style}
+                     onMouseDown={ddMouseDown}
+                     onMouseMove={(e) => this.onHeaderMouseMove(e, hdwidget, hdinst, instance, l)}
+                     onMouseLeave={(e) => this.onHeaderMouseLeave(e, hdinst, l)}
+                     onClick={(e) => this.onHeaderClick(e, hdwidget, instance, l)}
+                     onContextMenu={onContextMenu}
+                     data-unique-col-id={colSpan > 1 ? null : hdwidget.uniqueColumnId}
+                  >
+                     {getContent(content)}
+                     {sortIcon}
+                     {tool}
+                     {prevColumnResizer}
+                     {resizer}
+                  </th>,
+               );
+            }
+         });
+
+         result = result.filter((_, i) => !empty[i]);
+         lineIndex += result.length;
+
+         if (result[0]) {
+            if (fixed && !fixedColumns) {
+               result[0].push(
+                  <th key="dummy" rowSpan={result.length} className={CSS.element(baseClass, "col-header")} />,
+               );
+            }
+
+            headerRows.push(...result.map((h, i) => <tr key={`${lineIndex}-${i}`}>{h}</tr>));
+         }
+      });
+
+      if (headerRows.length == 0) return null;
+
+      return (
+         <tbody key={"h" + key} className={CSS.element(baseClass, "header")}>
+            {headerRows}
+         </tbody>
+      );
+   }
+
+   onHeaderMouseMove(e: any, column: any, columnInstance: any, gridInstance: any, headerLine: any) {
+      let { baseClass, CSS } = gridInstance.widget;
+      if (columnInstance.data.fixed) return;
+      let headerInstance = columnInstance.components[`header${headerLine + 1}`];
+      if (!headerInstance) return;
+      let { store, data } = headerInstance;
+      if (headerInstance.widget?.tooltip) {
+         tooltipMouseMove(e, headerInstance, headerInstance.widget.tooltip);
+      }
+      if (data.draggable && !data.fixed && ddDetect(e) && e.buttons == 1) {
+         initiateDragDrop(
+            e,
+            {
+               sourceEl: e.currentTarget,
+               source: {
+                  type: "grid-column",
+                  store,
+                  column,
+                  columnInstance,
+                  headerInstance,
+                  gridInstance,
+                  headerLine,
+               },
+               clone: {
+                  store: store,
+                  matchCursorOffset: true,
+                  matchWidth: true,
+                  widget: () => <div className={CSS.element(baseClass, "col-header-drag-clone")}>{data.text}</div>,
+               },
+            },
+            () => {},
+         );
+      }
+   }
+
+   onHeaderMouseLeave(e: any, columnInstance: any, headerLine: any) {
+      let headerInstance = columnInstance.components[`header${headerLine + 1}`];
+      if (!headerInstance) return;
+      if (headerInstance.widget?.tooltip) {
+         tooltipMouseLeave(e, headerInstance, headerInstance.widget.tooltip);
+      }
+   }
+
+   onHeaderClick(e: any, column: any, instance: any, headerLine: any) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let { data } = instance;
+      let header = column.components[`header${headerLine + 1}`];
+
+      let field = column.sortField || column.field;
+      let value = column.sortValue || column.value;
+      let comparer = column.comparer;
+      let sortOptions = column.sortOptions;
+
+      if (header && header.allowSorting && column.sortable && (field || value || data.sortField)) {
+         let direction = column.primarySortDirection ?? "ASC";
+         if (
+            isNonEmptyArray(data.sorters) &&
+            ((!!data.sorters[0].field && data.sorters[0].field == (field || data.sortField)) ||
+               (!!value && data.sorters[0].value == value))
+         ) {
+            if (data.sorters[0].direction == "ASC" && (!this.clearableSort || direction == "ASC")) direction = "DESC";
+            else if (data.sorters[0].direction == "DESC" && (!this.clearableSort || direction == "DESC"))
+               direction = "ASC";
+            else {
+               direction = null;
+               instance.state.disableDefaultSort = true;
+            }
+         }
+
+         let sorters = direction
+            ? [
+                 {
+                    field,
+                    direction,
+                    value,
+                    comparer,
+                    sortOptions,
+                 },
+              ]
+            : null;
+
+         if (sorters == null) field = null;
+
+         instance.set("sorters", sorters);
+         instance.set("sortField", field);
+         instance.set("sortDirection", direction);
+
+         if (!this.remoteSort || this.infinite) instance.setState({ sorters });
+      }
+   }
+
+   renderGroupHeader(
+      context: RenderingContext | null,
+      instance: GridInstance,
+      g: any,
+      level: any,
+      group: any,
+      i: any,
+      store: any,
+      fixedColumns: any,
+   ) {
+      let { CSS, baseClass } = this;
+      let data = store.getData();
+      if (g.caption) {
+         let caption = g.caption(data);
+         return (
+            <tbody
+               key={`g-${level}-${group.$key}`}
+               className={CSS.element(baseClass, "group-caption", ["level-" + level])}
+               data-group-key={group.$key}
+               data-group-element={`group-caption-${level}`}
+            >
+               <tr>
+                  <td colSpan={1000}>{caption}</td>
+               </tr>
+            </tbody>
+         );
+      } else if (g.showCaption) {
+         let skip = 0;
+
+         let { header } = instance;
+
+         let lines: any[] = [];
+         header.children.forEach((line: any, lineIndex: number) => {
+            let empty = true;
+
+            let cells = line.children.map((ci: any, i: any) => {
+               if (--skip >= 0) return null;
+
+               if (Boolean(ci.data.fixed) != fixedColumns) return null;
+
+               let v,
+                  c = ci.widget,
+                  colSpan,
+                  pad,
+                  cls = "",
+                  style = null;
+               if (c.caption) {
+                  if (c.caption.children)
+                     v = <Cx widget={c.caption.children} store={store} parentInstance={instance} subscribe />;
+                  else {
+                     v = c.caption.value(data);
+                     let fmt = c.caption.format(data);
+                     if (fmt) v = Format.value(v, fmt);
+                  }
+                  pad = c.caption.pad;
+                  colSpan = c.caption.colSpan;
+                  empty = false;
+                  cls = CSS.expand(c.caption.class(data)) || "";
+                  style = parseStyle(c.caption.style(data));
+                  if (c.caption.expand) {
+                     colSpan = 1;
+                     for (
+                        let ind = i + 1;
+                        ind < line.children.length &&
+                        !line.children[ind].widget.caption &&
+                        !line.children[ind].widget.aggregate;
+                        ind++
+                     )
+                        colSpan++;
+                  }
+
+                  if (colSpan > 1) skip = colSpan - 1;
+               } else if (c.aggregate && c.aggregateAliasGetter && c.caption !== false) {
+                  empty = false;
+                  v = c.aggregateAliasGetter(group);
+                  if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
+               }
+
+               if (cls) cls += " ";
+               if (c.align) cls += CSS.state("aligned-" + c.align);
+
+               if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
+
+               return (
+                  <td key={i} className={cls} colSpan={colSpan} style={style}>
+                     {v}
+                  </td>
+               );
+            });
+
+            if (empty) return;
+
+            lines.push(<tr key={lineIndex}>{cells}</tr>);
+         });
+
+         if (lines.length == 0) return null;
+
+         return (
+            <tbody
+               key={"c" + group.$key}
+               className={CSS.element(baseClass, "group-caption", ["level-" + level])}
+               data-group-key={group.$key}
+               data-group-element={`group-caption-${level}`}
+            >
+               {lines}
+            </tbody>
+         );
+      }
+   }
+
+   renderGroupFooter(
+      context: RenderingContext | null,
+      instance: GridInstance,
+      g: any,
+      level: any,
+      group: any,
+      i: any,
+      store: any,
+      fixed: any,
+      fixedColumns: any,
+   ) {
+      let { CSS, baseClass } = this;
+      let data = store.getData();
+      let skip = 0;
+
+      let { header, state } = instance;
+      let rowStyle = {};
+
+      let lines: any[] = [];
+      header.children.forEach((line: any, lineIndex: number) => {
+         let empty = true;
+
+         let cells = line.children.map((ci: any, i: any) => {
+            if (--skip >= 0) return null;
+
+            if (Boolean(ci.data.fixed) != fixedColumns) return null;
+
+            let v,
+               c = ci.widget,
+               colSpan = 1,
+               pad,
+               cls = "",
+               style = null;
+            if (c.footer) {
+               v = c.footer.value(data);
+               let fmt = c.footer.format(data);
+               if (fmt) v = Format.value(v, fmt);
+               pad = c.footer.pad;
+               colSpan = c.footer.colSpan;
+               empty = false;
+               cls = CSS.expand(c.footer.class(data)) || "";
+               style = parseStyle(c.footer.style(data));
+               if (c.footer.expand) {
+                  colSpan = 1;
+                  for (
+                     let ind = i + 1;
+                     ind < line.children.length &&
+                     !line.children[ind].widget.footer &&
+                     !line.children[ind].widget.aggregate;
+                     ind++
+                  )
+                     colSpan++;
+               }
+
+               if (colSpan > 1) skip = colSpan - 1;
+            } else if (c.aggregate && c.aggregateAliasGetter && c.footer !== false) {
+               empty = false;
+               v = c.aggregateAliasGetter(group);
+               if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
+            }
+
+            if (cls) cls += " ";
+            if (c.align) cls += CSS.state("aligned-" + c.align);
+
+            if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
+
+            // apply column width to footers too, but only if colSpan == 1,
+            //  otherwise set 1px so that the footer is not participating in the layout
+
+            let maxWidth = 1;
+            if (colSpan == 1) maxWidth = state.colWidth[c.uniqueColumnId];
+            style = {
+               ...style,
+               maxWidth,
+            };
+
+            return (
+               <td key={i} className={cls} colSpan={colSpan} style={style}>
+                  {v}
+               </td>
+            );
+         });
+
+         if (empty) return;
+
+         if (fixed && !fixedColumns)
+            cells.push(<td key="dummy" className={CSS.element(baseClass, "fixed-footer-corner")} />);
+
+         lines.push(<tr key={lineIndex}>{cells}</tr>);
+      });
+
+      if (lines.length == 0) return null;
+
+      return (
+         <tbody
+            key={"f" + i}
+            style={rowStyle}
+            className={CSS.element(baseClass, "group-footer", ["level-" + level])}
+            data-group-key={group.$key}
+            data-group-element={`group-footer-${level}`}
+         >
+            {lines}
+         </tbody>
+      );
+   }
+
+   renderRows(context: RenderingContext, instance: GridInstance) {
+      let { records, hasFixedColumns } = instance;
+
+      if (!isArray<any>(records)) return null;
+
+      let record, g;
+
+      for (let i = 0; i < records.length; i++) {
+         record = records[i];
+         if (record.type == "data") record.vdom = record.row!.render(context);
+
+         if (record.type == "group-header") {
+            record.vdom = [];
+            record.fixedVdom = [];
+            g = record.grouping;
+            if (g.caption || g.showCaption)
+               record.vdom.push(
+                  this.renderGroupHeader(
+                     context,
+                     instance,
+                     g,
+                     record.level,
+                     record.group,
+                     record.key + "-caption",
+                     record.store,
+                     false,
+                  ),
+               );
+
+            if (hasFixedColumns)
+               record.fixedVdom.push(
+                  this.renderGroupHeader(
+                     context,
+                     instance,
+                     g,
+                     record.level,
+                     record.group,
+                     record.key + "-caption",
+                     record.store,
+                     true,
+                  ),
+               );
+
+            if (g.showHeader) {
+               record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false));
+               if (hasFixedColumns)
+                  record.fixedVdom.push(this.renderHeader(context, instance, record.key + "-header", false, true));
+            }
+         }
+
+         if (record.type == "group-footer") {
+            g = record.grouping;
+            if (g.showFooter) {
+               record.vdom = this.renderGroupFooter(
+                  context,
+                  instance,
+                  g,
+                  record.level,
+                  record.group,
+                  record.key + "-footer",
+                  record.store,
+                  false,
+                  false,
+               );
+               if (hasFixedColumns)
+                  record.fixedVdom = this.renderGroupFooter(
+                     context,
+                     instance,
+                     g,
+                     record.level,
+                     record.group,
+                     record.key + "-footer",
+                     record.store,
+                     false,
+                     true,
+                  );
+            }
+         }
+      }
+   }
+
+   renderFixedFooter(context: RenderingContext, instance: GridInstance) {
+      let { records, hasFixedColumns, data } = instance;
+
+      instance.fixedFooterVDOM = null;
+      instance.fixedColumnsFixedFooterVDOM = null;
+
+      if (data.empty || !isNonEmptyArray(records)) return;
+
+      //all type of records are allowed here because the footer can be based on pre-computed data
+      //it doesn't make sense to show the footer if the grid is empty though
+      let record = records[records.length - 1];
+
+      instance.fixedFooterOverlap = true;
+      instance.fixedFooterIsGroupFooter = record.type == "group-footer";
+
+      instance.fixedFooterVDOM = this.renderGroupFooter(
+         context,
+         instance,
+         record.grouping,
+         record.level || 1,
+         record.group || { $key: "fixed-footer" },
+         record.key + "-footer",
+         record.store,
+         true,
+         false,
+      );
+
+      if (hasFixedColumns)
+         instance.fixedColumnsFixedFooterVDOM = this.renderGroupFooter(
+            context,
+            instance,
+            record.grouping,
+            record.level,
+            record.group || { $key: "fixed-footer" },
+            record.key + "-footer",
+            record.store,
+            true,
+            true,
+         );
+   }
+
+   mapRecords(context: RenderingContext, instance: GridInstance) {
+      let { data, store, dataAdapter } = instance;
+
+      let filter = null;
+      if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
+
+      let sorters = !this.remoteSort && data.sorters;
+
+      //apply pre-sorters only if some sorting is applied
+      if (isNonEmptyArray(data.sorters) && isNonEmptyArray(data.preSorters)) {
+         sorters = [...data.preSorters, ...data.sorters];
+      }
+
+      dataAdapter.setFilter(filter);
+      dataAdapter.sort(sorters);
+
+      //if no filtering or sorting applied, let the component maps records on demand
+      if (
+         this.buffered &&
+         !this.fixedFooter &&
+         !filter &&
+         !isNonEmptyArray(sorters) &&
+         !dataAdapter.isTreeAdapter &&
+         !(instance.dataAdapter as any).groupings
+      )
+         return undefined;
+
+      return dataAdapter.getRecords(context, instance, data.records, store);
+   }
+
+   mapRecord(context: RenderingContext, instance: GridInstance, data: any, index: number) {
+      return instance.dataAdapter.mapRecord(context, instance, data, instance.store, this.recordsAccessor, index);
+   }
+}
+
+Grid.prototype.baseClass = "grid";
+Grid.prototype.showHeader = true;
+Grid.prototype.showFooter = false;
+Grid.prototype.recordName = "$record";
+Grid.prototype.indexName = "$index";
+Grid.prototype.remoteSort = false;
+Grid.prototype.lockColumnWidths = false;
+Grid.prototype.lockColumnWidthsRequiredRowCount = 3;
+Grid.prototype.focused = false;
+Grid.prototype.emptyText = false;
+Grid.prototype.showBorder = false; // show border override for material theme
+Grid.prototype.cached = false;
+Grid.prototype.buffered = false;
+Grid.prototype.bufferStep = 15;
+Grid.prototype.bufferSize = 60;
+Grid.prototype.pageSize = 100;
+Grid.prototype.infinite = false;
+Grid.prototype.styled = true;
+Grid.prototype.scrollSelectionIntoView = false;
+Grid.prototype.clearableSort = false;
+Grid.prototype.cellEditable = false;
+Grid.prototype.preciseMeasurements = false;
+Grid.prototype.hoverChannel = "default";
+Grid.prototype.focusable = null; // automatically resolved
+Grid.prototype.allowsFileDrops = false;
+Grid.prototype.preserveGroupOrder = false;
+
+Widget.alias("grid", Grid);
+Localization.registerPrototype("cx/widgets/Grid", Grid);
+
+interface GridComponentProps {
+   instance: GridInstance;
+   data: any;
+   shouldUpdate: boolean | undefined;
+   header?: any;
+   fixedColumnsHeader?: any;
+   fixedColumnsFixedHeader?: any;
+   fixedHeader?: any;
+   fixedFooter?: any;
+   fixedColumnsFixedFooter?: any;
+   children?: any;
+}
+
+interface GridComponentState {
+   cursor: number;
+   cursorCellIndex: number;
+   focused: boolean;
+   dropInsertionIndex: number | null;
+   dropNextToTheRowAbove: boolean | null;
+   start: number;
+   end: number;
+   dragged?: any;
+   cellEdit?: any;
+   dropTarget?: any;
+   dropItemHeight?: number;
+   colDropInsertionLeft?: number;
+   colDropInsertionIndex?: number;
+   selectionStart?: number;
+}
+
+class GridComponent extends VDOM.Component<GridComponentProps, GridComponentState> {
+   dom: {
+      el?: HTMLElement | null;
+      table?: HTMLElement | null;
+      scroller?: HTMLElement | null;
+      fixedScroller?: HTMLElement | null;
+      fixedTable?: HTMLElement | null;
+      fixedHeader?: HTMLElement | null;
+      fixedColumnsFixedHeader?: HTMLElement | null;
+      fixedFooter?: HTMLElement | null;
+      fixedColumnsFixedFooter?: HTMLElement | null;
+   };
+   syncBuffering: boolean = false;
+   declare start?: number;
+   declare end?: number;
+   declare loadingStartPage?: number;
+   declare loadingEndPage?: number;
+   declare heightStats?: AvgHeight;
+   declare rowHeights?: Record<string, number>;
+   declare rowHeight?: number;
+   scrollerRef: (el: HTMLElement | null) => void;
+   fixedScrollerRef: (el: HTMLElement | null) => void;
+   gridRef: (el: HTMLElement | null) => void;
+   declare cellEditorValid?: boolean;
+   declare scrollWidth: number;
+   declare loading?: boolean;
+   declare loadPageRange?: any;
+   declare prevFetchRecordsState?: any;
+   declare pending?: any;
+   offResize?: () => void;
+   unregisterDropZone?: () => void;
+   declare lastSorters?: any;
+   declare lastScrollFilterParams?: any;
+   declare lastScrollResetParams?: any;
+   declare selectedEl?: Element | null;
+   declare cellEditUndoData?: any;
+
+   constructor(props: GridComponentProps) {
+      super(props);
+      this.dom = {};
+      let { widget } = props.instance;
+
+      let end = Math.min(widget.bufferSize, props.data.totalRecordCount);
+
+      this.state = {
+         cursor: widget.focused && widget.selectable ? 0 : -1,
+         cursorCellIndex: 0,
+         focused: widget.focused,
+         dropInsertionIndex: null,
+         dropNextToTheRowAbove: null,
+         start: 0,
+         end: end,
+      };
+
+      this.syncBuffering = false;
+
+      if (widget.infinite) {
+         this.start = 0;
+         this.end = end;
+         this.loadingStartPage = 0;
+         this.loadingEndPage = 0;
+      }
+
+      this.scrollerRef = (el) => {
+         this.dom.scroller = el;
+      };
+
+      this.fixedScrollerRef = (el) => {
+         this.dom.fixedScroller = el;
+      };
+
+      this.gridRef = (el) => {
+         this.dom.el = el;
+      };
+   }
+
+   getBufferStartEnd(): { start: number; end: number } {
+      return this.syncBuffering ? { start: this.start!, end: this.end! } : this.state;
+   }
+
+   renderCellEditor(key: any, CSS: any, baseClass: any, instance: any, column: any) {
+      //add an inner div with fixed height in order to help IE absolutely position the contents inside
+      let editor = createGridCellEditor(
+         CSS.element(baseClass, "cell-editor-wrap"),
+         this.rowHeight != null && this.rowHeight > 0
+            ? {
+                 height: this.rowHeight + 1,
+              }
+            : null,
+         {
+            get: () => this.cellEditorValid ?? false,
+            set: (value: any) => {
+               this.cellEditorValid = value;
+               return true;
+            },
+         },
+         column.editor,
+      );
+      return (
+         <td key={key} className={CSS.element(baseClass, "cell-editor")}>
+            <Cx parentInstance={instance} subscribe widget={editor}></Cx>
+         </td>
+      );
+   }
+
+   createRowRenderer(cellWrap: any) {
+      let { instance, data } = this.props;
+      let { widget, isRecordSelectable, visibleColumns, isRecordDraggable, row } = instance;
+      let { CSS, baseClass } = widget;
+      let { dragSource } = data;
+      let { dragged, cursor, cursorCellIndex, cellEdit, dropInsertionIndex, dropTarget } = this.state;
+      let { colWidth, dimensionsVersion } = instance.state;
+      let { hasMergedCells } = row;
+
+      return (record: MappedGridRecord, index: number, standalone: any, fixed: any) => {
+         let { store, key, row } = record;
+         let isDragged = dragged && (row?.selected || record == dragged);
+         let mod: Record<string, any> = {
+            selected: row?.selected,
+            dragged: isDragged,
+            cursor: widget.selectable && index == cursor,
+            over: dropTarget == "row" && dropInsertionIndex === index,
+            alternate: index % 2 == 1,
+         };
+
+         if (isRecordSelectable) {
+            let selectable = isRecordSelectable(record.data, {});
+            mod["selectable"] = selectable;
+            mod["non-selectable"] = !selectable;
+         }
+
+         let draggable =
+            dragSource &&
+            !isNonEmptyArray((row as any).dragHandles) &&
+            (!isRecordDraggable || isRecordDraggable(record.data));
+         mod["draggable"] = draggable;
+         mod["non-draggable"] = !draggable;
+
+         let wrap = (children: any) => {
+            let skipCells: any = {};
+            return (
+               <GridRowComponent
+                  key={key}
+                  className={CSS.state(mod)}
+                  store={store}
+                  dragSource={dragSource}
+                  instance={row!}
+                  grid={instance}
+                  record={record}
+                  parent={this}
+                  cursorIndex={index}
+                  selected={row?.selected}
+                  isBeingDragged={dragged}
+                  isDraggedOver={mod.over}
+                  cursor={mod.cursor}
+                  cursorCellIndex={index == cursor && cursorCellIndex}
+                  cellEdit={index == cursor && cursorCellIndex != null && cellEdit}
+                  shouldUpdate={row?.shouldUpdate}
+                  dimensionsVersion={dimensionsVersion}
+                  fixed={fixed}
+                  useTrTag={hasMergedCells}
+               >
+                  {children.content.map(({ key, data, content }: any, line: any) => {
+                     let cells = content.map(
+                        ({ key, data, content, uniqueColumnId, merged, mergeRowSpan }: any, cellIndex: number) => {
+                           if (Boolean(data.fixed) !== fixed) return null;
+                           if (merged) return null;
+                           let cellected =
+                              index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
+                           let className = cellected
+                              ? CSS.expand(data.classNames, CSS.state("cellected"))
+                              : data.classNames;
+                           if (cellected && cellEdit) {
+                              let column = visibleColumns[cursorCellIndex];
+                              if (column && column.editor && data.editable)
+                                 return this.renderCellEditor(key, CSS, baseClass, row, column);
+                           }
+                           let width = colWidth[uniqueColumnId];
+                           let style = data.style;
+                           if (width) {
+                              style = {
+                                 ...style,
+                                 maxWidth: `${width}px`,
+                              };
+                           }
+
+                           if (skipCells[`${line}-${cellIndex}`]) return null;
+
+                           if (data.colSpan > 1 || data.rowSpan > 1) {
+                              for (let r = line; r < line + (data.rowSpan ?? 1); r++)
+                                 for (let c = cellIndex; c < cellIndex + (data.colSpan ?? 1); c++)
+                                    skipCells[`${r}-${c}`] = true;
+                           }
+
+                           if (cellWrap) content = cellWrap(content);
+
+                           return (
+                              <td
+                                 key={key}
+                                 className={className}
+                                 style={style}
+                                 colSpan={data.colSpan}
+                                 rowSpan={mergeRowSpan ?? data.rowSpan}
+                              >
+                                 {content}
+                              </td>
+                           );
+                        },
+                     );
+                     if (hasMergedCells) return cells;
+                     return (
+                        <tr key={key} className={data.classNames} style={data.style}>
+                           {cells}
+                        </tr>
+                     );
+                  })}
+               </GridRowComponent>
+            );
+         };
+
+         if (!standalone) return wrap(record.vdom);
+
+         return (
+            <Cx
+               key={key}
+               instance={record.row}
+               parentInstance={instance}
+               options={{ name: "grid-row" }}
+               contentFactory={(x) =>
+                  wrap({
+                     content: Array.isArray(x.children) ? x.children : x.children != null ? [x.children] : [],
+                     data: {},
+                  })
+               }
+               params={{
+                  ...mod,
+                  dimensionsVersion: dimensionsVersion,
+                  cursorIndex: index,
+                  data: record.data,
+                  cursorCellIndex: index == cursor && cursorCellIndex,
+                  cellEdit: index == cursor && cursorCellIndex != null && cellEdit,
+               }}
+            />
+         );
+      };
+   }
+
+   render() {
+      let { instance, data, fixedFooter, fixedColumnsFixedFooter } = this.props;
+      let { widget, hasFixedColumns } = instance;
+      let { CSS, baseClass } = widget;
+      let { start, end } = this.getBufferStartEnd();
+
+      let cellWrap: any = false;
+
+      if (widget.cellEditable && (widget.hasResizableColumns || hasFixedColumns)) {
+         cellWrap = (children: any) => <div className="cxe-grid-cell-clip">{children}</div>;
+      }
+
+      let children: any[] = [],
+         fixedChildren: any[] = [];
+
+      let renderRow = this.createRowRenderer(cellWrap);
+
+      let addRow = (record: any, index: number, standalone?: boolean) => {
+         children.push(renderRow(record, index, standalone, false));
+         if (hasFixedColumns) fixedChildren.push(renderRow(record, index, standalone, true));
+
+         //avoid re-rendering on cursor change
+         record.row.shouldUpdate = false;
+      };
+
+      if (widget.buffered) {
+         let context = new RenderingContext();
+         let dummyDataClass = CSS.element(baseClass, "data", { dummy: true });
+         if (!instance.recordInstanceCache) instance.recordInstanceCache = new InstanceCache(instance);
+         instance.recordInstanceCache.mark();
+         this.getRecordsSlice(start, end).forEach((r: any, i: any) => {
+            if (r == null) {
+               addRow(
+                  {
+                     key: "dummy-" + start + i,
+                     row: {
+                        data: { classNames: dummyDataClass },
+                        widget: instance.row,
+                     },
+                     vdom: {
+                        content: [
+                           {
+                              key: 0,
+                              data: {},
+                              content: [
+                                 {
+                                    key: 0,
+                                    data: {
+                                       colSpan: 1000,
+                                       style: {
+                                          height: `${this.rowHeight}px`,
+                                       },
+                                    },
+                                 },
+                              ],
+                           },
+                        ],
+                     },
+                  },
+                  start + i,
+               );
+            } else {
+               let record = instance.records
+                  ? r
+                  : widget.mapRecord(context, instance, r, widget.infinite ? start + i - data.offset : start + i);
+               let row = (record.row = instance.recordInstanceCache.getChild(instance.row, record.store, record.key));
+               instance.recordInstanceCache.addChild(row);
+               row.detached = true;
+               row.selected = instance.isSelected(record.data, record.index);
+
+               if (record.type == "data") {
+                  addRow(record, start + i, true);
+               } else if (record.type == "group-header") {
+                  let g = record.grouping;
+                  if (g.caption || g.showCaption) {
+                     children.push(
+                        widget.renderGroupHeader(
+                           null,
+                           instance,
+                           g,
+                           record.level,
+                           record.group,
+                           record.key + "-caption",
+                           record.store,
+                           false,
+                        ),
+                     );
+
+                     if (hasFixedColumns)
+                        fixedChildren.push(
+                           widget.renderGroupHeader(
+                              null,
+                              instance,
+                              g,
+                              record.level,
+                              record.group,
+                              record.key + "-caption",
+                              record.store,
+                              true,
+                           ),
+                        );
+                  }
+               } else if (record.type == "group-footer") {
+                  let g = record.grouping;
+                  if (g.showFooter && (!widget.fixedFooter || start + i != instance.records!.length - 1)) {
+                     children.push(
+                        widget.renderGroupFooter(
+                           null,
+                           instance,
+                           g,
+                           record.level,
+                           record.group,
+                           record.key + "-footer",
+                           record.store,
+                           false,
+                           false,
+                        ),
+                     );
+
+                     if (hasFixedColumns)
+                        fixedChildren.push(
+                           widget.renderGroupFooter(
+                              null,
+                              instance,
+                              g,
+                              record.level,
+                              record.group,
+                              record.key + "-footer",
+                              record.store,
+                              false,
+                              true,
+                           ),
+                        );
+                  }
+               }
+            }
+         });
+         instance.recordInstanceCache.sweep();
+      } else {
+         let { row } = instance;
+         let { hasMergedCells, mergedColumns } = row;
+         if (hasMergedCells) {
+            // merge adjacent cells with the same value in columns that are marked as merged
+            let rowSpan: Record<string, any> = {};
+            let getCellRenderInfo = (vdom: any, cellIndex: number) => vdom.content[0]?.content[cellIndex];
+            for (let index = instance.records!.length - 1; index >= 0; index--) {
+               let row = instance.records![index];
+               let prevRow = instance.records![index - 1];
+               if (row.type == "data") {
+                  let stopMerge = false;
+                  for (let mi = 0; mi < mergedColumns.length; mi++) {
+                     let mergedCol = mergedColumns[mi];
+                     let cellInfo = getCellRenderInfo(row.vdom, mergedCol.index);
+                     cellInfo.merged = false;
+                     delete cellInfo.mergeRowSpan;
+                     if (prevRow?.type == "data") {
+                        let shouldMerge = false;
+                        switch (mergedCol.mode) {
+                           case "always":
+                              shouldMerge = true;
+                              break;
+                           case "same-value":
+                              let prevCellInfo = getCellRenderInfo(prevRow.vdom, mergedCol.index);
+                              shouldMerge = !stopMerge && cellInfo.data.value === prevCellInfo.data.value;
+                              break;
+                        }
+
+                        if (shouldMerge) {
+                           cellInfo.merged = true;
+                           rowSpan[mergedCol.uniqueColumnId] = (rowSpan[mergedCol.uniqueColumnId] ?? 1) + 1;
+                        } else {
+                           if (mergedCol.mode == "same-value") stopMerge = true;
+                        }
+                     }
+                     if (!cellInfo.merged && rowSpan[mergedCol.uniqueColumnId] > 1) {
+                        cellInfo.mergeRowSpan = rowSpan[mergedCol.uniqueColumnId];
+                        rowSpan[mergedCol.uniqueColumnId] = 1;
+                     }
+                  }
+               } else rowSpan = {};
+            }
+         }
+
+         instance.records!.forEach((record, i) => {
+            if (record.type == "data") addRow(record, i, false);
+            else {
+               children.push(record.vdom);
+               if (hasFixedColumns) fixedChildren.push(record.fixedVdom);
+            }
+         });
+      }
+
+      if (this.state.dropTarget == "grid" && this.state.dropInsertionIndex != null) {
+         let dragInsertionRow = (
+            <tbody key="dropzone">
+               <tr>
+                  <td
+                     className={CSS.element(baseClass, "dropzone")}
+                     colSpan={1000}
+                     style={{
+                        height: data.dropMode == "insertion" ? 0 : this.state.dropItemHeight,
+                     }}
+                  />
+               </tr>
+            </tbody>
+         );
+
+         let dataRecordClass = CSS.element(baseClass, "data");
+
+         let isDataRecord = widget.buffered
+            ? (item: any) => item?.props?.instance?.data?.class == dataRecordClass
+            : (item: any) => item?.props?.record?.type;
+
+         let index = 0;
+         while (index < children.length && !isDataRecord(children[index])) index++;
+
+         let count = 0;
+         while (index < children.length && count < this.state.dropInsertionIndex) {
+            if (isDataRecord(children[index])) count++;
+            index++;
+         }
+
+         let savedIndexPos = index;
+
+         if (!this.state.dropNextToTheRowAbove)
+            while (index < children.length && !isDataRecord(children[index])) index++;
+
+         // do not allow insertion after the last group footer
+         if (savedIndexPos < index && index == children.length) index = savedIndexPos;
+
+         children.splice(index, 0, dragInsertionRow);
+      }
+
+      let content = [],
+         fixedColumnsContent = [];
+
+      //instance.records holds the record count after filtering
+      if (data.emptyText && data.empty) {
+         children = [
+            <tbody key="empty" className={CSS.element(baseClass, "empty-text")}>
+               <tr>
+                  <td colSpan={1000}>{data.emptyText}</td>
+               </tr>
+            </tbody>,
+         ];
+      } else if (widget.fixedFooter && (widget.buffered || !instance.fixedFooterIsGroupFooter)) {
+         //add fixed footer content for buffered grids
+         if (fixedFooter || fixedColumnsFixedFooter) {
+            children.push(fixedFooter);
+            if (hasFixedColumns) fixedChildren.push(fixedColumnsFixedFooter);
+         }
+      }
+
+      let shouldRenderFixedFooter = widget.scrollable && (fixedFooter || fixedColumnsFixedFooter);
+
+      if (hasFixedColumns) {
+         fixedColumnsContent.push(
+            <div
+               key="fixedscroller"
+               ref={this.fixedScrollerRef}
+               className={CSS.element(baseClass, "fixed-scroll-area", {
+                  "fixed-header": !!this.props.header,
+                  "fixed-footer": shouldRenderFixedFooter,
+               })}
+            >
+               <div className={CSS.element(baseClass, "fixed-table-wrapper")}>
+                  <table
+                     ref={(el) => {
+                        this.dom.fixedTable = el;
+                     }}
+                  >
+                     {this.props.fixedColumnsHeader}
+                     {fixedChildren}
+                  </table>
+               </div>
+            </div>,
+         );
+      }
+
+      content.push(
+         <div
+            key="scroller"
+            ref={this.scrollerRef}
+            onScroll={this.onScroll.bind(this)}
+            className={CSS.element(baseClass, "scroll-area", {
+               "fixed-header": !!this.props.header,
+               "fixed-footer": shouldRenderFixedFooter,
+            })}
+         >
+            <div className={CSS.element(baseClass, "table-wrapper")}>
+               <table
+                  ref={(el) => {
+                     this.dom.table = el;
+                     if (this.props.instance.widget.onRef) this.props.instance.invoke("onRef", el, this.props.instance);
+                  }}
+               >
+                  {this.props.header}
+                  {children}
+               </table>
+            </div>
+         </div>,
+      );
+
+      if (this.props.fixedHeader)
+         content.push(
+            <div
+               key="fh"
+               ref={(el) => {
+                  this.dom.fixedHeader = el;
+               }}
+               className={CSS.element(baseClass, "fixed-header")}
+               style={{
+                  display: this.scrollWidth > 0 ? "block" : "none",
+               }}
+            >
+               <table>{this.props.fixedHeader}</table>
+            </div>,
+         );
+
+      if (this.props.fixedColumnsFixedHeader)
+         fixedColumnsContent.push(
+            <div
+               key="fcfh"
+               ref={(el) => {
+                  this.dom.fixedColumnsFixedHeader = el;
+               }}
+               className={CSS.element(baseClass, "fixed-fixed-header")}
+               style={{
+                  display: this.scrollWidth > 0 ? "block" : "none",
+               }}
+            >
+               <table>{this.props.fixedColumnsFixedHeader}</table>
+            </div>,
+         );
+
+      if (shouldRenderFixedFooter) {
+         content.push(
+            <div
+               key="ff"
+               ref={(el) => {
+                  this.dom.fixedFooter = el;
+               }}
+               className={CSS.element(baseClass, "fixed-footer")}
+            >
+               <table>{fixedFooter}</table>
+            </div>,
+         );
+
+         if (hasFixedColumns)
+            fixedColumnsContent.push(
+               <div
+                  key="fcff"
+                  ref={(el) => {
+                     this.dom.fixedColumnsFixedFooter = el;
+                  }}
+                  className={CSS.element(baseClass, "fixed-fixed-footer")}
+               >
+                  <table>{fixedColumnsFixedFooter}</table>
+               </div>,
+            );
+      }
+
+      let columnInsertionMarker = null;
+      if (this.state.dropTarget == "column") {
+         columnInsertionMarker = (
+            <div
+               className={CSS.element(baseClass, "col-insertion-marker")}
+               style={{
+                  left: this.state.colDropInsertionLeft,
+               }}
+            />
+         );
+      }
+
+      return (
+         <div
+            className={data.classNames}
+            style={{ ...data.style, counterReset: `cx-row-number ${start}` }}
+            tabIndex={widget.focusable ? data.tabIndex || 0 : null}
+            ref={this.gridRef}
+            onKeyDown={this.handleKeyDown.bind(this)}
+            onFocus={this.onFocus.bind(this)}
+            onBlur={this.onBlur.bind(this)}
+            onDragEnter={this.onFileDragEnter.bind(this)}
+            onDragOver={this.onFileDragOver.bind(this)}
+            onDragLeave={this.onFileDragLeave.bind(this)}
+            onDrop={this.onFileDrop.bind(this)}
+         >
+            {fixedColumnsContent}
+            {content}
+            {columnInsertionMarker}
+            {this.props.children}
+         </div>
+      );
+   }
+
+   getRecordsSlice(start: number, end: number): MappedGridRecord<any>[] {
+      let { data, instance } = this.props;
+      let { widget } = instance;
+      if (!widget.infinite) {
+         let source = instance.records || data.records;
+         return source.slice(start, end);
+      }
+
+      let { offset, records } = data;
+      let result = [];
+      for (let i = start; i < Math.min(end, data.totalRecordCount); i++) {
+         if (i >= offset && i < offset + records.length) result.push(records[i - offset]);
+         else result.push(null);
+      }
+
+      return result;
+   }
+
+   ensureData(visibleStart: number, visibleEnd: number) {
+      if (this.loading) return;
+
+      let { instance } = this.props;
+      let { widget } = instance;
+      let { pageSize } = widget;
+
+      let startPage = Math.trunc(visibleStart / pageSize) + 1,
+         endPage = Math.trunc((visibleEnd - 1) / pageSize) + 1;
+
+      //debouncing restricts excessive page loading on fast scrolling as rendering data is
+      //useless because visible region is scrolled away before data appears
+      //the user should spent some time on the page before loading it
+
+      if (!this.loadPageRange)
+         this.loadPageRange = debounce((startPage, endPage) => {
+            let { data } = this.props;
+            let { records, offset } = data;
+            let promises = [];
+
+            for (let page = startPage; page <= endPage; page++) {
+               let s = (page - 1) * pageSize,
+                  e = s + pageSize;
+               if (s >= offset && e <= offset + records.length) {
+                  promises.push(Promise.resolve(records.slice(s - offset, e - offset)));
+               } else {
+                  let result = instance.invoke(
+                     "onFetchRecords",
+                     {
+                        page,
+                        pageSize,
+                        sorters: data.sorters,
+                        sortField: data.sortField,
+                        sortDirection: data.sortDirection,
+                        filterParams: data.filterParams,
+                        state: this.prevFetchRecordsState,
+                     },
+                     instance,
+                  );
+                  promises.push(Promise.resolve(result));
+               }
+            }
+
+            this.loading = true;
+
+            Promise.all(promises)
+               .then((pageRecords) => {
+                  this.loading = false;
+                  let records: any[] = [];
+                  let totalRecordCount: number | undefined;
+                  let lastPage: boolean | undefined;
+
+                  pageRecords.forEach((page) => {
+                     if (Array.isArray(page)) {
+                        records.push(...page);
+                     } else {
+                        if (!Array.isArray(page.records))
+                           throw new Error(
+                              "onFetchRecords should return an array of records or an object with results inside records property.",
+                           );
+                        totalRecordCount = page.totalRecordCount;
+                        lastPage = page.lastPage;
+                        this.prevFetchRecordsState = page.state;
+                        records.push(...page.records);
+                     }
+                  });
+
+                  let { data } = this.props;
+
+                  if (!isNumber(totalRecordCount)) {
+                     totalRecordCount = (startPage - 1) * pageSize + records.length;
+                     if (!lastPage && records.length == (endPage - startPage + 1) * pageSize) totalRecordCount++;
+                     if (data.totalRecordCount > totalRecordCount) totalRecordCount = data.totalRecordCount;
+                  }
+
+                  instance.buffer.totalRecordCount = data.totalRecordCount = totalRecordCount;
+                  instance.buffer.records = data.records = records;
+                  instance.buffer.page = data.page = startPage;
+                  data.offset = (startPage - 1) * pageSize;
+
+                  instance.store.silently(() => {
+                     instance.set("records", records);
+                     instance.set("page", startPage);
+                     instance.set("totalRecordCount", totalRecordCount);
+                  });
+
+                  let stateChanges: any = {
+                     startPage,
+                     endPage,
+                  };
+
+                  if (this.state.end == 0) stateChanges.end = Math.min(widget.bufferSize!, totalRecordCount!);
+
+                  this.setState(stateChanges, () => {
+                     this.loadingStartPage = startPage;
+                     this.loadingEndPage = endPage;
+                     this.onScroll();
+                  });
+               })
+               .catch((error) => {
+                  this.loading = false;
+                  if (widget.onLoadingError) instance.invoke(error, "onLoadingError", instance);
+               });
+         }, 30);
+
+      if (startPage < this.loadingStartPage! || endPage > this.loadingEndPage!) {
+         this.loadingStartPage = startPage;
+         this.loadingEndPage = endPage;
+         this.loadPageRange(startPage, endPage);
+      }
+   }
+
+   onScroll() {
+      //check if unmounted
+      if (!this.dom.scroller!) return;
+
+      if (this.dom.fixedHeader!) {
+         this.dom.fixedHeader!.scrollLeft = this.dom.scroller!.scrollLeft;
+      }
+
+      if (this.dom.fixedFooter!) {
+         this.dom.fixedFooter!.scrollLeft = this.dom.scroller!.scrollLeft;
+      }
+
+      if (this.dom.fixedScroller!) {
+         this.dom.fixedScroller!.scrollTop = this.dom.scroller!.scrollTop;
+      }
+
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      if (widget.buffered && !this.pending) {
+         let start = 0;
+         if (widget.measureRowHeights && instance.records)
+            start = Math.max(0, this.estimateStart(instance.records, this.dom.scroller!.scrollTop) - widget.bufferStep);
+         else if (this.rowHeight! > 0)
+            start = Math.round(this.dom.scroller!.scrollTop / this.rowHeight! - widget.bufferStep);
+
+         start = Math.round(start / widget.bufferStep) * widget.bufferStep;
+         start = Math.max(0, Math.min(start, data.totalRecordCount - widget.bufferSize));
+         let end = Math.min(data.totalRecordCount, start + widget.bufferSize);
+
+         if (widget.infinite) {
+            this.ensureData(start, end);
+         }
+
+         if (this.syncBuffering) {
+            this.start = start;
+            this.end = end;
+         } else if (this.state.end != end) {
+            this.pending = true;
+            this.setState({ start, end }, () => {
+               this.pending = false;
+            });
+         }
+      }
+   }
+
+   onFixedColumnsWheel(e: WheelEvent) {
+      this.dom.scroller!.scrollTop += e.deltaY;
+      e.preventDefault();
+   }
+
+   shouldComponentUpdate(props: GridComponentProps, state: GridComponentState) {
+      return props.shouldUpdate !== false || state !== this.state;
+   }
+
+   componentDidMount() {
+      this.componentDidUpdate();
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.scrollable) {
+         //update fixed header/footer on resize
+         this.offResize = ResizeManager.trackElement(this.dom.scroller!, () => {
+            requestAnimationFrame(() => {
+               //ignore changes if the element is not visible on the page
+               if (!this.dom.scroller?.offsetWidth) return;
+               this.componentDidUpdate();
+               instance.setState({
+                  dimensionsVersion: instance.state.dimensionsVersion + 1,
+                  lockedColWidth: {},
+               });
+            });
+         });
+      }
+      if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", this.handleKeyDown.bind(this), instance);
+      this.unregisterDropZone = registerDropZone(this);
+      if (widget.infinite) this.ensureData(0, 0);
+      if (this.dom.fixedScroller!) {
+         this.onFixedColumnsWheel = this.onFixedColumnsWheel.bind(this);
+         this.dom.fixedScroller!.addEventListener("wheel", this.onFixedColumnsWheel, { passive: false });
+      }
+   }
+
+   onDragStart(e: DragEvent) {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.onDragStart) instance.invoke("onDragStart", e, instance);
+   }
+
+   onDrop(e: DragEvent) {
+      try {
+         let { instance } = this.props;
+         let { widget } = instance;
+         let { start } = this.getBufferStartEnd();
+         let { dropInsertionIndex, dropTarget, dropNextToTheRowAbove } = this.state;
+         if (dropTarget == "grid" && widget.onDrop && dropInsertionIndex != null) {
+            let gridEvent = e as GridDragEvent<any>;
+            gridEvent.target = {
+               insertionIndex: start + dropInsertionIndex,
+               recordBefore: this.getDataRecordAt(start + dropInsertionIndex - 1),
+               recordAfter: this.getDataRecordAt(start + dropInsertionIndex),
+               totalRecordCount: instance.records!.length,
+               dropNextToTheRowAbove,
+            };
+            instance.invoke("onDrop", gridEvent, instance);
+         } else if (dropTarget == "row") {
+            let rowEvent = e as GridRowDragEvent<any>;
+            rowEvent.target = {
+               index: start + dropInsertionIndex!,
+               record: this.getDataRecordAt(start + dropInsertionIndex!)!,
+            };
+            instance.invoke("onRowDrop", rowEvent, instance);
+         } else if (dropTarget == "column" && widget.onColumnDrop) {
+            let colEvent = e as GridColumnDropEvent;
+            colEvent.target = {
+               index: this.state.colDropInsertionIndex!,
+               grid: widget,
+               instance,
+            };
+            instance.invoke("onColumnDrop", colEvent, instance);
+         }
+      } catch (err) {
+         console.error("Grid drop operation failed. Please fix this error:", err);
+      }
+
+      //in some cases drop operation is not followed by leave
+      this.onDragLeave(e);
+   }
+
+   onDropTest(e: DragEvent) {
+      let { instance } = this.props;
+      let { widget } = instance;
+      let grid = widget.onDropTest && instance.invoke("onDropTest", e, instance);
+      let row = widget.onRowDropTest && instance.invoke("onRowDropTest", e, instance);
+      let column = widget.onColumnDropTest && instance.invoke("onColumnDropTest", e, instance);
+      return (grid || row || column) && { grid, row, column };
+   }
+
+   onDragEnd(e: DragEvent) {
+      this.setState({
+         dropTarget: null,
+         dropInsertionIndex: null,
+         colDropInsertionIndex: undefined,
+         colDropInsertionLeft: undefined,
+      });
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.onDragEnd) instance.invoke("onDragEnd", e, instance);
+   }
+
+   onDragMeasure(e: DragEvent, { test: { grid, row, column } }: any) {
+      //columns can be dropped anywhere, while rows only in the scrollable area
+      let r = getTopLevelBoundingClientRect(column ? this.dom.el! : this.dom.scroller!);
+      let { clientX, clientY } = e.cursor;
+
+      if (clientX < r.left || clientX >= r.right || clientY < r.top || clientY >= r.bottom) return false;
+
+      return {
+         over: 1000,
+         near: false,
+      };
+   }
+
+   onColumnDragOver(ev: DragEvent) {
+      let headerTBody = this.dom.table!.firstChild as HTMLElement;
+      let positions: number[] = [];
+      let bounds: DOMRect;
+
+      let exists: Record<string, boolean> = {};
+
+      for (let r = 0; r < headerTBody!.children.length; r++) {
+         let cells = headerTBody!.children[r].children;
+         for (let c = 0; c < cells.length; c++) {
+            bounds = cells[c].getBoundingClientRect();
+            let key = bounds.left.toFixed(0);
+            if (exists[key]) continue;
+            positions.push(bounds.left);
+            exists[key] = true;
+         }
+         if (r == 0) positions.push(bounds!.right);
+      }
+
+      //due to the order of enumeration it's possible that positions are out of order
+      positions.sort((a, b) => a - b);
+      let index = 0;
+      while (index + 1 < positions.length && ev.cursor.clientX > positions[index + 1]) index++;
+
+      let { fixedColumnCount } = this.props.instance;
+
+      this.setState({
+         colDropInsertionIndex: fixedColumnCount + index,
+         colDropInsertionLeft:
+            positions[index] - positions[0] - this.dom.scroller!.scrollLeft + this.dom.scroller!.offsetLeft,
+         dropTarget: "column",
+      });
+   }
+
+   onDragOver(ev: DragEvent, { test: { grid, row, column } }: GridDropOperationContext) {
+      if (column) this.onColumnDragOver(ev);
+
+      if (!grid && !row) return;
+
+      let { instance } = this.props;
+      let { widget, data } = instance;
+      let { CSS, baseClass } = widget;
+      let rowClass = CSS.element(baseClass, "data");
+      let nodes = Array.from(this.dom.table!.children).filter(
+         (node) => node.className && node.className.indexOf(rowClass) != -1,
+      );
+      let { start } = this.getBufferStartEnd();
+
+      let s = 0,
+         e = nodes.length,
+         m,
+         b;
+      let parentOffset = getParentFrameBoundingClientRect(this.dom.scroller!);
+      let cy = ev.cursor.clientY - parentOffset.top;
+
+      let rowOverIndex = null;
+      let nextToTheRowAbove = false;
+
+      while (s < e) {
+         m = Math.floor((s + e) / 2);
+         b = nodes[m].getBoundingClientRect();
+
+         //dragged items might be invisible and have no client bounds
+         if (b.top == 0 && b.bottom == 0) {
+            //it's important to go all the way in one direction otherwise infinite loop might occur
+            while (m > s && b.top == 0 && b.bottom == 0) {
+               m--;
+               b = nodes[m].getBoundingClientRect();
+            }
+            while (m + 1 < e && b.top == 0 && b.bottom == 0) {
+               m = m + 1;
+               b = nodes[m].getBoundingClientRect();
+            }
+            if (b.top == 0 && b.bottom == 0) {
+               s = e = m;
+               break;
+            }
+         }
+
+         if (cy < b.top) e = m;
+         else if (cy > b.bottom) s = m + 1;
+         else {
+            //hovering over a row here
+            if (row) {
+               let confirmed = !grid;
+               if (!confirmed) {
+                  let insertionZone = (b.bottom - b.top) / 4;
+                  confirmed = cy > b.top + insertionZone && cy < b.bottom - insertionZone;
+               }
+               if (confirmed) {
+                  rowOverIndex = m;
+                  break;
+               }
+            }
+
+            if (cy > (b.bottom + b.top) / 2) {
+               s = e = m + 1;
+               nextToTheRowAbove = true;
+            } else s = e = m;
+         }
+      }
+
+      let cancel = false;
+
+      if (rowOverIndex != null) {
+         let evt = {
+            ...ev,
+            target: {
+               record: this.getRecordAt(rowOverIndex),
+               index: start + rowOverIndex,
+            },
+         };
+         if (widget.onRowDragOver && instance.invoke("onRowDragOver", evt, instance) === false) cancel = true;
+         else if (rowOverIndex != this.state.dropInsertionIndex || this.state.dropTarget != "row") {
+            this.setState({
+               dropInsertionIndex: rowOverIndex,
+               dropNextToTheRowAbove: false,
+               dropItemHeight: ev.source.height - 1,
+               dropTarget: "row",
+            });
+         }
+      } else if (grid) {
+         let evt = {
+            ...ev,
+            target: {
+               recordBefore: this.getRecordAt(s - 1),
+               recordAfter: this.getRecordAt(s),
+               insertionIndex: start + s,
+               totalRecordCount: data.totalRecordCount,
+            },
+         };
+         if (widget.onDragOver && instance.invoke("onDragOver", evt, instance) === false) cancel = true;
+         else if (s != this.state.dropInsertionIndex || this.state.dropTarget != "grid") {
+            this.setState({
+               dropInsertionIndex: s,
+               dropNextToTheRowAbove: nextToTheRowAbove,
+               dropItemHeight: ev.source.height - 1,
+               dropTarget: "grid",
+            });
+         }
+      }
+      if (cancel) {
+         this.setState({
+            dropInsertionIndex: null,
+            dropNextToTheRowAbove: null,
+            dropTarget: null,
+         });
+      }
+   }
+
+   onDragLeave(e: DragEvent) {
+      this.setState({
+         dropInsertionIndex: null,
+         dropNextToTheRowAbove: null,
+         dropTarget: null,
+      });
+   }
+
+   onGetHScrollParent() {
+      let { widget } = this.props.instance;
+      if (widget.scrollable) return this.dom.scroller!;
+      return findScrollableParent(this.dom.table!, true);
+   }
+
+   onGetVScrollParent({ test: { grid, row, column } }: GridDropOperationContext) {
+      if (column && !grid && !row) return null;
+      let { widget } = this.props.instance;
+      if (widget.scrollable) return this.dom.scroller!;
+      return findScrollableParent(this.dom.table!);
+   }
+
+   UNSAFE_componentWillReceiveProps(props: GridComponentProps) {
+      let { data, widget } = props.instance;
+      if (this.state.cursor >= data.totalRecordCount)
+         this.setState({
+            cursor: data.totalRecordCount - 1,
+         });
+      else if (widget.selectable && this.state.focused && this.state.cursor < 0)
+         this.setState({
+            cursor: 0,
+         });
+   }
+
+   componentWillUnmount() {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (this.offResize) this.offResize();
+
+      offFocusOut(this);
+
+      if (this.unregisterDropZone) this.unregisterDropZone();
+
+      if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", null, instance);
+
+      if (this.dom.fixedScroller!) {
+         this.dom.fixedScroller!.removeEventListener("wheel", this.onFixedColumnsWheel);
+      }
+   }
+
+   estimateHeight(
+      records: MappedGridRecord[],
+      start: number,
+      end: number,
+      breakCondition?: (index: number, totalHeight: number) => boolean,
+   ) {
+      let avgDataRowHeight = this.heightStats!.estimate("data") ?? 0;
+      let totalHeight = 0;
+      for (let i = start; i < end; i++) {
+         let record = records[i];
+         switch (record.type) {
+            case "data":
+               if (record.key in this.rowHeights!) totalHeight += this.rowHeights![record.key];
+               else totalHeight += avgDataRowHeight;
+               break;
+
+            case "group-header":
+               if (record.grouping.showCaption) {
+                  let captionKey = "group-caption-" + record.level;
+                  if (`${captionKey}-${record.group.$key}` in this.rowHeights!)
+                     totalHeight += this.rowHeights![`${captionKey}-${record.group.$key}`];
+                  else totalHeight += this.heightStats!.estimate(captionKey) ?? avgDataRowHeight;
+               }
+               break;
+
+            case "group-footer":
+               if (record.grouping.showFooter) {
+                  let captionKey = "group-footer-" + record.level;
+                  if (`${captionKey}-${record.group.$key}` in this.rowHeights!)
+                     totalHeight += this.rowHeights![`${captionKey}-${record.group.$key}`];
+                  else totalHeight += this.heightStats!.estimate(captionKey) ?? avgDataRowHeight;
+               }
+               break;
+
+            default:
+               Console.warn("UNPROCESSED RECORD TYPE", record);
+               break;
+         }
+
+         if (breakCondition && breakCondition(i, totalHeight) === false) break;
+      }
+      return totalHeight;
+   }
+
+   estimateStart(records: MappedGridRecord[], height: number) {
+      let start = 0;
+      if (height == 0) return 0;
+      this.estimateHeight(records, 0, records.length, (index, h) => {
+         start = index;
+         return h < height;
+      });
+      return start;
+   }
+
+   componentDidUpdate() {
+      let { instance, data } = this.props;
+      let { widget, fixedFooterOverlap } = instance;
+
+      if (
+         widget.lockColumnWidths &&
+         isArray(data.records) &&
+         data.records.length >= widget.lockColumnWidthsRequiredRowCount
+      ) {
+         let headerTBody = this.dom.table!.firstChild! as HTMLElement;
+         for (let r = 0; r < headerTBody.children.length; r++) {
+            let sr = headerTBody.children[r];
+            for (let c = 0; c < sr.children.length; c++) {
+               let cell = sr.children[c] as HTMLElement;
+               cell.style.width =
+                  cell.style.minWidth =
+                  cell.style.maxWidth =
+                     `${(sr.children[c] as HTMLElement).offsetWidth}px`;
+               cell.style.boxSizing = "border-box";
+               if ((cell as HTMLElement).dataset.uniqueColId)
+                  instance.state.lockedColWidth[(cell as HTMLElement).dataset.uniqueColId!] = (
+                     sr.children[c] as HTMLElement
+                  ).offsetWidth;
+            }
+         }
+      }
+
+      if (widget.scrollable) {
+         this.scrollWidth = this.dom.scroller!.offsetWidth - this.dom.scroller!.clientWidth;
+
+         let resized = false,
+            headerHeight = 0,
+            footerHeight = 0,
+            rowHeight = 0;
+
+         if (this.dom.fixedTable!)
+            syncHeaderHeights(
+               this.dom.table!.firstChild as HTMLTableSectionElement,
+               this.dom.fixedTable!.firstChild as HTMLTableSectionElement,
+            );
+
+         if (this.dom.fixedHeader!) {
+            let fixedHeaderTBody = this.dom.fixedHeader!.firstChild!.firstChild as HTMLTableSectionElement;
+
+            resized = widget.preciseMeasurements
+               ? copyCellSizePrecise(this.dom.table!.firstChild as HTMLTableSectionElement, fixedHeaderTBody)
+               : copyCellSize(this.dom.table!.firstChild as HTMLTableSectionElement, fixedHeaderTBody);
+
+            let scrollColumnEl = fixedHeaderTBody?.firstChild?.lastChild as HTMLElement | null;
+            if (scrollColumnEl) scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth = this.scrollWidth + "px";
+
+            this.dom.fixedHeader!.style.display = "block";
+            headerHeight = this.dom.fixedHeader!.offsetHeight;
+            this.dom.scroller!.style.marginTop = `${headerHeight}px`;
+            if (this.dom.fixedScroller!) this.dom.fixedScroller!.style.marginTop = `${headerHeight}px`;
+            else if (this.dom.fixedHeader!.style.left != null) this.dom.fixedHeader!.style.removeProperty("left");
+         } else {
+            this.dom.scroller!.style.removeProperty("marginTop");
+            if (this.dom.fixedScroller!) this.dom.fixedScroller!.style.removeProperty("marginTop");
+         }
+
+         if (this.dom.fixedColumnsFixedHeader!) {
+            let fixedColumnsWidth = `${this.dom.fixedScroller!.offsetWidth}px`;
+            this.dom.fixedColumnsFixedHeader!.style.right = "auto";
+            this.dom.fixedColumnsFixedHeader!.style.width = fixedColumnsWidth;
+            if (this.dom.fixedHeader!) this.dom.fixedHeader!.style.left = fixedColumnsWidth;
+
+            this.dom.fixedColumnsFixedHeader!.style.display = "block";
+
+            let fixedHeaderTBody = this.dom.fixedColumnsFixedHeader!.firstElementChild
+               ?.firstElementChild as HTMLTableSectionElement;
+
+            if (this.dom.fixedTable!.firstChild) {
+               resized = copyCellSize(
+                  this.dom.fixedTable!.firstElementChild as HTMLTableSectionElement,
+                  fixedHeaderTBody,
+               );
+            }
+         }
+
+         if (this.dom.fixedFooter! || this.dom.fixedColumnsFixedFooter!) {
+            if (this.dom.fixedColumnsFixedFooter!) {
+               let fixedColumnsWidth = `${this.dom.fixedScroller!.offsetWidth}px`;
+               this.dom.fixedColumnsFixedFooter!.style.right = "auto";
+               this.dom.fixedColumnsFixedFooter!.style.width = fixedColumnsWidth;
+
+               let dstTableBody = this.dom.fixedColumnsFixedFooter!.firstElementChild
+                  ?.firstElementChild as HTMLTableSectionElement;
+               if (dstTableBody) {
+                  let srcTableBody = this.dom.fixedTable!.lastElementChild as HTMLTableSectionElement;
+                  copyCellSize(srcTableBody, dstTableBody, fixedFooterOverlap);
+                  this.dom.fixedColumnsFixedFooter!.style.display = "block";
+                  footerHeight = this.dom.fixedFooter!.offsetHeight;
+               }
+            }
+
+            if (this.dom.fixedFooter!) {
+               let dstTableBody = this.dom.fixedFooter!.firstElementChild?.firstElementChild as HTMLTableSectionElement;
+
+               if (dstTableBody) {
+                  let srcTableBody = this.dom.table!.lastElementChild as HTMLTableSectionElement;
+
+                  copyCellSize(srcTableBody, dstTableBody, fixedFooterOverlap);
+
+                  let scrollColumnEl = dstTableBody.firstElementChild?.firstElementChild as HTMLElement;
+                  if (scrollColumnEl)
+                     scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth = this.scrollWidth + "px";
+
+                  this.dom.fixedFooter!.style.display = "block";
+                  footerHeight = this.dom.fixedFooter!.offsetHeight;
+               }
+
+               if (this.dom.fixedScroller!)
+                  this.dom.fixedFooter!.style.left = `${this.dom.fixedScroller!.offsetWidth}px`;
+               else if (this.dom.fixedFooter!.style.left != null) this.dom.fixedFooter!.style.removeProperty("left");
+            }
+
+            this.dom.scroller!.style.marginBottom = `${footerHeight}px`;
+            if (this.dom.fixedScroller!) this.dom.fixedScroller!.style.marginBottom = `${footerHeight}px`;
+         } else {
+            this.dom.scroller!.style.marginBottom = "0";
+            if (this.dom.fixedScroller!) this.dom.fixedScroller!.style.marginBottom = "0";
+         }
+
+         let scrollOverlap = fixedFooterOverlap ? footerHeight : 0;
+
+         if (widget.buffered) {
+            let { start, end } = this.getBufferStartEnd();
+            let remaining = 0,
+               count = Math.min(data.totalRecordCount, end! - start!);
+
+            if (widget.measureRowHeights) {
+               if (!this.rowHeights) this.rowHeights = {};
+               if (!this.heightStats) this.heightStats = new AvgHeight();
+               for (let i = 0; i < this.dom.table!.children.length; i++) {
+                  let body = this.dom.table!.children[i] as HTMLElement;
+                  if (body.dataset.recordKey != null) {
+                     if (!(body.dataset.recordKey in this.rowHeights)) this.heightStats.add("data", body.offsetHeight);
+                     this.rowHeights[body.dataset.recordKey] = body.offsetHeight;
+                  } else if (body.dataset.groupKey) {
+                     let key = body.dataset.groupElement + "-" + body.dataset.groupKey;
+                     this.rowHeights[key] = body.offsetHeight;
+                     if (!(body.dataset.recordKey! in this.rowHeights))
+                        this.heightStats.add(body.dataset.groupElement!, body.offsetHeight);
+                  }
+               }
+            }
+
+            if (count > 0) {
+               //do not change row height while a drag-drop operation is in place
+               rowHeight = this.state.dragged
+                  ? this.rowHeight!
+                  : Math.round((this.dom.table!.offsetHeight - headerHeight) / count);
+               // if (this.rowHeight && this.rowHeight != rowHeight) {
+               //    console.warn("ROW-HEIGHT-CHANGE", this.rowHeight, rowHeight);
+               // }
+               remaining = Math.max(0, data.totalRecordCount - end);
+            }
+
+            let upperMargin = 0,
+               lowerMargin = 0;
+            if (widget.measureRowHeights && instance.records) {
+               upperMargin = this.estimateHeight(instance.records, 0, start);
+               lowerMargin = this.estimateHeight(instance.records, end, instance.records.length);
+            } else {
+               upperMargin = start * rowHeight;
+               lowerMargin = remaining * rowHeight;
+            }
+
+            //console.log(upperMargin, start * rowHeight, this.rowHeights, this.heightStats);
+
+            this.dom.table!.style.marginTop = `${(-headerHeight + upperMargin).toFixed(0)}px`;
+            this.dom.table!.style.marginBottom = `${(lowerMargin - scrollOverlap).toFixed(0)}px`;
+         } else {
+            this.dom.table!.style.marginTop = `${-headerHeight}px`;
+            this.dom.table!.style.marginBottom = `${-scrollOverlap}px`;
+         }
+
+         if (this.dom.fixedTable!) {
+            this.dom.fixedTable!.style.marginTop = this.dom.table!.style.marginTop;
+            this.dom.fixedTable!.style.marginBottom = this.dom.table!.style.marginBottom;
+         }
+
+         this.rowHeight = rowHeight;
+
+         let sortersChanged = widget.infinite && !shallowEquals(data.sorters, this.lastSorters);
+
+         if (data.empty && !widget.infinite) {
+            this.dom.scroller!.scrollTop = 0;
+         }
+
+         if (
+            sortersChanged ||
+            data.filterParams !== this.lastScrollFilterParams ||
+            data.scrollResetParams !== this.lastScrollResetParams
+         ) {
+            this.dom.scroller!.scrollTop = 0;
+            this.lastScrollFilterParams = data.filterParams;
+            this.lastScrollResetParams = data.scrollResetParams;
+            this.lastSorters = data.sorters;
+            if (widget.infinite) {
+               this.loadingStartPage = 0;
+               this.loadingEndPage = 0;
+               instance.buffer.records = data.records = [];
+               instance.buffer.totalRecordCount = 0;
+               instance.buffer.page = 1;
+               this.prevFetchRecordsState = null;
+               this.loading = false;
+            }
+         }
+
+         if (widget.scrollSelectionIntoView && !widget.buffered) {
+            let { CSS, baseClass } = widget;
+            let selectedRowSelector = `.${CSS.element(baseClass, "data")}.${CSS.state("selected")}`;
+            let firstSelectedRow = this.dom.table!.querySelector(selectedRowSelector);
+            if (firstSelectedRow != this.selectedEl) {
+               firstSelectedRow && scrollElementIntoView(firstSelectedRow);
+               this.selectedEl = firstSelectedRow;
+            }
+         }
+
+         setTimeout(this.onScroll.bind(this), 0);
+
+         if (resized) instance.fixedHeaderResizeEvent.notify();
+      }
+   }
+
+   moveCursor(
+      index: number,
+      {
+         focused,
+         hover,
+         scrollIntoView,
+         select,
+         selectRange,
+         selectOptions,
+         cellIndex,
+         cellEdit,
+         cancelEdit,
+      }: GridMoveCursorOptions = {},
+   ) {
+      let { widget, visibleColumns } = this.props.instance;
+      if (!widget.selectable && !widget.cellEditable) return;
+
+      let newState: Partial<GridComponentState> = {};
+
+      if (cellEdit != null && cellEdit != this.state.cellEdit) {
+         newState.cellEdit = cellEdit;
+         if (
+            cellEdit &&
+            (!visibleColumns[this.state.cursorCellIndex] || !visibleColumns[this.state.cursorCellIndex].editor)
+         )
+            newState.cellEdit = false;
+      }
+
+      if (cellIndex != null && cellIndex != this.state.cursorCellIndex) {
+         newState.cursorCellIndex = cellIndex;
+         newState.cellEdit = false;
+      }
+
+      if (widget.focused) focused = true;
+
+      if (focused != null && this.state.focused != focused) {
+         newState.focused = focused;
+         newState.cellEdit = false;
+      }
+
+      if (index != this.state.cursor) {
+         newState.cursor = index;
+         newState.cellEdit = false;
+      }
+
+      batchUpdates(() => {
+         if (select) {
+            let start =
+               selectRange && this.state.selectionStart != null && this.state.selectionStart >= 0
+                  ? this.state.selectionStart
+                  : index;
+            if (start < 0) start = index;
+            this.selectRange(start!, index, selectOptions);
+            if (!selectRange) newState.selectionStart = index;
+         }
+
+         if (Object.keys(newState).length > 0) {
+            let prevState = this.state;
+            let wasCellEditing = prevState.focused && prevState.cellEdit;
+            let futureState = { ...this.state, ...newState };
+
+            if (!futureState.cellEdit && wasCellEditing) {
+               // If cell editing is in progress, moving the cursor may cause that the cell editor to unmount before
+               // the blur event which may cause data loss for components which do not have reactOn=change set, e.g. NumberField.
+               unfocusElement(null, false);
+               let record = this.getRecordAt(prevState.cursor)!;
+               if ((!this.cellEditorValid || cancelEdit) && this.cellEditUndoData)
+                  record.store.set(widget.recordName, this.cellEditUndoData);
+               else {
+                  let newData = record.store.get(widget.recordName); //record.data might be stale at this point
+                  if (widget.onCellEdited && newData != this.cellEditUndoData) {
+                     this.props.instance.invoke(
+                        "onCellEdited",
+                        {
+                           column: visibleColumns[prevState.cursorCellIndex],
+                           newData,
+                           oldData: this.cellEditUndoData,
+                           field: visibleColumns[prevState.cursorCellIndex].field,
+                        },
+                        record,
+                     );
+                     this.cellEditUndoData = newData;
+                  }
+               }
+            }
+
+            if (futureState.cellEdit && !wasCellEditing) {
+               let record = this.getRecordAt(futureState.cursor)!;
+               let cellEditUndoData = record.data;
+
+               if (
+                  widget.onBeforeCellEdit &&
+                  this.props.instance.invoke(
+                     "onBeforeCellEdit",
+                     {
+                        column: visibleColumns[futureState.cursorCellIndex],
+                        data: cellEditUndoData,
+                        field: visibleColumns[futureState.cursorCellIndex].field,
+                     },
+                     record,
+                  ) === false
+               )
+                  return;
+
+               this.cellEditUndoData = cellEditUndoData;
+            }
+
+            this.setState(newState as any, () => {
+               if (this.state.focused && !this.state.cellEdit && wasCellEditing) FocusManager.focus(this.dom.el!);
+
+               if (scrollIntoView) {
+                  let record = this.getRecordAt(index)!;
+
+                  let item = record && this.dom.table!.querySelector(`tbody[data-record-key="${record.key}"]`);
+
+                  let hscroll = false;
+                  if (item) {
+                     if (widget.cellEditable)
+                        if (this.state.cursorCellIndex >= this.props.instance.fixedColumnCount) {
+                           hscroll = true;
+                           item = (item.firstChild as HTMLElement)!.children[
+                              this.state.cursorCellIndex - this.props.instance.fixedColumnCount
+                           ] as Element;
+                        } else {
+                           let fixedItem = this.dom.fixedTable!.querySelector(`tbody[data-record-key="${record.key}"]`);
+                           let cell =
+                              fixedItem && (fixedItem.firstChild as HTMLElement)!.children[this.state.cursorCellIndex];
+                           if (cell) scrollElementIntoView(cell, false, true, 10);
+                        }
+
+                     scrollElementIntoView(item!, true, hscroll, widget.cellEditable ? 10 : 0);
+                  }
+               }
+            });
+         }
+      });
+   }
+
+   showCursor(focused?: boolean) {
+      let { records, isSelected } = this.props.instance;
+      let cursor = this.state.cursor;
+      if (cursor == -1) {
+         if (records) {
+            cursor = records.findIndex((x) => isSelected(x.data, x.index));
+            //if there are no selected records, find the first data record (skip group header)
+            if (cursor == -1) cursor = records.findIndex((x) => x.type == "data");
+         } else cursor = 0;
+      }
+      this.moveCursor(cursor, { focused: true, scrollIntoView: false });
+   }
+
+   onFocus() {
+      FocusManager.nudge();
+
+      //focus moved within the grid
+      if (this.state.focused) {
+         if (this.state.cellEdit && this.dom.el! == getActiveElement())
+            this.moveCursor(this.state.cursor, {
+               cellEdit: false,
+            });
+         return;
+      }
+
+      let { widget } = this.props.instance;
+
+      //the cursor will be set if focus in originating from a mouse event
+      setTimeout(() => {
+         this.showCursor(true);
+      }, 0);
+
+      if (!widget.focused) {
+         if (this.dom.el!) {
+            //if an inner element is focused first (autoFocus), this.dom.el! might be undefined
+            oneFocusOut(this, this.dom.el!, () => {
+               this.moveCursor(-1, { focused: false });
+            });
+         }
+      }
+
+      this.setState({
+         focused: true,
+      });
+   }
+
+   onBlur() {
+      FocusManager.nudge();
+   }
+
+   selectRange(from: number, to: number, options?: any) {
+      let { instance, data } = this.props;
+      let { records, widget } = instance;
+
+      if (from > to) {
+         let tmp = from;
+         from = to;
+         to = tmp;
+      }
+
+      options = {
+         ...options,
+         range: from < to,
+      };
+
+      let selection = [],
+         indexes = [];
+
+      for (let cursor = from; cursor <= to; cursor++) {
+         let record;
+         if (records) record = records[cursor];
+         else {
+            let offset = widget.infinite ? data.offset : 0;
+            let r = data.records[cursor - offset];
+            if (r) record = widget.mapRecord(null!, instance, r, cursor - offset);
+         }
+         if (record && record.type == "data") {
+            if (instance.isRecordSelectable && !instance.isRecordSelectable(record.data, options)) continue;
+            selection.push(record.data);
+            indexes.push(record.index);
+         }
+      }
+
+      widget.selection.selectMultiple(instance.store, selection, indexes, options);
+   }
+
+   getDataRecordAt(index: number): MappedGridRecord | undefined {
+      let { records } = this.props.instance;
+      if (!records) return this.getRecordAt(index);
+      let dataRecords = records.filter((r) => r.type == "data");
+      return dataRecords[index];
+   }
+
+   getRecordAt(cursor: number): MappedGridRecord | undefined {
+      let { instance, data } = this.props;
+      let { records, widget } = instance;
+
+      if (records) return records[cursor];
+
+      let offset = widget.infinite ? data.offset : 0;
+      let r = data.records[cursor - offset];
+      if (r) return widget.mapRecord(null!, instance, r, cursor - offset);
+
+      return undefined;
+   }
+
+   getRecordInstanceAt(cursor: number) {
+      let record = this.getRecordAt(cursor);
+      if (!record) return null;
+      let { instance } = this.props;
+      if (instance.recordInstanceCache)
+         return instance.recordInstanceCache.getChild(instance.row, record.store, record.key);
+
+      //different signature
+      return instance.getChild(null, instance.row, record.key, record.store);
+   }
+
+   handleKeyDown(e: React.KeyboardEvent) {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+
+      if (widget.onKeyDown && instance.invoke("onKeyDown", e, instance) === false) return;
+
+      let recordInstance = this.getRecordInstanceAt(this.state.cursor);
+      if (recordInstance && widget.onRowKeyDown && instance.invoke("onRowKeyDown", e, recordInstance) === false) return;
+
+      if (widget.onCellKeyDown && widget.cellEditable && this.state.cursorCellIndex != -1) {
+         if (
+            instance.invoke("onCellKeyDown", e, instance, {
+               cellIndex: this.state.cursorCellIndex,
+               record: recordInstance,
+            }) === false
+         )
+            return;
+      }
+
+      switch (e.keyCode) {
+         case KeyCode.enter:
+            this.moveCursor(this.state.cursor, {
+               select: true,
+               selectOptions: {
+                  toggle: e.ctrlKey && !e.shiftKey,
+                  add: e.ctrlKey && e.shiftKey,
+               },
+               selectRange: e.shiftKey,
+               cellEdit: widget.cellEditable && !this.state.cellEdit,
+               focused: true,
+            });
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+
+         case KeyCode.esc:
+            if (this.state.cellEdit) {
+               this.moveCursor(this.state.cursor, {
+                  cellEdit: false,
+                  focused: true,
+                  cancelEdit: true,
+               });
+               e.stopPropagation();
+               e.preventDefault();
+            }
+            break;
+
+         case KeyCode.tab:
+            if (widget.cellEditable) {
+               e.stopPropagation();
+               e.preventDefault();
+               let direction = e.shiftKey ? -1 : +1;
+               let cursor = this.state.cursor;
+               let cellIndex = (this.state.cursorCellIndex + direction) % instance.row.line1.columns.length;
+               if (cellIndex == -1) {
+                  cellIndex += instance.row.line1.columns.length;
+                  cursor--;
+               } else if (cellIndex == 0 && direction > 0) cursor++;
+               for (; ; cursor += direction) {
+                  let record = this.getRecordAt(cursor);
+                  if (!record) break;
+                  if (record.type != "data") continue;
+                  this.moveCursor(cursor, {
+                     focused: true,
+                     cellIndex,
+                     scrollIntoView: true,
+                     cellEdit: false,
+                  });
+                  break;
+               }
+            }
+            break;
+
+         case KeyCode.down:
+            for (let cursor = this.state.cursor + 1; ; cursor++) {
+               let record = this.getRecordAt(cursor);
+               if (!record) break;
+               if (record.type != "data") continue;
+               this.moveCursor(cursor, {
+                  focused: true,
+                  scrollIntoView: true,
+                  select: e.shiftKey,
+                  selectRange: e.shiftKey,
+               });
+               break;
+            }
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+
+         case KeyCode.up:
+            for (let cursor = this.state.cursor - 1; cursor >= 0; cursor--) {
+               let record = this.getRecordAt(cursor);
+               if (!record) break;
+               if (record.type != "data") continue;
+               this.moveCursor(cursor, {
+                  focused: true,
+                  scrollIntoView: true,
+                  select: e.shiftKey,
+                  selectRange: e.shiftKey,
+               });
+               break;
+            }
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+
+         case KeyCode.right:
+            if (widget.cellEditable) {
+               if (this.state.cursorCellIndex + 1 < instance.row.line1.columns.length) {
+                  this.moveCursor(this.state.cursor, {
+                     focused: true,
+                     cellIndex: this.state.cursorCellIndex + 1,
+                     scrollIntoView: true,
+                  });
+               }
+               e.stopPropagation();
+               e.preventDefault();
+            }
+            break;
+
+         case KeyCode.left:
+            if (widget.cellEditable) {
+               if (this.state.cursorCellIndex > 0) {
+                  this.moveCursor(this.state.cursor, {
+                     focused: true,
+                     cellIndex: this.state.cursorCellIndex - 1,
+                     scrollIntoView: true,
+                  });
+               }
+               e.stopPropagation();
+               e.preventDefault();
+            }
+            break;
+
+         case KeyCode.a:
+            if (!e.ctrlKey || !widget.selection.multiple) return;
+
+            if (isTextInputElement(e.target as Element)) return;
+
+            this.selectRange(0, data.totalRecordCount);
+
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+      }
+   }
+
+   beginDragDrop(e: React.MouseEvent, record: MappedGridRecord) {
+      let { instance, data } = this.props;
+      let { widget, store } = instance;
+      let { isRecordDraggable } = instance;
+
+      if (isRecordDraggable && !isRecordDraggable(record.data)) return;
+
+      //get a fresh isSelected delegate
+      let isSelected = widget.selection.getIsSelectedDelegate(store);
+
+      let selected: MappedGridRecord[] = [];
+
+      let add = (rec: MappedGridRecord | null, data: any, index: number, force?: boolean) => {
+         if (!data || !(force || isSelected(data, index)) || (isRecordDraggable && !isRecordDraggable(data))) return;
+         let mappedRecord = rec ? { ...rec } : (widget.mapRecord(null!, instance, data, index) as MappedGridRecord);
+         let row = (mappedRecord.row = instance.getDetachedChild(
+            instance.row,
+            "DD:" + mappedRecord.key,
+            mappedRecord.store,
+         ) as GridRowInstance);
+         row.selected = true;
+         selected.push(mappedRecord);
+      };
+
+      if (!record.row?.selected) {
+         if (instance.records) instance.records.forEach((r) => add(r, r.data, r.index!));
+         else this.getRecordsSlice(0, data.totalRecordCount).forEach((r, index) => add(null, r, index));
+      }
+
+      if (selected.length == 0) add(record, record.data, record.index!, true);
+
+      let renderRow = this.createRowRenderer(false);
+
+      let contents = selected.map((record, i) => ({
+         type: StaticText,
+         text: renderRow(record, i, true, false),
+      }));
+
+      initiateDragDrop(
+         e,
+         {
+            sourceEl: closest(e.currentTarget, (a) => a.tagName == "TBODY"),
+            source: {
+               data: data.dragSource.data,
+               store: store,
+               record: record,
+               records: selected,
+            },
+            clone: {
+               store: record.store,
+               matchCursorOffset: true,
+               matchWidth: true,
+               widget: {
+                  type: HtmlElement,
+                  tag: "div",
+                  className: data.classNames,
+                  children: [
+                     {
+                        type: HtmlElement,
+                        tag: "table",
+                        children: contents,
+                     },
+                  ],
+               },
+            },
+         },
+         () => {
+            this.setState({
+               dragged: false,
+            });
+         },
+      );
+
+      this.setState({
+         dragged: record,
+      });
+   }
+
+   onFileDragEnter(ev: React.DragEvent) {
+      if (!this.props.instance.widget.allowsFileDrops) return;
+      let event = getDragDropEvent(ev, this.props.instance.store, "dragmove");
+      var test = this.onDropTest(event);
+      if (test) {
+         ev.preventDefault();
+         ev.stopPropagation();
+         this.onDragStart(event);
+      }
+   }
+   onFileDragOver(ev: React.DragEvent) {
+      if (!this.props.instance.widget.allowsFileDrops) return;
+      let event = getDragDropEvent(ev, this.props.instance.store, "dragmove");
+      var test = this.onDropTest(event);
+      if (test) {
+         ev.preventDefault();
+         ev.stopPropagation();
+         this.onDragOver(event, { test });
+      }
+   }
+   onFileDragLeave(ev: React.DragEvent) {
+      if (!this.props.instance.widget.allowsFileDrops) return;
+      if (ev.target != this.dom.el!) {
+         //The dragleave event fires when the cursor leave any of the child elements.
+         //We need to be sure that the cursor left the top element too.
+         let el = document.elementFromPoint(ev.clientX, ev.clientY);
+         if (el == this.dom.el! || this.dom.el!.contains(el)) return;
+      }
+      let event = getDragDropEvent(ev, this.props.instance.store, "dragmove");
+      var test = this.onDropTest(event);
+      if (test) {
+         this.onDragLeave(event);
+      }
+   }
+   onFileDrop(ev: React.DragEvent) {
+      if (!this.props.instance.widget.allowsFileDrops) return;
+      let event = getDragDropEvent(ev, this.props.instance.store, "dragdrop");
+      var test = this.onDropTest(event);
+      if (test) {
+         ev.preventDefault();
+         ev.stopPropagation();
+         this.onDrop(event);
+      }
+   }
+}
+
+export interface GridColumnHeaderLineConfig extends PureContainerConfig {
+   columns?: GridColumnConfig[];
+   showHeader?: BooleanProp;
+   headerStyle?: StyleProp;
+   headerClass?: ClassProp;
+}
+
+class GridColumnHeaderLine extends PureContainerBase<GridColumnHeaderLineConfig> {
+   declare columns?: GridColumnConfig[];
+   declare showHeader: boolean;
+   declare headerStyle?: any;
+   declare headerClass?: any;
+   declare className?: any;
+   declare class?: any;
+   declare isPureContainer: boolean;
+   declare styled: boolean;
+
+   declareData() {
+      return super.declareData(...arguments, {
+         showHeader: undefined,
+      });
+   }
+
+   init() {
+      this.items = Widget.create(GridColumnHeader, this.columns || []) as any;
+      this.visible = this.showHeader;
+      this.style = this.headerStyle;
+      this.className = this.headerClass;
+      this.class = null;
+      super.init();
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      return (
+         <tr key={key} className={data.classNames} style={data.style}>
+            {this.renderChildren(context, instance)}
+         </tr>
+      );
+   }
+}
+
+GridColumnHeaderLine.prototype.isPureContainer = false;
+GridColumnHeaderLine.prototype.styled = true;
+GridColumnHeaderLine.prototype.showHeader = true;
+GridColumnHeaderLine.autoInit = true;
+
+export interface GridColumnHeaderConfig extends WidgetConfig {
+   format?: StringProp;
+   width?: NumberProp;
+   defaultWidth?: NumberProp;
+   fixed?: BooleanProp;
+   field?: string;
+   sortable?: boolean;
+   resizable?: boolean;
+   draggable?: boolean;
+   header?: StringProp | GridColumnHeaderConfig;
+   header1?: StringProp | GridColumnHeaderConfig;
+   header2?: StringProp | GridColumnHeaderConfig;
+   header3?: StringProp | GridColumnHeaderConfig;
+   footer?: any;
+   caption?: any;
+   aggregateField?: string;
+   aggregateAlias?: string;
+   pad?: boolean;
+   colSpan?: NumberProp;
+}
+
+class GridColumnHeader extends Widget<GridColumnHeaderConfig> {
+   declare format?: any;
+   declare width?: any;
+   declare defaultWidth?: any;
+   declare fixed?: any;
+   declare field?: string;
+   declare sortable?: boolean;
+   declare resizable?: boolean;
+   declare draggable?: boolean;
+   declare header?: any;
+   declare header1?: any;
+   declare header2?: any;
+   declare header3?: any;
+   declare footer?: any;
+   declare caption?: any;
+   declare aggregateField?: string;
+   declare aggregateAlias?: string;
+   declare aggregateAliasGetter?: any;
+   declare pad?: boolean;
+   declare colSpan?: any;
+   declare style?: any;
+   declare className?: any;
+   declare class?: any;
+   declareData() {
+      return super.declareData(...arguments, {
+         format: undefined,
+         width: undefined,
+         defaultWidth: undefined,
+         fixed: undefined,
+      });
+   }
+
+   init() {
+      delete this.style;
+      delete this.className;
+      delete this.class;
+
+      if (this.header) this.header1 = this.header;
+
+      if (this.header1 || this.resizable || this.width || this.defaultWidth || this.sortable || this.draggable) {
+         if (!isObject(this.header1))
+            this.header1 = {
+               text: this.header1 || "",
+            };
+
+         if (this.resizable) this.header1.resizable = this.resizable;
+
+         if (this.width) this.header1.width = this.width;
+
+         if (this.defaultWidth) this.header1.defaultWidth = this.defaultWidth;
+
+         if (this.draggable) this.header1.draggable = this.draggable;
+      }
+
+      if (this.header2 && isSelector(this.header2))
+         this.header2 = {
+            text: this.header2,
+         };
+
+      if (this.header3 && isSelector(this.header3))
+         this.header3 = {
+            text: this.header3,
+         };
+
+      if (!this.aggregateField && this.field) this.aggregateField = this.field;
+
+      if (!this.aggregateAlias) this.aggregateAlias = this.aggregateField;
+      if (this.aggregateAlias) this.aggregateAliasGetter = Binding.get(this.aggregateAlias).value;
+
+      if (this.footer && isSelector(this.footer))
+         this.footer = {
+            value: this.footer,
+            pad: this.pad,
+            colSpan: this.colSpan,
+         };
+
+      if (this.footer) {
+         this.footer.value = getSelector(this.footer.value);
+         this.footer.class = getSelector(this.footer.class);
+         this.footer.style = getSelector(this.footer.style);
+         this.footer.format = getSelector(this.footer.format);
+      }
+
+      if (this.caption && isSelector(this.caption))
+         this.caption = {
+            value: this.caption,
+            pad: this.pad,
+            format: this.format,
+         };
+
+      if (this.caption) {
+         let children = this.caption.children || this.caption.items;
+         if (children) {
+            delete this.caption.items;
+            this.caption.children = Widget.create(children);
+         } else {
+            this.caption.value = getSelector(this.caption.value);
+            this.caption.format = getSelector(this.caption.format);
+         }
+         this.caption.class = getSelector(this.caption.class);
+         this.caption.style = getSelector(this.caption.style);
+      }
+
+      super.init();
+   }
+
+   initComponents() {
+      return super.initComponents({
+         header1: this.header1 && GridColumnHeaderCell.create(this.header1),
+         header2: this.header2 && GridColumnHeaderCell.create(this.header2),
+         header3: this.header3 && GridColumnHeaderCell.create(this.header3),
+      });
+   }
+
+   render() {
+      return null;
+   }
+}
+
+GridColumnHeader.autoInit = true;
+
+export interface GridColumnHeaderCellConfig extends PureContainerConfig {
+   text?: StringProp;
+   colSpan?: NumberProp;
+   rowSpan?: NumberProp;
+   width?: NumberProp;
+   defaultWidth?: NumberProp;
+   resizable?: BooleanProp;
+   fixed?: BooleanProp;
+   draggable?: BooleanProp;
+   tool?: any;
+   allowSorting?: boolean;
+}
+
+class GridColumnHeaderCell extends PureContainerBase<GridColumnHeaderCellConfig> {
+   declare text?: any;
+   declare colSpan?: any;
+   declare rowSpan?: any;
+   declare width?: any;
+   declare defaultWidth?: any;
+   declare resizable?: any;
+   declare fixed?: any;
+   declare draggable?: any;
+   declare tool?: any;
+   declare allowSorting?: boolean;
+
+   declareData() {
+      return super.declareData(...arguments, {
+         text: undefined,
+         colSpan: undefined,
+         rowSpan: undefined,
+         width: undefined,
+         defaultWidth: undefined,
+         resizable: undefined,
+         fixed: undefined,
+         draggable: undefined,
+      });
+   }
+
+   initComponents() {
+      return super.initComponents(...arguments, {
+         tool: this.tool && Widget.create(this.tool),
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      return data.text || super.render(context, instance, key);
+   }
+}
+
+GridColumnHeaderCell.prototype.colSpan = 1;
+GridColumnHeaderCell.prototype.rowSpan = 1;
+GridColumnHeaderCell.prototype.allowSorting = true;
+GridColumnHeaderCell.prototype.styled = true;
+GridColumnHeaderCell.prototype.fixed = false;
+
+// function initGrouping(grouping) {
+//    grouping.forEach((g) => {
+//       if (g.caption) g.caption = getSelector(g.caption);
+//    });
+// }
+
+function copyCellSize(
+   srcTableBody: HTMLTableSectionElement,
+   dstTableBody: HTMLTableSectionElement,
+   applyHeight = true,
+) {
+   if (!srcTableBody || !dstTableBody) return false;
+
+   let changed = false;
+   for (let r = 0; r < dstTableBody.children.length && r < srcTableBody.children.length; r++) {
+      let sr = srcTableBody.children[r];
+      let dr = dstTableBody.children[r];
+      for (let c = 0; c < dr.children.length && c < sr.children.length; c++) {
+         let dc = dr.children[c] as HTMLElement;
+         let sc = sr.children[c] as HTMLElement;
+         let ws = `${sc.offsetWidth}px`;
+         if (!changed && dc.style.width != ws) changed = true;
+         dc.style.width = dc.style.minWidth = dc.style.maxWidth = ws;
+         if (applyHeight) dc.style.height = `${sc.offsetHeight}px`;
+      }
+   }
+   return changed;
+}
+
+function copyCellSizePrecise(
+   srcTableBody: HTMLTableSectionElement,
+   dstTableBody: HTMLTableSectionElement,
+   applyHeight = true,
+) {
+   if (!srcTableBody || !dstTableBody) return false;
+   let changed = false;
+   for (let r = 0; r < dstTableBody.children.length && r < srcTableBody.children.length; r++) {
+      let sr = srcTableBody.children[r];
+      let dr = dstTableBody.children[r];
+      for (let c = 0; c < dr.children.length && c < sr.children.length; c++) {
+         let dc = dr.children[c] as HTMLElement;
+         let sc = sr.children[c] as HTMLElement;
+         let bounds = sc.getBoundingClientRect();
+         let ws = `${bounds.width}px`;
+         if (!changed && dc.style.width != ws) changed = true;
+         dc.style.width = dc.style.minWidth = dc.style.maxWidth = ws;
+         if (applyHeight) dc.style.height = `${bounds.height}px`;
+      }
+   }
+   return changed;
+}
+
+function syncHeaderHeights(header1: HTMLElement, header2: HTMLElement) {
+   /**
+    * In the first pass measure all row heights.
+    * In the second pass apply those heights.
+    * Use getBoundingClientRect() for sub-pixel accuracy.
+    */
+
+   if (!header1 || !header2) return;
+   const rowCount = Math.max(header1.children.length, header2.children.length);
+   let rowHeight = [];
+   for (let r = 0; r < rowCount; r++) {
+      rowHeight.push(0);
+      let tr1 = header1.children[r];
+      let tr2 = header2.children[r];
+      if (tr1) {
+         for (let i = 0; i < tr1.children.length; i++) {
+            let td = tr1.children[i] as HTMLTableCellElement;
+            let h = td.getBoundingClientRect().height;
+            if (td.rowSpan == 1 && h > rowHeight[r]) {
+               rowHeight[r] = h;
+               break;
+            }
+         }
+      }
+      if (tr2) {
+         for (let i = 0; i < tr2.children.length; i++) {
+            let td = tr2.children[i] as HTMLTableCellElement;
+            let h = td.getBoundingClientRect().height;
+            if (td.rowSpan == 1 && h > rowHeight[r]) {
+               rowHeight[r] = h;
+               break;
+            }
+         }
+      }
+   }
+
+   for (let r = 0; r < rowCount; r++) {
+      let tr1 = header1.children[r];
+      let tr2 = header2.children[r];
+      if (tr1) {
+         for (let i = 0; i < tr1.children.length; i++) {
+            let td = tr1.children[i] as HTMLTableCellElement;
+            let h = 0;
+            for (let x = 0; x < td.rowSpan; x++) h += rowHeight[r + x];
+            td.style.height = `${h}px`;
+         }
+      }
+      if (tr2) {
+         for (let i = 0; i < tr2.children.length; i++) {
+            let td = tr2.children[i] as HTMLTableCellElement;
+            let h = 0;
+            for (let x = 0; x < td.rowSpan; x++) h += rowHeight[r + x];
+            td.style.height = `${h}px`;
+         }
+      }
+   }
+}
+
+class AvgHeight {
+   declare groups: Record<string, { sum: number; count: number }>;
+
+   constructor() {
+      this.groups = {};
+   }
+
+   add(group: string, height: number) {
+      let g = this.groups[group];
+      if (!g) g = this.groups[group] = { sum: 0, count: 0 };
+      g.sum += height;
+      g.count++;
+   }
+
+   estimate(group: string): number | null {
+      let g = this.groups[group];
+      if (!g || g.count == 0) return null;
+      return Math.round(g.sum / g.count);
+   }
+}
+
+function getDragDropEvent(ev: React.DragEvent, store: View, type: "dragstart" | "dragmove" | "dragdrop"): DragEvent {
+   return {
+      type,
+      event: ev,
+      cursor: getCursorPos(ev),
+      dataTransfer: ev.dataTransfer,
+      source: {
+         width: 32,
+         height: 32,
+         margin: [],
+         store,
+      },
+   };
+}
diff --git a/packages/cx/src/widgets/grid/GridCell.d.ts b/packages/cx/src/widgets/grid/GridCell.d.ts
deleted file mode 100644
index cc2995cac..000000000
--- a/packages/cx/src/widgets/grid/GridCell.d.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as Cx from "../../core";
-
-interface GridCellProps extends Cx.PureContainerProps {
-   /** Selector used to obtain the value that should be displayed inside the cell. Not required if `field` is used. */
-   value?: Cx.StringProp | Cx.NumberProp;
-
-   /** Selector used to obtain the weight of the cell in aggregate operations, such as weighted averages. */
-   weight?: Cx.Prop<any>;
-
-   /** Add default padding to grid cell. */
-   pad?: Cx.BooleanProp;
-
-   /** Format specifier used to convert the value into a string. */
-   format?: Cx.StringProp;
-
-   /** Name of the field that holds the value to be displayed. */
-   field?: boolean;
-
-   /** Record alias. Default is `$record`. */
-   recordName?: string;
-
-   /** Record alias. Default is `$record`. */
-   recordAlias?: string;
-
-   /** Indicate if a cell is editable or not. Default value is true. */
-   editable?: boolean;
-
-   /**
-    * Used to indicate that the adjacent cells in the column should be merged together.
-    * If set to `same-value`, only cells with the same value will be merged.
-    * If set to `always`, all cells within the group will be merged.
-    * This is an experimental feature that might not work well with other
-    * grid related features such as multi-line rows, buffered rendering, etc.
-    */
-   mergeCells?: Cx.Prop<"same-value" | "always">;
-}
-
-export class GridCell extends Cx.Widget<GridCellProps> {}
diff --git a/packages/cx/src/widgets/grid/GridCell.js b/packages/cx/src/widgets/grid/GridCell.js
deleted file mode 100644
index 0c5f6c4ce..000000000
--- a/packages/cx/src/widgets/grid/GridCell.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { PureContainer } from "../../ui/PureContainer";
-import { Format } from "../../ui/Format";
-import { VDOM } from "../../ui/Widget";
-import { isUndefined } from "../../util/isUndefined";
-
-export class GridCell extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         value: undefined,
-         aggregateValue: undefined,
-         weight: undefined,
-         pad: undefined,
-         format: undefined,
-         colSpan: undefined,
-         rowSpan: undefined,
-         editable: undefined,
-         fixed: undefined,
-         mergeCells: undefined,
-      });
-   }
-
-   init() {
-      if (!this.value && this.field) this.value = { bind: this.recordName + "." + this.field };
-
-      if (isUndefined(this.editable)) this.editable = !!this.editor;
-
-      super.init();
-   }
-
-   prepareCSS(context, instance) {
-      let { data } = instance;
-
-      data.classNames = this.CSS.expand(
-         data.className,
-         data.class,
-         this.CSS.state({
-            pad: data.pad,
-            editable: data.editable,
-            ["aligned-" + this.align]: this.align,
-            mergable: data.merged,
-         }),
-      );
-
-      data.style = this.CSS.parseStyle(data.style);
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      let content;
-
-      if (this.items.length > 0) content = this.renderChildren(context, instance);
-      else {
-         content = data.value;
-         if (data.format) content = Format.value(content, data.format);
-      }
-
-      return {
-         atomic: true,
-         content,
-         instance,
-         data,
-         key,
-         uniqueColumnId: this.uniqueColumnId,
-      };
-   }
-}
-
-GridCell.prototype.pad = true;
-GridCell.prototype.styled = true;
-GridCell.prototype.fixed = false;
-GridCell.prototype.merged = false;
diff --git a/packages/cx/src/widgets/grid/GridCell.ts b/packages/cx/src/widgets/grid/GridCell.ts
new file mode 100644
index 000000000..a384ec027
--- /dev/null
+++ b/packages/cx/src/widgets/grid/GridCell.ts
@@ -0,0 +1,143 @@
+import { StyledContainerBase, StyledContainerConfig } from "../../ui";
+import { Format } from "../../ui/Format";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { isUndefined } from "../../util/isUndefined";
+
+export interface GridCellConfig extends StyledContainerConfig {
+   /** Selector used to obtain the value that should be displayed inside the cell. Not required if `field` is used. */
+   value?: StringProp | NumberProp;
+
+   /** Selector used to obtain the weight of the cell in aggregate operations, such as weighted averages. */
+   weight?: Prop<any>;
+
+   /** Add default padding to grid cell. */
+   pad?: BooleanProp;
+
+   /** Format specifier used to convert the value into a string. */
+   format?: StringProp;
+
+   /** Name of the field that holds the value to be displayed. */
+   field?: string;
+
+   /** Record alias. Default is `$record`. */
+   recordName?: string;
+
+   /** Record alias. Default is `$record`. */
+   recordAlias?: string;
+
+   /** Indicate if a cell is editable or not. Default value is true. */
+   editable?: boolean;
+
+   /**
+    * Used to indicate that the adjacent cells in the column should be merged together.
+    * If set to `same-value`, only cells with the same value will be merged.
+    * If set to `always`, all cells within the group will be merged.
+    * This is an experimental feature that might not work well with other
+    * grid related features such as multi-line rows, buffered rendering, etc.
+    */
+   mergeCells?: Prop<"same-value" | "always">;
+
+   /** Aggregate value for the cell. */
+   aggregateValue?: Prop<any>;
+
+   /** Column span. */
+   colSpan?: NumberProp;
+
+   /** Row span. */
+   rowSpan?: NumberProp;
+
+   /** Whether the column is fixed. */
+   fixed?: BooleanProp;
+
+   /** Cell alignment. */
+   align?: "left" | "right" | "center";
+
+   /** Editor widget for cell editing. */
+   editor?: any;
+
+   /** Unique column identifier. */
+   uniqueColumnId?: string;
+}
+
+export class GridCell extends StyledContainerBase<GridCellConfig> {
+   declare value?: StringProp | NumberProp;
+   declare field?: string;
+   declare recordName?: string;
+   declare editable?: boolean;
+   declare align?: "left" | "right" | "center";
+   declare editor?: any;
+   declare uniqueColumnId?: string;
+   declare pad?: boolean;
+   declare fixed?: boolean;
+   declare merged?: boolean;
+
+   constructor(config?: GridCellConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         value: undefined,
+         aggregateValue: undefined,
+         weight: undefined,
+         pad: undefined,
+         format: undefined,
+         colSpan: undefined,
+         rowSpan: undefined,
+         editable: undefined,
+         fixed: undefined,
+         mergeCells: undefined,
+      });
+   }
+
+   init() {
+      if (!this.value && this.field) this.value = { bind: this.recordName + "." + this.field };
+
+      if (isUndefined(this.editable)) this.editable = !!this.editor;
+
+      super.init();
+   }
+
+   prepareCSS(context: RenderingContext, instance: Instance) {
+      let { data } = instance;
+
+      data.classNames = this.CSS.expand(
+         data.className,
+         data.class,
+         this.CSS.state({
+            pad: data.pad,
+            editable: data.editable,
+            ["aligned-" + this.align]: this.align,
+            mergable: data.merged,
+         }),
+      );
+
+      data.style = this.CSS.parseStyle(data.style);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      let content;
+
+      if (this.items.length > 0) content = this.renderChildren(context, instance);
+      else {
+         content = data.value;
+         if (data.format) content = Format.value(content, data.format);
+      }
+
+      return {
+         atomic: true,
+         content,
+         instance,
+         data,
+         key,
+         uniqueColumnId: this.uniqueColumnId,
+      };
+   }
+}
+
+GridCell.prototype.pad = true;
+GridCell.prototype.fixed = false;
+GridCell.prototype.merged = false;
diff --git a/packages/cx/src/widgets/grid/GridCellEditor.js b/packages/cx/src/widgets/grid/GridCellEditor.js
deleted file mode 100644
index a71de0888..000000000
--- a/packages/cx/src/widgets/grid/GridCellEditor.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import {Container} from "../../ui/Container";
-import { VDOM} from "../../ui/VDOM";
-import {findFirstChild, isFocusable, isFocusedDeep} from "../../util/DOM";
-import {getActiveElement} from "../../util/getActiveElement";
-
-export class GridCellEditor extends Container {
-   render(context, instance, key) {
-      let {data} = instance;
-      return <GridCellEditorCmp
-         key={key}
-         className={data.className}
-         style={data.style}
-      >
-         {this.renderChildren(context, instance)}
-      </GridCellEditorCmp>
-   }
-}
-
-GridCellEditor.prototype.styled = true;
-
-class GridCellEditorCmp extends VDOM.Component {
-   render() {
-      let {className, style, children} = this.props;
-
-      return <div
-         ref={el => this.el = el}
-         className={className}
-         style={style}
-      >
-         {children}
-      </div>
-   }
-
-   componentDidMount() {
-      if (!isFocusedDeep(this.el)) {
-         let focusableChild = findFirstChild(this.el, isFocusable);
-         if (focusableChild)
-            focusableChild.focus();
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/grid/GridCellEditor.tsx b/packages/cx/src/widgets/grid/GridCellEditor.tsx
new file mode 100644
index 000000000..6db2eaf97
--- /dev/null
+++ b/packages/cx/src/widgets/grid/GridCellEditor.tsx
@@ -0,0 +1,58 @@
+/** @jsxImportSource react */
+import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { VDOM } from "../../ui/VDOM";
+import { findFirstChild, isFocusable, isFocusedDeep } from "../../util/DOM";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface GridCellEditorConfig extends StyledContainerConfig {}
+
+export class GridCellEditor extends ContainerBase<GridCellEditorConfig> {
+   constructor(config?: GridCellEditorConfig) {
+      super(config);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      return (
+         <GridCellEditorCmp key={key} className={data.className} style={data.style}>
+            {this.renderChildren(context, instance)}
+         </GridCellEditorCmp>
+      );
+   }
+}
+
+GridCellEditor.prototype.styled = true;
+
+interface GridCellEditorCmpProps {
+   className?: string;
+   style?: React.CSSProperties;
+   children?: React.ReactNode;
+}
+
+class GridCellEditorCmp extends VDOM.Component<GridCellEditorCmpProps> {
+   el: HTMLDivElement | null = null;
+
+   render() {
+      let { className, style, children } = this.props;
+
+      return (
+         <div
+            ref={(el) => {
+               this.el = el;
+            }}
+            className={className}
+            style={style}
+         >
+            {children}
+         </div>
+      );
+   }
+
+   componentDidMount() {
+      if (!isFocusedDeep(this.el!)) {
+         let focusableChild = findFirstChild(this.el!, isFocusable);
+         if (focusableChild) focusableChild.focus();
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/grid/GridRow.js b/packages/cx/src/widgets/grid/GridRow.js
deleted file mode 100644
index 3953b9157..000000000
--- a/packages/cx/src/widgets/grid/GridRow.js
+++ /dev/null
@@ -1,228 +0,0 @@
-import { preventFocusOnTouch, unfocusElement } from "../../ui/FocusManager";
-import { VDOM } from "../../ui/Widget";
-import { closest } from "../../util/DOM";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { KeyCode } from "../../util/KeyCode";
-import { ValidationGroup } from "../../widgets/form/ValidationGroup";
-import { ddDetect, ddMouseDown, ddMouseUp, isDragHandleEvent } from "../drag-drop/ops";
-import { GridRowLine } from "./GridRowLine";
-
-export class GridRow extends ValidationGroup {
-   declareData(...args) {
-      super.declareData(...args, {
-         hoverId: undefined,
-      });
-   }
-
-   init() {
-      this.items = [];
-      for (let i = 0; i < 10; i++) {
-         if (this["line" + i])
-            this.items.push(
-               GridRowLine.create(this["line" + i], {
-                  recordName: this.recordName,
-               }),
-            );
-      }
-      super.init();
-   }
-
-   explore(context, instance) {
-      context.push("dragHandles", (instance.dragHandles = []));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      super.exploreCleanup(context, instance);
-      context.pop("dragHandles");
-   }
-}
-
-GridRow.prototype.styled = true; //styles used on the wrapper component
-
-export class GridRowComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onMouseDown = this.onMouseDown.bind(this);
-      this.onMouseLeave = this.onMouseLeave.bind(this);
-      this.onClick = this.onClick.bind(this);
-      this.onKeyDown = this.onKeyDown.bind(this);
-
-      let { grid, instance } = props;
-
-      if (grid.widget.onRowDoubleClick)
-         this.onDoubleClick = (e) => {
-            grid.invoke("onRowDoubleClick", e, instance);
-         };
-
-      if (grid.widget.cellEditable)
-         this.onDoubleClick = (e) => {
-            this.props.parent.moveCursor(this.props.cursorIndex, {
-               cellEdit: true,
-            });
-            e.preventDefault(); //prevent text selection
-         };
-
-      if (grid.widget.onRowContextMenu)
-         this.onRowContextMenu = (e) => {
-            grid.invoke("onRowContextMenu", e, instance);
-         };
-   }
-
-   render() {
-      let { className, dragSource, instance, record, useTrTag, children } = this.props;
-      let { data, widget } = instance;
-      let { CSS } = widget;
-      let move, up, keyDown, leave;
-
-      if (dragSource || data.hoverId != null) {
-         move = this.onMouseMove;
-         up = ddMouseUp;
-      }
-
-      if (data.hoverId != null) {
-         leave = this.onMouseLeave;
-      }
-
-      if (widget.onRowClick) keyDown = this.onKeyDown;
-
-      return VDOM.createElement(
-         useTrTag ? "tr" : "tbody",
-         {
-            className: CSS.expand(data.classNames, className, this.state && this.state.hover && CSS.state("hover")),
-            style: data.style,
-            onClick: this.onClick,
-            onDoubleClick: this.onDoubleClick,
-            onTouchStart: this.onMouseDown,
-            onMouseDown: this.onMouseDown,
-            onTouchMove: move,
-            onMouseMove: move,
-            onMouseLeave: leave,
-            onTouchEnd: up,
-            onMouseUp: up,
-            onKeyDown: keyDown,
-            onContextMenu: this.onRowContextMenu,
-            "data-record-key": record.key,
-         },
-         children,
-      );
-   }
-
-   onMouseDown(e) {
-      let { grid, record, instance, parent, cursorIndex } = this.props;
-
-      if (this.props.dragSource) {
-         ddMouseDown(e);
-         if (isDragHandleEvent(e) || instance.dragHandles.length == 0) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            //close context menu
-            unfocusElement(e.target, false);
-         }
-      }
-
-      let { store, widget } = grid;
-
-      if (widget.selectable) preventFocusOnTouch(e);
-
-      parent.moveCursor(cursorIndex, {
-         select:
-            !isTouchEvent() &&
-            (e.shiftKey || e.ctrlKey || !widget.selection.isSelected(store, record.data, record.index)),
-         selectRange: e.shiftKey,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         cellIndex: this.getCellIndex(e),
-      });
-
-      if (e.shiftKey && !isTouchEvent()) e.preventDefault();
-   }
-
-   onMouseMove(e) {
-      let { grid, instance, parent, record } = this.props;
-      if (ddDetect(e) && (isDragHandleEvent(e) || instance.dragHandles.length == 0)) parent.beginDragDrop(e, record);
-      if (grid.hoverSync && instance.data.hoverId != null)
-         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, true);
-   }
-
-   onMouseLeave(e) {
-      let { grid, instance } = this.props;
-      if (grid.hoverSync && instance.data.hoverId != null)
-         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, false);
-   }
-
-   getCellIndex(e) {
-      let td = closest(e.target, (node) => node.tagName == "TD");
-      if (td)
-         return (
-            (this.props.fixed ? 0 : this.props.grid.fixedColumnCount) +
-            Array.from(td.parentElement.children).indexOf(td)
-         );
-      return -1;
-   }
-
-   onKeyDown(e) {
-      let { grid, instance } = this.props;
-
-      if (e.keyCode == KeyCode.enter && grid.invoke("onRowClick", e, instance) === false) {
-         e.stopPropagation();
-      }
-   }
-
-   onClick(e) {
-      let { grid, record, instance, parent, cursorIndex } = this.props;
-      let { store, widget } = grid;
-
-      if (grid.widget.onRowClick) {
-         if (grid.invoke("onRowClick", e, instance) === false) return;
-      }
-
-      e.stopPropagation();
-
-      parent.moveCursor(cursorIndex, {
-         select:
-            isTouchEvent() ||
-            (!e.shiftKey && !e.ctrlKey && widget.selection.isSelected(store, record.data, record.index)),
-         selectRange: e.shiftKey,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         cellIndex: this.getCellIndex(e),
-      });
-   }
-
-   shouldComponentUpdate(props, state) {
-      return (
-         props.shouldUpdate !== false ||
-         props.record != this.props.record ||
-         props.cursor != this.props.cursor ||
-         props.selected != this.props.selected ||
-         props.isBeingDragged != this.props.isBeingDragged ||
-         props.cursorIndex !== this.props.cursorIndex ||
-         props.cursorCellIndex !== this.props.cursorCellIndex ||
-         props.cellEdit !== this.props.cellEdit ||
-         props.dimensionsVersion !== this.props.dimensionsVersion ||
-         props.isDraggedOver !== this.props.isDraggedOver ||
-         state !== this.state
-      );
-   }
-
-   compontentWillUnmount() {
-      this.unsubscribeHoverSync && this.unsubscribeHoverSync();
-   }
-
-   componentDidMount() {
-      let { grid } = this.props;
-      if (grid.hoverSync) {
-         this.unsubscribeHoverSync = grid.hoverSync.subscribe(grid.widget.hoverChannel, (hoverId) => {
-            let hover = hoverId === this.props.instance.data.hoverId;
-            if (!this.state || hover !== this.state.hover) this.setState({ hover });
-         });
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/grid/GridRow.ts b/packages/cx/src/widgets/grid/GridRow.ts
new file mode 100644
index 000000000..72aef4a29
--- /dev/null
+++ b/packages/cx/src/widgets/grid/GridRow.ts
@@ -0,0 +1,302 @@
+import { preventFocusOnTouch, unfocusElement } from "../../ui/FocusManager";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM } from "../../ui/Widget";
+import { closest } from "../../util/DOM";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { KeyCode } from "../../util/KeyCode";
+import { ValidationGroup, ValidationGroupConfig, ValidationGroupInstance } from "../../widgets/form/ValidationGroup";
+import { ddDetect, ddMouseDown, ddMouseUp, isDragHandleEvent } from "../drag-drop/ops";
+import { GridRowLine, GridRowLineConfig } from "./GridRowLine";
+import type { GridInstance } from "./Grid";
+import { BooleanProp, StringProp, Prop, StructuredProp } from "../../ui/Prop";
+import { WidgetStyleConfig } from "../../ui/Widget";
+
+export interface GridRowInstance extends ValidationGroupInstance {
+   dragHandles: any[];
+}
+
+export interface GridRowConfig extends ValidationGroupConfig, WidgetStyleConfig {
+   hoverId?: any;
+   line0?: GridRowLineConfig;
+   line1?: GridRowLineConfig;
+   line2?: GridRowLineConfig;
+   line3?: GridRowLineConfig;
+   line4?: GridRowLineConfig;
+   line5?: GridRowLineConfig;
+   line6?: GridRowLineConfig;
+   line7?: GridRowLineConfig;
+   line8?: GridRowLineConfig;
+   line9?: GridRowLineConfig;
+   recordName?: string;
+   invalid?: BooleanProp;
+   valid?: BooleanProp;
+   mod?: StringProp | Prop<string[]> | StructuredProp;
+}
+
+export class GridRow extends ValidationGroup<GridRowConfig> {
+   declare recordName?: string;
+   declare line0?: GridRowLineConfig;
+   declare line1?: GridRowLineConfig;
+   declare line2?: GridRowLineConfig;
+   declare line3?: GridRowLineConfig;
+   declare line4?: GridRowLineConfig;
+   declare line5?: GridRowLineConfig;
+   declare line6?: GridRowLineConfig;
+   declare line7?: GridRowLineConfig;
+   declare line8?: GridRowLineConfig;
+   declare line9?: GridRowLineConfig;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         hoverId: undefined,
+      });
+   }
+
+   init(): void {
+      this.items = [];
+      for (let i = 0; i < 10; i++) {
+         const lineKey = ("line" + i) as keyof GridRow;
+         if (this[lineKey])
+            this.items.push(
+               GridRowLine.create(this[lineKey] as GridRowLineConfig, {
+                  recordName: this.recordName,
+               }),
+            );
+      }
+      super.init();
+   }
+
+   explore(context: RenderingContext, instance: GridRowInstance): void {
+      context.push("dragHandles", (instance.dragHandles = []));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: GridRowInstance): void {
+      super.exploreCleanup(context, instance);
+      context.pop("dragHandles");
+   }
+}
+
+GridRow.prototype.styled = true; //styles used on the wrapper component
+
+export interface GridRowComponentProps {
+   key?: string;
+   className?: string;
+   store?: any;
+   dragSource?: any;
+   instance: GridRowInstance;
+   grid: GridInstance;
+   record: any;
+   parent: any;
+   cursorIndex?: number;
+   selected?: boolean;
+   isBeingDragged?: any;
+   isDraggedOver?: boolean;
+   cursor?: boolean;
+   cursorCellIndex?: number | false;
+   cellEdit?: any;
+   onMouseLeave?: any;
+   useTrTag?: boolean;
+   shouldUpdate?: boolean;
+   dimensionsVersion?: number;
+   fixed?: boolean;
+   children?: React.ReactNode;
+}
+
+interface GridRowComponentState {
+   hover?: boolean;
+}
+
+export class GridRowComponent extends VDOM.Component<GridRowComponentProps, GridRowComponentState> {
+   onDoubleClick?: (e: React.MouseEvent) => void;
+   onRowContextMenu?: (e: React.MouseEvent) => void;
+   unsubscribeHoverSync?: () => void;
+
+   constructor(props: GridRowComponentProps) {
+      super(props);
+      this.onMouseMove = this.onMouseMove.bind(this);
+      this.onMouseDown = this.onMouseDown.bind(this);
+      this.onMouseLeave = this.onMouseLeave.bind(this);
+      this.onClick = this.onClick.bind(this);
+      this.onKeyDown = this.onKeyDown.bind(this);
+
+      let { grid, instance } = props;
+
+      if (grid.widget.onRowDoubleClick)
+         this.onDoubleClick = (e) => {
+            grid.invoke("onRowDoubleClick", e, instance);
+         };
+
+      if (grid.widget.cellEditable)
+         this.onDoubleClick = (e) => {
+            this.props.parent.moveCursor(this.props.cursorIndex, {
+               cellEdit: true,
+            });
+            e.preventDefault(); //prevent text selection
+         };
+
+      if (grid.widget.onRowContextMenu)
+         this.onRowContextMenu = (e) => {
+            grid.invoke("onRowContextMenu", e, instance);
+         };
+   }
+
+   render(): React.ReactNode {
+      let { className, dragSource, instance, record, useTrTag, children } = this.props;
+      let { data, widget } = instance;
+      let { CSS } = widget;
+      let move: ((e: React.MouseEvent | React.TouchEvent) => void) | undefined,
+         up: ((e: React.MouseEvent | React.TouchEvent) => void) | undefined,
+         keyDown: ((e: React.KeyboardEvent) => void) | undefined,
+         leave: ((e: React.MouseEvent) => void) | undefined;
+
+      if (dragSource || data.hoverId != null) {
+         move = this.onMouseMove;
+         up = ddMouseUp;
+      }
+
+      if (data.hoverId != null) {
+         leave = this.onMouseLeave;
+      }
+
+      if (this.props.grid.widget.onRowClick) keyDown = this.onKeyDown;
+
+      return VDOM.createElement(
+         useTrTag ? "tr" : "tbody",
+         {
+            className: CSS.expand(data.classNames, className, this.state && this.state.hover && CSS.state("hover")),
+            style: data.style,
+            onClick: this.onClick,
+            onDoubleClick: this.onDoubleClick,
+            onTouchStart: this.onMouseDown,
+            onMouseDown: this.onMouseDown,
+            onTouchMove: move,
+            onMouseMove: move,
+            onMouseLeave: leave,
+            onTouchEnd: up,
+            onMouseUp: up,
+            onKeyDown: keyDown,
+            onContextMenu: this.onRowContextMenu,
+            "data-record-key": record.key,
+         },
+         children,
+      );
+   }
+
+   onMouseDown(e: React.MouseEvent | React.TouchEvent): void {
+      let { grid, record, instance, parent, cursorIndex } = this.props;
+
+      if (this.props.dragSource) {
+         ddMouseDown(e);
+         if (isDragHandleEvent(e) || instance.dragHandles.length == 0) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            //close context menu
+            unfocusElement(e.target as Element, false);
+         }
+      }
+
+      let { store, widget } = grid;
+
+      if (widget.selectable) preventFocusOnTouch(e);
+
+      parent.moveCursor(cursorIndex, {
+         select:
+            !isTouchEvent() &&
+            (e.shiftKey || e.ctrlKey || !widget.selection.isSelected(store, record.data, record.index)),
+         selectRange: e.shiftKey,
+         selectOptions: {
+            toggle: e.ctrlKey && !e.shiftKey,
+            add: e.ctrlKey && e.shiftKey,
+         },
+         cellIndex: this.getCellIndex(e),
+      });
+
+      if (e.shiftKey && !isTouchEvent()) e.preventDefault();
+   }
+
+   onMouseMove(e: React.MouseEvent | React.TouchEvent): void {
+      let { grid, instance, parent, record } = this.props;
+      if (ddDetect(e) && (isDragHandleEvent(e) || instance.dragHandles.length == 0)) parent.beginDragDrop(e, record);
+      if (grid.hoverSync && instance.data.hoverId != null)
+         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, true);
+   }
+
+   onMouseLeave(e: React.MouseEvent): void {
+      let { grid, instance } = this.props;
+      if (grid.hoverSync && instance.data.hoverId != null)
+         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, false);
+   }
+
+   getCellIndex(e: React.MouseEvent | React.TouchEvent | React.KeyboardEvent): number {
+      let td = closest(e.target as Element, (node) => (node as Element).tagName == "TD") as HTMLTableCellElement | null;
+      if (td)
+         return (
+            (this.props.fixed ? 0 : this.props.grid.fixedColumnCount) +
+            Array.from(td.parentElement!.children).indexOf(td)
+         );
+      return -1;
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let { grid, instance } = this.props;
+
+      if (e.keyCode == KeyCode.enter && grid.invoke("onRowClick", e, instance) === false) {
+         e.stopPropagation();
+      }
+   }
+
+   onClick(e: React.MouseEvent): void {
+      let { grid, record, instance, parent, cursorIndex } = this.props;
+      let { store, widget } = grid;
+
+      if (grid.widget.onRowClick) {
+         if (grid.invoke("onRowClick", e, instance) === false) return;
+      }
+
+      e.stopPropagation();
+
+      parent.moveCursor(cursorIndex, {
+         select:
+            isTouchEvent() ||
+            (!e.shiftKey && !e.ctrlKey && widget.selection.isSelected(store, record.data, record.index)),
+         selectRange: e.shiftKey,
+         selectOptions: {
+            toggle: e.ctrlKey && !e.shiftKey,
+            add: e.ctrlKey && e.shiftKey,
+         },
+         cellIndex: this.getCellIndex(e),
+      });
+   }
+
+   shouldComponentUpdate(props: GridRowComponentProps, state: GridRowComponentState): boolean {
+      return (
+         props.shouldUpdate !== false ||
+         props.record != this.props.record ||
+         props.cursor != this.props.cursor ||
+         props.selected != this.props.selected ||
+         props.isBeingDragged != this.props.isBeingDragged ||
+         props.cursorIndex !== this.props.cursorIndex ||
+         props.cursorCellIndex !== this.props.cursorCellIndex ||
+         props.cellEdit !== this.props.cellEdit ||
+         props.dimensionsVersion !== this.props.dimensionsVersion ||
+         props.isDraggedOver !== this.props.isDraggedOver ||
+         state !== this.state
+      );
+   }
+
+   componentWillUnmount(): void {
+      this.unsubscribeHoverSync && this.unsubscribeHoverSync();
+   }
+
+   componentDidMount(): void {
+      let { grid } = this.props;
+      if (grid.hoverSync) {
+         this.unsubscribeHoverSync = grid.hoverSync.subscribe(grid.widget.hoverChannel, (hoverId: any) => {
+            let hover = hoverId === this.props.instance.data.hoverId;
+            if (!this.state || hover !== this.state.hover) this.setState({ hover });
+         });
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/grid/GridRowLine.js b/packages/cx/src/widgets/grid/GridRowLine.js
deleted file mode 100644
index 62318e013..000000000
--- a/packages/cx/src/widgets/grid/GridRowLine.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Container } from "../../ui/Container";
-import { VDOM, Widget } from "../../ui/Widget";
-import { GridCell } from "./GridCell";
-
-export class GridRowLine extends Container {
-   init() {
-      this.items = Widget.create(GridCell, this.columns || [], {
-         recordName: this.recordName
-      });
-      super.init();
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      return {
-         key,
-         data,
-         content: this.renderChildren(context, instance),
-         atomic: true
-      };
-   }
-}
-
-GridRowLine.prototype.styled = true;
diff --git a/packages/cx/src/widgets/grid/GridRowLine.ts b/packages/cx/src/widgets/grid/GridRowLine.ts
new file mode 100644
index 000000000..0a65892c7
--- /dev/null
+++ b/packages/cx/src/widgets/grid/GridRowLine.ts
@@ -0,0 +1,49 @@
+import { Container, ContainerConfig } from "../../ui/Container";
+import { Widget } from "../../ui/Widget";
+import { GridCell } from "./GridCell";
+import type { GridColumnConfig } from "./Grid";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp } from "../../ui/Prop";
+
+export interface GridRowLineConfig extends ContainerConfig {
+   /** Array of column configurations for this row line. */
+   columns?: GridColumnConfig[];
+
+   /** Record alias used for data binding. */
+   recordName?: string;
+
+   /** Whether this row line is visible. */
+   visible?: BooleanProp;
+
+   /** Whether to show the header row for this line. */
+   showHeader?: BooleanProp;
+}
+
+export class GridRowLine extends Container {
+   declare columns?: GridColumnConfig[];
+   declare recordName?: string;
+
+   constructor(config?: GridRowLineConfig) {
+      super(config);
+   }
+
+   init() {
+      this.items = Widget.create(GridCell, this.columns || [], {
+         recordName: this.recordName
+      }) as unknown as Widget[];
+      super.init();
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      return {
+         key,
+         data,
+         content: this.renderChildren(context, instance),
+         atomic: true
+      };
+   }
+}
+
+GridRowLine.prototype.styled = true;
diff --git a/packages/cx/src/widgets/grid/Pagination.d.ts b/packages/cx/src/widgets/grid/Pagination.d.ts
deleted file mode 100644
index ffb911b3b..000000000
--- a/packages/cx/src/widgets/grid/Pagination.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as Cx from '../../core';
-
-interface PaginationProps extends Cx.WidgetProps, Cx.StyledContainerProps {
-
-   page?: Cx.NumberProp,
-   length?: Cx.NumberProp,
-   pageCount?: Cx.NumberProp,
-
-   /** Base CSS class to be applied to the element. Defaults to 'pagination'. */
-   baseClass?: string
-   
-}
-
-export class Pagination extends Cx.Widget<PaginationProps> {}
diff --git a/packages/cx/src/widgets/grid/Pagination.js b/packages/cx/src/widgets/grid/Pagination.js
deleted file mode 100644
index 85bc9e1b9..000000000
--- a/packages/cx/src/widgets/grid/Pagination.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import {Widget, VDOM} from '../../ui/Widget';
-import {KeyCode} from '../../util/KeyCode';
-import {preventFocusOnTouch} from '../../ui/FocusManager';
-import ForwardIcon from '../icons/forward';
-
-export class Pagination extends Widget {
-
-   declareData() {
-      super.declareData({
-         page: undefined,
-         length: undefined,
-         pageCount: undefined
-      }, ...arguments);
-   }
-
-   render(context, instance, key) {
-      let {data, widget} = instance;
-      let {page, pageCount, length} = data;
-      let {CSS, baseClass} = widget;
-
-      if (!pageCount)
-         pageCount = 1;
-
-      let minPage = Math.max(1, page - Math.floor(length / 2));
-      let maxPage = minPage + length - 1;
-
-      if (maxPage > pageCount) {
-         maxPage = Math.max(pageCount, length);
-         minPage = maxPage - length + 1;
-      }
-
-      let nextPageIcon = <ForwardIcon className={CSS.element(baseClass, "icon-next-page")}/>;
-      let prevPageIcon = <ForwardIcon className={CSS.element(baseClass, "icon-prev-page")}/>;
-
-      let pageBtns = [];
-
-      for (let p = minPage - 1; p <= maxPage + 1; p++) {
-         pageBtns.push(<li
-            key={p < minPage ? '-1' : p > maxPage ? '-2' : p}
-            className={CSS.element(baseClass, "page", {
-               active: page == p,
-               disabled: (p <= maxPage && p > pageCount) || (p < minPage && page == 1) || (p > maxPage && page + 1 > pageCount)
-            })}
-            onMouseDown={e => {
-               e.stopPropagation();
-               preventFocusOnTouch(e);
-            }}
-            onClick={e => {
-               this.setPage(e, instance, p < minPage ? page - 1 : p > maxPage ? page + 1 : p)
-            }}>
-            {p < minPage ? prevPageIcon : p > maxPage ? nextPageIcon : p}
-         </li>)
-      }
-
-      return <ul
-         key={key}
-         className={data.classNames}
-         style={data.style}
-         tabIndex={0}
-         onKeyDown={ e => {
-            this.onKeyDown(e, instance)
-         }}
-      >
-         {pageBtns}
-      </ul>;
-   }
-
-   onKeyDown(e, instance) {
-      let {data} = instance;
-      switch (e.keyCode) {
-         case KeyCode.left:
-            this.setPage(e, instance, data.page - 1);
-            break;
-
-         case KeyCode.right:
-            this.setPage(e, instance, data.page + 1);
-            break;
-      }
-   }
-
-   setPage(e, instance, page) {
-      e.preventDefault();
-      e.stopPropagation();
-      let {data} = instance;
-      let {pageCount} = data;
-      if (page <= pageCount && page > 0)
-         instance.set('page', page);
-   }
-}
-
-Pagination.prototype.baseClass = "pagination";
-Pagination.prototype.length = 5;
-Pagination.prototype.styled = true;
-
-Widget.alias('pagination', Pagination);
\ No newline at end of file
diff --git a/packages/cx/src/widgets/grid/Pagination.scss b/packages/cx/src/widgets/grid/Pagination.scss
index 24a7338c6..b5623bee0 100644
--- a/packages/cx/src/widgets/grid/Pagination.scss
+++ b/packages/cx/src/widgets/grid/Pagination.scss
@@ -1,12 +1,14 @@
+@use "sass:map";
+
 @mixin cx-pagination(
    $name: "pagination",
    $state-style-map: $cx-grid-pagination-state-style-map,
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       display: inline-block;
diff --git a/packages/cx/src/widgets/grid/Pagination.tsx b/packages/cx/src/widgets/grid/Pagination.tsx
new file mode 100644
index 000000000..f787999cb
--- /dev/null
+++ b/packages/cx/src/widgets/grid/Pagination.tsx
@@ -0,0 +1,126 @@
+/** @jsxImportSource react */
+import { Widget, VDOM, WidgetStyleConfig } from "../../ui/Widget";
+import { KeyCode } from "../../util/KeyCode";
+import { preventFocusOnTouch } from "../../ui/FocusManager";
+import ForwardIcon from "../icons/forward";
+import { NumberProp } from "../../ui/Prop";
+import { StyledContainerConfig } from "../../ui/Container";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface PaginationConfig extends StyledContainerConfig {
+   /** Current page number. */
+   page?: NumberProp;
+
+   /** Total number of pages. */
+   pageCount?: NumberProp;
+
+   /** Number of page buttons to display. */
+   length?: NumberProp;
+}
+
+export class Pagination extends Widget<PaginationConfig> {
+   declare baseClass: string;
+   declare length: number;
+
+   constructor(config?: PaginationConfig) {
+      super(config);
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            page: undefined,
+            length: undefined,
+            pageCount: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      let { page, pageCount, length } = data;
+      let { CSS, baseClass } = this;
+
+      if (!pageCount) pageCount = 1;
+
+      let minPage = Math.max(1, page - Math.floor(length / 2));
+      let maxPage = minPage + length - 1;
+
+      if (maxPage > pageCount) {
+         maxPage = Math.max(pageCount, length);
+         minPage = maxPage - length + 1;
+      }
+
+      let nextPageIcon = <ForwardIcon className={CSS.element(baseClass, "icon-next-page")} />;
+      let prevPageIcon = <ForwardIcon className={CSS.element(baseClass, "icon-prev-page")} />;
+
+      let pageBtns = [];
+
+      for (let p = minPage - 1; p <= maxPage + 1; p++) {
+         pageBtns.push(
+            <li
+               key={p < minPage ? "-1" : p > maxPage ? "-2" : p}
+               className={CSS.element(baseClass, "page", {
+                  active: page == p,
+                  disabled:
+                     (p <= maxPage && p > pageCount) ||
+                     (p < minPage && page == 1) ||
+                     (p > maxPage && page + 1 > pageCount),
+               })}
+               onMouseDown={(e) => {
+                  e.stopPropagation();
+                  preventFocusOnTouch(e);
+               }}
+               onClick={(e) => {
+                  this.setPage(e, instance, p < minPage ? page - 1 : p > maxPage ? page + 1 : p);
+               }}
+            >
+               {p < minPage ? prevPageIcon : p > maxPage ? nextPageIcon : p}
+            </li>,
+         );
+      }
+
+      return (
+         <ul
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            tabIndex={0}
+            onKeyDown={(e) => {
+               this.onKeyDown(e, instance);
+            }}
+         >
+            {pageBtns}
+         </ul>
+      );
+   }
+
+   onKeyDown(e: React.KeyboardEvent, instance: Instance) {
+      let { data } = instance;
+      switch (e.keyCode) {
+         case KeyCode.left:
+            this.setPage(e, instance, data.page - 1);
+            break;
+
+         case KeyCode.right:
+            this.setPage(e, instance, data.page + 1);
+            break;
+      }
+   }
+
+   setPage(e: React.SyntheticEvent, instance: Instance, page: number) {
+      e.preventDefault();
+      e.stopPropagation();
+      let { data } = instance;
+      let { pageCount } = data;
+      if (page <= pageCount && page > 0) instance.set("page", page);
+   }
+}
+
+Pagination.prototype.baseClass = "pagination";
+Pagination.prototype.length = 5;
+Pagination.prototype.styled = true;
+
+Widget.alias("pagination", Pagination);
diff --git a/packages/cx/src/widgets/grid/TreeNode.d.ts b/packages/cx/src/widgets/grid/TreeNode.d.ts
deleted file mode 100644
index f6e79037e..000000000
--- a/packages/cx/src/widgets/grid/TreeNode.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as Cx from "../../core";
-
-interface TreeNodeProps extends Cx.WidgetProps {
-   level?: Cx.NumberProp;
-   expanded?: Cx.BooleanProp;
-   leaf?: Cx.BooleanProp;
-   text?: Cx.StringProp;
-   loading?: Cx.BooleanProp;
-   icon?: Cx.StringProp;
-
-   itemIcon?: Cx.StringProp;
-   leafIcon?: Cx.StringProp;
-   loadingIcon?: string;
-   folderIcon?: Cx.StringProp;
-   openFolderIcon?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Defaults to 'treenode'. */
-   baseClass?: string;
-   hideIcon?: boolean;
-   hideArrow?: Cx.BooleanProp;
-}
-
-export class TreeNode extends Cx.Widget<TreeNodeProps> {}
diff --git a/packages/cx/src/widgets/grid/TreeNode.js b/packages/cx/src/widgets/grid/TreeNode.js
deleted file mode 100644
index deda5feab..000000000
--- a/packages/cx/src/widgets/grid/TreeNode.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import {Widget, VDOM} from '../../ui/Widget';
-import {Icon} from '../Icon';
-import {stopPropagation} from "../../util/eventCallbacks";
-import {Container} from "../../ui/Container";
-
-export class TreeNode extends Container {
-
-   init() {
-      if (this.itemIcon)
-         this.leafIcon = this.itemIcon;
-      super.init();
-   }
-
-   declareData() {
-      super.declareData({
-         level: undefined,
-         expanded: undefined,
-         leaf: undefined,
-         text: undefined,
-         loading: undefined,
-         icon: undefined,
-         leafIcon: undefined,
-         openFolderIcon: undefined,
-         folderIcon: undefined,
-         hideArrow: undefined
-      }, ...arguments);
-   }
-
-   prepareData(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         expanded: data.expanded,
-         loading: data.loading,
-         leaf: data.leaf,
-         folder: !data.leaf,
-         icon: !this.hideIcon
-      };
-      data.stateMods[`level-${data.level}`] = true;
-      super.prepareData(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data, widget} = instance;
-      let {CSS, baseClass} = widget;
-
-      let icon = data.icon;
-
-      if (!data.icon) {
-         if (data.leaf)
-            icon = data.leafIcon;
-         else {
-            if (data.loading)
-               icon = this.loadingIcon;
-            else if (data.expanded)
-               icon = data.openFolderIcon || data.folderIcon;
-            else
-               icon = data.folderIcon;
-         }
-      }
-
-      let arrowIcon = this.arrowIcon;
-      if (this.hideIcon && data.loading)
-         arrowIcon = this.loadingIcon;
-
-      return <div key={key} className={data.classNames} style={data.style}>
-         <div
-            className={CSS.element(baseClass, 'handle')}
-            onClick={e => this.toggle(e, instance)}
-            onMouseDown={!this.hideIcon ? stopPropagation : undefined}
-         >
-            { !data.leaf && !data.hideArrow && Icon.render(arrowIcon, { className: CSS.element(baseClass, 'arrow')}) }
-            {
-               !this.hideIcon && Icon.render(icon, {
-                  className: CSS.element(baseClass, 'icon')
-               })
-            }
-         </div>
-         <div>
-            {data.text || this.renderChildren(context, instance)}
-         </div>
-      </div>;
-   }
-
-   toggle(e, instance) {
-      let {data} = instance;
-      if (!data.leaf)
-         instance.set('expanded', !data.expanded);
-      e.preventDefault();
-      e.stopPropagation();
-   }
-}
-
-TreeNode.prototype.baseClass = 'treenode';
-TreeNode.prototype.itemIcon = 'file';
-TreeNode.prototype.loadingIcon = 'loading';
-TreeNode.prototype.folderIcon = 'folder';
-TreeNode.prototype.openFolderIcon = 'folder-open';
-TreeNode.prototype.arrowIcon = 'drop-down';
-TreeNode.prototype.styled = true;
-TreeNode.prototype.hideIcon = false;
-
-Widget.alias('treenode', TreeNode);
diff --git a/packages/cx/src/widgets/grid/TreeNode.scss b/packages/cx/src/widgets/grid/TreeNode.scss
index 06360e03b..b0e035389 100644
--- a/packages/cx/src/widgets/grid/TreeNode.scss
+++ b/packages/cx/src/widgets/grid/TreeNode.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-treenode(
    $name: "treenode",
    $icon-size: $cx-default-icon-size,
@@ -5,10 +7,10 @@
    $handle-state-style-map: $cx-input-right-icon-state-style-map,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       padding-left: $handle-size + $icon-size * 0.25;
diff --git a/packages/cx/src/widgets/grid/TreeNode.tsx b/packages/cx/src/widgets/grid/TreeNode.tsx
new file mode 100644
index 000000000..ebfe97483
--- /dev/null
+++ b/packages/cx/src/widgets/grid/TreeNode.tsx
@@ -0,0 +1,154 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Icon } from "../Icon";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { BooleanProp, NumberProp, StringProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface TreeNodeConfig extends StyledContainerConfig {
+   /** Indentation level of the node. */
+   level?: NumberProp;
+
+   /** Set to `true` if the node is expanded. */
+   expanded?: BooleanProp;
+
+   /** Set to `true` if the node is a leaf (has no children). */
+   leaf?: BooleanProp;
+
+   /** Text to be displayed. */
+   text?: StringProp;
+
+   /** Set to `true` if the node is loading. */
+   loading?: BooleanProp;
+
+   /** Icon to be displayed. */
+   icon?: StringProp;
+
+   /** Icon for items (sets leafIcon). */
+   itemIcon?: StringProp;
+
+   /** Icon for leaf nodes. */
+   leafIcon?: StringProp;
+
+   /** Icon displayed when the node is loading. */
+   loadingIcon?: string;
+
+   /** Icon for open folder. */
+   openFolderIcon?: StringProp;
+
+   /** Icon for folder. */
+   folderIcon?: StringProp;
+
+   /** Set to `true` to hide the icon. */
+   hideIcon?: boolean;
+
+   /** Set to `true` to hide the arrow. */
+   hideArrow?: BooleanProp;
+}
+
+export class TreeNode extends ContainerBase<TreeNodeConfig> {
+   declare baseClass: string;
+   declare itemIcon: string;
+   declare leafIcon: string;
+   declare loadingIcon: string;
+   declare folderIcon: string;
+   declare openFolderIcon: string;
+   declare arrowIcon: string;
+   declare hideIcon: boolean;
+
+   constructor(config?: TreeNodeConfig) {
+      super(config);
+   }
+
+   init() {
+      if (this.itemIcon) this.leafIcon = this.itemIcon;
+      super.init();
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            level: undefined,
+            expanded: undefined,
+            leaf: undefined,
+            text: undefined,
+            loading: undefined,
+            icon: undefined,
+            leafIcon: undefined,
+            openFolderIcon: undefined,
+            folderIcon: undefined,
+            hideArrow: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: Instance) {
+      let { data } = instance;
+      data.stateMods = {
+         expanded: data.expanded,
+         loading: data.loading,
+         leaf: data.leaf,
+         folder: !data.leaf,
+         icon: !this.hideIcon,
+      };
+      data.stateMods[`level-${data.level}`] = true;
+      super.prepareData(context, instance);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      let { CSS, baseClass } = this;
+
+      let icon = data.icon;
+
+      if (!data.icon) {
+         if (data.leaf) icon = data.leafIcon;
+         else {
+            if (data.loading) icon = this.loadingIcon;
+            else if (data.expanded) icon = data.openFolderIcon || data.folderIcon;
+            else icon = data.folderIcon;
+         }
+      }
+
+      let arrowIcon = this.arrowIcon;
+      if (this.hideIcon && data.loading) arrowIcon = this.loadingIcon;
+
+      return (
+         <div key={key} className={data.classNames} style={data.style}>
+            <div
+               className={CSS.element(baseClass, "handle")}
+               onClick={(e) => this.toggle(e, instance)}
+               onMouseDown={!this.hideIcon ? stopPropagation : undefined}
+            >
+               {!data.leaf && !data.hideArrow && Icon.render(arrowIcon, { className: CSS.element(baseClass, "arrow") })}
+               {!this.hideIcon &&
+                  Icon.render(icon, {
+                     className: CSS.element(baseClass, "icon"),
+                  })}
+            </div>
+            <div>{data.text || this.renderChildren(context, instance)}</div>
+         </div>
+      );
+   }
+
+   toggle(e: React.MouseEvent, instance: Instance) {
+      let { data } = instance;
+      if (!data.leaf) instance.set("expanded", !data.expanded);
+      e.preventDefault();
+      e.stopPropagation();
+   }
+}
+
+TreeNode.prototype.baseClass = "treenode";
+TreeNode.prototype.itemIcon = "file";
+TreeNode.prototype.loadingIcon = "loading";
+TreeNode.prototype.folderIcon = "folder";
+TreeNode.prototype.openFolderIcon = "folder-open";
+TreeNode.prototype.arrowIcon = "drop-down";
+TreeNode.prototype.styled = true;
+TreeNode.prototype.hideIcon = false;
+
+Widget.alias("treenode", TreeNode);
diff --git a/packages/cx/src/widgets/grid/createGridCellEditor.tsx b/packages/cx/src/widgets/grid/createGridCellEditor.tsx
new file mode 100644
index 000000000..d8ffc4647
--- /dev/null
+++ b/packages/cx/src/widgets/grid/createGridCellEditor.tsx
@@ -0,0 +1,18 @@
+import { ValidationGroup } from "../form/ValidationGroup";
+import { GridCellEditor } from "./GridCellEditor";
+import { BooleanProp } from "../../ui/Prop";
+
+export function createGridCellEditor(
+   className: string,
+   style: any,
+   valid: BooleanProp,
+   columnEditor: any
+) {
+   return (
+      <GridCellEditor className={className} style={style}>
+         <ValidationGroup valid={valid}>
+            {columnEditor}
+         </ValidationGroup>
+      </GridCellEditor>
+   );
+}
diff --git a/packages/cx/src/widgets/grid/index.d.ts b/packages/cx/src/widgets/grid/index.d.ts
deleted file mode 100644
index 1b0edfbe1..000000000
--- a/packages/cx/src/widgets/grid/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './Grid';
-export * from './TreeNode';
-export * from './Pagination';
-export * from '../../ui/adapter/index';
\ No newline at end of file
diff --git a/packages/cx/src/widgets/grid/index.js b/packages/cx/src/widgets/grid/index.js
deleted file mode 100644
index 0082729c3..000000000
--- a/packages/cx/src/widgets/grid/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export * from './Grid';
-export * from './TreeNode';
-export * from './Pagination';
-
-import { DataAdapter } from '../../ui/adapter/DataAdapter';
-import { ArrayAdapter }  from '../../ui/adapter/ArrayAdapter';
-import { GroupAdapter }  from '../../ui/adapter/GroupAdapter';
-import { TreeAdapter }  from '../../ui/adapter/TreeAdapter';
-
-export {
-   DataAdapter,
-   ArrayAdapter,
-   GroupAdapter,
-   TreeAdapter
-}
\ No newline at end of file
diff --git a/packages/cx/src/widgets/grid/index.ts b/packages/cx/src/widgets/grid/index.ts
new file mode 100644
index 000000000..23a6d9f78
--- /dev/null
+++ b/packages/cx/src/widgets/grid/index.ts
@@ -0,0 +1,17 @@
+export * from './Grid';
+export * from './GridRow';
+export * from './GridRowLine';
+export * from './TreeNode';
+export * from './Pagination';
+
+import { DataAdapter } from '../../ui/adapter/DataAdapter';
+import { ArrayAdapter }  from '../../ui/adapter/ArrayAdapter';
+import { GroupAdapter }  from '../../ui/adapter/GroupAdapter';
+import { TreeAdapter }  from '../../ui/adapter/TreeAdapter';
+
+export {
+   DataAdapter,
+   ArrayAdapter,
+   GroupAdapter,
+   TreeAdapter
+}
\ No newline at end of file
diff --git a/packages/cx/src/widgets/grid/variables.scss b/packages/cx/src/widgets/grid/variables.scss
index 6cfdecc18..67316c804 100644
--- a/packages/cx/src/widgets/grid/variables.scss
+++ b/packages/cx/src/widgets/grid/variables.scss
@@ -14,6 +14,8 @@ $cx-default-grid-header-border-color: $cx-default-border-color !default;
 $cx-default-grid-header-box-shadow: null !default;
 $cx-default-grid-header-padding: null !default;
 
+@use "sass:color";
+
 $cx-grid-header-state-style-map: (
    default: (
       font-size: $cx-default-grid-header-font-size,
@@ -26,13 +28,13 @@ $cx-grid-header-state-style-map: (
       padding: $cx-default-grid-header-padding,
    ),
    hover: (
-      background-color: darken($cx-default-grid-header-background-color, 2),
+      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -2%),
    ),
    sorted: (
-      background-color: darken($cx-default-grid-header-background-color, 7),
+      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -7%),
    ),
    sorted-hover: (
-      background-color: darken($cx-default-grid-header-background-color, 5),
+      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -5%),
    ),
 ) !default;
 
@@ -125,7 +127,9 @@ $cx-grid-cell-cursor-style: (
    border: 2px solid rgba(green, 1),
 );
 
-$cx-dependencies: map-merge(
+@use "sass:map";
+
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/Grid": "cx/widgets/DragClone",
diff --git a/packages/cx/src/widgets/icons/calendar.js b/packages/cx/src/widgets/icons/calendar.js
deleted file mode 100644
index 1a6a46c37..000000000
--- a/packages/cx/src/widgets/icons/calendar.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('calendar', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 32 32">
-
-      <path d="M4 3h6m10 0h6" fill="none" stroke="currentColor" strokeWidth="2"/>
-      <path d="M19 21h4v4h-4z" fill="currentColor"/>
-      <path d="M3 25h24M3 21h24M3 17h24M7 28V13m-4 0h24M11 28V13.2M15 28V13.27M19 28V13.03M23 28V13.5" fill="none" stroke="currentColor"/>
-      <path fill="currentColor" d="M10 8h10v2H10z"/>
-      <path fill="none" stroke="currentColor" strokeWidth="2" d="M3 5h24v24H3z"/>
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/calendar.tsx b/packages/cx/src/widgets/icons/calendar.tsx
new file mode 100644
index 000000000..452bdfa8c
--- /dev/null
+++ b/packages/cx/src/widgets/icons/calendar.tsx
@@ -0,0 +1,22 @@
+/** @jsxImportSource react */
+import { registerIcon } from "./registry";
+
+export default registerIcon(
+   "calendar",
+   ({ key, ...props }: any) => {
+      return (
+         <svg key={key} {...props} viewBox="0 0 32 32">
+            <path d="M4 3h6m10 0h6" fill="none" stroke="currentColor" strokeWidth="2" />
+            <path d="M19 21h4v4h-4z" fill="currentColor" />
+            <path
+               d="M3 25h24M3 21h24M3 17h24M7 28V13m-4 0h24M11 28V13.2M15 28V13.27M19 28V13.03M23 28V13.5"
+               fill="none"
+               stroke="currentColor"
+            />
+            <path fill="currentColor" d="M10 8h10v2H10z" />
+            <path fill="none" stroke="currentColor" strokeWidth="2" d="M3 5h24v24H3z" />
+         </svg>
+      );
+   },
+   true,
+);
diff --git a/packages/cx/src/widgets/icons/check.js b/packages/cx/src/widgets/icons/check.js
deleted file mode 100644
index 9a60e56a8..000000000
--- a/packages/cx/src/widgets/icons/check.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('check', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 64 64">
-      <path d="M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z"
-            fill="currentColor"/>
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/check.tsx b/packages/cx/src/widgets/icons/check.tsx
new file mode 100644
index 000000000..d7e5a0837
--- /dev/null
+++ b/packages/cx/src/widgets/icons/check.tsx
@@ -0,0 +1,14 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('check', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 64 64">
+      <path d="M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z"
+            fill="currentColor"/>
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/clear.js b/packages/cx/src/widgets/icons/clear.js
deleted file mode 100644
index 0cfc73955..000000000
--- a/packages/cx/src/widgets/icons/clear.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('clear', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 32 32">
-      <path fill="currentColor"
-            strokeWidth="1"
-            stroke="currentColor"
-            d="M16.9 16l4.92-4.92c.24-.24.24-.6 0-.84s-.6-.24-.84 0l-4.92 4.92-5.04-4.98c-.24-.24-.6-.24-.84 0s-.24.6 0 .84L15.16 16l-4.98 4.98c-.24.24-.24.6 0 .84s.6.24.84 0L16 16.84l4.98 4.98c.24.24.6.24.84 0s.24-.6 0-.84L16.9 16z"/>
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/clear.tsx b/packages/cx/src/widgets/icons/clear.tsx
new file mode 100644
index 000000000..073ef3a9a
--- /dev/null
+++ b/packages/cx/src/widgets/icons/clear.tsx
@@ -0,0 +1,16 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('clear', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 32 32">
+      <path fill="currentColor"
+            strokeWidth="1"
+            stroke="currentColor"
+            d="M16.9 16l4.92-4.92c.24-.24.24-.6 0-.84s-.6-.24-.84 0l-4.92 4.92-5.04-4.98c-.24-.24-.6-.24-.84 0s-.24.6 0 .84L15.16 16l-4.98 4.98c-.24.24-.24.6 0 .84s.6.24.84 0L16 16.84l4.98 4.98c.24.24.6.24.84 0s.24-.6 0-.84L16.9 16z"/>
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/close.js b/packages/cx/src/widgets/icons/close.js
deleted file mode 100644
index e37cdb43a..000000000
--- a/packages/cx/src/widgets/icons/close.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { VDOM } from "../../ui/Widget";
-import { registerIcon } from "./registry";
-
-export default registerIcon(
-   "close",
-   (props) => {
-      return (
-         <svg {...props} viewBox="0 0 32 32">
-            <path
-               fill="currentColor"
-               strokeWidth="1"
-               stroke="currentColor"
-               d="M17.8 16l9.84-9.84c.48-.48.48-1.2 0-1.68s-1.2-.48-1.68 0l-9.84 9.84L6.04 4.36c-.48-.48-1.2-.48-1.68 0s-.48 1.2 0 1.68L14.32 16l-9.96 9.96c-.48.48-.48 1.2 0 1.68s1.2.48 1.68 0L16 17.68l9.96 9.96c.48.48 1.2.48 1.68 0s.48-1.2 0-1.68L17.8 16z"
-            />
-         </svg>
-      );
-   },
-   true
-);
diff --git a/packages/cx/src/widgets/icons/close.tsx b/packages/cx/src/widgets/icons/close.tsx
new file mode 100644
index 000000000..59f25fff0
--- /dev/null
+++ b/packages/cx/src/widgets/icons/close.tsx
@@ -0,0 +1,20 @@
+/** @jsxImportSource react */
+import { VDOM } from "../../ui/Widget";
+import { registerIcon } from "./registry";
+
+export default registerIcon(
+   "close",
+   ({ key, ...props }: any) => {
+      return (
+         <svg key={key} {...props} viewBox="0 0 32 32">
+            <path
+               fill="currentColor"
+               strokeWidth="1"
+               stroke="currentColor"
+               d="M17.8 16l9.84-9.84c.48-.48.48-1.2 0-1.68s-1.2-.48-1.68 0l-9.84 9.84L6.04 4.36c-.48-.48-1.2-.48-1.68 0s-.48 1.2 0 1.68L14.32 16l-9.96 9.96c-.48.48-.48 1.2 0 1.68s1.2.48 1.68 0L16 17.68l9.96 9.96c.48.48 1.2.48 1.68 0s.48-1.2 0-1.68L17.8 16z"
+            />
+         </svg>
+      );
+   },
+   true
+);
diff --git a/packages/cx/src/widgets/icons/cx.js b/packages/cx/src/widgets/icons/cx.js
deleted file mode 100644
index 46a279e2c..000000000
--- a/packages/cx/src/widgets/icons/cx.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('cx', props => {
-   return <svg
-      {...props}
-      viewBox="-347 249.7 48 48"
-   >
-      <g>
-         <path fill="currentColor" opacity="0.7" d="M-337.1 273.16l-4.23-7.33h8.46z"/>
-         <path fill="currentColor" d="M-318.32 273.16l-4.23-7.33h8.46z"/>
-         <path fill="currentColor" opacity="0.7" d="M-337.53 273.43h-8.45l4.22-7.33z"/>
-         <path fill="currentColor" d="M-309.38 273.43h-8.46l4.23-7.33z"/>
-         <path fill="currentColor" opacity="0.7" d="M-332.4 265.03l-4.22-7.33h8.46z"/>
-         <path fill="currentColor" d="M-304.24 265.03l-4.23-7.33h8.45z"/>
-         <path fill="currentColor" d="M-322.97 265.03l-4.28-7.33h8.5z"/>
-         <path fill="currentColor" opacity="0.7" d="M-332.87 265.3h-8.46l4.23-7.33z"/>
-         <path fill="currentColor" opacity="0.7" d="M-323.45 265.3h-8.46l4.2-7.33z"/>
-         <path fill="currentColor" d="M-314.1 265.3h-8.45l4.23-7.33z"/>
-         <path fill="currentColor" d="M-308.9 273.16l-4.23-7.33h8.46z"/>
-         <path fill="currentColor" d="M-304.67 265.3h-8.46l4.23-7.33z"/>
-         <path fill="currentColor" d="M-314.1 281.57h-8.45l4.23-7.33z"/>
-         <path fill="currentColor" d="M-313.6 281.3l-4.24-7.33h8.46z"/>
-         <path fill="currentColor" d="M-318.32 289.43l-4.23-7.33h8.46z"/>
-         <path fill="currentColor" d="M-304.67 281.57h-8.46l4.23-7.33z"/>
-         <path fill="currentColor" d="M-308.9 289.43l-4.23-7.33h8.46z"/>
-         <path fill="currentColor" opacity="0.7" d="M-341.76 281.3l-4.22-7.33h8.45z"/>
-         <path fill="currentColor" opacity="0.7" d="M-332.87 281.57h-8.46l4.23-7.33z"/>
-         <path fill="currentColor" opacity="0.7" d="M-337.1 289.43l-4.23-7.33h8.46z"/>
-         <path fill="currentColor" opacity="0.7" d="M-327.68 289.43l-4.23-7.33h8.43z"/>
-         <path fill="currentColor" opacity="0.7" d="M-328.16 289.7h-8.46l4.23-7.33z"/>
-         <path fill="currentColor" d="M-318.75 289.7h-8.5l4.28-7.33z"/>
-         <path fill="currentColor" d="M-300.02 289.7h-8.45l4.23-7.33z"/>
-      </g>
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/cx.tsx b/packages/cx/src/widgets/icons/cx.tsx
new file mode 100644
index 000000000..9315be0a1
--- /dev/null
+++ b/packages/cx/src/widgets/icons/cx.tsx
@@ -0,0 +1,39 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('cx', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="-347 249.7 48 48"
+   >
+      <g>
+         <path fill="currentColor" opacity="0.7" d="M-337.1 273.16l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" d="M-318.32 273.16l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" opacity="0.7" d="M-337.53 273.43h-8.45l4.22-7.33z"/>
+         <path fill="currentColor" d="M-309.38 273.43h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" opacity="0.7" d="M-332.4 265.03l-4.22-7.33h8.46z"/>
+         <path fill="currentColor" d="M-304.24 265.03l-4.23-7.33h8.45z"/>
+         <path fill="currentColor" d="M-322.97 265.03l-4.28-7.33h8.5z"/>
+         <path fill="currentColor" opacity="0.7" d="M-332.87 265.3h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" opacity="0.7" d="M-323.45 265.3h-8.46l4.2-7.33z"/>
+         <path fill="currentColor" d="M-314.1 265.3h-8.45l4.23-7.33z"/>
+         <path fill="currentColor" d="M-308.9 273.16l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" d="M-304.67 265.3h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" d="M-314.1 281.57h-8.45l4.23-7.33z"/>
+         <path fill="currentColor" d="M-313.6 281.3l-4.24-7.33h8.46z"/>
+         <path fill="currentColor" d="M-318.32 289.43l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" d="M-304.67 281.57h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" d="M-308.9 289.43l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" opacity="0.7" d="M-341.76 281.3l-4.22-7.33h8.45z"/>
+         <path fill="currentColor" opacity="0.7" d="M-332.87 281.57h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" opacity="0.7" d="M-337.1 289.43l-4.23-7.33h8.46z"/>
+         <path fill="currentColor" opacity="0.7" d="M-327.68 289.43l-4.23-7.33h8.43z"/>
+         <path fill="currentColor" opacity="0.7" d="M-328.16 289.7h-8.46l4.23-7.33z"/>
+         <path fill="currentColor" d="M-318.75 289.7h-8.5l4.28-7.33z"/>
+         <path fill="currentColor" d="M-300.02 289.7h-8.45l4.23-7.33z"/>
+      </g>
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/drop-down.js b/packages/cx/src/widgets/icons/drop-down.js
deleted file mode 100644
index 5e99c95c1..000000000
--- a/packages/cx/src/widgets/icons/drop-down.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('drop-down', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 20 20">
-      <path fill="currentColor"
-            strokeWidth="0"
-            stroke="currentColor"
-            d="M4.516 8.147L10.01 12.5l5.474-4.33-.473-.65-5 3.98-5-4z"/>
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/drop-down.tsx b/packages/cx/src/widgets/icons/drop-down.tsx
new file mode 100644
index 000000000..06085c3c5
--- /dev/null
+++ b/packages/cx/src/widgets/icons/drop-down.tsx
@@ -0,0 +1,16 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('drop-down', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 20 20">
+      <path fill="currentColor"
+            strokeWidth="0"
+            stroke="currentColor"
+            d="M4.516 8.147L10.01 12.5l5.474-4.33-.473-.65-5 3.98-5-4z"/>
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/file.js b/packages/cx/src/widgets/icons/file.js
deleted file mode 100644
index f4fdc8777..000000000
--- a/packages/cx/src/widgets/icons/file.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('file', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 16 16">
-      <path d="M2 2h5v5h5v7H2z" fill="currentColor" stroke="none"/>
-      <path d="M8 2v4h4z" fill="currentColor" stroke="none"/>
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/file.tsx b/packages/cx/src/widgets/icons/file.tsx
new file mode 100644
index 000000000..a38876fbb
--- /dev/null
+++ b/packages/cx/src/widgets/icons/file.tsx
@@ -0,0 +1,14 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('file', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 16 16">
+      <path d="M2 2h5v5h5v7H2z" fill="currentColor" stroke="none"/>
+      <path d="M8 2v4h4z" fill="currentColor" stroke="none"/>
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/folder-open.js b/packages/cx/src/widgets/icons/folder-open.js
deleted file mode 100644
index d2c947cc4..000000000
--- a/packages/cx/src/widgets/icons/folder-open.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('folder-open', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 16 16">
-
-      <path d="M0 5v7l2.5-6H13V5zm1 0h6L6 3H2z" fill="currentColor" stroke="none"/>
-      <path d="M3 7h13l-3 7H0z" fill="currentColor" stroke="none"/>
-
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/folder-open.tsx b/packages/cx/src/widgets/icons/folder-open.tsx
new file mode 100644
index 000000000..93e5da61e
--- /dev/null
+++ b/packages/cx/src/widgets/icons/folder-open.tsx
@@ -0,0 +1,16 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('folder-open', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 16 16">
+
+      <path d="M0 5v7l2.5-6H13V5zm1 0h6L6 3H2z" fill="currentColor" stroke="none"/>
+      <path d="M3 7h13l-3 7H0z" fill="currentColor" stroke="none"/>
+
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/folder.js b/packages/cx/src/widgets/icons/folder.js
deleted file mode 100644
index 30d5c9b7b..000000000
--- a/packages/cx/src/widgets/icons/folder.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('folder', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 16 16">
-
-      <path d="M1 5h13v9H1zm1 0h6L7 3H3z" fill="currentColor" stroke="none"/>
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/folder.tsx b/packages/cx/src/widgets/icons/folder.tsx
new file mode 100644
index 000000000..33ba4fe1c
--- /dev/null
+++ b/packages/cx/src/widgets/icons/folder.tsx
@@ -0,0 +1,14 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('folder', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 16 16">
+
+      <path d="M1 5h13v9H1zm1 0h6L7 3H3z" fill="currentColor" stroke="none"/>
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/forward.js b/packages/cx/src/widgets/icons/forward.js
deleted file mode 100644
index 6b50cb740..000000000
--- a/packages/cx/src/widgets/icons/forward.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('forward', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 20 20">
-
-      <path fill="currentColor"
-         strokeWidth="0"
-         stroke="currentColor"
-         d="M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" />
-
-      <path fill="currentColor"
-         strokeWidth="0"
-         stroke="currentColor"
-         d="M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" />
-
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/forward.tsx b/packages/cx/src/widgets/icons/forward.tsx
new file mode 100644
index 000000000..7757a472b
--- /dev/null
+++ b/packages/cx/src/widgets/icons/forward.tsx
@@ -0,0 +1,23 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('forward', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 20 20">
+
+      <path fill="currentColor"
+         strokeWidth="0"
+         stroke="currentColor"
+         d="M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" />
+
+      <path fill="currentColor"
+         strokeWidth="0"
+         stroke="currentColor"
+         d="M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" />
+
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/index.js b/packages/cx/src/widgets/icons/index.ts
similarity index 100%
rename from packages/cx/src/widgets/icons/index.js
rename to packages/cx/src/widgets/icons/index.ts
diff --git a/packages/cx/src/widgets/icons/loading.js b/packages/cx/src/widgets/icons/loading.js
deleted file mode 100644
index a3f8a60f9..000000000
--- a/packages/cx/src/widgets/icons/loading.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('loading', props => {
-   let style = {
-      animation: 'linear infinite 0.5s cx-rotate'
-   };
-
-   if (props && props.style)
-      Object.assign(style, props.style);
-
-   props = {
-      ...props,
-      style
-   };
-
-   return <svg
-      {...props}
-      viewBox="0 0 50 50">
-      <path fill="currentColor" d="M43.94 25.14c0-10.3-8.37-18.68-18.7-18.68-10.3 0-18.67 8.37-18.67 18.68h4.07c0-8.07 6.54-14.6 14.6-14.6 8.08 0 14.63 6.53 14.63 14.6h4.07z" />
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/loading.tsx b/packages/cx/src/widgets/icons/loading.tsx
new file mode 100644
index 000000000..63f1ed8ea
--- /dev/null
+++ b/packages/cx/src/widgets/icons/loading.tsx
@@ -0,0 +1,25 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('loading', ({ key, ...props }: any) => {
+   let style = {
+      animation: 'linear infinite 0.5s cx-rotate'
+   };
+
+   if (props && props.style)
+      Object.assign(style, props.style);
+
+   props = {
+      ...props,
+      style
+   };
+
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 50 50">
+      <path fill="currentColor" d="M43.94 25.14c0-10.3-8.37-18.68-18.7-18.68-10.3 0-18.67 8.37-18.67 18.68h4.07c0-8.07 6.54-14.6 14.6-14.6 8.08 0 14.63 6.53 14.63 14.6h4.07z" />
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/menu.js b/packages/cx/src/widgets/icons/menu.js
deleted file mode 100644
index 875c84914..000000000
--- a/packages/cx/src/widgets/icons/menu.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('menu', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 24 24">
-
-      <path d="M0 0h24v24H0z" 
-            fill="none" />
-      <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-            fill="currentColor" />
-
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/menu.tsx b/packages/cx/src/widgets/icons/menu.tsx
new file mode 100644
index 000000000..aeca2daba
--- /dev/null
+++ b/packages/cx/src/widgets/icons/menu.tsx
@@ -0,0 +1,18 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('menu', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 24 24">
+
+      <path d="M0 0h24v24H0z" 
+            fill="none" />
+      <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+            fill="currentColor" />
+
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/pixel-picker.js b/packages/cx/src/widgets/icons/pixel-picker.js
deleted file mode 100644
index bc8aa7f2e..000000000
--- a/packages/cx/src/widgets/icons/pixel-picker.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { VDOM } from "../../ui/Widget";
-import { registerIcon } from "./registry";
-
-export default registerIcon(
-   "pixel-picker",
-   (props) => {
-      return (
-         <svg {...props} viewBox="0 0 30 30">
-            <path
-               d="M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z"
-               fill="currentColor"
-            />
-         </svg>
-      );
-   },
-   true
-);
diff --git a/packages/cx/src/widgets/icons/pixel-picker.tsx b/packages/cx/src/widgets/icons/pixel-picker.tsx
new file mode 100644
index 000000000..108998203
--- /dev/null
+++ b/packages/cx/src/widgets/icons/pixel-picker.tsx
@@ -0,0 +1,18 @@
+/** @jsxImportSource react */
+import { VDOM } from "../../ui/Widget";
+import { registerIcon } from "./registry";
+
+export default registerIcon(
+   "pixel-picker",
+   ({ key, ...props }: any) => {
+      return (
+         <svg key={key} {...props} viewBox="0 0 30 30">
+            <path
+               d="M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z"
+               fill="currentColor"
+            />
+         </svg>
+      );
+   },
+   true
+);
diff --git a/packages/cx/src/widgets/icons/registry.js b/packages/cx/src/widgets/icons/registry.js
deleted file mode 100644
index 38535c683..000000000
--- a/packages/cx/src/widgets/icons/registry.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import {isFunction} from '../../util/isFunction';
-
-let icons = {};
-let iconFactory = null;
-let defaultIcons = {};
-
-let unregisteredDefaultIcons = {};
-
-export function registerIcon(name, icon, defaultIcon = false) {
-   if (!defaultIcon || !unregisteredDefaultIcons[name])
-      icons[name] = icon;
-
-   if (!defaultIcon)
-      unregisteredDefaultIcons[name] = true;
-   else
-      defaultIcons[name] = icon;
-
-   return props => renderIcon(name, props);
-}
-
-export function unregisterIcon(...args) {
-   args.forEach(name => {
-      delete icons[name];
-      unregisteredDefaultIcons[name] = true;
-   });
-}
-
-export function renderIcon(name, props) {
-
-   if (isFunction(name))
-      return name(props);
-
-   if (icons[name])
-      return icons[name](props);
-
-   if (iconFactory)
-      return iconFactory(name, props);
-
-   return null;
-}
-
-export function clearIcons() {
-   icons = {};
-}
-
-export function registerIconFactory(factory) {
-   iconFactory = factory;
-}
-
-export function restoreDefaultIcons() {
-   icons = {
-      ...defaultIcons
-   }
-}
\ No newline at end of file
diff --git a/packages/cx/src/widgets/icons/registry.ts b/packages/cx/src/widgets/icons/registry.ts
new file mode 100644
index 000000000..8e2427b49
--- /dev/null
+++ b/packages/cx/src/widgets/icons/registry.ts
@@ -0,0 +1,57 @@
+import { isFunction } from '../../util/isFunction';
+
+type IconRenderer = (props: Record<string, any>) => React.ReactNode;
+type IconFactory = (name: string, props: Record<string, any>) => React.ReactNode;
+
+let icons: Record<string, IconRenderer> = {};
+let iconFactory: IconFactory | null = null;
+let defaultIcons: Record<string, IconRenderer> = {};
+
+let unregisteredDefaultIcons: Record<string, boolean> = {};
+
+export function registerIcon(name: string, icon: IconRenderer, defaultIcon = false): IconRenderer {
+   if (!defaultIcon || !unregisteredDefaultIcons[name])
+      icons[name] = icon;
+
+   if (!defaultIcon)
+      unregisteredDefaultIcons[name] = true;
+   else
+      defaultIcons[name] = icon;
+
+   return props => renderIcon(name, props);
+}
+
+export function unregisterIcon(...args: string[]): void {
+   args.forEach(name => {
+      delete icons[name];
+      unregisteredDefaultIcons[name] = true;
+   });
+}
+
+export function renderIcon(name: string | IconRenderer, props: Record<string, any> = {}): React.ReactNode {
+
+   if (isFunction(name))
+      return (name as IconRenderer)(props);
+
+   if (icons[name as string])
+      return icons[name as string](props);
+
+   if (iconFactory)
+      return iconFactory(name as string, props);
+
+   return null;
+}
+
+export function clearIcons(): void {
+   icons = {};
+}
+
+export function registerIconFactory(factory: IconFactory): void {
+   iconFactory = factory;
+}
+
+export function restoreDefaultIcons(): void {
+   icons = {
+      ...defaultIcons
+   }
+}
\ No newline at end of file
diff --git a/packages/cx/src/widgets/icons/search.js b/packages/cx/src/widgets/icons/search.js
deleted file mode 100644
index a87cbe6b1..000000000
--- a/packages/cx/src/widgets/icons/search.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('search', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 32 32">
-      <path fill="currentColor"
-            d="M25.595 22.036l-5.26-5.075c.75-1.18 1.206-2.56 1.206-4.05 0-4.32-3.63-7.82-8.103-7.82-4.477 0-8.107 3.503-8.107 7.82 0 4.32 3.63 7.825 8.106 7.825 1.544 0 2.972-.44 4.198-1.162l5.26 5.074c.37.356.98.354 1.35 0l1.352-1.304c.37-.357.37-.947 0-1.304zm-12.16-3.91c-2.985 0-5.405-2.336-5.405-5.216 0-2.88 2.42-5.214 5.405-5.214 2.984 0 5.404 2.335 5.404 5.214 0 2.88-2.42 5.215-5.407 5.215z" />
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/search.tsx b/packages/cx/src/widgets/icons/search.tsx
new file mode 100644
index 000000000..de1d7e1c3
--- /dev/null
+++ b/packages/cx/src/widgets/icons/search.tsx
@@ -0,0 +1,14 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('search', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 32 32">
+      <path fill="currentColor"
+            d="M25.595 22.036l-5.26-5.075c.75-1.18 1.206-2.56 1.206-4.05 0-4.32-3.63-7.82-8.103-7.82-4.477 0-8.107 3.503-8.107 7.82 0 4.32 3.63 7.825 8.106 7.825 1.544 0 2.972-.44 4.198-1.162l5.26 5.074c.37.356.98.354 1.35 0l1.352-1.304c.37-.357.37-.947 0-1.304zm-12.16-3.91c-2.985 0-5.405-2.336-5.405-5.216 0-2.88 2.42-5.214 5.405-5.214 2.984 0 5.404 2.335 5.404 5.214 0 2.88-2.42 5.215-5.407 5.215z" />
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/sort-asc.js b/packages/cx/src/widgets/icons/sort-asc.js
deleted file mode 100644
index a04def812..000000000
--- a/packages/cx/src/widgets/icons/sort-asc.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('sort-asc', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 16 16">
-      <path fill="currentColor"
-         d="M10.5 5.8l-3-3-3 3 .707.708L7 4.688v8.312h1V4.69l1.793 1.817z"
-      />
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/sort-asc.tsx b/packages/cx/src/widgets/icons/sort-asc.tsx
new file mode 100644
index 000000000..cbcdaf23b
--- /dev/null
+++ b/packages/cx/src/widgets/icons/sort-asc.tsx
@@ -0,0 +1,15 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('sort-asc', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 16 16">
+      <path fill="currentColor"
+         d="M10.5 5.8l-3-3-3 3 .707.708L7 4.688v8.312h1V4.69l1.793 1.817z"
+      />
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/icons/square.js b/packages/cx/src/widgets/icons/square.js
deleted file mode 100644
index 76577c1c0..000000000
--- a/packages/cx/src/widgets/icons/square.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('square', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 64 64">
-      <rect
-         x="12"
-         y="12"
-         width="40"
-         height="40"
-         fill="currentColor"
-      />
-   </svg>
-}, true);
-
diff --git a/packages/cx/src/widgets/icons/square.tsx b/packages/cx/src/widgets/icons/square.tsx
new file mode 100644
index 000000000..850d098f7
--- /dev/null
+++ b/packages/cx/src/widgets/icons/square.tsx
@@ -0,0 +1,19 @@
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('square', ({ key, ...props }: any) => {
+   return <svg
+      key={key}
+      {...props}
+      viewBox="0 0 64 64">
+      <rect
+         x="12"
+         y="12"
+         width="40"
+         height="40"
+         fill="currentColor"
+      />
+   </svg>
+}, true);
+
diff --git a/packages/cx/src/widgets/index.js b/packages/cx/src/widgets/index.js
deleted file mode 100644
index 18b95b664..000000000
--- a/packages/cx/src/widgets/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Widget } from "../ui/Widget";
-import { Text } from "../ui/Text";
-import { StaticText } from "../ui/StaticText";
-import { PureContainer } from "../ui/PureContainer";
-import { IsolatedScope } from "../ui/IsolatedScope";
-import { DetachedScope } from "../ui/DetachedScope";
-import { Restate, PrivateStore } from "../ui/Restate";
-import { DataProxy } from "../ui/DataProxy";
-import { Content } from "../ui/layout/Content";
-import { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
-import { ContentResolver } from "../ui/ContentResolver";
-import { Rescope } from "../ui/Rescope";
-import { Repeater } from "../ui/Repeater";
-
-//re-export widgets defined in ui namespace
-export {
-   Widget,
-   StaticText,
-   Text,
-   PureContainer,
-   Content,
-   ContentPlaceholder,
-   ContentPlaceholderScope,
-   ContentResolver,
-   Rescope,
-   Repeater,
-   IsolatedScope,
-   DetachedScope,
-   Restate,
-   PrivateStore,
-   DataProxy,
-};
-
-export * from "./cx";
-export * from "./HtmlElement";
-export * from "./Button";
-export * from "./DocumentTitle";
-export * from "./List";
-export * from "./Sandbox";
-export * from "./CxCredit";
-export * from "./Heading";
-export * from "./Section";
-export * from "./FlexBox";
-export * from "./Icon";
-export * from "./ProgressBar";
-export * from "./Resizer";
-export * from "./HighlightedSearchText";
-export * from "./autoFocus";
-
-export * from "./icons/index";
-export * from "./overlay/index";
-export * from "./nav/index";
-export * from "./form/index";
-export * from "./grid/index";
-export * from "./drag-drop/index";
-
-export * from "./enableAllInternalDependencies";
diff --git a/packages/cx/src/widgets/index.ts b/packages/cx/src/widgets/index.ts
new file mode 100644
index 000000000..467a86cc4
--- /dev/null
+++ b/packages/cx/src/widgets/index.ts
@@ -0,0 +1,58 @@
+import { Widget } from "../ui/Widget";
+import { Text } from "../ui/Text";
+import { StaticText } from "../ui/StaticText";
+import { PureContainer } from "../ui/PureContainer";
+import { IsolatedScope } from "../ui/IsolatedScope";
+import { DetachedScope } from "../ui/DetachedScope";
+import { Restate, PrivateStore } from "../ui/Restate";
+import { DataProxy } from "../ui/DataProxy";
+import { Content } from "../ui/layout/Content";
+import { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
+import { ContentResolver } from "../ui/ContentResolver";
+import { Rescope } from "../ui/Rescope";
+import { Repeater } from "../ui/Repeater";
+
+//re-export widgets defined in ui namespace
+export {
+   Widget,
+   StaticText,
+   Text,
+   PureContainer,
+   Content,
+   ContentPlaceholder,
+   ContentPlaceholderScope,
+   ContentResolver,
+   Rescope,
+   Repeater,
+   IsolatedScope,
+   DetachedScope,
+   Restate,
+   PrivateStore,
+   DataProxy,
+};
+
+export * from "./cx";
+export * from "./HtmlElement";
+export * from "./Button";
+export * from "./DocumentTitle";
+export * from "./List";
+export * from "./Sandbox";
+export * from "./CxCredit";
+export * from "./Heading";
+export * from "./Section";
+export * from "./FlexBox";
+export * from "./Icon";
+export * from "./ProgressBar";
+export * from "./Resizer";
+export * from "./HighlightedSearchText";
+export * from "./autoFocus";
+export * from "./ReactElementWrapper";
+
+export * from "./icons/index";
+export * from "./overlay/index";
+export * from "./nav/index";
+export * from "./form/index";
+export * from "./grid/index";
+export * from "./drag-drop/index";
+
+export * from "./enableAllInternalDependencies";
diff --git a/packages/cx/src/widgets/nav/Link.d.ts b/packages/cx/src/widgets/nav/Link.d.ts
deleted file mode 100644
index 40d8f525b..000000000
--- a/packages/cx/src/widgets/nav/Link.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from "react";
-import * as Cx from "../../core";
-import { Instance } from "../../ui/Instance";
-import { LinkButtonProps } from "./LinkButton";
-
-interface LinkProps extends LinkButtonProps {
-   /** Set to `true` to disable the link. */
-   disabled?: Cx.BooleanProp;
-
-   /** Url to the link's target location. Should start with `~/` or `#/` for pushState/hash based navigation. */
-   href?: Cx.StringProp;
-
-   url?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string;
-
-   tag?: string;
-   match?: "equal" | "prefix" | "subroute";
-
-   activeClass?: Cx.ClassProp;
-   activeStyle?: Cx.StyleProp;
-   onClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
-}
-
-export class Link extends Cx.Widget<LinkProps> {}
diff --git a/packages/cx/src/widgets/nav/Link.js b/packages/cx/src/widgets/nav/Link.js
deleted file mode 100644
index cf982e337..000000000
--- a/packages/cx/src/widgets/nav/Link.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import {Widget, VDOM} from '../../ui/Widget';
-import {LinkButton} from './LinkButton';
-
-export class Link extends LinkButton {}
-
-Link.prototype.baseClass = "link";
-
-Widget.alias('link', Link);
\ No newline at end of file
diff --git a/packages/cx/src/widgets/nav/Link.scss b/packages/cx/src/widgets/nav/Link.scss
index ccb5500d9..939df9d8d 100644
--- a/packages/cx/src/widgets/nav/Link.scss
+++ b/packages/cx/src/widgets/nav/Link.scss
@@ -1,7 +1,9 @@
+@use "sass:map";
+
 @mixin cx-link($name: "link", $besm: $cx-besm, $state-style-map: $cx-link-state-style-map) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       &:hover {
diff --git a/packages/cx/src/widgets/nav/Link.ts b/packages/cx/src/widgets/nav/Link.ts
new file mode 100644
index 000000000..5f90b9f49
--- /dev/null
+++ b/packages/cx/src/widgets/nav/Link.ts
@@ -0,0 +1,12 @@
+import {Widget, VDOM} from '../../ui/Widget';
+import {LinkButton, LinkButtonConfig} from './LinkButton';
+
+export interface LinkConfig extends LinkButtonConfig {}
+
+export class Link extends LinkButton {
+   declare baseClass: string;
+}
+
+Link.prototype.baseClass = "link";
+
+Widget.alias('link', Link);
\ No newline at end of file
diff --git a/packages/cx/src/widgets/nav/LinkButton.d.ts b/packages/cx/src/widgets/nav/LinkButton.d.ts
deleted file mode 100644
index c92e9f825..000000000
--- a/packages/cx/src/widgets/nav/LinkButton.d.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as Cx from "../../core";
-import { ButtonProps } from "../Button";
-
-export interface LinkButtonProps extends ButtonProps {
-   /** Url to the link's target location. Should start with `~/` or `#/` for pushState/hash based navigation. */
-   href?: Cx.StringProp;
-
-   /** Binding to the current url location in the store. If `href` matches `url`, additional CSS class `active` is applied. */
-   url?: Cx.StringProp;
-
-   /**
-    * Accepted values are `equal`, `prefix` and `subroute`. Default is `equal` which means that `url` must exactly match `href` in order to consider the link active.
-    * In `prefix` mode, if `href` is a prefix of `url`, the link is considered active. The `subroute` mode is similar to `prefix` mode, except that `href` must be followed by a forward slash `/`, indicating
-    * a subroute.
-    */
-   match?: "equal" | "prefix" | "subroute";
-
-   /** Additional CSS style to aplied when the link is active. */
-   activeStyle?: Cx.StyleProp;
-
-   /** Additional CSS style to aplied when the link is inactive. */
-   inactiveStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to aplied when the link is active. */
-   activeClass?: Cx.StyleProp;
-
-   /** Additional CSS class to aplied when the link is inactive. */
-   inactiveClass?: Cx.StyleProp;
-
-   /** Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>) */
-   target?: Cx.Prop<"_self" | "_blank" | "_parent" | "_top" | (string & {})>;
-}
-
-export class LinkButton extends Cx.Widget<LinkButtonProps> {}
diff --git a/packages/cx/src/widgets/nav/LinkButton.js b/packages/cx/src/widgets/nav/LinkButton.js
deleted file mode 100644
index bbf03f655..000000000
--- a/packages/cx/src/widgets/nav/LinkButton.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Button } from "../Button";
-import { History } from "../../ui/app/History";
-import { Url } from "../../ui/app/Url";
-import { routeAppend } from "../../util/routeAppend";
-import { parseStyle } from "../../util/parseStyle";
-
-export class LinkButton extends Button {
-   init() {
-      this.activeStyle = parseStyle(this.activeStyle);
-      this.inactiveStyle = parseStyle(this.inactiveStyle);
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            href: undefined,
-            url: undefined,
-            target: undefined,
-            active: undefined,
-            activeClass: undefined,
-            activeStyle: undefined,
-            inactiveClass: undefined,
-            inactiveStyle: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      data.unresolvedHref = data.href;
-
-      if (typeof data.href === "string") {
-         if (data.unresolvedHref[0] === "+")
-            data.unresolvedHref = routeAppend(context.lastRoute.reverse(), data.href.substring(1));
-
-         data.href = Url.resolve(data.unresolvedHref);
-      }
-
-      let active = this.isActive(data);
-
-      data.stateMods = {
-         disabled: data.disabled,
-         active,
-      };
-
-      super.prepareData(context, instance);
-
-      if (active) {
-         if (data.activeClass) data.classNames += " " + data.activeClass;
-         if (data.activeStyle)
-            data.style = {
-               ...data.style,
-               ...parseStyle(data.activeStyle),
-            };
-      } else {
-         if (data.inactiveClass) data.classNames += " " + data.inactiveClass;
-         if (data.inactiveStyle)
-            data.style = {
-               ...data.style,
-               ...parseStyle(data.inactiveStyle),
-            };
-      }
-   }
-
-   isActive(data) {
-      if (data.active != null) return data.active;
-
-      switch (this.match) {
-         default:
-         case "equal":
-            return data.url === data.unresolvedHref;
-
-         case "prefix":
-            return data.url && data.unresolvedHref && data.url.indexOf(data.unresolvedHref) === 0;
-
-         case "subroute":
-            return (
-               data.url &&
-               data.unresolvedHref &&
-               data.url.indexOf(data.unresolvedHref) === 0 &&
-               (data.url === data.unresolvedHref || data.url[data.unresolvedHref.length] === "/")
-            );
-      }
-   }
-
-   attachProps(context, instance, props) {
-      props.onClick = (ev) => {
-         this.handleClick(ev, instance);
-      };
-      super.attachProps(context, instance, props);
-      props.href = instance.data.href;
-      delete props.active;
-      delete props.activeClass;
-      delete props.activeStyle;
-      delete props.inactiveClass;
-      delete props.inactiveStyle;
-   }
-
-   isValidHtmlAttribute(attr) {
-      if (attr === "url" || attr === "match") return false;
-      return super.isValidHtmlAttribute(attr);
-   }
-
-   handleClick(e, instance) {
-      let { data } = instance;
-
-      if (data.disabled) {
-         e.preventDefault();
-         return;
-      }
-
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
-
-      if (data.href && Url.isLocal(data.href) && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
-         e.preventDefault();
-         History.pushState({}, null, data.href);
-      }
-   }
-}
-
-LinkButton.prototype.match = "equal";
-LinkButton.prototype.tag = "a";
-
-Widget.alias("link-button", LinkButton);
diff --git a/packages/cx/src/widgets/nav/LinkButton.ts b/packages/cx/src/widgets/nav/LinkButton.ts
new file mode 100644
index 000000000..c5656d58c
--- /dev/null
+++ b/packages/cx/src/widgets/nav/LinkButton.ts
@@ -0,0 +1,176 @@
+import { Widget, VDOM } from "../../ui/Widget";
+import { Button } from "../Button";
+import { History } from "../../ui/app/History";
+import { Url } from "../../ui/app/Url";
+import { routeAppend } from "../../util/routeAppend";
+import { parseStyle } from "../../util/parseStyle";
+import { StringProp, StyleProp, ClassProp, Prop } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { ButtonConfig } from "../Button";
+import { HtmlElementInstance } from "../HtmlElement";
+
+export interface LinkButtonConfig extends ButtonConfig {
+   /** Url to the link's target location. Should start with `~/` or `#/` for pushState/hash based navigation. */
+   href?: StringProp;
+
+   /** Binding to the current url location in the store. If `href` matches `url`, additional CSS class `active` is applied. */
+   url?: StringProp;
+
+   /**
+    * Accepted values are `equal`, `prefix` and `subroute`. Default is `equal` which means that `url` must exactly match `href` in order to consider the link active.
+    * In `prefix` mode, if `href` is a prefix of `url`, the link is considered active. The `subroute` mode is similar to `prefix` mode, except that `href` must be followed by a forward slash `/`, indicating
+    * a subroute.
+    */
+   match?: "equal" | "prefix" | "subroute";
+
+   /** Explicitly set the active state of the link. If not set, the active state is determined by comparing `href` and `url`. */
+   active?: Prop<boolean>;
+
+   /** Additional CSS style to applied when the link is active. */
+   activeStyle?: StyleProp;
+
+   /** Additional CSS style to applied when the link is inactive. */
+   inactiveStyle?: StyleProp;
+
+   /** Additional CSS class to applied when the link is active. */
+   activeClass?: ClassProp;
+
+   /** Additional CSS class to applied when the link is inactive. */
+   inactiveClass?: ClassProp;
+
+   /** Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>) */
+   target?: Prop<"_self" | "_blank" | "_parent" | "_top" | (string & {})>;
+}
+
+export class LinkButton extends Button {
+   constructor(config?: LinkButtonConfig) {
+      super(config);
+   }
+
+   declare match: "equal" | "prefix" | "subroute";
+   declare activeStyle: any;
+   declare inactiveStyle: any;
+   declare onClick?: string | ((e: MouseEvent, instance: Instance) => void);
+   declare tag: string;
+
+   init() {
+      this.activeStyle = parseStyle(this.activeStyle);
+      this.inactiveStyle = parseStyle(this.inactiveStyle);
+      super.init();
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            href: undefined,
+            url: undefined,
+            target: undefined,
+            active: undefined,
+            activeClass: undefined,
+            activeStyle: undefined,
+            inactiveClass: undefined,
+            inactiveStyle: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance) {
+      let { data } = instance;
+
+      data.unresolvedHref = data.href;
+
+      if (typeof data.href === "string") {
+         if (data.unresolvedHref[0] === "+")
+            data.unresolvedHref = routeAppend(context.lastRoute.reverse(), data.href.substring(1));
+
+         data.href = Url.resolve(data.unresolvedHref);
+      }
+
+      let active = this.isActive(data);
+
+      data.stateMods = {
+         disabled: data.disabled,
+         active,
+      };
+
+      super.prepareData(context, instance);
+
+      if (active) {
+         if (data.activeClass) data.classNames += " " + data.activeClass;
+         if (data.activeStyle)
+            data.style = {
+               ...data.style,
+               ...parseStyle(data.activeStyle),
+            };
+      } else {
+         if (data.inactiveClass) data.classNames += " " + data.inactiveClass;
+         if (data.inactiveStyle)
+            data.style = {
+               ...data.style,
+               ...parseStyle(data.inactiveStyle),
+            };
+      }
+   }
+
+   isActive(data: any) {
+      if (data.active != null) return data.active;
+
+      switch (this.match) {
+         default:
+         case "equal":
+            return data.url === data.unresolvedHref;
+
+         case "prefix":
+            return data.url && data.unresolvedHref && data.url.indexOf(data.unresolvedHref) === 0;
+
+         case "subroute":
+            return (
+               data.url &&
+               data.unresolvedHref &&
+               data.url.indexOf(data.unresolvedHref) === 0 &&
+               (data.url === data.unresolvedHref || data.url[data.unresolvedHref.length] === "/")
+            );
+      }
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: any) {
+      props.onClick = (ev: any) => {
+         this.handleClick(ev, instance);
+      };
+      super.attachProps(context, instance, props);
+      props.href = instance.data.href;
+      delete props.active;
+      delete props.activeClass;
+      delete props.activeStyle;
+      delete props.inactiveClass;
+      delete props.inactiveStyle;
+   }
+
+   isValidHtmlAttribute(attr: string) {
+      if (attr === "url" || attr === "match") return false;
+      return super.isValidHtmlAttribute(attr);
+   }
+
+   handleClick(e: React.MouseEvent, instance: Instance) {
+      let { data } = instance;
+
+      if (data.disabled) {
+         e.preventDefault();
+         return;
+      }
+
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
+
+      if (data.href && Url.isLocal(data.href) && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
+         e.preventDefault();
+         History.pushState({}, null, data.href);
+      }
+   }
+}
+
+LinkButton.prototype.match = "equal";
+LinkButton.prototype.tag = "a";
+
+Widget.alias("link-button", LinkButton);
diff --git a/packages/cx/src/widgets/nav/Menu.d.ts b/packages/cx/src/widgets/nav/Menu.d.ts
deleted file mode 100644
index 5d1ab3ec0..000000000
--- a/packages/cx/src/widgets/nav/Menu.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as Cx from '../../core';
-
-interface MenuProps extends Cx.HtmlElementProps {
-
-   /** Set to `true` for horizontal menus. */
-   horizontal?: boolean,
-   
-   /** 
-    * Controls size of menu items. Supported values are `xsmall`, `small`, `medium`, `large` or `xlarge`. 
-    * For horizontal menus default size is `small` and for vertical it's `medium`. 
-    */
-   itemPadding?: string,
-
-   defaultVerticalItemPadding?: string,
-   defaultHorizontalItemPadding?: string,
-
-   /** Set to true to put overflow items into a submenu on the right. */
-   overflow?: boolean,
-
-   /** Icon to be used for the overflow menu. */
-   overflowIcon?: string,
-
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string
-}
-
-export class Menu extends Cx.Widget<MenuProps> {}
diff --git a/packages/cx/src/widgets/nav/Menu.js b/packages/cx/src/widgets/nav/Menu.js
deleted file mode 100644
index c41b2f035..000000000
--- a/packages/cx/src/widgets/nav/Menu.js
+++ /dev/null
@@ -1,406 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { findFirst, isFocusable, getFocusedElement, isSelfOrDescendant, closest, isFocusedDeep } from "../../util/DOM";
-import { KeyCode } from "../../util/KeyCode";
-import { debug, menuFlag } from "../../util/Debug";
-import { FocusManager } from "../../ui/FocusManager";
-import { MenuItem } from "./MenuItem";
-import { isUndefined } from "../../util/isUndefined";
-import { isDefined } from "../../util/isDefined";
-import { isString } from "../../util/isString";
-import { ResizeManager } from "../../ui/ResizeManager";
-import { MenuSpacer } from "./MenuSpacer";
-import { isTextInputElement } from "../../util";
-
-/*
- Functionality:
- - renders a list of items in a form of horizontal or vertical menu
- - provides cursor with mouse and keyboard nav
- - changes focusElement to the first focusable child when cursor is moved using keyboard
- */
-
-export class Menu extends HtmlElement {
-   init() {
-      if (this.itemPadding === true) this.itemPadding = "medium";
-
-      if (this.horizontal && isUndefined(this.itemPadding)) this.itemPadding = this.defaultHorizontalItemPadding;
-
-      if (!this.horizontal && isUndefined(this.itemPadding)) this.itemPadding = this.defaultVerticalItemPadding;
-
-      super.init();
-
-      if (this.overflow) {
-         if (!this.horizontal) throw new Error("Overflow works only on horizontal menus.");
-
-         this.items.push(
-            MenuItem.create({
-               icon: this.overflowIcon,
-               mod: "overflow",
-               items: [
-                  {
-                     type: Menu,
-                     putInto: "dropdown",
-                     items: [...this.items],
-                     showOnlyOverflowItems: true,
-                  },
-               ],
-            })
-         );
-      }
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         horizontal: this.horizontal,
-         vertical: !this.horizontal,
-         overflow: this.overflow,
-         [this.itemPadding + "-item-padding"]: this.itemPadding,
-      };
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      context.push("lastMenu", this);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("lastMenu");
-   }
-
-   render(context, instance, key) {
-      return (
-         <MenuComponent key={key} instance={instance}>
-            {this.renderChildren(context, instance)}
-         </MenuComponent>
-      );
-   }
-
-   add(item) {
-      if (item && (item.tag == "a" || item.tag == "hr")) {
-         let mi = {
-            type: MenuItem,
-            items: item,
-            autoClose: item.tag == "a",
-         };
-
-         if (isDefined(item.if)) mi.if = item.if;
-
-         if (isDefined(item.visible)) mi.visible = item.visible;
-
-         super.add(mi);
-      } else super.add(...arguments);
-   }
-}
-
-Menu.prototype.horizontal = false;
-Menu.prototype.defaultVerticalItemPadding = "medium";
-Menu.prototype.defaultHorizontalItemPadding = "small";
-Menu.prototype.icons = false;
-Menu.prototype.overflow = false;
-Menu.prototype.overflowIcon = "drop-down";
-Menu.Item = MenuItem;
-Menu.Spacer = MenuSpacer;
-
-class MenuComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         cursor: null,
-         nonOverflownItemCount: Infinity,
-      };
-      this.ref = (el) => {
-         this.el = el;
-      };
-   }
-
-   render() {
-      let { instance, children } = this.props;
-      let { data, widget } = instance;
-      let { CSS, baseClass } = widget;
-      this.itemInfo = Array.from({ length: children.length });
-
-      let parentNonOverflownItemCount = 0;
-
-      if (widget.showOnlyOverflowItems) {
-         let { parent } = instance;
-         while (parent != null) {
-            if (parent.widget instanceof Menu) {
-               parentNonOverflownItemCount = parent.nonOverflownItemCount || 0;
-               break;
-            }
-            parent = parent.parent;
-         }
-      }
-
-      return (
-         <ul
-            ref={this.ref}
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  pack: this.state.nonOverflownItemCount < children.length - 1,
-               })
-            )}
-            style={data.style}
-            onBlur={FocusManager.nudge()}
-            onKeyDown={this.onKeyDown.bind(this)}
-         >
-            {children.map((content, index) => {
-               let key = content && typeof content == "object" && content.key ? content.key : index;
-
-               if (content && content.spacer) {
-                  return widget.horizontal && <li className={CSS.element(baseClass, "spacer")} key={key} />;
-               }
-
-               return (
-                  <MenuItemComponent
-                     key={key}
-                     cursor={key === this.state.cursor}
-                     hidden={
-                        index < parentNonOverflownItemCount ||
-                        (index >= this.state.nonOverflownItemCount && index + 1 != children.length)
-                     }
-                     instance={instance}
-                     itemInfo={this.itemInfo}
-                     itemKey={key}
-                     itemIndex={index}
-                     moveCursor={this.moveCursor.bind(this)}
-                  >
-                     {content}
-                  </MenuItemComponent>
-               );
-            })}
-         </ul>
-      );
-   }
-
-   moveCursor(itemKey) {
-      if (itemKey != this.state.cursor) {
-         debug(menuFlag, "Menu", "moveCursor", itemKey);
-         this.setState({ cursor: itemKey });
-      }
-   }
-
-   onKeyDown(e) {
-      //ignore the event if it comes from an input element
-      if (isTextInputElement(e.target)) return;
-
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      let keyCode = e.keyCode;
-      debug(menuFlag, "Menu", "keyDown", this.el, keyCode);
-      let { horizontal } = widget;
-
-      if (keyCode == KeyCode.tab) {
-         if (horizontal) keyCode = e.shiftKey ? KeyCode.left : KeyCode.up;
-         else keyCode = e.shiftKey ? KeyCode.right : KeyCode.down;
-      }
-
-      if (this.state.cursor != null) {
-         let cursorIndex = this.itemInfo.findIndex((a) => a.key == this.state.cursor);
-
-         if (horizontal ? keyCode == KeyCode.left : keyCode == KeyCode.up) {
-            for (let c = cursorIndex - 1; c >= 0; c--)
-               if (this.itemInfo[c].focusable) {
-                  FocusManager.focusFirst(this.itemInfo[c].el);
-                  e.stopPropagation();
-                  e.preventDefault();
-                  return;
-               }
-         }
-
-         if (horizontal ? keyCode == KeyCode.right : keyCode == KeyCode.down) {
-            for (let c = cursorIndex + 1; c < this.itemInfo.length; c++)
-               if (this.itemInfo[c].focusable) {
-                  FocusManager.focusFirst(this.itemInfo[c].el);
-                  e.stopPropagation();
-                  e.preventDefault();
-                  return;
-               }
-         }
-      }
-
-      switch (keyCode) {
-         case KeyCode.home:
-            if (this.itemInfo[0].focusable) {
-               FocusManager.focusFirst(this.itemInfo[0].el);
-               e.stopPropagation();
-               e.preventDefault();
-            }
-            break;
-
-         case KeyCode.end:
-            if (this.itemInfo[this.itemInfo.length - 1].focusable) {
-               FocusManager.focusFirst(this.itemInfo[this.itemInfo.length - 1].el);
-               e.stopPropagation();
-               e.preventDefault();
-            }
-            break;
-      }
-   }
-
-   onFocusOut(elementReceivingFocus) {
-      debug(menuFlag, "Menu", "focusout", this.el, elementReceivingFocus);
-      if (this.el && !isSelfOrDescendant(this.el, elementReceivingFocus)) this.moveCursor(null);
-   }
-
-   componentDidMount() {
-      let { widget } = this.props.instance;
-      if (widget.autoFocus && this.itemInfo.length > 0 && !isFocusedDeep(this.el))
-         FocusManager.focusFirst(this.itemInfo[0].el);
-      if (widget.overflow) {
-         this.measureOverflow();
-         this.unsubscribeResize = ResizeManager.trackElement(this.el, this.measureOverflow.bind(this));
-      }
-      this.unsubscribeFocusOut = FocusManager.onFocusOut(this.el, this.onFocusOut.bind(this));
-   }
-
-   componentDidUpdate() {
-      this.measureOverflow();
-   }
-
-   measureOverflow() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      let { CSS, baseClass } = widget;
-      if (!widget.overflow) return;
-
-      let spacerClass = CSS.element(baseClass, "spacer");
-
-      let nonOverflownItemCount = 0;
-      let fitItemsWidth = 0;
-      let children = Array.from(this.el.children);
-      let widths = children.map((c) => {
-         if (c.classList.contains(spacerClass)) return 0;
-         let w = c.offsetWidth;
-         let style = getComputedStyle(c);
-         let marginLeft = style.getPropertyValue("margin-left");
-         if (isString(marginLeft) && marginLeft.endsWith("px")) w += parseFloat(marginLeft);
-         let marginRight = style.getPropertyValue("margin-right");
-         if (isString(marginRight) && marginRight.endsWith("px")) w += parseFloat(marginRight);
-         return w;
-      });
-      let clientWidth = this.el.clientWidth;
-      let overflowWidth = widths[widths.length - 1];
-      for (let i = 0; i < widths.length - 1; i++) {
-         let overflowReduction = i == widths.length - 2 ? 0 : overflowWidth;
-         if (widths[i] + fitItemsWidth > clientWidth - overflowReduction) break;
-         nonOverflownItemCount++;
-         fitItemsWidth += widths[i];
-      }
-
-      instance.nonOverflownItemCount = nonOverflownItemCount;
-
-      if (!this.isMeasureOverflowDisabled && this.state.nonOverflownItemCount != nonOverflownItemCount) {
-         this.isMeasureOverflowDisabled = true;
-         this.setState(
-            {
-               nonOverflownItemCount,
-            },
-            () => {
-               this.isMeasureOverflowDisabled = false;
-            }
-         );
-      }
-   }
-
-   componentWillUnmount() {
-      this.unsubscribeFocusOut && this.unsubscribeFocusOut();
-      this.unsubscribeResize && this.unsubscribeResize();
-   }
-}
-
-Menu.prototype.baseClass = "menu";
-Menu.prototype.tag = "ul";
-
-Widget.alias("menu", Menu);
-
-class MenuItemComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = { focusable: true };
-   }
-
-   render() {
-      let { itemInfo, itemIndex, itemKey, instance, cursor, hidden } = this.props;
-      let { widget } = instance;
-      let { CSS, baseClass } = widget;
-      let mods = {
-         cursor: cursor,
-         focusable: this.state.focusable,
-         hidden,
-      };
-
-      return (
-         <li
-            ref={(c) => {
-               this.el = c;
-               itemInfo[itemIndex] = {
-                  el: c,
-                  focusable: this.state.focusable,
-                  key: itemKey,
-               };
-            }}
-            className={CSS.element(baseClass, "item", mods)}
-            onFocus={this.onFocus.bind(this)}
-            onMouseDown={this.onMouseDown.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
-         >
-            {this.props.children}
-         </li>
-      );
-   }
-
-   onFocus(e) {
-      FocusManager.nudge();
-      debug(menuFlag, "MenuItem", "focus", this.el, e.target);
-      this.props.moveCursor(this.props.itemKey);
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (widget.onKeyDown) instance.invoke("onKeyDown", e, instance);
-   }
-
-   onMouseDown(e) {
-      e.stopPropagation();
-
-      //e.preventDefault(); //Causes problems with focusing menu items. Figure out why is this really needed?
-
-      debug(menuFlag, "MenuItem", "mouseDown", this.el);
-      if (this.state.focusable) {
-         let { itemInfo, itemIndex } = this.props;
-         let el = itemInfo[itemIndex].el;
-         let focusableSubElement = closest(e.target, (domEl) => domEl === el || isFocusable(domEl));
-         if (focusableSubElement == el) {
-            //the user clicked on an unfocusable branch of elements
-            //lets find a focusable child element and focus it
-            //TODO: explain why is this really needed
-            let focusedEl = getFocusedElement();
-            let focusedChild = FocusManager.focusFirst(el);
-            if (focusedChild !== focusedEl) {
-               debug(menuFlag, "MenuItem", "focusChild", focusedChild, focusedEl);
-            }
-         }
-      }
-   }
-
-   componentDidMount() {
-      this.componentDidUpdate();
-   }
-
-   componentDidUpdate() {
-      let { itemInfo, itemIndex, hidden } = this.props;
-      let focusable = !hidden && !!findFirst(this.el, isFocusable);
-      if (focusable !== this.state.focusable) {
-         itemInfo[itemIndex].focusable = focusable;
-         this.setState({ focusable: focusable });
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/nav/Menu.scss b/packages/cx/src/widgets/nav/Menu.scss
index a7b28dab0..df08f685e 100644
--- a/packages/cx/src/widgets/nav/Menu.scss
+++ b/packages/cx/src/widgets/nav/Menu.scss
@@ -1,8 +1,10 @@
+@use "sass:map";
+
 @mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       box-sizing: border-box;
@@ -38,7 +40,7 @@
          & > hr {
             border: none;
             border-top: 1px solid $cx-default-menu-separator-color;
-            margin: map-get($cx-menu-padding-options, medium);
+            margin: map.get($cx-menu-padding-options, medium);
          }
 
          &.#{$state}hidden {
diff --git a/packages/cx/src/widgets/nav/Menu.tsx b/packages/cx/src/widgets/nav/Menu.tsx
new file mode 100644
index 000000000..1fb12a11a
--- /dev/null
+++ b/packages/cx/src/widgets/nav/Menu.tsx
@@ -0,0 +1,489 @@
+/** @jsxImportSource react */
+import { FocusManager } from "../../ui/FocusManager";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { VDOM, Widget } from "../../ui/Widget";
+import { isTextInputElement } from "../../util";
+import { debug, menuFlag } from "../../util/Debug";
+import { closest, findFirst, getFocusedElement, isFocusable, isFocusedDeep, isSelfOrDescendant } from "../../util/DOM";
+import { isDefined } from "../../util/isDefined";
+import { isString } from "../../util/isString";
+import { isUndefined } from "../../util/isUndefined";
+import { KeyCode } from "../../util/KeyCode";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../HtmlElement";
+import { MenuItem } from "./MenuItem";
+import { MenuSpacer } from "./MenuSpacer";
+
+export interface MenuConfig extends HtmlElementConfig {
+   /** Set to `true` for horizontal menus. */
+   horizontal?: boolean;
+
+   /**
+    * Controls size of menu items. Supported values are `xsmall`, `small`, `medium`, `large` or `xlarge`.
+    * For horizontal menus default size is `small` and for vertical it's `medium`.
+    */
+   itemPadding?: string;
+
+   defaultVerticalItemPadding?: string;
+   defaultHorizontalItemPadding?: string;
+
+   /** Set to true to put overflow items into a submenu on the right. */
+   overflow?: boolean;
+
+   /** Icon to be used for the overflow menu. */
+   overflowIcon?: string;
+
+   /** Base CSS class to be applied to the element. No class is applied by default. */
+   baseClass?: string;
+
+   /** Show only overflow items. Used internally for overflow menus. */
+   showOnlyOverflowItems?: boolean;
+
+   /** Auto focus first menu item. */
+   autoFocus?: boolean;
+}
+
+/*
+ Functionality:
+ - renders a list of items in a form of horizontal or vertical menu
+ - provides cursor with mouse and keyboard nav
+ - changes focusElement to the first focusable child when cursor is moved using keyboard
+ */
+
+export class Menu extends HtmlElement<MenuConfig, MenuInstance> {
+   declare public baseClass: string;
+   declare public horizontal: boolean;
+   declare public itemPadding: string | boolean;
+   declare public defaultHorizontalItemPadding: string;
+   declare public defaultVerticalItemPadding: string;
+   declare public overflow: boolean;
+   declare public overflowIcon: string;
+   declare public tag: string;
+   declare public showOnlyOverflowItems?: boolean;
+   declare public autoFocus?: boolean;
+   static Item: typeof MenuItem;
+   static Spacer: typeof MenuSpacer;
+   init() {
+      if (this.itemPadding === true) this.itemPadding = "medium";
+
+      if (this.horizontal && isUndefined(this.itemPadding)) this.itemPadding = this.defaultHorizontalItemPadding;
+
+      if (!this.horizontal && isUndefined(this.itemPadding)) this.itemPadding = this.defaultVerticalItemPadding;
+
+      super.init();
+
+      if (this.overflow) {
+         if (!this.horizontal) throw new Error("Overflow works only on horizontal menus.");
+
+         this.items.push(
+            MenuItem.create({
+               icon: this.overflowIcon,
+               mod: "overflow",
+               items: [
+                  {
+                     type: Menu,
+                     putInto: "dropdown",
+                     items: [...this.items],
+                     showOnlyOverflowItems: true,
+                  },
+               ],
+            }),
+         );
+      }
+   }
+
+   prepareData(context: RenderingContext, instance: MenuInstance) {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         horizontal: this.horizontal,
+         vertical: !this.horizontal,
+         overflow: this.overflow,
+         [this.itemPadding + "-item-padding"]: this.itemPadding,
+      };
+      super.prepareData(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: MenuInstance) {
+      context.push("lastMenu", this);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: MenuInstance) {
+      context.pop("lastMenu");
+   }
+
+   render(context: RenderingContext, instance: MenuInstance, key: string) {
+      return (
+         <MenuComponent key={key} instance={instance}>
+            {this.renderChildren(context, instance)}
+         </MenuComponent>
+      );
+   }
+
+   add(item: any) {
+      if (item && (item.tag == "a" || item.tag == "hr")) {
+         let mi: any = {
+            type: MenuItem,
+            items: item,
+            autoClose: item.tag == "a",
+         };
+
+         if (isDefined(item.if)) mi.if = item.if;
+
+         if (isDefined(item.visible)) mi.visible = item.visible;
+
+         super.add(mi);
+      } else super.add(...arguments);
+   }
+}
+
+Menu.prototype.horizontal = false;
+Menu.prototype.defaultVerticalItemPadding = "medium";
+Menu.prototype.defaultHorizontalItemPadding = "small";
+Menu.prototype.icons = false;
+Menu.prototype.overflow = false;
+Menu.prototype.overflowIcon = "drop-down";
+Menu.Item = MenuItem;
+Menu.Spacer = MenuSpacer;
+
+export class MenuInstance extends HtmlElementInstance<Menu> {
+   declare nonOverflownItemCount?: number;
+}
+
+interface MenuComponentProps {
+   instance: MenuInstance;
+   children: any[];
+}
+
+interface MenuComponentState {
+   cursor: any;
+   nonOverflownItemCount: number;
+}
+
+class MenuComponent extends VDOM.Component<MenuComponentProps, MenuComponentState> {
+   el: HTMLElement | null = null;
+   declare itemInfo: any[];
+   isMeasureOverflowDisabled: boolean = false;
+   unsubscribeFocusOut?: () => void;
+   unsubscribeResize?: () => void;
+
+   constructor(props: MenuComponentProps) {
+      super(props);
+      this.state = {
+         cursor: null,
+         nonOverflownItemCount: Infinity,
+      };
+      this.ref = (el: HTMLElement | null) => {
+         this.el = el;
+      };
+   }
+
+   ref: (el: HTMLElement | null) => void;
+
+   render() {
+      let { instance, children } = this.props;
+      let { data, widget } = instance;
+      let { CSS, baseClass } = widget;
+      this.itemInfo = Array.from({ length: children.length });
+
+      let parentNonOverflownItemCount = 0;
+
+      if (widget.showOnlyOverflowItems) {
+         let { parent } = instance;
+         while (parent != null) {
+            if (parent instanceof MenuInstance) {
+               parentNonOverflownItemCount = parent.nonOverflownItemCount || 0;
+               break;
+            }
+            parent = parent.parent;
+         }
+      }
+
+      return (
+         <ul
+            ref={this.ref}
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  pack: this.state.nonOverflownItemCount < children.length - 1,
+               }),
+            )}
+            style={data.style}
+            onBlur={FocusManager.nudge}
+            onKeyDown={this.onKeyDown.bind(this)}
+         >
+            {children.map((content, index) => {
+               let key = content && typeof content == "object" && content.key ? content.key : index;
+
+               if (content && content.spacer) {
+                  return widget.horizontal && <li className={CSS.element(baseClass, "spacer")} key={key} />;
+               }
+
+               return (
+                  <MenuItemComponent
+                     key={key}
+                     cursor={key === this.state.cursor}
+                     hidden={
+                        index < parentNonOverflownItemCount ||
+                        (index >= this.state.nonOverflownItemCount && index + 1 != children.length)
+                     }
+                     instance={instance}
+                     itemInfo={this.itemInfo}
+                     itemKey={key}
+                     itemIndex={index}
+                     moveCursor={this.moveCursor.bind(this)}
+                  >
+                     {content}
+                  </MenuItemComponent>
+               );
+            })}
+         </ul>
+      );
+   }
+
+   moveCursor(itemKey: any) {
+      if (itemKey != this.state.cursor) {
+         debug(menuFlag, "Menu", "moveCursor", itemKey);
+         this.setState({ cursor: itemKey });
+      }
+   }
+
+   onKeyDown(e: React.KeyboardEvent) {
+      //ignore the event if it comes from an input element
+      if (isTextInputElement(e.target as Element)) return;
+
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      let keyCode = e.keyCode;
+      debug(menuFlag, "Menu", "keyDown", this.el, keyCode);
+      let { horizontal } = widget;
+
+      if (keyCode == KeyCode.tab) {
+         if (horizontal) keyCode = e.shiftKey ? KeyCode.left : KeyCode.up;
+         else keyCode = e.shiftKey ? KeyCode.right : KeyCode.down;
+      }
+
+      if (this.state.cursor != null) {
+         let cursorIndex = this.itemInfo.findIndex((a) => a.key == this.state.cursor);
+
+         if (horizontal ? keyCode == KeyCode.left : keyCode == KeyCode.up) {
+            for (let c = cursorIndex - 1; c >= 0; c--)
+               if (this.itemInfo[c].focusable) {
+                  FocusManager.focusFirst(this.itemInfo[c].el);
+                  e.stopPropagation();
+                  e.preventDefault();
+                  return;
+               }
+         }
+
+         if (horizontal ? keyCode == KeyCode.right : keyCode == KeyCode.down) {
+            for (let c = cursorIndex + 1; c < this.itemInfo.length; c++)
+               if (this.itemInfo[c].focusable) {
+                  FocusManager.focusFirst(this.itemInfo[c].el);
+                  e.stopPropagation();
+                  e.preventDefault();
+                  return;
+               }
+         }
+      }
+
+      switch (keyCode) {
+         case KeyCode.home:
+            if (this.itemInfo[0].focusable) {
+               FocusManager.focusFirst(this.itemInfo[0].el);
+               e.stopPropagation();
+               e.preventDefault();
+            }
+            break;
+
+         case KeyCode.end:
+            if (this.itemInfo[this.itemInfo.length - 1].focusable) {
+               FocusManager.focusFirst(this.itemInfo[this.itemInfo.length - 1].el);
+               e.stopPropagation();
+               e.preventDefault();
+            }
+            break;
+      }
+   }
+
+   onFocusOut(elementReceivingFocus: any) {
+      debug(menuFlag, "Menu", "focusout", this.el, elementReceivingFocus);
+      if (this.el && !isSelfOrDescendant(this.el, elementReceivingFocus)) this.moveCursor(null);
+   }
+
+   componentDidMount() {
+      let { widget } = this.props.instance;
+      if (widget.autoFocus && this.itemInfo.length > 0 && !isFocusedDeep(this.el!))
+         FocusManager.focusFirst(this.itemInfo[0].el);
+      if (widget.overflow) {
+         this.measureOverflow();
+         this.unsubscribeResize = ResizeManager.trackElement(this.el, this.measureOverflow.bind(this));
+      }
+      this.unsubscribeFocusOut = FocusManager.onFocusOut(this.el, this.onFocusOut.bind(this));
+   }
+
+   componentDidUpdate() {
+      this.measureOverflow();
+   }
+
+   measureOverflow() {
+      let { instance } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      if (!widget.overflow) return;
+
+      let spacerClass = CSS.element(baseClass, "spacer")!;
+
+      let nonOverflownItemCount = 0;
+      let fitItemsWidth = 0;
+      let children = Array.from(this.el!.children);
+      let widths = children.map((c) => {
+         if (!(c instanceof HTMLElement)) return 0;
+         if (c.classList.contains(spacerClass)) return 0;
+         let w = c.offsetWidth;
+         let style = getComputedStyle(c);
+         let marginLeft = style.getPropertyValue("margin-left");
+         if (isString(marginLeft) && marginLeft.endsWith("px")) w += parseFloat(marginLeft);
+         let marginRight = style.getPropertyValue("margin-right");
+         if (isString(marginRight) && marginRight.endsWith("px")) w += parseFloat(marginRight);
+         return w;
+      });
+      let clientWidth = this.el!.clientWidth;
+      let overflowWidth = widths[widths.length - 1];
+      for (let i = 0; i < widths.length - 1; i++) {
+         let overflowReduction = i == widths.length - 2 ? 0 : overflowWidth;
+         if (widths[i] + fitItemsWidth > clientWidth - overflowReduction) break;
+         nonOverflownItemCount++;
+         fitItemsWidth += widths[i];
+      }
+
+      instance.nonOverflownItemCount = nonOverflownItemCount;
+
+      if (!this.isMeasureOverflowDisabled && this.state.nonOverflownItemCount != nonOverflownItemCount) {
+         this.isMeasureOverflowDisabled = true;
+         this.setState(
+            {
+               nonOverflownItemCount,
+            },
+            () => {
+               this.isMeasureOverflowDisabled = false;
+            },
+         );
+      }
+   }
+
+   componentWillUnmount() {
+      this.unsubscribeFocusOut && this.unsubscribeFocusOut();
+      this.unsubscribeResize && this.unsubscribeResize();
+   }
+}
+
+Menu.prototype.baseClass = "menu";
+Menu.prototype.tag = "ul";
+
+Widget.alias("menu", Menu);
+
+interface MenuItemComponentProps {
+   itemInfo: any[];
+   itemIndex: number;
+   itemKey: any;
+   instance: MenuInstance;
+   cursor: boolean;
+   hidden: boolean;
+   moveCursor: (itemKey: any) => void;
+   children?: any;
+}
+
+interface MenuItemComponentState {
+   focusable: boolean;
+}
+
+class MenuItemComponent extends VDOM.Component<MenuItemComponentProps, MenuItemComponentState> {
+   el: HTMLElement | null = null;
+
+   constructor(props: MenuItemComponentProps) {
+      super(props);
+      this.state = { focusable: true };
+   }
+
+   render() {
+      let { itemInfo, itemIndex, itemKey, instance, cursor, hidden } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      let mods = {
+         cursor: cursor,
+         focusable: this.state.focusable,
+         hidden,
+      };
+
+      return (
+         <li
+            ref={(c) => {
+               this.el = c;
+               itemInfo[itemIndex] = {
+                  el: c,
+                  focusable: this.state.focusable,
+                  key: itemKey,
+               };
+            }}
+            className={CSS.element(baseClass, "item", mods)}
+            onFocus={this.onFocus.bind(this)}
+            onMouseDown={this.onMouseDown.bind(this)}
+            onKeyDown={this.onKeyDown.bind(this)}
+         >
+            {this.props.children}
+         </li>
+      );
+   }
+
+   onFocus(e: React.FocusEvent) {
+      FocusManager.nudge();
+      debug(menuFlag, "MenuItem", "focus", this.el, e.target);
+      this.props.moveCursor(this.props.itemKey);
+   }
+
+   onKeyDown(e: React.KeyboardEvent) {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (widget.onKeyDown) instance.invoke("onKeyDown", e, instance);
+   }
+
+   onMouseDown(e: React.MouseEvent) {
+      e.stopPropagation();
+
+      //e.preventDefault(); //Causes problems with focusing menu items. Figure out why is this really needed?
+
+      debug(menuFlag, "MenuItem", "mouseDown", this.el);
+      if (this.state.focusable) {
+         let { itemInfo, itemIndex } = this.props;
+         let el = itemInfo[itemIndex].el;
+         let focusableSubElement = closest(e.target as Element, (domEl) => domEl === el || isFocusable(domEl));
+         if (focusableSubElement == el) {
+            //the user clicked on an unfocusable branch of elements
+            //lets find a focusable child element and focus it
+            //TODO: explain why is this really needed
+            let focusedEl = getFocusedElement();
+            let focusedChild = FocusManager.focusFirst(el);
+            if (focusedChild !== focusedEl) {
+               debug(menuFlag, "MenuItem", "focusChild", focusedChild, focusedEl);
+            }
+         }
+      }
+   }
+
+   componentDidMount() {
+      this.componentDidUpdate();
+   }
+
+   componentDidUpdate() {
+      let { itemInfo, itemIndex, hidden } = this.props;
+      let focusable = !hidden && !!findFirst(this.el!, isFocusable);
+      if (focusable !== this.state.focusable) {
+         itemInfo[itemIndex].focusable = focusable;
+         this.setState({ focusable: focusable });
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/nav/Menu.variables.scss b/packages/cx/src/widgets/nav/Menu.variables.scss
index 248b4a99d..257ac1bbe 100644
--- a/packages/cx/src/widgets/nav/Menu.variables.scss
+++ b/packages/cx/src/widgets/nav/Menu.variables.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // MENU
 $cx-menu-state-style-map: $cx-list !default;
 $cx-default-menu-separator-color: lightgray !default;
@@ -13,7 +15,7 @@ $cx-menu-padding-options: (
 
 $cx-menu-list-item: () !default;
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/Menu": "cx/widgets/MenuItem",
diff --git a/packages/cx/src/widgets/nav/MenuItem.d.ts b/packages/cx/src/widgets/nav/MenuItem.d.ts
deleted file mode 100644
index 1fb701464..000000000
--- a/packages/cx/src/widgets/nav/MenuItem.d.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui";
-import { KeyboardShortcut } from "../../ui/keyboardShortcuts";
-
-export interface MenuItemProps extends Cx.HtmlElementProps {
-   /** Base CSS class to be applied to the element. Defaults to 'menuitem'. */
-   baseClass?: string;
-   hoverFocusTimeout?: number;
-   clickToOpen?: boolean;
-   hoverToOpen?: boolean;
-   horizontal?: boolean;
-   arrow?: Cx.BooleanProp;
-   dropdownOptions?: Cx.Config;
-   showCursor?: boolean;
-   pad?: boolean;
-   placement?: string;
-   placementOrder?: string;
-   autoClose?: boolean;
-   icons?: boolean;
-   icon?: Cx.StringProp;
-   keyboardShortcut?: KeyboardShortcut;
-   tooltip?: string | Cx.Config;
-   openOnFocus?: boolean;
-   disabled?: Cx.BooleanProp;
-   checked?: Cx.BooleanProp;
-
-   /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
-   confirm?: Cx.Prop<string | Cx.Config>;
-}
-
-export class MenuItem extends Cx.Widget<MenuItemProps> {}
diff --git a/packages/cx/src/widgets/nav/MenuItem.js b/packages/cx/src/widgets/nav/MenuItem.js
deleted file mode 100644
index 2047ddb5d..000000000
--- a/packages/cx/src/widgets/nav/MenuItem.js
+++ /dev/null
@@ -1,445 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Cx } from "../../ui/Cx";
-import { HtmlElement } from "../HtmlElement";
-import { findFirstChild, isFocusable, isSelfOrDescendant, closest, isFocusedDeep, isFocused } from "../../util/DOM";
-import { Dropdown } from "../overlay/Dropdown";
-import { FocusManager, oneFocusOut, offFocusOut } from "../../ui/FocusManager";
-import { debug, menuFlag } from "../../util/Debug";
-import DropdownIcon from "../icons/drop-down";
-import { Icon } from "../Icon";
-import { Localization } from "../../ui/Localization";
-import { KeyCode } from "../../util/KeyCode";
-import { registerKeyboardShortcut } from "../../ui/keyboardShortcuts";
-import { getActiveElement } from "../../util/getActiveElement";
-import {
-   tooltipMouseLeave,
-   tooltipMouseMove,
-   tooltipParentWillUnmount,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { yesNo } from "../overlay/alerts";
-import { isTextInputElement, stopPropagation } from "../../util";
-import { unfocusElement } from "../../ui/FocusManager";
-
-/*
- Functionality:
- - renders dropdown when focused
- - tracks focus and closes if focusElement goes outside the dropdown
- - switches focus to the dropdown when right key pressed
- - listens to dropdown's key events and captures focus back when needed
- - automatically opens the dropdown if mouse is held over for a period of time
- */
-
-export class MenuItem extends HtmlElement {
-   init() {
-      if (this.hideCursor) this.showCursor = false;
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         icon: undefined,
-         disabled: undefined,
-         checked: false,
-         arrow: undefined,
-         confirm: undefined,
-      });
-   }
-
-   explore(context, instance) {
-      instance.horizontal = this.horizontal;
-      let { lastMenu } = context;
-      if (lastMenu) {
-         instance.horizontal = lastMenu.horizontal;
-         instance.padding = lastMenu.itemPadding;
-         instance.icons = lastMenu.icons;
-      }
-
-      instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
-
-      if (!instance.padding && this.pad == true) instance.padding = "medium";
-
-      if (this.padding) instance.padding = this.padding;
-
-      context.push("lastMenuItem", this);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("lastMenuItem");
-   }
-
-   render(context, instance, key) {
-      return (
-         <MenuItemComponent key={key} instance={instance} data={instance.data}>
-            {instance.data.text ? <span>{instance.data.text}</span> : this.renderChildren(context, instance)}
-         </MenuItemComponent>
-      );
-   }
-
-   add(element) {
-      if (element && typeof element == "object" && element.putInto == "dropdown") {
-         this.dropdown = { ...element };
-         delete this.dropdown.putInto;
-      } else super.add(...arguments);
-   }
-
-   addText(text) {
-      this.add({
-         type: HtmlElement,
-         tag: "span",
-         text: text,
-      });
-   }
-}
-
-MenuItem.prototype.baseClass = "menuitem";
-MenuItem.prototype.hoverFocusTimeout = 500;
-MenuItem.prototype.hoverToOpen = false;
-MenuItem.prototype.clickToOpen = false;
-MenuItem.prototype.horizontal = true;
-MenuItem.prototype.arrow = false;
-MenuItem.prototype.dropdownOptions = null;
-MenuItem.prototype.showCursor = true;
-MenuItem.prototype.pad = true;
-MenuItem.prototype.placement = null; //default dropdown placement
-MenuItem.prototype.placementOrder = null; //allowed menu placements
-MenuItem.prototype.autoClose = false;
-MenuItem.prototype.checkedIcon = "check";
-MenuItem.prototype.uncheckedIcon = "dummy";
-MenuItem.prototype.keyboardShortcut = false;
-MenuItem.prototype.openOnFocus = true;
-
-Widget.alias("submenu", MenuItem);
-Localization.registerPrototype("cx/widgets/MenuItem", MenuItem);
-
-class MenuItemComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         dropdownOpen: false,
-      };
-   }
-
-   getDefaultPlacementOrder(horizontal) {
-      return horizontal
-         ? "down-right down down-left up-right up up-left"
-         : "right-down right right-up left-down left left-up";
-   }
-
-   getDropdown() {
-      let { horizontal, widget, parentPositionChangeEvent } = this.props.instance;
-      if (!this.dropdown && widget.dropdown) {
-         this.dropdown = Widget.create(Dropdown, {
-            matchWidth: false,
-            placementOrder: widget.placementOrder || this.getDefaultPlacementOrder(horizontal),
-            trackScroll: true,
-            inline: true,
-            onClick: stopPropagation,
-            ...widget.dropdownOptions,
-            relatedElement: this.el.parentElement,
-            placement: widget.placement,
-            onKeyDown: this.onDropdownKeyDown.bind(this),
-            onMouseDown: stopPropagation,
-            items: widget.dropdown,
-            parentPositionChangeEvent,
-            pipeValidateDropdownPosition: (cb) => {
-               this.validateDropdownPosition = cb;
-            },
-            onDismissAfterScroll: () => {
-               this.closeDropdown();
-               return false;
-            },
-         });
-      }
-      return this.dropdown;
-   }
-
-   render() {
-      let { instance, data, children } = this.props;
-      let { widget } = instance;
-      let { CSS, baseClass } = widget;
-      let dropdown = this.state.dropdownOpen && (
-         <Cx widget={this.getDropdown()} options={{ name: "submenu" }} parentInstance={instance} subscribe />
-      );
-
-      let arrow = data.arrow && <DropdownIcon className={CSS.element(baseClass, "arrow")} />;
-
-      let icon = null;
-
-      let checkbox = widget.checked != null;
-
-      if (checkbox) {
-         data.icon = data.checked ? widget.checkedIcon : widget.uncheckedIcon;
-      }
-
-      if (data.icon) {
-         icon = (
-            <div
-               className={CSS.element(baseClass, "button")}
-               onClick={(e) => {
-                  e.preventDefault();
-                  if (!instance.set("checked", !data.checked)) this.onClick(e);
-               }}
-               onMouseDown={(e) => {
-                  if (checkbox) e.stopPropagation();
-               }}
-            >
-               {Icon.render(data.icon, { className: CSS.element(baseClass, "icon") })}
-            </div>
-         );
-      }
-
-      let empty = !children || (Array.isArray(children) && children.length == 0);
-
-      let classNames = CSS.expand(
-         data.classNames,
-         CSS.state({
-            open: this.state.dropdownOpen,
-            horizontal: instance.horizontal,
-            vertical: !instance.horizontal,
-            arrow: data.arrow,
-            cursor: widget.showCursor,
-            [instance.padding + "-padding"]: instance.padding,
-            icon: !!icon || instance.icons,
-            disabled: data.disabled,
-            empty,
-         })
-      );
-
-      if (empty) children = <span className={CSS.element(baseClass, "baseline")}>&nbsp;</span>;
-
-      return (
-         <div
-            className={classNames}
-            style={data.style}
-            tabIndex={!data.disabled && (widget.dropdown || widget.onClick || widget.checked) ? 0 : null}
-            ref={(el) => {
-               this.el = el;
-            }}
-            onKeyDown={this.onKeyDown.bind(this)}
-            onMouseDown={this.onMouseDown.bind(this)}
-            onMouseEnter={this.onMouseEnter.bind(this)}
-            onMouseLeave={this.onMouseLeave.bind(this)}
-            onFocus={this.onFocus.bind(this)}
-            onClick={this.onClick.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-         >
-            {children}
-            {icon}
-            {arrow}
-            {dropdown}
-         </div>
-      );
-   }
-
-   componentDidUpdate() {
-      if (this.state.dropdownOpen && this.validateDropdownPosition) {
-         this.validateDropdownPosition();
-      }
-   }
-
-   componentDidMount() {
-      let { widget } = this.props.instance;
-      if (widget.keyboardShortcut)
-         this.unregisterKeyboardShortcut = registerKeyboardShortcut(widget.keyboardShortcut, (e) => {
-            this.el.focus(); //open the dropdown
-            this.onClick(e); //execute the onClick handler
-         });
-
-      tooltipParentDidMount(this.el, this.props.instance, widget.tooltip);
-   }
-
-   onDropdownKeyDown(e) {
-      debug(menuFlag, "MenuItem", "dropdownKeyDown");
-      let { horizontal } = this.props.instance;
-      if (
-         e.keyCode == KeyCode.esc ||
-         (!isTextInputElement(e.target) && (horizontal ? e.keyCode == KeyCode.up : e.keyCode == KeyCode.left))
-      ) {
-         FocusManager.focus(this.el);
-         e.preventDefault();
-         e.stopPropagation();
-      }
-   }
-
-   clearAutoFocusTimer() {
-      if (this.autoFocusTimerId) {
-         debug(menuFlag, "MenuItem", "autoFocusCancel");
-         clearTimeout(this.autoFocusTimerId);
-         delete this.autoFocusTimerId;
-      }
-   }
-
-   onMouseEnter(e) {
-      debug(menuFlag, "MenuItem", "mouseEnter", this.el);
-      let { widget } = this.props.instance;
-      if (widget.dropdown && !this.state.dropdownOpen) {
-         this.clearAutoFocusTimer();
-
-         if (widget.hoverToOpen) FocusManager.focus(this.el);
-         else if (!widget.clickToOpen) {
-            // Automatically open the dropdown only if parent menu is focused
-            let commonParentMenu = closest(this.el, (el) => el.tagName == "UL" && el.contains(getActiveElement()));
-            if (commonParentMenu)
-               this.autoFocusTimerId = setTimeout(() => {
-                  delete this.autoFocusTimerId;
-                  if (!this.state.dropdownOpen) {
-                     debug(menuFlag, "MenuItem", "hoverFocusTimeout:before", this.el);
-                     FocusManager.focus(this.el);
-                     debug(menuFlag, "MenuItem", "hoverFocusTimeout:after", this.el, getActiveElement());
-                  }
-               }, widget.hoverFocusTimeout);
-         }
-
-         e.stopPropagation();
-         e.preventDefault();
-      }
-
-      tooltipMouseMove(e, this.props.instance, widget.tooltip);
-   }
-
-   onMouseLeave(e) {
-      let { widget } = this.props.instance;
-      if (widget.dropdown) {
-         debug(menuFlag, "MenuItem", "mouseLeave", this.el);
-         this.clearAutoFocusTimer();
-
-         if (widget.hoverToOpen && document.activeElement == this.el) unfocusElement(this.el);
-      }
-
-      tooltipMouseLeave(e, this.props.instance, widget.tooltip);
-   }
-
-   onKeyDown(e) {
-      debug(menuFlag, "MenuItem", "keyDown", this.el);
-      let { horizontal, widget } = this.props.instance;
-      if (widget.dropdown) {
-         if (
-            !this.state.dropdownOpen &&
-            e.target == this.el &&
-            (e.keyCode == KeyCode.enter || (horizontal ? e.keyCode == KeyCode.down : e.keyCode == KeyCode.right))
-         ) {
-            this.openDropdown(() => {
-               let focusableChild = findFirstChild(this.el, isFocusable);
-               if (focusableChild) FocusManager.focus(focusableChild);
-            });
-            e.preventDefault();
-            e.stopPropagation();
-         }
-
-         if (e.keyCode == KeyCode.esc) {
-            if (!isFocused(this.el)) {
-               FocusManager.focus(this.el);
-               e.preventDefault();
-               e.stopPropagation();
-            }
-            this.closeDropdown();
-         }
-      } else {
-         if (e.keyCode == KeyCode.enter && widget.onClick) this.onClick(e);
-      }
-   }
-
-   onMouseDown(e) {
-      let { widget } = this.props.instance;
-      if (widget.dropdown) {
-         e.stopPropagation();
-         if (this.state.dropdownOpen && !widget.hoverToOpen) this.closeDropdown();
-         else {
-            //IE sometimes does not focus parent on child click
-            if (!isFocusedDeep(this.el)) FocusManager.focus(this.el);
-            this.openDropdown();
-
-            //If one of the elements is auto focused prevent stealing focus
-            if (isFocusedDeep(this.el)) e.preventDefault();
-         }
-      }
-   }
-
-   openDropdown(callback) {
-      let { widget } = this.props.instance;
-      if (widget.dropdown) {
-         if (!this.state.dropdownOpen) {
-            this.setState(
-               {
-                  dropdownOpen: true,
-               },
-               callback
-            );
-
-            //hide tooltip if dropdown is open
-            tooltipMouseLeave(null, this.props.instance, widget.tooltip);
-         } else if (callback) callback(this.state);
-      }
-   }
-
-   onClick(e) {
-      e.stopPropagation();
-
-      let { instance } = this.props;
-      let { data } = instance;
-      if (data.disabled) {
-         e.preventDefault();
-         return;
-      }
-
-      let { widget } = instance;
-      if (widget.dropdown) e.preventDefault();
-      //prevent navigation
-      else {
-         instance.set("checked", !instance.data.checked);
-
-         if (widget.onClick) {
-            if (data.confirm) {
-               yesNo(data.confirm).then((btn) => {
-                  if (btn == "yes") instance.invoke("onClick", null, instance);
-               });
-            } else instance.invoke("onClick", e, instance);
-         }
-      }
-
-      if (widget.autoClose) unfocusElement(this.el, true);
-   }
-
-   onFocus() {
-      let { widget } = this.props.instance;
-      if (widget.dropdown) {
-         oneFocusOut(this, this.el, this.onFocusOut.bind(this));
-         debug(menuFlag, "MenuItem", "focus", this.el, document.activeElement);
-         this.clearAutoFocusTimer();
-         if (widget.openOnFocus) this.openDropdown();
-      }
-   }
-
-   onBlur() {
-      FocusManager.nudge();
-   }
-
-   closeDropdown() {
-      this.setState({
-         dropdownOpen: false,
-      });
-      delete this.initialScreenPosition;
-   }
-
-   onFocusOut(focusedElement) {
-      debug(menuFlag, "MenuItem", "focusout", this.el, focusedElement);
-      this.clearAutoFocusTimer();
-      if (this.el && !isSelfOrDescendant(this.el, focusedElement)) {
-         debug(menuFlag, "MenuItem", "closing dropdown", this.el, focusedElement);
-         this.closeDropdown();
-      }
-   }
-
-   componentWillUnmount() {
-      this.clearAutoFocusTimer();
-      offFocusOut(this);
-
-      if (this.offParentPositionChange) this.offParentPositionChange();
-
-      if (this.unregisterKeyboardShortcut) this.unregisterKeyboardShortcut();
-
-      tooltipParentWillUnmount(this.props.instance);
-   }
-}
diff --git a/packages/cx/src/widgets/nav/MenuItem.scss b/packages/cx/src/widgets/nav/MenuItem.scss
index 38b734e97..57ec4c522 100644
--- a/packages/cx/src/widgets/nav/MenuItem.scss
+++ b/packages/cx/src/widgets/nav/MenuItem.scss
@@ -1,13 +1,15 @@
+@use "sass:map";
+
 @mixin cx-menuitem(
    $name: "menuitem",
    $state-style-map: cx-deep-map-merge($cx-list-item, $cx-menu-list-item),
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       box-sizing: border-box;
diff --git a/packages/cx/src/widgets/nav/MenuItem.tsx b/packages/cx/src/widgets/nav/MenuItem.tsx
new file mode 100644
index 000000000..4723c3f99
--- /dev/null
+++ b/packages/cx/src/widgets/nav/MenuItem.tsx
@@ -0,0 +1,525 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Cx } from "../../ui/Cx";
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "../HtmlElement";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { findFirstChild, isFocusable, isSelfOrDescendant, closest, isFocusedDeep, isFocused } from "../../util/DOM";
+import { Dropdown, DropdownConfig } from "../overlay/Dropdown";
+import { FocusManager, oneFocusOut, offFocusOut } from "../../ui/FocusManager";
+import { debug, menuFlag } from "../../util/Debug";
+import DropdownIcon from "../icons/drop-down";
+import { Icon } from "../Icon";
+import { Localization } from "../../ui/Localization";
+import { KeyCode } from "../../util/KeyCode";
+import { registerKeyboardShortcut, KeyboardShortcut } from "../../ui/keyboardShortcuts";
+import { getActiveElement } from "../../util/getActiveElement";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentWillUnmount,
+   tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { yesNo } from "../overlay/alerts";
+import { isTextInputElement, stopPropagation } from "../../util";
+import { unfocusElement } from "../../ui/FocusManager";
+import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
+import { Config } from "../../ui/Prop";
+
+/*
+ Functionality:
+ - renders dropdown when focused
+ - tracks focus and closes if focusElement goes outside the dropdown
+ - switches focus to the dropdown when right key pressed
+ - listens to dropdown's key events and captures focus back when needed
+ - automatically opens the dropdown if mouse is held over for a period of time
+ */
+
+export interface MenuItemConfig extends HtmlElementConfigBase {
+   baseClass?: string;
+   hoverFocusTimeout?: number;
+   clickToOpen?: boolean;
+   hoverToOpen?: boolean;
+   horizontal?: boolean;
+   arrow?: BooleanProp;
+   dropdownOptions?: Partial<DropdownConfig>;
+   showCursor?: boolean;
+   pad?: boolean;
+   placement?: string;
+   placementOrder?: string;
+   autoClose?: boolean;
+   icons?: boolean;
+   icon?: StringProp;
+   keyboardShortcut?: KeyboardShortcut | false;
+   tooltip?: string | Config;
+   openOnFocus?: boolean;
+   disabled?: BooleanProp;
+   checked?: BooleanProp;
+   confirm?: Prop<string | Config>;
+   checkedIcon?: string;
+   uncheckedIcon?: string;
+   padding?: string;
+   hideCursor?: boolean;
+   dropdown?: any;
+   onClick?: string | ((e: React.MouseEvent | null, instance: HtmlElementInstance<MenuItem>) => void);
+   onMouseDown?: string | ((e: React.MouseEvent, instance: HtmlElementInstance<MenuItem>) => void);
+}
+
+export class MenuItemInstance extends HtmlElementInstance<MenuItem> {
+   declare horizontal?: boolean;
+   declare padding?: string;
+   declare icons?: boolean;
+   declare parentPositionChangeEvent?: any;
+}
+
+export class MenuItem extends HtmlElement<MenuItemConfig, MenuItemInstance> {
+   declare public baseClass: string;
+   declare public hoverFocusTimeout: number;
+   declare public clickToOpen: boolean;
+   declare public hoverToOpen: boolean;
+   declare public horizontal: boolean;
+   declare public arrow: BooleanProp;
+   declare public dropdownOptions: Partial<DropdownConfig> | null;
+   declare public showCursor: boolean;
+   declare public pad: boolean;
+   declare public placement: string | null;
+   declare public placementOrder: string | null;
+   declare public autoClose: boolean;
+   declare public checkedIcon: string;
+   declare public uncheckedIcon: string;
+   declare public keyboardShortcut: KeyboardShortcut | false;
+   declare public openOnFocus: boolean;
+   declare public hideCursor?: boolean;
+   declare public checked?: BooleanProp;
+   declare public padding?: string;
+   declare public dropdown?: any;
+   init() {
+      if (this.hideCursor) this.showCursor = false;
+      super.init();
+   }
+
+   declareData() {
+      super.declareData(...arguments, {
+         icon: undefined,
+         disabled: undefined,
+         checked: false,
+         arrow: undefined,
+         confirm: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: MenuItemInstance) {
+      instance.horizontal = this.horizontal;
+      let { lastMenu } = context;
+      if (lastMenu) {
+         instance.horizontal = lastMenu.horizontal;
+         instance.padding = lastMenu.itemPadding;
+         instance.icons = lastMenu.icons;
+      }
+
+      instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
+
+      if (!instance.padding && this.pad == true) instance.padding = "medium";
+
+      if (this.padding) instance.padding = this.padding;
+
+      context.push("lastMenuItem", this);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: MenuItemInstance) {
+      context.pop("lastMenuItem");
+   }
+
+   render(context: RenderingContext, instance: MenuItemInstance, key: string) {
+      return (
+         <MenuItemComponent key={key} instance={instance} data={instance.data}>
+            {instance.data.text ? <span>{instance.data.text}</span> : this.renderChildren(context, instance)}
+         </MenuItemComponent>
+      );
+   }
+
+   add(element: any) {
+      if (element && typeof element == "object" && element.putInto == "dropdown") {
+         this.dropdown = { ...element };
+         delete this.dropdown.putInto;
+      } else super.add(...arguments);
+   }
+
+   addText(text: any) {
+      this.add({
+         type: HtmlElement,
+         tag: "span",
+         text: text,
+      });
+   }
+}
+
+MenuItem.prototype.baseClass = "menuitem";
+MenuItem.prototype.hoverFocusTimeout = 500;
+MenuItem.prototype.hoverToOpen = false;
+MenuItem.prototype.clickToOpen = false;
+MenuItem.prototype.horizontal = true;
+MenuItem.prototype.arrow = false;
+MenuItem.prototype.dropdownOptions = null;
+MenuItem.prototype.showCursor = true;
+MenuItem.prototype.pad = true;
+MenuItem.prototype.placement = null; //default dropdown placement
+MenuItem.prototype.placementOrder = null; //allowed menu placements
+MenuItem.prototype.autoClose = false;
+MenuItem.prototype.checkedIcon = "check";
+MenuItem.prototype.uncheckedIcon = "dummy";
+MenuItem.prototype.keyboardShortcut = false;
+MenuItem.prototype.openOnFocus = true;
+
+Widget.alias("submenu", MenuItem);
+Localization.registerPrototype("cx/widgets/MenuItem", MenuItem);
+
+interface MenuItemComponentProps {
+   instance: MenuItemInstance;
+   data: any;
+   children?: any;
+}
+
+interface MenuItemComponentState {
+   dropdownOpen: boolean;
+}
+
+class MenuItemComponent extends VDOM.Component<MenuItemComponentProps, MenuItemComponentState> {
+   declare dropdown?: Widget;
+   declare el?: HTMLElement;
+   validateDropdownPosition?: () => void;
+   unregisterKeyboardShortcut?: () => void;
+   declare autoFocusTimerId?: number;
+   declare initialScreenPosition?: any;
+   offParentPositionChange?: () => void;
+
+   constructor(props: MenuItemComponentProps) {
+      super(props);
+      this.state = {
+         dropdownOpen: false,
+      };
+   }
+
+   getDefaultPlacementOrder(horizontal?: boolean) {
+      return horizontal
+         ? "down-right down down-left up-right up up-left"
+         : "right-down right right-up left-down left left-up";
+   }
+
+   getDropdown() {
+      let { horizontal, widget, parentPositionChangeEvent } = this.props.instance;
+      if (!this.dropdown && widget.dropdown) {
+         this.dropdown = Widget.create(Dropdown, {
+            matchWidth: false,
+            placementOrder: widget.placementOrder || this.getDefaultPlacementOrder(horizontal),
+            trackScroll: true,
+            inline: true,
+            onClick: stopPropagation,
+            ...widget.dropdownOptions,
+            relatedElement: this.el!.parentElement,
+            placement: widget.placement,
+            onKeyDown: this.onDropdownKeyDown.bind(this),
+            onMouseDown: stopPropagation,
+            items: widget.dropdown,
+            parentPositionChangeEvent,
+            pipeValidateDropdownPosition: (cb: any) => {
+               this.validateDropdownPosition = cb;
+            },
+            onDismissAfterScroll: () => {
+               this.closeDropdown();
+               return false;
+            },
+         });
+      }
+      return this.dropdown;
+   }
+
+   render() {
+      let { instance, data, children } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      let dropdown = this.state.dropdownOpen && (
+         <Cx widget={this.getDropdown()} options={{ name: "submenu" }} parentInstance={instance} subscribe />
+      );
+
+      let arrow = data.arrow && <DropdownIcon className={CSS.element(baseClass, "arrow")} />;
+
+      let icon = null;
+
+      let checkbox = widget.checked != null;
+
+      if (checkbox) {
+         data.icon = data.checked ? widget.checkedIcon : widget.uncheckedIcon;
+      }
+
+      if (data.icon) {
+         icon = (
+            <div
+               className={CSS.element(baseClass, "button")}
+               onClick={(e) => {
+                  e.preventDefault();
+                  if (!instance.set("checked", !data.checked)) this.onClick(e);
+               }}
+               onMouseDown={(e) => {
+                  if (checkbox) e.stopPropagation();
+               }}
+            >
+               {Icon.render(data.icon, { className: CSS.element(baseClass, "icon") })}
+            </div>
+         );
+      }
+
+      let empty = !children || (Array.isArray(children) && children.length == 0);
+
+      let classNames = CSS.expand(
+         data.classNames,
+         CSS.state({
+            open: this.state.dropdownOpen,
+            horizontal: instance.horizontal,
+            vertical: !instance.horizontal,
+            arrow: data.arrow,
+            cursor: widget.showCursor,
+            [instance.padding + "-padding"]: instance.padding,
+            icon: !!icon || instance.icons,
+            disabled: data.disabled,
+            empty,
+         }),
+      );
+
+      if (empty) children = <span className={CSS.element(baseClass, "baseline")}>&nbsp;</span>;
+
+      return (
+         <div
+            className={classNames}
+            style={data.style}
+            tabIndex={!data.disabled && (widget.dropdown || widget.onClick || widget.checked) ? 0 : undefined}
+            ref={(el: any) => {
+               this.el = el;
+            }}
+            onKeyDown={this.onKeyDown.bind(this)}
+            onMouseDown={this.onMouseDown.bind(this)}
+            onMouseEnter={this.onMouseEnter.bind(this)}
+            onMouseLeave={this.onMouseLeave.bind(this)}
+            onFocus={this.onFocus.bind(this)}
+            onClick={this.onClick.bind(this)}
+            onBlur={this.onBlur.bind(this)}
+         >
+            {children}
+            {icon}
+            {arrow}
+            {dropdown}
+         </div>
+      );
+   }
+
+   componentDidUpdate() {
+      if (this.state.dropdownOpen && this.validateDropdownPosition) {
+         this.validateDropdownPosition();
+      }
+   }
+
+   componentDidMount() {
+      let { widget } = this.props.instance;
+      if (widget.keyboardShortcut)
+         this.unregisterKeyboardShortcut = registerKeyboardShortcut(widget.keyboardShortcut, (e: any) => {
+            this.el!.focus(); //open the dropdown
+            this.onClick(e); //execute the onClick handler
+         });
+
+      tooltipParentDidMount(this.el!, this.props.instance, widget.tooltip);
+   }
+
+   onDropdownKeyDown(e: React.KeyboardEvent) {
+      debug(menuFlag, "MenuItem", "dropdownKeyDown");
+      let { horizontal } = this.props.instance;
+      if (
+         e.keyCode == KeyCode.esc ||
+         (!isTextInputElement(e.currentTarget) && (horizontal ? e.keyCode == KeyCode.up : e.keyCode == KeyCode.left))
+      ) {
+         FocusManager.focus(this.el!);
+         e.preventDefault();
+         e.stopPropagation();
+      }
+   }
+
+   clearAutoFocusTimer() {
+      if (this.autoFocusTimerId) {
+         debug(menuFlag, "MenuItem", "autoFocusCancel");
+         clearTimeout(this.autoFocusTimerId);
+         delete this.autoFocusTimerId;
+      }
+   }
+
+   onMouseEnter(e: React.MouseEvent) {
+      debug(menuFlag, "MenuItem", "mouseEnter", this.el);
+      let { widget } = this.props.instance;
+      if (widget.dropdown && !this.state.dropdownOpen) {
+         this.clearAutoFocusTimer();
+
+         if (widget.hoverToOpen) FocusManager.focus(this.el!);
+         else if (!widget.clickToOpen) {
+            // Automatically open the dropdown only if parent menu is focused
+            let commonParentMenu = closest(this.el!, (el) => el.tagName == "UL" && el.contains(getActiveElement()));
+            if (commonParentMenu)
+               this.autoFocusTimerId = setTimeout(() => {
+                  delete this.autoFocusTimerId;
+                  if (!this.state.dropdownOpen) {
+                     debug(menuFlag, "MenuItem", "hoverFocusTimeout:before", this.el);
+                     FocusManager.focus(this.el!);
+                     debug(menuFlag, "MenuItem", "hoverFocusTimeout:after", this.el, getActiveElement());
+                  }
+               }, widget.hoverFocusTimeout) as any;
+         }
+
+         e.stopPropagation();
+         e.preventDefault();
+      }
+
+      tooltipMouseMove(e, this.props.instance, widget.tooltip);
+   }
+
+   onMouseLeave(e: React.MouseEvent) {
+      let { widget } = this.props.instance;
+      if (widget.dropdown) {
+         debug(menuFlag, "MenuItem", "mouseLeave", this.el);
+         this.clearAutoFocusTimer();
+
+         if (widget.hoverToOpen && document.activeElement == this.el) unfocusElement(this.el!);
+      }
+
+      tooltipMouseLeave(e, this.props.instance, widget.tooltip);
+   }
+
+   onKeyDown(e: React.KeyboardEvent) {
+      debug(menuFlag, "MenuItem", "keyDown", this.el);
+      let { horizontal, widget } = this.props.instance;
+      if (widget.dropdown) {
+         if (
+            !this.state.dropdownOpen &&
+            e.target == this.el &&
+            (e.keyCode == KeyCode.enter || (horizontal ? e.keyCode == KeyCode.down : e.keyCode == KeyCode.right))
+         ) {
+            this.openDropdown(() => {
+               let focusableChild = findFirstChild(this.el!, isFocusable);
+               if (focusableChild) FocusManager.focus(focusableChild);
+            });
+            e.preventDefault();
+            e.stopPropagation();
+         }
+
+         if (e.keyCode == KeyCode.esc) {
+            if (!isFocused(this.el!)) {
+               FocusManager.focus(this.el!);
+               e.preventDefault();
+               e.stopPropagation();
+            }
+            this.closeDropdown();
+         }
+      } else {
+         if (e.keyCode == KeyCode.enter && widget.onClick) this.onClick(e);
+      }
+   }
+
+   onMouseDown(e: React.MouseEvent) {
+      let { widget } = this.props.instance;
+      if (widget.dropdown) {
+         e.stopPropagation();
+         if (this.state.dropdownOpen && !widget.hoverToOpen) this.closeDropdown();
+         else {
+            //IE sometimes does not focus parent on child click
+            if (!isFocusedDeep(this.el!)) FocusManager.focus(this.el!);
+            this.openDropdown();
+
+            //If one of the elements is auto focused prevent stealing focus
+            if (isFocusedDeep(this.el!)) e.preventDefault();
+         }
+      }
+   }
+
+   openDropdown(callback?: any) {
+      let { widget } = this.props.instance;
+      if (widget.dropdown) {
+         if (!this.state.dropdownOpen) {
+            this.setState(
+               {
+                  dropdownOpen: true,
+               },
+               callback,
+            );
+
+            //hide tooltip if dropdown is open
+            tooltipMouseLeave(null as any, this.props.instance, widget.tooltip);
+         } else if (callback) callback(this.state);
+      }
+   }
+
+   onClick(e: any) {
+      e.stopPropagation();
+
+      let { instance } = this.props;
+      let { data } = instance;
+      if (data.disabled) {
+         e.preventDefault();
+         return;
+      }
+
+      let { widget } = instance;
+      if (widget.dropdown) e.preventDefault();
+      //prevent navigation
+      else {
+         instance.set("checked", !instance.data.checked);
+
+         if (widget.onClick) {
+            if (data.confirm) {
+               yesNo(data.confirm).then((btn) => {
+                  if (btn == "yes") instance.invoke("onClick", null, instance);
+               });
+            } else instance.invoke("onClick", e, instance);
+         }
+      }
+
+      if (widget.autoClose) unfocusElement(this.el, true);
+   }
+
+   onFocus() {
+      let { widget } = this.props.instance;
+      if (widget.dropdown) {
+         oneFocusOut(this, this.el!, this.onFocusOut.bind(this));
+         debug(menuFlag, "MenuItem", "focus", this.el, document.activeElement);
+         this.clearAutoFocusTimer();
+         if (widget.openOnFocus) this.openDropdown();
+      }
+   }
+
+   onBlur() {
+      FocusManager.nudge();
+   }
+
+   closeDropdown() {
+      this.setState({
+         dropdownOpen: false,
+      });
+      delete this.initialScreenPosition;
+   }
+
+   onFocusOut(focusedElement: any) {
+      debug(menuFlag, "MenuItem", "focusout", this.el, focusedElement);
+      this.clearAutoFocusTimer();
+      if (this.el && !isSelfOrDescendant(this.el, focusedElement)) {
+         debug(menuFlag, "MenuItem", "closing dropdown", this.el, focusedElement);
+         this.closeDropdown();
+      }
+   }
+
+   componentWillUnmount() {
+      this.clearAutoFocusTimer();
+      offFocusOut(this);
+
+      if (this.offParentPositionChange) this.offParentPositionChange();
+
+      if (this.unregisterKeyboardShortcut) this.unregisterKeyboardShortcut();
+
+      tooltipParentWillUnmount(this.props.instance);
+   }
+}
diff --git a/packages/cx/src/widgets/nav/MenuSpacer.d.ts b/packages/cx/src/widgets/nav/MenuSpacer.d.ts
deleted file mode 100644
index 749000769..000000000
--- a/packages/cx/src/widgets/nav/MenuSpacer.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as Cx from '../../core';
-
-export interface MenuSpacerProps extends Cx.WidgetProps {}
-
-export class MenuSpacer extends Cx.Widget<MenuSpacerProps> {}
diff --git a/packages/cx/src/widgets/nav/MenuSpacer.js b/packages/cx/src/widgets/nav/MenuSpacer.js
deleted file mode 100644
index 06bc5c28d..000000000
--- a/packages/cx/src/widgets/nav/MenuSpacer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Widget} from "../../ui/Widget";
-
-export class MenuSpacer extends Widget {
-   render(context, instance, key) {
-      return {
-         key: true,
-         atomic: true,
-         spacer: true
-      };
-   }
-}
-
-MenuSpacer.prototype.isMenuSpacer = true;
\ No newline at end of file
diff --git a/packages/cx/src/widgets/nav/MenuSpacer.ts b/packages/cx/src/widgets/nav/MenuSpacer.ts
new file mode 100644
index 000000000..9cb48b507
--- /dev/null
+++ b/packages/cx/src/widgets/nav/MenuSpacer.ts
@@ -0,0 +1,19 @@
+import { Widget, WidgetConfig } from "../../ui/Widget";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface MenuSpacerConfig extends WidgetConfig {}
+
+export class MenuSpacer extends Widget<MenuSpacerConfig> {
+   declare public isMenuSpacer: boolean;
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      return {
+         key: true,
+         atomic: true,
+         spacer: true
+      };
+   }
+}
+
+MenuSpacer.prototype.isMenuSpacer = true;
\ No newline at end of file
diff --git a/packages/cx/src/widgets/nav/RedirectRoute.d.ts b/packages/cx/src/widgets/nav/RedirectRoute.d.ts
deleted file mode 100644
index b271aed63..000000000
--- a/packages/cx/src/widgets/nav/RedirectRoute.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as Cx from "../../core";
-import { RouteProps } from "./Route";
-
-interface RedirectRouteProps extends RouteProps {
-   /** Redirection URL. */
-   redirect?: Cx.StringProp;
-}
-
-export class RedirectRoute extends Cx.Widget<RedirectRouteProps> {}
diff --git a/packages/cx/src/widgets/nav/RedirectRoute.js b/packages/cx/src/widgets/nav/RedirectRoute.js
deleted file mode 100644
index 30652554d..000000000
--- a/packages/cx/src/widgets/nav/RedirectRoute.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import {Widget} from '../../ui/Widget';
-import {Route} from './Route';
-import {History} from '../../ui/app/History';
-import {Url} from '../../ui/app/Url';
-import {routeAppend} from "../../util/routeAppend";
-
-export class RedirectRoute extends Route
-{
-   checkVisible(context, instance, data) {
-
-      if (!data.visible)
-         return false;
-
-      if (!data.url && !data.route)
-         return true;
-
-      return super.checkVisible(context, instance, data);
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         redirect: undefined
-      });
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(...arguments);
-
-      var {data} = instance;
-
-      if (data.redirect && data.redirect[0] === '+')
-         data.redirect = routeAppend(context.lastRoute.reverse(), data.redirect.substring(1));
-
-      if (data.redirect && History.store)
-         History.replaceState({}, null, Url.resolve(data.redirect));
-      else
-         instance.set('url', data.redirect);
-   }
-}
-
-Widget.alias('redirect-route', RedirectRoute);
\ No newline at end of file
diff --git a/packages/cx/src/widgets/nav/RedirectRoute.ts b/packages/cx/src/widgets/nav/RedirectRoute.ts
new file mode 100644
index 000000000..6bf27955b
--- /dev/null
+++ b/packages/cx/src/widgets/nav/RedirectRoute.ts
@@ -0,0 +1,50 @@
+import { Widget } from '../../ui/Widget';
+import { RouteBase, RouteConfig } from './Route';
+import { History } from '../../ui/app/History';
+import { Url } from '../../ui/app/Url';
+import { routeAppend } from "../../util/routeAppend";
+import { StringProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+
+export interface RedirectRouteConfig extends RouteConfig {
+   /** Redirection URL. */
+   redirect?: StringProp;
+}
+
+export class RedirectRoute extends RouteBase<RedirectRouteConfig> {
+   declare redirect?: StringProp;
+
+   checkVisible(context: RenderingContext, instance: Instance, data: any) {
+
+      if (!data.visible)
+         return false;
+
+      if (!data.url && !data.route)
+         return true;
+
+      return super.checkVisible(context, instance, data);
+   }
+
+   declareData() {
+      super.declareData(...arguments, {
+         redirect: undefined
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: Instance) {
+      super.prepareData(context, instance);
+
+      var {data} = instance;
+
+      if (data.redirect && data.redirect[0] === '+')
+         data.redirect = routeAppend(context.lastRoute.reverse(), data.redirect.substring(1));
+
+      if (data.redirect && History.store)
+         History.replaceState({}, null, Url.resolve(data.redirect));
+      else
+         instance.set('url', data.redirect);
+   }
+}
+
+Widget.alias('redirect-route', RedirectRoute);
\ No newline at end of file
diff --git a/packages/cx/src/widgets/nav/Route.d.ts b/packages/cx/src/widgets/nav/Route.d.ts
deleted file mode 100644
index 80321f340..000000000
--- a/packages/cx/src/widgets/nav/Route.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as Cx from '../../core';
-
-export interface RouteProps extends Cx.PureContainerProps {
-
-   /** Url binding. Bind this to the global `url` variable. */
-   url?: Cx.StringProp,
-
-   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
-   path?: string,
-
-   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
-   route?: string,
-   
-   /** Name used to expose local data. Defaults to `$route`. */
-   recordName?: string,
-
-   /** Match route even if given `route` is only a prefix of the current `url`. */
-   prefix?: boolean
-}
-
-export class Route extends Cx.Widget<RouteProps> {}
diff --git a/packages/cx/src/widgets/nav/Route.js b/packages/cx/src/widgets/nav/Route.js
deleted file mode 100644
index 180563249..000000000
--- a/packages/cx/src/widgets/nav/Route.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Widget } from "../../ui/Widget";
-import { PureContainer } from "../../ui/PureContainer";
-import RouteMatcher from "route-parser";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { routeAppend } from "../../util/routeAppend";
-
-export class Route extends PureContainer {
-   init() {
-      if (this.path) this.route = this.path;
-
-      super.init();
-
-      if (this.route && this.route[0] !== "+")
-         this.matcher = new RouteMatcher(this.route + (this.prefix ? "(*remainder)" : ""));
-   }
-
-   initInstance(context, instance) {
-      instance.store = new ReadOnlyDataView({
-         store: instance.parentStore,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance) {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         url: undefined,
-      });
-   }
-
-   checkVisible(context, instance, data) {
-      if (!data.visible) return false;
-
-      if (data.url !== instance.cached.url) {
-         instance.cached.url = data.url;
-         let matcher = this.matcher;
-         let route = this.route;
-         if (this.route[0] === "+") {
-            route = routeAppend(context.lastRoute.route, this.route.substring(1));
-            if (!instance.cached.matcher || instance.cached.route !== route)
-               instance.cached.matcher = new RouteMatcher(route + (this.prefix ? "(*remainder)" : ""));
-            matcher = instance.cached.matcher;
-         }
-         instance.cached.result = matcher.match(data.url);
-         instance.cached.matcher = matcher;
-         instance.cached.route = data.route = route;
-      }
-      if (!instance.cached.result) return false;
-
-      return super.checkVisible(context, instance, data);
-   }
-
-   prepareData(context, { data, store, cached }) {
-      super.prepareData(...arguments);
-
-      store.setData({
-         [this.recordName]: cached.result,
-      });
-
-      //TODO: Replace comparison with deepEquals
-      if (this.params && this.params.bind) {
-         var params = store.get(this.params.bind);
-         if (JSON.stringify(params) != JSON.stringify(cached.result)) {
-            store.set(this.params.bind, cached.result);
-         }
-      }
-
-      if (this.map) {
-         for (var key in result) {
-            var binding = this.map[key];
-            if (binding) store.set(binding, result[key]);
-         }
-      }
-   }
-
-   explore(context, instance) {
-      context.push("lastRoute", {
-         route: instance.cached.route,
-         result: instance.cached.result,
-         reverse: function (data) {
-            return instance.cached.matcher.reverse({
-               ...instance.cached.result,
-               remainder: "",
-               ...data,
-            });
-         },
-      });
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("lastRoute");
-   }
-}
-
-Route.prototype.recordName = "$route";
-Route.prototype.prefix = false;
-
-Widget.alias("route", Route);
diff --git a/packages/cx/src/widgets/nav/Route.spec.js b/packages/cx/src/widgets/nav/Route.spec.js
deleted file mode 100644
index 83dc4890b..000000000
--- a/packages/cx/src/widgets/nav/Route.spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Cx } from "../../ui/Cx";
-import { VDOM } from "../../ui/VDOM";
-import { Route } from "./Route";
-import { Store } from "../../data/Store";
-import { HtmlElement } from "../HtmlElement";
-
-import renderer from "react-test-renderer";
-import assert from "assert";
-
-describe("Route", () => {
-   it("matching works for ~/widgets/color-pickers", () => {
-      let widget = (
-         <cx>
-            <Route url="~/widgets/color-pickers" route="~/widgets/color-pickers">
-               <div />
-            </Route>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} />);
-
-      let tree = component.toJSON();
-      assert.equal(tree.type, "div");
-   });
-});
diff --git a/packages/cx/src/widgets/nav/Route.spec.tsx b/packages/cx/src/widgets/nav/Route.spec.tsx
new file mode 100644
index 000000000..7c1c4fe39
--- /dev/null
+++ b/packages/cx/src/widgets/nav/Route.spec.tsx
@@ -0,0 +1,24 @@
+import { Route } from "./Route";
+import { Store } from "../../data/Store";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+import assert from "assert";
+
+describe("Route", () => {
+   it("matching works for ~/widgets/color-pickers", async () => {
+      let widget = (
+         <cx>
+            <Route url="~/widgets/color-pickers" route="~/widgets/color-pickers">
+               <div />
+            </Route>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree));
+      assert.equal(tree.type, "div");
+   });
+});
diff --git a/packages/cx/src/widgets/nav/Route.ts b/packages/cx/src/widgets/nav/Route.ts
new file mode 100644
index 000000000..358960202
--- /dev/null
+++ b/packages/cx/src/widgets/nav/Route.ts
@@ -0,0 +1,142 @@
+import { Widget } from "../../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import RouteMatcher from "route-parser";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { routeAppend } from "../../util/routeAppend";
+import { StringProp, BooleanProp, Prop } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+
+export interface RouteConfig extends PureContainerConfig {
+   /** Url binding. Bind this to the global `url` variable. */
+   url?: StringProp;
+
+   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
+   route?: string;
+
+   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
+   path?: string;
+
+   /** Name used to expose local data. Defaults to `$route`. */
+   recordName?: string;
+
+   /** Match route even if given `route` is only a prefix of the current `url`. */
+   prefix?: BooleanProp;
+
+   /** Parameters mapping */
+   params?: Prop<any>;
+
+   /** Parameter name mapping */
+   map?: Record<string, string>;
+}
+
+// Base class for extending with custom Config types
+export class RouteBase<Config extends RouteConfig = RouteConfig> extends PureContainerBase<Config> {
+   declare url?: string;
+   declare route: string;
+   declare path?: string;
+   declare prefix?: boolean;
+   declare recordName: string;
+   declare params?: Prop<any>;
+   declare map?: Record<string, string>;
+   declare matcher?: any;
+   init() {
+      if (this.path) this.route = this.path;
+
+      super.init();
+
+      if (this.route && this.route[0] !== "+")
+         this.matcher = new RouteMatcher(this.route + (this.prefix ? "(*remainder)" : ""));
+   }
+
+   initInstance(context: RenderingContext, instance: Instance) {
+      instance.store = new ReadOnlyDataView({
+         store: instance.parentStore,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: Instance) {
+      instance.store.setStore(instance.parentStore);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         url: undefined,
+      });
+   }
+
+   checkVisible(context: RenderingContext, instance: Instance, data: any) {
+      if (!data.visible) return false;
+
+      if (data.url !== instance.cached.url) {
+         instance.cached.url = data.url;
+         let matcher = this.matcher;
+         let route = this.route;
+         if (this.route[0] === "+") {
+            route = routeAppend(context.lastRoute.route, this.route.substring(1));
+            if (!instance.cached.matcher || instance.cached.route !== route)
+               instance.cached.matcher = new RouteMatcher(route + (this.prefix ? "(*remainder)" : ""));
+            matcher = instance.cached.matcher;
+         }
+         instance.cached.result = matcher.match(data.url);
+         instance.cached.matcher = matcher;
+         instance.cached.route = data.route = route;
+      }
+      if (!instance.cached.result) return false;
+
+      return super.checkVisible(context, instance, data);
+   }
+
+   prepareData(context: RenderingContext, instance: Instance) {
+      super.prepareData(context, instance);
+
+      const { store, cached } = instance;
+
+      (store as ReadOnlyDataView).setData({
+         [this.recordName]: cached.result,
+      });
+
+      //TODO: Replace comparison with deepEquals
+      if (this.params && this.params.bind) {
+         var params = store.get(this.params.bind);
+         if (JSON.stringify(params) != JSON.stringify(cached.result)) {
+            store.set(this.params.bind, cached.result);
+         }
+      }
+
+      if (this.map) {
+         for (var key in cached.result) {
+            var binding = this.map[key];
+            if (binding) store.set(binding, cached.result[key]);
+         }
+      }
+   }
+
+   explore(context: RenderingContext, instance: Instance) {
+      context.push("lastRoute", {
+         route: instance.cached.route,
+         result: instance.cached.result,
+         reverse: function (data: any) {
+            return instance.cached.matcher.reverse({
+               ...instance.cached.result,
+               remainder: "",
+               ...data,
+            });
+         },
+      });
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: Instance) {
+      context.pop("lastRoute");
+   }
+}
+
+RouteBase.prototype.recordName = "$route";
+RouteBase.prototype.prefix = false;
+
+// Closed type for direct usage
+export class Route extends RouteBase<RouteConfig> {}
+
+Widget.alias("route", Route);
diff --git a/packages/cx/src/widgets/nav/Scroller.d.ts b/packages/cx/src/widgets/nav/Scroller.d.ts
deleted file mode 100644
index 1a0700eae..000000000
--- a/packages/cx/src/widgets/nav/Scroller.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as Cx from '../../core';
-
-interface ScrollerProps extends Cx.StyledContainerProps {
-
-   /** Base CSS class. Default is `hscroller`. */
-   baseClass?: string,
-
-   horizontal?: boolean,
-
-   vertical?: boolean
-
-   scrollIntoViewSelector?: Cx.StringProp
-}
-
-export class Scroller extends Cx.Widget<ScrollerProps> {}
-export class HScroller extends Cx.Widget<ScrollerProps> {}
-export class VScroller extends Cx.Widget<ScrollerProps> {}
diff --git a/packages/cx/src/widgets/nav/Scroller.js b/packages/cx/src/widgets/nav/Scroller.js
deleted file mode 100644
index fcfe6fea8..000000000
--- a/packages/cx/src/widgets/nav/Scroller.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import { Icon } from "../Icon";
-import { VDOM } from "../../ui/Widget";
-import { Container } from "../../ui/Container";
-import { ResizeManager } from "../../ui/ResizeManager";
-import { isString, scrollElementIntoView } from "../../util";
-
-export class Scroller extends Container {
-   init() {
-      if (!this.vertical) this.horizontal = true; //default
-
-      super.init();
-   }
-
-   declareData(...args) {
-      super.declareData(...args, {
-         scrollIntoViewSelector: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-
-      return (
-         <HScrollerComponent key={key} widget={this} data={instance.data}>
-            {this.renderChildren(context, instance)}
-         </HScrollerComponent>
-      );
-   }
-}
-
-Scroller.prototype.styled = true;
-Scroller.prototype.baseClass = "scroller";
-
-export class HScrollerComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.stopScrolling = () => {
-         delete this.doScroll;
-      };
-      this.scrollLeft = (e) => this.scroll(e, "left");
-      this.scrollRight = (e) => this.scroll(e, "right");
-      this.scrollUp = (e) => this.scroll(e, "up");
-      this.scrollDown = (e) => this.scroll(e, "down");
-      this.state = { scrollable: false };
-   }
-
-   render() {
-      let { data, children, widget } = this.props;
-      let { CSS, baseClass } = widget;
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  scrollable: this.state.scrollable,
-                  horizontal: widget.horizontal,
-                  vertical: widget.vertical,
-               })
-            )}
-            style={data.style}
-            ref={(el) => {
-               this.el = el;
-            }}
-         >
-            {widget.horizontal && (
-               <div
-                  className={CSS.element(baseClass, "left-arrow")}
-                  onMouseDown={this.scrollLeft}
-                  onTouchStart={this.scrollLeft}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            {widget.horizontal && (
-               <div
-                  className={CSS.element(baseClass, "right-arrow")}
-                  onMouseDown={this.scrollRight}
-                  onTouchStart={this.scrollRight}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            {widget.vertical && (
-               <div
-                  className={CSS.element(baseClass, "top-arrow")}
-                  onMouseDown={this.scrollUp}
-                  onTouchStart={this.scrollUp}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            {widget.vertical && (
-               <div
-                  className={CSS.element(baseClass, "bottom-arrow")}
-                  onMouseDown={this.scrollDown}
-                  onTouchStart={this.scrollDown}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            <div
-               className={CSS.element(baseClass, "clip")}
-               ref={(el) => {
-                  this.clip = el;
-               }}
-            >
-               <div
-                  className={CSS.element(baseClass, "scroller")}
-                  ref={(el) => {
-                     this.scroller = el;
-                  }}
-               >
-                  <div
-                     className={CSS.element(baseClass, "content")}
-                     ref={(el) => {
-                        this.content = el;
-                     }}
-                  >
-                     {children}
-                  </div>
-               </div>
-            </div>
-         </div>
-      );
-   }
-
-   componentDidMount() {
-      this.unsubscribeResize = ResizeManager.trackElement(this.clip, this.componentDidUpdate.bind(this));
-      this.componentDidUpdate();
-   }
-
-   componentDidUpdate() {
-      let { widget } = this.props;
-      let scrollable = false;
-      if (widget.horizontal) {
-         let scrollSize = this.scroller.offsetHeight - this.scroller.clientHeight;
-         this.scroller.style.marginBottom = `${-scrollSize}px`;
-         if (this.content.scrollWidth > this.clip.clientWidth) scrollable = true;
-      }
-      if (widget.vertical) {
-         let scrollSize = this.scroller.offsetWidth - this.scroller.clientWidth;
-         this.scroller.style.marginRight = `${-scrollSize}px`;
-         if (this.content.scrollHeight > this.clip.clientHeight) scrollable = true;
-      }
-      if (scrollable != this.state.scrollable) this.setState({ scrollable });
-
-      this.scrollIntoView();
-   }
-
-   componentWillUnmount() {
-      this.unsubscribeResize();
-   }
-
-   scroll(e, direction) {
-      e.stopPropagation();
-      e.preventDefault();
-
-      this.doScroll = () => {
-         if (!this.scroller) return;
-
-         switch (direction) {
-            case "left":
-               this.scroller.scrollLeft -= 10;
-               break;
-
-            case "right":
-               this.scroller.scrollLeft += 10;
-               break;
-
-            case "up":
-               this.scroller.scrollTop -= 10;
-               break;
-
-            case "down":
-               this.scroller.scrollTop += 10;
-               break;
-         }
-
-         if (this.doScroll) requestAnimationFrame(this.doScroll);
-      };
-      this.doScroll();
-   }
-
-   scrollIntoView() {
-      let { data, widget } = this.props;
-      let { scrollIntoViewSelector } = data;
-
-      if (isString(scrollIntoViewSelector)) {
-         let child = this.el.querySelector(scrollIntoViewSelector);
-         if (child) scrollElementIntoView(child, widget.vertical, widget.horizontal);
-      }
-   }
-}
-
-export class HScroller extends Scroller {}
-
-HScroller.prototype.horizontal = true;
-
-export class VScroller extends Scroller {}
-
-VScroller.prototype.vertical = true;
diff --git a/packages/cx/src/widgets/nav/Scroller.scss b/packages/cx/src/widgets/nav/Scroller.scss
index 255ed998c..5ef6a323e 100644
--- a/packages/cx/src/widgets/nav/Scroller.scss
+++ b/packages/cx/src/widgets/nav/Scroller.scss
@@ -1,12 +1,14 @@
+@use "sass:map";
+
 @mixin cx-scroller(
    $name: "scroller",
    $icon-size: $cx-default-icon-size,
    $button-size: $cx-default-scroller-button-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       position: relative;
diff --git a/packages/cx/src/widgets/nav/Scroller.tsx b/packages/cx/src/widgets/nav/Scroller.tsx
new file mode 100644
index 000000000..53c876b96
--- /dev/null
+++ b/packages/cx/src/widgets/nav/Scroller.tsx
@@ -0,0 +1,252 @@
+/** @jsxImportSource react */
+import { Icon } from "../Icon";
+import { VDOM } from "../../ui/Widget";
+import { StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { isString, scrollElementIntoView } from "../../util";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+
+export interface ScrollerConfig extends StyledContainerConfig {
+   horizontal?: BooleanProp;
+   vertical?: BooleanProp;
+   scrollIntoViewSelector?: StringProp;
+}
+
+export class Scroller extends StyledContainerBase<ScrollerConfig> {
+   declare baseClass: string;
+   declare public horizontal?: any;
+   declare public vertical?: any;
+   declare public scrollIntoViewSelector?: any;
+
+   constructor(config?: ScrollerConfig) {
+      super(config);
+   }
+
+   init() {
+      if (!this.vertical) this.horizontal = true; //default
+
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         scrollIntoViewSelector: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      return (
+         <HScrollerComponent key={key} widget={this} data={instance.data}>
+            {(this as any).renderChildren(context, instance)}
+         </HScrollerComponent>
+      );
+   }
+}
+
+Scroller.prototype.baseClass = "scroller";
+
+interface HScrollerComponentProps {
+   widget: Scroller;
+   data: any;
+   children?: any;
+}
+
+interface HScrollerComponentState {
+   scrollable: boolean;
+}
+
+export class HScrollerComponent extends VDOM.Component<HScrollerComponentProps, HScrollerComponentState> {
+   declare el?: HTMLElement | null;
+   declare clip?: HTMLElement | null;
+   declare scroller?: HTMLElement | null;
+   declare content?: HTMLElement | null;
+   unsubscribeResize?: () => void;
+   declare doScroll?: any;
+   stopScrolling: () => void;
+   scrollLeft: (e: any) => void;
+   scrollRight: (e: any) => void;
+   scrollUp: (e: any) => void;
+   scrollDown: (e: any) => void;
+
+   constructor(props: HScrollerComponentProps) {
+      super(props);
+      this.stopScrolling = () => {
+         delete this.doScroll;
+      };
+      this.scrollLeft = (e) => this.scroll(e, "left");
+      this.scrollRight = (e) => this.scroll(e, "right");
+      this.scrollUp = (e) => this.scroll(e, "up");
+      this.scrollDown = (e) => this.scroll(e, "down");
+      this.state = { scrollable: false };
+   }
+
+   render() {
+      let { data, children, widget } = this.props;
+      let { CSS, baseClass } = widget;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  scrollable: this.state.scrollable,
+                  horizontal: widget.horizontal,
+                  vertical: widget.vertical,
+               }),
+            )}
+            style={data.style}
+            ref={(el) => {
+               this.el = el;
+            }}
+         >
+            {widget.horizontal && (
+               <div
+                  className={CSS.element(baseClass, "left-arrow")}
+                  onMouseDown={this.scrollLeft}
+                  onTouchStart={this.scrollLeft}
+                  onMouseUp={this.stopScrolling}
+                  onTouchEnd={this.stopScrolling}
+               >
+                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
+               </div>
+            )}
+
+            {widget.horizontal && (
+               <div
+                  className={CSS.element(baseClass, "right-arrow")}
+                  onMouseDown={this.scrollRight}
+                  onTouchStart={this.scrollRight}
+                  onMouseUp={this.stopScrolling}
+                  onTouchEnd={this.stopScrolling}
+               >
+                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
+               </div>
+            )}
+
+            {widget.vertical && (
+               <div
+                  className={CSS.element(baseClass, "top-arrow")}
+                  onMouseDown={this.scrollUp}
+                  onTouchStart={this.scrollUp}
+                  onMouseUp={this.stopScrolling}
+                  onTouchEnd={this.stopScrolling}
+               >
+                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
+               </div>
+            )}
+
+            {widget.vertical && (
+               <div
+                  className={CSS.element(baseClass, "bottom-arrow")}
+                  onMouseDown={this.scrollDown}
+                  onTouchStart={this.scrollDown}
+                  onMouseUp={this.stopScrolling}
+                  onTouchEnd={this.stopScrolling}
+               >
+                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
+               </div>
+            )}
+
+            <div
+               className={CSS.element(baseClass, "clip")}
+               ref={(el) => {
+                  this.clip = el;
+               }}
+            >
+               <div
+                  className={CSS.element(baseClass, "scroller")}
+                  ref={(el) => {
+                     this.scroller = el;
+                  }}
+               >
+                  <div
+                     className={CSS.element(baseClass, "content")}
+                     ref={(el) => {
+                        this.content = el;
+                     }}
+                  >
+                     {children}
+                  </div>
+               </div>
+            </div>
+         </div>
+      );
+   }
+
+   componentDidMount() {
+      this.unsubscribeResize = ResizeManager.trackElement(this.clip, this.componentDidUpdate.bind(this));
+      this.componentDidUpdate();
+   }
+
+   componentDidUpdate() {
+      let { widget } = this.props;
+      let scrollable = false;
+      if (widget.horizontal) {
+         let scrollSize = this.scroller!.offsetHeight - this.scroller!.clientHeight;
+         this.scroller!.style.marginBottom = `${-scrollSize}px`;
+         if (this.content!.scrollWidth > this.clip!.clientWidth) scrollable = true;
+      }
+      if (widget.vertical) {
+         let scrollSize = this.scroller!.offsetWidth - this.scroller!.clientWidth;
+         this.scroller!.style.marginRight = `${-scrollSize}px`;
+         if (this.content!.scrollHeight > this.clip!.clientHeight) scrollable = true;
+      }
+      if (scrollable != this.state.scrollable) this.setState({ scrollable });
+
+      this.scrollIntoView();
+   }
+
+   componentWillUnmount() {
+      this.unsubscribeResize!();
+   }
+
+   scroll(e: any, direction: string) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      this.doScroll = () => {
+         if (!this.scroller) return;
+
+         switch (direction) {
+            case "left":
+               this.scroller.scrollLeft -= 10;
+               break;
+
+            case "right":
+               this.scroller.scrollLeft += 10;
+               break;
+
+            case "up":
+               this.scroller.scrollTop -= 10;
+               break;
+
+            case "down":
+               this.scroller.scrollTop += 10;
+               break;
+         }
+
+         if (this.doScroll) requestAnimationFrame(this.doScroll);
+      };
+      this.doScroll();
+   }
+
+   scrollIntoView() {
+      let { data, widget } = this.props;
+      let { scrollIntoViewSelector } = data;
+
+      if (isString(scrollIntoViewSelector)) {
+         let child = this.el?.querySelector(scrollIntoViewSelector);
+         if (child) scrollElementIntoView(child, widget.vertical, widget.horizontal);
+      }
+   }
+}
+
+export class HScroller extends Scroller {}
+
+HScroller.prototype.horizontal = true;
+
+export class VScroller extends Scroller {}
+
+VScroller.prototype.vertical = true;
diff --git a/packages/cx/src/widgets/nav/Submenu.d.ts b/packages/cx/src/widgets/nav/Submenu.d.ts
deleted file mode 100644
index 2329cd2cc..000000000
--- a/packages/cx/src/widgets/nav/Submenu.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as Cx from '../../core';
-import { MenuItemProps } from './MenuItem';
-
-interface SubmenuProps extends MenuItemProps {}
-
-export class Submenu extends Cx.Widget<SubmenuProps> {}
diff --git a/packages/cx/src/widgets/nav/Submenu.js b/packages/cx/src/widgets/nav/Submenu.js
deleted file mode 100644
index 7393ee44b..000000000
--- a/packages/cx/src/widgets/nav/Submenu.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {MenuItem} from './MenuItem';
-
-export class Submenu extends MenuItem {}
-
-
-
diff --git a/packages/cx/src/widgets/nav/Submenu.ts b/packages/cx/src/widgets/nav/Submenu.ts
new file mode 100644
index 000000000..d242b908f
--- /dev/null
+++ b/packages/cx/src/widgets/nav/Submenu.ts
@@ -0,0 +1,6 @@
+import { MenuItem } from './MenuItem';
+
+export class Submenu extends MenuItem {}
+
+
+
diff --git a/packages/cx/src/widgets/nav/Tab.d.ts b/packages/cx/src/widgets/nav/Tab.d.ts
deleted file mode 100644
index fc06c2103..000000000
--- a/packages/cx/src/widgets/nav/Tab.d.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as Cx from '../../core';
-
-interface TabProps extends Cx.HtmlElementProps {
-
-   /** A value to be written to the `value` property if the tab is clicked. */
-   tab?: Cx.Prop<string | number>,
-
-   /** 
-    * Value of the currently selected tab. 
-    * If `value` is equal to `tab`, the tab appears active. 
-    */
-   value?: Cx.StringProp,
-
-   /** Set to `true` to disable selection. */
-   disabled?: Cx.BooleanProp,
- 
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string,
-
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string,
-   
-   /** Determines if tab should receive focus on `mousedown` event. 
-    *  Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
-    */
-   focusOnMouseDown?: boolean,
-
-   /** Set to true to set the default tab. */
-   default?: boolean
-   
-}
-
-export class Tab extends Cx.Widget<TabProps> {}
diff --git a/packages/cx/src/widgets/nav/Tab.js b/packages/cx/src/widgets/nav/Tab.js
deleted file mode 100644
index c4ac1b257..000000000
--- a/packages/cx/src/widgets/nav/Tab.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { preventFocusOnTouch } from "../../ui/FocusManager";
-import { isUndefined } from "../../util/isUndefined";
-
-export class Tab extends HtmlElement {
-   declareData() {
-      super.declareData(
-         {
-            tab: undefined,
-            value: undefined,
-            disabled: undefined,
-            text: undefined,
-         },
-         ...arguments
-      );
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         active: data.tab == data.value,
-         disabled: data.disabled,
-         shape: this.shape,
-      };
-      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "value":
-         case "tab":
-         case "text":
-         case "disabled":
-         case "default":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-      if (!data.disabled) {
-         props.href = "#";
-         delete props.value;
-
-         props.onMouseDown = (e) => {
-            if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
-            preventFocusOnTouch(e);
-         };
-
-         props.onClick = (e) => this.handleClick(e, instance);
-      }
-   }
-
-   handleClick(e, instance) {
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
-         return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      let { data } = instance;
-
-      if (data.disabled) return;
-
-      instance.set("value", data.tab);
-   }
-}
-
-Tab.prototype.baseClass = "tab";
-Tab.prototype.tag = "a";
-Tab.prototype.focusOnMouseDown = false;
-Tab.prototype.default = false;
-
-Widget.alias("tab", Tab);
diff --git a/packages/cx/src/widgets/nav/Tab.scss b/packages/cx/src/widgets/nav/Tab.scss
index 0dc81553f..da86f118b 100644
--- a/packages/cx/src/widgets/nav/Tab.scss
+++ b/packages/cx/src/widgets/nav/Tab.scss
@@ -1,4 +1,5 @@
 
+@use "sass:map";
 @import "cover";
 
 @mixin cx-tab(
@@ -6,10 +7,10 @@
    $state-style-map: $cx-tab-state-style-map,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       box-sizing: border-box;
diff --git a/packages/cx/src/widgets/nav/Tab.ts b/packages/cx/src/widgets/nav/Tab.ts
new file mode 100644
index 000000000..817737627
--- /dev/null
+++ b/packages/cx/src/widgets/nav/Tab.ts
@@ -0,0 +1,120 @@
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "../HtmlElement";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { preventFocusOnTouch } from "../../ui/FocusManager";
+import { isUndefined } from "../../util/isUndefined";
+import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
+
+export interface TabConfig extends HtmlElementConfigBase {
+   /** A value to be written to the `value` property if the tab is clicked. */
+   tab?: Prop<string | number>;
+
+   /**
+    * Value of the currently selected tab.
+    * If `value` is equal to `tab`, the tab appears active.
+    */
+   value?: StringProp;
+
+   /** Set to `true` to disable selection. */
+   disabled?: BooleanProp;
+
+   /** Base CSS class to be applied to the element. No class is applied by default. */
+   baseClass?: string;
+
+   /** Name of the HTML element to be rendered. Default is `div`. */
+   tag?: string;
+
+   /**
+    * Determines if tab should receive focus on `mousedown` event.
+    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
+    */
+   focusOnMouseDown?: boolean;
+
+   /** Set to true to set the default tab. */
+   default?: boolean;
+}
+
+export class Tab extends HtmlElement<TabConfig> {
+   declare public baseClass: string;
+   declare public tag: string;
+   declare public focusOnMouseDown: boolean;
+   declare public default: boolean;
+   declare public shape?: string;
+   declare public onMouseDown?: any;
+   declare public onClick?: any;
+   declareData() {
+      super.declareData(
+         {
+            tab: undefined,
+            value: undefined,
+            disabled: undefined,
+            text: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance) {
+      let { data } = instance;
+      data.stateMods = {
+         active: data.tab == data.value,
+         disabled: data.disabled,
+         shape: this.shape,
+      };
+      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
+      super.prepareData(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName: string) {
+      switch (attrName) {
+         case "value":
+         case "tab":
+         case "text":
+         case "disabled":
+         case "default":
+            return false;
+
+         default: return super.isValidHtmlAttribute(attrName);
+      }
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: any) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+      if (!data.disabled) {
+         props.href = "#";
+         delete props.value;
+
+         props.onMouseDown = (e: any) => {
+            if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
+            preventFocusOnTouch(e);
+         };
+
+         props.onClick = (e: any) => this.handleClick(e, instance);
+      }
+   }
+
+   handleClick(e: any, instance: Instance) {
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
+         return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      let { data } = instance;
+
+      if (data.disabled) return;
+
+      instance.set("value", data.tab);
+   }
+}
+
+Tab.prototype.baseClass = "tab";
+Tab.prototype.tag = "a";
+Tab.prototype.focusOnMouseDown = false;
+Tab.prototype.default = false;
+
+Widget.alias("tab", Tab);
diff --git a/packages/cx/src/widgets/nav/cover.scss b/packages/cx/src/widgets/nav/cover.scss
index f901516ed..3ed20d545 100644
--- a/packages/cx/src/widgets/nav/cover.scss
+++ b/packages/cx/src/widgets/nav/cover.scss
@@ -1,11 +1,12 @@
+@use "sass:map";
 
 @mixin cx-cover(
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$mod}cover {
       background-color: $cx-default-cover-background-color;
diff --git a/packages/cx/src/widgets/nav/index.js b/packages/cx/src/widgets/nav/index.js
deleted file mode 100644
index be4a97bf3..000000000
--- a/packages/cx/src/widgets/nav/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from './Route';
-export * from './RedirectRoute';
-export * from './Tab';
-export * from './Link';
-export * from './LinkButton';
-export * from './Menu';
-export * from './MenuItem';
-export * from './MenuSpacer';
-export * from './Submenu';
-export * from './Scroller';
diff --git a/packages/cx/src/widgets/nav/index.d.ts b/packages/cx/src/widgets/nav/index.ts
similarity index 100%
rename from packages/cx/src/widgets/nav/index.d.ts
rename to packages/cx/src/widgets/nav/index.ts
diff --git a/packages/cx/src/widgets/nav/variables.scss b/packages/cx/src/widgets/nav/variables.scss
index fd3ea67a3..362cbbc1c 100644
--- a/packages/cx/src/widgets/nav/variables.scss
+++ b/packages/cx/src/widgets/nav/variables.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // COVER
 $cx-default-cover-border-color: $cx-default-border-color !default;
 $cx-default-cover-background-color: white !default;
@@ -16,7 +18,7 @@ $cx-link-state-style-map: (
 // TAB
 @import "Tab.variables";
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/HScroller": "cx/widgets/Scroller",
diff --git a/packages/cx/src/widgets/overlay/ContextMenu.d.ts b/packages/cx/src/widgets/overlay/ContextMenu.d.ts
deleted file mode 100644
index 5c27e68b8..000000000
--- a/packages/cx/src/widgets/overlay/ContextMenu.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as Cx from "../../core";
-import { View } from "../../data/View";
-import { Instance } from "../../ui";
-import { DropdownProps } from "./Dropdown";
-
-export interface ContextMenuProps extends DropdownProps {}
-
-export class ContextMenu extends Cx.Widget<ContextMenuProps> {}
-
-export function openContextMenu(e: MouseEvent, contents: any, storeOrInstance?: View | Instance, options?: any);
diff --git a/packages/cx/src/widgets/overlay/ContextMenu.js b/packages/cx/src/widgets/overlay/ContextMenu.js
deleted file mode 100644
index 0be917dbb..000000000
--- a/packages/cx/src/widgets/overlay/ContextMenu.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Dropdown } from "./Dropdown";
-import { getCursorPos } from "./captureMouse";
-
-export class ContextMenu extends Dropdown {}
-ContextMenu.prototype.trackMouse = true;
-ContextMenu.prototype.dismissOnFocusOut = true;
-ContextMenu.prototype.firstChildDefinesWidth = true;
-ContextMenu.prototype.matchWidth = false;
-ContextMenu.prototype.placementOrder = "down-right right up-right down-left left up-left";
-ContextMenu.prototype.offset = 0;
-ContextMenu.prototype.autoFocus = true;
-ContextMenu.prototype.autoFocusFirstChild = false;
-ContextMenu.prototype.focusable = true;
-
-export const openContextMenu = (e, content, storeOrInstance, options) => {
-   e.preventDefault();
-   e.stopPropagation();
-   let position = getCursorPos(e);
-   let menu = ContextMenu.create({
-      relatedElement: e.currentTarget,
-      mousePosition: {
-         x: position.clientX,
-         y: position.clientY,
-      },
-      trackMouse: true,
-      items: content,
-   });
-   menu.open(storeOrInstance, options);
-};
diff --git a/packages/cx/src/widgets/overlay/ContextMenu.ts b/packages/cx/src/widgets/overlay/ContextMenu.ts
new file mode 100644
index 000000000..89a581f72
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/ContextMenu.ts
@@ -0,0 +1,42 @@
+import { Store } from "../../data/Store";
+import { Instance } from "../../ui/Instance";
+import { Dropdown, DropdownConfig } from "./Dropdown";
+import { getCursorPos } from "./captureMouse";
+
+export interface ContextMenuConfig extends DropdownConfig {}
+
+export class ContextMenu extends Dropdown {
+   constructor(config?: ContextMenuConfig) {
+      super(config);
+   }
+}
+ContextMenu.prototype.trackMouse = true;
+ContextMenu.prototype.dismissOnFocusOut = true;
+ContextMenu.prototype.firstChildDefinesWidth = true;
+ContextMenu.prototype.matchWidth = false;
+ContextMenu.prototype.placementOrder = "down-right right up-right down-left left up-left";
+ContextMenu.prototype.offset = 0;
+ContextMenu.prototype.autoFocus = true;
+ContextMenu.prototype.autoFocusFirstChild = false;
+ContextMenu.prototype.focusable = true;
+
+export const openContextMenu = (
+   e: React.MouseEvent,
+   content: any,
+   storeOrInstance?: Store | Instance,
+   options?: any,
+) => {
+   e.preventDefault();
+   e.stopPropagation();
+   let position = getCursorPos(e);
+   let menu = ContextMenu.create({
+      relatedElement: e.currentTarget,
+      mousePosition: {
+         x: position.clientX,
+         y: position.clientY,
+      },
+      trackMouse: true,
+      items: content,
+   });
+   return menu.open(storeOrInstance, options);
+};
diff --git a/packages/cx/src/widgets/overlay/Dropdown.d.ts b/packages/cx/src/widgets/overlay/Dropdown.d.ts
deleted file mode 100644
index 6e685a76e..000000000
--- a/packages/cx/src/widgets/overlay/Dropdown.d.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as Cx from "../../core";
-import { OverlayProps } from "./Overlay";
-
-export interface DropdownProps extends OverlayProps {
-   // TODO: check if string literals should be used instead
-   placement?: Cx.StringProp | Cx.Prop<null>;
-
-   offset?: number;
-   matchWidth?: boolean;
-   matchMaxWidth?: boolean;
-   placementOrder?: string;
-   constrain?: boolean;
-   positioning?: string;
-   touchFriendly?: boolean;
-   arrow?: boolean;
-   pad?: boolean;
-   elementExplode?: number;
-   screenPadding?: number;
-   firstChildDefinesHeight?: boolean;
-   firstChildDefinesWidth?: boolean;
-
-   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
-   closeOnScrollDistance?: number;
-
-   relatedElement?: Element;
-
-   onResolveRelatedElement?: string | ((beaconEl: Element, instance: any) => Element);
-
-   onMeasureNaturalContentSize?: string | ((el: Element, instance: any) => { width?: number; height?: number });
-}
-
-export class Dropdown extends Cx.Widget<DropdownProps> {}
diff --git a/packages/cx/src/widgets/overlay/Dropdown.js b/packages/cx/src/widgets/overlay/Dropdown.js
deleted file mode 100644
index 62dfa2892..000000000
--- a/packages/cx/src/widgets/overlay/Dropdown.js
+++ /dev/null
@@ -1,612 +0,0 @@
-import { Localization } from "../../ui/Localization";
-import { ResizeManager } from "../../ui/ResizeManager";
-import { Widget, VDOM } from "../../ui/Widget";
-import { calculateNaturalElementHeight } from "../../util/calculateNaturalElementHeight";
-import { closestParent, findFirst, isFocusable } from "../../util/DOM";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-import { isTouchDevice } from "../../util/isTouchDevice";
-import { Overlay } from "./Overlay";
-
-/*
- Dropdown specific features:
- - ability to position itself next to the target element
- - monitor scrollable parents and updates it's position
- */
-
-export class Dropdown extends Overlay {
-   init() {
-      if (this.trackMouse) {
-         this.trackMouseX = true;
-         this.trackMouseY = true;
-      }
-      if (this.autoFocus && !this.hasOwnProperty(this.focusable)) this.focusable = true;
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         placement: undefined,
-      });
-   }
-
-   initInstance(context, instance) {
-      instance.mousePosition = this.mousePosition;
-      instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
-      super.initInstance(context, instance);
-   }
-
-   explore(context, instance) {
-      context.push("lastDropdown", instance);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("lastDropdown");
-      super.exploreCleanup(context, instance);
-   }
-
-   overlayDidMount(instance, component) {
-      super.overlayDidMount(instance, component);
-      var scrollableParents = (component.scrollableParents = [window]);
-      component.updateDropdownPosition = (e) => this.updateDropdownPosition(instance, component);
-
-      instance.initialScreenPosition = null;
-
-      var el = instance.relatedElement.parentElement;
-      while (el) {
-         scrollableParents.push(el);
-         el = el.parentElement;
-      }
-      scrollableParents.forEach((el) => {
-         el.addEventListener("scroll", component.updateDropdownPosition);
-      });
-      component.offResize = ResizeManager.subscribe(component.updateDropdownPosition);
-
-      if (this.onDropdownDidMount) instance.invoke("onDropdownDidMount", instance, component);
-
-      if (this.pipeValidateDropdownPosition)
-         instance.invoke("pipeValidateDropdownPosition", component.updateDropdownPosition, instance);
-
-      if (instance.parentPositionChangeEvent)
-         component.offParentPositionChange = instance.parentPositionChangeEvent.subscribe(
-            component.updateDropdownPosition,
-         );
-   }
-
-   overlayDidUpdate(instance, component) {
-      this.updateDropdownPosition(instance, component);
-   }
-
-   overlayWillUnmount(instance, component) {
-      var { scrollableParents } = component;
-      if (scrollableParents) {
-         scrollableParents.forEach((el) => {
-            el.removeEventListener("scroll", component.updateDropdownPosition);
-         });
-         delete component.scrollableParents;
-         delete component.updateDropdownPosition;
-      }
-      if (component.offResize) component.offResize();
-
-      if (this.pipeValidateDropdownPosition) instance.invoke("pipeValidateDropdownPosition", null, instance);
-
-      if (component.offParentPositionChange) component.offParentPositionChange();
-
-      delete component.parentBounds;
-      delete component.initialScreenPosition;
-   }
-
-   dismissAfterScroll(data, instance, component) {
-      if (this.onDismissAfterScroll && instance.invoke("onDismissAfterScroll", data, instance, component) === false)
-         return;
-      if (instance.dismiss) instance.dismiss();
-   }
-
-   updateDropdownPosition(instance, component) {
-      var { el, initialScreenPosition } = component;
-      var { data, relatedElement } = instance;
-      var parentBounds = getTopLevelBoundingClientRect(relatedElement);
-
-      //getBoundingClientRect() will return an empty rect if the element is hidden or removed
-      if (parentBounds.left == 0 && parentBounds.top == 0 && parentBounds.bottom == 0 && parentBounds.right == 0) {
-         if (!component.parentBounds) return;
-         parentBounds = component.parentBounds;
-      } else component.parentBounds = parentBounds;
-
-      if (this.trackMouseX && instance.mousePosition) {
-         parentBounds = {
-            top: parentBounds.top,
-            bottom: parentBounds.bottom,
-            left: instance.mousePosition.x,
-            right: instance.mousePosition.x,
-         };
-      }
-
-      if (this.trackMouseY && instance.mousePosition) {
-         parentBounds = {
-            left: parentBounds.left,
-            right: parentBounds.right,
-            top: instance.mousePosition.y,
-            bottom: instance.mousePosition.y,
-         };
-      }
-
-      let explode = this.pad && typeof this.elementExplode === "number" ? this.elementExplode : 0;
-      if (explode) {
-         parentBounds = {
-            left: Math.round(parentBounds.left - explode),
-            right: Math.round(parentBounds.right + explode),
-            top: Math.round(parentBounds.top - explode),
-            bottom: Math.round(parentBounds.bottom + explode),
-         };
-      }
-
-      var style = {};
-      if (this.matchWidth) style.minWidth = `${parentBounds.right - parentBounds.left}px`;
-      if (this.matchMaxWidth) style.maxWidth = `${parentBounds.right - parentBounds.left}px`;
-
-      var contentSize = this.measureNaturalDropdownSize(instance, component);
-      var placement = this.findOptimalPlacement(contentSize, parentBounds, data.placement, component.lastPlacement);
-
-      this.applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, false);
-      component.setCustomStyle(style);
-      this.setDirectionClass(component, placement);
-
-      if (this.constrain) {
-         //recheck content size for changes as sometimes when auto is used the size can change
-         let newContentSize = this.measureNaturalDropdownSize(instance, component);
-         if (newContentSize.width != contentSize.width || newContentSize.height != contentSize.height) {
-            let newStyle = {};
-            this.applyPositioningPlacementStyles(newStyle, placement, newContentSize, parentBounds, el, true);
-            component.setCustomStyle(newStyle);
-         }
-      }
-
-      if (!initialScreenPosition) initialScreenPosition = component.initialScreenPosition = parentBounds;
-
-      if (
-         (!this.trackMouseY && Math.abs(parentBounds.top - initialScreenPosition.top) > this.closeOnScrollDistance) ||
-         (!this.trackMouseX && Math.abs(parentBounds.left - initialScreenPosition.left) > this.closeOnScrollDistance)
-      )
-         this.dismissAfterScroll({ parentBounds, initialScreenPosition }, instance, component);
-
-      instance.positionChangeSubscribers.notify();
-   }
-
-   applyFixedPositioningPlacementStyles(style, placement, contentSize, rel, el, noAuto) {
-      let viewport = getViewportRect(this.screenPadding);
-      style.position = "fixed";
-
-      if (placement.startsWith("down")) {
-         style.top = `${(this.cover ? rel.top : rel.bottom) + this.offset}px`;
-         let bottom = viewport.bottom - (rel.bottom + this.offset + contentSize.height);
-         style.bottom =
-            this.constrain && (noAuto || bottom < this.screenPadding + 10)
-               ? Math.max(this.screenPadding, bottom) + "px"
-               : "auto";
-      } else if (placement.startsWith("up")) {
-         let top = rel.top - this.offset - contentSize.height - viewport.top;
-         style.top =
-            this.constrain && (noAuto || top < this.screenPadding + 10)
-               ? Math.max(this.screenPadding, top) + "px"
-               : "auto";
-         style.bottom =
-            document.documentElement.offsetHeight - (this.cover ? rel.bottom : rel.top) + this.offset + "px";
-      }
-
-      switch (placement) {
-         case "down":
-         case "down-center":
-            style.right = "auto";
-            style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
-            break;
-
-         case "down-right":
-            style.right = "auto";
-            style.left = `${rel.left}px`;
-            break;
-
-         case "down-left":
-            style.right = `${document.documentElement.offsetWidth - rel.right}px`;
-            style.left = "auto";
-            break;
-
-         case "up":
-         case "up-center":
-            style.right = "auto";
-            style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
-            break;
-
-         case "up-right":
-            style.right = "auto";
-            style.left = `${rel.left}px`;
-            break;
-
-         case "up-left":
-            style.right = `${document.documentElement.offsetWidth - rel.right}px`;
-            style.left = "auto";
-            break;
-
-         case "right":
-         case "right-center":
-            style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${rel.right + this.offset}px`;
-            break;
-
-         case "right-down":
-            style.top = `${rel.top}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${rel.right + this.offset}px`;
-            break;
-
-         case "right-up":
-            style.top = "auto";
-            style.right = "auto";
-            style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
-            style.left = `${rel.right + this.offset}px`;
-            break;
-
-         case "left":
-         case "left-center":
-            style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
-            style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            break;
-
-         case "left-down":
-            style.top = `${rel.top}px`;
-            style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            break;
-
-         case "left-up":
-            style.top = "auto";
-            style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-            style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
-            style.left = "auto";
-            break;
-
-         case "screen-center":
-            let w = Math.min(contentSize.width, document.documentElement.offsetWidth - 2 * this.screenPadding);
-            let h = Math.min(contentSize.height, document.documentElement.offsetHeight - 2 * this.screenPadding);
-            style.top = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
-            style.right = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
-            style.bottom = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
-            style.left = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
-            break;
-      }
-   }
-
-   applyAbsolutePositioningPlacementStyles(style, placement, contentSize, rel, el, noAuto) {
-      var viewport = getViewportRect(this.screenPadding);
-
-      style.position = "absolute";
-
-      if (placement.startsWith("down")) {
-         style.top = `${rel.bottom - rel.top + this.offset}px`;
-         let room = viewport.bottom - rel.bottom + this.offset;
-         style.bottom =
-            this.constrain && (noAuto || contentSize.height >= room - 10)
-               ? `${-Math.min(room, contentSize.height)}px`
-               : "auto";
-      } else if (placement.startsWith("up")) {
-         let room = rel.top - this.offset - viewport.top;
-         style.top =
-            this.constrain && (noAuto || contentSize.height >= room - 10)
-               ? `${-Math.min(room, contentSize.height)}px`
-               : "auto";
-         style.bottom = `${rel.bottom - rel.top - this.offset}px`;
-      }
-
-      switch (placement) {
-         case "down":
-         case "down-center":
-            style.right = "auto";
-            style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
-            break;
-
-         case "down-right":
-            style.right = "auto";
-            style.left = `0`;
-            break;
-
-         case "down-left":
-            style.right = `0`;
-            style.left = "auto";
-            break;
-
-         case "up":
-         case "up-center":
-            style.right = "auto";
-            style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
-            break;
-
-         case "up-right":
-            style.right = "auto";
-            style.left = `0`;
-            break;
-
-         case "up-left":
-            style.right = `0`;
-            style.left = "auto";
-            break;
-
-         case "right":
-         case "right-center":
-            style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${rel.right - rel.left + this.offset}px`;
-            break;
-
-         case "right-down":
-            style.top = `0`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${rel.right - rel.left + this.offset}px`;
-            break;
-
-         case "right-up":
-            style.top = "auto";
-            style.right = "auto";
-            style.bottom = `0`;
-            style.left = `${rel.right - rel.left + this.offset}px`;
-            break;
-
-         case "left":
-         case "left-center":
-            style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
-            style.right = `${rel.right - rel.left + this.offset}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            break;
-
-         case "left-down":
-            style.top = `0`;
-            style.right = `${rel.right - rel.left + this.offset}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            break;
-
-         case "left-up":
-            style.top = "auto";
-            style.right = `${rel.right - rel.left + this.offset}px`;
-            style.bottom = `0`;
-            style.left = "auto";
-            break;
-      }
-   }
-
-   applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto) {
-      switch (this.positioning) {
-         case "absolute":
-            this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
-            break;
-
-         case "auto":
-            if (isTouchDevice())
-               this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
-            else this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
-            break;
-
-         default:
-            this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
-            break;
-      }
-   }
-
-   setDirectionClass(component, placement) {
-      var state = {
-         "place-left": false,
-         "place-right": false,
-         "place-up": false,
-         "place-down": false,
-      };
-
-      component.lastPlacement = placement;
-
-      component.setCSSState({
-         ...state,
-         ["place-" + placement]: true,
-      });
-   }
-
-   measureNaturalDropdownSize(instance, component) {
-      var { el } = component;
-      var size = {
-         width: el.offsetWidth,
-         height: this.constrain
-            ? calculateNaturalElementHeight(el)
-            : el.offsetHeight - el.clientHeight + el.scrollHeight,
-      };
-
-      if (this.firstChildDefinesHeight && el.firstChild) {
-         size.height = el.firstChild.offsetHeight;
-      }
-
-      if (this.firstChildDefinesWidth && el.firstChild) {
-         size.width = el.firstChild.offsetWidth;
-      }
-
-      if (this.onMeasureNaturalContentSize) {
-         var more = instance.invoke("onMeasureNaturalContentSize", el, instance, component);
-         Object.assign(size, more);
-      }
-
-      return size;
-   }
-
-   findOptimalPlacement(contentSize, target, placement, lastPlacement) {
-      var placementOrder = this.placementOrder.split(" ");
-      var best = lastPlacement || placement;
-      var first;
-
-      var score = {};
-      var viewport = getViewportRect();
-
-      for (var i = 0; i < placementOrder.length; i++) {
-         var p = placementOrder[i];
-         if (!first) first = p;
-         var parts = p.split("-");
-
-         var primary = parts[0];
-         var secondary = parts[1] || "center";
-
-         score[p] = 0;
-         var vertical = true;
-
-         switch (primary) {
-            case "down":
-               score[p] += 3 * Math.min(1, (viewport.bottom - target.bottom - this.offset) / contentSize.height);
-               break;
-
-            case "up":
-               score[p] += 3 * Math.min(1, (target.top - viewport.top - this.offset) / contentSize.height);
-               break;
-
-            case "right":
-               score[p] += target.right + contentSize.width + this.offset < viewport.right ? 3 : 0;
-               vertical = false;
-               break;
-
-            case "left":
-               score[p] += target.left - contentSize.width - this.offset >= viewport.left ? 3 : 0;
-               vertical = false;
-               break;
-         }
-
-         switch (secondary) {
-            case "center":
-               if (vertical) {
-                  score[p] += (target.right + target.left - contentSize.width) / 2 >= viewport.left ? 1 : 0;
-                  score[p] += (target.right + target.left + contentSize.width) / 2 < viewport.right ? 1 : 0;
-               } else {
-                  score[p] += (target.bottom + target.top - contentSize.height) / 2 >= viewport.top ? 1 : 0;
-                  score[p] += (target.bottom + target.top + contentSize.height) / 2 < viewport.bottom ? 1 : 0;
-               }
-               break;
-
-            case "right":
-               score[p] += target.left + contentSize.width < viewport.right ? 2 : 0;
-               break;
-
-            case "left":
-               score[p] += target.right - contentSize.width >= viewport.left ? 2 : 0;
-               break;
-
-            case "up":
-               score[p] += target.bottom - contentSize.height >= viewport.top ? 2 : 0;
-               break;
-
-            case "down":
-               score[p] += target.top + contentSize.height < viewport.bottom ? 2 : 0;
-               break;
-         }
-      }
-
-      if (!(best in score)) best = first;
-
-      for (var k in score) if (score[k] > score[best]) best = k;
-
-      if (this.touchFriendly && isTouchDevice() && score[best] < 5) return "screen-center";
-
-      return best;
-   }
-
-   handleKeyDown(e, instance) {
-      switch (e.keyCode) {
-         case 27: //esc
-            var focusable = findFirst(instance.relatedElement, isFocusable);
-            if (focusable) focusable.focus();
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-      }
-
-      if (this.onKeyDown) instance.invoke("onKeyDown", e, instance);
-   }
-
-   renderContents(context, instance) {
-      let { CSS, baseClass } = this;
-      let result = [super.renderContents(context, instance)];
-      if (this.arrow) {
-         result.push(
-            <div key="arrow-border" className={CSS.element(baseClass, "arrow-border")}></div>,
-            <div key="arrow-back" className={CSS.element(baseClass, "arrow-fill")}></div>,
-         );
-      }
-      return result;
-   }
-
-   render(context, instance, key) {
-      let { CSS, baseClass } = this;
-      //if relatedElement is not provided, a beacon is rendered to and used to resolve a nearby element as a target
-      //if onResolveTarget doesn't provide another element, the beacon itself is used as a target
-      let beacon = null;
-      if (this.relatedElement) instance.relatedElement = this.relatedElement;
-
-      if (!this.relatedElement || instance.needsBeacon) {
-         beacon = (
-            <div
-               key={`${key}-beacon`}
-               className={CSS.element(baseClass, "beacon")}
-               ref={(el) => {
-                  if (instance.relatedElement) return;
-                  let target = el;
-                  if (this.onResolveRelatedElement) target = instance.invoke("onResolveRelatedElement", el, instance);
-                  else target = el.previousElementSibling;
-                  if (!target) target = el;
-                  if (target == el) instance.needsBeacon = true;
-                  instance.relatedElement = target;
-                  instance.setState({ dummy: {} });
-               }}
-            />
-         );
-      }
-      return [beacon, instance.relatedElement && super.render(context, instance, key)];
-   }
-
-   getOverlayContainer() {
-      // this should be instance.relatedElement
-      if (this.relatedElement) {
-         let container = closestParent(this.relatedElement, (el) => el.dataset && el.dataset.focusableOverlayContainer);
-         if (container) return container;
-      }
-      return super.getOverlayContainer();
-   }
-}
-
-Dropdown.prototype.offset = 0;
-Dropdown.prototype.baseClass = "dropdown";
-Dropdown.prototype.matchWidth = true;
-Dropdown.prototype.matchMaxWidth = false;
-Dropdown.prototype.placementOrder = "up down right left";
-Dropdown.prototype.placement = null; //default placement
-Dropdown.prototype.constrain = false;
-Dropdown.prototype.positioning = "fixed";
-Dropdown.prototype.touchFriendly = false;
-Dropdown.prototype.arrow = false;
-Dropdown.prototype.pad = false;
-Dropdown.prototype.elementExplode = 0;
-Dropdown.prototype.closeOnScrollDistance = 50;
-Dropdown.prototype.screenPadding = 5;
-Dropdown.prototype.firstChildDefinesHeight = false;
-Dropdown.prototype.firstChildDefinesWidth = false;
-Dropdown.prototype.cover = false;
-
-Widget.alias("dropdown", Dropdown);
-Localization.registerPrototype("cx/widgets/Dropdown", Dropdown);
-
-function getViewportRect(padding = 0) {
-   return {
-      left: padding,
-      top: padding,
-      right: document.documentElement.offsetWidth - padding,
-      bottom: document.documentElement.offsetHeight - padding,
-   };
-}
diff --git a/packages/cx/src/widgets/overlay/Dropdown.scss b/packages/cx/src/widgets/overlay/Dropdown.scss
index c312166b7..2c076907a 100644
--- a/packages/cx/src/widgets/overlay/Dropdown.scss
+++ b/packages/cx/src/widgets/overlay/Dropdown.scss
@@ -1,14 +1,16 @@
+@use "sass:map";
+
 @mixin cx-dropdown-arrows(
    $name: "dropdown",
    $styles: $cx-dropdown-styles,
    $arrow-size: $cx-default-dropdown-arrow-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
-   $border-width: map-get($styles, border-width);
+   $border-width: map.get($styles, border-width);
 
    .#{$element}#{$name}-arrow-border,
    .#{$element}#{$name}-arrow-fill {
@@ -22,12 +24,12 @@
    }
 
    .#{$element}#{$name}-arrow-border {
-      color: map-get($styles, border-color);
+      color: map.get($styles, border-color);
       border-width: $border-width + $arrow-size;
    }
 
    .#{$element}#{$name}-arrow-fill {
-      color: map-get($styles, background-color);
+      color: map.get($styles, background-color);
       border-width: $arrow-size;
    }
 
@@ -148,9 +150,9 @@
    $arrow-size: $cx-default-dropdown-arrow-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       @extend %cxb-overlay;
diff --git a/packages/cx/src/widgets/overlay/Dropdown.tsx b/packages/cx/src/widgets/overlay/Dropdown.tsx
new file mode 100644
index 000000000..42502ce4d
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/Dropdown.tsx
@@ -0,0 +1,762 @@
+/** @jsxImportSource react */
+import { Localization } from "../../ui/Localization";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { Widget, VDOM } from "../../ui/Widget";
+import { calculateNaturalElementHeight } from "../../util/calculateNaturalElementHeight";
+import { closestParent, findFirst, isFocusable } from "../../util/DOM";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { Overlay, OverlayBase, OverlayConfig, OverlayInstance } from "./Overlay";
+import { Instance } from "../../ui/Instance";
+import { StringProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { HtmlElement } from "../HtmlElement";
+
+/*
+ Dropdown specific features:
+ - ability to position itself next to the target element
+ - monitor scrollable parents and updates it's position
+ */
+
+export interface DropdownConfig extends OverlayConfig {
+   /** Placement option for the dropdown relative to the trigger element. */
+   placement?: StringProp | null;
+
+   /** Offset distance from the trigger element. */
+   offset?: number;
+
+   /** Match the dropdown width to the trigger element. */
+   matchWidth?: boolean;
+
+   /** Match the dropdown max-width to the trigger element. */
+   matchMaxWidth?: boolean;
+
+   /** Placement preference order. */
+   placementOrder?: string;
+
+   /** Constrain the dropdown within the viewport. */
+   constrain?: boolean;
+
+   /** Positioning strategy - "fixed", "absolute", or "auto". */
+   positioning?: string;
+
+   /** Use touch-friendly positioning on touch devices. */
+   touchFriendly?: boolean;
+
+   /** Show an arrow pointing to the trigger element. */
+   arrow?: boolean;
+
+   /** Add padding around the dropdown. */
+   pad?: boolean;
+
+   /** Element explosion distance for positioning. */
+   elementExplode?: number;
+
+   /** Padding from screen edges. */
+   screenPadding?: number;
+
+   /** First child element defines the height. */
+   firstChildDefinesHeight?: boolean;
+
+   /** First child element defines the width. */
+   firstChildDefinesWidth?: boolean;
+
+   /** The dropdown will be automatically closed if the page is scrolled a certain distance. */
+   closeOnScrollDistance?: number;
+
+   /** The element to position the dropdown relative to. */
+   relatedElement?: Element;
+
+   /** Callback to resolve the related element. */
+   onResolveRelatedElement?: string | ((beaconEl: Element, instance: any) => Element);
+
+   /** Callback to measure natural content size. */
+   onMeasureNaturalContentSize?: string | ((el: Element, instance: any) => { width?: number; height?: number });
+
+   /** Callback when dropdown mounts. */
+   onDropdownDidMount?: string;
+
+   /** Callback to validate dropdown position. */
+   pipeValidateDropdownPosition?: string;
+
+   /** Callback when dropdown is dismissed after scroll. */
+   onDismissAfterScroll?: string;
+
+   /** Track mouse position for dropdowns. */
+   trackMouse?: boolean;
+
+   /** Track mouse X position. */
+   trackMouseX?: boolean;
+
+   /** Track mouse Y position. */
+   trackMouseY?: boolean;
+
+   /** Cover the related element with dropdown. */
+   cover?: boolean;
+}
+
+export class DropdownInstance<
+   WidgetType extends DropdownBase<any, any> = Dropdown,
+> extends OverlayInstance<WidgetType> {
+   mousePosition?: any;
+   parentPositionChangeEvent?: any;
+   initialScreenPosition?: any;
+   relatedElement?: HTMLElement;
+   needsBeacon?: boolean;
+}
+
+export class DropdownBase<
+   Config extends DropdownConfig = DropdownConfig,
+   InstanceType extends DropdownInstance<any> = DropdownInstance<any>,
+> extends OverlayBase<Config, InstanceType> {
+   declare trackMouse?: boolean;
+   declare trackMouseX?: boolean;
+   declare trackMouseY?: boolean;
+   declare offset: number;
+   declare matchWidth?: boolean;
+   declare matchMaxWidth?: boolean;
+   declare placementOrder: string;
+   declare placement?: StringProp | null;
+   declare constrain?: boolean;
+   declare positioning?: string;
+   declare touchFriendly?: boolean;
+   declare arrow?: boolean;
+   declare elementExplode?: number;
+   declare screenPadding: number;
+   declare firstChildDefinesHeight?: boolean;
+   declare firstChildDefinesWidth?: boolean;
+   declare closeOnScrollDistance: number;
+   declare relatedElement?: HTMLElement;
+   declare onResolveRelatedElement?: string | ((beaconEl: Element, instance: any) => Element);
+   declare onMeasureNaturalContentSize?: string | ((el: Element, instance: any) => { width?: number; height?: number });
+   declare onDropdownDidMount?: string;
+   declare pipeValidateDropdownPosition?: string;
+   declare onDismissAfterScroll?: string;
+   declare onKeyDown?: string;
+   declare cover?: boolean;
+   declare mousePosition?: any;
+   declare mouseTrap?: boolean;
+   declare createDelay?: number;
+
+   init() {
+      if (this.trackMouse) {
+         this.trackMouseX = true;
+         this.trackMouseY = true;
+      }
+      if (this.autoFocus && !this.hasOwnProperty("focusable")) this.focusable = true;
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         placement: undefined,
+      });
+   }
+
+   initInstance(context: RenderingContext, instance: InstanceType): void {
+      instance.mousePosition = this.mousePosition;
+      instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
+      super.initInstance(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: InstanceType): void {
+      context.push("lastDropdown", instance);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: InstanceType): void {
+      context.pop("lastDropdown");
+      super.exploreCleanup(context, instance);
+   }
+
+   overlayDidMount(instance: InstanceType, component: any): void {
+      super.overlayDidMount(instance, component);
+      var scrollableParents: Element[] = (component.scrollableParents = [window as any]);
+      component.updateDropdownPosition = (e: any) => this.updateDropdownPosition(instance, component);
+
+      instance.initialScreenPosition = null;
+
+      var el = instance.relatedElement?.parentElement;
+      while (el) {
+         scrollableParents.push(el);
+         el = el.parentElement;
+      }
+      scrollableParents.forEach((el: any) => {
+         el.addEventListener("scroll", component.updateDropdownPosition);
+      });
+      component.offResize = ResizeManager.subscribe(component.updateDropdownPosition);
+
+      if (this.onDropdownDidMount) instance.invoke("onDropdownDidMount", instance, component);
+
+      if (this.pipeValidateDropdownPosition)
+         instance.invoke("pipeValidateDropdownPosition", component.updateDropdownPosition, instance);
+
+      if (instance.parentPositionChangeEvent)
+         component.offParentPositionChange = instance.parentPositionChangeEvent.subscribe(
+            component.updateDropdownPosition,
+         );
+   }
+
+   overlayDidUpdate(instance: InstanceType, component: any): void {
+      this.updateDropdownPosition(instance, component);
+   }
+
+   overlayWillUnmount(instance: InstanceType, component: any): void {
+      var { scrollableParents } = component;
+      if (scrollableParents) {
+         scrollableParents.forEach((el: Element) => {
+            el.removeEventListener("scroll", component.updateDropdownPosition);
+         });
+         delete component.scrollableParents;
+         delete component.updateDropdownPosition;
+      }
+      if (component.offResize) component.offResize();
+
+      if (this.pipeValidateDropdownPosition) instance.invoke("pipeValidateDropdownPosition", null, instance);
+
+      if (component.offParentPositionChange) component.offParentPositionChange();
+
+      delete component.parentBounds;
+      delete component.initialScreenPosition;
+   }
+
+   dismissAfterScroll(data: any, instance: InstanceType, component: any): void {
+      if (this.onDismissAfterScroll && instance.invoke("onDismissAfterScroll", data, instance, component) === false)
+         return;
+      if (instance.dismiss) instance.dismiss();
+   }
+
+   updateDropdownPosition(instance: InstanceType, component: any): void {
+      var { el, initialScreenPosition } = component;
+      var { data, relatedElement } = instance;
+      var parentBounds = getTopLevelBoundingClientRect(relatedElement!);
+
+      //getBoundingClientRect() will return an empty rect if the element is hidden or removed
+      if (parentBounds.left == 0 && parentBounds.top == 0 && parentBounds.bottom == 0 && parentBounds.right == 0) {
+         if (!component.parentBounds) return;
+         parentBounds = component.parentBounds;
+      } else component.parentBounds = parentBounds;
+
+      if (this.trackMouseX && instance.mousePosition) {
+         parentBounds = new DOMRect(
+            instance.mousePosition.x,
+            parentBounds.top,
+            0,
+            parentBounds.bottom - parentBounds.top,
+         );
+      }
+
+      if (this.trackMouseY && instance.mousePosition) {
+         parentBounds = new DOMRect(
+            parentBounds.left,
+            instance.mousePosition.y,
+            parentBounds.right - parentBounds.left,
+            0,
+         );
+      }
+
+      let explode = this.pad && typeof this.elementExplode === "number" ? this.elementExplode : 0;
+      if (explode) {
+         parentBounds = new DOMRect(
+            Math.round(parentBounds.left - explode),
+            Math.round(parentBounds.top - explode),
+            Math.round(parentBounds.right - parentBounds.left + 2 * explode),
+            Math.round(parentBounds.bottom - parentBounds.top + 2 * explode),
+         );
+      }
+
+      var style: any = {};
+      if (this.matchWidth) style.minWidth = `${parentBounds.right - parentBounds.left}px`;
+      if (this.matchMaxWidth) style.maxWidth = `${parentBounds.right - parentBounds.left}px`;
+
+      var contentSize = this.measureNaturalDropdownSize(instance, component);
+      var placement = this.findOptimalPlacement(contentSize, parentBounds, data.placement, component.lastPlacement);
+
+      this.applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, false);
+      component.setCustomStyle(style);
+      this.setDirectionClass(component, placement);
+
+      if (this.constrain) {
+         //recheck content size for changes as sometimes when auto is used the size can change
+         let newContentSize = this.measureNaturalDropdownSize(instance, component);
+         if (newContentSize.width != contentSize.width || newContentSize.height != contentSize.height) {
+            let newStyle = {};
+            this.applyPositioningPlacementStyles(newStyle, placement, newContentSize, parentBounds, el, true);
+            component.setCustomStyle(newStyle);
+         }
+      }
+
+      if (!initialScreenPosition) initialScreenPosition = component.initialScreenPosition = parentBounds;
+
+      if (
+         (!this.trackMouseY && Math.abs(parentBounds.top - initialScreenPosition.top) > this.closeOnScrollDistance) ||
+         (!this.trackMouseX && Math.abs(parentBounds.left - initialScreenPosition.left) > this.closeOnScrollDistance)
+      )
+         this.dismissAfterScroll({ parentBounds, initialScreenPosition }, instance, component);
+
+      instance.positionChangeSubscribers.notify();
+   }
+
+   applyFixedPositioningPlacementStyles(
+      style: any,
+      placement: string,
+      contentSize: any,
+      rel: any,
+      el: HTMLElement,
+      noAuto: boolean,
+   ): void {
+      let viewport = getViewportRect(this.screenPadding);
+      style.position = "fixed";
+
+      if (placement.startsWith("down")) {
+         style.top = `${(this.cover ? rel.top : rel.bottom) + this.offset}px`;
+         let bottom = viewport.bottom - (rel.bottom + this.offset + contentSize.height);
+         style.bottom =
+            this.constrain && (noAuto || bottom < this.screenPadding + 10)
+               ? Math.max(this.screenPadding, bottom) + "px"
+               : "auto";
+      } else if (placement.startsWith("up")) {
+         let top = rel.top - this.offset - contentSize.height - viewport.top;
+         style.top =
+            this.constrain && (noAuto || top < this.screenPadding + 10)
+               ? Math.max(this.screenPadding, top) + "px"
+               : "auto";
+         style.bottom =
+            document.documentElement.offsetHeight - (this.cover ? rel.bottom : rel.top) + this.offset + "px";
+      }
+
+      switch (placement) {
+         case "down":
+         case "down-center":
+            style.right = "auto";
+            style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
+            break;
+
+         case "down-right":
+            style.right = "auto";
+            style.left = `${rel.left}px`;
+            break;
+
+         case "down-left":
+            style.right = `${document.documentElement.offsetWidth - rel.right}px`;
+            style.left = "auto";
+            break;
+
+         case "up":
+         case "up-center":
+            style.right = "auto";
+            style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
+            break;
+
+         case "up-right":
+            style.right = "auto";
+            style.left = `${rel.left}px`;
+            break;
+
+         case "up-left":
+            style.right = `${document.documentElement.offsetWidth - rel.right}px`;
+            style.left = "auto";
+            break;
+
+         case "right":
+         case "right-center":
+            style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${rel.right + this.offset}px`;
+            break;
+
+         case "right-down":
+            style.top = `${rel.top}px`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${rel.right + this.offset}px`;
+            break;
+
+         case "right-up":
+            style.top = "auto";
+            style.right = "auto";
+            style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
+            style.left = `${rel.right + this.offset}px`;
+            break;
+
+         case "left":
+         case "left-center":
+            style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
+            style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            break;
+
+         case "left-down":
+            style.top = `${rel.top}px`;
+            style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            break;
+
+         case "left-up":
+            style.top = "auto";
+            style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+            style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
+            style.left = "auto";
+            break;
+
+         case "screen-center":
+            let w = Math.min(contentSize.width, document.documentElement.offsetWidth - 2 * this.screenPadding);
+            let h = Math.min(contentSize.height, document.documentElement.offsetHeight - 2 * this.screenPadding);
+            style.top = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
+            style.right = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
+            style.bottom = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
+            style.left = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
+            break;
+      }
+   }
+
+   applyAbsolutePositioningPlacementStyles(
+      style: any,
+      placement: string,
+      contentSize: any,
+      rel: any,
+      el: HTMLElement,
+      noAuto: boolean,
+   ): void {
+      var viewport = getViewportRect(this.screenPadding);
+
+      style.position = "absolute";
+
+      if (placement.startsWith("down")) {
+         style.top = `${rel.bottom - rel.top + this.offset}px`;
+         let room = viewport.bottom - rel.bottom + this.offset;
+         style.bottom =
+            this.constrain && (noAuto || contentSize.height >= room - 10)
+               ? `${-Math.min(room, contentSize.height)}px`
+               : "auto";
+      } else if (placement.startsWith("up")) {
+         let room = rel.top - this.offset - viewport.top;
+         style.top =
+            this.constrain && (noAuto || contentSize.height >= room - 10)
+               ? `${-Math.min(room, contentSize.height)}px`
+               : "auto";
+         style.bottom = `${rel.bottom - rel.top - this.offset}px`;
+      }
+
+      switch (placement) {
+         case "down":
+         case "down-center":
+            style.right = "auto";
+            style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
+            break;
+
+         case "down-right":
+            style.right = "auto";
+            style.left = `0`;
+            break;
+
+         case "down-left":
+            style.right = `0`;
+            style.left = "auto";
+            break;
+
+         case "up":
+         case "up-center":
+            style.right = "auto";
+            style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
+            break;
+
+         case "up-right":
+            style.right = "auto";
+            style.left = `0`;
+            break;
+
+         case "up-left":
+            style.right = `0`;
+            style.left = "auto";
+            break;
+
+         case "right":
+         case "right-center":
+            style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${rel.right - rel.left + this.offset}px`;
+            break;
+
+         case "right-down":
+            style.top = `0`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${rel.right - rel.left + this.offset}px`;
+            break;
+
+         case "right-up":
+            style.top = "auto";
+            style.right = "auto";
+            style.bottom = `0`;
+            style.left = `${rel.right - rel.left + this.offset}px`;
+            break;
+
+         case "left":
+         case "left-center":
+            style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
+            style.right = `${rel.right - rel.left + this.offset}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            break;
+
+         case "left-down":
+            style.top = `0`;
+            style.right = `${rel.right - rel.left + this.offset}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            break;
+
+         case "left-up":
+            style.top = "auto";
+            style.right = `${rel.right - rel.left + this.offset}px`;
+            style.bottom = `0`;
+            style.left = "auto";
+            break;
+      }
+   }
+
+   applyPositioningPlacementStyles(
+      style: any,
+      placement: string,
+      contentSize: any,
+      parentBounds: any,
+      el: HTMLElement,
+      noAuto: boolean,
+   ): void {
+      switch (this.positioning) {
+         case "absolute":
+            this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+            break;
+
+         case "auto":
+            if (isTouchDevice())
+               this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+            else this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+            break;
+
+         default:
+            this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+            break;
+      }
+   }
+
+   setDirectionClass(component: any, placement: string): void {
+      var state = {
+         "place-left": false,
+         "place-right": false,
+         "place-up": false,
+         "place-down": false,
+      };
+
+      component.lastPlacement = placement;
+
+      component.setCSSState({
+         ...state,
+         ["place-" + placement]: true,
+      });
+   }
+
+   measureNaturalDropdownSize(instance: InstanceType, component: any): any {
+      var { el } = component;
+      var size = {
+         width: el.offsetWidth,
+         height: this.constrain
+            ? calculateNaturalElementHeight(el)
+            : el.offsetHeight - el.clientHeight + el.scrollHeight,
+      };
+
+      if (this.firstChildDefinesHeight && el.firstChild) {
+         size.height = el.firstChild.offsetHeight;
+      }
+
+      if (this.firstChildDefinesWidth && el.firstChild) {
+         size.width = el.firstChild.offsetWidth;
+      }
+
+      if (this.onMeasureNaturalContentSize) {
+         var more = instance.invoke("onMeasureNaturalContentSize", el, instance, component);
+         Object.assign(size, more);
+      }
+
+      return size;
+   }
+
+   findOptimalPlacement(contentSize: any, target: any, placement: string, lastPlacement: any): any {
+      var placementOrder = this.placementOrder.split(" ");
+      var best = lastPlacement || placement;
+      var first;
+
+      var score: Record<string, number> = {};
+      var viewport = getViewportRect();
+
+      for (var i = 0; i < placementOrder.length; i++) {
+         var p = placementOrder[i];
+         if (!first) first = p;
+         var parts = p.split("-");
+
+         var primary = parts[0];
+         var secondary = parts[1] || "center";
+
+         score[p] = 0;
+         var vertical = true;
+
+         switch (primary) {
+            case "down":
+               score[p] += 3 * Math.min(1, (viewport.bottom - target.bottom - this.offset) / contentSize.height);
+               break;
+
+            case "up":
+               score[p] += 3 * Math.min(1, (target.top - viewport.top - this.offset) / contentSize.height);
+               break;
+
+            case "right":
+               score[p] += target.right + contentSize.width + this.offset < viewport.right ? 3 : 0;
+               vertical = false;
+               break;
+
+            case "left":
+               score[p] += target.left - contentSize.width - this.offset >= viewport.left ? 3 : 0;
+               vertical = false;
+               break;
+         }
+
+         switch (secondary) {
+            case "center":
+               if (vertical) {
+                  score[p] += (target.right + target.left - contentSize.width) / 2 >= viewport.left ? 1 : 0;
+                  score[p] += (target.right + target.left + contentSize.width) / 2 < viewport.right ? 1 : 0;
+               } else {
+                  score[p] += (target.bottom + target.top - contentSize.height) / 2 >= viewport.top ? 1 : 0;
+                  score[p] += (target.bottom + target.top + contentSize.height) / 2 < viewport.bottom ? 1 : 0;
+               }
+               break;
+
+            case "right":
+               score[p] += target.left + contentSize.width < viewport.right ? 2 : 0;
+               break;
+
+            case "left":
+               score[p] += target.right - contentSize.width >= viewport.left ? 2 : 0;
+               break;
+
+            case "up":
+               score[p] += target.bottom - contentSize.height >= viewport.top ? 2 : 0;
+               break;
+
+            case "down":
+               score[p] += target.top + contentSize.height < viewport.bottom ? 2 : 0;
+               break;
+         }
+      }
+
+      if (!(best in score)) best = first;
+
+      for (var k in score) if (score[k] > score[best]) best = k;
+
+      if (this.touchFriendly && isTouchDevice() && score[best] < 5) return "screen-center";
+
+      return best;
+   }
+
+   handleKeyDown(e: React.KeyboardEvent, instance: InstanceType) {
+      switch (e.keyCode) {
+         case 27: //esc
+            var focusable = findFirst(instance.relatedElement!, isFocusable);
+            if (focusable) focusable.focus();
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+      }
+
+      if (this.onKeyDown) instance.invoke("onKeyDown", e, instance);
+   }
+
+   renderContents(context: RenderingContext, instance: InstanceType) {
+      let { CSS, baseClass } = this;
+      let result = [super.renderContents(context, instance)];
+      if (this.arrow) {
+         result.push(
+            <div key="arrow-border" className={CSS.element(baseClass, "arrow-border")}></div>,
+            <div key="arrow-back" className={CSS.element(baseClass, "arrow-fill")}></div>,
+         );
+      }
+      return result;
+   }
+
+   render(context: RenderingContext, instance: InstanceType, key: string) {
+      let { CSS, baseClass } = this;
+      //if relatedElement is not provided, a beacon is rendered to and used to resolve a nearby element as a target
+      //if onResolveTarget doesn't provide another element, the beacon itself is used as a target
+      let beacon = null;
+      if (this.relatedElement) instance.relatedElement = this.relatedElement;
+
+      if (!this.relatedElement || instance.needsBeacon) {
+         beacon = (
+            <div
+               key={`${key}-beacon`}
+               className={CSS.element(baseClass, "beacon")}
+               ref={(el) => {
+                  if (instance.relatedElement || !el) return;
+                  let target: HTMLElement | null = el;
+                  if (this.onResolveRelatedElement) target = instance.invoke("onResolveRelatedElement", el, instance);
+                  else target = el.previousElementSibling as HTMLElement;
+                  if (!target) target = el;
+                  if (target == el) instance.needsBeacon = true;
+                  instance.relatedElement = target;
+                  instance.setState({ dummy: {} });
+               }}
+            />
+         );
+      }
+      return [beacon, instance.relatedElement && super.render(context, instance, key)];
+   }
+
+   getOverlayContainer(): HTMLElement {
+      // this should be instance.relatedElement
+      if (this.relatedElement) {
+         let container = closestParent(
+            this.relatedElement,
+            (el) => el.dataset && !!el.dataset.focusableOverlayContainer,
+         );
+         if (container) return container;
+      }
+      return super.getOverlayContainer();
+   }
+}
+
+DropdownBase.prototype.offset = 0;
+DropdownBase.prototype.baseClass = "dropdown";
+DropdownBase.prototype.matchWidth = true;
+DropdownBase.prototype.matchMaxWidth = false;
+DropdownBase.prototype.placementOrder = "up down right left";
+DropdownBase.prototype.placement = null; //default placement
+DropdownBase.prototype.constrain = false;
+DropdownBase.prototype.positioning = "fixed";
+DropdownBase.prototype.touchFriendly = false;
+DropdownBase.prototype.arrow = false;
+DropdownBase.prototype.pad = false;
+DropdownBase.prototype.elementExplode = 0;
+DropdownBase.prototype.closeOnScrollDistance = 50;
+DropdownBase.prototype.screenPadding = 5;
+DropdownBase.prototype.firstChildDefinesHeight = false;
+DropdownBase.prototype.firstChildDefinesWidth = false;
+DropdownBase.prototype.cover = false;
+
+export class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> {}
+
+Widget.alias("dropdown", Dropdown);
+Localization.registerPrototype("cx/widgets/Dropdown", Dropdown);
+
+function getViewportRect(padding = 0) {
+   return {
+      left: padding,
+      top: padding,
+      right: document.documentElement.offsetWidth - padding,
+      bottom: document.documentElement.offsetHeight - padding,
+   };
+}
diff --git a/packages/cx/src/widgets/overlay/FlyweightTooltipTracker.d.ts b/packages/cx/src/widgets/overlay/FlyweightTooltipTracker.d.ts
deleted file mode 100644
index aa0f0f6fd..000000000
--- a/packages/cx/src/widgets/overlay/FlyweightTooltipTracker.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui/Instance";
-
-export interface FlyweightTooltipTrackerProps extends Cx.WidgetProps {
-   onGetTooltip(element: Element, instance: Instance): Cx.Config;
-}
-
-export class FlyweightTooltipTracker extends Cx.Widget<FlyweightTooltipTrackerProps> {}
diff --git a/packages/cx/src/widgets/overlay/FlyweightTooltipTracker.js b/packages/cx/src/widgets/overlay/FlyweightTooltipTracker.js
deleted file mode 100644
index 42980fbeb..000000000
--- a/packages/cx/src/widgets/overlay/FlyweightTooltipTracker.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Widget } from "../../ui/Widget";
-import { VDOM } from "../../ui/VDOM";
-import { tooltipMouseMove, tooltipMouseLeave } from "./tooltip-ops";
-import { closest, isObject } from "../../util";
-
-export class FlyweightTooltipTracker extends Widget {
-   initInstance(context, instance) {
-      let handler = (e) => this.handleMouseMove(e, instance);
-      document.addEventListener("mousemove", handler);
-      instance.subscribeOnDestroy(() => {
-         document.removeEventListener("mousemove", handler);
-      });
-   }
-
-   render(context, instance, key) {
-      return null;
-   }
-
-   handleMouseMove(e, instance) {
-      if (!this.onGetTooltip) return;
-      let parentEl, tooltip;
-      if (instance.lastTarget == e.target) return;
-
-      instance.lastTarget = e.target;
-      parentEl = closest(e.target, (element) => {
-         tooltip = instance.invoke("onGetTooltip", element, instance);
-         if (tooltip) return true;
-      });
-
-      if (!parentEl) tooltipMouseLeave(e, instance, instance.tooltip, { target: instance.parentEl });
-      else {
-         instance.tooltip = tooltip;
-         instance.parentEl = parentEl;
-         tooltipMouseMove(e, instance, instance.tooltip, {
-            target: parentEl,
-         });
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/overlay/FlyweightTooltipTracker.ts b/packages/cx/src/widgets/overlay/FlyweightTooltipTracker.ts
new file mode 100644
index 000000000..1e10e6a9f
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/FlyweightTooltipTracker.ts
@@ -0,0 +1,57 @@
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Widget } from "../../ui/Widget";
+import { closest } from "../../util";
+import type { TooltipInstance } from "./Tooltip";
+import { tooltipMouseLeave, tooltipMouseMove, TooltipParentInstance, TooltipProp } from "./tooltip-ops";
+
+export interface FlyweightTooltipTrackerConfig {
+   onGetTooltip?: (element: Element, instance: Instance) => TooltipProp;
+}
+
+export class FlyweightTooltipTrackerInstance
+   extends Instance<FlyweightTooltipTracker>
+   implements TooltipParentInstance
+{
+   declare lastTarget?: EventTarget | null;
+   declare tooltip?: TooltipProp;
+   declare parentEl?: Element;
+   declare tooltips: { [key: string]: TooltipInstance };
+}
+
+export class FlyweightTooltipTracker extends Widget {
+   declare onGetTooltip?: (element: Element, instance: Instance) => TooltipProp | undefined;
+
+   initInstance(context: RenderingContext, instance: FlyweightTooltipTrackerInstance): void {
+      let handler = (e: MouseEvent) => this.handleMouseMove(e, instance);
+      document.addEventListener("mousemove", handler);
+      instance.subscribeOnDestroy(() => {
+         document.removeEventListener("mousemove", handler);
+      });
+   }
+
+   render(context: RenderingContext, instance: FlyweightTooltipTrackerInstance, key: string): any {
+      return null;
+   }
+
+   handleMouseMove(e: MouseEvent, instance: FlyweightTooltipTrackerInstance): void {
+      if (!this.onGetTooltip) return;
+      let parentEl: Element | null, tooltip: TooltipProp | undefined;
+      if (instance.lastTarget == e.target) return;
+
+      instance.lastTarget = e.target;
+      parentEl = closest(e.target as Element, (element: Element) => {
+         tooltip = instance.invoke("onGetTooltip", element, instance);
+         return !!tooltip;
+      });
+
+      if (!parentEl) tooltipMouseLeave(e, instance, instance.tooltip!, { target: instance.parentEl });
+      else {
+         instance.tooltip = tooltip;
+         instance.parentEl = parentEl;
+         tooltipMouseMove(e, instance, instance.tooltip!, {
+            target: parentEl,
+         });
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/overlay/MsgBox.d.ts b/packages/cx/src/widgets/overlay/MsgBox.d.ts
deleted file mode 100644
index 9efe824c6..000000000
--- a/packages/cx/src/widgets/overlay/MsgBox.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as Cx from '../../core';
-
-interface MsgBoxProps {
-
-   buttonMod?: null,
-   footerDirection?: string,
-   footerJustify?: string
-   
-}
-
-export class MsgBox {
-   static alert(options: string | Cx.Config): Promise<void>;
-
-   static yesNo(options: string | Cx.Config): Promise<string>;
-}
-
-export function enableMsgBoxAlerts();
\ No newline at end of file
diff --git a/packages/cx/src/widgets/overlay/MsgBox.js b/packages/cx/src/widgets/overlay/MsgBox.js
deleted file mode 100644
index b54d36823..000000000
--- a/packages/cx/src/widgets/overlay/MsgBox.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Widget } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { Window } from "./Window";
-import { Button } from "../Button";
-import { Localization } from "../../ui/Localization";
-import { FlexRow } from "../FlexBox";
-import { registerAlertImpl } from "./alerts";
-import { isString } from "../../util/isString";
-
-export class MsgBox {
-   static alert(options) {
-      if (isString(options))
-         options = {
-            message: options,
-         };
-
-      return new Promise(function (resolve) {
-         let callback = (e, instance) => {
-            if (options.callback && options.callback() === false) return;
-            instance.parentOptions.dismiss();
-            resolve();
-         };
-
-         let w = Widget.create(
-            <cx>
-               <Window
-                  title={options.title}
-                  header={options.header}
-                  mod="alert"
-                  modal
-                  center
-                  resizable={false}
-                  closable={false}
-                  style={options.style || "max-width: 90vw"}
-                  dismissOnPopState
-               >
-                  {options.message || options.items || options.children}
-                  <FlexRow
-                     putInto="footer"
-                     direction={MsgBox.prototype.footerDirection}
-                     justify={MsgBox.prototype.footerJustify}
-                  >
-                     <Button mod={MsgBox.prototype.buttonMod} onClick={callback}>
-                        {options.okText || "OK"}
-                     </Button>
-                  </FlexRow>
-               </Window>
-            </cx>
-         );
-
-         w.open(options.store);
-      });
-   }
-
-   static yesNo(options) {
-      if (isString(options))
-         options = {
-            message: options,
-         };
-
-      return new Promise(function (resolve, reject) {
-         let callback = (option) => (e, instance) => {
-            if (options.callback && options.callback(option) === false) return;
-            instance.parentOptions.dismiss();
-            if (option == "yes") resolve(option);
-            else resolve(option);
-         };
-         let w = Widget.create(
-            <cx>
-               <Window
-                  title={options.title}
-                  header={options.header}
-                  mod="alert"
-                  modal
-                  center
-                  resizable={false}
-                  closable={false}
-                  style={options.style || "max-width: 90vw"}
-                  dismissOnPopState
-               >
-                  {options.message || options.items || options.children}
-                  <FlexRow
-                     putInto="footer"
-                     direction={MsgBox.prototype.footerDirection}
-                     justify={MsgBox.prototype.footerJustify}
-                     hspacing="small"
-                  >
-                     <Button mod={options.yesButtonMod || MsgBox.prototype.buttonMod} onClick={callback("yes")}>
-                        {options.yesText || MsgBox.prototype.yesText}
-                     </Button>
-                     <Button mod={options.noButtonMod || MsgBox.prototype.buttonMod} onClick={callback("no")}>
-                        {options.noText || MsgBox.prototype.noText}
-                     </Button>
-                  </FlexRow>
-               </Window>
-            </cx>
-         );
-
-         w.open(options.store);
-      });
-   }
-}
-
-MsgBox.prototype.buttonMod = null;
-MsgBox.prototype.footerDirection = "row";
-MsgBox.prototype.footerJustify = "center";
-MsgBox.prototype.yesText = "Yes";
-MsgBox.prototype.noText = "No";
-Localization.registerPrototype("cx/widgets/MsgBox", MsgBox);
-
-export function enableMsgBoxAlerts() {
-   registerAlertImpl({
-      yesNo: MsgBox.yesNo.bind(MsgBox),
-      alert: MsgBox.alert.bind(MsgBox),
-   });
-}
diff --git a/packages/cx/src/widgets/overlay/MsgBox.tsx b/packages/cx/src/widgets/overlay/MsgBox.tsx
new file mode 100644
index 000000000..7b1dd3709
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/MsgBox.tsx
@@ -0,0 +1,141 @@
+import { Window } from "./Window";
+import { Button } from "../Button";
+import { Localization } from "../../ui/Localization";
+import { FlexRow } from "../FlexBox";
+import { registerAlertImpl } from "./alerts";
+import { isString } from "../../util/isString";
+import { Instance } from "../../ui/Instance";
+
+export interface MsgBoxOptions {
+   message?: string;
+   title?: string;
+   header?: string;
+   style?: string;
+   callback?: (option?: string) => boolean | void;
+   okText?: string;
+   yesText?: string;
+   noText?: string;
+   yesButtonMod?: string;
+   noButtonMod?: string;
+   items?: any;
+   children?: any;
+   store?: any;
+}
+
+export class MsgBox {
+   buttonMod?: string;
+   footerDirection?: string;
+   footerJustify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | false;
+   yesText?: string;
+   noText?: string;
+
+   static alert(options: string | MsgBoxOptions): Promise<void> {
+      let opts: MsgBoxOptions;
+      if (isString(options))
+         opts = {
+            message: options,
+         };
+      else opts = options;
+
+      return new Promise<void>(function (resolve) {
+         let callback = (e: any, instance: Instance) => {
+            if (opts.callback && opts.callback() === false) return;
+            instance.parentOptions.dismiss();
+            resolve();
+         };
+
+         let w = Window.create(
+            <cx>
+               <Window
+                  title={opts.title}
+                  header={opts.header}
+                  mod="alert"
+                  modal
+                  center
+                  resizable={false}
+                  closable={false}
+                  style={opts.style || "max-width: 90vw"}
+                  dismissOnPopState
+               >
+                  {opts.message || opts.items || opts.children}
+                  <FlexRow
+                     putInto="footer"
+                     direction={MsgBox.prototype.footerDirection}
+                     justify={MsgBox.prototype.footerJustify}
+                  >
+                     <Button mod={MsgBox.prototype.buttonMod} onClick={callback}>
+                        {opts.okText || "OK"}
+                     </Button>
+                  </FlexRow>
+               </Window>
+            </cx>,
+         ) as any;
+
+         w.open(opts.store);
+      });
+   }
+
+   static yesNo(options: string | MsgBoxOptions): Promise<string> {
+      let opts: MsgBoxOptions;
+      if (isString(options))
+         opts = {
+            message: options,
+         };
+      else opts = options;
+
+      return new Promise<string>(function (resolve, reject) {
+         let callback = (option: string) => (e: any, instance: Instance) => {
+            if (opts.callback && opts.callback(option) === false) return;
+            instance.parentOptions.dismiss();
+            if (option == "yes") resolve(option);
+            else resolve(option);
+         };
+         let w = Window.create(
+            <cx>
+               <Window
+                  title={opts.title}
+                  header={opts.header}
+                  mod="alert"
+                  modal
+                  center
+                  resizable={false}
+                  closable={false}
+                  style={opts.style || "max-width: 90vw"}
+                  dismissOnPopState
+               >
+                  {opts.message || opts.items || opts.children}
+                  <FlexRow
+                     putInto="footer"
+                     direction={MsgBox.prototype.footerDirection}
+                     justify={MsgBox.prototype.footerJustify}
+                     hspacing="small"
+                  >
+                     <Button mod={opts.yesButtonMod || MsgBox.prototype.buttonMod} onClick={callback("yes")}>
+                        {opts.yesText || MsgBox.prototype.yesText}
+                     </Button>
+                     <Button mod={opts.noButtonMod || MsgBox.prototype.buttonMod} onClick={callback("no")}>
+                        {opts.noText || MsgBox.prototype.noText}
+                     </Button>
+                  </FlexRow>
+               </Window>
+            </cx>,
+         ) as any;
+
+         w.open(opts.store);
+      });
+   }
+}
+
+MsgBox.prototype.buttonMod = undefined;
+MsgBox.prototype.footerDirection = "row";
+MsgBox.prototype.footerJustify = "center";
+MsgBox.prototype.yesText = "Yes";
+MsgBox.prototype.noText = "No";
+Localization.registerPrototype("cx/widgets/MsgBox", MsgBox);
+
+export function enableMsgBoxAlerts(): void {
+   registerAlertImpl({
+      yesNo: MsgBox.yesNo.bind(MsgBox),
+      alert: MsgBox.alert.bind(MsgBox),
+   });
+}
diff --git a/packages/cx/src/widgets/overlay/Overlay.d.ts b/packages/cx/src/widgets/overlay/Overlay.d.ts
deleted file mode 100644
index 99e184ec4..000000000
--- a/packages/cx/src/widgets/overlay/Overlay.d.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as Cx from "../../core";
-import { View } from "../../data";
-import { Instance } from "../../ui/Instance";
-
-export interface OverlayProps extends Cx.StyledContainerProps {
-   /** Set to `true` to enable resizing. */
-   resizable?: Cx.BooleanProp;
-
-   /** Set to `true` to enable dragging the overlay. */
-   draggable?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `overlay`. */
-   baseClass?: string;
-
-   resizeWidth?: number;
-
-   /** Set to `true` to initially place the overlay in the center of the page. */
-   center?: boolean;
-
-   /** Set to `true` to initially place the overlay in the center of the page horizontally. */
-   centerX?: boolean;
-
-   /** Set to `true` to initially place the overlay in the center of the page vertically. */
-   centerY?: boolean;
-
-   /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
-   modal?: boolean;
-
-   /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
-   backdrop?: boolean;
-
-   /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
-    * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
-   inline?: boolean;
-
-   /** Set to `true` to automatically focus the top level overlay element. */
-   autoFocus?: boolean;
-
-   /** Set to `true` to automatically focus the first focusable child in the overlay. */
-   autoFocusFirstChild?: boolean;
-
-   /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
-   animate?: boolean;
-
-   /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
-   destroyDelay?: number;
-
-   /** Automatically dismiss overlay if it loses focus. */
-   dismissOnFocusOut?: boolean;
-
-   /** Set to true to make the top level overlay element focusable. */
-   focusable?: boolean;
-
-   /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
-   dismissOnPopState?: boolean;
-
-   /** A callback function which fires while the overlay is being moved around. */
-   onMove?(e: Event, instance: Instance, component: any);
-
-   /** A callback function which fires while the overlay is being resized. */
-   onResize?(e: Event, instance: Instance, component: any);
-
-   /** zIndex */
-   zIndex?: Cx.NumberProp;
-
-   /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
-   closeOnEscape?: boolean;
-}
-
-export class Overlay extends Cx.Widget<OverlayProps> {
-   /** Opens the overlay. Returns a dismiss function. */
-   open(store: View | Instance): () => void;
-}
diff --git a/packages/cx/src/widgets/overlay/Overlay.js b/packages/cx/src/widgets/overlay/Overlay.js
deleted file mode 100644
index da7dccc55..000000000
--- a/packages/cx/src/widgets/overlay/Overlay.js
+++ /dev/null
@@ -1,747 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Container } from "../../ui/Container";
-import { startAppLoop } from "../../ui/app/startAppLoop";
-import { FocusManager, oneFocusOut, offFocusOut } from "../../ui/FocusManager";
-import { isSelfOrDescendant, closest } from "../../util/DOM";
-import { parseStyle } from "../../util/parseStyle";
-import { captureMouseOrTouch } from "./captureMouse";
-import { ZIndexManager } from "../../ui/ZIndexManager";
-import { ddMouseDown, ddMouseUp, ddDetect } from "../drag-drop/ops";
-import { isObject } from "../../util/isObject";
-import { isBinding } from "../../data/Binding";
-import { isNumber } from "../../util/isNumber";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
-import { SubscriberList } from "../../util/SubscriberList";
-import { KeyCode } from "../../util/KeyCode";
-
-/*
- Features:
- - renders itself on top of other elements
- - provide resizing capabilities
- - adds positioning hook and ability to position itself in the center of the page
- - provides header, body, and footer elements and updates body's height on resize (move this to Window)
- - stop mouse events from bubbling to parents, but allow keystrokes
- */
-
-export class Overlay extends Container {
-   init() {
-      if (this.center) this.centerX = this.centerY = this.center;
-
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         shadowStyle: {
-            structured: true,
-         },
-         resizable: undefined,
-         draggable: undefined,
-         zIndex: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         inline: this.inline,
-         modal: this.modal,
-         pad: this.pad,
-         resizable: data.resizable,
-         draggable: data.draggable,
-         animate: this.animate,
-         shadow: this.modal || this.backdrop,
-      };
-
-      super.prepareData(context, instance);
-   }
-
-   initInstance(context, instance) {
-      instance.positionChangeSubscribers = new SubscriberList();
-      super.initInstance(context, instance);
-   }
-
-   explore(context, instance) {
-      if (isBinding(this.visible)) {
-         if (!instance.dismiss) {
-            instance.dismiss = () => {
-               if (instance.onBeforeDismiss && instance.onBeforeDismiss() === false) return;
-               instance.set("visible", false);
-            };
-         }
-      } else if (context.options.dismiss) instance.dismiss = context.options.dismiss;
-
-      if (instance.dismiss) {
-         context.push("parentOptions", {
-            ...context.parentOptions,
-            dismiss: instance.dismiss,
-         });
-      }
-
-      if (instance.cache("dismiss", instance.dismiss)) instance.markShouldUpdate(context);
-
-      context.push("parentPositionChangeEvent", instance.positionChangeSubscribers);
-
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      if (instance.dismiss) context.pop("parentOptions");
-      context.pop("parentPositionChangeEvent");
-   }
-
-   render(context, instance, key) {
-      return (
-         <OverlayComponent
-            key={key}
-            instance={instance}
-            subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
-            parentEl={context.options.parentEl}
-         >
-            {this.renderContents(context, instance)}
-         </OverlayComponent>
-      );
-   }
-
-   renderContents(context, instance) {
-      return this.renderChildren(context, instance);
-   }
-
-   overlayDidMount(instance, component) {
-      let { el } = component;
-      if (this.centerX) if (!el.style.left) el.style.left = `${(window.innerWidth - el.offsetWidth) / 2}px`;
-      if (this.centerY)
-         if (!el.style.top) el.style.top = `${Math.max(0, (window.innerHeight - el.offsetHeight) / 2)}px`;
-   }
-
-   overlayDidUpdate(instance, component) {}
-
-   overlayWillUnmount(instance, component) {}
-
-   handleFocusOut(instance, component) {
-      if (this.onFocusOut) instance.invoke("onFocusOut", instance, component);
-
-      if (this.dismissOnFocusOut && instance.dismiss) instance.dismiss();
-   }
-
-   handleKeyDown(e, instance, component) {
-      if (this.onKeyDown && instance.invoke("onKeyDown", e, instance, component) === false) return false;
-
-      if (this.closeOnEscape && e.keyCode == KeyCode.esc && instance.dismiss) {
-         instance.dismiss();
-         e.stopPropagation();
-      }
-   }
-
-   handleMouseLeave(instance, component) {
-      if (this.onMouseLeave) instance.invoke("onMouseLeave", instance, component);
-   }
-
-   handleMouseEnter(instance, component) {
-      if (this.onMouseEnter) instance.invoke("onMouseEnter", instance, component);
-   }
-
-   getOverlayContainer() {
-      return document.body;
-   }
-
-   containerFactory() {
-      let el = document.createElement("div");
-      let container = this.getOverlayContainer();
-      container.appendChild(el);
-      el.style.position = "absolute";
-      if (this.containerStyle) Object.assign(el.style, parseStyle(this.containerStyle));
-      return el;
-   }
-
-   open(storeOrInstance, options) {
-      if (!this.initialized) this.init();
-
-      let el = this.containerFactory();
-      el.style.display = "hidden";
-
-      let beforeDismiss, stop;
-
-      options = {
-         destroyDelay: this.destroyDelay,
-         removeParentDOMElement: true,
-         ...options,
-         parentEl: el,
-         dismiss: () => {
-            if (beforeDismiss && beforeDismiss() === false) return;
-            stop();
-            beforeDismiss = null;
-         },
-         subscribeToBeforeDismiss: (cb) => {
-            beforeDismiss = cb;
-         },
-      };
-      options.name = options.name || "overlay";
-      stop = startAppLoop(el, storeOrInstance, this, options);
-      return options.dismiss;
-   }
-
-   handleMove(e, instance, component) {
-      let { widget } = instance;
-      if (!widget.onMove || instance.invoke("onMove", e, instance, component) !== false) {
-         instance.store.silently(() => {
-            if (isObject(this.style) && isObject(this.style.top) && this.style.top.bind) {
-               instance.store.set(this.style.top.bind, component.el.style.top);
-            }
-
-            if (isObject(this.style) && isObject(this.style.left) && this.style.left.bind) {
-               instance.store.set(this.style.left.bind, component.el.style.left);
-            }
-         });
-      }
-      instance.positionChangeSubscribers.notify();
-   }
-
-   handleResize(e, instance, component) {
-      let { widget } = instance;
-      if (!widget.onResize || instance.invoke("onResize", e, instance, component) !== false) {
-         instance.store.silently(() => {
-            if (isObject(this.style) && isObject(this.style.width) && this.style.width.bind) {
-               instance.store.set(this.style.width.bind, component.el.style.width);
-            }
-
-            if (isObject(this.style) && isObject(this.style.height) && this.style.height.bind) {
-               instance.store.set(this.style.height.bind, component.el.style.height);
-            }
-         });
-      }
-      instance.positionChangeSubscribers.notify();
-   }
-}
-
-Overlay.prototype.styled = true;
-Overlay.prototype.baseClass = "overlay";
-Overlay.prototype.resizable = false;
-Overlay.prototype.resizeWidth = 7;
-Overlay.prototype.center = false;
-Overlay.prototype.centerX = false;
-Overlay.prototype.centerY = false;
-Overlay.prototype.modal = false;
-Overlay.prototype.backdrop = false;
-Overlay.prototype.inline = false;
-Overlay.prototype.autoFocus = false;
-Overlay.prototype.autoFocusFirstChild = false;
-Overlay.prototype.animate = false;
-Overlay.prototype.draggable = false;
-Overlay.prototype.destroyDelay = 0;
-Overlay.prototype.dismissOnFocusOut = false;
-Overlay.prototype.focusable = false;
-Overlay.prototype.containerStyle = null;
-Overlay.prototype.dismissOnPopState = false;
-Overlay.prototype.closeOnEscape = false;
-
-Widget.alias("overlay", Overlay);
-
-//TODO: all el related logic should be moved here
-class OverlayContent extends VDOM.Component {
-   render() {
-      return (
-         <div
-            ref={this.props.onRef}
-            className={this.props.className}
-            style={this.props.style}
-            tabIndex={this.props.tabIndex}
-            onFocus={this.props.onFocus}
-            onBlur={this.props.onBlur}
-            onKeyDown={this.props.onKeyDown}
-            onMouseMove={this.props.onMouseMove}
-            onMouseUp={this.props.onMouseUp}
-            onMouseDown={this.props.onMouseDown}
-            onTouchStart={this.props.onTouchStart}
-            onTouchEnd={this.props.onTouchEnd}
-            onTouchMove={this.props.onTouchMove}
-            onMouseEnter={this.props.onMouseEnter}
-            onMouseLeave={this.props.onMouseLeave}
-            onClick={this.props.onClick}
-            data-focusable-overlay-container={this.props.focusableOverlayContainer}
-         >
-            {this.props.children}
-         </div>
-      );
-   }
-
-   componentDidUpdate() {
-      this.props.onDidUpdate();
-   }
-}
-
-//TODO: This should be called OverlayPortal
-export class OverlayComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {};
-      this.customStyle = {};
-   }
-
-   render() {
-      let { instance, parentEl } = this.props;
-      let { widget } = instance;
-
-      if (widget.inline || parentEl) return this.renderOverlay();
-
-      if (!this.containerEl) {
-         this.ownedEl = widget.containerFactory();
-         this.ownedEl.style.display = "hidden";
-         this.containerEl = this.ownedEl;
-      }
-
-      if (VDOM.DOM.createPortal) return VDOM.DOM.createPortal(this.renderOverlay(), this.containerEl);
-
-      //rendered in componentDidUpdate if portals are not supported
-      return null;
-   }
-
-   renderOverlay() {
-      let { widget, data } = this.props.instance;
-      let { CSS, baseClass } = widget;
-
-      if (!this.onOverlayRef)
-         this.onOverlayRef = (el) => {
-            this.el = el;
-         };
-
-      let content = (
-         <OverlayContent
-            onRef={this.onOverlayRef}
-            className={data.classNames}
-            style={data.style}
-            tabIndex={widget.focusable ? 0 : null}
-            onFocus={this.onFocus.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
-            onMouseDown={this.onMouseDown.bind(this)}
-            onMouseUp={this.onMouseUp.bind(this)}
-            onMouseMove={this.onMouseMove.bind(this)}
-            onTouchStart={this.onMouseDown.bind(this)}
-            onTouchEnd={this.onMouseUp.bind(this)}
-            onTouchMove={this.onMouseMove.bind(this)}
-            onMouseLeave={this.onMouseLeave.bind(this)}
-            onMouseEnter={this.onMouseEnter.bind(this)}
-            onClick={this.onClick.bind(this)}
-            onDidUpdate={this.overlayDidUpdate.bind(this)}
-            focusableOverlayContainer={widget.dismissOnFocusOut}
-         >
-            {this.renderOverlayBody()}
-         </OverlayContent>
-      );
-
-      let result = content;
-
-      if (widget.modal || widget.backdrop) {
-         result = (
-            <div
-               key="shadow"
-               ref={(el) => {
-                  this.shadowEl = el;
-               }}
-               className={CSS.element(baseClass, "shadow", {
-                  animated: this.state.animated,
-                  "animate-enter": this.state.animated && !this.dismissed,
-                  animate: widget.animate,
-               })}
-               style={parseStyle(data.shadowStyle)}
-            >
-               <div
-                  key="backdrop"
-                  className={CSS.element("overlay", "modal-backdrop")}
-                  onClick={this.onBackdropClick.bind(this)}
-               />
-               {content}
-            </div>
-         );
-      }
-
-      return result;
-   }
-
-   renderOverlayBody() {
-      return this.props.children;
-   }
-
-   onFocus() {
-      FocusManager.nudge();
-      this.onFocusIn();
-      if (this.el) oneFocusOut(this, this.el, this.onFocusOut.bind(this));
-   }
-
-   onBlur() {
-      FocusManager.nudge();
-   }
-
-   onFocusIn() {}
-
-   onFocusOut() {
-      let { widget } = this.props.instance;
-      widget.handleFocusOut(this.props.instance, this);
-   }
-
-   onMouseEnter(e) {
-      let { widget } = this.props.instance;
-      widget.handleMouseEnter(this.props.instance, this);
-   }
-
-   onMouseLeave(e) {
-      let { widget } = this.props.instance;
-      widget.handleMouseLeave(this.props.instance, this);
-   }
-
-   onClick(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.onClick) instance.invoke("onClick", e, instance, this);
-   }
-
-   onKeyDown(e) {
-      let { widget } = this.props.instance;
-      widget.handleKeyDown(e, this.props.instance, this);
-   }
-
-   getResizePrefix(e) {
-      let { widget, data } = this.props.instance;
-      if (!data.resizable) return "";
-      let cursor = this.getCursorPos(e);
-      let bounds = getTopLevelBoundingClientRect(this.el);
-      let leftMargin = cursor.clientX - bounds.left;
-      let rightMargin = bounds.right - cursor.clientX;
-      let topMargin = cursor.clientY - bounds.top;
-      let bottomMargin = bounds.bottom - cursor.clientY;
-      let prefix = "";
-
-      if (topMargin >= 0 && topMargin < widget.resizeWidth) prefix += "n";
-      else if (bottomMargin >= 0 && bottomMargin < widget.resizeWidth) prefix += "s";
-
-      if (leftMargin >= 0 && leftMargin < widget.resizeWidth) prefix += "w";
-      else if (rightMargin >= 0 && rightMargin < widget.resizeWidth) prefix += "e";
-      return prefix;
-   }
-
-   onMouseDown(e) {
-      let { instance } = this.props;
-      let { widget, data } = instance;
-
-      if (widget.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
-
-      let prefix = this.getResizePrefix(e);
-      if (prefix) {
-         //e.preventDefault();
-         let rect = getTopLevelBoundingClientRect(this.el);
-         let cursor = this.getCursorPos(e);
-         let captureData = {
-            prefix: prefix,
-            dl: cursor.clientX - rect.left,
-            dt: cursor.clientY - rect.top,
-            dr: cursor.clientX - rect.right,
-            db: cursor.clientY - rect.bottom,
-            rect: rect,
-         };
-         captureMouseOrTouch(e, this.onMouseMove.bind(this), null, captureData, prefix + "-resize");
-      } else if (data.draggable) {
-         ddMouseDown(e);
-      }
-      //e.stopPropagation();
-   }
-
-   onBackdropClick(e) {
-      e.stopPropagation();
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (widget.onBackdropClick) instance.invoke("onBackdropClick", e, instance);
-
-      if (widget.backdrop) {
-         if (instance.dismiss) instance.dismiss();
-      } else if (widget.modal) {
-         FocusManager.focus(this.el);
-      }
-   }
-
-   onMouseUp(e) {
-      ddMouseUp();
-      e.stopPropagation();
-   }
-
-   onMouseMove(e, captureData) {
-      // handle dragging
-      let { instance } = this.props;
-      let { data, widget } = instance;
-      let detect = ddDetect(e);
-      if (data.draggable && detect) {
-         this.startMoveOperation(e);
-         return;
-      }
-
-      if (captureData && captureData.prefix) {
-         let { prefix, rect, dl, dt, dr, db } = captureData;
-         let cursor = this.getCursorPos(e);
-
-         if (prefix.indexOf("w") != -1)
-            this.setCustomStyle({
-               left: cursor.clientX - dl + "px",
-               width: rect.right - cursor.clientX + dl + "px",
-               right: "auto",
-            });
-
-         if (prefix.indexOf("n") != -1)
-            this.setCustomStyle({
-               top: cursor.clientY - dt + "px",
-               height: rect.bottom - cursor.clientY + dt + "px",
-               bottom: "auto",
-            });
-
-         if (prefix.indexOf("e") != -1)
-            this.setCustomStyle({
-               width: cursor.clientX - dr - rect.left + "px",
-               left: `${rect.left}px`,
-               right: "auto",
-            });
-
-         if (prefix.indexOf("s") != -1)
-            this.setCustomStyle({
-               height: cursor.clientY - db - rect.top + "px",
-               top: `${rect.top}px`,
-               bottom: "auto",
-            });
-
-         if (prefix.indexOf("w") >= 0 || prefix.indexOf("n") >= 0) widget.handleMove(e, instance, this);
-
-         widget.handleResize(e, instance, this);
-      } else {
-         let prefix = this.getResizePrefix(e);
-         this.setCustomStyle({
-            cursor: prefix ? prefix + "-resize" : null,
-         });
-      }
-   }
-
-   getCursorPos(e) {
-      let x = (e.touches && e.touches[0]) || e;
-      return {
-         clientX: x.clientX,
-         clientY: x.clientY,
-      };
-   }
-
-   startMoveOperation(e) {
-      if (this.el && !this.getResizePrefix(e)) {
-         e.stopPropagation();
-         let rect = getTopLevelBoundingClientRect(this.el);
-         let cursor = this.getCursorPos(e);
-         let data = {
-            dx: cursor.clientX - rect.left,
-            dy: cursor.clientY - rect.top,
-         };
-
-         captureMouseOrTouch(e, this.onMove.bind(this), null, data, getComputedStyle(e.target).cursor);
-      }
-   }
-
-   onMove(e, data) {
-      if (data) {
-         let cursor = this.getCursorPos(e);
-         e.preventDefault();
-         this.setCustomStyle({
-            left: cursor.clientX - data.dx + "px",
-            top: cursor.clientY - data.dy + "px",
-            right: "auto",
-            bottom: "auto",
-         });
-
-         let { instance } = this.props;
-         let { widget } = instance;
-         widget.handleMove(e, instance, this);
-      }
-   }
-
-   onBeforeDismiss() {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (widget.overlayWillDismiss && widget.overlayWillDismiss(instance, this) === false) return false;
-
-      this.dismissed = true;
-
-      //this.el might be null if visible is set to false
-      if (this.el) {
-         this.el.className = this.getOverlayCssClass();
-
-         // if (widget.animate)
-         //    this.setState({
-         //       animated: false
-         //    });
-      }
-      return true;
-   }
-
-   componentDidMount() {
-      let { instance, subscribeToBeforeDismiss, parentEl } = this.props;
-      let { widget, data } = instance;
-
-      this.setZIndex(isNumber(data.zIndex) ? data.zIndex : ZIndexManager.next());
-
-      this.componentDidUpdate();
-      widget.overlayDidMount(instance, this);
-
-      if (this.containerEl) this.containerEl.style.display = null;
-      else if (parentEl) parentEl.style.display = null;
-
-      let childHasFocus = isSelfOrDescendant(this.el, document.activeElement);
-
-      if (childHasFocus) oneFocusOut(this, this.el, this.onFocusOut.bind(this));
-      else {
-         if (!widget.autoFocusFirstChild || !FocusManager.focusFirstChild(this.el))
-            if (widget.focusable && widget.autoFocus) FocusManager.focus(this.el);
-      }
-
-      instance.onBeforeDismiss = this.onBeforeDismiss.bind(this);
-
-      if (subscribeToBeforeDismiss) {
-         subscribeToBeforeDismiss(instance.onBeforeDismiss);
-      }
-
-      if (widget.animate) {
-         setTimeout(() => {
-            if (!this.unmounting)
-               this.setState({
-                  animated: true,
-               });
-         }, 0);
-      }
-
-      if (widget.dismissOnPopState) {
-         this.onPopState = () => {
-            this.props.instance.dismiss();
-         };
-         window.addEventListener("popstate", this.onPopState);
-      }
-
-      if (this.shadowEl)
-         this.unsubscribeWheelBlock = addEventListenerWithOptions(
-            this.shadowEl,
-            "wheel",
-            (e) => {
-               if (e.shiftKey || e.ctrlKey) return;
-               //check if there is a scrollable element within the shadow or overlay contents
-               //such that its scrollbar is not at the very end
-               let scrollAllowed = false;
-               closest(e.target, (el) => {
-                  if (
-                     (e.deltaY > 0 && el.scrollTop < el.scrollHeight - el.clientHeight) ||
-                     (e.deltaY < 0 && el.scrollTop > 0)
-                  ) {
-                     scrollAllowed = true;
-                     return true;
-                  }
-                  if (el == e.currentTarget) return true;
-               });
-               if (!scrollAllowed) e.preventDefault();
-            },
-            { passive: false }
-         );
-   }
-
-   componentWillUnmount() {
-      if (this.onPopState) window.removeEventListener("popstate", this.onPopState);
-
-      if (this.unsubscribeWheelBlock) this.unsubscribeWheelBlock();
-
-      offFocusOut(this);
-      this.unmounting = true;
-
-      let { widget } = this.props.instance;
-      let { baseClass, CSS } = widget;
-
-      // //we didn't have a chance to call onBeforeDismiss
-      if (this.state.animated && this.el) {
-         this.el.className = this.getOverlayCssClass();
-         if (this.shadowEl)
-            this.shadowEl.className = CSS.element(baseClass, "shadow", {
-               animate: widget.animate,
-               "animate-leave": true,
-            });
-      }
-
-      widget.overlayWillUnmount(this.props.instance, this);
-
-      if (this.ownedEl) {
-         setTimeout(() => {
-            if (this.ownedEl.parentNode) this.ownedEl.parentNode.removeChild(this.ownedEl);
-            this.ownedEl = null;
-         }, widget.destroyDelay);
-      }
-
-      delete this.containerEl;
-   }
-
-   setZIndex(zIndex) {
-      if (this.shadowEl) this.shadowEl.style.zIndex = zIndex;
-      this.setCustomStyle({
-         zIndex: zIndex,
-      });
-   }
-
-   setCustomStyle(style) {
-      Object.assign(this.customStyle, style);
-      if (this.el) Object.assign(this.el.style, this.customStyle);
-   }
-
-   getOverlayStyle() {
-      let { data } = this.props.instance;
-      return {
-         ...data.style,
-         ...this.customStyle,
-      };
-   }
-
-   setCSSState(mods) {
-      let m = { ...this.state.mods };
-      let changed = false;
-      for (let k in mods)
-         if (m[k] !== mods[k]) {
-            m[k] = mods[k];
-            changed = true;
-         }
-
-      if (changed)
-         this.setState({
-            mods: mods,
-         });
-   }
-
-   getOverlayCssClass() {
-      let { data, widget } = this.props.instance;
-      let { CSS } = widget;
-
-      return CSS.expand(
-         data.classNames,
-         CSS.state({
-            ...this.state.mods,
-            animated: this.state.animated && !this.unmounting && !this.dismissed,
-            "animate-enter": this.state.animated && !this.dismissed,
-            "animate-leave": widget.animate && this.dismissed,
-         })
-      );
-   }
-
-   overlayDidUpdate() {
-      if (this.el && !this.dismissed) {
-         let { widget } = this.props.instance;
-         widget.overlayDidUpdate(this.props.instance, this);
-         this.el.className = this.getOverlayCssClass();
-         Object.assign(this.el.style, this.getOverlayStyle());
-      }
-   }
-
-   componentDidUpdate() {
-      if (this.containerEl && !VDOM.DOM.createPortal) {
-         VDOM.DOM.render(this.renderOverlay(), this.containerEl);
-      }
-      this.overlayDidUpdate();
-   }
-}
diff --git a/packages/cx/src/widgets/overlay/Overlay.scss b/packages/cx/src/widgets/overlay/Overlay.scss
index 756e9c6b3..d0166a0a1 100644
--- a/packages/cx/src/widgets/overlay/Overlay.scss
+++ b/packages/cx/src/widgets/overlay/Overlay.scss
@@ -1,7 +1,9 @@
+@use "sass:map";
+
 @mixin cx-overlay($name: "overlay", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    %cxb-overlay {
       left: calc(50% - 250px); //guess
diff --git a/packages/cx/src/widgets/overlay/Overlay.tsx b/packages/cx/src/widgets/overlay/Overlay.tsx
new file mode 100644
index 000000000..ae70449a9
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/Overlay.tsx
@@ -0,0 +1,947 @@
+/** @jsxImportSource react */
+import type { Root } from "cx-react";
+import { isBinding, isBindingObject } from "../../data/Binding";
+import { Store } from "../../data/Store";
+import { startAppLoop } from "../../ui/app/startAppLoop";
+import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { FocusManager, offFocusOut, oneFocusOut } from "../../ui/FocusManager";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, NumberProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM, Widget } from "../../ui/Widget";
+import { ZIndexManager } from "../../ui/ZIndexManager";
+import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
+import { closest, isSelfOrDescendant } from "../../util/DOM";
+import { getActiveElement } from "../../util/getActiveElement";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isDataRecord } from "../../util/isDataRecord";
+import { isNumber } from "../../util/isNumber";
+import { KeyCode } from "../../util/KeyCode";
+import { parseStyle } from "../../util/parseStyle";
+import { SubscriberList } from "../../util/SubscriberList";
+import { ddDetect, ddMouseDown, ddMouseUp } from "../drag-drop/ops";
+import { captureMouseOrTouch, getCursorPos } from "./captureMouse";
+
+/*
+ Features:
+ - renders itself on top of other elements
+ - provide resizing capabilities
+ - adds positioning hook and ability to position itself in the center of the page
+ - provides header, body, and footer elements and updates body's height on resize (move this to Window)
+ - stop mouse events from bubbling to parents, but allow keystrokes
+ */
+
+export interface OverlayConfig extends StyledContainerConfig {
+   /** Set to `true` to enable resizing. */
+   resizable?: BooleanProp;
+
+   /** Set to `true` to enable dragging the overlay. */
+   draggable?: BooleanProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `overlay`. */
+   baseClass?: string;
+
+   /** Width of resize handle area. */
+   resizeWidth?: number;
+
+   /** Set to `true` to initially place the overlay in the center of the page. */
+   center?: boolean;
+
+   /** Set to `true` to initially place the overlay in the center of the page horizontally. */
+   centerX?: boolean;
+
+   /** Set to `true` to initially place the overlay in the center of the page vertically. */
+   centerY?: boolean;
+
+   /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
+   modal?: boolean;
+
+   /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
+   backdrop?: boolean;
+
+   /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
+    * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
+   inline?: boolean;
+
+   /** Set to `true` to automatically focus the top level overlay element. */
+   autoFocus?: boolean;
+
+   /** Set to `true` to automatically focus the first focusable child in the overlay. */
+   autoFocusFirstChild?: boolean;
+
+   /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
+   animate?: boolean;
+
+   /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
+   destroyDelay?: number;
+
+   /** Automatically dismiss overlay if it loses focus. */
+   dismissOnFocusOut?: boolean;
+
+   /** Set to true to make the top level overlay element focusable. */
+   focusable?: boolean;
+
+   /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
+   dismissOnPopState?: boolean;
+
+   /** A callback function which fires while the overlay is being moved around. */
+   onMove?: string | ((e: Event, instance: Instance, component: any) => void);
+
+   /** A callback function which fires while the overlay is being resized. */
+   onResize?: string | ((e: Event, instance: Instance, component: any) => void);
+
+   /** zIndex */
+   zIndex?: NumberProp;
+
+   /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
+   closeOnEscape?: boolean;
+
+   /** Custom CSS styling for the container element. */
+   containerStyle?: string;
+
+   /** Callback for focus out event. */
+   onFocusOut?: string;
+
+   /** Callback for mouse enter event. */
+   onMouseEnter?: string;
+
+   /** Callback for mouse leave event. */
+   onMouseLeave?: string;
+
+   /** Callback for backdrop click. */
+   onBackdropClick?: string;
+
+   /** Callback for mouse down event. */
+   onMouseDown?: string;
+
+   /** Callback for key down event. */
+   onKeyDown?: string;
+
+   /** Callback fired before dismiss. */
+   onBeforeDismiss?: string | (() => boolean);
+
+   /** Callback fired when overlay will dismiss. */
+   overlayWillDismiss?: (instance: Instance, component: any) => boolean;
+
+   /** Callback for click event. */
+   onClick?: string;
+}
+
+export class OverlayInstance<WidgetType extends OverlayBase<any, any> = Overlay> extends Instance<WidgetType> {
+   declare positionChangeSubscribers: SubscriberList;
+   declare dismiss?: () => void;
+   onBeforeDismiss?: () => boolean;
+}
+
+export class OverlayBase<
+   Config extends OverlayConfig = OverlayConfig,
+   InstanceType extends OverlayInstance<any> = OverlayInstance<any>,
+> extends ContainerBase<Config, InstanceType> {
+   // Properties declared here to support prototype assignments
+   declare styled: true;
+   declare baseClass: string;
+   declare resizable?: BooleanProp;
+   declare resizeWidth: number;
+   declare center?: boolean;
+   declare centerX?: boolean;
+   declare centerY?: boolean;
+   declare modal?: boolean;
+   declare backdrop?: boolean;
+   declare inline?: boolean;
+   declare autoFocus?: boolean;
+   declare autoFocusFirstChild?: boolean;
+   declare animate?: boolean;
+   declare draggable?: BooleanProp;
+   declare destroyDelay?: number;
+   declare dismissOnFocusOut?: boolean;
+   declare focusable?: boolean;
+   declare containerStyle?: string;
+   declare dismissOnPopState?: boolean;
+   declare closeOnEscape?: boolean;
+   declare onFocusOut?: string;
+   declare onMouseLeave?: string;
+   declare onMouseEnter?: string;
+   declare onKeyDown?: string;
+   declare onMove?: string | ((e: Event, instance: Instance, component: any) => void);
+   declare onResize?: string | ((e: Event, instance: Instance, component: any) => void);
+   declare onClick?: string;
+   declare onMouseDown?: string;
+   declare onBackdropClick?: string;
+   declare overlayWillDismiss?: (instance: Instance, component: any) => boolean;
+   declare style?: any;
+   declare pad?: boolean;
+
+   init() {
+      if (this.center) this.centerX = this.centerY = this.center;
+
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         shadowStyle: {
+            structured: true,
+         },
+         resizable: undefined,
+         draggable: undefined,
+         zIndex: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: InstanceType): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         inline: this.inline,
+         modal: this.modal,
+         pad: this.pad,
+         resizable: data.resizable,
+         draggable: data.draggable,
+         animate: this.animate,
+         shadow: this.modal || this.backdrop,
+      };
+
+      super.prepareData(context, instance);
+   }
+
+   initInstance(context: RenderingContext, instance: InstanceType): void {
+      instance.positionChangeSubscribers = new SubscriberList();
+      super.initInstance(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: InstanceType): void {
+      if (isBinding(this.visible)) {
+         if (!instance.dismiss) {
+            instance.dismiss = () => {
+               if (instance.onBeforeDismiss && instance.onBeforeDismiss() === false) return;
+               instance.set("visible", false);
+            };
+         }
+      } else if (context.options.dismiss) instance.dismiss = context.options.dismiss;
+
+      if (instance.dismiss) {
+         context.push("parentOptions", {
+            ...context.parentOptions,
+            dismiss: instance.dismiss,
+         });
+      }
+
+      if (instance.cache("dismiss", instance.dismiss)) instance.markShouldUpdate(context);
+
+      context.push("parentPositionChangeEvent", instance.positionChangeSubscribers);
+
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: InstanceType): void {
+      if (instance.dismiss) context.pop("parentOptions");
+      context.pop("parentPositionChangeEvent");
+   }
+
+   render(context: RenderingContext, instance: InstanceType, key: string): any {
+      return (
+         <OverlayComponent
+            key={key}
+            instance={instance}
+            subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
+            parentEl={context.options.parentEl}
+         >
+            {this.renderContents(context, instance)}
+         </OverlayComponent>
+      );
+   }
+
+   renderContents(context: RenderingContext, instance: InstanceType): any {
+      return this.renderChildren(context, instance);
+   }
+
+   overlayDidMount(instance: InstanceType, component: any): void {
+      let { el } = component;
+      if (this.centerX) if (!el.style.left) el.style.left = `${(window.innerWidth - el.offsetWidth) / 2}px`;
+      if (this.centerY)
+         if (!el.style.top) el.style.top = `${Math.max(0, (window.innerHeight - el.offsetHeight) / 2)}px`;
+   }
+
+   overlayDidUpdate(instance: InstanceType, component: any): void {}
+
+   overlayWillUnmount(instance: InstanceType, component: any): void {}
+
+   handleFocusOut(instance: InstanceType, component: any): void {
+      if (this.onFocusOut) instance.invoke("onFocusOut", instance, component);
+
+      if (this.dismissOnFocusOut && instance.dismiss) instance.dismiss();
+   }
+
+   handleKeyDown(e: any, instance: InstanceType, component?: any): void | false {
+      if (this.onKeyDown && instance.invoke("onKeyDown", e, instance, component) === false) return false;
+
+      if (this.closeOnEscape && e.keyCode == KeyCode.esc && instance.dismiss) {
+         instance.dismiss();
+         e.stopPropagation();
+      }
+   }
+
+   handleMouseLeave(instance: InstanceType, component: any): void {
+      if (this.onMouseLeave) instance.invoke("onMouseLeave", instance, component);
+   }
+
+   handleMouseEnter(instance: InstanceType, component: any): void {
+      if (this.onMouseEnter) instance.invoke("onMouseEnter", instance, component);
+   }
+
+   getOverlayContainer(): HTMLElement {
+      return document.body;
+   }
+
+   containerFactory(): HTMLElement {
+      let el = document.createElement("div");
+      let container = this.getOverlayContainer();
+      container.appendChild(el);
+      el.style.position = "absolute";
+      if (this.containerStyle) Object.assign(el.style, parseStyle(this.containerStyle));
+      return el;
+   }
+
+   open(storeOrInstance?: Store | Instance, options?: any): () => void {
+      if (!this.initialized) this.init();
+
+      let el = this.containerFactory();
+      el.style.display = "hidden";
+
+      let beforeDismiss: (() => boolean) | null = null;
+      let stop: any;
+
+      options = {
+         destroyDelay: this.destroyDelay,
+         removeParentDOMElement: true,
+         ...options,
+         parentEl: el,
+         dismiss: () => {
+            if (beforeDismiss && beforeDismiss() === false) return;
+            stop();
+            beforeDismiss = null;
+         },
+         subscribeToBeforeDismiss: (cb: () => boolean) => {
+            beforeDismiss = cb;
+         },
+      };
+      options.name = options.name || "overlay";
+      stop = startAppLoop(el, storeOrInstance, this, options);
+      return options.dismiss;
+   }
+
+   handleMove(e: any, instance: InstanceType, component: any): void {
+      let { widget } = instance;
+      if (!widget.onMove || instance.invoke("onMove", e, instance, component) !== false) {
+         instance.store.silently(() => {
+            if (isDataRecord(this.style) && isBindingObject(this.style.top)) {
+               instance.store.set(this.style.top.bind, component.el.style.top);
+            }
+
+            if (isDataRecord(this.style) && isBindingObject(this.style.left)) {
+               instance.store.set(this.style.left.bind, component.el.style.left);
+            }
+         });
+      }
+      instance.positionChangeSubscribers.notify();
+   }
+
+   handleResize(e: any, instance: InstanceType, component: any): void {
+      let { widget } = instance;
+      if (!widget.onResize || instance.invoke("onResize", e, instance, component) !== false) {
+         instance.store.silently(() => {
+            if (isDataRecord(this.style) && isBindingObject(this.style.width)) {
+               instance.store.set(this.style.width.bind, component.el.style.width);
+            }
+
+            if (isDataRecord(this.style) && isBindingObject(this.style.height)) {
+               instance.store.set(this.style.height.bind, component.el.style.height);
+            }
+         });
+      }
+      instance.positionChangeSubscribers.notify();
+   }
+}
+
+OverlayBase.prototype.styled = true;
+OverlayBase.prototype.baseClass = "overlay";
+OverlayBase.prototype.resizable = false;
+OverlayBase.prototype.resizeWidth = 7;
+OverlayBase.prototype.center = false;
+OverlayBase.prototype.centerX = false;
+OverlayBase.prototype.centerY = false;
+OverlayBase.prototype.modal = false;
+OverlayBase.prototype.backdrop = false;
+OverlayBase.prototype.inline = false;
+OverlayBase.prototype.autoFocus = false;
+OverlayBase.prototype.autoFocusFirstChild = false;
+OverlayBase.prototype.animate = false;
+OverlayBase.prototype.draggable = false;
+OverlayBase.prototype.destroyDelay = 0;
+OverlayBase.prototype.dismissOnFocusOut = false;
+OverlayBase.prototype.focusable = false;
+OverlayBase.prototype.containerStyle = undefined;
+OverlayBase.prototype.dismissOnPopState = false;
+OverlayBase.prototype.closeOnEscape = false;
+
+export class Overlay extends OverlayBase<OverlayConfig, OverlayInstance> {}
+
+Widget.alias("overlay", Overlay);
+
+interface OverlayContentProps {
+   onRef: (el: HTMLDivElement | null) => void;
+   className: string;
+   style: any;
+   tabIndex: number | undefined;
+   onFocus: () => void;
+   onBlur: () => void;
+   onKeyDown: (e: any) => void;
+   onMouseMove: (e: any, captureData?: any) => void;
+   onMouseUp: (e: any) => void;
+   onMouseDown: (e: any) => void;
+   onTouchStart: (e: any) => void;
+   onTouchEnd: (e: any) => void;
+   onTouchMove: (e: any, captureData?: any) => void;
+   onMouseEnter: (e: any) => void;
+   onMouseLeave: (e: any) => void;
+   onClick: (e: any) => void;
+   onDidUpdate: () => void;
+   focusableOverlayContainer?: boolean;
+   children: any;
+}
+
+//TODO: all el related logic should be moved here
+class OverlayContent extends VDOM.Component<OverlayContentProps, {}> {
+   render() {
+      return (
+         <div
+            ref={this.props.onRef}
+            className={this.props.className}
+            style={this.props.style}
+            tabIndex={this.props.tabIndex}
+            onFocus={this.props.onFocus}
+            onBlur={this.props.onBlur}
+            onKeyDown={this.props.onKeyDown}
+            onMouseMove={this.props.onMouseMove}
+            onMouseUp={this.props.onMouseUp}
+            onMouseDown={this.props.onMouseDown}
+            onTouchStart={this.props.onTouchStart}
+            onTouchEnd={this.props.onTouchEnd}
+            onTouchMove={this.props.onTouchMove}
+            onMouseEnter={this.props.onMouseEnter}
+            onMouseLeave={this.props.onMouseLeave}
+            onClick={this.props.onClick}
+            data-focusable-overlay-container={this.props.focusableOverlayContainer}
+         >
+            {this.props.children}
+         </div>
+      );
+   }
+
+   componentDidUpdate() {
+      this.props.onDidUpdate();
+   }
+}
+
+export interface OverlayComponentProps {
+   instance: OverlayInstance;
+   parentEl?: HTMLElement;
+   subscribeToBeforeDismiss?: (cb: () => boolean) => void;
+   children: any;
+}
+
+export interface OverlayComponentState {
+   animated?: boolean;
+   mods?: Record<string, boolean>;
+}
+
+//TODO: This should be called OverlayPortal
+export class OverlayComponent<
+   Props extends OverlayComponentProps = OverlayComponentProps,
+   State extends OverlayComponentState = OverlayComponentState,
+> extends VDOM.Component<Props, State> {
+   declare el?: HTMLElement | null;
+   declare containerEl?: HTMLElement | null;
+   declare ownedEl?: HTMLElement | null;
+   onOverlayRef?: (el: HTMLElement | null) => void;
+   declare shadowEl?: HTMLElement | null;
+   declare dismissed?: boolean;
+   declare unmounting?: boolean;
+   onPopState?: () => void;
+   unsubscribeWheelBlock?: () => void;
+   declare customStyle: any;
+   declare root: Root;
+
+   constructor(props: Props) {
+      super(props);
+      this.state = {} as State;
+      this.customStyle = {};
+   }
+
+   render() {
+      let { instance, parentEl } = this.props;
+      let { widget } = instance;
+
+      if (widget.inline || parentEl) return this.renderOverlay();
+
+      if (!this.containerEl) {
+         this.ownedEl = widget.containerFactory();
+         this.ownedEl.style.display = "hidden";
+         this.containerEl = this.ownedEl;
+      }
+
+      if (VDOM.DOM.createPortal) return VDOM.DOM.createPortal(this.renderOverlay(), this.containerEl);
+
+      //rendered in componentDidUpdate if portals are not supported
+      return null;
+   }
+
+   renderOverlay() {
+      let { widget, data } = this.props.instance;
+      let { CSS, baseClass } = widget;
+
+      if (!this.onOverlayRef)
+         this.onOverlayRef = (el) => {
+            this.el = el;
+         };
+
+      let content = (
+         <OverlayContent
+            onRef={this.onOverlayRef}
+            className={data.classNames}
+            style={data.style}
+            tabIndex={widget.focusable ? 0 : undefined}
+            onFocus={this.onFocus.bind(this)}
+            onBlur={this.onBlur.bind(this)}
+            onKeyDown={this.onKeyDown.bind(this)}
+            onMouseDown={this.onMouseDown.bind(this)}
+            onMouseUp={this.onMouseUp.bind(this)}
+            onMouseMove={this.onMouseMove.bind(this)}
+            onTouchStart={this.onMouseDown.bind(this)}
+            onTouchEnd={this.onMouseUp.bind(this)}
+            onTouchMove={this.onMouseMove.bind(this)}
+            onMouseLeave={this.onMouseLeave.bind(this)}
+            onMouseEnter={this.onMouseEnter.bind(this)}
+            onClick={this.onClick.bind(this)}
+            onDidUpdate={this.overlayDidUpdate.bind(this)}
+            focusableOverlayContainer={widget.dismissOnFocusOut}
+         >
+            {this.renderOverlayBody()}
+         </OverlayContent>
+      );
+
+      let result = content;
+
+      if (widget.modal || widget.backdrop) {
+         result = (
+            <div
+               key="shadow"
+               ref={(el) => {
+                  this.shadowEl = el;
+               }}
+               className={CSS.element(baseClass, "shadow", {
+                  animated: this.state.animated,
+                  "animate-enter": this.state.animated && !this.dismissed,
+                  animate: widget.animate,
+               })}
+               style={parseStyle(data.shadowStyle)}
+            >
+               <div
+                  key="backdrop"
+                  className={CSS.element("overlay", "modal-backdrop")}
+                  onClick={this.onBackdropClick.bind(this)}
+               />
+               {content}
+            </div>
+         );
+      }
+
+      return result;
+   }
+
+   renderOverlayBody() {
+      return this.props.children;
+   }
+
+   onFocus() {
+      FocusManager.nudge();
+      this.onFocusIn();
+      if (this.el) oneFocusOut(this, this.el, this.onFocusOut.bind(this));
+   }
+
+   onBlur() {
+      FocusManager.nudge();
+   }
+
+   onFocusIn() {}
+
+   onFocusOut() {
+      let { widget } = this.props.instance;
+      widget.handleFocusOut(this.props.instance, this);
+   }
+
+   onMouseEnter(e: React.MouseEvent) {
+      let { widget } = this.props.instance;
+      widget.handleMouseEnter(this.props.instance, this);
+   }
+
+   onMouseLeave(e: React.MouseEvent) {
+      let { widget } = this.props.instance;
+      widget.handleMouseLeave(this.props.instance, this);
+   }
+
+   onClick(e: React.MouseEvent) {
+      let { instance } = this.props;
+      let { widget } = instance;
+      if (widget.onClick) instance.invoke("onClick", e, instance, this);
+   }
+
+   onKeyDown(e: React.KeyboardEvent) {
+      let { widget } = this.props.instance;
+      widget.handleKeyDown(e, this.props.instance, this);
+   }
+
+   getResizePrefix(e: MouseEvent | React.MouseEvent | React.TouchEvent) {
+      let { widget, data } = this.props.instance;
+      if (!data.resizable) return "";
+      let cursor = getCursorPos(e);
+      let bounds = getTopLevelBoundingClientRect(this.el!);
+      let leftMargin = cursor.clientX - bounds.left;
+      let rightMargin = bounds.right - cursor.clientX;
+      let topMargin = cursor.clientY - bounds.top;
+      let bottomMargin = bounds.bottom - cursor.clientY;
+      let prefix = "";
+
+      if (topMargin >= 0 && topMargin < widget.resizeWidth) prefix += "n";
+      else if (bottomMargin >= 0 && bottomMargin < widget.resizeWidth) prefix += "s";
+
+      if (leftMargin >= 0 && leftMargin < widget.resizeWidth) prefix += "w";
+      else if (rightMargin >= 0 && rightMargin < widget.resizeWidth) prefix += "e";
+      return prefix;
+   }
+
+   onMouseDown(e: React.MouseEvent | React.TouchEvent) {
+      let { instance } = this.props;
+      let { widget, data } = instance;
+
+      if (widget.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
+
+      let prefix = this.getResizePrefix(e);
+      if (prefix) {
+         //e.preventDefault();
+         let rect = getTopLevelBoundingClientRect(this.el!);
+         let cursor = getCursorPos(e);
+         let captureData = {
+            prefix: prefix,
+            dl: cursor.clientX - rect.left,
+            dt: cursor.clientY - rect.top,
+            dr: cursor.clientX - rect.right,
+            db: cursor.clientY - rect.bottom,
+            rect: rect,
+         };
+         captureMouseOrTouch(e, this.onMouseMove.bind(this), undefined, captureData, prefix + "-resize");
+      } else if (data.draggable) {
+         ddMouseDown(e);
+      }
+      //e.stopPropagation();
+   }
+
+   onBackdropClick(e: React.MouseEvent) {
+      e.stopPropagation();
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (widget.onBackdropClick) instance.invoke("onBackdropClick", e, instance);
+
+      if (widget.backdrop) {
+         if (instance.dismiss) instance.dismiss();
+      } else if (widget.modal) {
+         FocusManager.focus(this.el!);
+      }
+   }
+
+   onMouseUp(e: React.MouseEvent | React.TouchEvent) {
+      ddMouseUp();
+      e.stopPropagation();
+   }
+
+   onMouseMove(e: MouseEvent, captureData: any) {
+      // handle dragging
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      let detect = ddDetect(e);
+      if (data.draggable && detect) {
+         this.startMoveOperation(e);
+         return;
+      }
+
+      if (captureData && captureData.prefix) {
+         let { prefix, rect, dl, dt, dr, db } = captureData;
+         let cursor = getCursorPos(e);
+
+         if (prefix.indexOf("w") != -1)
+            this.setCustomStyle({
+               left: cursor.clientX - dl + "px",
+               width: rect.right - cursor.clientX + dl + "px",
+               right: "auto",
+            });
+
+         if (prefix.indexOf("n") != -1)
+            this.setCustomStyle({
+               top: cursor.clientY - dt + "px",
+               height: rect.bottom - cursor.clientY + dt + "px",
+               bottom: "auto",
+            });
+
+         if (prefix.indexOf("e") != -1)
+            this.setCustomStyle({
+               width: cursor.clientX - dr - rect.left + "px",
+               left: `${rect.left}px`,
+               right: "auto",
+            });
+
+         if (prefix.indexOf("s") != -1)
+            this.setCustomStyle({
+               height: cursor.clientY - db - rect.top + "px",
+               top: `${rect.top}px`,
+               bottom: "auto",
+            });
+
+         if (prefix.indexOf("w") >= 0 || prefix.indexOf("n") >= 0) widget.handleMove(e, instance, this);
+
+         widget.handleResize(e, instance, this);
+      } else {
+         let prefix = this.getResizePrefix(e);
+         this.setCustomStyle({
+            cursor: prefix ? prefix + "-resize" : undefined,
+         });
+      }
+   }
+
+   startMoveOperation(e: MouseEvent | React.MouseEvent | React.TouchEvent) {
+      if (this.el && !this.getResizePrefix(e)) {
+         e.stopPropagation();
+         let rect = getTopLevelBoundingClientRect(this.el);
+         let cursor = getCursorPos(e);
+         let data = {
+            dx: cursor.clientX - rect.left,
+            dy: cursor.clientY - rect.top,
+         };
+
+         captureMouseOrTouch(
+            e,
+            this.onMove.bind(this),
+            undefined,
+            data,
+            getComputedStyle(e.target as HTMLElement).cursor,
+         );
+      }
+   }
+
+   onMove(e: MouseEvent, data: any) {
+      if (data) {
+         let cursor = getCursorPos(e);
+         e.preventDefault();
+         this.setCustomStyle({
+            left: cursor.clientX - data.dx + "px",
+            top: cursor.clientY - data.dy + "px",
+            right: "auto",
+            bottom: "auto",
+         });
+
+         let { instance } = this.props;
+         let { widget } = instance;
+         widget.handleMove(e, instance, this);
+      }
+   }
+
+   onBeforeDismiss() {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (widget.overlayWillDismiss && widget.overlayWillDismiss(instance, this) === false) return false;
+
+      this.dismissed = true;
+
+      //this.el might be null if visible is set to false
+      if (this.el) {
+         this.el.className = this.getOverlayCssClass();
+
+         // if (widget.animate)
+         //    this.setState({
+         //       animated: false
+         //    });
+      }
+      return true;
+   }
+
+   componentDidMount() {
+      let { instance, subscribeToBeforeDismiss, parentEl } = this.props;
+      let { widget, data } = instance;
+
+      this.setZIndex(isNumber(data.zIndex) ? data.zIndex : ZIndexManager.next());
+
+      this.componentDidUpdate();
+      widget.overlayDidMount(instance, this);
+
+      if (this.containerEl) this.containerEl.style.removeProperty("display");
+      else if (parentEl) parentEl.style.removeProperty("display");
+
+      let childHasFocus = isSelfOrDescendant(this.el!, getActiveElement());
+
+      if (childHasFocus) oneFocusOut(this, this.el, this.onFocusOut.bind(this));
+      else {
+         if (!widget.autoFocusFirstChild || !FocusManager.focusFirstChild(this.el!))
+            if (widget.focusable && widget.autoFocus) FocusManager.focus(this.el!);
+      }
+
+      instance.onBeforeDismiss = this.onBeforeDismiss.bind(this);
+
+      if (subscribeToBeforeDismiss) {
+         subscribeToBeforeDismiss(instance.onBeforeDismiss);
+      }
+
+      if (widget.animate) {
+         setTimeout(() => {
+            if (!this.unmounting)
+               this.setState({
+                  animated: true,
+               });
+         }, 0);
+      }
+
+      if (widget.dismissOnPopState) {
+         this.onPopState = () => {
+            this.props.instance.dismiss?.();
+         };
+         window.addEventListener("popstate", this.onPopState);
+      }
+
+      if (this.shadowEl)
+         this.unsubscribeWheelBlock = addEventListenerWithOptions(
+            this.shadowEl,
+            "wheel",
+            (e) => {
+               if (e.shiftKey || e.ctrlKey) return;
+               //check if there is a scrollable element within the shadow or overlay contents
+               //such that its scrollbar is not at the very end
+               let scrollAllowed = false;
+               closest(e.target as Element, (el) => {
+                  if (
+                     (e.deltaY > 0 && el.scrollTop < el.scrollHeight - el.clientHeight) ||
+                     (e.deltaY < 0 && el.scrollTop > 0)
+                  ) {
+                     scrollAllowed = true;
+                     return true;
+                  }
+                  return el == e.currentTarget;
+               });
+               if (!scrollAllowed) e.preventDefault();
+            },
+            { passive: false },
+         );
+   }
+
+   componentWillUnmount() {
+      if (this.onPopState) window.removeEventListener("popstate", this.onPopState);
+
+      if (this.unsubscribeWheelBlock) this.unsubscribeWheelBlock();
+
+      offFocusOut(this);
+      this.unmounting = true;
+
+      let { widget } = this.props.instance;
+      let { baseClass, CSS } = widget;
+
+      // //we didn't have a chance to call onBeforeDismiss
+      if (this.state.animated && this.el) {
+         this.el.className = this.getOverlayCssClass();
+         if (this.shadowEl)
+            this.shadowEl.className = CSS.element(baseClass, "shadow", {
+               animate: widget.animate,
+               "animate-leave": true,
+            });
+      }
+
+      widget.overlayWillUnmount(this.props.instance, this);
+
+      if (this.ownedEl) {
+         setTimeout(() => {
+            this.root?.unmount();
+            if (this.ownedEl?.parentNode) this.ownedEl.parentNode.removeChild(this.ownedEl);
+            this.ownedEl = null;
+         }, widget.destroyDelay);
+      }
+
+      delete this.containerEl;
+   }
+
+   setZIndex(zIndex: number) {
+      if (this.shadowEl) this.shadowEl.style.zIndex = zIndex.toString();
+      this.setCustomStyle({
+         zIndex: zIndex.toString(),
+      });
+   }
+
+   setCustomStyle(style: Partial<CSSStyleDeclaration>) {
+      Object.assign(this.customStyle, style);
+      if (this.el) Object.assign(this.el.style, this.customStyle);
+   }
+
+   getOverlayStyle() {
+      let { data } = this.props.instance;
+      return {
+         ...data.style,
+         ...this.customStyle,
+      };
+   }
+
+   setCSSState(mods: Record<string, boolean>) {
+      let m: Record<string, boolean> = { ...this.state.mods };
+      let changed = false;
+      for (let k in mods)
+         if (m[k] !== mods[k]) {
+            m[k] = mods[k];
+            changed = true;
+         }
+
+      if (changed)
+         this.setState({
+            mods: mods,
+         });
+   }
+
+   getOverlayCssClass() {
+      let { data, widget } = this.props.instance;
+      let { CSS } = widget;
+
+      return (
+         CSS.expand(
+            data.classNames,
+            CSS.state({
+               ...this.state.mods,
+               animated: this.state.animated && !this.unmounting && !this.dismissed,
+               "animate-enter": this.state.animated && !this.dismissed,
+               "animate-leave": widget.animate && this.dismissed,
+            }),
+         ) ?? ""
+      );
+   }
+
+   overlayDidUpdate() {
+      if (this.el && !this.dismissed) {
+         let { widget } = this.props.instance;
+         widget.overlayDidUpdate(this.props.instance, this);
+         this.el.className = this.getOverlayCssClass();
+         Object.assign(this.el.style, this.getOverlayStyle());
+      }
+   }
+
+   componentDidUpdate() {
+      if (this.containerEl && !VDOM.DOM.createPortal) {
+         this.root = VDOM.DOM.createRoot(this.containerEl);
+         this.root.render(this.renderOverlay());
+      }
+      this.overlayDidUpdate();
+   }
+}
diff --git a/packages/cx/src/widgets/overlay/Toast.d.ts b/packages/cx/src/widgets/overlay/Toast.d.ts
deleted file mode 100644
index 4166575f2..000000000
--- a/packages/cx/src/widgets/overlay/Toast.d.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as Cx from '../../core';
-import { OverlayProps } from './Overlay';
-
-interface ToastProps extends OverlayProps {
-
-   /** Value of timeout in milliseconds after which the toast is automatically dismissed. */
-   timeout?: Cx.NumberProp,
-   
-   message?: string,
-
-   /** List of child elements. */
-   items?: Cx.RecordsProp,
-
-   /** Add default padding. Default is `true`. */
-   pad?: boolean,
-   
-   /** Base CSS class. Default is `toast`. */
-   baseClass?: string,
-
-   /** 
-    * Defines where the toast will be placed. 
-    * Supported values are `top`, `right`, `bottom` and `left`. Default value is `top`. 
-    */
-   placement?: string,
-
-   styled?: boolean
-   
-}
-
-export class Toast extends Cx.Widget<ToastProps> {}
diff --git a/packages/cx/src/widgets/overlay/Toast.js b/packages/cx/src/widgets/overlay/Toast.js
deleted file mode 100644
index 9aeb4c655..000000000
--- a/packages/cx/src/widgets/overlay/Toast.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import {Overlay} from './Overlay';
-import {Text} from '../../ui/Text';
-
-export class Toast extends Overlay {
-
-   init() {
-      if (this.message)
-         this.items = {
-            type: Text,
-            value: this.message
-         };
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         timeout: undefined
-      })
-   }
-
-   prepareData(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pad: this.pad
-      };
-      super.prepareData(context, instance);
-   }
-
-   overlayDidUpdate(instance, component) {
-      let el = component.containerEl || component.props.parentEl;
-      if (component.state.animated) {
-         el.style.height = `${component.el.offsetHeight}px`;
-         el.classList.add(this.CSS.state('live'));
-      }
-   }
-
-   overlayDidMount(instance, component) {
-      let {data} = instance;
-      if (data.timeout > 0) {
-         component.timeoutTimer = setTimeout(() => {
-            instance.dismiss();
-         }, data.timeout);
-      }
-   }
-
-   overlayWillDismiss(instance, component) {
-      let el = component.containerEl || component.props.parentEl;
-      el.style.height = 0;
-      el.classList.remove(this.CSS.state('live'));
-   }
-
-   overlayWillUnmount(instance, component) {
-      let el = component.containerEl || component.props.parentEl;
-      el.style.height = 0;
-      el.classList.remove(this.CSS.state('live'));
-      if (component.timeoutTimer)
-         clearTimeout(component.timeoutTimer)
-   }
-
-   containerFactory() {
-      let el = document.createElement('div');
-      el.className = this.CSS.element('toaster', 'item');
-      let placement = this.placement || 'top';
-      let toaster = getToaster(placement);
-      toaster.el.className = this.CSS.block('toaster', null, {
-         [`placement-${placement}`]: true
-      });
-      toaster.el.insertBefore(el, toaster.el.firstChild);
-      return el;
-   }
-}
-
-const toasters = {};
-
-function getToaster(placement) {
-   let t = toasters[placement];
-   if (!t) {
-      let el = document.createElement('div');
-      document.body.appendChild(el);
-      t = toasters[placement] = {
-         el
-      };
-   }
-   return t;
-}
-
-Toast.prototype.styled = true;
-Toast.prototype.pad = true;
-Toast.prototype.animate = true;
-Toast.prototype.baseClass = 'toast';
-Toast.prototype.placement = 'top';
-Toast.prototype.destroyDelay = 300;
\ No newline at end of file
diff --git a/packages/cx/src/widgets/overlay/Toast.scss b/packages/cx/src/widgets/overlay/Toast.scss
index c165bc556..f323b08d4 100644
--- a/packages/cx/src/widgets/overlay/Toast.scss
+++ b/packages/cx/src/widgets/overlay/Toast.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 
 @mixin cx-toast(
    $name: 'toast',
@@ -5,10 +6,10 @@
    $mods: $cx-toast-mods
 ) {
 
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       color: $cx-default-toast-color;
@@ -96,9 +97,9 @@
    $besm: $cx-besm
 ) {
 
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       position: fixed;
diff --git a/packages/cx/src/widgets/overlay/Toast.ts b/packages/cx/src/widgets/overlay/Toast.ts
new file mode 100644
index 000000000..b18d10afd
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/Toast.ts
@@ -0,0 +1,111 @@
+import { OverlayBase, OverlayConfig, OverlayInstance } from "./Overlay";
+import { Text } from "../../ui/Text";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, StringProp, RecordsProp } from "../../ui/Prop";
+
+export interface ToastConfig extends OverlayConfig {
+   /** Value of timeout in milliseconds after which the toast is automatically dismissed. */
+   timeout?: NumberProp;
+
+   message?: StringProp;
+
+   /** Add default padding. Default is `true`. */
+   pad?: boolean;
+
+   /**
+    * Defines where the toast will be placed.
+    * Supported values are `top`, `right`, `bottom` and `left`. Default value is `top`.
+    */
+   placement?: string;
+}
+
+export class Toast extends OverlayBase<ToastConfig, OverlayInstance> {
+   declare message?: StringProp;
+   declare pad?: boolean;
+   declare placement?: string;
+
+   init(): void {
+      if (this.message)
+         this.items = {
+            type: Text,
+            value: this.message,
+         } as any;
+      super.init();
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         timeout: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: OverlayInstance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pad: this.pad,
+      };
+      super.prepareData(context, instance);
+   }
+
+   overlayDidUpdate(instance: OverlayInstance, component: any): void {
+      let el = component.containerEl || component.props.parentEl;
+      if (component.state.animated) {
+         el.style.height = `${component.el.offsetHeight}px`;
+         el.classList.add(this.CSS.state("live"));
+      }
+   }
+
+   overlayDidMount(instance: OverlayInstance, component: any): void {
+      let { data } = instance;
+      if (data.timeout > 0) {
+         component.timeoutTimer = setTimeout(() => {
+            instance.dismiss!();
+         }, data.timeout);
+      }
+   }
+
+   overlayWillUnmount(instance: OverlayInstance, component: any): void {
+      let el = component.containerEl || component.props.parentEl;
+      el.style.height = 0;
+      el.classList.remove(this.CSS.state("live"));
+      if (component.timeoutTimer) clearTimeout(component.timeoutTimer);
+   }
+
+   containerFactory(): HTMLElement {
+      let el = document.createElement("div");
+      el.className = this.CSS.element("toaster", "item");
+      let placement = this.placement || "top";
+      let toaster = getToaster(placement);
+      toaster.el.className = this.CSS.block("toaster", null, {
+         [`placement-${placement}`]: true,
+      });
+      toaster.el.insertBefore(el, toaster.el.firstChild);
+      return el;
+   }
+}
+
+interface ToasterInfo {
+   el: HTMLElement;
+}
+
+const toasters: Record<string, ToasterInfo> = {};
+
+function getToaster(placement: string): ToasterInfo {
+   let t = toasters[placement];
+   if (!t) {
+      let el = document.createElement("div");
+      document.body.appendChild(el);
+      t = toasters[placement] = {
+         el,
+      };
+   }
+   return t;
+}
+
+Toast.prototype.styled = true;
+Toast.prototype.pad = true;
+Toast.prototype.animate = true;
+Toast.prototype.baseClass = "toast";
+Toast.prototype.placement = "top";
+Toast.prototype.destroyDelay = 300;
diff --git a/packages/cx/src/widgets/overlay/Tooltip.d.ts b/packages/cx/src/widgets/overlay/Tooltip.d.ts
deleted file mode 100644
index 44da36782..000000000
--- a/packages/cx/src/widgets/overlay/Tooltip.d.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as Cx from '../../core';
-import { DropdownProps } from './Dropdown';
-
-export interface TooltipProps extends DropdownProps {
-
-   /** Text to be displayed inside the tooltip. */
-   text?: Cx.StringProp,
-
-   /** Text to be displayed in the header. */
-   title?: Cx.StringProp,
-
-   /** 
-    * Set to true to make the tooltip always visible. 
-    * This is useful e.g. in product tours, when instructions need to be shown, even if the mouse pointer is not around. 
-    */
-   alwaysVisible?: Cx.BooleanProp,
-   
-   /** Base CSS class to be applied to the field. Defaults to 'tooltip'. */
-   baseClass?: string,
-
-   /** 
-    * Set to `true` to append the set `animate` state after the initial render.
-    *  Appended CSS class may be used to add show/hide animations.
-    */
-   animate?: boolean,
-   
-   /** Set to `true` to make the tooltip follow the mouse movement. */
-   trackMouse?: boolean,
-
-   trackMouseX?: boolean,
-   trackMouseY?: boolean,
-
-   /** 
-    * This property controls how tooltips behave on touch events. 
-    * Default value is `toggle` which means that the tooltip is shown on first tap and closed on the second tap. 
-    * Use `ignore` to skip showing tooltips on touch events. 
-    */
-   touchBehavior?: string,
-
-
-   /**
-    * Set to true to rely on browser's window mousemove event for getting mouse coordinates
-    * instead of using the element that tooltip is attached to.
-    */
-   globalMouseTracking?: boolean
-}
-
-export class Tooltip extends Cx.Widget<TooltipProps> {}
-
-export function enableTooltips();
diff --git a/packages/cx/src/widgets/overlay/Tooltip.js b/packages/cx/src/widgets/overlay/Tooltip.js
deleted file mode 100644
index 8739b5612..000000000
--- a/packages/cx/src/widgets/overlay/Tooltip.js
+++ /dev/null
@@ -1,308 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Dropdown } from "./Dropdown";
-import { debug, tooltipsFlag } from "../../util/Debug";
-import { isNonEmptyArray } from "../../util/isNonEmptyArray";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { shallowEquals } from "../../util/shallowEquals";
-import { isSelector } from "../../data/isSelector";
-import { wireTooltipOps } from "./tooltip-ops";
-import { getCursorPos } from "./captureMouse";
-import { RenderingContext } from "../../ui/RenderingContext";
-
-export class Tooltip extends Dropdown {
-   declareData() {
-      super.declareData(...arguments, {
-         text: undefined,
-         title: undefined,
-         alwaysVisible: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         "mouse-trap": this.mouseTrap,
-      };
-      super.prepareData(context, instance);
-   }
-
-   renderContents(context, instance) {
-      let { data } = instance;
-      let { CSS, baseClass } = this;
-      return [
-         data.title && (
-            <div key="title" className={CSS.element(baseClass, "title")}>
-               {data.title}
-            </div>
-         ),
-         data.text,
-         ...super.renderContents(context, instance),
-      ];
-   }
-
-   initInstance(context, instance) {
-      super.initInstance(context, instance);
-
-      if (this.trackMouseX || this.trackMouseY) {
-         instance.trackMouse = (e) => {
-            let pos = getCursorPos(e);
-            instance.mousePosition = {
-               x: pos.clientX,
-               y: pos.clientY,
-            };
-            if (instance.tooltipComponent) this.updateDropdownPosition(instance, instance.tooltipComponent);
-         };
-      }
-   }
-
-   overlayDidMount(instance, component) {
-      instance.tooltipComponent = component;
-
-      super.overlayDidMount(instance, component);
-
-      instance.parentValidityCheckTimer = setInterval(() => {
-         if (!this.relatedElement.ownerDocument.body.contains(this.relatedElement)) {
-            if (instance.dismissTooltip) {
-               instance.dismissTooltip();
-               instance.dismissTooltip = null;
-            }
-         } else {
-            if (instance.tooltipComponent) this.updateDropdownPosition(instance, instance.tooltipComponent);
-         }
-      }, 500);
-
-      if (instance.widget.globalMouseTracking && instance.trackMouse) {
-         document.addEventListener("mousemove", instance.trackMouse);
-      }
-   }
-
-   overlayWillUnmount(instance, component) {
-      clearInterval(instance.parentValidityCheckTimer);
-      super.overlayWillUnmount(instance, component);
-      instance.tooltipComponent = null;
-
-      if (instance.widget.globalMouseTracking && instance.trackMouse) {
-         document.removeEventListener("mousemove", instance.trackMouse);
-      }
-   }
-
-   handleMouseEnter(instance, component) {
-      instance.mouseOverTooltip = true;
-      super.handleMouseEnter(instance, component);
-   }
-
-   handleMouseLeave(instance, component) {
-      instance.mouseOverTooltip = false;
-      if (this.mouseTrap) this.handleMouseLeavesParent(instance);
-      super.handleMouseLeave(instance, component);
-   }
-
-   handleMouseLeavesParent(instance) {
-      let timeout = this.mouseTrap ? 200 : 0;
-      setTimeout(() => {
-         if (!instance.mouseOverTarget && !(this.mouseTrap && instance.mouseOverTooltip)) this.dismissTooltip(instance);
-      }, timeout);
-   }
-
-   dismissTooltip(instance) {
-      if (!instance || !instance.dismissTooltip) return;
-      if (
-         instance.data &&
-         instance.data.alwaysVisible &&
-         this.relatedElement.ownerDocument.body.contains(this.relatedElement)
-      )
-         return;
-      instance.dismissTooltip();
-      instance.dismissTooltip = null;
-   }
-
-   dismissAfterScroll(data, instance) {
-      this.dismissTooltip(instance);
-   }
-
-   checkVisible(context, instance, data) {
-      if (!isNonEmptyArray(this.items) && !data.title && !data.text) return false;
-      return super.checkVisible(context, instance, data);
-   }
-}
-
-Widget.alias("tooltip", Tooltip);
-
-Tooltip.prototype.baseClass = "tooltip";
-Tooltip.prototype.offset = 8;
-Tooltip.prototype.placementOrder =
-   "right up down left up-right up-left right-up right-down down-right down-left left-up left-down";
-Tooltip.prototype.animate = true;
-Tooltip.prototype.destroyDelay = 300;
-Tooltip.prototype.createDelay = 200;
-Tooltip.prototype.matchWidth = false;
-Tooltip.prototype.trackMouse = false;
-Tooltip.prototype.trackMouseX = false;
-Tooltip.prototype.trackMouseY = false;
-Tooltip.prototype.touchFriendly = false; //rename to positioningMode
-Tooltip.prototype.touchBehavior = "toggle";
-Tooltip.prototype.arrow = true;
-Tooltip.prototype.alwaysVisible = false;
-Tooltip.prototype.globalMouseTracking = false;
-
-export function getTooltipInstance(e, parentInstance, tooltip, options = {}) {
-   let target = options.target || (e && e.currentTarget) || e;
-
-   debug(tooltipsFlag, "mouse-move", target, parentInstance);
-
-   let name = options.tooltipName || "tooltip";
-
-   if (!parentInstance.tooltips) parentInstance.tooltips = {};
-   let tooltipInstance = parentInstance.tooltips[name];
-
-   //no tooltips on disabled elements
-   if (parentInstance?.data.disabled) {
-      if (tooltipInstance && tooltipInstance.dismissTooltip) tooltipInstance.dismissTooltip();
-      return;
-   }
-
-   if (
-      tooltipInstance &&
-      (tooltipInstance.widget.relatedElement != target ||
-         !shallowEquals(tooltipInstance.config, tooltip) ||
-         tooltipInstance.store.store != parentInstance.store)
-   ) {
-      if (tooltipInstance.dismissTooltip) tooltipInstance.dismissTooltip();
-      delete parentInstance.tooltips[name];
-      tooltipInstance = null;
-   }
-
-   if (!tooltip || !target) return;
-
-   if (!tooltipInstance) {
-      let config = tooltip;
-      if (isSelector(tooltip)) {
-         config = {
-            text: tooltip,
-         };
-      }
-      let tooltipWidget = Tooltip.create({ relatedElement: target }, config);
-      let store = new ReadOnlyDataView({
-         store: parentInstance.store,
-      });
-      tooltipInstance = parentInstance.tooltips[name] = parentInstance.getDetachedChild(tooltipWidget, name, store);
-      tooltipInstance.config = tooltip;
-      tooltipInstance.tooltipName = name;
-      tooltipInstance.init(new RenderingContext());
-
-      if (tooltip.alwaysVisible || tooltip.trackMouse || tooltip.trackMouseX || tooltip.trackMouseY) {
-         tooltipInstance.data = tooltipInstance.dataSelector(store);
-      }
-   }
-
-   return tooltipInstance;
-}
-
-function tooltipMouseMove(e, parentInstance, tooltip, options = {}) {
-   let instance = getTooltipInstance(e, parentInstance, tooltip, options);
-   if (!instance) return;
-
-   if (isTouchEvent() && instance.widget.touchBehavior == "ignore") return false;
-
-   let dirty = !shallowEquals(options.data, instance.store.data);
-
-   instance.store.setData(options.data);
-   instance.mouseOverTarget = true;
-
-   if (!instance.dismissTooltip) {
-      let canceled = false;
-      let dismiss = () => {
-         canceled = true;
-      };
-      let unsubscribeDismiss = instance.parent.subscribeOnDestroy(() => {
-         dismiss();
-      });
-      instance.dismissTooltip = () => {
-         if (instance.parent.tooltips[instance.tooltipName] === instance)
-            delete instance.parent.tooltips[instance.tooltipName];
-         unsubscribeDismiss();
-         dismiss();
-         instance.dismissTooltip = null;
-      };
-      instance.lastClickTime = Date.now();
-      setTimeout(() => {
-         let { relatedElement } = instance.widget;
-         if (!canceled && instance.mouseOverTarget && relatedElement.ownerDocument.body.contains(relatedElement)) {
-            dismiss = instance.widget.open(instance, {
-               onPipeUpdate: (cb) => {
-                  instance.update = cb;
-               },
-            });
-         } else {
-            instance.dismissTooltip = null;
-         }
-      }, instance.widget.createDelay);
-   } else {
-      if (isTouchEvent() && instance.widget.touchBehavior == "toggle") {
-         // ios fires mousemove events after touchend
-         if (Date.now() - (instance.lastClickTime ?? 0) > 50) {
-            instance.lastClickTime = Date.now();
-            instance.dismissTooltip();
-            instance.dismissTooltip = null;
-         }
-      } else if (dirty && instance.update) instance.update();
-   }
-
-   if (instance.trackMouse && e && e.target) instance.trackMouse(e);
-}
-
-function tooltipMouseLeave(e, parentInstance, tooltip, options) {
-   let instance = getTooltipInstance(e, parentInstance, tooltip, options);
-
-   // do not process leave events twice even if called multiple times
-   if (instance && instance.mouseOverTarget) {
-      instance.mouseOverTarget = false;
-      instance.widget.handleMouseLeavesParent(instance);
-   }
-}
-
-function tooltipParentDidMount(element, parentInstance, tooltip, options) {
-   if (tooltip && tooltip.alwaysVisible) {
-      let instance = getTooltipInstance(element, parentInstance, tooltip, options);
-      if (instance && instance.data.alwaysVisible) tooltipMouseMove(element, parentInstance, tooltip, options);
-   }
-}
-
-function tooltipParentWillReceiveProps(element, parentInstance, tooltip, options) {
-   let instance = getTooltipInstance(element, parentInstance, tooltip, options);
-   if (instance && options) {
-      instance.store.setData(options.data);
-      if (instance.update) instance.update();
-      if (instance.mouseOverTarget || (instance.data && instance.data.alwaysVisible))
-         tooltipMouseMove(element, parentInstance, tooltip, options);
-   }
-}
-
-function tooltipParentWillUnmount(parentInstance) {
-   if (parentInstance.tooltips) {
-      for (let name in parentInstance.tooltips) {
-         let instance = parentInstance.tooltips[name];
-         instance.mouseOverTarget = false;
-         if (instance.dismissTooltip) parentInstance.tooltips[name].dismissTooltip();
-      }
-   }
-}
-
-function tooltipParentDidUpdate(element, parentInstance, tooltip) {
-   let instance = getTooltipInstance(element, parentInstance, tooltip);
-   if (instance && instance.visible && instance.data?.alwaysVisible && instance.tooltipComponent)
-      instance.widget.updateDropdownPosition(instance, instance.tooltipComponent);
-}
-
-export function enableTooltips() {
-   wireTooltipOps({
-      tooltipMouseMove,
-      tooltipMouseLeave,
-      tooltipParentDidMount,
-      tooltipParentWillReceiveProps,
-      tooltipParentWillUnmount,
-      tooltipParentDidUpdate,
-   });
-}
diff --git a/packages/cx/src/widgets/overlay/Tooltip.scss b/packages/cx/src/widgets/overlay/Tooltip.scss
index 8c2704bbb..d98c21f31 100644
--- a/packages/cx/src/widgets/overlay/Tooltip.scss
+++ b/packages/cx/src/widgets/overlay/Tooltip.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @keyframes cx-tooltip-enter-animation {
    from {
       transform: scale(0.9);
@@ -26,10 +28,10 @@
    $name: 'tooltip',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map_get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       @extend %cxb-overlay;
diff --git a/packages/cx/src/widgets/overlay/Tooltip.tsx b/packages/cx/src/widgets/overlay/Tooltip.tsx
new file mode 100644
index 000000000..43035bf25
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/Tooltip.tsx
@@ -0,0 +1,393 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Dropdown, DropdownBase, DropdownConfig, DropdownInstance } from "./Dropdown";
+import { debug, tooltipsFlag } from "../../util/Debug";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { shallowEquals } from "../../util/shallowEquals";
+import { isSelector } from "../../data/isSelector";
+import { TooltipConfig, TooltipParentInstance, TooltipProp, wireTooltipOps } from "./tooltip-ops";
+import { getCursorPos } from "./captureMouse";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { StringProp, BooleanProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+
+export class TooltipInstance extends DropdownInstance<Tooltip> {
+   tooltipComponent?: any;
+   parentValidityCheckTimer?: NodeJS.Timeout;
+   mouseOverTooltip?: boolean;
+   mouseOverTarget?: boolean;
+   trackMouse?: (e: MouseEvent) => void;
+   dismissTooltip?: (() => void) | null;
+   declare tooltipName: string;
+   lastClickTime?: number;
+   config?: TooltipConfig;
+   update?: () => void;
+   declare store: ReadOnlyDataView;
+   declare parent: Instance & TooltipParentInstance;
+}
+
+export class TooltipBase<
+   Config extends TooltipConfig = TooltipConfig,
+   InstanceType extends TooltipInstance = TooltipInstance,
+> extends DropdownBase<Config, InstanceType> {
+   declare text?: StringProp;
+   declare title?: StringProp;
+   declare alwaysVisible?: BooleanProp;
+   declare trackMouse?: boolean;
+   declare trackMouseX?: boolean;
+   declare trackMouseY?: boolean;
+   declare touchBehavior?: string;
+   declare globalMouseTracking?: boolean;
+   declare mouseTrap?: boolean;
+   declare createDelay?: number;
+   declare baseClass: string;
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         text: undefined,
+         title: undefined,
+         alwaysVisible: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: InstanceType): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         "mouse-trap": this.mouseTrap,
+      };
+      super.prepareData(context, instance);
+   }
+
+   renderContents(context: RenderingContext, instance: InstanceType): any {
+      let { data } = instance;
+      let { CSS, baseClass } = this;
+      return [
+         data.title && (
+            <div key="title" className={CSS.element(baseClass, "title")}>
+               {data.title}
+            </div>
+         ),
+         data.text,
+         ...super.renderContents(context, instance),
+      ];
+   }
+
+   initInstance(context: RenderingContext, instance: InstanceType): void {
+      super.initInstance(context, instance);
+
+      if (this.trackMouseX || this.trackMouseY) {
+         instance.trackMouse = (e: any) => {
+            let pos = getCursorPos(e);
+            instance.mousePosition = {
+               x: pos.clientX,
+               y: pos.clientY,
+            };
+            if (instance.tooltipComponent) this.updateDropdownPosition(instance, instance.tooltipComponent);
+         };
+      }
+   }
+
+   overlayDidMount(instance: InstanceType, component: any): void {
+      instance.tooltipComponent = component;
+
+      super.overlayDidMount(instance, component);
+
+      instance.parentValidityCheckTimer = setInterval(() => {
+         if (this.relatedElement && !this.relatedElement.ownerDocument.body.contains(this.relatedElement)) {
+            if (instance.dismissTooltip) {
+               instance.dismissTooltip();
+               instance.dismissTooltip = null;
+            }
+         } else {
+            if (instance.tooltipComponent) this.updateDropdownPosition(instance, instance.tooltipComponent);
+         }
+      }, 500);
+
+      if (instance.widget.globalMouseTracking && instance.trackMouse) {
+         document.addEventListener("mousemove", instance.trackMouse);
+      }
+   }
+
+   overlayWillUnmount(instance: InstanceType, component: any): void {
+      clearInterval(instance.parentValidityCheckTimer);
+      super.overlayWillUnmount(instance, component);
+      instance.tooltipComponent = null;
+
+      if (instance.widget.globalMouseTracking && instance.trackMouse) {
+         document.removeEventListener("mousemove", instance.trackMouse);
+      }
+   }
+
+   handleMouseEnter(instance: InstanceType, component: any): void {
+      instance.mouseOverTooltip = true;
+      super.handleMouseEnter(instance, component);
+   }
+
+   handleMouseLeave(instance: InstanceType, component: any): void {
+      instance.mouseOverTooltip = false;
+      if (this.mouseTrap) this.handleMouseLeavesParent(instance);
+      super.handleMouseLeave(instance, component);
+   }
+
+   handleMouseLeavesParent(instance: InstanceType): void {
+      let timeout = this.mouseTrap ? 200 : 0;
+      setTimeout(() => {
+         if (!instance.mouseOverTarget && !(this.mouseTrap && instance.mouseOverTooltip)) this.dismissTooltip(instance);
+      }, timeout);
+   }
+
+   dismissTooltip(instance: InstanceType): void {
+      if (!instance || !instance.dismissTooltip) return;
+      if (
+         instance.data &&
+         instance.data.alwaysVisible &&
+         this.relatedElement &&
+         this.relatedElement.ownerDocument.body.contains(this.relatedElement)
+      )
+         return;
+      instance.dismissTooltip();
+      instance.dismissTooltip = null;
+   }
+
+   dismissAfterScroll(data: any, instance: InstanceType): void {
+      this.dismissTooltip(instance);
+   }
+
+   checkVisible(context: RenderingContext, instance: InstanceType, data: any): boolean {
+      if (!isNonEmptyArray(this.items) && !data.title && !data.text) return false;
+      return super.checkVisible(context, instance, data);
+   }
+}
+
+TooltipBase.prototype.baseClass = "tooltip";
+TooltipBase.prototype.offset = 8;
+TooltipBase.prototype.placementOrder =
+   "right up down left up-right up-left right-up right-down down-right down-left left-up left-down";
+TooltipBase.prototype.animate = true;
+TooltipBase.prototype.destroyDelay = 300;
+TooltipBase.prototype.createDelay = 200;
+TooltipBase.prototype.matchWidth = false;
+TooltipBase.prototype.trackMouse = false;
+TooltipBase.prototype.trackMouseX = false;
+TooltipBase.prototype.trackMouseY = false;
+TooltipBase.prototype.touchFriendly = false; //rename to positioningMode
+TooltipBase.prototype.touchBehavior = "toggle";
+TooltipBase.prototype.arrow = true;
+TooltipBase.prototype.alwaysVisible = false;
+TooltipBase.prototype.globalMouseTracking = false;
+
+export class Tooltip extends TooltipBase {}
+Widget.alias("tooltip", Tooltip);
+
+interface TooltipHelperOptions {
+   target?: HTMLElement;
+   tooltipName?: string;
+   data?: any;
+}
+
+export function getTooltipInstance(
+   e: MouseEvent | Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options: TooltipHelperOptions = {},
+) {
+   let target = options.target || (e instanceof Element ? e : e?.currentTarget) || e;
+
+   debug(tooltipsFlag, "mouse-move", target, parentInstance);
+
+   let name = options.tooltipName || "tooltip";
+
+   if (!parentInstance.tooltips) parentInstance.tooltips = {};
+   let tooltipInstance: TooltipInstance | null = parentInstance.tooltips[name] || null;
+
+   //no tooltips on disabled elements
+   if (parentInstance?.data.disabled) {
+      if (tooltipInstance && tooltipInstance.dismissTooltip) tooltipInstance.dismissTooltip();
+      return;
+   }
+
+   if (
+      tooltipInstance &&
+      (tooltipInstance.widget.relatedElement != target ||
+         !shallowEquals(tooltipInstance.config, tooltip) ||
+         tooltipInstance.store.store != parentInstance.store)
+   ) {
+      if (tooltipInstance.dismissTooltip) tooltipInstance.dismissTooltip();
+      delete parentInstance.tooltips[name];
+      tooltipInstance = null;
+   }
+
+   if (!tooltip || !target) return;
+
+   if (!tooltipInstance) {
+      let config: TooltipConfig = tooltip as TooltipConfig;
+      if (!isTooltipConfig(tooltip)) {
+         config = {
+            text: tooltip as StringProp,
+         };
+      }
+      let tooltipWidget = Tooltip.create({ relatedElement: target }, config);
+      let store = new ReadOnlyDataView({
+         store: parentInstance.store,
+      });
+      tooltipInstance = parentInstance.tooltips[name] = parentInstance.getDetachedChild(
+         tooltipWidget,
+         name,
+         store,
+      ) as TooltipInstance;
+      tooltipInstance.config = config;
+      tooltipInstance.tooltipName = name;
+      tooltipInstance.init(new RenderingContext());
+
+      if (config.alwaysVisible || config.trackMouse || config.trackMouseX || config.trackMouseY) {
+         tooltipInstance.data = tooltipInstance.dataSelector!(store);
+      }
+   }
+
+   return tooltipInstance;
+}
+
+function tooltipMouseMove(
+   e: MouseEvent | Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options: TooltipHelperOptions = {},
+) {
+   let instance = getTooltipInstance(e, parentInstance, tooltip, options);
+   if (!instance) return;
+
+   if (isTouchEvent() && instance.widget.touchBehavior == "ignore") return false;
+
+   let dirty = !shallowEquals(options.data, instance.store.data);
+
+   instance.store.setData(options.data);
+   instance.mouseOverTarget = true;
+
+   if (!instance.dismissTooltip) {
+      let canceled = false;
+      let dismiss = () => {
+         canceled = true;
+      };
+      let unsubscribeDismiss = instance.parent.subscribeOnDestroy(() => {
+         dismiss();
+      });
+      instance.dismissTooltip = () => {
+         if (instance.parent.tooltips![instance.tooltipName] === instance)
+            delete instance.parent.tooltips[instance.tooltipName];
+         unsubscribeDismiss();
+         dismiss();
+         instance.dismissTooltip = null;
+      };
+      instance.lastClickTime = Date.now();
+      setTimeout(() => {
+         let { relatedElement } = instance.widget;
+         if (!canceled && instance.mouseOverTarget && relatedElement!.ownerDocument.body.contains(relatedElement!)) {
+            dismiss = instance.widget.open(instance, {
+               onPipeUpdate: (cb: () => void) => {
+                  instance.update = cb;
+               },
+            });
+         } else {
+            instance.dismissTooltip = null;
+         }
+      }, instance.widget.createDelay);
+   } else {
+      if (isTouchEvent() && instance.widget.touchBehavior == "toggle") {
+         // ios fires mousemove events after touchend
+         if (Date.now() - (instance.lastClickTime ?? 0) > 50) {
+            instance.lastClickTime = Date.now();
+            instance.dismissTooltip();
+            instance.dismissTooltip = null;
+         }
+      } else if (dirty && instance.update) instance.update();
+   }
+
+   if (instance.trackMouse && isMouseEvent(e)) instance.trackMouse(e);
+}
+
+function isMouseEvent(e: MouseEvent | Element): e is MouseEvent {
+   if (e instanceof Element) return false;
+   return !!e;
+}
+
+function isTooltipConfig(tooltip: TooltipProp | undefined): tooltip is TooltipConfig {
+   if (!tooltip) return false;
+   if (isSelector(tooltip)) return false;
+   return true;
+}
+
+function tooltipMouseLeave(
+   e: MouseEvent | Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipHelperOptions,
+) {
+   let instance = getTooltipInstance(e, parentInstance, tooltip, options);
+
+   // do not process leave events twice even if called multiple times
+   if (instance && instance.mouseOverTarget) {
+      instance.mouseOverTarget = false;
+      instance.widget.handleMouseLeavesParent(instance);
+   }
+}
+
+function tooltipParentDidMount(
+   element: Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipHelperOptions,
+) {
+   if (isTooltipConfig(tooltip) && tooltip.alwaysVisible) {
+      let instance = getTooltipInstance(element, parentInstance, tooltip, options);
+      if (instance && instance.data.alwaysVisible) tooltipMouseMove(element, parentInstance, tooltip, options);
+   }
+}
+
+function tooltipParentWillReceiveProps(
+   element: Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipHelperOptions,
+) {
+   let instance = getTooltipInstance(element, parentInstance, tooltip, options);
+   if (instance && options) {
+      instance.store.setData(options.data);
+      if (instance.update) instance.update();
+      if (instance.mouseOverTarget || (instance.data && instance.data.alwaysVisible))
+         tooltipMouseMove(element, parentInstance, tooltip, options);
+   }
+}
+
+function tooltipParentWillUnmount(parentInstance: Instance<any> & TooltipParentInstance) {
+   if (parentInstance.tooltips) {
+      for (let name in parentInstance.tooltips) {
+         let instance = parentInstance.tooltips[name];
+         instance.mouseOverTarget = false;
+         if (instance.dismissTooltip) instance.dismissTooltip();
+      }
+   }
+}
+
+function tooltipParentDidUpdate(
+   element: HTMLElement,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+) {
+   let instance = getTooltipInstance(element, parentInstance, tooltip);
+   if (instance && instance.visible && instance.data?.alwaysVisible && instance.tooltipComponent)
+      instance.widget.updateDropdownPosition(instance, instance.tooltipComponent);
+}
+
+export function enableTooltips() {
+   wireTooltipOps({
+      tooltipMouseMove,
+      tooltipMouseLeave,
+      tooltipParentDidMount,
+      tooltipParentWillReceiveProps,
+      tooltipParentWillUnmount,
+      tooltipParentDidUpdate,
+   });
+}
diff --git a/packages/cx/src/widgets/overlay/Window.d.ts b/packages/cx/src/widgets/overlay/Window.d.ts
deleted file mode 100644
index 1a21f9a64..000000000
--- a/packages/cx/src/widgets/overlay/Window.d.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as Cx from "../../core";
-import { OverlayProps } from "./Overlay";
-
-interface WindowProps extends OverlayProps {
-   /** Text to be displayed in the header. */
-   title?: Cx.StringProp;
-
-   /** Controls the close button visibility. Defaults to `true`. */
-   closable?: Cx.BooleanProp;
-
-   /** A custom style which will be applied to the body. */
-   bodyStyle?: Cx.StyleProp;
-
-   /** A custom style which will be applied to the header. */
-   headerStyle?: Cx.StyleProp;
-
-   /** A custom style which will be applied to the footer. */
-   footerStyle?: Cx.StyleProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `window`. */
-   baseClass?: string;
-
-   /** Additional CSS class to be applied to the section body. */
-   bodyClass?: Cx.ClassProp;
-
-   /** Set to `true` to enable resizing. */
-   resizable?: boolean;
-
-   /** Set to `true` to automatically focus the field, after it renders for the first time. */
-   autoFocus?: boolean;
-
-   /** Set to `false` to prevent the window itself to be focusable. Default value is true.*/
-   focusable?: boolean;
-
-   /** Set to `true` to disable moving the window by dragging the header. */
-   fixed?: boolean;
-
-   /** Set to `true` to add default padding to the window body. */
-   pad?: boolean;
-}
-
-export class Window extends Cx.Widget<WindowProps> {}
diff --git a/packages/cx/src/widgets/overlay/Window.js b/packages/cx/src/widgets/overlay/Window.js
deleted file mode 100644
index 68a6c2a24..000000000
--- a/packages/cx/src/widgets/overlay/Window.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Overlay, OverlayComponent } from "./Overlay";
-import { ContentPlaceholder } from "../../ui/layout/ContentPlaceholder";
-import { ZIndexManager } from "../../ui/ZIndexManager";
-import { Button } from "../Button";
-import { parseStyle } from "../../util/parseStyle";
-import { Localization } from "../../ui/Localization";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { ddMouseDown, ddDetect, ddMouseUp } from "../drag-drop/ops";
-import { isDefined } from "../../util/isDefined";
-import { isString } from "../../util/isString";
-
-export class Window extends Overlay {
-   init() {
-      if (isDefined(this.closeable)) this.closable = this.closeable;
-
-      if (isString(this.headerStyle)) this.headerStyle = parseStyle(this.headerStyle);
-
-      if (isString(this.footerStyle)) this.footerStyle = parseStyle(this.footerStyle);
-
-      if (isString(this.bodyStyle)) this.bodyStyle = parseStyle(this.bodyStyle);
-
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         title: undefined,
-         closable: undefined,
-         bodyStyle: { structured: true },
-         bodyClass: { structured: true },
-         headerStyle: { structured: true },
-         footerStyle: { structured: true },
-      });
-   }
-
-   initHelpers() {
-      return super.initHelpers(...arguments, {
-         header: Widget.create(this.header || { type: ContentPlaceholder, name: "header", scoped: true }),
-         footer: Widget.create(this.footer || { type: ContentPlaceholder, name: "footer", scoped: true }),
-         close:
-            this.closable &&
-            Button.create({
-               mod: "hollow",
-               dismiss: true,
-               icon: "close",
-               style: "margin-left: auto",
-               onTouchStart: stopPropagation,
-               onMouseDown: stopPropagation,
-            }),
-      });
-   }
-
-   exploreCleanup(context, instance) {
-      super.exploreCleanup(context, instance);
-
-      let { helpers } = instance;
-      let unregisterHeader = helpers.header && helpers.header.unregisterContentPlaceholder;
-      if (unregisterHeader) unregisterHeader();
-
-      let unregisterFooter = helpers.footer && helpers.footer.unregisterContentPlaceholder;
-      if (unregisterFooter) unregisterFooter();
-   }
-
-   renderHeader(context, instance, key) {
-      let { data } = instance;
-      let result = [];
-      if (data.title) result.push(data.title);
-      if (instance.helpers) {
-         let header = getContent(instance.helpers.header && instance.helpers.header.render(context, key));
-         if (header) result.push(header);
-         if (data.closable && instance.helpers.close) result.push(getContent(instance.helpers.close.render(context)));
-      }
-      return result;
-   }
-
-   renderFooter(context, instance, key) {
-      return getContent(instance.helpers && instance.helpers.footer && instance.helpers.footer.render(context, key));
-   }
-
-   render(context, instance, key) {
-      var header = this.renderHeader(context, instance, "header");
-      var footer = this.renderFooter(context, instance, "footer");
-      return (
-         <WindowComponent
-            key={key}
-            instance={instance}
-            header={header}
-            footer={footer}
-            subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
-         >
-            {this.renderContents(context, instance)}
-         </WindowComponent>
-      );
-   }
-}
-
-Window.prototype.baseClass = "window";
-Window.prototype.closable = true;
-Window.prototype.resizable = false;
-Window.prototype.fixed = false;
-Window.prototype.autoFocus = true;
-Window.prototype.focusable = true;
-Window.prototype.pad = true;
-
-Widget.alias("window", Window);
-Localization.registerPrototype("cx/widgets/Window", Window);
-
-class WindowComponent extends OverlayComponent {
-   renderOverlayBody() {
-      var { widget, data } = this.props.instance;
-      var { CSS, baseClass } = widget;
-
-      let header, footer;
-
-      if (this.props.header.length > 0) {
-         header = (
-            <header
-               key="header"
-               ref={(c) => {
-                  this.headerEl = c;
-               }}
-               className={CSS.element(baseClass, "header")}
-               style={data.headerStyle}
-               onMouseDown={this.onHeaderMouseDown.bind(this)}
-               onMouseUp={ddMouseUp}
-               onMouseMove={this.onHeaderMouseMove.bind(this)}
-               onTouchStart={this.onHeaderMouseDown.bind(this)}
-               onTouchEnd={ddMouseUp}
-               onTouchMove={this.onHeaderMouseMove.bind(this)}
-            >
-               {this.props.header}
-            </header>
-         );
-      }
-
-      if (this.props.footer) {
-         footer = (
-            <footer
-               key="footer"
-               ref={(c) => {
-                  this.footerEl = c;
-               }}
-               className={CSS.element(baseClass, "footer")}
-               style={data.footerStyle}
-            >
-               {this.props.footer}
-            </footer>
-         );
-      }
-
-      var body = (
-         <div
-            key="body"
-            ref={(c) => {
-               this.bodyEl = c;
-            }}
-            className={CSS.expand(CSS.element(widget.baseClass, "body", { pad: widget.pad }), data.bodyClass)}
-            style={data.bodyStyle}
-         >
-            {this.props.children}
-         </div>
-      );
-
-      return [header, body, footer];
-   }
-
-   getOverlayCssClass() {
-      var cls = super.getOverlayCssClass();
-      if (this.state.active) cls += " cxs-active";
-      return cls;
-   }
-
-   onFocusIn() {
-      super.onFocusIn();
-      if (!this.state.active) {
-         if (this.containerEl.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
-         this.setState({ active: true });
-      }
-   }
-
-   onFocusOut() {
-      super.onFocusOut();
-      if (this.state.active) {
-         this.setState({
-            active: false,
-         });
-      }
-   }
-
-   onHeaderMouseDown(e) {
-      e.stopPropagation();
-      ddMouseDown(e);
-   }
-
-   onHeaderMouseMove(e) {
-      e.stopPropagation();
-      if (!this.props.instance.widget.fixed && ddDetect(e)) {
-         this.startMoveOperation(e);
-      }
-   }
-}
diff --git a/packages/cx/src/widgets/overlay/Window.scss b/packages/cx/src/widgets/overlay/Window.scss
index 9a5a8c1ea..beb6f5e7f 100644
--- a/packages/cx/src/widgets/overlay/Window.scss
+++ b/packages/cx/src/widgets/overlay/Window.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-window(
    $name: "window",
    $state-style-map: $cx-window-state-style-map,
@@ -7,10 +9,10 @@
    $mods: $cx-window-mods,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       @extend %cxb-overlay;
diff --git a/packages/cx/src/widgets/overlay/Window.tsx b/packages/cx/src/widgets/overlay/Window.tsx
new file mode 100644
index 000000000..46d4897fe
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/Window.tsx
@@ -0,0 +1,299 @@
+/** @jsxImportSource react */
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import {
+   Overlay,
+   OverlayBase,
+   OverlayComponent,
+   OverlayComponentProps,
+   OverlayComponentState,
+   OverlayConfig,
+   OverlayInstance,
+} from "./Overlay";
+import { ContentPlaceholder, ContentPlaceholderInstance } from "../../ui/layout/ContentPlaceholder";
+import { ZIndexManager } from "../../ui/ZIndexManager";
+import { Button } from "../Button";
+import { parseStyle } from "../../util/parseStyle";
+import { Localization } from "../../ui/Localization";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { ddMouseDown, ddDetect, ddMouseUp } from "../drag-drop/ops";
+import { isDefined } from "../../util/isDefined";
+import { isString } from "../../util/isString";
+import { BooleanProp, StringProp, StyleProp, ClassProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface WindowConfig extends OverlayConfig {
+   /** Text to be displayed in the header. */
+   title?: StringProp;
+
+   /** Controls the close button visibility. Defaults to `true`. */
+   closable?: BooleanProp;
+
+   /** A custom style which will be applied to the body. */
+   bodyStyle?: StyleProp;
+
+   /** A custom style which will be applied to the header. */
+   headerStyle?: StyleProp;
+
+   /** A custom style which will be applied to the footer. */
+   footerStyle?: StyleProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `window`. */
+   baseClass?: string;
+
+   /** Additional CSS class to be applied to the section body. */
+   bodyClass?: ClassProp;
+
+   /** Set to `true` to enable resizing. */
+   resizable?: boolean;
+
+   /** Set to `true` to automatically focus the field, after it renders for the first time. */
+   autoFocus?: boolean;
+
+   /** Set to `false` to prevent the window itself to be focusable. Default value is true.*/
+   focusable?: boolean;
+
+   /** Set to `true` to disable moving the window by dragging the header. */
+   fixed?: boolean;
+
+   /** Set to `true` to add default padding to the window body. */
+   pad?: boolean;
+
+   /** Optional header widget. */
+   header?: any;
+
+   /** Optional footer widget. */
+   footer?: any;
+
+   /** Custom event handler for closeable. */
+   closeable?: BooleanProp;
+}
+
+export class WindowInstance extends OverlayInstance<Window> {
+   headerEl?: HTMLElement;
+   footerEl?: HTMLElement;
+   bodyEl?: HTMLElement;
+   containerEl?: HTMLElement;
+}
+
+export class Window extends OverlayBase<WindowConfig, WindowInstance> {
+   declare closable?: BooleanProp;
+   declare closeable?: BooleanProp;
+   declare resizable?: boolean;
+   declare fixed?: boolean;
+   declare autoFocus?: boolean;
+   declare focusable?: boolean;
+   declare pad?: boolean;
+   declare bodyStyle?: StyleProp;
+   declare headerStyle?: StyleProp;
+   declare footerStyle?: StyleProp;
+   declare bodyClass?: ClassProp;
+   declare title?: StringProp;
+   declare header?: any;
+   declare footer?: any;
+   declare baseClass: string;
+
+   init() {
+      if (isDefined(this.closeable)) this.closable = this.closeable;
+
+      if (isString(this.headerStyle)) this.headerStyle = parseStyle(this.headerStyle);
+
+      if (isString(this.footerStyle)) this.footerStyle = parseStyle(this.footerStyle);
+
+      if (isString(this.bodyStyle)) this.bodyStyle = parseStyle(this.bodyStyle);
+
+      super.init();
+   }
+
+   declareData(...args: any) {
+      return super.declareData(...args, {
+         title: undefined,
+         closable: undefined,
+         bodyStyle: { structured: true },
+         bodyClass: { structured: true },
+         headerStyle: { structured: true },
+         footerStyle: { structured: true },
+      });
+   }
+
+   initHelpers(...args: any) {
+      return super.initHelpers(...args, {
+         header: Widget.create(this.header || { type: ContentPlaceholder, name: "header", scoped: true }),
+         footer: Widget.create(this.footer || { type: ContentPlaceholder, name: "footer", scoped: true }),
+         close:
+            this.closable &&
+            Button.create({
+               mod: "hollow",
+               dismiss: true,
+               icon: "close",
+               style: "margin-left: auto",
+               onTouchStart: stopPropagation,
+               onMouseDown: stopPropagation,
+            }),
+      });
+   }
+
+   exploreCleanup(context: RenderingContext, instance: WindowInstance): void {
+      super.exploreCleanup(context, instance);
+
+      let { helpers } = instance;
+      let unregisterHeader =
+         helpers!.header && (helpers!.header as ContentPlaceholderInstance).unregisterContentPlaceholder;
+      if (unregisterHeader) unregisterHeader();
+
+      let unregisterFooter =
+         helpers!.footer && (helpers!.footer as ContentPlaceholderInstance).unregisterContentPlaceholder;
+      if (unregisterFooter) unregisterFooter();
+   }
+
+   renderHeader(context: RenderingContext, instance: WindowInstance, key: string): any[] {
+      let { data } = instance;
+      let result = [];
+      if (data.title) result.push(data.title);
+      if (instance.helpers) {
+         let header = getContent(instance.helpers.header && instance.helpers.header.render(context));
+         if (header) result.push(header);
+         if (data.closable && instance.helpers.close) result.push(getContent(instance.helpers.close.render(context)));
+      }
+      return result;
+   }
+
+   renderFooter(context: RenderingContext, instance: WindowInstance, key: string): any {
+      return getContent(instance.helpers && instance.helpers.footer && instance.helpers.footer.render(context));
+   }
+
+   render(context: RenderingContext, instance: WindowInstance, key: string): any {
+      var header = this.renderHeader(context, instance, "header");
+      var footer = this.renderFooter(context, instance, "footer");
+      return (
+         <WindowComponent
+            key={key}
+            instance={instance}
+            header={header}
+            footer={footer}
+            subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
+         >
+            {this.renderContents(context, instance)}
+         </WindowComponent>
+      );
+   }
+}
+
+Window.prototype.baseClass = "window";
+Window.prototype.closable = true;
+Window.prototype.resizable = false;
+Window.prototype.fixed = false;
+Window.prototype.autoFocus = true;
+Window.prototype.focusable = true;
+Window.prototype.pad = true;
+
+Widget.alias("window", Window);
+Localization.registerPrototype("cx/widgets/Window", Window);
+
+interface WindowComponentProps extends OverlayComponentProps {
+   header: any[];
+   footer: any;
+   instance: WindowInstance;
+}
+
+interface WindowComponentState extends OverlayComponentState {
+   active?: boolean;
+}
+
+class WindowComponent extends OverlayComponent<WindowComponentProps, WindowComponentState> {
+   headerEl?: HTMLElement | null;
+   footerEl?: HTMLElement | null;
+   bodyEl?: HTMLElement | null;
+
+   renderOverlayBody() {
+      var { widget, data } = this.props.instance;
+      var { CSS, baseClass, pad } = widget;
+
+      let header, footer;
+
+      if (this.props.header.length > 0) {
+         header = (
+            <header
+               key="header"
+               ref={(c) => {
+                  this.headerEl = c;
+               }}
+               className={CSS.element(baseClass, "header")}
+               style={data.headerStyle}
+               onMouseDown={this.onHeaderMouseDown.bind(this)}
+               onMouseUp={ddMouseUp}
+               onMouseMove={this.onHeaderMouseMove.bind(this)}
+               onTouchStart={this.onHeaderMouseDown.bind(this)}
+               onTouchEnd={ddMouseUp}
+               onTouchMove={this.onHeaderMouseMove.bind(this)}
+            >
+               {this.props.header}
+            </header>
+         );
+      }
+
+      if (this.props.footer) {
+         footer = (
+            <footer
+               key="footer"
+               ref={(c) => {
+                  this.footerEl = c;
+               }}
+               className={CSS.element(baseClass, "footer")}
+               style={data.footerStyle}
+            >
+               {this.props.footer}
+            </footer>
+         );
+      }
+
+      var body = (
+         <div
+            key="body"
+            ref={(c) => {
+               this.bodyEl = c;
+            }}
+            className={CSS.expand(CSS.element(baseClass, "body", { pad }), data.bodyClass)}
+            style={data.bodyStyle}
+         >
+            {this.props.children}
+         </div>
+      );
+
+      return [header, body, footer];
+   }
+
+   getOverlayCssClass() {
+      var cls = super.getOverlayCssClass();
+      if (this.state.active) cls += " cxs-active";
+      return cls;
+   }
+
+   onFocusIn() {
+      super.onFocusIn();
+      if (!this.state.active) {
+         if (this.containerEl!.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
+         this.setState({ active: true });
+      }
+   }
+
+   onFocusOut() {
+      super.onFocusOut();
+      if (this.state.active) {
+         this.setState({
+            active: false,
+         });
+      }
+   }
+
+   onHeaderMouseDown(e: any) {
+      e.stopPropagation();
+      ddMouseDown(e);
+   }
+
+   onHeaderMouseMove(e: any) {
+      e.stopPropagation();
+      if (!(this.props.instance.widget as Window).fixed && ddDetect(e)) {
+         this.startMoveOperation(e);
+      }
+   }
+}
diff --git a/packages/cx/src/widgets/overlay/alerts.d.ts b/packages/cx/src/widgets/overlay/alerts.d.ts
deleted file mode 100644
index 93e6d4763..000000000
--- a/packages/cx/src/widgets/overlay/alerts.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as Cx from '../../core';
-
-export function alert(options: string | Cx.Config): Promise<void>;
-
-export function yesNo(options: string | Cx.Config): Promise<string>;
-
-export function registerAlertImpl(impl: { alert: any, yesNo: any });
diff --git a/packages/cx/src/widgets/overlay/alerts.js b/packages/cx/src/widgets/overlay/alerts.js
deleted file mode 100644
index 35b972346..000000000
--- a/packages/cx/src/widgets/overlay/alerts.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import {debug, deprecatedFlag} from '../../util/Debug';
-import {isString} from '../../util/isString';
-
-function getMessage(options) {
-   debug(deprecatedFlag, "Call enableMsgBoxes() on startup to use Cx based message boxes. Message boxes are not auto enabled anymore to reduce the bundle size for apps that do not use them. ");
-   if (!options)
-      return null;
-   if (isString(options))
-      return options;
-   if (options && options.message)
-      return options.message;
-   return null;
-}
-
-let impl = {
-   yesNo: function (options) {
-      let result = window.confirm(getMessage(options));
-      return Promise.resolve(result ? 'yes' : 'no');
-   },
-
-   alert: function (options) {
-      window.alert(getMessage(options));
-      return Promise.resolve();
-   }
-};
-
-export function alert(options) {
-   return impl.alert.apply(impl, arguments);
-}
-
-export function yesNo(options) {
-   return impl.yesNo.apply(impl, arguments);
-}
-
-export function registerAlertImpl(x) {
-   impl = x;
-}
-
-
diff --git a/packages/cx/src/widgets/overlay/alerts.ts b/packages/cx/src/widgets/overlay/alerts.ts
new file mode 100644
index 000000000..182eedae9
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/alerts.ts
@@ -0,0 +1,46 @@
+import {debug, deprecatedFlag} from '../../util/Debug';
+import {isString} from '../../util/isString';
+
+export type AlertOptions = string | { message?: string; [key: string]: any };
+
+interface AlertImpl {
+   alert(options: AlertOptions): Promise<void>;
+   yesNo(options: AlertOptions): Promise<string>;
+}
+
+function getMessage(options: AlertOptions): string | null {
+   debug(deprecatedFlag, "Call enableMsgBoxes() on startup to use Cx based message boxes. Message boxes are not auto enabled anymore to reduce the bundle size for apps that do not use them. ");
+   if (!options)
+      return null;
+   if (isString(options))
+      return options;
+   if (options && typeof options === 'object' && options.message)
+      return options.message;
+   return null;
+}
+
+let impl: AlertImpl = {
+   yesNo: function (options: AlertOptions): Promise<string> {
+      let result = window.confirm(getMessage(options) || '');
+      return Promise.resolve(result ? 'yes' : 'no');
+   },
+
+   alert: function (options: AlertOptions): Promise<void> {
+      window.alert(getMessage(options) || '');
+      return Promise.resolve();
+   }
+};
+
+export function alert(options: AlertOptions): Promise<void> {
+   return impl.alert(options);
+}
+
+export function yesNo(options: AlertOptions): Promise<string> {
+   return impl.yesNo(options);
+}
+
+export function registerAlertImpl(x: AlertImpl): void {
+   impl = x;
+}
+
+
diff --git a/packages/cx/src/widgets/overlay/captureMouse.d.ts b/packages/cx/src/widgets/overlay/captureMouse.d.ts
deleted file mode 100644
index 4d5c90e87..000000000
--- a/packages/cx/src/widgets/overlay/captureMouse.d.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as Cx from '../../core';
-import * as React from 'react';
-
-type MouseEventHandler = (e: React.SyntheticEvent<any>, captureData: Cx.Config) => void;
-
-export interface CursorPosition {
-   clientX: number,
-   clientY: number
-}
-
-/**
- * Returns the object representing cursor position
- * @param e - Event
- * @returns {{ clientX: number, clientY: number }}
- */
-export function getCursorPos(e: React.SyntheticEvent<any>): CursorPosition;
-
-export function captureMouse(
-   e: React.SyntheticEvent<any>,
-   onMouseMove?: MouseEventHandler,
-   onMouseUp?: (e: React.SyntheticEvent<any>) => void,
-   captureData?: Cx.Config,
-   cursor?: string
-): void;
-
-export function captureMouse2(
-   e: React.SyntheticEvent<any>,
-   options: {
-      onMouseMove?: MouseEventHandler,
-      onMouseUp?: (e: React.SyntheticEvent<any>) => void,
-      onDblClick?: (e: React.SyntheticEvent<any>) => void,
-      captureData?: Cx.Config,
-      cursor?: string
-   }
-): void;
-
-export function captureMouseOrTouch(
-   e: React.SyntheticEvent<any>,
-   onMouseMove?: MouseEventHandler,
-   onMouseUp?: (e: React.SyntheticEvent<any>) => void,
-   captureData?: Cx.Config,
-   cursor?: string
-): void;
-
-export function captureMouseOrTouch2(
-   e: React.SyntheticEvent<any>,
-   options: {
-      onMouseMove?: MouseEventHandler,
-      onMouseUp?: (e: React.SyntheticEvent<any>) => void,
-      onDblClick?: (e: React.SyntheticEvent<any>) => void,
-      captureData?: Cx.Config,
-      cursor?: string
-   }
-): void;
\ No newline at end of file
diff --git a/packages/cx/src/widgets/overlay/captureMouse.js b/packages/cx/src/widgets/overlay/captureMouse.js
deleted file mode 100644
index 4ebd7004e..000000000
--- a/packages/cx/src/widgets/overlay/captureMouse.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import { batchUpdates } from "../../ui/batchUpdates";
-import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
-
-export function captureMouse2(e, { onMouseMove, onMouseUp, onDblClick, captureData, cursor }) {
-   let surface = document.createElement("div");
-   surface.className = "cxb-mousecapture";
-   surface.style.cursor = cursor || getComputedStyle(e.currentTarget).cursor;
-
-   document.body.appendChild(surface);
-
-   // In case when the event originates from an iframe,
-   // we use that document as events do not bubble up.   //
-   let parentDocument = e.target.ownerDocument;
-   let options = { capture: true };
-
-   let active = true;
-   parentDocument.addEventListener("mousemove", move, options);
-   parentDocument.addEventListener("mouseup", end, options);
-   if (onDblClick) parentDocument.addEventListener("dblclick", doubleClick), options;
-
-   function tear() {
-      if (surface == null) return;
-      parentDocument.removeEventListener("mousemove", move, options);
-      parentDocument.removeEventListener("mouseup", end, options);
-      if (onDblClick) parentDocument.removeEventListener("dblclick", onDblClick, options);
-      document.body.removeChild(surface);
-      surface = null;
-   }
-
-   function doubleClick(e) {
-      try {
-         onDblClick && onDblClick(e);
-      } finally {
-         tear();
-      }
-   }
-
-   e.stopPropagation();
-
-   function move(e) {
-      if (!active) {
-         tear();
-         return;
-      }
-
-      //if mouse moves double clicking is off
-      onDblClick = null;
-
-      batchUpdates(() => {
-         if (onMouseMove) onMouseMove(e, captureData);
-         e.stopPropagation();
-         e.preventDefault(); //disable text selection
-      });
-   }
-
-   function end(e) {
-      active = false;
-      batchUpdates(() => {
-         // if (surface.releaseCapture)
-         //    surface.releaseCapture();
-
-         if (!onDblClick) surface.style.display = "none";
-         try {
-            if (onMouseUp) onMouseUp(e, captureData);
-         } finally {
-            if (onDblClick) {
-               //keep the surface a little longer to detect double clicks
-               setTimeout(tear, 1500);
-            } else tear();
-         }
-      });
-   }
-}
-
-export function captureMouseOrTouch2(e, { onMouseMove, onMouseUp, onDblClick, captureData, cursor }) {
-   if (e.type.indexOf("touch") == 0) {
-      let el = e.currentTarget;
-
-      let move = (e) => {
-         batchUpdates(() => {
-            if (onMouseMove) onMouseMove(e, captureData);
-            e.preventDefault();
-         });
-      };
-
-      let end = (e) => {
-         batchUpdates(() => {
-            el.removeEventListener("touchmove", move);
-            el.removeEventListener("touchend", end);
-
-            if (onMouseUp) onMouseUp(e);
-
-            e.preventDefault();
-         });
-      };
-
-      el.addEventListener("touchmove", move);
-      el.addEventListener("touchend", end);
-
-      e.stopPropagation();
-   } else captureMouse2(e, { onMouseMove, onMouseUp, captureData, onDblClick, cursor });
-}
-
-export function captureMouse(e, onMouseMove, onMouseUp, captureData, cursor) {
-   captureMouse2(e, {
-      onMouseMove,
-      onMouseUp,
-      captureData,
-      cursor,
-   });
-}
-
-export function captureMouseOrTouch(e, onMouseMove, onMouseUp, captureData, cursor) {
-   captureMouseOrTouch2(e, { onMouseMove, onMouseUp, captureData, cursor });
-}
-
-export function getCursorPos(e) {
-   let p = (e.touches && e.touches[0]) || e;
-   let offset = getParentFrameBoundingClientRect(e.target);
-   return {
-      clientX: p.clientX + offset.left,
-      clientY: p.clientY + offset.top,
-   };
-}
diff --git a/packages/cx/src/widgets/overlay/captureMouse.ts b/packages/cx/src/widgets/overlay/captureMouse.ts
new file mode 100644
index 000000000..4f22bb8c4
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/captureMouse.ts
@@ -0,0 +1,195 @@
+import { batchUpdates } from "../../ui/batchUpdates";
+import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
+
+/** Cursor position with client coordinates */
+export interface CursorPosition {
+   clientX: number;
+   clientY: number;
+}
+
+/**
+ * Configuration options for mouse capture
+ */
+interface CaptureMouseOptions {
+   /** Callback function called on mouse move events */
+   onMouseMove?: (e: MouseEvent, captureData?: any) => void;
+   /** Callback function called on mouse up events */
+   onMouseUp?: (e: MouseEvent, captureData?: any) => void;
+   /** Callback function called on double click events */
+   onDblClick?: (e: MouseEvent) => void;
+   /** Additional data passed to callbacks */
+   captureData?: any;
+   /** CSS cursor style for the capture surface */
+   cursor?: string;
+}
+
+/**
+ * Captures mouse events globally by creating a transparent overlay
+ * @param e - The initial mouse event that triggered the capture
+ * @param options - Configuration options for the capture behavior
+ */
+export function captureMouse2(
+   e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+   options: CaptureMouseOptions,
+): void {
+   let surface = document.createElement("div");
+   surface.className = "cxb-mousecapture";
+   surface.style.cursor = options.cursor || getComputedStyle(e.currentTarget as Element).cursor;
+
+   document.body.appendChild(surface);
+
+   // In case when the event originates from an iframe,
+   // we use that document as events do not bubble up.
+   let parentDocument = (e.target as Element)?.ownerDocument;
+   let eventOptions = { capture: true };
+
+   let active = true;
+   parentDocument.addEventListener("mousemove", move, eventOptions);
+   parentDocument.addEventListener("mouseup", end, eventOptions);
+   if (options.onDblClick) parentDocument.addEventListener("dblclick", doubleClick, eventOptions);
+
+   function tear() {
+      if (surface == null) return;
+      parentDocument.removeEventListener("mousemove", move, eventOptions);
+      parentDocument.removeEventListener("mouseup", end, eventOptions);
+      if (options.onDblClick) parentDocument.removeEventListener("dblclick", doubleClick, eventOptions);
+      document.body.removeChild(surface);
+      surface = null as any;
+   }
+
+   function doubleClick(e: Event) {
+      try {
+         options.onDblClick && options.onDblClick(e as MouseEvent);
+      } finally {
+         tear();
+      }
+   }
+
+   e.stopPropagation();
+
+   function move(e: Event) {
+      if (!active) {
+         tear();
+         return;
+      }
+
+      //if mouse moves double clicking is off
+      options.onDblClick = undefined;
+
+      batchUpdates(() => {
+         if (options.onMouseMove) options.onMouseMove(e as MouseEvent, options.captureData);
+         e.stopPropagation();
+         e.preventDefault(); //disable text selection
+      });
+   }
+
+   function end(e: Event) {
+      active = false;
+      batchUpdates(() => {
+         // if (surface.releaseCapture)
+         //    surface.releaseCapture();
+
+         if (!options.onDblClick) surface.style.display = "none";
+         try {
+            if (options.onMouseUp) options.onMouseUp(e as MouseEvent, options.captureData);
+         } finally {
+            if (options.onDblClick) {
+               //keep the surface a little longer to detect double clicks
+               setTimeout(tear, 1500);
+            } else tear();
+         }
+      });
+   }
+}
+
+/**
+ * Captures mouse or touch events, automatically detecting the event type
+ * @param e - The initial mouse or touch event that triggered the capture
+ * @param options - Configuration options for the capture behavior
+ */
+export function captureMouseOrTouch2(
+   e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+   options: CaptureMouseOptions,
+): void {
+   if (e.type.indexOf("touch") == 0) {
+      let el = e.currentTarget as HTMLElement;
+
+      let move = (e: TouchEvent) => {
+         batchUpdates(() => {
+            if (options.onMouseMove) options.onMouseMove(e as any, options.captureData);
+            e.preventDefault();
+         });
+      };
+
+      let end = (e: TouchEvent) => {
+         batchUpdates(() => {
+            el.removeEventListener("touchmove", move);
+            el.removeEventListener("touchend", end);
+
+            if (options.onMouseUp) options.onMouseUp(e as any);
+
+            e.preventDefault();
+         });
+      };
+
+      el.addEventListener("touchmove", move);
+      el.addEventListener("touchend", end);
+
+      e.stopPropagation();
+   } else captureMouse2(e, options);
+}
+
+/**
+ * Legacy function for capturing mouse events with individual parameters
+ * @param e - The initial mouse event that triggered the capture
+ * @param onMouseMove - Callback function called on mouse move events
+ * @param onMouseUp - Callback function called on mouse up events
+ * @param captureData - Additional data passed to callbacks
+ * @param cursor - CSS cursor style for the capture surface
+ */
+export function captureMouse(
+   e: React.MouseEvent,
+   onMouseMove?: (e: MouseEvent | TouchEvent, captureData?: any) => void,
+   onMouseUp?: (e: MouseEvent | TouchEvent, captureData?: any) => void,
+   captureData?: any,
+   cursor?: string,
+): void {
+   captureMouse2(e, {
+      onMouseMove,
+      onMouseUp,
+      captureData,
+      cursor,
+   });
+}
+
+/**
+ * Legacy function for capturing mouse or touch events with individual parameters
+ * @param e - The initial mouse or touch event that triggered the capture
+ * @param onMouseMove - Callback function called on mouse/touch move events
+ * @param onMouseUp - Callback function called on mouse/touch up events
+ * @param captureData - Additional data passed to callbacks
+ * @param cursor - CSS cursor style for the capture surface
+ */
+export function captureMouseOrTouch(
+   e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+   onMouseMove?: (e: MouseEvent, captureData?: any) => void,
+   onMouseUp?: (e: MouseEvent, captureData?: any) => void,
+   captureData?: any,
+   cursor?: string,
+): void {
+   captureMouseOrTouch2(e, { onMouseMove, onMouseUp, captureData, cursor });
+}
+
+/**
+ * Gets the cursor position relative to the parent frame
+ * @param e - Mouse or touch event (React or native)
+ * @returns Object with clientX and clientY coordinates adjusted for parent frame offset
+ */
+export function getCursorPos(e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent): CursorPosition {
+   let p = (e as TouchEvent).touches?.[0] || (e as MouseEvent);
+   let offset = getParentFrameBoundingClientRect(e.target as Element);
+   return {
+      clientX: p.clientX + offset.left,
+      clientY: p.clientY + offset.top,
+   };
+}
diff --git a/packages/cx/src/widgets/overlay/createHotPromiseWindowFactory.d.ts b/packages/cx/src/widgets/overlay/createHotPromiseWindowFactory.d.ts
deleted file mode 100644
index d04db95b8..000000000
--- a/packages/cx/src/widgets/overlay/createHotPromiseWindowFactory.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { View } from "cx/data";
-import { Instance } from "cx/ui";
-import { Overlay } from "cx/widgets";
-
-export interface HotPromiseWindowFactoryOptions {
-   parent?: Instance;
-   store?: View;
-}
-
-export function createHotPromiseWindowFactoryWithProps<Props, R = any>(
-   module: any,
-   factory: (props: Props) => (resolve: (value: R | PromiseLike<R>) => void, reject: (reason?: any) => void) => Overlay,
-): (props: Props, options?: HotPromiseWindowFactoryOptions) => Promise<R>;
-
-export function createHotPromiseWindowFactory<R = any>(
-   module: any,
-   factory: (resolve: (value: R | PromiseLike<R>) => void, reject: (reason?: any) => void) => Overlay,
-): (options?: HotPromiseWindowFactoryOptions) => Promise<R>;
diff --git a/packages/cx/src/widgets/overlay/createHotPromiseWindowFactory.js b/packages/cx/src/widgets/overlay/createHotPromiseWindowFactory.js
deleted file mode 100644
index 3e75106a6..000000000
--- a/packages/cx/src/widgets/overlay/createHotPromiseWindowFactory.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Store } from "../../data/Store";
-import { SubscriberList } from "../../util/SubscriberList";
-import { Window } from "./Window";
-
-export function createHotPromiseWindowFactoryWithProps(module, factory) {
-   let subscriberList;
-   if (module.hot) {
-      if (module.hot.data?.subscriberList) subscriberList = module.hot.data.subscriberList;
-      if (!subscriberList) subscriberList = new SubscriberList();
-
-      module.hot.dispose((data) => {
-         data.subscriberList = subscriberList;
-      });
-
-      module.hot.accept();
-
-      if (!subscriberList.isEmpty()) subscriberList.notify(factory);
-
-      subscriberList.subscribe((updatedFactory) => {
-         factory = updatedFactory;
-      });
-   }
-
-   return (props, options) => {
-      let store = options?.parent ?? options?.store ?? new Store();
-      let reloading = false;
-      return new Promise((resolve, reject) => {
-         let dismiss;
-         let unsubscribe;
-         function rerun() {
-            dismiss?.();
-            let window = Window.create(factory(props)(resolve, reject));
-            window.overlayWillDismiss = () => {
-               if (!reloading && unsubscribe) unsubscribe();
-            };
-            dismiss = window.open(store);
-         }
-         unsubscribe = subscriberList?.subscribe((updatedFactory) => {
-            factory = updatedFactory;
-            setTimeout(() => {
-               // timeout is required for proper module initialization
-               // sometimes elements are defined in the lower part of the module and if the function is run immediately, it will fail
-               reloading = true;
-               rerun();
-               reloading = false;
-            }, 10);
-         });
-         rerun();
-      });
-   };
-}
-
-export function createHotPromiseWindowFactory(module, factory) {
-   let result = createHotPromiseWindowFactoryWithProps(module, () => factory);
-   return (options) => result(null, options);
-}
diff --git a/packages/cx/src/widgets/overlay/createHotPromiseWindowFactory.ts b/packages/cx/src/widgets/overlay/createHotPromiseWindowFactory.ts
new file mode 100644
index 000000000..a81d58be8
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/createHotPromiseWindowFactory.ts
@@ -0,0 +1,71 @@
+import { Store } from "../../data/Store";
+import { HotModule } from "../../ui/app/startHotAppLoop";
+import { SubscriberList } from "../../util/SubscriberList";
+import { Window } from "./Window";
+import { View } from "../../data/View";
+import { Instance } from "../../ui/Instance";
+import { Overlay } from "./Overlay";
+
+export interface HotPromiseWindowFactoryOptions {
+   parent?: Instance;
+   store?: View;
+}
+
+export function createHotPromiseWindowFactoryWithProps<Props, R = any>(
+   module: HotModule,
+   factory: (props: Props) => (resolve: (value: R | PromiseLike<R>) => void, reject: (reason?: any) => void) => Overlay,
+): (props: Props, options?: HotPromiseWindowFactoryOptions) => Promise<R> {
+   let subscriberList: SubscriberList | undefined;
+   if (module.hot) {
+      if (module.hot.data?.subscriberList) subscriberList = module.hot.data.subscriberList;
+      if (!subscriberList) subscriberList = new SubscriberList();
+
+      module.hot.dispose((data: any) => {
+         data.subscriberList = subscriberList;
+      });
+
+      module.hot.accept();
+
+      if (!subscriberList.isEmpty()) subscriberList.notify(factory);
+
+      subscriberList.subscribe((updatedFactory) => {
+         factory = updatedFactory;
+      });
+   }
+
+   return (props: Props, options?: HotPromiseWindowFactoryOptions): Promise<R> => {
+      let store = options?.parent ?? options?.store ?? new Store();
+      let reloading = false;
+      return new Promise<R>((resolve, reject) => {
+         let dismiss: (() => void) | undefined;
+         let unsubscribe: (() => void) | undefined;
+         function rerun() {
+            dismiss?.();
+            let window = Window.create(factory(props)(resolve, reject) as any) as any;
+            window.overlayWillDismiss = () => {
+               if (!reloading && unsubscribe) unsubscribe();
+            };
+            dismiss = window.open(store);
+         }
+         unsubscribe = subscriberList?.subscribe((updatedFactory: any) => {
+            factory = updatedFactory;
+            setTimeout(() => {
+               // timeout is required for proper module initialization
+               // sometimes elements are defined in the lower part of the module and if the function is run immediately, it will fail
+               reloading = true;
+               rerun();
+               reloading = false;
+            }, 10);
+         });
+         rerun();
+      });
+   };
+}
+
+export function createHotPromiseWindowFactory<R = any>(
+   module: HotModule,
+   factory: (resolve: (value: R | PromiseLike<R>) => void, reject: (reason?: any) => void) => Overlay,
+): (options?: HotPromiseWindowFactoryOptions) => Promise<R> {
+   let result = createHotPromiseWindowFactoryWithProps(module, () => factory);
+   return (options?: HotPromiseWindowFactoryOptions) => result(null, options);
+}
diff --git a/packages/cx/src/widgets/overlay/index.js b/packages/cx/src/widgets/overlay/index.ts
similarity index 100%
rename from packages/cx/src/widgets/overlay/index.js
rename to packages/cx/src/widgets/overlay/index.ts
diff --git a/packages/cx/src/widgets/overlay/tooltip-ops.d.ts b/packages/cx/src/widgets/overlay/tooltip-ops.d.ts
deleted file mode 100644
index a299d4d38..000000000
--- a/packages/cx/src/widgets/overlay/tooltip-ops.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export function tooltipMouseMove(e, parentInstance, tooltip, options?);
-
-export function tooltipMouseLeave(e, parentInstance, tooltip, options?);
-
-export function tooltipParentDidMount(element, parentInstance, tooltip, options);
-
-export function tooltipParentWillReceiveProps(element, parentInstance, tooltip, options);
-
-export function tooltipParentWillUnmount(parentInstance);
-
-export function tooltipParentDidUpdate(element, parentInstance, tooltip);
diff --git a/packages/cx/src/widgets/overlay/tooltip-ops.js b/packages/cx/src/widgets/overlay/tooltip-ops.js
deleted file mode 100644
index 00f3b4a15..000000000
--- a/packages/cx/src/widgets/overlay/tooltip-ops.js
+++ /dev/null
@@ -1,29 +0,0 @@
-let impl = false;
-
-export function tooltipMouseMove(e, parentInstance, tooltip, options = {}) {
-   return impl && impl.tooltipMouseMove.apply(impl, arguments);
-}
-
-export function tooltipMouseLeave(e, parentInstance, tooltip, options) {
-   return impl && impl.tooltipMouseLeave.apply(impl, arguments);
-}
-
-export function tooltipParentDidMount(element, parentInstance, tooltip, options) {
-   return impl && impl.tooltipParentDidMount.apply(impl, arguments);
-}
-
-export function tooltipParentWillReceiveProps(element, parentInstance, tooltip, options) {
-   return impl && impl.tooltipParentWillReceiveProps.apply(impl, arguments);
-}
-
-export function tooltipParentWillUnmount(parentInstance) {
-   return impl && impl.tooltipParentWillUnmount.apply(impl, arguments);
-}
-
-export function tooltipParentDidUpdate(element, parentInstance, tooltip) {
-   return impl && impl.tooltipParentDidUpdate.apply(impl, arguments);
-}
-
-export function wireTooltipOps(ops) {
-   impl = ops;
-}
diff --git a/packages/cx/src/widgets/overlay/tooltip-ops.ts b/packages/cx/src/widgets/overlay/tooltip-ops.ts
new file mode 100644
index 000000000..df4c900b1
--- /dev/null
+++ b/packages/cx/src/widgets/overlay/tooltip-ops.ts
@@ -0,0 +1,173 @@
+import { BooleanProp, StringProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+import { DropdownConfig } from "./Dropdown";
+import type { TooltipInstance } from "./Tooltip";
+
+export interface TooltipConfig extends DropdownConfig {
+   /** Text to be displayed inside the tooltip. */
+   text?: StringProp;
+
+   /** Text to be displayed in the header. */
+   title?: StringProp;
+
+   /**
+    * Set to true to make the tooltip always visible.
+    * This is useful e.g. in product tours, when instructions need to be shown, even if the mouse pointer is not around.
+    */
+   alwaysVisible?: BooleanProp;
+
+   /** Base CSS class to be applied to the field. Defaults to 'tooltip'. */
+   baseClass?: string;
+
+   /**
+    * Set to `true` to append the set `animate` state after the initial render.
+    * Appended CSS class may be used to add show/hide animations.
+    */
+   animate?: boolean;
+
+   /** Set to `true` to make the tooltip follow the mouse movement. */
+   trackMouse?: boolean;
+
+   trackMouseX?: boolean;
+   trackMouseY?: boolean;
+
+   /**
+    * This property controls how tooltips behave on touch events.
+    * Default value is `toggle` which means that the tooltip is shown on first tap and closed on the second tap.
+    * Use `ignore` to skip showing tooltips on touch events.
+    */
+   touchBehavior?: string;
+
+   /**
+    * Set to true to rely on browser's window mousemove event for getting mouse coordinates
+    * instead of using the element that tooltip is attached to.
+    */
+   globalMouseTracking?: boolean;
+
+   /** Tooltips are hidden as soon as the mouse leaves the related widget. Set this to true to keep the tooltip
+    * while the mouse is inside the tooltip itself. */
+   mouseTrap?: boolean;
+}
+
+export type TooltipProp = TooltipConfig | StringProp;
+
+/**
+ * Options passed to tooltip functions
+ */
+export interface TooltipOptions {
+   target?: Element;
+   tooltipName?: string;
+   data?: any;
+}
+
+export interface TooltipParentInstance {
+   tooltips: { [key: string]: TooltipInstance };
+}
+
+/**
+ * Tooltip operations implementation interface
+ * This is the actual implementation that gets wired via wireTooltipOps
+ */
+export interface TooltipOperations {
+   tooltipMouseMove(
+      e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent | Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+      options?: TooltipOptions,
+   ): void;
+
+   tooltipMouseLeave(
+      e: MouseEvent | React.MouseEvent | Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+      options?: TooltipOptions,
+   ): void;
+
+   tooltipParentDidMount(
+      element: Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+      options?: TooltipOptions,
+   ): void;
+
+   tooltipParentWillReceiveProps(
+      element: Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+      options?: TooltipOptions,
+   ): void;
+
+   tooltipParentWillUnmount(parentInstance: Instance & TooltipParentInstance): void;
+
+   tooltipParentDidUpdate(
+      element: Element,
+      parentInstance: Instance & TooltipParentInstance,
+      tooltip: TooltipProp | undefined,
+   ): void;
+}
+
+let impl: TooltipOperations | false = false;
+
+export function tooltipMouseMove(
+   e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent | Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipOptions,
+): void {
+   if (impl && tooltip) {
+      impl.tooltipMouseMove.call(impl, e, parentInstance, tooltip, options);
+   }
+}
+
+export function tooltipMouseLeave(
+   e: MouseEvent | React.MouseEvent | Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipOptions,
+): void {
+   if (impl && tooltip) {
+      impl.tooltipMouseLeave.call(impl, e, parentInstance, tooltip, options);
+   }
+}
+
+export function tooltipParentDidMount(
+   element: Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipOptions,
+): void {
+   if (impl) {
+      impl.tooltipParentDidMount.call(impl, element, parentInstance, tooltip, options);
+   }
+}
+
+export function tooltipParentWillReceiveProps(
+   element: Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipOptions,
+): void {
+   if (impl) {
+      impl.tooltipParentWillReceiveProps.call(impl, element, parentInstance, tooltip, options);
+   }
+}
+
+export function tooltipParentWillUnmount(parentInstance: Instance & TooltipParentInstance): void {
+   if (impl) {
+      impl.tooltipParentWillUnmount.call(impl, parentInstance);
+   }
+}
+
+export function tooltipParentDidUpdate(
+   element: Element,
+   parentInstance: Instance & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+): void {
+   if (impl) {
+      impl.tooltipParentDidUpdate.call(impl, element, parentInstance, tooltip);
+   }
+}
+
+export function wireTooltipOps(ops: TooltipOperations): void {
+   impl = ops;
+}
diff --git a/packages/cx/src/widgets/overlay/variables.scss b/packages/cx/src/widgets/overlay/variables.scss
index 859f6ea58..0a01b6e39 100644
--- a/packages/cx/src/widgets/overlay/variables.scss
+++ b/packages/cx/src/widgets/overlay/variables.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // TOOLTIP
 $cx-tooltip-background-color: white !default;
 $cx-tooltip-border-color: #d5d5d5 !default;
@@ -69,7 +71,7 @@ $cx-toast-mods: (
 // WINDOW
 @import "Window.variables";
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/Overlay": "cx/widgets/captureMouse",
diff --git a/packages/cx/src/widgets/variables.scss b/packages/cx/src/widgets/variables.scss
index 7779b005e..d49261c63 100644
--- a/packages/cx/src/widgets/variables.scss
+++ b/packages/cx/src/widgets/variables.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // Padding
 $cx-default-padding-extra-small: 3px !default;
 $cx-default-padding-small: 5px !default;
@@ -132,7 +134,7 @@ $cx-highlightedsearchtext-style-map: (
    @extend .cxm-card !optional;
 }
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/FlexRow": "cx/widgets/FlexBox",
diff --git a/packages/cx/svg.d.ts b/packages/cx/svg.d.ts
deleted file mode 100644
index 826c3e16b..000000000
--- a/packages/cx/svg.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './src/svg';
\ No newline at end of file
diff --git a/packages/cx/svg.js b/packages/cx/svg.js
deleted file mode 100644
index 2c22f3776..000000000
--- a/packages/cx/svg.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/svg';
\ No newline at end of file
diff --git a/packages/cx/tsconfig.compile.json b/packages/cx/tsconfig.compile.json
new file mode 100644
index 000000000..f62d80ee6
--- /dev/null
+++ b/packages/cx/tsconfig.compile.json
@@ -0,0 +1,4 @@
+{
+   "extends": "./tsconfig.json",
+   "exclude": ["dist", "build", "**/*.spec.*"]
+}
diff --git a/packages/cx/tsconfig.json b/packages/cx/tsconfig.json
new file mode 100644
index 000000000..d4aa39652
--- /dev/null
+++ b/packages/cx/tsconfig.json
@@ -0,0 +1,34 @@
+{
+   "compilerOptions": {
+      "target": "es2024",
+      "jsx": "react-jsx",
+      "jsxImportSource": "cx",
+      "allowJs": false,
+      "moduleResolution": "bundler",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "ESNext"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx/jsx-runtime": ["./jsx-runtime"]
+      },
+      "outDir": "./build",
+      "rootDir": "./src",
+      "declaration": true,
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictBindCallApply": true,
+      "strictPropertyInitialization": false,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "downlevelIteration": true,
+      "removeComments": false
+   },
+   "exclude": ["dist", "build"],
+   "include": ["src"]
+}
diff --git a/packages/cx/tsconfig.mocha.json b/packages/cx/tsconfig.mocha.json
new file mode 100644
index 000000000..6ae17f31c
--- /dev/null
+++ b/packages/cx/tsconfig.mocha.json
@@ -0,0 +1,14 @@
+{
+   "extends": "./tsconfig.json",
+   "compilerOptions": {
+      "module": "nodenext",
+      "moduleResolution": "nodenext",
+      "noEmit": true,
+      "paths": {
+         "cx/jsx-runtime": ["./src/jsx-runtime"]
+      }
+   },
+   "ts-node": {
+      "require": ["tsconfig-paths/register"]
+   }
+}
diff --git a/packages/cx/ui.d.ts b/packages/cx/ui.d.ts
deleted file mode 100644
index 486b34f4f..000000000
--- a/packages/cx/ui.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './src/ui';
\ No newline at end of file
diff --git a/packages/cx/ui.js b/packages/cx/ui.js
deleted file mode 100644
index 89ddab63f..000000000
--- a/packages/cx/ui.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/ui';
\ No newline at end of file
diff --git a/packages/cx/util.d.ts b/packages/cx/util.d.ts
deleted file mode 100644
index 733981c8d..000000000
--- a/packages/cx/util.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './src/util';
\ No newline at end of file
diff --git a/packages/cx/util.js b/packages/cx/util.js
deleted file mode 100644
index 4bd5bbd80..000000000
--- a/packages/cx/util.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/util';
\ No newline at end of file
diff --git a/packages/cx/widgets.d.ts b/packages/cx/widgets.d.ts
deleted file mode 100644
index abf3f5e34..000000000
--- a/packages/cx/widgets.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './src/widgets';
\ No newline at end of file
diff --git a/packages/cx/widgets.js b/packages/cx/widgets.js
deleted file mode 100644
index 8ad0220bc..000000000
--- a/packages/cx/widgets.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/widgets';
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-imports/.cargo/config.toml b/packages/swc-plugin-transform-cx-imports/.cargo/config.toml
deleted file mode 100644
index dc0be7321..000000000
--- a/packages/swc-plugin-transform-cx-imports/.cargo/config.toml
+++ /dev/null
@@ -1,2 +0,0 @@
-[build]
-target = "wasm32-wasip1"
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-imports/Cargo.toml b/packages/swc-plugin-transform-cx-imports/Cargo.toml
index 5edb06f8b..894b39b4d 100644
--- a/packages/swc-plugin-transform-cx-imports/Cargo.toml
+++ b/packages/swc-plugin-transform-cx-imports/Cargo.toml
@@ -16,13 +16,8 @@ strip = "symbols"
 [dependencies]
 lazy_static = "1.4.0"
 regex = "1.10.3"
-swc_common = { version = "14.0.4", features = ["concurrent"] }
-swc_core = { version = "42.1.0", features = ["ecma_plugin_transform"] }
-swc_ecma_ast = "15.0.0"
-swc_ecma_utils = "21.0.0"
-swc_ecma_visit = "15.0.0"
+swc_core = { version = "50.1.3", features = ["ecma_plugin_transform", "ecma_visit", "ecma_ast", "ecma_parser", "common"] }
 serde_json = "1.0.145"
-swc_ecma_parser = "24.0.1"
 wasm-bindgen = "0.2"
 
 [dev-dependencies]
diff --git a/packages/swc-plugin-transform-cx-imports/pkg/package.json b/packages/swc-plugin-transform-cx-imports/pkg/package.json
index fae29d750..a04683991 100644
--- a/packages/swc-plugin-transform-cx-imports/pkg/package.json
+++ b/packages/swc-plugin-transform-cx-imports/pkg/package.json
@@ -1,38 +1,20 @@
 {
-   "name": "swc-plugin-transform-cx-imports",
-   "version": "25.9.1",
-   "description": "Rewrite Cx imports for simplicity and optimal output size.",
-   "repository": {
-      "type": "git",
-      "url": "git+https://github.com/codaxy/cxjs.git"
-   },
-   "author": "Codaxy",
-   "license": "SEE LICENSE IN LICENSE.md",
-   "main": "swc_plugin_transform_cx_imports.js",
-   "homepage": "https://cxjs.io",
-   "scripts": {
-      "test": "cargo test",
-      "build": "cargo build --release --target wasm32-wasip1"
-   },
-   "files": [
-      "swc_plugin_transform_cx_imports_bg.wasm",
-      "swc_plugin_transform_cx_imports.js",
-      "swc_plugin_transform_cx_imports_bg.js",
-      "swc_plugin_transform_cx_imports.d.ts",
-      "LICENSE.md",
-      "README.md"
-   ],
-   "module": "swc_plugin_transform_cx_imports.js",
-   "types": "swc_plugin_transform_cx_imports.d.ts",
-   "keywords": [
-      "swc-plugin",
-      "swc",
-      "es2015",
-      "es2016",
-      "cx",
-      "jsx"
-   ],
-   "bugs": {
-      "url": "https://github.com/codaxy/cxjs/issues"
-   }
-}
+  "name": "swc-plugin-transform-cx-imports",
+  "type": "module",
+  "description": "Rewrite Cx imports for simplicity and optimal output size.",
+  "version": "26.0.1",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "files": [
+    "swc_plugin_transform_cx_imports_bg.wasm",
+    "swc_plugin_transform_cx_imports.js",
+    "swc_plugin_transform_cx_imports_bg.js",
+    "swc_plugin_transform_cx_imports.d.ts",
+    "LICENSE.md"
+  ],
+  "main": "swc_plugin_transform_cx_imports.js",
+  "types": "swc_plugin_transform_cx_imports.d.ts",
+  "sideEffects": [
+    "./swc_plugin_transform_cx_imports.js",
+    "./snippets/*"
+  ]
+}
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-imports/src/lib.rs b/packages/swc-plugin-transform-cx-imports/src/lib.rs
index f19121f07..f46e3d987 100644
--- a/packages/swc-plugin-transform-cx-imports/src/lib.rs
+++ b/packages/swc-plugin-transform-cx-imports/src/lib.rs
@@ -3,13 +3,13 @@ use std::collections::{HashMap, HashSet};
 use lazy_static::lazy_static;
 use regex::Regex;
 
-use swc_common::{util::take::Take, DUMMY_SP};
+use swc_core::common::{util::take::Take, DUMMY_SP};
 use swc_core::plugin::{plugin_transform, proxies::TransformPluginProgramMetadata};
-use swc_ecma_ast::{
-    ImportDecl, ImportPhase, ImportSpecifier, ModuleDecl, ModuleExportName, ModuleItem, Program,
+use swc_core::ecma::ast::{
+    ImportDecl, ImportPhase, ImportSpecifier, Module, ModuleDecl, ModuleExportName, ModuleItem, Program,
     Str,
 };
-use swc_ecma_visit::{visit_mut_pass, VisitMut, VisitMutWith};
+use swc_core::ecma::visit::{visit_mut_pass, VisitMut, VisitMutWith};
 
 lazy_static! {
     static ref QUOTES_REGEX: Regex = Regex::new(r#""|'"#).unwrap();
@@ -62,12 +62,10 @@ impl TransformVisitor {
 }
 
 impl VisitMut for TransformVisitor {
-    fn visit_mut_import_decl(&mut self, n: &mut swc_ecma_ast::ImportDecl) {
+    fn visit_mut_import_decl(&mut self, n: &mut ImportDecl) {
         let source = *n.src.clone();
         let mut changes = false;
-        match source.raw {
-            Some(source_atom) => {
-                let src = source_atom.as_str();
+        if let Some(src) = source.value.as_str() {
                 let replaced = QUOTES_REGEX.replace_all(src, r"").to_string();
                 if true {
                     let stripped_format = &replaced[3..replaced.len()]; // Strip the cx/ part and the quotes
@@ -83,7 +81,7 @@ impl VisitMut for TransformVisitor {
                                                 component_name = ident.sym.as_str();
                                             }
                                             ModuleExportName::Str(str) => {
-                                                component_name = str.value.as_str();
+                                                component_name = str.value.as_str().unwrap_or("");
                                             }
                                         };
                                     }
@@ -128,8 +126,6 @@ impl VisitMut for TransformVisitor {
                         }
                     });
                 }
-            }
-            None => {}
         }
 
         if changes == true {
@@ -139,7 +135,7 @@ impl VisitMut for TransformVisitor {
         n.visit_mut_children_with(self);
     }
 
-    fn visit_mut_module(&mut self, n: &mut swc_ecma_ast::Module) {
+    fn visit_mut_module(&mut self, n: &mut Module) {
         n.visit_mut_children_with(self);
 
         let new_imports = self
@@ -176,8 +172,10 @@ impl VisitMut for TransformVisitor {
             ModuleItem::ModuleDecl(decl) => match decl.to_owned() {
                 ModuleDecl::Import(import) => {
                     let str = *import.src;
-                    if str.value.to_owned().is_empty() {
-                        return false;
+                    if let Some(value) = str.value.as_str() {
+                        if value.is_empty() {
+                            return false;
+                        }
                     }
 
                     return true;
@@ -267,7 +265,7 @@ fn exec(input: std::path::PathBuf) {
                 serde_json::from_str(value.as_str()).unwrap();
 
             swc_core::ecma::transforms::testing::test_fixture(
-                swc_ecma_parser::Syntax::Typescript(Default::default()),
+                swc_core::ecma::parser::Syntax::Typescript(Default::default()),
                 &|_| {
                     (
                         swc_core::ecma::transforms::base::resolver(
diff --git a/packages/swc-plugin-transform-cx-jsx/.cargo/config.toml b/packages/swc-plugin-transform-cx-jsx/.cargo/config.toml
deleted file mode 100644
index dc0be7321..000000000
--- a/packages/swc-plugin-transform-cx-jsx/.cargo/config.toml
+++ /dev/null
@@ -1,2 +0,0 @@
-[build]
-target = "wasm32-wasip1"
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/.gitignore b/packages/swc-plugin-transform-cx-jsx/.gitignore
index 11e0dd9f2..fa9ac0483 100644
--- a/packages/swc-plugin-transform-cx-jsx/.gitignore
+++ b/packages/swc-plugin-transform-cx-jsx/.gitignore
@@ -13,4 +13,4 @@ Cargo.lock
 # MSVC Windows builds of rustc generate these, which store debugging information
 *.pdb
 
-pkg/swc_plugin_transform_cx*
\ No newline at end of file
+pkg
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/Cargo.toml b/packages/swc-plugin-transform-cx-jsx/Cargo.toml
index 89f41cd55..f2243ca6d 100644
--- a/packages/swc-plugin-transform-cx-jsx/Cargo.toml
+++ b/packages/swc-plugin-transform-cx-jsx/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "swc-plugin-transform-cx-jsx"
-version = "24.5.1"
+version = "26.0.5"
 edition = "2021"
 license = "SEE LICENSE IN LICENSE.md"
 description = "Transpile JSX into Cx config objects."
@@ -18,13 +18,12 @@ strip = "symbols"
 [dependencies]
 lazy_static = "1.4.0"
 regex = "1.10.3"
-swc_common = { version = "14.0.4", features = ["concurrent"] }
-swc_core = { version = "42.1.0", features = ["ecma_plugin_transform"] }
-swc_ecma_visit = "15.0.0"
-swc_ecma_ast = "15.0.0"
+swc_core = { version = "50.1.3", features = ["ecma_plugin_transform", "ecma_visit", "ecma_ast", "ecma_parser", "common"] }
 serde_json = "1.0.145"
-swc_ecma_parser = "24.0.1"
 wasm-bindgen = "0.2"
+tracing = "0.1"
+tracing-subscriber = { version = "0.3", features = ["env-filter", "json"] }
+serde = { version = "1.0", features = ["derive"] }
 
 [dev-dependencies]
 testing = "15.0.0"
diff --git a/packages/swc-plugin-transform-cx-jsx/DEBUG.md b/packages/swc-plugin-transform-cx-jsx/DEBUG.md
new file mode 100644
index 000000000..3bd394085
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/DEBUG.md
@@ -0,0 +1,290 @@
+# SWC CX JSX Transform Plugin - Debugging & Tracing Guide
+
+This plugin now includes comprehensive tracing and debugging capabilities to help you understand and troubleshoot JSX transformations.
+
+## Features
+
+- **Structured Logging**: Multi-level logging (trace, debug, info, warn, error)
+- **Transformation Tracking**: See exactly what the plugin is doing at each step
+- **Import Tracking**: Monitor when and how imports are being added
+- **AST Inspection**: Optionally print AST before and after transformation
+- **Better Error Handling**: Graceful error handling with detailed error messages instead of panics
+
+## Configuration
+
+Add a `debug` configuration object to your plugin options:
+
+```javascript
+{
+  jsc: {
+    experimental: {
+      plugins: [
+        [
+          '@swc/plugin-transform-cx-jsx',
+          {
+            debug: {
+              // Enable tracing output (default: false)
+              enableTracing: true,
+              
+              // Log level: "trace" | "debug" | "info" | "warn" | "error" (default: "info")
+              logLevel: "debug",
+              
+              // Print AST before transformation (default: false)
+              printAstBefore: false,
+              
+              // Print AST after transformation (default: false)
+              printAstAfter: false,
+              
+              // Log each transformation step (default: false)
+              logTransformations: true,
+              
+              // Log import injection details (default: false)
+              logImports: true
+            }
+          }
+        ]
+      ]
+    }
+  }
+}
+```
+
+## Log Levels
+
+### TRACE
+Most detailed logging - shows every single operation
+```json
+{ "logLevel": "trace" }
+```
+
+### DEBUG
+Detailed debugging information about transformations
+```json
+{ "logLevel": "debug" }
+```
+
+### INFO (Default)
+General information about plugin execution
+```json
+{ "logLevel": "info" }
+```
+
+### WARN
+Warning messages for potentially problematic situations
+```json
+{ "logLevel": "warn" }
+```
+
+### ERROR
+Only error messages
+```json
+{ "logLevel": "error" }
+```
+
+## Common Use Cases
+
+### Basic Debugging
+See what the plugin is doing without overwhelming output:
+
+```javascript
+{
+  debug: {
+    enableTracing: true,
+    logLevel: "info",
+    logTransformations: true
+  }
+}
+```
+
+### Deep Debugging
+Maximum verbosity for tracking down issues:
+
+```javascript
+{
+  debug: {
+    enableTracing: true,
+    logLevel: "trace",
+    logTransformations: true,
+    logImports: true
+  }
+}
+```
+
+### Import Tracking
+Focus on understanding import injection:
+
+```javascript
+{
+  debug: {
+    enableTracing: true,
+    logLevel: "debug",
+    logImports: true
+  }
+}
+```
+
+### AST Inspection
+Examine the AST structure before and after transformation:
+
+```javascript
+{
+  debug: {
+    enableTracing: true,
+    logLevel: "debug",
+    printAstBefore: true,
+    printAstAfter: true
+  }
+}
+```
+
+## Output Format
+
+Logs are written to **stderr** in a structured format:
+
+```
+2025-12-12T10:30:45.123Z  INFO swc_plugin_transform_cx_jsx: Starting SWC CX JSX transformation plugin
+2025-12-12T10:30:45.124Z DEBUG swc_plugin_transform_cx_jsx: Processing element with tag: div
+2025-12-12T10:30:45.125Z  INFO swc_plugin_transform_cx_jsx: Transforming Cx container element: cx
+2025-12-12T10:30:45.126Z DEBUG swc_plugin_transform_cx_jsx: Converting lowercase tag 'div' to HtmlElement
+2025-12-12T10:30:45.127Z  INFO swc_plugin_transform_cx_jsx: Inserting import: HtmlElement from cx/widgets
+```
+
+## Environment Variables
+
+You can also control tracing via the `RUST_LOG` environment variable:
+
+```bash
+# Set log level via environment
+RUST_LOG=swc_plugin_transform_cx_jsx=debug npm run build
+
+# Maximum verbosity
+RUST_LOG=swc_plugin_transform_cx_jsx=trace npm run build
+
+# Only errors
+RUST_LOG=swc_plugin_transform_cx_jsx=error npm run build
+```
+
+## Performance Considerations
+
+- **Production**: Keep `enableTracing: false` (default) for best performance
+- **Development**: Enable tracing as needed for debugging
+- **CI/CD**: Use `logLevel: "warn"` or `"error"` to reduce log noise
+
+## Troubleshooting
+
+### No logs appearing?
+
+1. Make sure `enableTracing: true` is set
+2. Check that you're looking at stderr (not stdout)
+3. Verify log level is appropriate for the information you want
+
+### Too much output?
+
+1. Increase log level: `"trace"` → `"debug"` → `"info"`
+2. Disable specific logging: set `logTransformations: false` or `logImports: false`
+3. Focus on specific areas by adjusting individual flags
+
+### Performance impact?
+
+Tracing adds minimal overhead when disabled (default). When enabled:
+- `logLevel: "info"` - negligible impact (~1-2%)
+- `logLevel: "debug"` - small impact (~5-10%)
+- `logLevel: "trace"` - moderate impact (~15-25%)
+
+## Examples
+
+### Example 1: Debug why an import isn't being added
+
+```javascript
+// webpack.config.js or similar
+{
+  debug: {
+    enableTracing: true,
+    logLevel: "debug",
+    logImports: true
+  }
+}
+```
+
+Look for messages like:
+```
+DEBUG: Inserting import: HtmlElement from cx/widgets
+INFO: Adding 1 import declarations
+DEBUG: Creating import for symbols ["HtmlElement"] from 'cx/widgets'
+```
+
+### Example 2: Understand transformation flow
+
+```javascript
+{
+  debug: {
+    enableTracing: true,
+    logLevel: "debug",
+    logTransformations: true
+  }
+}
+```
+
+You'll see:
+```
+DEBUG: Processing element with tag: cx
+INFO: Transforming Cx container element: cx
+TRACE: Transforming expression of type: JSXElement
+DEBUG: Found Cx tag, transforming element: cx
+```
+
+### Example 3: Production build with error logging only
+
+```javascript
+{
+  debug: {
+    enableTracing: true,
+    logLevel: "error"
+  }
+}
+```
+
+Only critical errors will be logged.
+
+## Advanced: Instrumentation Points
+
+The plugin includes instrumentation at these key points:
+
+- `transform_cx_element` - Main transformation logic
+- `transform_cx_attribute` - JSX attribute processing
+- `transform_cx_child` - Child element processing
+- `insert_import` - Import injection
+- `visit_mut_program` - Program-level transformation
+- `visit_mut_jsx_element` - JSX element visiting
+- `visit_mut_expr` - Expression transformation
+- `visit_mut_call_expr` - Call expression handling
+- `visit_mut_import_decl` - Import declaration processing
+
+Each instrumentation point creates a tracing span that can be analyzed with tools like `tracing-subscriber`.
+
+## Contributing
+
+When adding new features or fixing bugs, please add appropriate tracing:
+
+```rust
+use tracing::{debug, info, trace, warn, error, instrument};
+
+#[instrument(skip(self), level = "debug")]
+fn my_function(&mut self, param: &str) {
+    debug!("Processing: {}", param);
+    
+    if something_important {
+        info!("Important event occurred");
+    }
+    
+    if potential_issue {
+        warn!("Potential issue detected");
+    }
+}
+```
+
+## See Also
+
+- [Tracing Documentation](https://docs.rs/tracing/)
+- [SWC Plugin Documentation](https://swc.rs/docs/plugin/ecmascript/getting-started)
+
diff --git a/packages/swc-plugin-transform-cx-jsx/DEVELOPMENT.md b/packages/swc-plugin-transform-cx-jsx/DEVELOPMENT.md
new file mode 100644
index 000000000..64621a3b9
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/DEVELOPMENT.md
@@ -0,0 +1,648 @@
+# SWC CX JSX Transform Plugin - Development Guide
+
+## 🚀 Quick Start
+
+```bash
+# Install dependencies (Rust toolchain required)
+rustup target add wasm32-wasip1
+
+# Build the plugin
+make build-plugin
+
+# Run tests
+make test-plugin
+
+# Check code
+make check
+```
+
+## 📋 Available Make Targets
+
+All commands are available via `make <target>`:
+
+| Target | Command | Description |
+|--------|---------|-------------|
+| `build-plugin` | `cargo build --target wasm32-wasip1 --release` | Build optimized WASM plugin for production |
+| `build-plugin-debug` | `cargo build --target wasm32-wasip1` | Build WASM plugin with debug symbols |
+| `test-plugin` | `cargo test --target x86_64-unknown-linux-gnu` | Run all tests on native target |
+| `test-plugin-all` | `cargo test --all-features --target x86_64-unknown-linux-gnu` | Run tests with all features enabled |
+| `check` | `cargo check` | Quick check compilation without building |
+| `check-wasm` | `cargo check --target wasm32-wasip1` | Check WASM target specifically |
+| `clippy` | `cargo clippy --all-targets --all-features` | Run Clippy linter |
+| `fmt` | `cargo fmt --all` | Format code with rustfmt |
+| `fmt-check` | `cargo fmt --all -- --check` | Check code formatting |
+| `clean` | `cargo clean` | Clean build artifacts |
+| `copy-docs` | `cp README.md DEVELOPMENT.md DEBUG.md pkg/` | Copy docs to pkg/ |
+| `copy-wasm` | `cp target/.../swc_plugin_*.wasm pkg/` | Copy WASM to pkg/ |
+| `prepare-pkg` | `build-plugin + copy-wasm + copy-docs` | Build + prepare package for publishing |
+| `watch` | `cargo watch -x 'check --target wasm32-wasip1'` | Watch mode for development |
+
+## 🛠️ Prerequisites
+
+### Required
+
+1. **Rust Toolchain** (1.70+)
+   ```bash
+   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+   ```
+
+2. **WASM Target**
+   ```bash
+   rustup target add wasm32-wasip1
+   ```
+
+3. **Node.js** (for npm scripts)
+   ```bash
+   # Any recent version of Node.js
+   node --version
+   ```
+
+### Optional (for development)
+
+4. **cargo-watch** (for watch mode)
+   ```bash
+   cargo install cargo-watch
+   ```
+
+5. **wasm-pack** (for alternative builds)
+   ```bash
+   cargo install wasm-pack
+   ```
+
+## 🏗️ Building the Plugin
+
+### Production Build
+
+```bash
+# Using npm script (recommended)
+make build-plugin
+
+# Or directly with cargo
+cargo build --target wasm32-wasip1 --release
+```
+
+**Output location:**
+```
+target/wasm32-wasip1/release/swc_plugin_transform_cx_jsx.wasm
+```
+
+**Build time:** ~1-2 minutes (first build), ~10-30 seconds (incremental)
+
+### Debug Build
+
+```bash
+make build-plugin:debug
+```
+
+**Output location:**
+```
+target/wasm32-wasip1/debug/swc_plugin_transform_cx_jsx.wasm
+```
+
+**Note:** Debug builds are larger and slower but include debug symbols for troubleshooting.
+
+### Why WASM32-WASIP1 Target?
+
+SWC plugins must be compiled to WebAssembly with WASI support:
+- **wasm32-wasip1**: WebAssembly System Interface (WASI) target
+- Required by SWC plugin system
+- Allows plugin to run in any JavaScript runtime
+
+## 🧪 Testing
+
+### Run All Tests
+
+```bash
+make test-plugin
+```
+
+This runs **43 test cases** covering:
+- JSX transformation
+- Attribute handling
+- Child element processing
+- Import injection
+- Functional components
+- Edge cases
+
+### Understanding Test Structure
+
+Tests are located in `tests/` directory:
+```
+tests/
+├── 00_formatting_non_cx_code/
+│   ├── input.js
+│   └── output.js
+├── 01_transforms_empty_cx_to_null/
+│   ├── input.js
+│   └── output.js
+...
+```
+
+Each test has:
+- `input.js` or `input.tsx` - Input code
+- `output.js` - Expected transformation result
+
+### Adding New Tests
+
+1. Create new directory in `tests/`:
+   ```bash
+   mkdir tests/44_my_new_test
+   ```
+
+2. Add input file:
+   ```javascript
+   // tests/44_my_new_test/input.js
+   const x = <cx><div>Hello</div></cx>;
+   ```
+
+3. Add expected output:
+   ```javascript
+   // tests/44_my_new_test/output.js
+   import { HtmlElement } from "cx/widgets";
+   const x = {
+     $type: HtmlElement,
+     tag: "div",
+     children: ["Hello"]
+   };
+   ```
+
+4. Run tests:
+   ```bash
+   make test-plugin
+   ```
+
+### Why Test on Native Target?
+
+```bash
+cargo test --target x86_64-unknown-linux-gnu
+```
+
+- WASM tests can't run directly (no WASM runtime in test environment)
+- Native target compiles the same Rust code for your machine
+- Allows unit testing without WASM complexity
+- Much faster test execution
+
+## 🔍 Code Quality
+
+### Check Compilation
+
+```bash
+# Quick check (no binary output)
+make check
+
+# Check WASM target specifically
+make check:wasm
+```
+
+### Linting with Clippy
+
+```bash
+make clippy
+```
+
+Clippy catches common mistakes and suggests Rust best practices.
+
+### Code Formatting
+
+```bash
+# Format code
+make fmt
+
+# Check if formatting is needed
+make fmt:check
+```
+
+### Pre-commit Checklist
+
+```bash
+make fmt          # Format code
+make clippy       # Lint code
+make test-plugin  # Run tests
+make build-plugin # Build release
+```
+
+## 🔧 Development Workflow
+
+### 1. Making Changes
+
+```bash
+# Start watch mode (optional)
+make watch
+
+# Edit src/lib.rs
+vim src/lib.rs
+
+# Check compilation
+make check
+```
+
+### 2. Testing Changes
+
+```bash
+# Run tests
+make test-plugin
+
+# If test fails, check output
+cargo test --target x86_64-unknown-linux-gnu -- --nocapture
+```
+
+### 3. Building Release
+
+```bash
+# Clean build
+make clean
+make build-plugin
+```
+
+### 4. Testing in Real Project
+
+#### Option A: Direct WASM Path (Quick Testing)
+
+```bash
+# After building
+make build-plugin
+
+# Use absolute path in your project's webpack/swc config
+{
+  jsc: {
+    experimental: {
+      plugins: [
+        [
+          "/absolute/path/to/cxjs/packages/swc-plugin-transform-cx-jsx/target/wasm32-wasip1/release/swc_plugin_transform_cx_jsx.wasm",
+          { /* config */ }
+        ]
+      ]
+    }
+  }
+}
+```
+
+#### Option B: Local Package (Full Testing)
+
+```bash
+# Prepare package
+make prepare-pkg
+
+# Install in test project
+cd /path/to/test-project
+npm install /path/to/cxjs/packages/swc-plugin-transform-cx-jsx/pkg
+
+# Or use npm link
+cd /path/to/cxjs/packages/swc-plugin-transform-cx-jsx/pkg
+npm link
+cd /path/to/test-project
+npm link swc-plugin-transform-cx-jsx
+```
+
+#### Option C: Copy to node_modules (Quick Override)
+
+```bash
+# After building
+make copy-wasm
+make copy-docs
+
+# Copy entire pkg to test project
+cp -r pkg/* /path/to/project/node_modules/swc-plugin-transform-cx-jsx/
+```
+
+## 🐛 Debugging
+
+### Enable Tracing in Tests
+
+Add to test:
+```rust
+let debug_config = DebugConfig {
+    enable_tracing: true,
+    log_level: "debug".to_string(),
+    log_transformations: true,
+    log_imports: true,
+    ..Default::default()
+};
+```
+
+### Debug Print in Code
+
+```rust
+eprintln!("DEBUG: value = {:?}", some_value);
+```
+
+Note: Use `eprintln!` (stderr) not `println!` (stdout) in WASM context.
+
+### Run Single Test
+
+```bash
+cargo test --target x86_64-unknown-linux-gnu -- test_name
+```
+
+### Check Test Output
+
+```bash
+cargo test --target x86_64-unknown-linux-gnu -- --nocapture
+```
+
+## 📊 Build Artifacts
+
+### Directory Structure
+
+```
+swc-plugin-transform-cx-jsx/
+├── src/
+│   └── lib.rs              # Main plugin code
+├── tests/                  # Test cases
+├── target/
+│   ├── wasm32-wasip1/
+│   │   ├── debug/          # Debug WASM builds
+│   │   └── release/        # Release WASM builds
+│   └── x86_64-unknown-linux-gnu/
+│       └── debug/          # Native test builds
+├── Cargo.toml              # Rust package config
+├── Cargo.lock              # Dependency lock file
+├── package.json            # npm scripts
+└── README.md               # User documentation
+```
+
+### Build Output Sizes
+
+| Build Type | Size | Use Case |
+|------------|------|----------|
+| Debug WASM | ~5-8 MB | Development, debugging |
+| Release WASM | ~1-2 MB | Production |
+| Optimized WASM | ~500 KB - 1 MB | With wasm-opt |
+
+### Optimizing WASM Size
+
+Already enabled in `Cargo.toml`:
+```toml
+[profile.release]
+codegen-units = 1
+lto = true
+strip = "symbols"
+```
+
+Additional optimization (optional):
+```bash
+# Install wasm-opt
+npm install -g wasm-opt
+
+# Optimize WASM
+wasm-opt -Oz \
+  target/wasm32-wasip1/release/swc_plugin_transform_cx_jsx.wasm \
+  -o swc_plugin_transform_cx_jsx_optimized.wasm
+```
+
+## 📦 Packaging & Publishing
+
+### Available Package Scripts
+
+| Script | Description |
+|--------|-------------|
+| `copy-docs` | Copy README, DEVELOPMENT, and DEBUG docs to pkg/ |
+| `copy-wasm` | Copy built WASM file to pkg/ |
+| `prepare-pkg` | Build plugin + copy WASM + copy docs (all-in-one) |
+| `prepublish` | Automatically runs before `npm publish` in pkg/ |
+
+### Quick Package Preparation
+
+```bash
+# One command to prepare everything
+make prepare-pkg
+```
+
+This will:
+1. Build the optimized WASM plugin
+2. Copy WASM file to `pkg/swc_plugin_transform_cx_jsx_bg.wasm`
+3. Copy documentation files (README.md, DEVELOPMENT.md, DEBUG.md) to `pkg/`
+
+### What Gets Published
+
+The `pkg/` directory contains everything that gets published to npm:
+
+```
+pkg/
+├── swc_plugin_transform_cx_jsx_bg.wasm  # The actual plugin
+├── swc_plugin_transform_cx_jsx.js       # JS wrapper
+├── swc_plugin_transform_cx_jsx_bg.js    # WASM loader
+├── swc_plugin_transform_cx_jsx.d.ts     # TypeScript types
+├── LICENSE.md                            # License
+├── README.md                             # User guide (copied)
+├── DEVELOPMENT.md                        # Dev guide (copied)
+├── DEBUG.md                              # Debug guide (copied)
+└── package.json                          # npm metadata
+```
+
+All files listed in `files` array in `pkg/package.json` will be included in the npm package.
+
+## 🔄 Release Workflow
+
+### 1. Version Bump
+
+Update version in:
+- `Cargo.toml` - Rust package version
+- `pkg/package.json` - npm package version
+
+```bash
+# Example: bumping to 24.5.2
+vim Cargo.toml        # Update version = "24.5.2"
+vim pkg/package.json  # Update "version": "24.5.2"
+```
+
+### 2. Run Quality Checks
+
+```bash
+make clean
+make fmt
+make clippy
+make test-plugin
+```
+
+### 3. Prepare Package
+
+```bash
+# This builds plugin, copies WASM, and copies docs
+make prepare-pkg
+```
+
+### 4. Verify Package Contents
+
+```bash
+cd pkg
+npm publish --dry-run
+```
+
+This shows what files will be published. Verify:
+- ✅ WASM file is present and recent
+- ✅ Documentation files are present
+- ✅ Version number is correct
+- ✅ File sizes look reasonable
+
+### 5. Test Locally (Optional but Recommended)
+
+```bash
+# In pkg/ directory
+npm pack
+
+# This creates a .tgz file
+# Install it in a test project:
+cd /path/to/test-project
+npm install /path/to/pkg/swc-plugin-transform-cx-jsx-24.5.2.tgz
+```
+
+### 6. Publish to npm
+
+```bash
+cd pkg
+npm publish
+```
+
+The `prepublish` script will automatically run `prepare-pkg` before publishing.
+
+### 7. Tag Release in Git
+
+```bash
+git tag v24.5.2
+git push origin v24.5.2
+```
+
+## 🏷️ Cargo Profiles
+
+### Debug Profile (default)
+```bash
+cargo build --target wasm32-wasip1
+```
+- Fast compilation
+- Large binary
+- Includes debug symbols
+- No optimizations
+
+### Release Profile
+```bash
+cargo build --target wasm32-wasip1 --release
+```
+- Slow compilation
+- Small binary
+- Stripped symbols
+- Maximum optimizations
+
+## 🔗 Useful Commands
+
+### Check Rust Version
+```bash
+rustc --version
+cargo --version
+```
+
+### Update Dependencies
+```bash
+cargo update
+```
+
+### View Dependency Tree
+```bash
+cargo tree
+```
+
+### Audit Dependencies
+```bash
+cargo audit
+```
+
+### Generate Documentation
+```bash
+cargo doc --open
+```
+
+### Clean Specific Target
+```bash
+cargo clean --target wasm32-wasip1
+```
+
+## 💡 Tips & Tricks
+
+### Speed Up Compilation
+
+1. **Use cargo-watch for development:**
+   ```bash
+   make watch
+   ```
+
+2. **Incremental compilation** (enabled by default in debug)
+
+3. **Parallel compilation:**
+   ```bash
+   export CARGO_BUILD_JOBS=8
+   ```
+
+### Reduce WASM Size
+
+1. Already optimized in release profile
+2. Use `wasm-opt` for extra 10-20% reduction
+3. Consider feature flags to exclude unused code
+
+### Debug Performance Issues
+
+1. Enable timing info:
+   ```bash
+   cargo build --target wasm32-wasip1 --release --timings
+   ```
+
+2. Check tracing output in real usage:
+   ```bash
+   RUST_LOG=trace node build.js 2> debug.log
+   ```
+
+## 📚 Additional Resources
+
+- [SWC Plugin Documentation](https://swc.rs/docs/plugin/ecmascript/getting-started)
+- [Rust WASM Book](https://rustwasm.github.io/book/)
+- [SWC Core](https://github.com/swc-project/swc)
+- [Plugin Debugging Guide](./DEBUG.md)
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create feature branch
+3. Make changes
+4. Run tests: `make test-plugin`
+5. Run linter: `make clippy`
+6. Format code: `make fmt`
+7. Build release: `make build-plugin`
+8. Submit pull request
+
+## ⚠️ Common Issues
+
+### "target not found"
+```bash
+rustup target add wasm32-wasip1
+```
+
+### "linking with `rust-lld` failed"
+```bash
+rustup update
+```
+
+### Tests fail on WASM target
+```bash
+# Use native target instead
+make test-plugin
+```
+
+### Out of memory during build
+```bash
+# Reduce parallel jobs
+export CARGO_BUILD_JOBS=1
+make build-plugin
+```
+
+## 📝 Notes
+
+- Always build for `wasm32-wasip1` target for SWC plugins
+- Test on native target (`x86_64-unknown-linux-gnu`) for speed
+- Use debug builds during development
+- Use release builds for distribution
+- Keep `Cargo.lock` in version control
+- Clean build directory occasionally to save space
+
+---
+
+**Happy Development! 🎉**
+
diff --git a/packages/swc-plugin-transform-cx-jsx/Makefile b/packages/swc-plugin-transform-cx-jsx/Makefile
new file mode 100644
index 000000000..144f3f9a2
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/Makefile
@@ -0,0 +1,72 @@
+# SWC CX JSX Transform Plugin - Build Commands
+# Usage: make <target>
+
+.PHONY: help build-plugin build-plugin-debug test-plugin test-plugin-all check check-wasm clippy fmt fmt-check clean copy-docs copy-wasm prepare-pkg watch
+
+# Default target
+help:
+	@echo "Available targets:"
+	@echo "  build-plugin       - Build optimized WASM plugin"
+	@echo "  build-plugin-debug - Build WASM plugin with debug symbols"
+	@echo "  test-plugin        - Run all tests"
+	@echo "  test-plugin-all    - Run tests with all features"
+	@echo "  check              - Quick compilation check"
+	@echo "  check-wasm         - Check WASM target"
+	@echo "  clippy             - Run Clippy linter"
+	@echo "  fmt                - Format code"
+	@echo "  fmt-check          - Check code formatting"
+	@echo "  clean              - Clean build artifacts"
+	@echo "  copy-docs          - Copy docs to pkg/"
+	@echo "  copy-wasm          - Copy WASM to pkg/"
+	@echo "  prepare-pkg        - Build + copy everything"
+	@echo "  watch              - Watch mode for development"
+
+# Build targets
+build-plugin:
+	cargo build --target wasm32-wasip1 --release
+
+build-plugin-debug:
+	cargo build --target wasm32-wasip1
+
+# Test targets
+test-plugin:
+	cargo test --target x86_64-unknown-linux-gnu
+
+test-plugin-all:
+	cargo test --all-features --target x86_64-unknown-linux-gnu
+
+# Check targets
+check:
+	cargo check
+
+check-wasm:
+	cargo check --target wasm32-wasip1
+
+# Code quality
+clippy:
+	cargo clippy --all-targets --all-features
+
+fmt:
+	cargo fmt --all
+
+fmt-check:
+	cargo fmt --all -- --check
+
+# Cleanup
+clean:
+	cargo clean
+
+# Packaging
+copy-docs:
+	cp README.md DEVELOPMENT.md DEBUG.md pkg/
+
+copy-wasm:
+	cp target/wasm32-wasip1/release/swc_plugin_transform_cx_jsx.wasm pkg/swc_plugin_transform_cx_jsx_bg.wasm
+
+prepare-pkg: build-plugin copy-wasm copy-docs
+	@echo "Package prepared in pkg/"
+
+# Development
+watch:
+	cargo watch -x 'check --target wasm32-wasip1'
+
diff --git a/packages/swc-plugin-transform-cx-jsx/README.md b/packages/swc-plugin-transform-cx-jsx/README.md
index 31a782d2b..d09859008 100644
--- a/packages/swc-plugin-transform-cx-jsx/README.md
+++ b/packages/swc-plugin-transform-cx-jsx/README.md
@@ -145,4 +145,78 @@ const page = {
     },
   },
 }
-```
\ No newline at end of file
+```
+
+## 🐛 Debugging & Tracing
+
+This plugin now includes comprehensive debugging capabilities. Enable detailed logging to understand and troubleshoot transformations:
+
+```javascript
+{
+  loader: 'swc-loader',
+  options: {
+    jsc: {
+      experimental: {
+        plugins: [
+          [
+            require.resolve('swc-plugin-transform-cx-jsx/swc_plugin_transform_cx_jsx_bg.wasm'),
+            {
+              trimWhitespace: true,
+              autoImportHtmlElement: true,
+              debug: {
+                enableTracing: true,        // Enable debug output
+                logLevel: "debug",          // trace|debug|info|warn|error
+                logTransformations: true,   // Log transformation steps
+                logImports: true,           // Log import injection
+                printAstBefore: false,      // Print AST before transform
+                printAstAfter: false,       // Print AST after transform
+              }
+            }
+          ]
+        ]
+      }
+    }
+  }
+}
+```
+
+**Quick debugging:**
+```bash
+# Enable debug output
+DEBUG_CX=true npm run build
+
+# Set log level
+DEBUG_CX=true DEBUG_CX_LEVEL=trace npm run build
+
+# Use Rust log env
+RUST_LOG=swc_plugin_transform_cx_jsx=debug npm run build
+```
+
+**📖 See [DEBUG.md](./DEBUG.md) for comprehensive debugging guide.**
+
+## 🛠️ Development
+
+### Quick Start
+
+```bash
+# Build the plugin
+make build-plugin
+
+# Run tests
+make test-plugin
+
+# Check code
+make check
+```
+
+### Available Make Targets
+
+- `make build-plugin` - Build optimized WASM plugin
+- `make build-plugin-debug` - Build with debug symbols
+- `make test-plugin` - Run all tests
+- `make check` - Quick compilation check
+- `make clippy` - Run linter
+- `make fmt` - Format code
+- `make prepare-pkg` - Build + prepare for publishing
+
+**📖 See [DEVELOPMENT.md](./DEVELOPMENT.md) for complete development guide.**
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/SCRIPTS_SUMMARY.md b/packages/swc-plugin-transform-cx-jsx/SCRIPTS_SUMMARY.md
new file mode 100644
index 000000000..9302be027
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/SCRIPTS_SUMMARY.md
@@ -0,0 +1,240 @@
+# SWC CX JSX Plugin - Make Targets Summary
+
+## 📋 Quick Reference
+
+All commands use `make <script>`:
+
+### 🏗️ Building
+
+```bash
+make build-plugin          # Production build (optimized WASM)
+make build-plugin:debug    # Debug build (with symbols)
+```
+
+### 🧪 Testing
+
+```bash
+make test-plugin            # Run all 43 tests
+make test-plugin:all        # Run tests with all features
+```
+
+### ✅ Code Quality
+
+```bash
+make check                  # Quick compilation check
+make check:wasm             # Check WASM target
+make clippy                 # Lint with Clippy
+make fmt                    # Format code
+make fmt:check              # Check formatting
+```
+
+### 📦 Packaging
+
+```bash
+make copy-docs              # Copy docs to pkg/
+make copy-wasm              # Copy WASM to pkg/
+make prepare-pkg            # Build + copy everything
+```
+
+### 🔧 Maintenance
+
+```bash
+make clean                  # Clean build artifacts
+make watch                  # Watch mode for development
+```
+
+## 🚀 Common Workflows
+
+### Daily Development
+
+```bash
+# Start watch mode
+make watch
+
+# In another terminal, run tests when ready
+make test-plugin
+```
+
+### Before Commit
+
+```bash
+make fmt
+make clippy
+make test-plugin
+```
+
+### Prepare for Release
+
+```bash
+make clean
+make test-plugin
+make clippy
+make prepare-pkg
+
+cd pkg
+npm publish --dry-run  # Verify
+npm publish             # Ship it!
+```
+
+### Quick Test in Another Project
+
+```bash
+make build-plugin
+
+# Then use absolute path in that project's config
+"/absolute/path/to/.../target/wasm32-wasip1/release/swc_plugin_transform_cx_jsx.wasm"
+```
+
+## 📁 What Goes Where
+
+### Development Files (not published)
+
+```
+swc-plugin-transform-cx-jsx/
+├── src/lib.rs              # Source code
+├── Cargo.toml              # Rust config
+├── package.json            # Development scripts
+├── README.md               # Main documentation
+├── DEVELOPMENT.md          # This guide
+├── DEBUG.md                # Debugging guide
+└── tests/                  # Test cases
+```
+
+### Published Package (pkg/)
+
+```
+pkg/
+├── swc_plugin_transform_cx_jsx_bg.wasm   # Built plugin
+├── package.json                           # npm metadata
+├── README.md                              # Copied from root
+├── DEVELOPMENT.md                         # Copied from root
+└── DEBUG.md                               # Copied from root
+```
+
+## 🎯 Script Details
+
+### `build-plugin`
+- **Command:** `cargo build --target wasm32-wasip1 --release`
+- **Output:** `target/wasm32-wasip1/release/swc_plugin_transform_cx_jsx.wasm`
+- **Time:** 1-2 min first build, 10-30s incremental
+- **Use:** Production-ready optimized WASM
+
+### `test-plugin`
+- **Command:** `cargo test --target x86_64-unknown-linux-gnu`
+- **Runs:** 43 test cases
+- **Time:** ~5-10 seconds
+- **Use:** Verify transformations work correctly
+
+### `prepare-pkg`
+- **Runs:** `build-plugin` → `copy-wasm` → `copy-docs`
+- **Result:** Ready-to-publish `pkg/` directory
+- **Use:** Prepare for npm publish
+
+### `copy-docs`
+- **Copies:** README.md, DEVELOPMENT.md, DEBUG.md → pkg/
+- **Use:** Include documentation in npm package
+
+### `copy-wasm`
+- **Copies:** Built WASM → `pkg/swc_plugin_transform_cx_jsx_bg.wasm`
+- **Use:** Manual WASM update to pkg/
+
+## 💡 Tips
+
+### Speed Up Development
+
+```bash
+# Watch mode runs check automatically
+make watch
+
+# Skip full build during development
+make check
+```
+
+### Test Specific Case
+
+```bash
+cargo test --target x86_64-unknown-linux-gnu -- test_name
+```
+
+### Check What Will Be Published
+
+```bash
+cd pkg
+npm publish --dry-run
+```
+
+### Clean Everything
+
+```bash
+make clean
+rm -rf pkg/*.md pkg/*.wasm  # Clean copied files
+```
+
+## 🔄 Typical Development Cycle
+
+1. **Make changes** to `src/lib.rs`
+2. **Check** compilation: `make check`
+3. **Test** changes: `make test-plugin`
+4. **Format** code: `make fmt`
+5. **Lint** code: `make clippy`
+6. **Build** release: `make build-plugin`
+7. **Test** in real project (use absolute path or `npm link`)
+
+## 📦 Typical Release Cycle
+
+1. **Update** versions in `Cargo.toml` and `pkg/package.json`
+2. **Clean** build: `make clean`
+3. **Test**: `make test-plugin`
+4. **Lint**: `make clippy`
+5. **Prepare**: `make prepare-pkg`
+6. **Verify**: `cd pkg && npm publish --dry-run`
+7. **Publish**: `cd pkg && npm publish`
+8. **Tag**: `git tag vX.Y.Z && git push origin vX.Y.Z`
+
+## ⚠️ Important Notes
+
+- Always use `wasm32-wasip1` target for builds
+- Always use native target for tests (faster, can't run WASM tests directly)
+- `prepare-pkg` automatically runs before `npm publish` via `prepublish`
+- Documentation files are auto-copied to `pkg/` before publishing
+- WASM file must be named `swc_plugin_transform_cx_jsx_bg.wasm` in pkg/
+
+## 🆘 Troubleshooting
+
+### "target not found"
+```bash
+rustup target add wasm32-wasip1
+```
+
+### Scripts not found
+```bash
+# Make sure you're in the plugin directory
+cd packages/swc-plugin-transform-cx-jsx
+make build-plugin
+```
+
+### Docs not showing up in package
+```bash
+# Run prepare-pkg to copy everything
+make prepare-pkg
+
+# Verify files array in pkg/package.json includes:
+# "README.md", "DEVELOPMENT.md", "DEBUG.md"
+```
+
+### Old WASM file being used
+```bash
+make clean
+make prepare-pkg
+```
+
+## 📚 More Information
+
+- [DEVELOPMENT.md](./DEVELOPMENT.md) - Complete development guide
+- [DEBUG.md](./DEBUG.md) - Debugging and tracing guide
+- [README.md](./README.md) - User documentation
+
+---
+
+**Need help?** Check [DEVELOPMENT.md](./DEVELOPMENT.md) for detailed information.
+
diff --git a/packages/swc-plugin-transform-cx-jsx/pkg/LICENSE.MD b/packages/swc-plugin-transform-cx-jsx/pkg/LICENSE.MD
deleted file mode 100644
index a5650ee39..000000000
--- a/packages/swc-plugin-transform-cx-jsx/pkg/LICENSE.MD
+++ /dev/null
@@ -1,4 +0,0 @@
-This package is a part of the CxJS framework, which is available under
-different licensing options depending on the nature of your project.
-
-For more information, please refer to https://cxjs.io.
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/pkg/README.md b/packages/swc-plugin-transform-cx-jsx/pkg/README.md
index 31a782d2b..1fb174ba4 100644
--- a/packages/swc-plugin-transform-cx-jsx/pkg/README.md
+++ b/packages/swc-plugin-transform-cx-jsx/pkg/README.md
@@ -145,4 +145,78 @@ const page = {
     },
   },
 }
-```
\ No newline at end of file
+```
+
+## 🐛 Debugging & Tracing
+
+This plugin now includes comprehensive debugging capabilities. Enable detailed logging to understand and troubleshoot transformations:
+
+```javascript
+{
+  loader: 'swc-loader',
+  options: {
+    jsc: {
+      experimental: {
+        plugins: [
+          [
+            require.resolve('swc-plugin-transform-cx-jsx/swc_plugin_transform_cx_jsx_bg.wasm'),
+            {
+              trimWhitespace: true,
+              autoImportHtmlElement: true,
+              debug: {
+                enableTracing: true,        // Enable debug output
+                logLevel: "debug",          // trace|debug|info|warn|error
+                logTransformations: true,   // Log transformation steps
+                logImports: true,           // Log import injection
+                printAstBefore: false,      // Print AST before transform
+                printAstAfter: false,       // Print AST after transform
+              }
+            }
+          ]
+        ]
+      }
+    }
+  }
+}
+```
+
+**Quick debugging:**
+```bash
+# Enable debug output
+DEBUG_CX=true npm run build
+
+# Set log level
+DEBUG_CX=true DEBUG_CX_LEVEL=trace npm run build
+
+# Use Rust log env
+RUST_LOG=swc_plugin_transform_cx_jsx=debug npm run build
+```
+
+**📖 See [DEBUG.md](./DEBUG.md) for comprehensive debugging guide.**
+
+## 🛠️ Development
+
+### Quick Start
+
+```bash
+# Build the plugin
+npm run build-plugin
+
+# Run tests
+npm run test-plugin
+
+# Check code
+npm run check
+```
+
+### Available Scripts
+
+- `npm run build-plugin` - Build optimized WASM plugin
+- `npm run build-plugin:debug` - Build with debug symbols
+- `npm run test-plugin` - Run all tests
+- `npm run check` - Quick compilation check
+- `npm run clippy` - Run linter
+- `npm run fmt` - Format code
+- `npm run clean` - Clean build artifacts
+
+**📖 See [DEVELOPMENT.md](./DEVELOPMENT.md) for complete development guide.**
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/pkg/package.json b/packages/swc-plugin-transform-cx-jsx/pkg/package.json
index 9985fefa3..7d87fc187 100644
--- a/packages/swc-plugin-transform-cx-jsx/pkg/package.json
+++ b/packages/swc-plugin-transform-cx-jsx/pkg/package.json
@@ -1,36 +1,35 @@
 {
-   "name": "swc-plugin-transform-cx-jsx",
-   "version": "25.9.1",
-   "description": "Transpile JSX into Cx config objects.",
-   "repository": {
-      "type": "git",
-      "url": "git+https://github.com/codaxy/cxjs.git"
-   },
-   "author": "Codaxy",
-   "license": "SEE LICENSE IN LICENSE.md",
-   "main": "swc_plugin_transform_cx_jsx.wasm",
-   "homepage": "https://cxjs.io",
- "scripts": {
-      "test": "cargo test",
-      "build": "cargo build --release --target wasm32-wasip1"
-   },
-   "files": [
-      "swc_plugin_transform_cx_jsx_bg.wasm",
-      "swc_plugin_transform_cx_jsx.js",
-      "swc_plugin_transform_cx_jsx_bg.js",
-      "swc_plugin_transform_cx_jsx.d.ts",
-      "LICENSE.md",
-      "README.md"
-   ],
-   "keywords": [
-      "swc-plugin",
-      "swc",
-      "es2015",
-      "es2016",
-      "cx",
-      "jsx"
-   ],
-   "bugs": {
-      "url": "https://github.com/codaxy/cxjs/issues"
-   }
-}
+  "name": "swc-plugin-transform-cx-jsx",
+  "type": "module",
+  "description": "Transpile JSX into Cx config objects.",
+  "version": "26.0.5",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codaxy/cxjs"
+  },
+  "files": [
+    "swc_plugin_transform_cx_jsx_bg.wasm",
+    "swc_plugin_transform_cx_jsx.js",
+    "swc_plugin_transform_cx_jsx_bg.js",
+    "swc_plugin_transform_cx_jsx.d.ts",
+    "LICENSE.md",
+    "README.md",
+    "DEVELOPMENT.md",
+    "DEBUG.md"
+  ],
+  "main": "swc_plugin_transform_cx_jsx.js",
+  "types": "swc_plugin_transform_cx_jsx.d.ts",
+  "sideEffects": [
+    "./swc_plugin_transform_cx_jsx.js",
+    "./snippets/*"
+  ],
+  "keywords": [
+    "swc-plugin",
+    "swc",
+    "es2015",
+    "es2016",
+    "cx",
+    "jsx"
+  ]
+}
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/src/lib.rs b/packages/swc-plugin-transform-cx-jsx/src/lib.rs
index fc0c4ce55..f044813ec 100644
--- a/packages/swc-plugin-transform-cx-jsx/src/lib.rs
+++ b/packages/swc-plugin-transform-cx-jsx/src/lib.rs
@@ -1,24 +1,89 @@
-use std::borrow::BorrowMut;
 use std::collections::{HashMap, HashSet};
+use std::sync::atomic::{AtomicBool, Ordering};
 
 use lazy_static::lazy_static;
 use regex::Regex;
-use swc_common::{SyntaxContext, DUMMY_SP};
-use swc_core::ecma::ast::Program;
+use serde::{Deserialize, Serialize};
+use tracing::{debug, error, info, instrument, span, trace, warn, Level};
+use swc_core::common::{SyntaxContext, DUMMY_SP};
 use swc_core::ecma::ast::{
-    ArrayLit, BlockStmtOrExpr, CallExpr, Expr, ExprOrSpread, Ident, IdentName, ImportDecl,
+    Program, ArrayLit, BlockStmtOrExpr, CallExpr, Expr, ExprOrSpread, Ident, IdentName, ImportDecl,
     ImportNamedSpecifier, ImportSpecifier, JSXAttr, JSXAttrName, JSXAttrOrSpread, JSXAttrValue,
     JSXClosingElement, JSXElement, JSXElementChild, JSXElementName, JSXExpr, JSXExprContainer,
     JSXOpeningElement, JSXText, KeyValueProp, Lit, MemberExpr, MemberProp, Module, ModuleDecl,
-    ModuleItem, Null, ObjectLit, Prop, PropName, PropOrSpread, Str,
+    ModuleItem, Null, ObjectLit, Prop, PropName, PropOrSpread, Str, Callee, ImportPhase,
 };
+use swc_core::ecma::visit::{visit_mut_pass, VisitMut, VisitMutWith};
 use swc_core::plugin::{plugin_transform, proxies::TransformPluginProgramMetadata};
-use swc_ecma_ast::{Callee, ImportPhase};
-use swc_ecma_parser::TsSyntax;
-use swc_ecma_visit::{visit_mut_pass, VisitMut, VisitMutWith};
+
+// Constants for magic strings
+const CX_TAG_LOWERCASE: &str = "cx";
+const CX_TAG_CAPITALIZED: &str = "Cx";
+const HTML_ELEMENT_SYMBOL: &str = "HtmlElement";
+const CX_WIDGETS_PATH: &str = "cx/widgets";
+const CX_UI_PATH: &str = "cx/ui";
+const CREATE_FUNCTIONAL_COMPONENT: &str = "createFunctionalComponent";
+const JSX_ATTRIBUTES_KEY: &str = "jsxAttributes";
+const JSX_SPREAD_KEY: &str = "jsxSpread";
+const CHILDREN_KEY: &str = "children";
+const TYPE_KEY: &str = "$type";
+const TAG_KEY: &str = "tag";
+const ITEMS_KEY: &str = "items";
+
+lazy_static! {
+    static ref TRACING_INITIALIZED: AtomicBool = AtomicBool::new(false);
+}
+
+/// Configuration for debugging and tracing
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct DebugConfig {
+    /// Enable detailed tracing output
+    #[serde(default)]
+    pub enable_tracing: bool,
+    
+    /// Log level: "trace", "debug", "info", "warn", "error"
+    #[serde(default = "default_log_level")]
+    pub log_level: String,
+    
+    /// Print AST before transformation
+    #[serde(default)]
+    pub print_ast_before: bool,
+    
+    /// Print AST after transformation
+    #[serde(default)]
+    pub print_ast_after: bool,
+    
+    /// Log each transformation step
+    #[serde(default)]
+    pub log_transformations: bool,
+    
+    /// Log import injection details
+    #[serde(default)]
+    pub log_imports: bool,
+}
+
+fn default_log_level() -> String {
+    "info".to_string()
+}
+
+impl Default for DebugConfig {
+    fn default() -> Self {
+        Self {
+            enable_tracing: false,
+            log_level: default_log_level(),
+            print_ast_before: false,
+            print_ast_after: false,
+            log_transformations: false,
+            log_imports: false,
+        }
+    }
+}
 
 pub struct TransformVisitor {
     imports: HashMap<String, HashSet<String>>,
+    debug_config: DebugConfig,
+    transform_count: usize,
 }
 
 fn create_key_value_prop(key: String, value: Box<Expr>) -> PropOrSpread {
@@ -28,6 +93,11 @@ fn create_key_value_prop(key: String, value: Box<Expr>) -> PropOrSpread {
     })))
 }
 
+/// Checks if the given tag name is a cx or Cx tag
+fn is_cx_tag(tag_name: &str) -> bool {
+    matches!(tag_name, CX_TAG_LOWERCASE | CX_TAG_CAPITALIZED)
+}
+
 fn obj_key_identifier(name: &str) -> (Option<Str>, Option<Ident>) {
     let mut str: Option<Str> = None;
     let mut ident: Option<Ident> = None;
@@ -43,7 +113,7 @@ fn obj_key_identifier(name: &str) -> (Option<Str>, Option<Ident>) {
         });
     }
 
-    return (str, ident);
+    (str, ident)
 }
 
 lazy_static! {
@@ -53,9 +123,17 @@ lazy_static! {
 }
 
 impl TransformVisitor {
+    #[instrument(skip(self, expr), level = "debug")]
     fn transform_cx_element(&mut self, expr: &mut Expr) -> Expr {
+        let _span = span!(Level::TRACE, "transform_cx_element").entered();
+        
+        if self.debug_config.log_transformations {
+            trace!("Transforming expression of type: {:?}", std::mem::discriminant(expr));
+        }
+        
         match expr {
             Expr::JSXElement(jsx_el) => {
+                debug!("Processing JSX element");
                 let children: &mut Vec<JSXElementChild> = &mut jsx_el.children;
                 let opening: JSXOpeningElement = jsx_el.opening.clone();
                 let closing: &mut Option<JSXClosingElement> = &mut jsx_el.closing;
@@ -70,9 +148,19 @@ impl TransformVisitor {
                     _ => false,
                 });
 
+                if self.debug_config.log_transformations && ws_flag {
+                    trace!("Whitespace preservation flag detected");
+                }
+
                 if let JSXElementName::Ident(ident) = &opening.name {
                     let tag_name: String = ident.sym.to_string();
-                    if tag_name == "cx" || tag_name == "Cx" {
+                    
+                    if self.debug_config.log_transformations {
+                        debug!("Processing element with tag: {}", tag_name);
+                    }
+                    
+                    if is_cx_tag(&tag_name) {
+                        info!("Transforming Cx container element: {}", tag_name);
                         let mut transformed_children = children
                             .iter_mut()
                             .filter(|child| match *child {
@@ -102,8 +190,12 @@ impl TransformVisitor {
                                     }))
                                 }
                                 _ => {
-                                    println!("Error creating Cx react element");
-                                    panic!("Error creating Cx react element")
+                                    error!("Unexpected child type while creating Cx react element");
+                                    if self.debug_config.enable_tracing {
+                                        warn!("Child type: {:?}", std::mem::discriminant(child));
+                                    }
+                                    // Return null ExprOrSpread instead of panicking
+                                    Some(ExprOrSpread::from(NULL_LIT_EXPR.to_owned()))
                                 }
                             })
                             .collect::<Vec<_>>();
@@ -125,7 +217,7 @@ impl TransformVisitor {
 
                                 let ident_name = IdentName {
                                     span: DUMMY_SP,
-                                    sym: "items".into(),
+                                    sym: ITEMS_KEY.into(),
                                 };
 
                                 let items_attr = JSXAttr {
@@ -156,7 +248,7 @@ impl TransformVisitor {
                         return match transformed_children.len() {
                             0 => NULL_LIT_EXPR.to_owned(),
                             1 => {
-                                let only_child = transformed_children[0].borrow_mut();
+                                let only_child = &mut transformed_children[0];
 
                                 return match only_child {
                                     JSXElementChild::JSXElement(jsx_el) => {
@@ -175,8 +267,11 @@ impl TransformVisitor {
                                         }
                                     }
                                     _ => {
-                                        println!("Failed transforming only child");
-                                        panic!("Failed transforming only child.")
+                                        error!("Failed transforming only child - unexpected child type");
+                                        if self.debug_config.enable_tracing {
+                                            warn!("Child discriminant: {:?}", std::mem::discriminant(only_child));
+                                        }
+                                        NULL_LIT_EXPR.to_owned()
                                     }
                                 };
                             }
@@ -187,13 +282,15 @@ impl TransformVisitor {
                     let tag_first_char = tag_name.get(0..1).unwrap();
                     if tag_first_char.to_lowercase() == tag_first_char {
                         // HtmlElement
-                        let html_element_sym = "HtmlElement";
-                        self.insert_import("cx/src/widgets/HtmlElement.js", html_element_sym);
+                        if self.debug_config.log_transformations {
+                            debug!("Converting lowercase tag '{}' to HtmlElement", tag_name);
+                        }
+                        self.insert_import(CX_WIDGETS_PATH, HTML_ELEMENT_SYMBOL);
                         let html_element = create_key_value_prop(
-                            String::from("$type"),
+                            String::from(TYPE_KEY),
                             Box::from(Expr::Ident(Ident {
                                 span: DUMMY_SP,
-                                sym: html_element_sym.into(),
+                                sym: HTML_ELEMENT_SYMBOL.into(),
                                 optional: false,
                                 ctxt: SyntaxContext::empty(),
                             })),
@@ -203,7 +300,7 @@ impl TransformVisitor {
 
                         if let JSXElementName::Ident(_) = opening.name {
                             let tag = create_key_value_prop(
-                                String::from("tag"),
+                                String::from(TAG_KEY),
                                 Box::from(Expr::Lit(Lit::Str(tag_name.into()))),
                             );
 
@@ -212,7 +309,7 @@ impl TransformVisitor {
                     } else {
                         if let JSXElementName::Ident(ident) = opening.name {
                             let prop = create_key_value_prop(
-                                String::from("$type"),
+                                String::from(TYPE_KEY),
                                 Box::from(Expr::Ident(ident)),
                             );
 
@@ -241,8 +338,11 @@ impl TransformVisitor {
                             let attr_name = match processed {
                                 Prop::KeyValue(kv) => self.get_prop_name(&kv),
                                 _ => {
-                                    println!("cannot parse attr_names Prop");
-                                    panic!("cannot parse attr_names Prop")
+                                    error!("Cannot parse attr_names Prop - unexpected property type");
+                                    if self.debug_config.enable_tracing {
+                                        warn!("Prop discriminant: {:?}", std::mem::discriminant(&processed));
+                                    }
+                                    String::from("unknown")
                                 }
                             };
 
@@ -253,7 +353,7 @@ impl TransformVisitor {
 
                 if !spread.is_empty() {
                     attrs.push(PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
-                        key: PropName::Str("jsxSpread".into()),
+                        key: PropName::Str(JSX_SPREAD_KEY.into()),
                         value: Box::new(Expr::Array(ArrayLit {
                             span: DUMMY_SP,
                             elems: spread,
@@ -263,7 +363,7 @@ impl TransformVisitor {
 
                 if !attr_names.is_empty() {
                     attrs.push(PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
-                        key: PropName::Str("jsxAttributes".into()),
+                        key: PropName::Str(JSX_ATTRIBUTES_KEY.into()),
                         value: Box::new(Expr::Array(ArrayLit {
                             span: DUMMY_SP,
                             elems: attr_names
@@ -289,7 +389,7 @@ impl TransformVisitor {
                     });
 
                     attrs.push(PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
-                        key: PropName::Str("children".into()),
+                        key: PropName::Str(CHILDREN_KEY.into()),
                         value: Box::new(Expr::Array(ArrayLit {
                             span: DUMMY_SP,
                             elems: new_children
@@ -329,7 +429,7 @@ impl TransformVisitor {
                 if let JSXElementName::JSXMemberExpr(member_expr) = jsx_el.opening.name.to_owned() {
                     if member_expr.obj.to_owned().is_ident() {
                         let dot_prop = create_key_value_prop(
-                            String::from("$type"),
+                            String::from(TYPE_KEY),
                             Box::new(Expr::Member(MemberExpr {
                                 span: DUMMY_SP,
                                 obj: Box::new(Expr::Ident(
@@ -355,7 +455,15 @@ impl TransformVisitor {
                     .elems
                     .iter_mut()
                     .filter(|el| el.is_some())
-                    .for_each(|el| elems.push(el.to_owned()));
+                    .for_each(|el| {
+                        let transformed = el.as_mut().map(|spread| {
+                            ExprOrSpread {
+                                spread: spread.spread,
+                                expr: Box::new(self.transform_cx_element(&mut spread.expr)),
+                            }
+                        });
+                        elems.push(transformed);
+                    });
 
                 return Expr::Array(ArrayLit {
                     span: DUMMY_SP,
@@ -385,8 +493,11 @@ impl TransformVisitor {
                             Prop::Shorthand(_) => attrs.push(obj_props.to_owned()),
                             Prop::Method(_) => attrs.push(obj_props.to_owned()),
                             _ => {
-                                println!("EXPR OBJ PROPS");
-                                todo!("EXPR OBJ PROPS")
+                                warn!("Unhandled object property type encountered");
+                                if self.debug_config.enable_tracing {
+                                    debug!("Property discriminant: {:?}", std::mem::discriminant(&*prop));
+                                }
+                                attrs.push(obj_props.to_owned())
                             }
                         },
                         PropOrSpread::Spread(_) => attrs.push(obj_props.to_owned()),
@@ -401,24 +512,32 @@ impl TransformVisitor {
         }
     }
 
+    #[instrument(skip(self, kv_prop), level = "trace")]
     fn get_prop_name(&mut self, kv_prop: &KeyValueProp) -> String {
         match &kv_prop.key {
-            PropName::Ident(ident) => ident.sym.to_string(),
-            PropName::Str(str) => str.value.to_string(),
+            PropName::Ident(ident) => ident.sym.as_str().to_string(),
+            PropName::Str(str) => str.value.as_str().unwrap_or("").to_string(),
             PropName::Num(num) => num.value.to_string(),
             PropName::BigInt(big_int) => big_int.value.to_string(),
             _ => {
-                println!("cannot parse attr_names prop keyValue");
-                panic!("cannot parse attr_names prop keyValue")
+                error!("Cannot parse attr_names prop keyValue - unexpected key type");
+                if self.debug_config.enable_tracing {
+                    warn!("Key discriminant: {:?}", std::mem::discriminant(&kv_prop.key));
+                }
+                String::from("unknown_key")
             }
         }
     }
 
+    #[instrument(skip(self, attr), level = "trace")]
     fn transform_cx_attribute(&mut self, attr: JSXAttr) -> Prop {
+        if self.debug_config.log_transformations {
+            trace!("Transforming JSX attribute");
+        }
         match &attr.value {
             Some(value) => match value {
-                JSXAttrValue::Lit(lit) => {
-                    self.generate_cx_property(attr.name, Box::new(Expr::Lit(lit.to_owned())))
+                JSXAttrValue::Str(str_value) => {
+                    self.generate_cx_property(attr.name, Box::new(Expr::Lit(Lit::Str(str_value.to_owned()))))
                 }
                 JSXAttrValue::JSXElement(jsx_element) => {
                     let processed =
@@ -432,8 +551,8 @@ impl TransformVisitor {
                         return self.generate_cx_property(attr.name, Box::new(processed));
                     }
                     JSXExpr::JSXEmptyExpr(_) => {
-                        println!("EMPTY PROP EXPR");
-                        todo!("EMPTY PROP EXPR")
+                        warn!("Empty JSX expression in attribute - converting to null");
+                        self.generate_cx_property(attr.name, Box::new(NULL_LIT_EXPR.to_owned()))
                     }
                 },
                 _ => self.generate_cx_property(attr.name, Box::new(NULL_LIT_EXPR.to_owned())),
@@ -559,28 +678,195 @@ impl TransformVisitor {
         }
     }
 
+    #[instrument(skip(self), level = "debug")]
     fn insert_import(&mut self, key: &str, value: &str) {
+        if self.debug_config.log_imports {
+            info!("Inserting import: {} from {}", value, key);
+        }
+        
         if self.imports.contains_key(key) {
             self.imports.get_mut(key).unwrap().insert(value.into());
+            trace!("Added '{}' to existing import from '{}'", value, key);
         } else {
             let mut import_set: HashSet<String> = HashSet::new();
             import_set.insert(value.into());
             self.imports.insert(key.into(), import_set);
+            trace!("Created new import entry for '{}' from '{}'", value, key);
         }
     }
 }
 
 impl VisitMut for TransformVisitor {
+    #[instrument(skip(self, program), level = "info")]
+    fn visit_mut_program(&mut self, program: &mut Program) {
+        let _span = span!(Level::INFO, "visit_mut_program").entered();
+        
+        if self.debug_config.print_ast_before {
+            info!("AST before transformation: {:#?}", program);
+        }
+        
+        info!("Starting program transformation");
+        program.visit_mut_children_with(self);
+        info!("Completed program transformation. {} transformations applied", self.transform_count);
+
+        if self.imports.is_empty() {
+            debug!("No imports to add");
+            return;
+        }
+        
+        info!("Adding {} import declarations", self.imports.len());
+
+        // Convert Script to Module if we have imports to add
+        let module = match program {
+            Program::Module(module) => {
+                module
+            }
+            Program::Script(script) => {
+                // Convert Script to Module
+                let body = script.body.iter().map(|stmt| {
+                    ModuleItem::Stmt(stmt.clone())
+                }).collect();
+
+                *program = Program::Module(Module {
+                    span: script.span,
+                    body,
+                    shebang: script.shebang.clone(),
+                });
+
+                match program {
+                    Program::Module(m) => m,
+                    _ => unreachable!(),
+                }
+            }
+        };
+
+        // Collect already imported identifiers from the module
+        let mut existing_imports: HashMap<String, HashSet<String>> = HashMap::new();
+        for item in &module.body {
+            if let ModuleItem::ModuleDecl(ModuleDecl::Import(import_decl)) = item {
+                let src = import_decl.src.value.as_str().unwrap_or("").to_string();
+                for spec in &import_decl.specifiers {
+                    if let ImportSpecifier::Named(named) = spec {
+                        let local_name = named.local.sym.as_str().to_string();
+                        existing_imports.entry(src.clone()).or_insert_with(HashSet::new).insert(local_name);
+                    }
+                }
+            }
+        }
+
+        // Add imports only if they don't already exist
+        let mut new_imports: Vec<ModuleItem> = vec![];
+
+        self.imports.iter().for_each(|import| {
+            let source = import.0;
+            let symbols = import.1;
+
+            // Filter out symbols that are already imported from this source
+            let new_symbols: Vec<String> = if let Some(existing) = existing_imports.get(source) {
+                let filtered: Vec<String> = symbols.iter().filter(|s| !existing.contains(*s)).cloned().collect();
+                if self.debug_config.log_imports && !filtered.is_empty() {
+                    debug!("Filtered {} new symbols from '{}' (skipping {} existing)", 
+                           filtered.len(), source, symbols.len() - filtered.len());
+                }
+                filtered
+            } else {
+                if self.debug_config.log_imports {
+                    debug!("Adding {} new symbols from '{}'", symbols.len(), source);
+                }
+                symbols.iter().cloned().collect()
+            };
+
+            if new_symbols.is_empty() {
+                trace!("No new symbols to import from '{}'", source);
+                return;
+            }
+            
+            if self.debug_config.log_imports {
+                info!("Creating import for symbols {:?} from '{}'", new_symbols, source);
+            }
+            let new_item = ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
+                span: DUMMY_SP,
+                specifiers: new_symbols
+                    .iter()
+                    .map(|i| {
+                        ImportSpecifier::Named(ImportNamedSpecifier {
+                            span: DUMMY_SP,
+                            local: Ident {
+                                span: DUMMY_SP,
+                                sym: i.to_owned().into(),
+                                optional: false,
+                                ctxt: SyntaxContext::empty(),
+                            },
+                            imported: None,
+                            is_type_only: false,
+                        })
+                    })
+                    .collect::<Vec<_>>(),
+                src: Box::new(Str::from(source.to_owned())),
+                type_only: false,
+                with: None,
+                phase: ImportPhase::Evaluation,
+            }));
+            new_imports.push(new_item);
+        });
+
+        // Sort imports by source path for consistent ordering
+        new_imports.sort_by(|a, b| {
+            let a_src = if let ModuleItem::ModuleDecl(ModuleDecl::Import(decl)) = a {
+                decl.src.value.as_str().unwrap_or("")
+            } else {
+                ""
+            };
+            let b_src = if let ModuleItem::ModuleDecl(ModuleDecl::Import(decl)) = b {
+                decl.src.value.as_str().unwrap_or("")
+            } else {
+                ""
+            };
+            a_src.cmp(b_src)
+        });
+
+        // Insert all new imports at the end of existing imports
+        if !new_imports.is_empty() {
+            let insert_pos = module.body.iter().rposition(|item| {
+                matches!(item, ModuleItem::ModuleDecl(ModuleDecl::Import(_)))
+            }).map(|pos| pos + 1).unwrap_or(0);
+
+            debug!("Inserting {} new imports at position {}", new_imports.len(), insert_pos);
+            
+            for (i, new_import) in new_imports.into_iter().enumerate() {
+                module.body.insert(insert_pos + i, new_import);
+            }
+        }
+        
+        if self.debug_config.print_ast_after {
+            info!("AST after transformation: {:#?}", module);
+        }
+        
+        info!("Program transformation complete");
+    }
+
+    #[instrument(skip(self, el), level = "trace")]
     fn visit_mut_jsx_element(&mut self, el: &mut JSXElement) {
         if let JSXElementName::Ident(ident) = &mut el.opening.name {
             let tag_name = ident.sym.to_string();
-            if tag_name == "cx" || tag_name == "Cx" {
+            
+            if self.debug_config.log_transformations {
+                trace!("Visiting JSX element: {}", tag_name);
+            }
+            
+            if is_cx_tag(&tag_name) {
+                debug!("Found Cx tag, transforming element: {}", tag_name);
+                self.transform_count += 1;
+                
                 let tr = self
                     .transform_cx_element(&mut Expr::JSXElement(Box::new(el.to_owned())))
                     .jsx_element();
 
                 if tr.is_some() {
+                    trace!("Successfully transformed Cx element");
                     *el = *tr.unwrap();
+                } else {
+                    warn!("Transformation returned None for Cx element");
                 }
             }
         }
@@ -588,8 +874,14 @@ impl VisitMut for TransformVisitor {
         el.visit_mut_children_with(self);
     }
 
+    #[instrument(skip(self, expr), level = "trace")]
     fn visit_mut_expr(&mut self, expr: &mut Expr) {
+        if self.debug_config.log_transformations {
+            trace!("Visiting expression type: {:?}", std::mem::discriminant(expr));
+        }
+        
         if let Expr::Arrow(arrow_fn_expr) = expr {
+            trace!("Processing arrow function expression");
             if let BlockStmtOrExpr::Expr(body_expr) = *arrow_fn_expr.to_owned().body {
                 if body_expr.is_paren() {
                     let internal_expr = body_expr.to_owned().paren().unwrap().expr;
@@ -597,7 +889,10 @@ impl VisitMut for TransformVisitor {
                         let jsx_el = internal_expr.jsx_element().unwrap();
                         if let JSXElementName::Ident(ident) = jsx_el.opening.name.to_owned() {
                             let tag_name = ident.sym.to_string();
-                            if tag_name == "cx" || tag_name == "Cx" {
+                            if is_cx_tag(&tag_name) {
+                                debug!("Converting arrow function with Cx element to functional component");
+                                self.transform_count += 1;
+                                
                                 let old_expr = arrow_fn_expr;
                                 old_expr.body = Box::new(BlockStmtOrExpr::Expr(Box::new(
                                     self.transform_cx_element(&mut Expr::JSXElement(jsx_el)),
@@ -607,7 +902,7 @@ impl VisitMut for TransformVisitor {
                                     callee: swc_core::ecma::ast::Callee::Expr(Box::new(
                                         Expr::Ident(Ident {
                                             span: DUMMY_SP,
-                                            sym: "createFunctionalComponent".into(),
+                                            sym: CREATE_FUNCTIONAL_COMPONENT.into(),
                                             optional: false,
                                             ctxt: SyntaxContext::empty(),
                                         }),
@@ -621,8 +916,8 @@ impl VisitMut for TransformVisitor {
                                 });
 
                                 self.insert_import(
-                                    "cx/src/ui/createFunctionalComponent.js",
-                                    "createFunctionalComponent",
+                                    CX_UI_PATH,
+                                    CREATE_FUNCTIONAL_COMPONENT,
                                 );
                             }
                         }
@@ -636,19 +931,28 @@ impl VisitMut for TransformVisitor {
         if let Expr::JSXElement(jsx_el) = expr {
             if let JSXElementName::Ident(ident) = &mut jsx_el.opening.name {
                 let tag_name = ident.sym.to_string();
-                if tag_name == "cx" || tag_name == "Cx" {
+                if is_cx_tag(&tag_name) {
+                    debug!("Transforming Cx JSX element expression: {}", tag_name);
+                    self.transform_count += 1;
                     *expr = self.transform_cx_element(expr)
                 }
             }
         }
     }
 
+    #[instrument(skip(self, expr), level = "trace")]
     fn visit_mut_call_expr(&mut self, expr: &mut CallExpr) {
+        if self.debug_config.log_transformations {
+            trace!("Visiting call expression");
+        }
+        
         match expr.callee.to_owned() {
             Callee::Expr(callee_expr) => {
                 if let Expr::Ident(identifier_option) = *callee_expr {
-                    if identifier_option.sym.as_str() == "createFunctionalComponent" {
+                    if identifier_option.sym.as_str() == CREATE_FUNCTIONAL_COMPONENT {
+                        trace!("Found createFunctionalComponent call");
                         if expr.args.len() == 1 && expr.args[0].expr.is_arrow() {
+                            debug!("Processing createFunctionalComponent with arrow function argument");
                             let arrow_expr = expr.args[0].expr.as_arrow().unwrap();
 
                             match *arrow_expr.body.to_owned() {
@@ -660,7 +964,7 @@ impl VisitMut for TransformVisitor {
                                                     jsx_el.to_owned().opening.name
                                                 {
                                                     let tag_name = ident.sym.to_string();
-                                                    if tag_name == "cx" || tag_name == "Cx" {
+                                                    if is_cx_tag(&tag_name) {
                                                         let transformed_create_func_component =
                                                             self.transform_cx_element(
                                                                 &mut Expr::from(jsx_el.to_owned()),
@@ -703,66 +1007,103 @@ impl VisitMut for TransformVisitor {
         expr.visit_mut_children_with(self);
     }
 
-    fn visit_mut_module(&mut self, module: &mut Module) {
-        module.visit_mut_children_with(self);
-
-        self.imports.iter_mut().for_each(|import| {
-            let new_item = ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
-                span: DUMMY_SP,
-                specifiers: import
-                    .1
-                    .iter()
-                    .map(|i| {
-                        ImportSpecifier::Named(ImportNamedSpecifier {
-                            span: DUMMY_SP,
-                            local: Ident {
-                                span: DUMMY_SP,
-                                sym: i.to_owned().into(),
-                                optional: false,
-                                ctxt: SyntaxContext::empty(),
-                            },
-                            imported: None,
-                            is_type_only: false,
-                        })
-                    })
-                    .collect::<Vec<_>>(),
-                src: Box::new(Str::from(import.0.to_owned())),
-                type_only: false,
-                with: None,
-                phase: ImportPhase::Evaluation,
-            }));
-            module.body.push(new_item);
-        })
-    }
 
+    #[instrument(skip(self, import_decl), level = "trace")]
     fn visit_mut_import_decl(&mut self, import_decl: &mut ImportDecl) {
         import_decl.visit_mut_children_with(self);
 
-        if import_decl.src.value.ends_with("..") {
-            let mut new_src = import_decl.src.value.to_string();
-            new_src.push('/');
+        if let Some(src_str) = import_decl.src.value.as_str() {
+            if self.debug_config.log_imports {
+                trace!("Processing import declaration from: {}", src_str);
+            }
+            
+            if src_str.ends_with("..") {
+                debug!("Fixing import path ending with '..' -> adding '/'");
+                let mut new_src = src_str.to_string();
+                new_src.push('/');
 
-            import_decl.src = Box::new(Str::from(new_src));
-        }
-        // . imports do not work so we add the /index
-        if import_decl.src.value.ends_with(".") {
-            let mut new_src = import_decl.src.value.to_string();
-            new_src.insert_str(new_src.len(), "/index");
+                import_decl.src = Box::new(Str::from(new_src));
+            }
+            // . imports do not work so we add the /index
+            else if src_str.ends_with(".") {
+                debug!("Fixing import path ending with '.' -> adding '/index'");
+                let mut new_src = src_str.to_string();
+                new_src.insert_str(new_src.len(), "/index");
 
-            import_decl.src = Box::new(Str::from(new_src));
+                import_decl.src = Box::new(Str::from(new_src));
+            }
         }
     }
 }
 
+/// Initialize tracing subscriber if configured
+fn init_tracing(config: &DebugConfig) {
+    if !config.enable_tracing {
+        return;
+    }
+    
+    // Only initialize once
+    if TRACING_INITIALIZED.swap(true, Ordering::SeqCst) {
+        return;
+    }
+    
+    use tracing_subscriber::{fmt, prelude::*, EnvFilter};
+    
+    let level = match config.log_level.as_str() {
+        "trace" => Level::TRACE,
+        "debug" => Level::DEBUG,
+        "info" => Level::INFO,
+        "warn" => Level::WARN,
+        "error" => Level::ERROR,
+        _ => Level::INFO,
+    };
+    
+    let filter = EnvFilter::from_default_env()
+        .add_directive(format!("swc_plugin_transform_cx_jsx={}", level).parse().unwrap());
+    
+    tracing_subscriber::registry()
+        .with(filter)
+        .with(fmt::layer().with_writer(std::io::stderr))
+        .init();
+        
+    info!("Tracing initialized with level: {}", config.log_level);
+}
+
 #[plugin_transform]
 pub fn process_transform(
     mut program: Program,
-    _metadata: TransformPluginProgramMetadata,
+    metadata: TransformPluginProgramMetadata,
 ) -> Program {
+    // Parse debug configuration from plugin metadata
+    let debug_config: DebugConfig = metadata
+        .get_transform_plugin_config()
+        .and_then(|config_str| {
+            let config_json = config_str.to_string();
+            serde_json::from_str::<serde_json::Value>(&config_json).ok()
+        })
+        .and_then(|config_value| {
+            config_value.get("debug")
+                .and_then(|debug_value| serde_json::from_value(debug_value.clone()).ok())
+        })
+        .unwrap_or_default();
+    
+    // Initialize tracing if enabled
+    init_tracing(&debug_config);
+    
+    let _span = span!(Level::INFO, "plugin_transform").entered();
+    info!("Starting SWC CX JSX transformation plugin");
+    
+    if debug_config.enable_tracing {
+        debug!("Debug configuration: {:?}", debug_config);
+    }
+    
     program.visit_mut_with(&mut visit_mut_pass(TransformVisitor {
         imports: HashMap::new(),
+        debug_config,
+        transform_count: 0,
     }));
 
+    info!("SWC CX JSX transformation plugin completed");
     program
 }
 
@@ -770,21 +1111,26 @@ pub fn process_transform(
 #[testing::fixture("tests/**/input.js")]
 #[testing::fixture("tests/**/input.tsx")]
 fn exec(input: std::path::PathBuf) {
+    use swc_core::ecma::parser::{Syntax, TsSyntax};
+    use swc_core::common::Mark;
+
     let output = input.with_file_name("output.js");
     swc_core::ecma::transforms::testing::test_fixture(
-        swc_ecma_parser::Syntax::Typescript(TsSyntax {
+        Syntax::Typescript(TsSyntax {
             tsx: true,
             ..Default::default()
         }),
         &|_| {
             (
                 swc_core::ecma::transforms::base::resolver(
-                    swc_common::Mark::new(),
-                    swc_common::Mark::new(),
+                    Mark::new(),
+                    Mark::new(),
                     true,
                 ),
                 visit_mut_pass(TransformVisitor {
                     imports: HashMap::new(),
+                    debug_config: DebugConfig::default(),
+                    transform_count: 0,
                 }),
             )
         },
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/.swcrc b/packages/swc-plugin-transform-cx-jsx/tests/.swcrc
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/03_preserves_whitespace_if_ws_flag_is_set/output.js b/packages/swc-plugin-transform-cx-jsx/tests/03_preserves_whitespace_if_ws_flag_is_set/output.js
index f789f2848..69bc5c4d9 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/03_preserves_whitespace_if_ws_flag_is_set/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/03_preserves_whitespace_if_ws_flag_is_set/output.js
@@ -8,7 +8,7 @@
               "ws"
             ],
             "children": [
-                "\n\r\n      Text\n\r\n    "
+                "\n      Text\n    "
             ],
         },
     ],
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/07_transform_jsx_object_attrs_to_config_props/output.js b/packages/swc-plugin-transform-cx-jsx/tests/07_transform_jsx_object_attrs_to_config_props/output.js
index c6bda0544..5e638e9a1 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/07_transform_jsx_object_attrs_to_config_props/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/07_transform_jsx_object_attrs_to_config_props/output.js
@@ -1,9 +1,9 @@
 ({
-    "$type": Component, 
+    "$type": Component,
     "value": {
-        "x": 1
-    }, 
+        x: 1
+    },
     "jsxAttributes": [
         "value"
     ]
-})
\ No newline at end of file
+});
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/08_transform_jsx_function_attrs_to_config_props/output.js b/packages/swc-plugin-transform-cx-jsx/tests/08_transform_jsx_function_attrs_to_config_props/output.js
index 96fab19fe..cdc959eb0 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/08_transform_jsx_function_attrs_to_config_props/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/08_transform_jsx_function_attrs_to_config_props/output.js
@@ -1,7 +1,7 @@
 ({
     "$type": Component,
-    "onClick": function onClick(e) {},
+    "onClick": (e)=>{},
     "jsxAttributes": [
         "onClick"
     ]
-  });
\ No newline at end of file
+});
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/19_transform_lowercase_tags_into_htmlelement_with_tag_prop/output.js b/packages/swc-plugin-transform-cx-jsx/tests/19_transform_lowercase_tags_into_htmlelement_with_tag_prop/output.js
index f9f23910a..5ce0a47c1 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/19_transform_lowercase_tags_into_htmlelement_with_tag_prop/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/19_transform_lowercase_tags_into_htmlelement_with_tag_prop/output.js
@@ -1,5 +1,5 @@
+import { HtmlElement } from "cx/widgets";
 ({
     "$type": HtmlElement, 
     "tag": "div"
-})
-import { HtmlElement } from "cx/widgets";
+})
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/22_transform_jsx_elems_in_structured_attrs/output.js b/packages/swc-plugin-transform-cx-jsx/tests/22_transform_jsx_elems_in_structured_attrs/output.js
index cd509dbab..1b600e178 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/22_transform_jsx_elems_in_structured_attrs/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/22_transform_jsx_elems_in_structured_attrs/output.js
@@ -1,15 +1,15 @@
 ({
     "$type": Component,
     "layout": {
-       "x": {
-          "$type": Layout,
-          "type": "1",
-          "jsxAttributes": [
-              "type"
-            ],
-       }
+        x: {
+            "$type": Layout,
+            "type": "1",
+            "jsxAttributes": [
+                "type"
+            ]
+        }
     },
     "jsxAttributes": [
         "layout"
     ]
-})
\ No newline at end of file
+});
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/26_register_functional_cx_components/output.js b/packages/swc-plugin-transform-cx-jsx/tests/26_register_functional_cx_components/output.js
index 53695ae4c..3e12cdd89 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/26_register_functional_cx_components/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/26_register_functional_cx_components/output.js
@@ -1,2 +1,2 @@
-let x = createFunctionalComponent((props) => ({ "$type": Container }));
-import { createFunctionalComponent } from "cx/ui";
\ No newline at end of file
+import { createFunctionalComponent } from "cx/ui";
+let x = createFunctionalComponent((props) => ({ "$type": Container }));
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/27_register_only_one_createFunctionalComponent_import/output.js b/packages/swc-plugin-transform-cx-jsx/tests/27_register_only_one_createFunctionalComponent_import/output.js
index 302315eee..f7258691e 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/27_register_only_one_createFunctionalComponent_import/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/27_register_only_one_createFunctionalComponent_import/output.js
@@ -1,3 +1,3 @@
+import { createFunctionalComponent } from "cx/ui";
 let X = createFunctionalComponent((props) => ({ "$type": Container }));
 let Y = createFunctionalComponent((props) => ({ "$type": Container }));
-import { createFunctionalComponent } from "cx/ui";
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/28_auto_import_HtmlElements/output.js b/packages/swc-plugin-transform-cx-jsx/tests/28_auto_import_HtmlElements/output.js
index d38613ea9..47a425b4a 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/28_auto_import_HtmlElements/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/28_auto_import_HtmlElements/output.js
@@ -1,5 +1,5 @@
+import { HtmlElement } from "cx/widgets";
 let x = { 
     "$type": HtmlElement, 
     "tag": "div" 
-};
-import { HtmlElement } from "cx/widgets";
+};
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/30_expand_fat_arrows_in_string_exprs_if_flag_set/output.js b/packages/swc-plugin-transform-cx-jsx/tests/30_expand_fat_arrows_in_string_exprs_if_flag_set/output.js
index e69de29bb..00f1a4325 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/30_expand_fat_arrows_in_string_exprs_if_flag_set/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/30_expand_fat_arrows_in_string_exprs_if_flag_set/output.js
@@ -0,0 +1,9 @@
+({
+    "$type": Repeater,
+    records: {
+        expr: "{data}.filter(a=>a.enabled)"
+    },
+    "jsxAttributes": [
+        "records"
+    ]
+});
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/31_transform_obj_functional_component/output.js b/packages/swc-plugin-transform-cx-jsx/tests/31_transform_obj_functional_component/output.js
new file mode 100644
index 000000000..c7839f617
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/31_transform_obj_functional_component/output.js
@@ -0,0 +1,2 @@
+import { A } from "cx/ui";
+import { B } from "cx/src/ui";
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/32_export_default_is_processed/output.js b/packages/swc-plugin-transform-cx-jsx/tests/32_export_default_is_processed/output.js
index e69de29bb..88f5fb76f 100644
--- a/packages/swc-plugin-transform-cx-jsx/tests/32_export_default_is_processed/output.js
+++ b/packages/swc-plugin-transform-cx-jsx/tests/32_export_default_is_processed/output.js
@@ -0,0 +1,8 @@
+import { createFunctionalComponent } from "cx/ui";
+export default createFunctionalComponent(()=>({
+        "$type": Test,
+        "a": true,
+        "jsxAttributes": [
+            "a"
+        ]
+    }));
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/36_import_HtmlElement_from_cx_widgets/input.js b/packages/swc-plugin-transform-cx-jsx/tests/36_import_HtmlElement_from_cx_widgets/input.js
new file mode 100644
index 000000000..b5b6c6e05
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/36_import_HtmlElement_from_cx_widgets/input.js
@@ -0,0 +1,6 @@
+let component = (
+  <cx>
+    <div>Hello</div>
+    <span>World</span>
+  </cx>
+);
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/36_import_HtmlElement_from_cx_widgets/output.js b/packages/swc-plugin-transform-cx-jsx/tests/36_import_HtmlElement_from_cx_widgets/output.js
new file mode 100644
index 000000000..b2fb2b881
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/36_import_HtmlElement_from_cx_widgets/output.js
@@ -0,0 +1,17 @@
+import { HtmlElement } from "cx/widgets";
+let component = [
+    {
+        "$type": HtmlElement,
+        "tag": "div",
+        "children": [
+            "Hello"
+        ]
+    },
+    {
+        "$type": HtmlElement,
+        "tag": "span",
+        "children": [
+            "World"
+        ]
+    }
+];
\ No newline at end of file
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/37_import_createFunctionalComponent_from_cx_ui/input.js b/packages/swc-plugin-transform-cx-jsx/tests/37_import_createFunctionalComponent_from_cx_ui/input.js
new file mode 100644
index 000000000..9e89fde2d
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/37_import_createFunctionalComponent_from_cx_ui/input.js
@@ -0,0 +1,11 @@
+let MyComponent = (props) => (
+  <cx>
+    <div text={props.text} />
+  </cx>
+);
+
+let AnotherComponent = (props) => (
+  <cx>
+    <span text={props.name} />
+  </cx>
+);
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/37_import_createFunctionalComponent_from_cx_ui/output.js b/packages/swc-plugin-transform-cx-jsx/tests/37_import_createFunctionalComponent_from_cx_ui/output.js
new file mode 100644
index 000000000..3ae781277
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/37_import_createFunctionalComponent_from_cx_ui/output.js
@@ -0,0 +1,18 @@
+import { createFunctionalComponent } from "cx/ui";
+import { HtmlElement } from "cx/widgets";
+let MyComponent = createFunctionalComponent((props)=>({
+        "$type": HtmlElement,
+        "tag": "div",
+        "text": props.text,
+        "jsxAttributes": [
+            "text"
+        ]
+    }));
+let AnotherComponent = createFunctionalComponent((props)=>({
+        "$type": HtmlElement,
+        "tag": "span",
+        "text": props.name,
+        "jsxAttributes": [
+            "text"
+        ]
+    }));
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/38_boolean_attributes/input.js b/packages/swc-plugin-transform-cx-jsx/tests/38_boolean_attributes/input.js
new file mode 100644
index 000000000..3304acf65
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/38_boolean_attributes/input.js
@@ -0,0 +1,6 @@
+// Test boolean attributes
+let component = (
+  <cx>
+    <input disabled required={true} hidden={false} />
+  </cx>
+);
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/38_boolean_attributes/output.js b/packages/swc-plugin-transform-cx-jsx/tests/38_boolean_attributes/output.js
new file mode 100644
index 000000000..3395701ea
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/38_boolean_attributes/output.js
@@ -0,0 +1,14 @@
+import { HtmlElement } from "cx/widgets";
+// Test boolean attributes
+let component = {
+    "$type": HtmlElement,
+    "tag": "input",
+    "disabled": true,
+    "required": true,
+    "hidden": false,
+    "jsxAttributes": [
+        "disabled",
+        "required",
+        "hidden"
+    ]
+};
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/39_self_closing_with_spread_and_attrs/input.js b/packages/swc-plugin-transform-cx-jsx/tests/39_self_closing_with_spread_and_attrs/input.js
new file mode 100644
index 000000000..ad404f3b1
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/39_self_closing_with_spread_and_attrs/input.js
@@ -0,0 +1,7 @@
+// Test self-closing tags with spread and attributes
+let props = { className: "test", id: "myInput" };
+let component = (
+  <cx>
+    <input type="text" {...props} placeholder="Enter text" />
+  </cx>
+);
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/39_self_closing_with_spread_and_attrs/output.js b/packages/swc-plugin-transform-cx-jsx/tests/39_self_closing_with_spread_and_attrs/output.js
new file mode 100644
index 000000000..5e29b8428
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/39_self_closing_with_spread_and_attrs/output.js
@@ -0,0 +1,19 @@
+import { HtmlElement } from "cx/widgets";
+// Test self-closing tags with spread and attributes
+let props = {
+    className: "test",
+    id: "myInput"
+};
+let component = {
+    "$type": HtmlElement,
+    "tag": "input",
+    "type": "text",
+    "placeholder": "Enter text",
+    "jsxSpread": [
+        props
+    ],
+    "jsxAttributes": [
+        "type",
+        "placeholder"
+    ]
+};
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/40_nested_cx_blocks/input.js b/packages/swc-plugin-transform-cx-jsx/tests/40_nested_cx_blocks/input.js
new file mode 100644
index 000000000..0a17a5e46
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/40_nested_cx_blocks/input.js
@@ -0,0 +1,12 @@
+// Test nested cx blocks
+let component = (
+  <cx>
+    <div className="outer">
+      {condition && (
+        <cx>
+          <span className="inner">Nested content</span>
+        </cx>
+      )}
+    </div>
+  </cx>
+);
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/40_nested_cx_blocks/output.js b/packages/swc-plugin-transform-cx-jsx/tests/40_nested_cx_blocks/output.js
new file mode 100644
index 000000000..18457cd96
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/40_nested_cx_blocks/output.js
@@ -0,0 +1,23 @@
+import { HtmlElement } from "cx/widgets";
+// Test nested cx blocks
+let component = {
+    "$type": HtmlElement,
+    "tag": "div",
+    "className": "outer",
+    "jsxAttributes": [
+        "className"
+    ],
+    "children": [
+        condition && {
+            "$type": HtmlElement,
+            "tag": "span",
+            "className": "inner",
+            "jsxAttributes": [
+                "className"
+            ],
+            "children": [
+                "Nested content"
+            ]
+        }
+    ]
+};
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/41_mixed_expressions_in_attributes/input.js b/packages/swc-plugin-transform-cx-jsx/tests/41_mixed_expressions_in_attributes/input.js
new file mode 100644
index 000000000..944b2fa2d
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/41_mixed_expressions_in_attributes/input.js
@@ -0,0 +1,12 @@
+// Test mixed expressions in attributes
+let active = true;
+let component = (
+  <cx>
+    <div
+      className={`base ${active ? 'active' : 'inactive'}`}
+      style={{ color: 'red', fontSize: 14 }}
+      onClick={e => handleClick(e)}
+      data-count={items.length}
+    />
+  </cx>
+);
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/41_mixed_expressions_in_attributes/output.js b/packages/swc-plugin-transform-cx-jsx/tests/41_mixed_expressions_in_attributes/output.js
new file mode 100644
index 000000000..ab1339db2
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/41_mixed_expressions_in_attributes/output.js
@@ -0,0 +1,20 @@
+import { HtmlElement } from "cx/widgets";
+// Test mixed expressions in attributes
+let active = true;
+let component = {
+    "$type": HtmlElement,
+    "tag": "div",
+    "className": `base ${active ? 'active' : 'inactive'}`,
+    "style": {
+        color: 'red',
+        fontSize: 14
+    },
+    "onClick": (e)=>handleClick(e),
+    "data-count": items.length,
+    "jsxAttributes": [
+        "className",
+        "style",
+        "onClick",
+        "data-count"
+    ]
+};
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/42_null_undefined_attribute_values/input.js b/packages/swc-plugin-transform-cx-jsx/tests/42_null_undefined_attribute_values/input.js
new file mode 100644
index 000000000..9bc7bbe17
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/42_null_undefined_attribute_values/input.js
@@ -0,0 +1,6 @@
+// Test null and undefined attribute values
+let component = (
+  <cx>
+    <div value={null} text={undefined} count={0} empty={""} />
+  </cx>
+);
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/42_null_undefined_attribute_values/output.js b/packages/swc-plugin-transform-cx-jsx/tests/42_null_undefined_attribute_values/output.js
new file mode 100644
index 000000000..0c6cd2041
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/42_null_undefined_attribute_values/output.js
@@ -0,0 +1,16 @@
+import { HtmlElement } from "cx/widgets";
+// Test null and undefined attribute values
+let component = {
+    "$type": HtmlElement,
+    "tag": "div",
+    "value": null,
+    "text": undefined,
+    "count": 0,
+    "empty": "",
+    "jsxAttributes": [
+        "value",
+        "text",
+        "count",
+        "empty"
+    ]
+};
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/43_multiple_spreads/input.js b/packages/swc-plugin-transform-cx-jsx/tests/43_multiple_spreads/input.js
new file mode 100644
index 000000000..a9102e3e1
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/43_multiple_spreads/input.js
@@ -0,0 +1,8 @@
+// Test multiple spreads in one element
+let props1 = { a: 1 };
+let props2 = { b: 2 };
+let component = (
+  <cx>
+    <div {...props1} className="test" {...props2} id="myDiv" />
+  </cx>
+);
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/43_multiple_spreads/output.js b/packages/swc-plugin-transform-cx-jsx/tests/43_multiple_spreads/output.js
new file mode 100644
index 000000000..5747a4a14
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/43_multiple_spreads/output.js
@@ -0,0 +1,22 @@
+import { HtmlElement } from "cx/widgets";
+// Test multiple spreads in one element
+let props1 = {
+    a: 1
+};
+let props2 = {
+    b: 2
+};
+let component = {
+    "$type": HtmlElement,
+    "tag": "div",
+    "className": "test",
+    "id": "myDiv",
+    "jsxSpread": [
+        props1,
+        props2
+    ],
+    "jsxAttributes": [
+        "className",
+        "id"
+    ]
+};
diff --git a/packages/swc-plugin-transform-cx-jsx/tests/svg_test/output.js b/packages/swc-plugin-transform-cx-jsx/tests/svg_test/output.js
new file mode 100644
index 000000000..8e3cea74b
--- /dev/null
+++ b/packages/swc-plugin-transform-cx-jsx/tests/svg_test/output.js
@@ -0,0 +1,14 @@
+import { Button } from "cx/widgets";
+import { createFunctionalComponent } from "cx/ui";
+export default createFunctionalComponent(({ asd })=>{
+    let a = 5;
+    return {
+        "$type": Button,
+        "asd": true,
+        "text": "   asd   ",
+        "jsxAttributes": [
+            "asd",
+            "text"
+        ]
+    };
+});
diff --git a/test/babel.js b/test/babel.js
deleted file mode 100644
index 9fc7f7471..000000000
--- a/test/babel.js
+++ /dev/null
@@ -1,16 +0,0 @@
-require("@babel/register")({
-   retainLines: true,
-   presets: ["@babel/typescript", ["@babel/preset-env", { loose: true }]],
-   plugins: [
-      ["@babel/transform-react-jsx", { runtime: "automatic" }],
-      [
-         "transform-cx-jsx",
-         {
-            autoImportHtmlElement: false, //adds cx/ based imports which cause double imports (dist + src)
-            transformFunctionalComponents: false, //adds cx/ based imports which cause double imports (dist + src)
-         },
-      ],
-      "@babel/proposal-function-bind",
-   ],
-   extensions: [".js", ".jsx", ".ts", ".tsx"],
-});
diff --git a/test/jest.transform.js b/test/jest.transform.js
deleted file mode 100644
index b5afb551a..000000000
--- a/test/jest.transform.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// Custom Jest transform implementation that wraps babel-jest and injects our
-// babel presets, so we don't have to use .babelrc.
-
-const babelJestMd = require('babel-jest');
-const babelJest = babelJestMd.__esModule ? babelJestMd.default : babelJestMd;
-
-module.exports = babelJest.createTransformer({
-   "presets": [
-      ["@babel/preset-env", { loose: true }]
-   ],
-   "plugins": [
-      ["@babel/transform-react-jsx", { "runtime": "automatic" }],
-      [
-         "transform-cx-jsx",
-         {
-            autoImportHtmlElement: false, //adds cx/ based imports which cause double imports (dist + src)
-            transformFunctionalComponents: false  //adds cx/ based imports which cause double imports (dist + src)
-         }
-      ],
-      '@babel/proposal-object-rest-spread',
-      "@babel/proposal-function-bind",
-      '@babel/transform-parameters',
-   ]
-});
-
diff --git a/test/mocha.config.js b/test/mocha.config.js
deleted file mode 100644
index 1501cffa4..000000000
--- a/test/mocha.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = {
-   spec: [
-      "packages/babel-plugin-transform-cx-jsx/test",
-      "packages/babel-plugin-transform-cx-imports/test",
-      "packages/cx/src/**/*.spec.*",
-   ],
-   require: "./test/babel",
-   extension: ["js", "ts", "tsx"],
-};
diff --git a/test/mocha.opts b/test/mocha.opts
deleted file mode 100644
index f1e575163..000000000
--- a/test/mocha.opts
+++ /dev/null
@@ -1,5 +0,0 @@
-packages/babel-plugin-transform-cx-jsx/test
-packages/babel-plugin-transform-cx-imports/test
-packages/cx/src/**/*.spec.js
-
---require=./test/babel
\ No newline at end of file
diff --git a/ts-minimal/TestWidget.tsx b/ts-minimal/TestWidget.tsx
new file mode 100644
index 000000000..e01912f3c
--- /dev/null
+++ b/ts-minimal/TestWidget.tsx
@@ -0,0 +1,16 @@
+/** @jsxImportSource react */
+
+import { Widget } from "cx/widgets";
+import { RenderingContext, Instance } from "cx/ui";
+
+interface TestWidgetProps {}
+
+export class TestWidget extends Widget {
+   constructor(props: TestWidgetProps) {
+      super(props);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      return <div key={key}>Test Widget</div>;
+   }
+}
diff --git a/ts-minimal/index.html b/ts-minimal/index.html
new file mode 100644
index 000000000..e48ad0215
--- /dev/null
+++ b/ts-minimal/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+   <head lang="en">
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
+      <title>Cx - Litmus</title>
+      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
+
+      <!--<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>-->
+      <!--<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>-->
+
+      <!--<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>-->
+      <!--<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>-->
+   </head>
+   <body>
+      <div id="app"></div>
+   </body>
+</html>
diff --git a/ts-minimal/index.scss b/ts-minimal/index.scss
new file mode 100644
index 000000000..207843205
--- /dev/null
+++ b/ts-minimal/index.scss
@@ -0,0 +1,2 @@
+@import "~cx/src/variables.scss";
+@import "~cx/src/index.scss";
diff --git a/ts-minimal/index.tsx b/ts-minimal/index.tsx
new file mode 100644
index 000000000..3632669ae
--- /dev/null
+++ b/ts-minimal/index.tsx
@@ -0,0 +1,52 @@
+import { Store } from "cx/data";
+import { bind, History, Widget } from "cx/ui";
+import { Debug, Timing } from "cx/util";
+import { enableMsgBoxAlerts, enableTooltips, Restate, TextField, ValidationGroup } from "cx/widgets";
+import { TestWidget } from "./TestWidget";
+import "cx/locale/de-de.js";
+import { startHotAppLoop } from "cx/ui/app/startHotAppLoop.js";
+
+let store = new Store();
+
+Widget.resetCounter();
+//Widget.optimizePrepare = false;
+//Widget.prototype.memoize = false;
+//Timing.enable('vdom-render');
+Timing.enable("app-loop");
+Debug.enable("app-data");
+
+enableTooltips();
+enableMsgBoxAlerts();
+
+History.connect(store, "url");
+
+startHotAppLoop(
+   module,
+   document.getElementById("app"),
+   store,
+   <cx>
+      <div
+         onMouseMove={(e, instance) => {
+            //console.log("Mouse moved", e, instance);
+         }}
+         controller={{
+            onInit() {
+               console.log("Controller initialized");
+            },
+         }}
+      >
+         <h1>TypeScript Minimal Example</h1>
+         <p>This is a minimal example of a Cx application using TypeScript.</p>
+         <p>Check the console for debug information.</p>
+         <ValidationGroup valid={bind("test")}>
+            <TextField value={bind("nesto")} required />
+         </ValidationGroup>
+         <div text={bind("nesto")} style="color: red" />
+         <div visible={bind("test")}>Valid</div>
+         <Restate data={{ x: bind("nesto") }}>
+            <div text={bind("x")} />
+         </Restate>
+         <TestWidget />
+      </div>
+   </cx>,
+);
diff --git a/ts-minimal/package.json b/ts-minimal/package.json
new file mode 100644
index 000000000..a35a7f283
--- /dev/null
+++ b/ts-minimal/package.json
@@ -0,0 +1,42 @@
+{
+   "name": "ts-minimal",
+   "private": true,
+   "version": "1.0.0",
+   "scripts": {
+      "start": "webpack-dev-server --open",
+      "build": "webpack"
+   },
+   "dependencies": {
+      "cx": "workspace:*",
+      "cx-react": "workspace:*",
+      "react": "^19.2.3",
+      "react-dom": "^19.2.3"
+   },
+   "devDependencies": {
+      "@babel/core": "^7.28.5",
+      "@types/node": "^25.0.3",
+      "@types/react": "^19.2.7",
+      "@types/webpack-env": "^1.18.8",
+      "babel-loader": "^10.0.0",
+      "babel-plugin-transform-cx-imports": "^26.0.1",
+      "copy-webpack-plugin": "^12.0.2",
+      "css-loader": "^7.1.2",
+      "file-loader": "^6.2.0",
+      "html-webpack-plugin": "^5.6.5",
+      "mini-css-extract-plugin": "^2.9.2",
+      "sass": "^1.77.8",
+      "sass-loader": "^16.0.6",
+      "style-loader": "^4.0.0",
+      "svg-url-loader": "^8.0.0",
+      "ts-loader": "9.5.4",
+      "typescript": "^5.7.2",
+      "url-loader": "^4.1.1",
+      "webpack": "^5.103.0",
+      "webpack-bundle-analyzer": "^4.10.2",
+      "webpack-cleanup-plugin": "^0.5.1",
+      "webpack-cli": "^5.1.4",
+      "webpack-combine-loaders": "^2.0.4",
+      "webpack-dev-server": "^5.2.2",
+      "webpack-merge": "^6.0.1"
+   }
+}
diff --git a/ts-minimal/tsconfig.json b/ts-minimal/tsconfig.json
new file mode 100644
index 000000000..11867fe6a
--- /dev/null
+++ b/ts-minimal/tsconfig.json
@@ -0,0 +1,15 @@
+{
+   "compilerOptions": {
+      "jsx": "react-jsx",
+      //"jsxFactory": "cx",
+      "jsxImportSource": "cx",
+      "module": "esnext",
+      "moduleResolution": "bundler",
+      "esModuleInterop": true,
+      "allowJs": true,
+      "types": ["webpack-env"],
+      "outDir": "dist",
+      "target": "esnext"
+   },
+   "exclude": ["**.spec.**"]
+}
diff --git a/ts-minimal/webpack.config.js b/ts-minimal/webpack.config.js
new file mode 100644
index 000000000..0da007693
--- /dev/null
+++ b/ts-minimal/webpack.config.js
@@ -0,0 +1,182 @@
+const webpack = require("webpack"),
+   HtmlWebpackPlugin = require("html-webpack-plugin"),
+   MiniCssExtractPlugin = require("mini-css-extract-plugin"),
+   { merge } = require("webpack-merge"),
+   path = require("path");
+
+let production = process.env.npm_lifecycle_event && process.env.npm_lifecycle_event.indexOf("build") == 0;
+
+let common = {
+   resolve: {
+      // alias: {
+      //    cx: path.resolve(path.join(__dirname, "../packages/cx")),
+      // },
+      extensions: [".js", ".ts", ".tsx", ".json"],
+   },
+
+   module: {
+      rules: [
+         {
+            test: /\.json$/,
+            loader: "json-loader",
+         },
+         {
+            test: /\.(ts|tsx)$/,
+            include: /(ts-minimal)/,
+            exclude: /node_modules/,
+            use: [
+               {
+                  loader: "babel-loader",
+                  options: {
+                     plugins: [["transform-cx-imports", { useSrc: true }]],
+                  },
+               },
+               {
+                  loader: "ts-loader",
+                  options: {
+                     colors: false,
+                     logLevel: "info",
+                  },
+               },
+            ],
+         },
+      ],
+   },
+   entry: {
+      app: [__dirname + "/index.tsx", __dirname + "/index.scss"],
+   },
+   output: {
+      path: __dirname,
+      filename: "[name].js",
+   },
+   plugins: [
+      //new webpack.optimize.CommonsChunkPlugin("vendor"),
+      new HtmlWebpackPlugin({
+         template: path.join(__dirname, "index.html"),
+      }),
+      // new CxScssManifestPlugin({
+      //    outputPath: path.join(__dirname, "manifest.scss")
+      // })
+   ],
+   stats: {
+      usedExports: true,
+   },
+   cache: {
+      // 1. Set cache type to filesystem
+      type: "filesystem",
+
+      buildDependencies: {
+         // 2. Add your config as buildDependency to get cache invalidation on config change
+         config: [__filename],
+
+         // 3. If you have other things the build depends on you can add them here
+         // Note that webpack, loaders and all modules referenced from your config are automatically added
+      },
+   },
+};
+
+let specific;
+
+if (production) {
+   specific = {
+      mode: "production",
+      target: ["web", "es2022"], // Modern browsers for better tree-shaking
+      module: {
+         rules: [
+            {
+               test: /\.scss$/,
+               use: [
+                  MiniCssExtractPlugin.loader,
+                  "css-loader",
+                  {
+                     loader: "sass-loader",
+                     options: {
+                        sassOptions: {
+                           quietDeps: true,
+                           silenceDeprecations: ["legacy-js-api", "import", "global-builtin"],
+                        },
+                     },
+                  },
+               ],
+            },
+            {
+               test: /\.css$/,
+               use: [MiniCssExtractPlugin.loader, "css-loader"],
+            },
+         ],
+      },
+
+      plugins: [
+         new webpack.DefinePlugin({
+            "process.env.NODE_ENV": JSON.stringify("production"),
+         }),
+
+         new MiniCssExtractPlugin({
+            filename: "app.css",
+         }),
+      ],
+
+      output: {
+         path: path.join(__dirname, "dist"),
+         publicPath: ".",
+      },
+
+      optimization: {
+         usedExports: true,
+         sideEffects: false,
+      },
+   };
+} else {
+   specific = {
+      module: {
+         rules: [
+            {
+               test: /\.scss$/,
+               use: [
+                  "style-loader",
+                  "css-loader",
+                  {
+                     loader: "sass-loader",
+                     options: {
+                        sassOptions: {
+                           quietDeps: true,
+                           silenceDeprecations: ["legacy-js-api", "import", "global-builtin"],
+                        },
+                     },
+                  },
+               ],
+            },
+            {
+               test: /\.css$/,
+               use: ["style-loader", "css-loader"],
+            },
+         ],
+      },
+      mode: "development",
+      //target: ["web", "es5"], //Uncomment for IE testing
+      plugins: [
+         new webpack.DefinePlugin({
+            "process.env.NODE_ENV": JSON.stringify("development"),
+            "process.env.NODE_DEBUG": JSON.stringify(false),
+         }),
+      ],
+      output: {
+         publicPath: "/",
+      },
+      performance: {
+         hints: false,
+      },
+      //devtool: "eval",
+      devServer: {
+         //contentBase: "/",
+         hot: true,
+         port: 8090,
+         //noInfo: false,
+         //inline: true,
+         historyApiFallback: true,
+         //quiet: true
+      },
+   };
+}
+
+module.exports = merge(common, specific);
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..ac7852460
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,23 @@
+{
+   "compilerOptions": {
+      "target": "es2017",
+      "jsx": "react-jsx",
+      "jsxImportSource": "cx",
+      "allowJs": true,
+      "moduleResolution": "node",
+      "module": "esnext",
+      "lib": ["dom", "dom.iterable", "es6"],
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "skipLibCheck": true,
+      "baseUrl": ".",
+      "paths": {
+         "cx": ["./packages/cx/src"],
+         "cx/*": ["./packages/cx/src/*"],
+         "cx-immer": ["./packages/cx-immer"]
+      }
+   },
+   "include": ["packages/cx/src/**/*"],
+   "exclude": ["node_modules", "dist", "build", "**.spec.**"]
+}
diff --git a/yarn.lock b/yarn.lock
index 76bbb050f..dc40bdc03 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,249 +5,146 @@ __metadata:
   version: 8
   cacheKey: 10
 
-"@ampproject/remapping@npm:^2.2.0":
-  version: 2.2.1
-  resolution: "@ampproject/remapping@npm:2.2.1"
-  dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.0"
-    "@jridgewell/trace-mapping": "npm:^0.3.9"
-  checksum: 10/e15fecbf3b54c988c8b4fdea8ef514ab482537e8a080b2978cc4b47ccca7140577ca7b65ad3322dcce65bc73ee6e5b90cbfe0bbd8c766dad04d5c62ec9634c42
-  languageName: node
-  linkType: hard
-
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.18.6, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.8.3":
-  version: 7.21.4
-  resolution: "@babel/code-frame@npm:7.21.4"
-  dependencies:
-    "@babel/highlight": "npm:^7.18.6"
-  checksum: 10/99236ead98f215a6b144f2d1fe84163c2714614fa6b9cbe32a547ca289554770aac8c6a0c0fb6a7477b68cf17b9b7a7d0c81b50edfbe9e5c2c8f514cc2c09549
-  languageName: node
-  linkType: hard
-
-"@babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5":
-  version: 7.23.5
-  resolution: "@babel/code-frame@npm:7.23.5"
-  dependencies:
-    "@babel/highlight": "npm:^7.23.4"
-    chalk: "npm:^2.4.2"
-  checksum: 10/44e58529c9d93083288dc9e649c553c5ba997475a7b0758cc3ddc4d77b8a7d985dbe78cc39c9bbc61f26d50af6da1ddf0a3427eae8cc222a9370619b671ed8f5
-  languageName: node
-  linkType: hard
-
-"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2":
-  version: 7.26.2
-  resolution: "@babel/code-frame@npm:7.26.2"
+"@babel/code-frame@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/code-frame@npm:7.27.1"
   dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
     js-tokens: "npm:^4.0.0"
-    picocolors: "npm:^1.0.0"
-  checksum: 10/db2c2122af79d31ca916755331bb4bac96feb2b334cdaca5097a6b467fdd41963b89b14b6836a14f083de7ff887fc78fa1b3c10b14e743d33e12dbfe5ee3d223
+    picocolors: "npm:^1.1.1"
+  checksum: 10/721b8a6e360a1fa0f1c9fe7351ae6c874828e119183688b533c477aa378f1010f37cc9afbfc4722c686d1f5cdd00da02eab4ba7278a0c504fa0d7a321dcd4fdf
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.21.5":
-  version: 7.21.7
-  resolution: "@babel/compat-data@npm:7.21.7"
-  checksum: 10/1b3cf5775e7bc9a9cf0cc8991911c7d8262048711e6ea2e05cd28c34e7a56e936a62fc4d61b6a18928bf953ba6bd5f64e842187ef0383acc0e1fce27daf8f498
+"@babel/compat-data@npm:^7.27.2, @babel/compat-data@npm:^7.27.7":
+  version: 7.28.4
+  resolution: "@babel/compat-data@npm:7.28.4"
+  checksum: 10/95b7864e6b210c84c069743966da448c0cb50015a4de5e18dd755776a0b5e53c4653e74f26700aed8de922eaa3b8844fc5fc5b29bc64830249d2abe914aec832
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5":
-  version: 7.23.5
-  resolution: "@babel/compat-data@npm:7.23.5"
-  checksum: 10/088f14f646ecbddd5ef89f120a60a1b3389a50a9705d44603dca77662707d0175a5e0e0da3943c3298f1907a4ab871468656fbbf74bb7842cd8b0686b2c19736
+"@babel/compat-data@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/compat-data@npm:7.28.5"
+  checksum: 10/5a5ff00b187049e847f04bd02e21fbd8094544e5016195c2b45e56fa2e311eeb925b158f52a85624c9e6bacc1ce0323e26c303513723d918a8034e347e22610d
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.25.9, @babel/compat-data@npm:^7.26.0":
-  version: 7.26.3
-  resolution: "@babel/compat-data@npm:7.26.3"
-  checksum: 10/0bf4e491680722aa0eac26f770f2fae059f92e2ac083900b241c90a2c10f0fc80e448b1feccc2b332687fab4c3e33e9f83dee9ef56badca1fb9f3f71266d9ebf
-  languageName: node
-  linkType: hard
-
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3":
-  version: 7.21.8
-  resolution: "@babel/core@npm:7.21.8"
-  dependencies:
-    "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.21.4"
-    "@babel/generator": "npm:^7.21.5"
-    "@babel/helper-compilation-targets": "npm:^7.21.5"
-    "@babel/helper-module-transforms": "npm:^7.21.5"
-    "@babel/helpers": "npm:^7.21.5"
-    "@babel/parser": "npm:^7.21.8"
-    "@babel/template": "npm:^7.20.7"
-    "@babel/traverse": "npm:^7.21.5"
-    "@babel/types": "npm:^7.21.5"
-    convert-source-map: "npm:^1.7.0"
-    debug: "npm:^4.1.0"
-    gensync: "npm:^1.0.0-beta.2"
-    json5: "npm:^2.2.2"
-    semver: "npm:^6.3.0"
-  checksum: 10/a71076dc27964e0754ad99f139f82876d3ed35489c1182aae9052813d36c92f4bd9ddab0e490d28ce8b1f33eea87885081adaedd1305bfc5ce6595c030a7bb0b
-  languageName: node
-  linkType: hard
-
-"@babel/core@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/core@npm:7.26.0"
+"@babel/core@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/core@npm:7.28.5"
   dependencies:
-    "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.26.0"
-    "@babel/generator": "npm:^7.26.0"
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
-    "@babel/helper-module-transforms": "npm:^7.26.0"
-    "@babel/helpers": "npm:^7.26.0"
-    "@babel/parser": "npm:^7.26.0"
-    "@babel/template": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
-    "@babel/types": "npm:^7.26.0"
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.28.5"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-module-transforms": "npm:^7.28.3"
+    "@babel/helpers": "npm:^7.28.4"
+    "@babel/parser": "npm:^7.28.5"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/traverse": "npm:^7.28.5"
+    "@babel/types": "npm:^7.28.5"
+    "@jridgewell/remapping": "npm:^2.3.5"
     convert-source-map: "npm:^2.0.0"
     debug: "npm:^4.1.0"
     gensync: "npm:^1.0.0-beta.2"
     json5: "npm:^2.2.3"
     semver: "npm:^6.3.1"
-  checksum: 10/65767bfdb1f02e80d3af4f138066670ef8fdd12293de85ef151758a901c191c797e86d2e99b11c4cdfca33c72385ecaf38bbd7fa692791ec44c77763496b9b93
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:^7.21.5":
-  version: 7.21.5
-  resolution: "@babel/generator@npm:7.21.5"
-  dependencies:
-    "@babel/types": "npm:^7.21.5"
-    "@jridgewell/gen-mapping": "npm:^0.3.2"
-    "@jridgewell/trace-mapping": "npm:^0.3.17"
-    jsesc: "npm:^2.5.1"
-  checksum: 10/4042ccaa7ce02de9fdb14de789c03788cdb7cfc0acf53495164ef1dd9df01a57cb4969b31a43be846355cfbd0e184f1e9a57be343b94677a5055122d1e49b6cb
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/generator@npm:7.23.6"
-  dependencies:
-    "@babel/types": "npm:^7.23.6"
-    "@jridgewell/gen-mapping": "npm:^0.3.2"
-    "@jridgewell/trace-mapping": "npm:^0.3.17"
-    jsesc: "npm:^2.5.1"
-  checksum: 10/864090d5122c0aa3074471fd7b79d8a880c1468480cbd28925020a3dcc7eb6e98bedcdb38983df299c12b44b166e30915b8085a7bc126e68fa7e2aadc7bd1ac5
+  checksum: 10/2f1e224125179f423f4300d605a0c5a3ef315003281a63b1744405b2605ee2a2ffc5b1a8349aa4f262c72eca31c7e1802377ee04ad2b852a2c88f8ace6cac324
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.26.0, @babel/generator@npm:^7.26.3":
-  version: 7.26.3
-  resolution: "@babel/generator@npm:7.26.3"
+"@babel/generator@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/generator@npm:7.28.3"
   dependencies:
-    "@babel/parser": "npm:^7.26.3"
-    "@babel/types": "npm:^7.26.3"
-    "@jridgewell/gen-mapping": "npm:^0.3.5"
-    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    "@babel/parser": "npm:^7.28.3"
+    "@babel/types": "npm:^7.28.2"
+    "@jridgewell/gen-mapping": "npm:^0.3.12"
+    "@jridgewell/trace-mapping": "npm:^0.3.28"
     jsesc: "npm:^3.0.2"
-  checksum: 10/c1d8710cc1c52af9d8d67f7d8ea775578aa500887b327d2a81e27494764a6ef99e438dd7e14cf7cd3153656492ee27a8362980dc438087c0ca39d4e75532c638
-  languageName: node
-  linkType: hard
-
-"@babel/helper-annotate-as-pure@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
-  dependencies:
-    "@babel/types": "npm:^7.18.6"
-  checksum: 10/88ccd15ced475ef2243fdd3b2916a29ea54c5db3cd0cfabf9d1d29ff6e63b7f7cd1c27264137d7a40ac2e978b9b9a542c332e78f40eb72abe737a7400788fc1b
+  checksum: 10/d00d1e6b51059e47594aab7920b88ec6fcef6489954a9172235ab57ad2e91b39c95376963a6e2e4cc7e8b88fa4f931018f71f9ab32bbc9c0bc0de35a0231f26c
   languageName: node
   linkType: hard
 
-"@babel/helper-annotate-as-pure@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-annotate-as-pure@npm:7.25.9"
+"@babel/generator@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/generator@npm:7.28.5"
   dependencies:
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10/41edda10df1ae106a9b4fe617bf7c6df77db992992afd46192534f5cff29f9e49a303231733782dd65c5f9409714a529f215325569f14282046e9d3b7a1ffb6c
+    "@babel/parser": "npm:^7.28.5"
+    "@babel/types": "npm:^7.28.5"
+    "@jridgewell/gen-mapping": "npm:^0.3.12"
+    "@jridgewell/trace-mapping": "npm:^0.3.28"
+    jsesc: "npm:^3.0.2"
+  checksum: 10/ae618f0a17a6d76c3983e1fd5d9c2f5fdc07703a119efdb813a7d9b8ad4be0a07d4c6f0d718440d2de01a68e321f64e2d63c77fc5d43ae47ae143746ef28ac1f
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.13.0":
-  version: 7.23.6
-  resolution: "@babel/helper-compilation-targets@npm:7.23.6"
+"@babel/helper-annotate-as-pure@npm:^7.27.1, @babel/helper-annotate-as-pure@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/helper-annotate-as-pure@npm:7.27.3"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.5"
-    "@babel/helper-validator-option": "npm:^7.23.5"
-    browserslist: "npm:^4.22.2"
-    lru-cache: "npm:^5.1.1"
-    semver: "npm:^6.3.1"
-  checksum: 10/05595cd73087ddcd81b82d2f3297aac0c0422858dfdded43d304786cf680ec33e846e2317e6992d2c964ee61d93945cbf1fa8ec80b55aee5bfb159227fb02cb9
+    "@babel/types": "npm:^7.27.3"
+  checksum: 10/63863a5c936ef82b546ca289c9d1b18fabfc24da5c4ee382830b124e2e79b68d626207febc8d4bffc720f50b2ee65691d7d12cc0308679dee2cd6bdc926b7190
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.21.5":
-  version: 7.21.5
-  resolution: "@babel/helper-compilation-targets@npm:7.21.5"
+"@babel/helper-compilation-targets@npm:^7.13.0, @babel/helper-compilation-targets@npm:^7.27.1, @babel/helper-compilation-targets@npm:^7.27.2":
+  version: 7.27.2
+  resolution: "@babel/helper-compilation-targets@npm:7.27.2"
   dependencies:
-    "@babel/compat-data": "npm:^7.21.5"
-    "@babel/helper-validator-option": "npm:^7.21.0"
-    browserslist: "npm:^4.21.3"
-    lru-cache: "npm:^5.1.1"
-    semver: "npm:^6.3.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 10/53d24970029d991466f502edadbe3bb95abb921d1b62c43e37e712786238eaca8446fb3abe517e947ef726291507fd45e4664fd84d1d21b3266b0db37f9a83c7
-  languageName: node
-  linkType: hard
-
-"@babel/helper-compilation-targets@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-compilation-targets@npm:7.25.9"
-  dependencies:
-    "@babel/compat-data": "npm:^7.25.9"
-    "@babel/helper-validator-option": "npm:^7.25.9"
+    "@babel/compat-data": "npm:^7.27.2"
+    "@babel/helper-validator-option": "npm:^7.27.1"
     browserslist: "npm:^4.24.0"
     lru-cache: "npm:^5.1.1"
     semver: "npm:^6.3.1"
-  checksum: 10/8053fbfc21e8297ab55c8e7f9f119e4809fa7e505268691e1bedc2cf5e7a5a7de8c60ad13da2515378621b7601c42e101d2d679904da395fa3806a1edef6b92e
+  checksum: 10/bd53c30a7477049db04b655d11f4c3500aea3bcbc2497cf02161de2ecf994fec7c098aabbcebe210ffabc2ecbdb1e3ffad23fb4d3f18723b814f423ea1749fe8
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.25.9"
+"@babel/helper-create-class-features-plugin@npm:^7.27.1, @babel/helper-create-class-features-plugin@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.28.3"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-member-expression-to-functions": "npm:^7.25.9"
-    "@babel/helper-optimise-call-expression": "npm:^7.25.9"
-    "@babel/helper-replace-supers": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@babel/helper-member-expression-to-functions": "npm:^7.27.1"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.3"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/d1d47a7b5fd317c6cb1446b0e4f4892c19ddaa69ea0229f04ba8bea5f273fc8168441e7114ad36ff919f2d310f97310cec51adc79002e22039a7e1640ccaf248
+  checksum: 10/32d01bdd601b4d129b1d510058a19644abc764badcc543adaec9e71443e874ef252783cceb2809645bdf0e92b07f206fd439c75a2a48cf702c627aba7f3ee34a
   languageName: node
   linkType: hard
 
-"@babel/helper-create-regexp-features-plugin@npm:^7.18.6":
-  version: 7.21.8
-  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.21.8"
+"@babel/helper-create-class-features-plugin@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.28.5"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.18.6"
-    regexpu-core: "npm:^5.3.1"
-    semver: "npm:^6.3.0"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@babel/helper-member-expression-to-functions": "npm:^7.28.5"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.5"
+    semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/8edb05564787877473e79b07dff2208f9a3a6db86b8403ec508e37b625f41c538988f3526c414df22d1af0b125dc7f25caeab1e0517f4dcef3a6557c6599e806
+  checksum: 10/0bbf3dfe91875f642fe7ef38f60647f0df8eb9994d4350b19a4d1a9bdc32629e49e56e9a80afb12eeb6f6bcc6666392b37f32231b7c054fc91a0d5251cd67d5b
   languageName: node
   linkType: hard
 
-"@babel/helper-create-regexp-features-plugin@npm:^7.25.9":
-  version: 7.26.3
-  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.26.3"
+"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
     regexpu-core: "npm:^6.2.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/4c44122ea11c4253ee78a9c083b7fbce96c725e2cb43cc864f0e8ea2749f7b6658617239c6278df9f132d09a7545c8fe0336ed2895ad7c80c71507828a7bc8ba
+  checksum: 10/dea272628cd8874f127ab7b2ee468620aabc1383d38bb40c49a9c7667db2258cdfe6620a1d1412f5f0706583f6301b4b7ad3d5932f24df7fe72e66bf9bc0be45
   languageName: node
   linkType: hard
 
@@ -269,431 +166,246 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-environment-visitor@npm:^7.21.5":
-  version: 7.21.5
-  resolution: "@babel/helper-environment-visitor@npm:7.21.5"
-  checksum: 10/e436af7b62956e919066448013a3f7e2cd0b51010c26c50f790124dcd350be81d5597b4e6ed0a4a42d098a27de1e38561cd7998a116a42e7899161192deac9a6
-  languageName: node
-  linkType: hard
-
-"@babel/helper-environment-visitor@npm:^7.22.20":
-  version: 7.22.20
-  resolution: "@babel/helper-environment-visitor@npm:7.22.20"
-  checksum: 10/d80ee98ff66f41e233f36ca1921774c37e88a803b2f7dca3db7c057a5fea0473804db9fb6729e5dbfd07f4bed722d60f7852035c2c739382e84c335661590b69
-  languageName: node
-  linkType: hard
-
-"@babel/helper-function-name@npm:^7.21.0":
-  version: 7.21.0
-  resolution: "@babel/helper-function-name@npm:7.21.0"
-  dependencies:
-    "@babel/template": "npm:^7.20.7"
-    "@babel/types": "npm:^7.21.0"
-  checksum: 10/33d6e1eca48741f86f7073dc5e38220f7fef310ad5bda3354bea322b2a9a2d89a029fa82fac62514dfc16e3f57053fc9f29f11a32d9c2688d914e3a60692b4a5
-  languageName: node
-  linkType: hard
-
-"@babel/helper-function-name@npm:^7.23.0":
-  version: 7.23.0
-  resolution: "@babel/helper-function-name@npm:7.23.0"
-  dependencies:
-    "@babel/template": "npm:^7.22.15"
-    "@babel/types": "npm:^7.23.0"
-  checksum: 10/7b2ae024cd7a09f19817daf99e0153b3bf2bc4ab344e197e8d13623d5e36117ed0b110914bc248faa64e8ccd3e97971ec7b41cc6fd6163a2b980220c58dcdf6d
-  languageName: node
-  linkType: hard
-
-"@babel/helper-hoist-variables@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/helper-hoist-variables@npm:7.18.6"
-  dependencies:
-    "@babel/types": "npm:^7.18.6"
-  checksum: 10/fd9c35bb435fda802bf9ff7b6f2df06308a21277c6dec2120a35b09f9de68f68a33972e2c15505c1a1a04b36ec64c9ace97d4a9e26d6097b76b4396b7c5fa20f
-  languageName: node
-  linkType: hard
-
-"@babel/helper-hoist-variables@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/helper-hoist-variables@npm:7.22.5"
-  dependencies:
-    "@babel/types": "npm:^7.22.5"
-  checksum: 10/394ca191b4ac908a76e7c50ab52102669efe3a1c277033e49467913c7ed6f7c64d7eacbeabf3bed39ea1f41731e22993f763b1edce0f74ff8563fd1f380d92cc
-  languageName: node
-  linkType: hard
-
-"@babel/helper-member-expression-to-functions@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-member-expression-to-functions@npm:7.25.9"
-  dependencies:
-    "@babel/traverse": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10/ef8cc1c1e600b012b312315f843226545a1a89f25d2f474ce2503fd939ca3f8585180f291a3a13efc56cf13eddc1d41a3a040eae9a521838fd59a6d04cc82490
-  languageName: node
-  linkType: hard
-
-"@babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.18.6":
-  version: 7.22.15
-  resolution: "@babel/helper-module-imports@npm:7.22.15"
-  dependencies:
-    "@babel/types": "npm:^7.22.15"
-  checksum: 10/5ecf9345a73b80c28677cfbe674b9f567bb0d079e37dcba9055e36cb337db24ae71992a58e1affa9d14a60d3c69907d30fe1f80aea105184501750a58d15c81c
+"@babel/helper-globals@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/helper-globals@npm:7.28.0"
+  checksum: 10/91445f7edfde9b65dcac47f4f858f68dc1661bf73332060ab67ad7cc7b313421099a2bfc4bda30c3db3842cfa1e86fffbb0d7b2c5205a177d91b22c8d7d9cb47
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.21.4":
-  version: 7.21.4
-  resolution: "@babel/helper-module-imports@npm:7.21.4"
+"@babel/helper-member-expression-to-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-member-expression-to-functions@npm:7.27.1"
   dependencies:
-    "@babel/types": "npm:^7.21.4"
-  checksum: 10/cb276e37180f541f379b36f6aa9f1bd2d2ae50ebc967bb342d2f42acf7fb4f97c474c4e82262b26f3a89c2f11c3efad54dfca152d5b86db9d3e4810fdb92121b
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/533a5a2cf1c9a8770d241b86d5f124c88e953c831a359faf1ac7ba1e632749c1748281b83295d227fe6035b202d81f3d3a1ea13891f150c6538e040668d6126a
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-module-imports@npm:7.25.9"
+"@babel/helper-member-expression-to-functions@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/helper-member-expression-to-functions@npm:7.28.5"
   dependencies:
-    "@babel/traverse": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10/e090be5dee94dda6cd769972231b21ddfae988acd76b703a480ac0c96f3334557d70a965bf41245d6ee43891e7571a8b400ccf2b2be5803351375d0f4e5bcf08
+    "@babel/traverse": "npm:^7.28.5"
+    "@babel/types": "npm:^7.28.5"
+  checksum: 10/05e0857cf7913f03d88ca62952d3888693c21a4f4d7cfc141c630983f71fc0a64393e05cecceb7701dfe98298f7cc38fcb735d892e3c8c6f56f112c85ee1b154
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.21.5":
-  version: 7.21.5
-  resolution: "@babel/helper-module-transforms@npm:7.21.5"
+"@babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-module-imports@npm:7.27.1"
   dependencies:
-    "@babel/helper-environment-visitor": "npm:^7.21.5"
-    "@babel/helper-module-imports": "npm:^7.21.4"
-    "@babel/helper-simple-access": "npm:^7.21.5"
-    "@babel/helper-split-export-declaration": "npm:^7.18.6"
-    "@babel/helper-validator-identifier": "npm:^7.19.1"
-    "@babel/template": "npm:^7.20.7"
-    "@babel/traverse": "npm:^7.21.5"
-    "@babel/types": "npm:^7.21.5"
-  checksum: 10/5a568633ccb70ab6b874cb3c969d12e5344966ff4115631b486c0a8c56dbb04e582b402b45ab5423bcd19f36af0c08a33fe624fa1d8935f8cfe7cdd6056267ae
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/58e792ea5d4ae71676e0d03d9fef33e886a09602addc3bd01388a98d87df9fcfd192968feb40ac4aedb7e287ec3d0c17b33e3ecefe002592041a91d8a1998a8d
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.25.9, @babel/helper-module-transforms@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/helper-module-transforms@npm:7.26.0"
+"@babel/helper-module-transforms@npm:^7.27.1, @babel/helper-module-transforms@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/helper-module-transforms@npm:7.28.3"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.25.9"
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.3"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/9841d2a62f61ad52b66a72d08264f23052d533afc4ce07aec2a6202adac0bfe43014c312f94feacb3291f4c5aafe681955610041ece2c276271adce3f570f2f5
+  checksum: 10/598fdd8aa5b91f08542d0ba62a737847d0e752c8b95ae2566bc9d11d371856d6867d93e50db870fb836a6c44cfe481c189d8a2b35ca025a224f070624be9fa87
   languageName: node
   linkType: hard
 
-"@babel/helper-optimise-call-expression@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-optimise-call-expression@npm:7.25.9"
+"@babel/helper-optimise-call-expression@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-optimise-call-expression@npm:7.27.1"
   dependencies:
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10/f09d0ad60c0715b9a60c31841b3246b47d67650c512ce85bbe24a3124f1a4d66377df793af393273bc6e1015b0a9c799626c48e53747581c1582b99167cc65dc
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/0fb7ee824a384529d6b74f8a58279f9b56bfe3cce332168067dddeab2552d8eeb56dc8eaf86c04a3a09166a316cb92dfc79c4c623cd034ad4c563952c98b464f
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.8.0":
-  version: 7.21.5
-  resolution: "@babel/helper-plugin-utils@npm:7.21.5"
-  checksum: 10/e84986c6e17451f3868ad6a94176f40e96fde77ab89e266ab6f5d3e776544d2d5cbe003767dfef15c6de461f0dc0688000a52c1c6dae4ee9157ed8acfc46bf0e
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.13.0, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-plugin-utils@npm:7.27.1"
+  checksum: 10/96136c2428888e620e2ec493c25888f9ceb4a21099dcf3dd4508ea64b58cdedbd5a9fb6c7b352546de84d6c24edafe482318646932a22c449ebd16d16c22d864
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.13.0, @babel/helper-plugin-utils@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/helper-plugin-utils@npm:7.22.5"
-  checksum: 10/ab220db218089a2aadd0582f5833fd17fa300245999f5f8784b10f5a75267c4e808592284a29438a0da365e702f05acb369f99e1c915c02f9f9210ec60eab8ea
-  languageName: node
-  linkType: hard
-
-"@babel/helper-plugin-utils@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-plugin-utils@npm:7.25.9"
-  checksum: 10/e347d87728b1ab10b6976d46403941c8f9008c045ea6d99997a7ffca7b852dc34b6171380f7b17edf94410e0857ff26f3a53d8618f11d73744db86e8ca9b8c64
-  languageName: node
-  linkType: hard
-
-"@babel/helper-remap-async-to-generator@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-remap-async-to-generator@npm:7.25.9"
+"@babel/helper-remap-async-to-generator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-remap-async-to-generator@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-wrap-function": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-wrap-function": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/ea37ad9f8f7bcc27c109963b8ebb9d22bac7a5db2a51de199cb560e251d5593fe721e46aab2ca7d3e7a24b0aa4aff0eaf9c7307af9c2fd3a1d84268579073052
+  checksum: 10/0747397ba013f87dbf575454a76c18210d61c7c9af0f697546b4bcac670b54ddc156330234407b397f0c948738c304c228e0223039bc45eab4fbf46966a5e8cc
   languageName: node
   linkType: hard
 
-"@babel/helper-replace-supers@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-replace-supers@npm:7.25.9"
+"@babel/helper-replace-supers@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-replace-supers@npm:7.27.1"
   dependencies:
-    "@babel/helper-member-expression-to-functions": "npm:^7.25.9"
-    "@babel/helper-optimise-call-expression": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-member-expression-to-functions": "npm:^7.27.1"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/8ebf787016953e4479b99007bac735c9c860822fafc51bc3db67bc53814539888797238c81fa8b948b6da897eb7b1c1d4f04df11e501a7f0596b356be02de2ab
-  languageName: node
-  linkType: hard
-
-"@babel/helper-simple-access@npm:^7.21.5":
-  version: 7.21.5
-  resolution: "@babel/helper-simple-access@npm:7.21.5"
-  dependencies:
-    "@babel/types": "npm:^7.21.5"
-  checksum: 10/a31207d263b860f470f0ba3bf7c5262de8d1119fa6ed3f69ee64692e3336c21b9044dce89732bb8a4c2cf50b7478157b43dc632818d3cbae49b2fd7313c9b99d
-  languageName: node
-  linkType: hard
-
-"@babel/helper-skip-transparent-expression-wrappers@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.25.9"
-  dependencies:
-    "@babel/traverse": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10/fdbb5248932198bc26daa6abf0d2ac42cab9c2dbb75b7e9f40d425c8f28f09620b886d40e7f9e4e08ffc7aaa2cefe6fc2c44be7c20e81f7526634702fb615bdc
-  languageName: node
-  linkType: hard
-
-"@babel/helper-split-export-declaration@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/helper-split-export-declaration@npm:7.18.6"
-  dependencies:
-    "@babel/types": "npm:^7.18.6"
-  checksum: 10/c6d3dede53878f6be1d869e03e9ffbbb36f4897c7cc1527dc96c56d127d834ffe4520a6f7e467f5b6f3c2843ea0e81a7819d66ae02f707f6ac057f3d57943a2b
+  checksum: 10/72e3f8bef744c06874206bf0d80a0abbedbda269586966511c2491df4f6bf6d47a94700810c7a6737345a545dfb8295222e1e72f506bcd0b40edb3f594f739ea
   languageName: node
   linkType: hard
 
-"@babel/helper-split-export-declaration@npm:^7.22.6":
-  version: 7.22.6
-  resolution: "@babel/helper-split-export-declaration@npm:7.22.6"
+"@babel/helper-skip-transparent-expression-wrappers@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.27.1"
   dependencies:
-    "@babel/types": "npm:^7.22.5"
-  checksum: 10/e141cace583b19d9195f9c2b8e17a3ae913b7ee9b8120246d0f9ca349ca6f03cb2c001fd5ec57488c544347c0bb584afec66c936511e447fd20a360e591ac921
-  languageName: node
-  linkType: hard
-
-"@babel/helper-string-parser@npm:^7.21.5":
-  version: 7.21.5
-  resolution: "@babel/helper-string-parser@npm:7.21.5"
-  checksum: 10/8295bfa30bb84aabaf9a6243ddc2722ed8685ff3aa17ca967f71ced45bfa1ecf9fc3d88c6069de1e19ebfec50a70fa76237c8104208ca25629ab6f67f401ae9e
-  languageName: node
-  linkType: hard
-
-"@babel/helper-string-parser@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/helper-string-parser@npm:7.23.4"
-  checksum: 10/c352082474a2ee1d2b812bd116a56b2e8b38065df9678a32a535f151ec6f58e54633cc778778374f10544b930703cca6ddf998803888a636afa27e2658068a9c
-  languageName: node
-  linkType: hard
-
-"@babel/helper-string-parser@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-string-parser@npm:7.25.9"
-  checksum: 10/c28656c52bd48e8c1d9f3e8e68ecafd09d949c57755b0d353739eb4eae7ba4f7e67e92e4036f1cd43378cc1397a2c943ed7bcaf5949b04ab48607def0258b775
-  languageName: node
-  linkType: hard
-
-"@babel/helper-validator-identifier@npm:^7.18.6, @babel/helper-validator-identifier@npm:^7.19.1":
-  version: 7.19.1
-  resolution: "@babel/helper-validator-identifier@npm:7.19.1"
-  checksum: 10/30ecd53b7276970d59d65e68e147ea885f8812e50d06a59315dd1f12dc41467d29d6c56bf1fd02e91100f939cba378815b2c19f5d3604331a153aed9efcbd2a9
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/4f380c5d0e0769fa6942a468b0c2d7c8f0c438f941aaa88f785f8752c103631d0904c7b4e76207a3b0e6588b2dec376595370d92ca8f8f1b422c14a69aa146d4
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.22.20":
-  version: 7.22.20
-  resolution: "@babel/helper-validator-identifier@npm:7.22.20"
-  checksum: 10/df882d2675101df2d507b95b195ca2f86a3ef28cb711c84f37e79ca23178e13b9f0d8b522774211f51e40168bf5142be4c1c9776a150cddb61a0d5bf3e95750b
+"@babel/helper-string-parser@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-string-parser@npm:7.27.1"
+  checksum: 10/0ae29cc2005084abdae2966afdb86ed14d41c9c37db02c3693d5022fba9f5d59b011d039380b8e537c34daf117c549f52b452398f576e908fb9db3c7abbb3a00
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-validator-identifier@npm:7.25.9"
-  checksum: 10/3f9b649be0c2fd457fa1957b694b4e69532a668866b8a0d81eabfa34ba16dbf3107b39e0e7144c55c3c652bf773ec816af8df4a61273a2bb4eb3145ca9cf478e
+"@babel/helper-validator-identifier@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-validator-identifier@npm:7.27.1"
+  checksum: 10/75041904d21bdc0cd3b07a8ac90b11d64cd3c881e89cb936fa80edd734bf23c35e6bd1312611e8574c4eab1f3af0f63e8a5894f4699e9cfdf70c06fcf4252320
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-option@npm:^7.21.0":
-  version: 7.21.0
-  resolution: "@babel/helper-validator-option@npm:7.21.0"
-  checksum: 10/8ece4c78ffa5461fd8ab6b6e57cc51afad59df08192ed5d84b475af4a7193fc1cb794b59e3e7be64f3cdc4df7ac78bf3dbb20c129d7757ae078e6279ff8c2f07
+"@babel/helper-validator-identifier@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/helper-validator-identifier@npm:7.28.5"
+  checksum: 10/8e5d9b0133702cfacc7f368bf792f0f8ac0483794877c6dca5fcb73810ee138e27527701826fb58a40a004f3a5ec0a2f3c3dd5e326d262530b119918f3132ba7
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-option@npm:^7.23.5":
-  version: 7.23.5
-  resolution: "@babel/helper-validator-option@npm:7.23.5"
-  checksum: 10/537cde2330a8aede223552510e8a13e9c1c8798afee3757995a7d4acae564124fe2bf7e7c3d90d62d3657434a74340a274b3b3b1c6f17e9a2be1f48af29cb09e
+"@babel/helper-validator-option@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-validator-option@npm:7.27.1"
+  checksum: 10/db73e6a308092531c629ee5de7f0d04390835b21a263be2644276cb27da2384b64676cab9f22cd8d8dbd854c92b1d7d56fc8517cf0070c35d1c14a8c828b0903
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-option@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-validator-option@npm:7.25.9"
-  checksum: 10/9491b2755948ebbdd68f87da907283698e663b5af2d2b1b02a2765761974b1120d5d8d49e9175b167f16f72748ffceec8c9cf62acfbee73f4904507b246e2b3d
-  languageName: node
-  linkType: hard
-
-"@babel/helper-wrap-function@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-wrap-function@npm:7.25.9"
-  dependencies:
-    "@babel/template": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10/988dcf49159f1c920d6b9486762a93767a6e84b5e593a6342bc235f3e47cc1cb0c048d8fca531a48143e6b7fce1ff12ddbf735cf5f62cb2f07192cf7c27b89cf
-  languageName: node
-  linkType: hard
-
-"@babel/helpers@npm:^7.21.5":
-  version: 7.21.5
-  resolution: "@babel/helpers@npm:7.21.5"
+"@babel/helper-wrap-function@npm:^7.27.1":
+  version: 7.28.3
+  resolution: "@babel/helper-wrap-function@npm:7.28.3"
   dependencies:
-    "@babel/template": "npm:^7.20.7"
-    "@babel/traverse": "npm:^7.21.5"
-    "@babel/types": "npm:^7.21.5"
-  checksum: 10/f5602563879528596ff2d1b6f8ce5eeb644ac2f99ac36155f1b483c16a14f541b88fa73d0b0f69b053596c2abc8f8dbfee8813677b951bf4b6531c536cecc0db
+    "@babel/template": "npm:^7.27.2"
+    "@babel/traverse": "npm:^7.28.3"
+    "@babel/types": "npm:^7.28.2"
+  checksum: 10/a5ed5fe7b8d9949d3b4f45ccec0b365018b8e444f6a6d794b4c8291e251e680f5b7c79c49c2170de9d14967c78721f59620ce70c5dac2d53c30628ef971d9dce
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/helpers@npm:7.26.0"
+"@babel/helpers@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/helpers@npm:7.28.4"
   dependencies:
-    "@babel/template": "npm:^7.25.9"
-    "@babel/types": "npm:^7.26.0"
-  checksum: 10/fd4757f65d10b64cfdbf4b3adb7ea6ffff9497c53e0786452f495d1f7794da7e0898261b4db65e1c62bbb9a360d7d78a1085635c23dfc3af2ab6dcba06585f86
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.28.4"
+  checksum: 10/5a70a82e196cf8808f8a449cc4780c34d02edda2bb136d39ce9d26e63b615f18e89a95472230c3ce7695db0d33e7026efeee56f6454ed43480f223007ed205eb
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/highlight@npm:7.18.6"
+"@babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/parser@npm:7.28.4"
   dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.18.6"
-    chalk: "npm:^2.0.0"
-    js-tokens: "npm:^4.0.0"
-  checksum: 10/92d8ee61549de5ff5120e945e774728e5ccd57fd3b2ed6eace020ec744823d4a98e242be1453d21764a30a14769ecd62170fba28539b211799bbaf232bbb2789
-  languageName: node
-  linkType: hard
-
-"@babel/highlight@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/highlight@npm:7.23.4"
-  dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.22.20"
-    chalk: "npm:^2.4.2"
-    js-tokens: "npm:^4.0.0"
-  checksum: 10/62fef9b5bcea7131df4626d009029b1ae85332042f4648a4ce6e740c3fd23112603c740c45575caec62f260c96b11054d3be5987f4981a5479793579c3aac71f
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.5, @babel/parser@npm:^7.21.8":
-  version: 7.21.8
-  resolution: "@babel/parser@npm:7.21.8"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 10/9fada12d05f6bb195641916399ae1e4f02c063570f33d1d7b0541b3f2119459791dd30a43fd10484b1a285235c19d26c7ecd22e8ce9627cf83f7ce7291b25376
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/parser@npm:7.23.6"
+    "@babel/types": "npm:^7.28.4"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10/6be3a63d3c9d07b035b5a79c022327cb7e16cbd530140ecb731f19a650c794c315a72c699a22413ebeafaff14aa8f53435111898d59e01a393d741b85629fa7d
+  checksum: 10/f54c46213ef180b149f6a17ea765bf40acc1aebe2009f594e2a283aec69a190c6dda1fdf24c61a258dbeb903abb8ffb7a28f1a378f8ab5d333846ce7b7e23bf1
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.3":
-  version: 7.26.3
-  resolution: "@babel/parser@npm:7.26.3"
+"@babel/parser@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/parser@npm:7.28.5"
   dependencies:
-    "@babel/types": "npm:^7.26.3"
+    "@babel/types": "npm:^7.28.5"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10/e7e3814b2dc9ee3ed605d38223471fa7d3a84cbe9474d2b5fa7ac57dc1ddf75577b1fd3a93bf7db8f41f28869bda795cddd80223f980be23623b6434bf4c88a8
+  checksum: 10/8d9bfb437af6c97a7f6351840b9ac06b4529ba79d6d3def24d6c2996ab38ff7f1f9d301e868ca84a93a3050fadb3d09dbc5105b24634cd281671ac11eebe8df7
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.25.9"
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.28.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.5"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/3c23ef34e3fd7da3578428cb488180ab6b7b96c9c141438374b6d87fa814d87de099f28098e5fc64726c19193a1da397e4d2351d40b459bcd2489993557e2c74
+  checksum: 10/750de98b34e6d09b545ded6e635b43cbab02fe319622964175259b98f41b16052e5931c4fbd45bad8cd0a37ebdd381233edecec9ee395b8ec51f47f47d1dbcd4
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:7.25.9"
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/d3e14ab1cb9cb50246d20cab9539f2fbd1e7ef1ded73980c8ad7c0561b4d5e0b144d362225f0976d47898e04cbd40f2000e208b0913bd788346cf7791b96af91
+  checksum: 10/eb7f4146dc01f1198ce559a90b077e58b951a07521ec414e3c7d4593bf6c4ab5c2af22242a7e9fec085e20299e0ba6ea97f44a45e84ab148141bf9eb959ad25e
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.25.9"
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/a9d1ee3fd100d3eb6799a2f2bbd785296f356c531d75c9369f71541811fa324270258a374db103ce159156d006da2f33370330558d0133e6f7584152c34997ca
+  checksum: 10/621cfddfcc99a81e74f8b6f9101fd260b27500cb1a568e3ceae9cc8afe9aee45ac3bca3900a2b66c612b1a2366d29ef67d4df5a1c975be727eaad6906f98c2c6
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.25.9"
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.13.0
-  checksum: 10/5b298b28e156f64de51cdb03a2c5b80c7f978815ef1026f3ae8b9fc48d28bf0a83817d8fbecb61ef8fb94a7201f62cca5103cc6e7b9e8f28e38f766d7905b378
+  checksum: 10/f07aa80272bd7a46b7ba11a4644da6c9b6a5a64e848dfaffdad6f02663adefd512e1aaebe664c4dd95f7ed4f80c872c7f8db8d8e34b47aae0930b412a28711a0
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.25.9"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.28.3"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.3"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/cb893e5deb9312a0120a399835b6614a016c036714de7123c8edabccc56a09c4455016e083c5c4dd485248546d4e5e55fc0e9132b3c3a9bd16abf534138fe3f2
+  checksum: 10/eeacdb7fa5ae19e366cbc4da98736b898e05b9abe572aa23093e6be842c6c8284d08af538528ec771073a3749718033be3713ff455ca008d11a7b0e90e62a53d
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-function-bind@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-proposal-function-bind@npm:7.25.9"
+"@babel/plugin-proposal-function-bind@npm:^7.23.3, @babel/plugin-proposal-function-bind@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-proposal-function-bind@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/66ab480f06561db3e27c5b276046753c03a0a24d4948985bb9d2564f27cb6c827a95d15351b3fd2f157c7765aca92d1e061c87ea60e5d6e9379d0649f3366c82
+  checksum: 10/895637911e9f74234b1d9d3c003f143814e7df3d0da50e163abcfbaf09820becca807f6114efab46ccc31eff287df1d10314c2bbba62d1ad24337fea63669f5a
   languageName: node
   linkType: hard
 
@@ -706,898 +418,794 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-async-generators@npm:^7.8.4":
-  version: 7.8.4
-  resolution: "@babel/plugin-syntax-async-generators@npm:7.8.4"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.8.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/7ed1c1d9b9e5b64ef028ea5e755c0be2d4e5e4e3d6cf7df757b9a8c4cfa4193d268176d0f1f7fbecdda6fe722885c7fda681f480f3741d8a2d26854736f05367
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-syntax-bigint@npm:^7.8.3":
-  version: 7.8.3
-  resolution: "@babel/plugin-syntax-bigint@npm:7.8.3"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.8.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/3a10849d83e47aec50f367a9e56a6b22d662ddce643334b087f9828f4c3dd73bdc5909aaeabe123fed78515767f9ca43498a0e621c438d1cd2802d7fae3c9648
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-syntax-class-properties@npm:^7.8.3":
-  version: 7.12.13
-  resolution: "@babel/plugin-syntax-class-properties@npm:7.12.13"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.12.13"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/24f34b196d6342f28d4bad303612d7ff566ab0a013ce89e775d98d6f832969462e7235f3e7eaf17678a533d4be0ba45d3ae34ab4e5a9dcbda5d98d49e5efa2fc
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-syntax-import-assertions@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/plugin-syntax-import-assertions@npm:7.26.0"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/b58f2306df4a690ca90b763d832ec05202c50af787158ff8b50cdf3354359710bce2e1eb2b5135fcabf284756ac8eadf09ca74764aa7e76d12a5cac5f6b21e67
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-syntax-import-attributes@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/plugin-syntax-import-attributes@npm:7.26.0"
+"@babel/plugin-syntax-import-assertions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c122aa577166c80ee67f75aebebeef4150a132c4d3109d25d7fc058bf802946f883e330f20b78c1d3e3a5ada631c8780c263d2d01b5dbaecc69efefeedd42916
+  checksum: 10/fb661d630808d67ecb85eabad25aac4e9696a20464bad4c4a6a0d3d40e4dc22557d47e9be3d591ec06429cf048cfe169b8891c373606344d51c4f3ac0f91d6d0
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-meta@npm:^7.8.3":
-  version: 7.10.4
-  resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
+"@babel/plugin-syntax-import-attributes@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.10.4"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/166ac1125d10b9c0c430e4156249a13858c0366d38844883d75d27389621ebe651115cb2ceb6dc011534d5055719fa1727b59f39e1ab3ca97820eef3dcab5b9b
+  checksum: 10/97973982fff1bbf86b3d1df13380567042887c50e2ae13a400d02a8ff2c9742a60a75e279bfb73019e1cd9710f04be5e6ab81f896e6678dcfcec8b135e8896cf
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-json-strings@npm:^7.8.3":
-  version: 7.8.3
-  resolution: "@babel/plugin-syntax-json-strings@npm:7.8.3"
+"@babel/plugin-syntax-jsx@npm:^7.12.13, @babel/plugin-syntax-jsx@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-jsx@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.8.0"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/bf5aea1f3188c9a507e16efe030efb996853ca3cadd6512c51db7233cc58f3ac89ff8c6bdfb01d30843b161cfe7d321e1bf28da82f7ab8d7e6bc5464666f354a
+  checksum: 10/c6d1324cff286a369aa95d99b8abd21dd07821b5d3affd5fe7d6058c84cff9190743287826463ee57a7beecd10fa1e4bc99061df532ee14e188c1c8937b13e3a
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.12.13":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
+"@babel/plugin-syntax-typescript@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-typescript@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/89037694314a74e7f0e7a9c8d3793af5bf6b23d80950c29b360db1c66859d67f60711ea437e70ad6b5b4b29affe17eababda841b6c01107c2b638e0493bafb4e
+  checksum: 10/87836f7e32af624c2914c73cd6b9803cf324e07d43f61dbb973c6a86f75df725e12540d91fac7141c14b697aa9268fd064220998daced156e96ac3062d7afb41
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-syntax-jsx@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/bb609d1ffb50b58f0c1bac8810d0e46a4f6c922aa171c458f3a19d66ee545d36e782d3bffbbc1fed0dc65a558bdce1caf5279316583c0fff5a2c1658982a8563
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3":
-  version: 7.10.4
-  resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.10.4"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/aff33577037e34e515911255cdbb1fd39efee33658aa00b8a5fd3a4b903585112d037cce1cc9e4632f0487dc554486106b79ccd5ea63a2e00df4363f6d4ff886
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-syntax-nullish-coalescing-operator@npm:^7.8.3":
-  version: 7.8.3
-  resolution: "@babel/plugin-syntax-nullish-coalescing-operator@npm:7.8.3"
+"@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6":
+  version: 7.18.6
+  resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.8.0"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.18.6"
+    "@babel/helper-plugin-utils": "npm:^7.18.6"
   peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/87aca4918916020d1fedba54c0e232de408df2644a425d153be368313fdde40d96088feed6c4e5ab72aac89be5d07fef2ddf329a15109c5eb65df006bf2580d1
+    "@babel/core": ^7.0.0
+  checksum: 10/a651d700fe63ff0ddfd7186f4ebc24447ca734f114433139e3c027bc94a900d013cf1ef2e2db8430425ba542e39ae160c3b05f06b59fd4656273a3df97679e9c
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-numeric-separator@npm:^7.8.3":
-  version: 7.10.4
-  resolution: "@babel/plugin-syntax-numeric-separator@npm:7.10.4"
+"@babel/plugin-transform-arrow-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.10.4"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/01ec5547bd0497f76cc903ff4d6b02abc8c05f301c88d2622b6d834e33a5651aa7c7a3d80d8d57656a4588f7276eba357f6b7e006482f5b564b7a6488de493a1
+  checksum: 10/62c2cc0ae2093336b1aa1376741c5ed245c0987d9e4b4c5313da4a38155509a7098b5acce582b6781cc0699381420010da2e3086353344abe0a6a0ec38961eb7
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-object-rest-spread@npm:^7.8.3":
-  version: 7.8.3
-  resolution: "@babel/plugin-syntax-object-rest-spread@npm:7.8.3"
+"@babel/plugin-transform-async-generator-functions@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.28.0"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.8.0"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-remap-async-to-generator": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/fddcf581a57f77e80eb6b981b10658421bc321ba5f0a5b754118c6a92a5448f12a0c336f77b8abf734841e102e5126d69110a306eadb03ca3e1547cab31f5cbf
+  checksum: 10/8ad31b9969b203dec572738a872e17b14ef76ca45b4ef5ffa76f3514be417ca233d1a0978e5f8de166412a8a745619eb22b07cc5df96f5ebad8ca500f920f61b
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-optional-catch-binding@npm:^7.8.3":
-  version: 7.8.3
-  resolution: "@babel/plugin-syntax-optional-catch-binding@npm:7.8.3"
+"@babel/plugin-transform-async-to-generator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.8.0"
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-remap-async-to-generator": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/910d90e72bc90ea1ce698e89c1027fed8845212d5ab588e35ef91f13b93143845f94e2539d831dc8d8ededc14ec02f04f7bd6a8179edd43a326c784e7ed7f0b9
+  checksum: 10/d79d7a7ae7d416f6a48200017d027a6ba94c09c7617eea8b4e9c803630f00094c1a4fc32bf20ce3282567824ce3fcbda51653aac4003c71ea4e681b331338979
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-optional-chaining@npm:^7.8.3":
-  version: 7.8.3
-  resolution: "@babel/plugin-syntax-optional-chaining@npm:7.8.3"
+"@babel/plugin-transform-block-scoped-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.8.0"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/eef94d53a1453361553c1f98b68d17782861a04a392840341bc91780838dd4e695209c783631cf0de14c635758beafb6a3a65399846ffa4386bff90639347f30
+  checksum: 10/7fb4988ca80cf1fc8345310d5edfe38e86b3a72a302675cdd09404d5064fe1d1fe1283ebe658ad2b71445ecef857bfb29a748064306b5f6c628e0084759c2201
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-top-level-await@npm:^7.8.3":
-  version: 7.14.5
-  resolution: "@babel/plugin-syntax-top-level-await@npm:7.14.5"
+"@babel/plugin-transform-block-scoping@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.28.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.14.5"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/bbd1a56b095be7820029b209677b194db9b1d26691fe999856462e66b25b281f031f3dfd91b1619e9dcf95bebe336211833b854d0fb8780d618e35667c2d0d7e
+  checksum: 10/4b695360ede8472262111efb9d5c35b515767e1ead9e272c3e9799235e3f5feeb21d99a66bb23acbba9424465d13e7695a22a22a680c4aa558702ef8aad461d6
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-typescript@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-syntax-typescript@npm:7.25.9"
+"@babel/plugin-transform-class-properties@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-class-properties@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0e9821e8ba7d660c36c919654e4144a70546942ae184e85b8102f2322451eae102cbfadbcadd52ce077a2b44b400ee52394c616feab7b5b9f791b910e933fd33
+  checksum: 10/475a6e5a9454912fe1bdc171941976ca10ea4e707675d671cdb5ce6b6761d84d1791ac61b6bca81a2e5f6430cb7b9d8e4b2392404110e69c28207a754e196294
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6"
+"@babel/plugin-transform-class-static-block@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.28.3"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.18.6"
-    "@babel/helper-plugin-utils": "npm:^7.18.6"
+    "@babel/helper-create-class-features-plugin": "npm:^7.28.3"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 10/a651d700fe63ff0ddfd7186f4ebc24447ca734f114433139e3c027bc94a900d013cf1ef2e2db8430425ba542e39ae160c3b05f06b59fd4656273a3df97679e9c
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-arrow-functions@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/c29f081224859483accf55fb4d091db2aac0dcd0d7954bac5ca889030cc498d3f771aa20eb2e9cd8310084ec394d85fa084b97faf09298b6bc9541182b3eb5bb
+    "@babel/core": ^7.12.0
+  checksum: 10/c0ba8f0cbf3699287e5a711907dab3b29f346d9c107faa4e424aa26252e45845d74ca08ee6245bfccf32a8c04bc1d07a89b635e51522592c6044b810a48d3f58
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.25.9"
+"@babel/plugin-transform-classes@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/plugin-transform-classes@npm:7.28.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-remap-async-to-generator": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-globals": "npm:^7.28.0"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/99306c44a4a791abd51a56d89fa61c4cfe805a58e070c7fb1cbf950886778a6c8c4f25a92d231f91da1746d14a338436073fd83038e607f03a2a98ac5340406b
+  checksum: 10/1f8423d0ba287ba4ae3aac89299e704a666ef2fc5950cd581e056c068486917a460efd5731fdd0d0fb0a8a08852e13b31c1add089028e89a8991a7fdfaff5c43
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-async-to-generator@npm:7.25.9"
+"@babel/plugin-transform-computed-properties@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-remap-async-to-generator": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/template": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b3ad50fb93c171644d501864620ed23952a46648c4df10dc9c62cc9ad08031b66bd272cfdd708faeee07c23b6251b16f29ce0350473e4c79f0c32178d38ce3a6
+  checksum: 10/101f6d4575447070943d5a9efaa5bea8c552ea3083d73a9612f1a16d38b0a0a7b79a5feb65c6cc4e4fcabf28e85a570b97ccd3294da966e8fbbb6dfb97220eda
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.25.9"
+"@babel/plugin-transform-destructuring@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/plugin-transform-destructuring@npm:7.28.0"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/bf31896556b33a80f017af3d445ceb532ec0f5ca9d69bc211a963ac92514d172d5c24c5ac319f384d9dfa7f1a4d8dc23032c2fe3e74f98a59467ecd86f7033ae
+  checksum: 10/cddab2520ff32d18005670fc6646396a253d3811d1ccc49f6f858469f05985ee896c346a0cb34d1cf25155c9be76d1068ff878cf8e8459bd3fa27513ec5a6802
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.25.9"
+"@babel/plugin-transform-destructuring@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-destructuring@npm:7.28.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/89dcdd7edb1e0c2f44e3c568a8ad8202e2574a8a8308248550a9391540bc3f5c9fbd8352c60ae90769d46f58d3ab36f2c3a0fbc1c3620813d92ff6fccdfa79c8
+  checksum: 10/9cc67d3377bc5d8063599f2eb4588f5f9a8ab3abc9b64a40c24501fb3c1f91f4d5cf281ea9f208fd6b2ef8d9d8b018dacf1bed9493334577c966cd32370a7036
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-class-properties@npm:7.25.9"
+"@babel/plugin-transform-dotall-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a8d69e2c285486b63f49193cbcf7a15e1d3a5f632c1c07d7a97f65306df7f554b30270b7378dde143f8b557d1f8f6336c643377943dec8ec405e4cd11e90b9ea
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-class-static-block@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/plugin-transform-class-static-block@npm:7.26.0"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.12.0
-  checksum: 10/60cba3f125a7bc4f90706af0a011697c7ffd2eddfba336ed6f84c5f358c44c3161af18b0202475241a96dee7964d96dd3a342f46dbf85b75b38bb789326e1766
+  checksum: 10/2173e5b13f403538ffc6bd57b190cedf4caf320abc13a99e5b2721864e7148dbd3bd7c82d92377136af80432818f665fdd9a1fd33bc5549a4c91e24e5ce2413c
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-classes@npm:7.25.9"
+"@babel/plugin-transform-duplicate-keys@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-replace-supers": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
-    globals: "npm:^11.1.0"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1914ebe152f35c667fba7bf17ce0d9d0f33df2fb4491990ce9bb1f9ec5ae8cbd11d95b0dc371f7a4cc5e7ce4cf89467c3e34857302911fc6bfb6494a77f7b37e
+  checksum: 10/987b718d2fab7626f61b72325c8121ead42341d6f46ad3a9b5e5f67f3ec558c903f1b8336277ffc43caac504ce00dd23a5456b5d1da23913333e1da77751f08d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-computed-properties@npm:7.25.9"
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/template": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/aa1a9064d6a9d3b569b8cae6972437315a38a8f6553ee618406da5122500a06c2f20b9fa93aeed04dd895923bf6f529c09fc79d4be987ec41785ceb7d2203122
+    "@babel/core": ^7.0.0
+  checksum: 10/2a109613535e6ac79240dced71429e988affd6a5b3d0cd0f563c8d6c208c51ce7bf2c300bc1150502376b26a51f279119b3358f1c0f2d2f8abca3bcd62e1ae46
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-destructuring@npm:7.25.9"
+"@babel/plugin-transform-dynamic-import@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/51b24fbead910ad0547463b2d214dd08076b22a66234b9f878b8bac117603dd23e05090ff86e9ffc373214de23d3e5bf1b095fe54cce2ca16b010264d90cf4f5
+  checksum: 10/7a9fbc8d17148b7f11a1d1ca3990d2c2cd44bd08a45dcaf14f20a017721235b9044b20e6168b6940282bb1b48fb78e6afbdfb9dd9d82fde614e15baa7d579932
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dotall-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-dotall-regex@npm:7.25.9"
+"@babel/plugin-transform-explicit-resource-management@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/plugin-transform-explicit-resource-management@npm:7.28.0"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/8bdf1bb9e6e3a2cc8154ae88a3872faa6dc346d6901994505fb43ac85f858728781f1219f40b67f7bb0687c507450236cb7838ac68d457e65637f98500aa161b
+  checksum: 10/93d7835160bf8623c7b7072898046c9a2a46cf911f38fa2a002de40a11045a65bf9c1663c98f2e4e04615037f63391832c20b45d7bc26a16d39a97995d0669bc
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-keys@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.25.9"
+"@babel/plugin-transform-exponentiation-operator@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.28.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/10dbb87bc09582416f9f97ca6c40563655abf33e3fd0fee25eeaeff28e946a06651192112a2bc2b18c314a638fa15c55b8365a677ef67aa490848cefdc57e1d8
+  checksum: 10/da9bb5acd35c9fba92b802641f9462b82334158a149c78a739a04576a1e62be41057a201a41c022dda263bb73ac1a26521bbc997c7fc067f54d487af297995f4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:7.25.9"
+"@babel/plugin-transform-export-namespace-from@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 10/f7233cf596be8c6843d31951afaf2464a62a610cb89c72c818c044765827fab78403ab8a7d3a6386f838c8df574668e2a48f6c206b1d7da965aff9c6886cb8e6
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-dynamic-import@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-dynamic-import@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/aaca1ccda819be9b2b85af47ba08ddd2210ff2dbea222f26e4cd33f97ab020884bf81a66197e50872721e9daf36ceb5659502c82199884ea74d5d75ecda5c58b
+  checksum: 10/85082923eca317094f08f4953d8ea2a6558b3117826c0b740676983902b7236df1f4213ad844cb38c2dae104753dbe8f1cc51f01567835d476d32f5f544a4385
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.25.9":
-  version: 7.26.3
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.26.3"
+"@babel/plugin-transform-for-of@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-for-of@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0d8da2e552a50a775fe8e6e3c32621d20d3c5d1af7ab40ca2f5c7603de057b57b1b5850f74040e4ecbe36c09ac86d92173ad1e223a2a3b3df3cc359ca4349738
+  checksum: 10/705c591d17ef263c309bba8c38e20655e8e74ff7fd21883a9cdaf5bf1df42d724383ad3d88ac01f42926e15b1e1e66f2f7f8c4e87de955afffa290d52314b019
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.25.9"
+"@babel/plugin-transform-function-name@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-function-name@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-compilation-targets": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4dfe8df86c5b1d085d591290874bb2d78a9063090d71567ed657a418010ad333c3f48af2c974b865f53bbb718987a065f89828d43279a7751db1a56c9229078d
+  checksum: 10/26a2a183c3c52a96495967420a64afc5a09f743a230272a131668abf23001e393afa6371e6f8e6c60f4182bea210ed31d1caf866452d91009c1daac345a52f23
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-for-of@npm:7.25.9"
+"@babel/plugin-transform-json-strings@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-json-strings@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/63a2db7fe06c2e3f5fc1926f478dac66a5f7b3eaeb4a0ffae577e6f3cb3d822cb1ed2ed3798f70f5cb1aa06bc2ad8bcd1f557342f5c425fd83c37a8fc1cfd2ba
+  checksum: 10/2c05a02f63b49f47069271b3405a66c3c8038de5b995b0700b1bd9a5e2bb3e67abd01e4604629302a521f4d8122a4233944aefa16559fd4373d256cc5d3da57f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-function-name@npm:7.25.9"
+"@babel/plugin-transform-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-literals@npm:7.27.1"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a8d7c8d019a6eb57eab5ca1be3e3236f175557d55b1f3b11f8ad7999e3fbb1cf37905fd8cb3a349bffb4163a558e9f33b63f631597fdc97c858757deac1b2fd7
+  checksum: 10/0a76d12ab19f32dd139964aea7da48cecdb7de0b75e207e576f0f700121fe92367d788f328bf4fb44b8261a0f605c97b44e62ae61cddbb67b14e94c88b411f95
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-json-strings@npm:7.25.9"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.28.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e2498d84761cfd05aaea53799933d55af309c9d6204e66b38778792d171e4d1311ad34f334259a3aa3407dd0446f6bd3e390a1fcb8ce2e42fe5aabed0e41bee1
+  checksum: 10/c76778f4b186cc4f0b7e3658d91c690678bdb2b9d032f189213016d6177f2564709b79b386523b022b7d52e52331fd91f280f7c7bf85d835e0758b4b0d371447
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-literals@npm:7.25.9"
+"@babel/plugin-transform-member-expression-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/3cca75823a38aab599bc151b0fa4d816b5e1b62d6e49c156aa90436deb6e13649f5505973151a10418b64f3f9d1c3da53e38a186402e0ed7ad98e482e70c0c14
+  checksum: 10/804121430a6dcd431e6ffe99c6d1fbbc44b43478113b79c677629e7f877b4f78a06b69c6bfb2747fd84ee91879fe2eb32e4620b53124603086cf5b727593ebe8
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.25.9"
+"@babel/plugin-transform-modules-amd@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/8c6febb4ac53852314d28b5e2c23d5dbbff7bf1e57d61f9672e0d97531ef7778b3f0ad698dcf1179f5486e626c77127508916a65eb846a89e98a92f70ed3537b
+  checksum: 10/5ca9257981f2bbddd9dccf9126f1368de1cb335e7a5ff5cca9282266825af5b18b5f06c144320dcf5d2a200d2b53b6d22d9b801a55dc0509ab5a5838af7e61b7
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-member-expression-literals@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.25.9"
+"@babel/plugin-transform-modules-commonjs@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/db92041ae87b8f59f98b50359e0bb172480f6ba22e5e76b13bdfe07122cbf0daa9cd8ad2e78dcb47939938fed88ad57ab5989346f64b3a16953fc73dea3a9b1f
+  checksum: 10/9059243a977bc1f13e3dccfc6feb6508890e7c7bb191f7eb56626b20672b4b12338051ca835ab55426875a473181502c8f35b4df58ba251bef63b25866d995fe
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-modules-amd@npm:7.25.9"
+"@babel/plugin-transform-modules-systemjs@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.28.5"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.28.3"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.28.5"
+    "@babel/traverse": "npm:^7.28.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/75d34c6e709a23bcfa0e06f722c9a72b1d9ac3e7d72a07ef54a943d32f65f97cbbf0e387d874eb9d9b4c8d33045edfa8e8441d0f8794f3c2b9f1d71b928acf2c
+  checksum: 10/1b91b4848845eaf6e21663d97a2a6c896553b127deaf3c2e9a2a4f041249277d13ebf71fd42d0ecbc4385e9f76093eff592fe0da0dcf1401b3f38c1615d8c539
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.25.9":
-  version: 7.26.3
-  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.26.3"
+"@babel/plugin-transform-modules-umd@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-umd@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.26.0"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/f817f02fa04d13f1578f3026239b57f1003bebcf9f9b8d854714bed76a0e4986c79bd6d2e0ac14282c5d309454a8dab683c179709ca753b0152a69c69f3a78e3
+  checksum: 10/7388932863b4ee01f177eb6c2e2df9e2312005e43ada99897624d5565db4b9cef1e30aa7ad2c79bbe5373f284cfcddea98d8fe212714a24c6aba223272163058
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.25.9"
+"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/03145aa89b7c867941a03755216cfb503df6d475a78df84849a157fa5f2fcc17ba114a968d0579ae34e7c61403f35d1ba5d188fdfb9ad05f19354eb7605792f9
+    "@babel/core": ^7.0.0
+  checksum: 10/a711c92d9753df26cefc1792481e5cbff4fe4f32b383d76b25e36fa865d8023b1b9aa6338cf18f5c0e864c71a7fbe8115e840872ccd61a914d9953849c68de7d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-umd@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-modules-umd@npm:7.25.9"
+"@babel/plugin-transform-new-target@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-new-target@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/47d03485fedac828832d9fee33b3b982a6db8197e8651ceb5d001890e276150b5a7ee3e9780749e1ba76453c471af907a159108832c24f93453dd45221788e97
+  checksum: 10/620d78ee476ae70960989e477dc86031ffa3d554b1b1999e6ec95261629f7a13e5a7b98579c63a009f9fdf14def027db57de1f0ae1f06fb6eaed8908ff65cf68
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.25.9"
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 10/434346ba05cf74e3f4704b3bdd439287b95cd2a8676afcdc607810b8c38b6f4798cd69c1419726b2e4c7204e62e4a04d31b0360e91ca57a930521c9211e07789
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-new-target@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-new-target@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/07bb3a09028ee7b8e8ede6e6390e3b3aecc5cf9adb2fc5475ff58036c552b8a3f8e63d4c43211a60545f3307cdc15919f0e54cb5455d9546daed162dc54ff94e
+  checksum: 10/15333f4888ffedc449a2a21a0b1ca7983e089f43faa00cfb71d2466e20221a5fd979cdb1a3f57bc20fc62c67bd3ff3dde054133fb6324a58be8f64d20aefacd2
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.25.9"
+"@babel/plugin-transform-numeric-separator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/26e03b1c2c0408cc300e46d8f8cb639653ff3a7b03456d0d8afbb53c44f33a89323f51d99991dade3a5676921119bbdf869728bb7911799b5ef99ffafa2cdd24
+  checksum: 10/049b958911de86d32408cd78017940a207e49c054ae9534ab53a32a57122cc592c0aae3c166d6f29bd1a7d75cc779d71883582dd76cb28b2fbb493e842d8ffca
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-numeric-separator@npm:7.25.9"
+"@babel/plugin-transform-object-rest-spread@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.28.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.0"
+    "@babel/plugin-transform-parameters": "npm:^7.27.7"
+    "@babel/traverse": "npm:^7.28.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0528ef041ed88e8c3f51624ee87b8182a7f246fe4013f0572788e0727d20795b558f2b82e3989b5dd416cbd339500f0d88857de41b6d3b6fdacb1d5344bcc5b1
+  checksum: 10/aebe464e368cefa5c3ba40316c47b61eb25f891d436b2241021efef5bd0b473c4aa5ba4b9fa0f4b4d5ce4f6bc6b727628d1ca79d54e7b8deebb5369f7dff2984
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.25.9"
+"@babel/plugin-transform-object-super@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-object-super@npm:7.27.1"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/plugin-transform-parameters": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a157ac5af2721090150858f301d9c0a3a0efb8ef66b90fce326d6cc0ae45ab97b6219b3e441bf8d72a2287e95eb04dd6c12544da88ea2345e70b3fac2c0ac9e2
+  checksum: 10/46b819cb9a6cd3cfefe42d07875fee414f18d5e66040366ae856116db560ad4e16f3899a0a7fddd6773e0d1458444f94b208b67c0e3b6977a27ea17a5c13dbf6
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-super@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-object-super@npm:7.25.9"
+"@babel/plugin-transform-optional-catch-binding@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-replace-supers": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1817b5d8b80e451ae1ad9080cca884f4f16df75880a158947df76a2ed8ab404d567a7dce71dd8051ef95f90fbe3513154086a32aba55cc76027f6cbabfbd7f98
+  checksum: 10/f4356b04cf21a98480f9788ea50f1f13ee88e89bb6393ba4b84d1f39a4a84c7928c9a4328e8f4c5b6deb218da68a8fd17bf4f46faec7653ddc20ffaaa5ba49f4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.25.9"
+"@babel/plugin-transform-optional-chaining@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b46a8d1e91829f3db5c252583eb00d05a779b4660abeea5500fda0f8ffa3584fd18299443c22f7fddf0ed9dfdb73c782c43b445dc468d4f89803f2356963b406
+  checksum: 10/34b0f96400c259a2722740d17a001fe45f78d8ff052c40e29db2e79173be72c1cfe8d9681067e3f5da3989e4a557402df5c982c024c18257587a41e022f95640
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-optional-chaining@npm:7.25.9"
+"@babel/plugin-transform-optional-chaining@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.28.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/bc838a499fd9892e163b8bc9bfbc4bf0b28cc3232ee0a6406ae078257c8096518f871d09b4a32c11f4a2d6953c3bc1984619ef748f7ad45aed0b0d9689a8eb36
+  checksum: 10/0bc900bff66d5acc13b057107eaeb6084b4cb0b124654d35b103f71f292d33dba5beac444ab4f92528583585b6e0cf34d64ce9cbb473b15d22375a4a6ed3cbac
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-parameters@npm:7.25.9"
+"@babel/plugin-transform-parameters@npm:^7.27.7":
+  version: 7.27.7
+  resolution: "@babel/plugin-transform-parameters@npm:7.27.7"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/014009a1763deb41fe9f0dbca2c4489ce0ac83dd87395f488492e8eb52399f6c883d5bd591bae3b8836f2460c3937fcebd07e57dce1e0bfe30cdbc63fdfc9d3a
+  checksum: 10/ba0aa8c977a03bf83030668f64c1d721e4e82d8cce89cdde75a2755862b79dbe9e7f58ca955e68c721fd494d6ee3826e46efad3fbf0855fcc92cb269477b4777
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-private-methods@npm:7.25.9"
+"@babel/plugin-transform-private-methods@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-private-methods@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/6e3671b352c267847c53a170a1937210fa8151764d70d25005e711ef9b21969aaf422acc14f9f7fb86bc0e4ec43e7aefcc0ad9196ae02d262ec10f509f126a58
+  checksum: 10/c76f8f6056946466116e67eb9d8014a2d748ade2062636ab82045c1dac9c233aff10e597777bc5af6f26428beb845ceb41b95007abef7d0484da95789da56662
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.25.9"
+"@babel/plugin-transform-private-property-in-object@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-create-class-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/aa45bb5669b610afa763d774a4b5583bb60ce7d38e4fd2dedfd0703e73e25aa560e6c6124e155aa90b101601743b127d9e5d3eb00989a7e4b4ab9c2eb88475ba
+  checksum: 10/d4466d42a02c5a318d9d7b8102969fd032b17ff044918dfd462d5cc49bd11f5773ee0794781702afdf4727ba11e9be6cbea1e396bc0a7307761bb9a56399012a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-property-literals@npm:7.25.9"
+"@babel/plugin-transform-property-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-property-literals@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/436046ab07d54a9b44a384eeffec701d4e959a37a7547dda72e069e751ca7ff753d1782a8339e354b97c78a868b49ea97bf41bf5a44c6d7a3c0a05ad40eeb49c
+  checksum: 10/7caec27d5ed8870895c9faf4f71def72745d69da0d8e77903146a4e135fd7bed5778f5f9cebb36c5fba86338e6194dd67a08c033fc84b4299b7eceab6d9630cb
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9"
+"@babel/plugin-transform-react-jsx@npm:^7.23.4, @babel/plugin-transform-react-jsx@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-module-imports": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/plugin-syntax-jsx": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/plugin-syntax-jsx": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/eb179ecdf0ae19aed254105cf78fbac35f9983f51ed04b7b67c863a4820a70a879bd5da250ac518321f86df20eac010e53e3411c8750c386d51da30e4814bfb6
+  checksum: 10/e865f194770906398957df23530af9a46009ac3737aaa10026b3925fe0a38fc3254f4b227d3b8807ab66ac92c14323bef561dd2217644052de5a9702af76e2f6
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-regenerator@npm:7.25.9"
+"@babel/plugin-transform-regenerator@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/plugin-transform-regenerator@npm:7.28.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    regenerator-transform: "npm:^0.15.2"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1c09e8087b476c5967282c9790fb8710e065eda77c60f6cb5da541edd59ded9d003d96f8ef640928faab4a0b35bf997673499a194973da4f0c97f0935807a482
+  checksum: 10/24da51a659d882e02bd4353da9d8e045e58d967c1cddaf985ad699a9fc9f920a45eff421c4283a248d83dc16590b8956e66fd710be5db8723b274cfea0b51b2f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regexp-modifiers@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/plugin-transform-regexp-modifiers@npm:7.26.0"
+"@babel/plugin-transform-regexp-modifiers@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-regexp-modifiers@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/726deca486bbd4b176f8a966eb0f4aabc19d9def3b8dabb8b3a656778eca0df1fda3f3c92b213aa5a184232fdafd5b7bd73b4e24ca4345c498ef6baff2bda4e1
+  checksum: 10/f6cb385fe0e798bff7e9b20cf5912bf40e180895ff3610b1ccdce260f3c20daaebb3a99dc087c8168a99151cd3e16b94f4689fd5a4b01cf1834b45c133e620b2
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-reserved-words@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-reserved-words@npm:7.25.9"
+"@babel/plugin-transform-reserved-words@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-reserved-words@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/8beda04481b25767acbd1f6b9ef7b3a9c12fbd9dcb24df45a6ad120e1dc4b247c073db60ac742f9093657d6d8c050501fc0606af042f81a3bb6a3ff862cddc47
+  checksum: 10/dea0b66742d2863b369c06c053e11e15ba785892ea19cccf7aef3c1bdaa38b6ab082e19984c5ea7810d275d9445c5400fcc385ad71ce707ed9256fadb102af3b
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.25.9"
+"@babel/plugin-transform-shorthand-properties@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/f774995d58d4e3a992b732cf3a9b8823552d471040e280264dd15e0735433d51b468fef04d75853d061309389c66bda10ce1b298297ce83999220eb0ad62741d
+  checksum: 10/fbba6e2aef0b69681acb68202aa249c0598e470cc0853d7ff5bd0171fd6a7ec31d77cfabcce9df6360fc8349eded7e4a65218c32551bd3fc0caaa1ac899ac6d4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-spread@npm:7.25.9"
+"@babel/plugin-transform-spread@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-spread@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/fe72c6545267176cdc9b6f32f30f9ced37c1cafa1290e4436b83b8f377b4f1c175dad404228c96e3efdec75da692f15bfb9db2108fcd9ad260bc9968778ee41e
+  checksum: 10/3edd28b07e1951f32aa2d380d9a0e0ed408c64a5cea2921d02308541042aca18f146b3a61e82e534d4d61cb3225dbc847f4f063aedfff6230b1a41282e95e8a2
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-sticky-regex@npm:7.25.9"
+"@babel/plugin-transform-sticky-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-sticky-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/7454b00844dbe924030dd15e2b3615b36e196500c4c47e98dabc6b37a054c5b1038ecd437e910aabf0e43bf56b973cb148d3437d50f6e2332d8309568e3e979b
+  checksum: 10/e1414a502efba92c7974681767e365a8cda6c5e9e5f33472a9eaa0ce2e75cea0a9bef881ff8dda37c7810ad902f98d3c00ead92a3ac3b73a79d011df85b5a189
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-template-literals@npm:7.25.9"
+"@babel/plugin-transform-template-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-template-literals@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/92eb1d6e2d95bd24abbb74fa7640d02b66ff6214e0bb616d7fda298a7821ce15132a4265d576a3502a347a3c9e94b6c69ed265bb0784664592fa076785a3d16a
+  checksum: 10/93aad782503b691faef7c0893372d5243df3219b07f1f22cfc32c104af6a2e7acd6102c128439eab15336d048f1b214ca134b87b0630d8cd568bf447f78b25ce
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.25.9"
+"@babel/plugin-transform-typeof-symbol@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/3ae240358f0b0cd59f8610d6c59d395c216fd1bab407f7de58b86d592f030fb42b4d18e2456a29bee4a2ff014c4c1e3404c8ae64462b1155d1c053b2f9d73438
+  checksum: 10/812d736402a6f9313b86b8adf36740394400be7a09c48e51ee45ab4a383a3f46fc618d656dd12e44934665e42ae71cf143e25b95491b699ef7c737950dbdb862
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typescript@npm:^7.25.9":
-  version: 7.26.3
-  resolution: "@babel/plugin-transform-typescript@npm:7.26.3"
+"@babel/plugin-transform-typescript@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-typescript@npm:7.28.5"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-create-class-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
-    "@babel/plugin-syntax-typescript": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@babel/helper-create-class-features-plugin": "npm:^7.28.5"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/plugin-syntax-typescript": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/71e82045fc931112ca6cba1826a7d521a30514ea5e8370c3c083f6ee1ed624d62d91e1415fbc41ce9033c4e78ba638a904c43b2d7e023873f36675844b8a4963
+  checksum: 10/e4706379df70c2de9d3d3f573ff74a160e05221620a22dd0a64899ab45fddad9e4530fbba33014c75906f13aa78d8044fed80dba85068e11d84ed1f033dea445
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-escapes@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.25.9"
+"@babel/plugin-transform-unicode-escapes@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/f138cbee539963fb3da13f684e6f33c9f7495220369ae12a682b358f1e25ac68936825562c38eae87f01ac9992b2129208b35ec18533567fc805ce5ed0ffd775
+  checksum: 10/87b9e49dee4ab6e78f4cdcdbdd837d7784f02868a96bfc206c8dbb17dd85db161b5a0ecbe95b19a42e8aea0ce57e80249e1facbf9221d7f4114d52c3b9136c9e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-property-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.25.9"
+"@babel/plugin-transform-unicode-property-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/201f6f46c1beb399e79aa208b94c5d54412047511795ce1e790edcd189cef73752e6a099fdfc01b3ad12205f139ae344143b62f21f44bbe02338a95e8506a911
+  checksum: 10/5d99c89537d1ebaac3f526c04b162cf95a47d363d4829f78c6701a2c06ab78a48da66a94f853f85f44a3d72153410ba923e072bed4b7166fa097f503eb14131d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-unicode-regex@npm:7.25.9"
+"@babel/plugin-transform-unicode-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e8baae867526e179467c6ef5280d70390fa7388f8763a19a27c21302dd59b121032568be080749514b097097ceb9af716bf4b90638f1b3cf689aa837ba20150f
+  checksum: 10/a34d89a2b75fb78e66d97c3dc90d4877f7e31f43316b52176f95a5dee20e9bb56ecf158eafc42a001676ddf7b393d9e67650bad6b32f5405780f25fb83cd68e3
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-sets-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.25.9"
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/4445ef20de687cb4dcc95169742a8d9013d680aa5eee9186d8e25875bbfa7ee5e2de26a91177ccf70b1db518e36886abcd44750d28db5d7a9539f0efa6839f4b
+  checksum: 10/295126074c7388ab05c82ef3ed0907a1ee4666bbdd763477ead9aba6eb2c74bdf65669416861ac93d337a4a27640963bb214acadc2697275ce95aab14868d57f
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/preset-env@npm:7.26.0"
+"@babel/preset-env@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/preset-env@npm:7.28.5"
   dependencies:
-    "@babel/compat-data": "npm:^7.26.0"
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-validator-option": "npm:^7.25.9"
-    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.25.9"
-    "@babel/plugin-bugfix-safari-class-field-initializer-scope": "npm:^7.25.9"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.25.9"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.25.9"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.25.9"
+    "@babel/compat-data": "npm:^7.28.5"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.28.5"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope": "npm:^7.27.1"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.27.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.27.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.28.3"
     "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
-    "@babel/plugin-syntax-import-assertions": "npm:^7.26.0"
-    "@babel/plugin-syntax-import-attributes": "npm:^7.26.0"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.27.1"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.27.1"
     "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.25.9"
-    "@babel/plugin-transform-async-generator-functions": "npm:^7.25.9"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.25.9"
-    "@babel/plugin-transform-block-scoped-functions": "npm:^7.25.9"
-    "@babel/plugin-transform-block-scoping": "npm:^7.25.9"
-    "@babel/plugin-transform-class-properties": "npm:^7.25.9"
-    "@babel/plugin-transform-class-static-block": "npm:^7.26.0"
-    "@babel/plugin-transform-classes": "npm:^7.25.9"
-    "@babel/plugin-transform-computed-properties": "npm:^7.25.9"
-    "@babel/plugin-transform-destructuring": "npm:^7.25.9"
-    "@babel/plugin-transform-dotall-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-duplicate-keys": "npm:^7.25.9"
-    "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-dynamic-import": "npm:^7.25.9"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.25.9"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.25.9"
-    "@babel/plugin-transform-for-of": "npm:^7.25.9"
-    "@babel/plugin-transform-function-name": "npm:^7.25.9"
-    "@babel/plugin-transform-json-strings": "npm:^7.25.9"
-    "@babel/plugin-transform-literals": "npm:^7.25.9"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.25.9"
-    "@babel/plugin-transform-member-expression-literals": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-amd": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-umd": "npm:^7.25.9"
-    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-new-target": "npm:^7.25.9"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.25.9"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.25.9"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.25.9"
-    "@babel/plugin-transform-object-super": "npm:^7.25.9"
-    "@babel/plugin-transform-optional-catch-binding": "npm:^7.25.9"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.25.9"
-    "@babel/plugin-transform-parameters": "npm:^7.25.9"
-    "@babel/plugin-transform-private-methods": "npm:^7.25.9"
-    "@babel/plugin-transform-private-property-in-object": "npm:^7.25.9"
-    "@babel/plugin-transform-property-literals": "npm:^7.25.9"
-    "@babel/plugin-transform-regenerator": "npm:^7.25.9"
-    "@babel/plugin-transform-regexp-modifiers": "npm:^7.26.0"
-    "@babel/plugin-transform-reserved-words": "npm:^7.25.9"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.25.9"
-    "@babel/plugin-transform-spread": "npm:^7.25.9"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-template-literals": "npm:^7.25.9"
-    "@babel/plugin-transform-typeof-symbol": "npm:^7.25.9"
-    "@babel/plugin-transform-unicode-escapes": "npm:^7.25.9"
-    "@babel/plugin-transform-unicode-property-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.25.9"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.28.0"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.27.1"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-block-scoping": "npm:^7.28.5"
+    "@babel/plugin-transform-class-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-class-static-block": "npm:^7.28.3"
+    "@babel/plugin-transform-classes": "npm:^7.28.4"
+    "@babel/plugin-transform-computed-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.5"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.27.1"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.27.1"
+    "@babel/plugin-transform-explicit-resource-management": "npm:^7.28.0"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.28.5"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.27.1"
+    "@babel/plugin-transform-for-of": "npm:^7.27.1"
+    "@babel/plugin-transform-function-name": "npm:^7.27.1"
+    "@babel/plugin-transform-json-strings": "npm:^7.27.1"
+    "@babel/plugin-transform-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.28.5"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-amd": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.28.5"
+    "@babel/plugin-transform-modules-umd": "npm:^7.27.1"
+    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-new-target": "npm:^7.27.1"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.27.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.27.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.28.4"
+    "@babel/plugin-transform-object-super": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.28.5"
+    "@babel/plugin-transform-parameters": "npm:^7.27.7"
+    "@babel/plugin-transform-private-methods": "npm:^7.27.1"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.27.1"
+    "@babel/plugin-transform-property-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-regenerator": "npm:^7.28.4"
+    "@babel/plugin-transform-regexp-modifiers": "npm:^7.27.1"
+    "@babel/plugin-transform-reserved-words": "npm:^7.27.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-spread": "npm:^7.27.1"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.27.1"
     "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
-    babel-plugin-polyfill-corejs3: "npm:^0.10.6"
-    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
-    core-js-compat: "npm:^3.38.1"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.14"
+    babel-plugin-polyfill-corejs3: "npm:^0.13.0"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.5"
+    core-js-compat: "npm:^3.43.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a7a80314f845deea713985a6316361c476621c76cfe5c6c28e8b9558f01634b49bbfdd3581ef94b5d6cff5c2b8830468aa53a73f5b5c1224db2dfea5db7e676f
+  checksum: 10/e9a5136a7e34553cc70dd6594716144678a2e9ecc971caf6885c380c38fcbed8b387f3af418c9aa4b2d2765964bb4e8a2e14b709c2f165eec6ed13bda32587ea
   languageName: node
   linkType: hard
 
@@ -1614,24 +1222,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/preset-typescript@npm:7.26.0"
+"@babel/preset-typescript@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/preset-typescript@npm:7.28.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-validator-option": "npm:^7.25.9"
-    "@babel/plugin-syntax-jsx": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.25.9"
-    "@babel/plugin-transform-typescript": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-syntax-jsx": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.27.1"
+    "@babel/plugin-transform-typescript": "npm:^7.28.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/81a60826160163a3daae017709f42147744757b725b50c9024ef3ee5a402ee45fd2e93eaecdaaa22c81be91f7940916249cfb7711366431cfcacc69c95878c03
+  checksum: 10/72c03e01c34906041b1813542761a283c52da1751e7ddf63191bc5fb2a0354eca30a00537c5a92951688bec3975bdc0e50ef4516b5e94cfd6d4cf947f2125bdc
   languageName: node
   linkType: hard
 
-"@babel/register@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/register@npm:7.25.9"
+"@babel/register@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/register@npm:7.28.3"
   dependencies:
     clone-deep: "npm:^4.0.1"
     find-cache-dir: "npm:^2.0.0"
@@ -1640,168 +1248,102 @@ __metadata:
     source-map-support: "npm:^0.5.16"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/eb0192c2e83566043b9777062c50567c869bbe9ed65cbeece25a3f0c07c7763199d8008b7b860cb0090d6f4f2ab1b590adf29b539115c260566e44296e0559fb
+  checksum: 10/9475696152579933dbb0ffa7f47e0a3d130064101fc6ee471ec4cd8f20c70438798f3165708cb2ad29f585d81af0a26a4c233d732fbe63c7abec6a63b7d509d8
   languageName: node
   linkType: hard
 
-"@babel/regjsgen@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "@babel/regjsgen@npm:0.8.0"
-  checksum: 10/c57fb730b17332b7572574b74364a77d70faa302a281a62819476fa3b09822974fd75af77aea603ad77378395be64e81f89f0e800bf86cbbf21652d49ce12ee8
-  languageName: node
-  linkType: hard
-
-"@babel/runtime-corejs2@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/runtime-corejs2@npm:7.26.0"
+"@babel/runtime-corejs2@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/runtime-corejs2@npm:7.28.4"
   dependencies:
     core-js: "npm:^2.6.12"
-    regenerator-runtime: "npm:^0.14.0"
-  checksum: 10/ce26b6be20f8243e04fd940b05395efb302de5c8556617283986ea817ab562c2d44d76e5cb3d1050d06a5507a242ddd34e63ca6d4e595785fe46fc608c7d4476
+  checksum: 10/4fd099112b8684b2ab7a5a6e2cac33c07309a2eb941ce2ec5dc343e8f80a477c748555d6ad8c69e99d8ddea7e51a42748afa3c38d629ee5837f5083e6eb6aa55
   languageName: node
   linkType: hard
 
-"@babel/runtime-corejs3@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/runtime-corejs3@npm:7.26.0"
+"@babel/runtime-corejs3@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/runtime-corejs3@npm:7.28.4"
   dependencies:
-    core-js-pure: "npm:^3.30.2"
-    regenerator-runtime: "npm:^0.14.0"
-  checksum: 10/fd813d8b5bfc412c083033638c937e13f621b3223161c4a20bb8532d77ae622b620915476bd265670f6a8fc1a76a017ffd738ad25ad24431953e3725247c6520
+    core-js-pure: "npm:^3.43.0"
+  checksum: 10/99079931145c0606a9967fe002c3528ae237b759cee115fc97a5dc17101d5ccdf9a794fd4ce5d94c7e2e8ee1f9f6816fb50b4472e980b5e4dd878fbdfac02619
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/runtime@npm:7.26.0"
-  dependencies:
-    regenerator-runtime: "npm:^0.14.0"
-  checksum: 10/9f4ea1c1d566c497c052d505587554e782e021e6ccd302c2ad7ae8291c8e16e3f19d4a7726fb64469e057779ea2081c28b7dbefec6d813a22f08a35712c0f699
+"@babel/runtime@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/runtime@npm:7.28.4"
+  checksum: 10/6c9a70452322ea80b3c9b2a412bcf60771819213a67576c8cec41e88a95bb7bf01fc983754cda35dc19603eef52df22203ccbf7777b9d6316932f9fb77c25163
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.8.4":
-  version: 7.21.5
-  resolution: "@babel/runtime@npm:7.21.5"
+"@babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2":
+  version: 7.27.2
+  resolution: "@babel/template@npm:7.27.2"
   dependencies:
-    regenerator-runtime: "npm:^0.13.11"
-  checksum: 10/7cd4f9be85c655432688e1b328a62dc5666e2386b379948153da6ab51eff1a1a583e8606024cf9231ee59fc595d6cd1d2ecc6c280739c45f7a5994e8ccf8c281
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/parser": "npm:^7.27.2"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/fed15a84beb0b9340e5f81566600dbee5eccd92e4b9cc42a944359b1aa1082373391d9d5fc3656981dff27233ec935d0bc96453cf507f60a4b079463999244d8
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.20.7, @babel/template@npm:^7.3.3":
-  version: 7.20.7
-  resolution: "@babel/template@npm:7.20.7"
+"@babel/traverse@npm:^7.13.0, @babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/traverse@npm:7.28.4"
   dependencies:
-    "@babel/code-frame": "npm:^7.18.6"
-    "@babel/parser": "npm:^7.20.7"
-    "@babel/types": "npm:^7.20.7"
-  checksum: 10/b6108cad36ff7ae797bcba5bea1808e1390b700925ef21ff184dd50fe1d30db4cdf4815e6e76f3e0abd7de4c0b820ec660227f3c6b90b5b0a592cf606ceb3864
-  languageName: node
-  linkType: hard
-
-"@babel/template@npm:^7.22.15":
-  version: 7.22.15
-  resolution: "@babel/template@npm:7.22.15"
-  dependencies:
-    "@babel/code-frame": "npm:^7.22.13"
-    "@babel/parser": "npm:^7.22.15"
-    "@babel/types": "npm:^7.22.15"
-  checksum: 10/21e768e4eed4d1da2ce5d30aa51db0f4d6d8700bc1821fec6292587df7bba2fe1a96451230de8c64b989740731888ebf1141138bfffb14cacccf4d05c66ad93f
-  languageName: node
-  linkType: hard
-
-"@babel/template@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/template@npm:7.25.9"
-  dependencies:
-    "@babel/code-frame": "npm:^7.25.9"
-    "@babel/parser": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10/e861180881507210150c1335ad94aff80fd9e9be6202e1efa752059c93224e2d5310186ddcdd4c0f0b0fc658ce48cb47823f15142b5c00c8456dde54f5de80b2
-  languageName: node
-  linkType: hard
-
-"@babel/traverse@npm:^7.13.0":
-  version: 7.23.7
-  resolution: "@babel/traverse@npm:7.23.7"
-  dependencies:
-    "@babel/code-frame": "npm:^7.23.5"
-    "@babel/generator": "npm:^7.23.6"
-    "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-hoist-variables": "npm:^7.22.5"
-    "@babel/helper-split-export-declaration": "npm:^7.22.6"
-    "@babel/parser": "npm:^7.23.6"
-    "@babel/types": "npm:^7.23.6"
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.28.3"
+    "@babel/helper-globals": "npm:^7.28.0"
+    "@babel/parser": "npm:^7.28.4"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.28.4"
     debug: "npm:^4.3.1"
-    globals: "npm:^11.1.0"
-  checksum: 10/3215e59429963c8dac85c26933372cdd322952aa9930e4bc5ef2d0e4bd7a1510d1ecf8f8fd860ace5d4d9fe496d23805a1ea019a86410aee4111de5f63ee84f9
-  languageName: node
-  linkType: hard
-
-"@babel/traverse@npm:^7.21.5":
-  version: 7.21.5
-  resolution: "@babel/traverse@npm:7.21.5"
-  dependencies:
-    "@babel/code-frame": "npm:^7.21.4"
-    "@babel/generator": "npm:^7.21.5"
-    "@babel/helper-environment-visitor": "npm:^7.21.5"
-    "@babel/helper-function-name": "npm:^7.21.0"
-    "@babel/helper-hoist-variables": "npm:^7.18.6"
-    "@babel/helper-split-export-declaration": "npm:^7.18.6"
-    "@babel/parser": "npm:^7.21.5"
-    "@babel/types": "npm:^7.21.5"
-    debug: "npm:^4.1.0"
-    globals: "npm:^11.1.0"
-  checksum: 10/467aaaa306092d9c5851232784ca0691d9ba56ff51f3ef89674fc69e085351c78821942ef089930c0a984b8778152aa2987a621ae206f3816314de1297062c10
+  checksum: 10/c3099364b7b1c36bcd111099195d4abeef16499e5defb1e56766b754e8b768c252e856ed9041665158aa1b31215fc6682632756803c8fa53405381ec08c4752b
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.25.9":
-  version: 7.26.4
-  resolution: "@babel/traverse@npm:7.26.4"
+"@babel/traverse@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/traverse@npm:7.28.5"
   dependencies:
-    "@babel/code-frame": "npm:^7.26.2"
-    "@babel/generator": "npm:^7.26.3"
-    "@babel/parser": "npm:^7.26.3"
-    "@babel/template": "npm:^7.25.9"
-    "@babel/types": "npm:^7.26.3"
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.28.5"
+    "@babel/helper-globals": "npm:^7.28.0"
+    "@babel/parser": "npm:^7.28.5"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.28.5"
     debug: "npm:^4.3.1"
-    globals: "npm:^11.1.0"
-  checksum: 10/30c81a80d66fc39842814bc2e847f4705d30f3859156f130d90a0334fe1d53aa81eed877320141a528ecbc36448acc0f14f544a7d410fa319d1c3ab63b50b58f
+  checksum: 10/1fce426f5ea494913c40f33298ce219708e703f71cac7ac045ebde64b5a7b17b9275dfa4e05fb92c3f123136913dff62c8113172f4a5de66dab566123dbe7437
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.6, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.0, @babel/types@npm:^7.21.4, @babel/types@npm:^7.21.5, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
-  version: 7.21.5
-  resolution: "@babel/types@npm:7.21.5"
+"@babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.4.4":
+  version: 7.28.4
+  resolution: "@babel/types@npm:7.28.4"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.21.5"
-    "@babel/helper-validator-identifier": "npm:^7.19.1"
-    to-fast-properties: "npm:^2.0.0"
-  checksum: 10/3411d24b1fcb2d7e8e7ee35cc8829ac34b59873506c33644abac63e4710aaf684d9af3dfee8c64e668693f3f9fb1db100ae1ebfff9c4077f287da382d2f2f9af
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+  checksum: 10/db50bf257aafa5d845ad16dae0587f57d596e4be4cbb233ea539976a4c461f9fbcc0bf3d37adae3f8ce5dcb4001462aa608f3558161258b585f6ce6ce21a2e45
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.8.3":
-  version: 7.23.6
-  resolution: "@babel/types@npm:7.23.6"
+"@babel/types@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/types@npm:7.28.5"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.23.4"
-    "@babel/helper-validator-identifier": "npm:^7.22.20"
-    to-fast-properties: "npm:^2.0.0"
-  checksum: 10/07e70bb94d30b0231396b5e9a7726e6d9227a0a62e0a6830c0bd3232f33b024092e3d5a7d1b096a65bbf2bb43a9ab4c721bf618e115bfbb87b454fa060f88cbf
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.28.5"
+  checksum: 10/4256bb9fb2298c4f9b320bde56e625b7091ea8d2433d98dcf524d4086150da0b6555aabd7d0725162670614a9ac5bf036d1134ca13dedc9707f988670f1362d7
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.26.3":
-  version: 7.26.3
-  resolution: "@babel/types@npm:7.26.3"
+"@cspotcode/source-map-support@npm:^0.8.0":
+  version: 0.8.1
+  resolution: "@cspotcode/source-map-support@npm:0.8.1"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.25.9"
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-  checksum: 10/c31d0549630a89abfa11410bf82a318b0c87aa846fbf5f9905e47ba5e2aa44f41cc746442f105d622c519e4dc532d35a8d8080460ff4692f9fc7485fbf3a00eb
+    "@jridgewell/trace-mapping": "npm:0.3.9"
+  checksum: 10/b6e38a1712fab242c86a241c229cf562195aad985d0564bd352ac404be583029e89e93028ffd2c251d2c407ecac5fb0cbdca94a2d5c10f29ac806ede0508b3ff
   languageName: node
   linkType: hard
 
@@ -1826,190 +1368,208 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@istanbuljs/load-nyc-config@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "@istanbuljs/load-nyc-config@npm:1.1.0"
+"@isaacs/fs-minipass@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "@isaacs/fs-minipass@npm:4.0.1"
   dependencies:
-    camelcase: "npm:^5.3.1"
-    find-up: "npm:^4.1.0"
-    get-package-type: "npm:^0.1.0"
-    js-yaml: "npm:^3.13.1"
-    resolve-from: "npm:^5.0.0"
-  checksum: 10/b000a5acd8d4fe6e34e25c399c8bdbb5d3a202b4e10416e17bfc25e12bab90bb56d33db6089ae30569b52686f4b35ff28ef26e88e21e69821d2b85884bd055b8
+    minipass: "npm:^7.0.4"
+  checksum: 10/4412e9e6713c89c1e66d80bb0bb5a2a93192f10477623a27d08f228ba0316bb880affabc5bfe7f838f58a34d26c2c190da726e576cdfc18c49a72e89adabdcf5
   languageName: node
   linkType: hard
 
-"@istanbuljs/schema@npm:^0.1.2":
-  version: 0.1.3
-  resolution: "@istanbuljs/schema@npm:0.1.3"
-  checksum: 10/a9b1e49acdf5efc2f5b2359f2df7f90c5c725f2656f16099e8b2cd3a000619ecca9fc48cf693ba789cf0fd989f6e0df6a22bc05574be4223ecdbb7997d04384b
+"@jest/diff-sequences@npm:30.0.1":
+  version: 30.0.1
+  resolution: "@jest/diff-sequences@npm:30.0.1"
+  checksum: 10/0ddb7c7ba92d6057a2ee51a9cfc2155b77cca707fe959167466ea02dcb0687018cc3c22b9622f25f3a417d6ad370e2d4dcfedf9f1410dc9c02954a7484423cc7
   languageName: node
   linkType: hard
 
-"@jest/schemas@npm:^29.6.3":
-  version: 29.6.3
-  resolution: "@jest/schemas@npm:29.6.3"
+"@jest/expect-utils@npm:30.1.2":
+  version: 30.1.2
+  resolution: "@jest/expect-utils@npm:30.1.2"
   dependencies:
-    "@sinclair/typebox": "npm:^0.27.8"
-  checksum: 10/910040425f0fc93cd13e68c750b7885590b8839066dfa0cd78e7def07bbb708ad869381f725945d66f2284de5663bbecf63e8fdd856e2ae6e261ba30b1687e93
+    "@jest/get-type": "npm:30.1.0"
+  checksum: 10/89e85fe15f18a58e4c6d20c513ac22b7e7e7d62b6b4988bf89ad9a11f532226705a29d4e3d0271e835ada20f03f6a9888eaa8ce987d7e7ce2cd38c105b6f0bc6
   languageName: node
   linkType: hard
 
-"@jest/transform@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "@jest/transform@npm:29.7.0"
-  dependencies:
-    "@babel/core": "npm:^7.11.6"
-    "@jest/types": "npm:^29.6.3"
-    "@jridgewell/trace-mapping": "npm:^0.3.18"
-    babel-plugin-istanbul: "npm:^6.1.1"
-    chalk: "npm:^4.0.0"
-    convert-source-map: "npm:^2.0.0"
-    fast-json-stable-stringify: "npm:^2.1.0"
-    graceful-fs: "npm:^4.2.9"
-    jest-haste-map: "npm:^29.7.0"
-    jest-regex-util: "npm:^29.6.3"
-    jest-util: "npm:^29.7.0"
-    micromatch: "npm:^4.0.4"
-    pirates: "npm:^4.0.4"
-    slash: "npm:^3.0.0"
-    write-file-atomic: "npm:^4.0.2"
-  checksum: 10/30f42293545ab037d5799c81d3e12515790bb58513d37f788ce32d53326d0d72ebf5b40f989e6896739aa50a5f77be44686e510966370d58511d5ad2637c68c1
+"@jest/get-type@npm:30.1.0":
+  version: 30.1.0
+  resolution: "@jest/get-type@npm:30.1.0"
+  checksum: 10/e2a95fbb49ce2d15547db8af5602626caf9b05f62a5e583b4a2de9bd93a2bfe7175f9bbb2b8a5c3909ce261d467b6991d7265bb1d547cb60e7e97f571f361a70
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^29.6.3":
-  version: 29.6.3
-  resolution: "@jest/types@npm:29.6.3"
+"@jest/pattern@npm:30.0.1":
+  version: 30.0.1
+  resolution: "@jest/pattern@npm:30.0.1"
   dependencies:
-    "@jest/schemas": "npm:^29.6.3"
-    "@types/istanbul-lib-coverage": "npm:^2.0.0"
-    "@types/istanbul-reports": "npm:^3.0.0"
     "@types/node": "npm:*"
-    "@types/yargs": "npm:^17.0.8"
-    chalk: "npm:^4.0.0"
-  checksum: 10/f74bf512fd09bbe2433a2ad460b04668b7075235eea9a0c77d6a42222c10a79b9747dc2b2a623f140ed40d6865a2ed8f538f3cbb75169120ea863f29a7ed76cd
+    jest-regex-util: "npm:30.0.1"
+  checksum: 10/afd03b4d3eadc9c9970cf924955dee47984a7e767901fe6fa463b17b246f0ddeec07b3e82c09715c54bde3c8abb92074160c0d79967bd23778724f184e7f5b7b
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.3.0, @jridgewell/gen-mapping@npm:^0.3.2":
-  version: 0.3.3
-  resolution: "@jridgewell/gen-mapping@npm:0.3.3"
+"@jest/schemas@npm:30.0.5":
+  version: 30.0.5
+  resolution: "@jest/schemas@npm:30.0.5"
   dependencies:
-    "@jridgewell/set-array": "npm:^1.0.1"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
-    "@jridgewell/trace-mapping": "npm:^0.3.9"
-  checksum: 10/072ace159c39ab85944bdabe017c3de15c5e046a4a4a772045b00ff05e2ebdcfa3840b88ae27e897d473eb4d4845b37be3c78e28910c779f5aeeeae2fb7f0cc2
+    "@sinclair/typebox": "npm:^0.34.0"
+  checksum: 10/40df4db55d4aeed09d1c7e19caf23788309cea34490a1c5d584c913494195e698b9967e996afc27226cac6d76e7512fe73ae6b9584480695c60dd18a5459cdba
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.3.5":
-  version: 0.3.5
-  resolution: "@jridgewell/gen-mapping@npm:0.3.5"
+"@jest/types@npm:30.0.5":
+  version: 30.0.5
+  resolution: "@jest/types@npm:30.0.5"
   dependencies:
-    "@jridgewell/set-array": "npm:^1.2.1"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
+    "@jest/pattern": "npm:30.0.1"
+    "@jest/schemas": "npm:30.0.5"
+    "@types/istanbul-lib-coverage": "npm:^2.0.6"
+    "@types/istanbul-reports": "npm:^3.0.4"
+    "@types/node": "npm:*"
+    "@types/yargs": "npm:^17.0.33"
+    chalk: "npm:^4.1.2"
+  checksum: 10/6bf18f4e899ff9cf6bd88b1e3348aeb944db4d5ad7e9c683bb0188daeb2d11d10a1463a4dc494e92145eafcbc2656fe31adb6f1fd0bf5928cf73ddc8b2f215bf
+  languageName: node
+  linkType: hard
+
+"@jridgewell/gen-mapping@npm:^0.3.12, @jridgewell/gen-mapping@npm:^0.3.5":
+  version: 0.3.13
+  resolution: "@jridgewell/gen-mapping@npm:0.3.13"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
     "@jridgewell/trace-mapping": "npm:^0.3.24"
-  checksum: 10/81587b3c4dd8e6c60252122937cea0c637486311f4ed208b52b62aae2e7a87598f63ec330e6cd0984af494bfb16d3f0d60d3b21d7e5b4aedd2602ff3fe9d32e2
+  checksum: 10/902f8261dcf450b4af7b93f9656918e02eec80a2169e155000cb2059f90113dd98f3ccf6efc6072cee1dd84cac48cade51da236972d942babc40e4c23da4d62a
   languageName: node
   linkType: hard
 
-"@jridgewell/resolve-uri@npm:3.1.0":
-  version: 3.1.0
-  resolution: "@jridgewell/resolve-uri@npm:3.1.0"
-  checksum: 10/320ceb37af56953757b28e5b90c34556157676d41e3d0a3ff88769274d62373582bb0f0276a4f2d29c3f4fdd55b82b8be5731f52d391ad2ecae9b321ee1c742d
+"@jridgewell/remapping@npm:^2.3.5":
+  version: 2.3.5
+  resolution: "@jridgewell/remapping@npm:2.3.5"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10/c2bb01856e65b506d439455f28aceacf130d6c023d1d4e3b48705e88def3571753e1a887daa04b078b562316c92d26ce36408a60534bceca3f830aec88a339ad
   languageName: node
   linkType: hard
 
-"@jridgewell/resolve-uri@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "@jridgewell/resolve-uri@npm:3.1.1"
-  checksum: 10/64d59df8ae1a4e74315eb1b61e012f1c7bc8aac47a3a1e683f6fe7008eab07bc512a742b7aa7c0405685d1421206de58c9c2e6adbfe23832f8bd69408ffc183e
+"@jridgewell/resolve-uri@npm:^3.0.3, @jridgewell/resolve-uri@npm:^3.1.0":
+  version: 3.1.2
+  resolution: "@jridgewell/resolve-uri@npm:3.1.2"
+  checksum: 10/97106439d750a409c22c8bff822d648f6a71f3aa9bc8e5129efdc36343cd3096ddc4eeb1c62d2fe48e9bdd4db37b05d4646a17114ecebd3bbcacfa2de51c3c1d
   languageName: node
   linkType: hard
 
-"@jridgewell/set-array@npm:^1.0.1":
-  version: 1.1.2
-  resolution: "@jridgewell/set-array@npm:1.1.2"
-  checksum: 10/69a84d5980385f396ff60a175f7177af0b8da4ddb81824cb7016a9ef914eee9806c72b6b65942003c63f7983d4f39a5c6c27185bbca88eb4690b62075602e28e
+"@jridgewell/source-map@npm:^0.3.3":
+  version: 0.3.11
+  resolution: "@jridgewell/source-map@npm:0.3.11"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+  checksum: 10/847f1177d3d133a0966ef61ca29abea0d79788a0652f90ee1893b3da968c190b7e31c3534cc53701179dd6b14601eef3d78644e727e05b1a08c68d281aedc4ba
   languageName: node
   linkType: hard
 
-"@jridgewell/set-array@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@jridgewell/set-array@npm:1.2.1"
-  checksum: 10/832e513a85a588f8ed4f27d1279420d8547743cc37fcad5a5a76fc74bb895b013dfe614d0eed9cb860048e6546b798f8f2652020b4b2ba0561b05caa8c654b10
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0":
+  version: 1.5.5
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.5"
+  checksum: 10/5d9d207b462c11e322d71911e55e21a4e2772f71ffe8d6f1221b8eb5ae6774458c1d242f897fb0814e8714ca9a6b498abfa74dfe4f434493342902b1a48b33a5
   languageName: node
   linkType: hard
 
-"@jridgewell/source-map@npm:^0.3.2":
-  version: 0.3.3
-  resolution: "@jridgewell/source-map@npm:0.3.3"
+"@jridgewell/trace-mapping@npm:0.3.9":
+  version: 0.3.9
+  resolution: "@jridgewell/trace-mapping@npm:0.3.9"
   dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.0"
-    "@jridgewell/trace-mapping": "npm:^0.3.9"
-  checksum: 10/6346a931c7eacb509120324d1cf796767ee34421fbdfb7a81d7038d65b63948980b59b5353a322c073f85b42a5cb8f227276603d5cbd19050e0052d8b7e5c6f7
+    "@jridgewell/resolve-uri": "npm:^3.0.3"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
+  checksum: 10/83deafb8e7a5ca98993c2c6eeaa93c270f6f647a4c0dc00deb38c9cf9b2d3b7bf15e8839540155247ef034a052c0ec4466f980bf0c9e2ab63b97d16c0cedd3ff
   languageName: node
   linkType: hard
 
-"@jridgewell/source-map@npm:^0.3.3":
-  version: 0.3.5
-  resolution: "@jridgewell/source-map@npm:0.3.5"
+"@jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.28":
+  version: 0.3.31
+  resolution: "@jridgewell/trace-mapping@npm:0.3.31"
   dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.0"
-    "@jridgewell/trace-mapping": "npm:^0.3.9"
-  checksum: 10/73838ac43235edecff5efc850c0d759704008937a56b1711b28c261e270fe4bf2dc06d0b08663aeb1ab304f81f6de4f5fb844344403cf53ba7096967a9953cae
+    "@jridgewell/resolve-uri": "npm:^3.1.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
+  checksum: 10/da0283270e691bdb5543806077548532791608e52386cfbbf3b9e8fb00457859d1bd01d512851161c886eb3a2f3ce6fd9bcf25db8edf3bddedd275bd4a88d606
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:1.4.14":
-  version: 1.4.14
-  resolution: "@jridgewell/sourcemap-codec@npm:1.4.14"
-  checksum: 10/26e768fae6045481a983e48aa23d8fcd23af5da70ebd74b0649000e815e7fbb01ea2bc088c9176b3fffeb9bec02184e58f46125ef3320b30eaa1f4094cfefa38
+"@jsonjoy.com/base64@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@jsonjoy.com/base64@npm:1.1.2"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/d76bb58eff841c090d9bf69a073611ffa73c40a664ccbcea689f65961f57d7b24051269d06b437e4f6204285d6ba92f50f587c5e95c5f9e4f10b36a2ed4cd0c8
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
-  version: 1.4.15
-  resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
-  checksum: 10/89960ac087781b961ad918978975bcdf2051cd1741880469783c42de64239703eab9db5230d776d8e6a09d73bb5e4cb964e07d93ee6e2e7aea5a7d726e865c09
+"@jsonjoy.com/buffers@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@jsonjoy.com/buffers@npm:1.0.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/3347a16a555398c19265203877b8e325be5facc1d875c0e85db0cc20b53418302257ed5af15bf53b84ff8337bd024a10be25ff3a02ebc54ae8e643577ca29e63
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.9":
-  version: 0.3.18
-  resolution: "@jridgewell/trace-mapping@npm:0.3.18"
+"@jsonjoy.com/codegen@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@jsonjoy.com/codegen@npm:1.0.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/a0afb03d2af4fbc1377c547e507f5db99a25f515d8c4b6b2cef1ff28145ac59fff12b6e1f41f9734cb62ea5619e7f9be1acd0908305d6f4176898ee534ee9a64
+  languageName: node
+  linkType: hard
+
+"@jsonjoy.com/json-pack@npm:^1.11.0":
+  version: 1.14.0
+  resolution: "@jsonjoy.com/json-pack@npm:1.14.0"
   dependencies:
-    "@jridgewell/resolve-uri": "npm:3.1.0"
-    "@jridgewell/sourcemap-codec": "npm:1.4.14"
-  checksum: 10/f4fabdddf82398a797bcdbb51c574cd69b383db041a6cae1a6a91478681d6aab340c01af655cfd8c6e01cde97f63436a1445f08297cdd33587621cf05ffa0d55
+    "@jsonjoy.com/base64": "npm:^1.1.2"
+    "@jsonjoy.com/buffers": "npm:^1.0.0"
+    "@jsonjoy.com/codegen": "npm:^1.0.0"
+    "@jsonjoy.com/json-pointer": "npm:^1.0.1"
+    "@jsonjoy.com/util": "npm:^1.9.0"
+    hyperdyperid: "npm:^1.2.0"
+    thingies: "npm:^2.5.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/53fca5727128c711f33dc80af1f4bb36be2edf8b5914071ccfd57e7408912e8d066d48791677b4d09462d4bff52f165cc998760c76109d7d7d345a879c7f92f5
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.18":
-  version: 0.3.20
-  resolution: "@jridgewell/trace-mapping@npm:0.3.20"
+"@jsonjoy.com/json-pointer@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "@jsonjoy.com/json-pointer@npm:1.0.2"
   dependencies:
-    "@jridgewell/resolve-uri": "npm:^3.1.0"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
-  checksum: 10/683117e4e6707ef50c725d6d0ec4234687ff751f36fa46c2b3068931eb6a86b49af374d3030200777666579a992b7470d1bd1c591e9bf64d764dda5295f33093
+    "@jsonjoy.com/codegen": "npm:^1.0.0"
+    "@jsonjoy.com/util": "npm:^1.9.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/f22baeb3abc8ace2d8902d06ec297343431d4486dcf399aaaffd26ace7e62e194fe0efb4b7880e45b3b7939224ee838d3213448ef654fc8a61c91a76fe994d94
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
-  version: 0.3.25
-  resolution: "@jridgewell/trace-mapping@npm:0.3.25"
+"@jsonjoy.com/util@npm:^1.9.0":
+  version: 1.9.0
+  resolution: "@jsonjoy.com/util@npm:1.9.0"
   dependencies:
-    "@jridgewell/resolve-uri": "npm:^3.1.0"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
-  checksum: 10/dced32160a44b49d531b80a4a2159dceab6b3ddf0c8e95a0deae4b0e894b172defa63d5ac52a19c2068e1fe7d31ea4ba931fbeec103233ecb4208953967120fc
+    "@jsonjoy.com/buffers": "npm:^1.0.0"
+    "@jsonjoy.com/codegen": "npm:^1.0.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/1a6e5301d725a7161b93ff707eb1a954bf4552a2fa96eee9a960d3ae3ed5f993d18b56dcff29e98036341a5968c5d1b2dfe21f76695390e7f0d89b81f24c85e0
   languageName: node
   linkType: hard
 
 "@leichtgewicht/ip-codec@npm:^2.0.1":
-  version: 2.0.4
-  resolution: "@leichtgewicht/ip-codec@npm:2.0.4"
-  checksum: 10/3c7ffb0afb86c731a02813aa4370da27eac037abf8a15fce211226c11b644610382c8eca7efadace9471ee1959afe72fc1d43a62227d974b9fca8eae8b8d2124
+  version: 2.0.5
+  resolution: "@leichtgewicht/ip-codec@npm:2.0.5"
+  checksum: 10/cb98c608392abe59457a14e00134e7dfa57c0c9b459871730cd4e907bb12b834cbd03e08ad8663fea9e486f260da7f1293ccd9af0376bf5524dd8536192f248c
   languageName: node
   linkType: hard
 
@@ -2040,25 +1600,169 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@npmcli/agent@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "@npmcli/agent@npm:2.2.0"
+"@npmcli/agent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@npmcli/agent@npm:3.0.0"
   dependencies:
     agent-base: "npm:^7.1.0"
     http-proxy-agent: "npm:^7.0.0"
     https-proxy-agent: "npm:^7.0.1"
     lru-cache: "npm:^10.0.1"
-    socks-proxy-agent: "npm:^8.0.1"
-  checksum: 10/822ea077553cd9cfc5cbd6d92380b0950fcb054a7027cd1b63a33bd0cbb16b0c6626ea75d95ec0e804643c8904472d3361d2da8c2444b1fb02a9b525d9c07c41
+    socks-proxy-agent: "npm:^8.0.3"
+  checksum: 10/775c9a7eb1f88c195dfb3bce70c31d0fe2a12b28b754e25c08a3edb4bc4816bfedb7ac64ef1e730579d078ca19dacf11630e99f8f3c3e0fd7b23caa5fd6d30a6
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@npmcli/fs@npm:3.1.0"
+"@npmcli/fs@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@npmcli/fs@npm:4.0.0"
   dependencies:
     semver: "npm:^7.3.5"
-  checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e
+  checksum: 10/405c4490e1ff11cf299775449a3c254a366a4b1ffc79d87159b0ee7d5558ac9f6a2f8c0735fd6ff3873cef014cb1a44a5f9127cb6a1b2dbc408718cca9365b5a
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-android-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-android-arm64@npm:2.5.1"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-darwin-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-darwin-arm64@npm:2.5.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-darwin-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-darwin-x64@npm:2.5.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-freebsd-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-freebsd-x64@npm:2.5.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm-musl@npm:2.5.1"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm64-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm64-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm64-musl@npm:2.5.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-x64-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-x64-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-x64-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-x64-musl@npm:2.5.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-arm64@npm:2.5.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-ia32@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-ia32@npm:2.5.1"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-x64@npm:2.5.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher@npm:^2.4.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher@npm:2.5.1"
+  dependencies:
+    "@parcel/watcher-android-arm64": "npm:2.5.1"
+    "@parcel/watcher-darwin-arm64": "npm:2.5.1"
+    "@parcel/watcher-darwin-x64": "npm:2.5.1"
+    "@parcel/watcher-freebsd-x64": "npm:2.5.1"
+    "@parcel/watcher-linux-arm-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-arm-musl": "npm:2.5.1"
+    "@parcel/watcher-linux-arm64-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-arm64-musl": "npm:2.5.1"
+    "@parcel/watcher-linux-x64-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-x64-musl": "npm:2.5.1"
+    "@parcel/watcher-win32-arm64": "npm:2.5.1"
+    "@parcel/watcher-win32-ia32": "npm:2.5.1"
+    "@parcel/watcher-win32-x64": "npm:2.5.1"
+    detect-libc: "npm:^1.0.3"
+    is-glob: "npm:^4.0.3"
+    micromatch: "npm:^4.0.5"
+    node-addon-api: "npm:^7.0.0"
+    node-gyp: "npm:latest"
+  dependenciesMeta:
+    "@parcel/watcher-android-arm64":
+      optional: true
+    "@parcel/watcher-darwin-arm64":
+      optional: true
+    "@parcel/watcher-darwin-x64":
+      optional: true
+    "@parcel/watcher-freebsd-x64":
+      optional: true
+    "@parcel/watcher-linux-arm-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm-musl":
+      optional: true
+    "@parcel/watcher-linux-arm64-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm64-musl":
+      optional: true
+    "@parcel/watcher-linux-x64-glibc":
+      optional: true
+    "@parcel/watcher-linux-x64-musl":
+      optional: true
+    "@parcel/watcher-win32-arm64":
+      optional: true
+    "@parcel/watcher-win32-ia32":
+      optional: true
+    "@parcel/watcher-win32-x64":
+      optional: true
+  checksum: 10/2cc1405166fb3016b34508661902ab08b6dec59513708165c633c84a4696fff64f9b99ea116e747c121215e09619f1decab6f0350d1cb26c9210b98eb28a6a56
   languageName: node
   linkType: hard
 
@@ -2070,15 +1774,15 @@ __metadata:
   linkType: hard
 
 "@polka/url@npm:^1.0.0-next.24":
-  version: 1.0.0-next.24
-  resolution: "@polka/url@npm:1.0.0-next.24"
-  checksum: 10/00baec4458ac86ca27edf7ce807ccfad97cd1d4b67bdedaf3401a9e755757588f3331e891290d1deea52d88df2bf2387caf8d94a6835b614d5b37b638a688273
+  version: 1.0.0-next.29
+  resolution: "@polka/url@npm:1.0.0-next.29"
+  checksum: 10/69ca11ab15a4ffec7f0b07fcc4e1f01489b3d9683a7e1867758818386575c60c213401259ba3705b8a812228d17e2bfd18e6f021194d943fff4bca389c9d4f28
   languageName: node
   linkType: hard
 
-"@rollup/plugin-babel@npm:^6.0.4":
-  version: 6.0.4
-  resolution: "@rollup/plugin-babel@npm:6.0.4"
+"@rollup/plugin-babel@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "@rollup/plugin-babel@npm:6.1.0"
   dependencies:
     "@babel/helper-module-imports": "npm:^7.18.6"
     "@rollup/pluginutils": "npm:^5.0.1"
@@ -2091,163 +1795,202 @@ __metadata:
       optional: true
     rollup:
       optional: true
-  checksum: 10/89210c8c597b41fd4c561749505c85827697d8d0918c492270f522bd85fac8db3af701cf05480a9e594fcc0df9be42fb7ab025b02a272bde74bb2f63c8c39de2
+  checksum: 10/9971648c2c9f2d4b7cec1c35541384414d150d50937af3729eb8ea09fa71ad0e3d11ca10a03e4ae97c0d3d5c3d619e1b693cfe81257b8ad50a4844c88dbaf384
+  languageName: node
+  linkType: hard
+
+"@rollup/plugin-node-resolve@npm:^16.0.3":
+  version: 16.0.3
+  resolution: "@rollup/plugin-node-resolve@npm:16.0.3"
+  dependencies:
+    "@rollup/pluginutils": "npm:^5.0.1"
+    "@types/resolve": "npm:1.20.2"
+    deepmerge: "npm:^4.2.2"
+    is-module: "npm:^1.0.0"
+    resolve: "npm:^1.22.1"
+  peerDependencies:
+    rollup: ^2.78.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 10/6848212994adc5c3fcd851eb268ad58b3905c5535272ae51d33a7ac1590ff428d102afe81702e031b0360481798e61efc0194b4ee39b812a3ae274c998f4d424
   languageName: node
   linkType: hard
 
 "@rollup/pluginutils@npm:^5.0.1":
-  version: 5.1.0
-  resolution: "@rollup/pluginutils@npm:5.1.0"
+  version: 5.3.0
+  resolution: "@rollup/pluginutils@npm:5.3.0"
   dependencies:
     "@types/estree": "npm:^1.0.0"
     estree-walker: "npm:^2.0.2"
-    picomatch: "npm:^2.3.1"
+    picomatch: "npm:^4.0.2"
   peerDependencies:
     rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: 10/abb15eaec5b36f159ec351b48578401bedcefdfa371d24a914cfdbb1e27d0ebfbf895299ec18ccc343d247e71f2502cba21202bc1362d7ef27d5ded699e5c2b2
+  checksum: 10/6c7dbab90e0ca5918a36875f745a0f30b47d5e0f45b42ed381ad8f7fed76b23e935766b66e3ae75375a42a80369569913abc8fd2529f4338471a1b2b4dfebaff
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.28.1"
+"@rollup/rollup-android-arm-eabi@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.52.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-android-arm64@npm:4.28.1"
+"@rollup/rollup-android-arm64@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.52.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.28.1"
+"@rollup/rollup-darwin-arm64@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.52.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-darwin-x64@npm:4.28.1"
+"@rollup/rollup-darwin-x64@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.52.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-arm64@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-freebsd-arm64@npm:4.28.1"
+"@rollup/rollup-freebsd-arm64@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.52.0"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-x64@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-freebsd-x64@npm:4.28.1"
+"@rollup/rollup-freebsd-x64@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.52.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.28.1"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.52.0"
   conditions: os=linux & cpu=arm & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-musleabihf@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.28.1"
+"@rollup/rollup-linux-arm-musleabihf@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.52.0"
   conditions: os=linux & cpu=arm & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.28.1"
+"@rollup/rollup-linux-arm64-gnu@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.52.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.28.1"
+"@rollup/rollup-linux-arm64-musl@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.52.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-loongarch64-gnu@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.28.1"
+"@rollup/rollup-linux-loong64-gnu@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-loong64-gnu@npm:4.52.0"
   conditions: os=linux & cpu=loong64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-powerpc64le-gnu@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.28.1"
+"@rollup/rollup-linux-ppc64-gnu@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.52.0"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.28.1"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.52.0"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-s390x-gnu@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.28.1"
+"@rollup/rollup-linux-riscv64-musl@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.52.0"
+  conditions: os=linux & cpu=riscv64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-s390x-gnu@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.52.0"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.28.1"
+"@rollup/rollup-linux-x64-gnu@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.52.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.28.1"
+"@rollup/rollup-linux-x64-musl@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.52.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.28.1"
+"@rollup/rollup-openharmony-arm64@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-openharmony-arm64@npm:4.52.0"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-arm64-msvc@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.52.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.28.1"
+"@rollup/rollup-win32-ia32-msvc@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.52.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.28.1":
-  version: 4.28.1
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.28.1"
+"@rollup/rollup-win32-x64-gnu@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-win32-x64-gnu@npm:4.52.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-x64-msvc@npm:4.52.0":
+  version: 4.52.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.52.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@sinclair/typebox@npm:^0.27.8":
-  version: 0.27.8
-  resolution: "@sinclair/typebox@npm:0.27.8"
-  checksum: 10/297f95ff77c82c54de8c9907f186076e715ff2621c5222ba50b8d40a170661c0c5242c763cba2a4791f0f91cb1d8ffa53ea1d7294570cf8cd4694c0e383e484d
+"@sinclair/typebox@npm:^0.34.0":
+  version: 0.34.41
+  resolution: "@sinclair/typebox@npm:0.34.41"
+  checksum: 10/5c04a7f42156a7813a159947a0c3fe7e9f11aa722141ac3ff32242faf031b443ef71763d8791ce8d01bd5856770de51fd6fcda94b3a51558ba1f6d5112fa33f4
   languageName: node
   linkType: hard
 
@@ -2258,54 +2001,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__core@npm:^7.1.14":
-  version: 7.20.0
-  resolution: "@types/babel__core@npm:7.20.0"
-  dependencies:
-    "@babel/parser": "npm:^7.20.7"
-    "@babel/types": "npm:^7.20.7"
-    "@types/babel__generator": "npm:*"
-    "@types/babel__template": "npm:*"
-    "@types/babel__traverse": "npm:*"
-  checksum: 10/b82e432bfc42075d4f6218e5ed5c4a7cdeb087e0416f969fc65a755c41d129d7e369c93e9a9dc59d43291327aa8d7cd149f3573d1c3b54d0192561d02bb225eb
+"@tsconfig/node10@npm:^1.0.7":
+  version: 1.0.12
+  resolution: "@tsconfig/node10@npm:1.0.12"
+  checksum: 10/27e2f989dbb20f773aa121b609a5361a473b7047ff286fce7c851e61f5eec0c74f0bdb38d5bd69c8a06f17e60e9530188f2219b1cbeabeac91f0a5fd348eac2a
   languageName: node
   linkType: hard
 
-"@types/babel__generator@npm:*":
-  version: 7.6.4
-  resolution: "@types/babel__generator@npm:7.6.4"
-  dependencies:
-    "@babel/types": "npm:^7.0.0"
-  checksum: 10/34f361a0d54a0d85ea4c4b5122c4025a5738fe6795361c85f07a4f8f9add383de640e8611edeeb8339db8203c2d64bff30be266bdcfe3cf777c19e8d34f9cebc
+"@tsconfig/node12@npm:^1.0.7":
+  version: 1.0.11
+  resolution: "@tsconfig/node12@npm:1.0.11"
+  checksum: 10/5ce29a41b13e7897a58b8e2df11269c5395999e588b9a467386f99d1d26f6c77d1af2719e407621412520ea30517d718d5192a32403b8dfcc163bf33e40a338a
   languageName: node
   linkType: hard
 
-"@types/babel__template@npm:*":
-  version: 7.4.1
-  resolution: "@types/babel__template@npm:7.4.1"
-  dependencies:
-    "@babel/parser": "npm:^7.1.0"
-    "@babel/types": "npm:^7.0.0"
-  checksum: 10/649fe8b42c2876be1fd28c6ed9b276f78152d5904ec290b6c861d9ef324206e0a5c242e8305c421ac52ecf6358fa7e32ab7a692f55370484825c1df29b1596ee
+"@tsconfig/node14@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "@tsconfig/node14@npm:1.0.3"
+  checksum: 10/19275fe80c4c8d0ad0abed6a96dbf00642e88b220b090418609c4376e1cef81bf16237bf170ad1b341452feddb8115d8dd2e5acdfdea1b27422071163dc9ba9d
   languageName: node
   linkType: hard
 
-"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6":
-  version: 7.18.5
-  resolution: "@types/babel__traverse@npm:7.18.5"
-  dependencies:
-    "@babel/types": "npm:^7.3.0"
-  checksum: 10/231ac016293ccf9272e7f57d504833fcbc9454b3dda0faca0fc6a03e12baa93f12d8a2da0bae30c3ced6b66c0305f79f2e0e80abbcb0dc849c9aa2809d9bdab1
+"@tsconfig/node16@npm:^1.0.2":
+  version: 1.0.4
+  resolution: "@tsconfig/node16@npm:1.0.4"
+  checksum: 10/202319785901f942a6e1e476b872d421baec20cf09f4b266a1854060efbf78cde16a4d256e8bc949d31e6cd9a90f1e8ef8fb06af96a65e98338a2b6b0de0a0ff
   languageName: node
   linkType: hard
 
 "@types/body-parser@npm:*":
-  version: 1.19.2
-  resolution: "@types/body-parser@npm:1.19.2"
+  version: 1.19.6
+  resolution: "@types/body-parser@npm:1.19.6"
   dependencies:
     "@types/connect": "npm:*"
     "@types/node": "npm:*"
-  checksum: 10/e17840c7d747a549f00aebe72c89313d09fbc4b632b949b2470c5cb3b1cb73863901ae84d9335b567a79ec5efcfb8a28ff8e3f36bc8748a9686756b6d5681f40
+  checksum: 10/33041e88eae00af2cfa0827e951e5f1751eafab2a8b6fce06cd89ef368a988907996436b1325180edaeddd1c0c7d0d0d4c20a6c9ff294a91e0039a9db9e9b658
   languageName: node
   linkType: hard
 
@@ -2329,11 +2059,11 @@ __metadata:
   linkType: hard
 
 "@types/connect@npm:*":
-  version: 3.4.35
-  resolution: "@types/connect@npm:3.4.35"
+  version: 3.4.38
+  resolution: "@types/connect@npm:3.4.38"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 10/fe81351470f2d3165e8b12ce33542eef89ea893e36dd62e8f7d72566dfb7e448376ae962f9f3ea888547ce8b55a40020ca0e01d637fab5d99567673084542641
+  checksum: 10/7eb1bc5342a9604facd57598a6c62621e244822442976c443efb84ff745246b10d06e8b309b6e80130026a396f19bf6793b7cecd7380169f369dac3bfc46fb99
   languageName: node
   linkType: hard
 
@@ -2357,53 +2087,57 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:1.0.6, @types/estree@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "@types/estree@npm:1.0.6"
-  checksum: 10/9d35d475095199c23e05b431bcdd1f6fec7380612aed068b14b2a08aa70494de8a9026765a5a91b1073f636fb0368f6d8973f518a31391d519e20c59388ed88d
+"@types/estree@npm:*, @types/estree@npm:1.0.8, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "@types/estree@npm:1.0.8"
+  checksum: 10/25a4c16a6752538ffde2826c2cc0c6491d90e69cd6187bef4a006dd2c3c45469f049e643d7e516c515f21484dc3d48fd5c870be158a5beb72f5baf3dc43e4099
   languageName: node
   linkType: hard
 
-"@types/estree@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "@types/estree@npm:1.0.1"
-  checksum: 10/f252569c002506c61ad913e778aa69415908078c46c78c901ccad77bc66cd34f1e1b9babefb8ff0d27c07a15fb0824755edd7bb3fa7ea828f32ae0fe5faa9962
+"@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^5.0.0":
+  version: 5.0.7
+  resolution: "@types/express-serve-static-core@npm:5.0.7"
+  dependencies:
+    "@types/node": "npm:*"
+    "@types/qs": "npm:*"
+    "@types/range-parser": "npm:*"
+    "@types/send": "npm:*"
+  checksum: 10/74c69797f88e0fe5551b00e9de79338177d0c4c165abeafb4717cf79e4e019ca8d34688acdedc943944b73f563be3ec3ecf20e572a0dad034fa61eb582ee632e
   languageName: node
   linkType: hard
 
-"@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^4.17.33":
-  version: 4.17.34
-  resolution: "@types/express-serve-static-core@npm:4.17.34"
+"@types/express-serve-static-core@npm:^4.17.21, @types/express-serve-static-core@npm:^4.17.33":
+  version: 4.19.6
+  resolution: "@types/express-serve-static-core@npm:4.19.6"
   dependencies:
     "@types/node": "npm:*"
     "@types/qs": "npm:*"
     "@types/range-parser": "npm:*"
     "@types/send": "npm:*"
-  checksum: 10/0fa84ec0df7c9c4a11367ce6d910f68af7b312af04d949ec9033a81796e1ef65ac504bc0eaaf376f69cf54dce94d0a39d01d200cfda5157357cf34f0ac7e4685
+  checksum: 10/a2e00b6c5993f0dd63ada2239be81076fe0220314b9e9fde586e8946c9c09ce60f9a2dd0d74410ee2b5fd10af8c3e755a32bb3abf134533e2158142488995455
   languageName: node
   linkType: hard
 
 "@types/express@npm:*":
-  version: 4.17.17
-  resolution: "@types/express@npm:4.17.17"
+  version: 5.0.3
+  resolution: "@types/express@npm:5.0.3"
   dependencies:
     "@types/body-parser": "npm:*"
-    "@types/express-serve-static-core": "npm:^4.17.33"
-    "@types/qs": "npm:*"
+    "@types/express-serve-static-core": "npm:^5.0.0"
     "@types/serve-static": "npm:*"
-  checksum: 10/e2959a5fecdc53f8a524891a16e66dfc330ee0519e89c2579893179db686e10cfa6079a68e0fb8fd00eedbcaf3eabfd10916461939f3bc02ef671d848532c37e
+  checksum: 10/bb6f10c14c8e3cce07f79ee172688aa9592852abd7577b663cd0c2054307f172c2b2b36468c918fed0d4ac359b99695807b384b3da6157dfa79acbac2226b59b
   languageName: node
   linkType: hard
 
 "@types/express@npm:^4.17.21":
-  version: 4.17.21
-  resolution: "@types/express@npm:4.17.21"
+  version: 4.17.23
+  resolution: "@types/express@npm:4.17.23"
   dependencies:
     "@types/body-parser": "npm:*"
     "@types/express-serve-static-core": "npm:^4.17.33"
     "@types/qs": "npm:*"
     "@types/serve-static": "npm:*"
-  checksum: 10/7a6d26cf6f43d3151caf4fec66ea11c9d23166e4f3102edfe45a94170654a54ea08cf3103d26b3928d7ebcc24162c90488e33986b7e3a5f8941225edd5eb18c7
+  checksum: 10/cf4d540bbd90801cdc79a46107b8873404698a7fd0c3e8dd42989d52d3bd7f5b8768672e54c20835e41e27349c319bb47a404ad14c0f8db0e9d055ba1cb8a05b
   languageName: node
   linkType: hard
 
@@ -2417,15 +2151,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/graceful-fs@npm:^4.1.3":
-  version: 4.1.6
-  resolution: "@types/graceful-fs@npm:4.1.6"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10/c3070ccdc9ca0f40df747bced1c96c71a61992d6f7c767e8fd24bb6a3c2de26e8b84135ede000b7e79db530a23e7e88dcd9db60eee6395d0f4ce1dae91369dd4
-  languageName: node
-  linkType: hard
-
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -2434,71 +2159,67 @@ __metadata:
   linkType: hard
 
 "@types/http-errors@npm:*":
-  version: 2.0.4
-  resolution: "@types/http-errors@npm:2.0.4"
-  checksum: 10/1f3d7c3b32c7524811a45690881736b3ef741bf9849ae03d32ad1ab7062608454b150a4e7f1351f83d26a418b2d65af9bdc06198f1c079d75578282884c4e8e3
+  version: 2.0.5
+  resolution: "@types/http-errors@npm:2.0.5"
+  checksum: 10/a88da669366bc483e8f3b3eb3d34ada5f8d13eeeef851b1204d77e2ba6fc42aba4566d877cca5c095204a3f4349b87fe397e3e21288837bdd945dd514120755b
   languageName: node
   linkType: hard
 
 "@types/http-proxy@npm:^1.17.8":
-  version: 1.17.11
-  resolution: "@types/http-proxy@npm:1.17.11"
+  version: 1.17.16
+  resolution: "@types/http-proxy@npm:1.17.16"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 10/7cda456611b4adfdd87e4317745af643153d502576fb7095806d5b1b397b9a878b105e14abff9b7ab1d1c71132b61b5fc7052461f766165963950f1b46e18315
+  checksum: 10/a054ac8f5301acfcfdcec3a775f52dc371180bbe60037906534312f10cceb3799b4a16e46c56c22f9925d078e11dcda1723c38f1ddd124be8169a4cccca69c8c
   languageName: node
   linkType: hard
 
-"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0":
-  version: 2.0.4
-  resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
-  checksum: 10/a25d7589ee65c94d31464c16b72a9dc81dfa0bea9d3e105ae03882d616e2a0712a9c101a599ec482d297c3591e16336962878cb3eb1a0a62d5b76d277a890ce7
+"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
+  checksum: 10/3feac423fd3e5449485afac999dcfcb3d44a37c830af898b689fadc65d26526460bedb889db278e0d4d815a670331796494d073a10ee6e3a6526301fe7415778
   languageName: node
   linkType: hard
 
 "@types/istanbul-lib-report@npm:*":
-  version: 3.0.0
-  resolution: "@types/istanbul-lib-report@npm:3.0.0"
+  version: 3.0.3
+  resolution: "@types/istanbul-lib-report@npm:3.0.3"
   dependencies:
     "@types/istanbul-lib-coverage": "npm:*"
-  checksum: 10/f121dcac8a6b8184f3cab97286d8d519f1937fa8620ada5dbc43b699d602b8be289e4a4bccbd6ee1aade6869d3c9fb68bf04c6fdca8c5b0c4e7e314c31c7900a
+  checksum: 10/b91e9b60f865ff08cb35667a427b70f6c2c63e88105eadd29a112582942af47ed99c60610180aa8dcc22382fa405033f141c119c69b95db78c4c709fbadfeeb4
   languageName: node
   linkType: hard
 
-"@types/istanbul-reports@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "@types/istanbul-reports@npm:3.0.1"
+"@types/istanbul-reports@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@types/istanbul-reports@npm:3.0.4"
   dependencies:
     "@types/istanbul-lib-report": "npm:*"
-  checksum: 10/f1ad54bc68f37f60b30c7915886b92f86b847033e597f9b34f2415acdbe5ed742fa559a0a40050d74cdba3b6a63c342cac1f3a64dba5b68b66a6941f4abd7903
+  checksum: 10/93eb18835770b3431f68ae9ac1ca91741ab85f7606f310a34b3586b5a34450ec038c3eed7ab19266635499594de52ff73723a54a72a75b9f7d6a956f01edee95
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:*":
-  version: 7.0.15
-  resolution: "@types/json-schema@npm:7.0.15"
-  checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
-  languageName: node
-  linkType: hard
-
-"@types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
-  version: 7.0.11
-  resolution: "@types/json-schema@npm:7.0.11"
-  checksum: 10/e50864a93f4dcb9de64c0c605d836f5416341c824d7a8cde1aa15a5fc68bed44b33cdcb2e04e5098339e9121848378f2d0cc5b124dec41c89203c6f67d6f344a
+"@types/jest@npm:^30.0.0":
+  version: 30.0.0
+  resolution: "@types/jest@npm:30.0.0"
+  dependencies:
+    expect: "npm:^30.0.0"
+    pretty-format: "npm:^30.0.0"
+  checksum: 10/cdeaa924c68b5233d9ff92861a89e7042df2b0f197633729bcf3a31e65bd4e9426e751c5665b5ac2de0b222b33f100a5502da22aefce3d2c62931c715e88f209
   languageName: node
   linkType: hard
 
-"@types/mime@npm:*":
-  version: 3.0.1
-  resolution: "@types/mime@npm:3.0.1"
-  checksum: 10/4040fac73fd0cea2460e29b348c1a6173da747f3a87da0dbce80dd7a9355a3d0e51d6d9a401654f3e5550620e3718b5a899b2ec1debf18424e298a2c605346e7
+"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.15, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
+  version: 7.0.15
+  resolution: "@types/json-schema@npm:7.0.15"
+  checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
   languageName: node
   linkType: hard
 
 "@types/mime@npm:^1":
-  version: 1.3.2
-  resolution: "@types/mime@npm:1.3.2"
-  checksum: 10/0493368244cced1a69cb791b485a260a422e6fcc857782e1178d1e6f219f1b161793e9f87f5fae1b219af0f50bee24fcbe733a18b4be8fdd07a38a8fb91146fd
+  version: 1.3.5
+  resolution: "@types/mime@npm:1.3.5"
+  checksum: 10/e29a5f9c4776f5229d84e525b7cd7dd960b51c30a0fb9a028c0821790b82fca9f672dab56561e2acd9e8eed51d431bde52eafdfef30f643586c4162f1aecfc78
   languageName: node
   linkType: hard
 
@@ -2509,35 +2230,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mocha@npm:^10.0.10":
+  version: 10.0.10
+  resolution: "@types/mocha@npm:10.0.10"
+  checksum: 10/4e3b61ed5112add86891a5dd3ebdd087714f5e1784a63d47a96424c0825058fd07074e85e43573462f751636c92808fc18a5f3862fe45e649ea98fdc5a3ee2ea
+  languageName: node
+  linkType: hard
+
 "@types/node-forge@npm:^1.3.0":
-  version: 1.3.11
-  resolution: "@types/node-forge@npm:1.3.11"
+  version: 1.3.14
+  resolution: "@types/node-forge@npm:1.3.14"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 10/670c9b377c48189186ec415e3c8ed371f141ecc1a79ab71b213b20816adeffecba44dae4f8406cc0d09e6349a4db14eb8c5893f643d8e00fa19fc035cf49dee0
+  checksum: 10/500ce72435285fca145837da079b49a09a5bdf8391b0effc3eb2455783dd81ab129e574a36e1a0374a4823d889d5328177ebfd6fe45b432c0c43d48d790fe39c
   languageName: node
   linkType: hard
 
 "@types/node@npm:*":
-  version: 18.16.3
-  resolution: "@types/node@npm:18.16.3"
-  checksum: 10/4f4425ba49a46e7efa88346dc2ea63ea9aab88c04d244d77710fe8019587f3c163ba2ea1e4854fd20cb5cdec9abd3bfb324ad60aabddf395cee6b0b195bd57bb
-  languageName: node
-  linkType: hard
-
-"@types/node@npm:^22.10.1":
-  version: 22.10.1
-  resolution: "@types/node@npm:22.10.1"
+  version: 24.5.2
+  resolution: "@types/node@npm:24.5.2"
   dependencies:
-    undici-types: "npm:~6.20.0"
-  checksum: 10/c802a526da2f3fa3ccefd00a71244e7cb825329951719e79e8fec62b1dbc2855388c830489770611584665ce10be23c05ed585982038b24924e1ba2c2cce03fd
+    undici-types: "npm:~7.12.0"
+  checksum: 10/a497aea88a12131b03382d933690b71c131ee890232596b8d5b73f0a20c90874001800b2bfc267bd37df8285bef911729b4773426be7d2dc13ef4c760904e47d
   languageName: node
   linkType: hard
 
-"@types/parse-json@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@types/parse-json@npm:4.0.0"
-  checksum: 10/4df9de98150d2978afc2161482a3a8e6617883effba3223324f079de97ba7eabd7d84b90ced11c3f82b0c08d4a8383f678c9f73e9c41258f769b3fa234a2bb4f
+"@types/node@npm:^25.0.3":
+  version: 25.0.3
+  resolution: "@types/node@npm:25.0.3"
+  dependencies:
+    undici-types: "npm:~7.16.0"
+  checksum: 10/5889b00f398eff4d4af28c3e5e97976f65c39a63fa3d7011f35cbf8640675fa6835e5dd47dce94d6ba48667711ddcd1f5c9bc5d93233e6a8e9ea1e502e8aa5a4
   languageName: node
   linkType: hard
 
@@ -2548,34 +2271,51 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*":
-  version: 15.7.5
-  resolution: "@types/prop-types@npm:15.7.5"
-  checksum: 10/5b43b8b15415e1f298243165f1d44390403bb2bd42e662bca3b5b5633fdd39c938e91b7fce3a9483699db0f7a715d08cef220c121f723a634972fdf596aec980
+"@types/qs@npm:*":
+  version: 6.14.0
+  resolution: "@types/qs@npm:6.14.0"
+  checksum: 10/1909205514d22b3cbc7c2314e2bd8056d5f05dfb21cf4377f0730ee5e338ea19957c41735d5e4806c746176563f50005bbab602d8358432e25d900bdf4970826
   languageName: node
   linkType: hard
 
-"@types/qs@npm:*":
-  version: 6.9.7
-  resolution: "@types/qs@npm:6.9.7"
-  checksum: 10/7fd6f9c25053e9b5bb6bc9f9f76c1d89e6c04f7707a7ba0e44cc01f17ef5284adb82f230f542c2d5557d69407c9a40f0f3515e8319afd14e1e16b5543ac6cdba
+"@types/range-parser@npm:*":
+  version: 1.2.7
+  resolution: "@types/range-parser@npm:1.2.7"
+  checksum: 10/95640233b689dfbd85b8c6ee268812a732cf36d5affead89e806fe30da9a430767af8ef2cd661024fd97e19d61f3dec75af2df5e80ec3bea000019ab7028629a
   languageName: node
   linkType: hard
 
-"@types/range-parser@npm:*":
-  version: 1.2.4
-  resolution: "@types/range-parser@npm:1.2.4"
-  checksum: 10/b7c0dfd5080a989d6c8bb0b6750fc0933d9acabeb476da6fe71d8bdf1ab65e37c136169d84148034802f48378ab94e3c37bb4ef7656b2bec2cb9c0f8d4146a95
+"@types/react-dom@npm:^19.2.3":
+  version: 19.2.3
+  resolution: "@types/react-dom@npm:19.2.3"
+  peerDependencies:
+    "@types/react": ^19.2.0
+  checksum: 10/616c4a8aee250ea05fb1e7b98e7e00475dd3a6c1c30d7be18b4b93caba832f4203106b3a496a6b147e5acc2da14575eca47bce234c633bca1f8430ef8ffb234a
+  languageName: node
+  linkType: hard
+
+"@types/react-test-renderer@npm:^19.1.0":
+  version: 19.1.0
+  resolution: "@types/react-test-renderer@npm:19.1.0"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10/2ef3aec0f2fd638902cda606d70c8531d66f8e8944334427986b99dcac9755ee60b700c5c3a19ac354680f9c45669e98077b84f79cac60e950bdb7d38aebffde
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.3.14":
-  version: 18.3.14
-  resolution: "@types/react@npm:18.3.14"
+"@types/react@npm:*, @types/react@npm:^19.2.7":
+  version: 19.2.7
+  resolution: "@types/react@npm:19.2.7"
   dependencies:
-    "@types/prop-types": "npm:*"
-    csstype: "npm:^3.0.2"
-  checksum: 10/683927b1e24293276cf62f60f1baa666b7f1053c87ec8d8c79d2d4bc105b99e0492482f801ffce7cdef9d656c11294faa423051807a500c7475f4fbd7661bd8d
+    csstype: "npm:^3.2.2"
+  checksum: 10/dc0b756eee2c9782d282ae47eaa8d537b2a569eb889a6808c4b172d70fb690b2b1d8fe6239db451aa1c90d2a947cc21c9b537ce177ba9e6121468e403e4079c5
+  languageName: node
+  linkType: hard
+
+"@types/resolve@npm:1.20.2":
+  version: 1.20.2
+  resolution: "@types/resolve@npm:1.20.2"
+  checksum: 10/1bff0d3875e7e1557b6c030c465beca9bf3b1173ebc6937cac547654b0af3bb3ff0f16470e9c4d7c5dc308ad9ac8627c38dbff24ef698b66673ff5bd4ead7f7e
   languageName: node
   linkType: hard
 
@@ -2586,13 +2326,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/route-parser@npm:^0.1.7":
+  version: 0.1.7
+  resolution: "@types/route-parser@npm:0.1.7"
+  checksum: 10/4aae92e0d1171ef09e524e48453653574ef15397592ad1a07ff358313456965741b442959557993897aa7afd33fa0365f74d0e89818d16fac07b7b15402841c2
+  languageName: node
+  linkType: hard
+
 "@types/send@npm:*":
-  version: 0.17.1
-  resolution: "@types/send@npm:0.17.1"
+  version: 0.17.5
+  resolution: "@types/send@npm:0.17.5"
   dependencies:
     "@types/mime": "npm:^1"
     "@types/node": "npm:*"
-  checksum: 10/6420837887858f7aa82f2c0272f73edb42385bd0978f43095e83590a405d86c8cc6d918c30b2d542f1d8bddc9f3d16c2e8fdfca936940de71b97c45f228d1896
+  checksum: 10/b68ae8f9ba9328a4f276cd010914ed43b96371fbf34c7aa08a9111bff36661810bb14b96647e4a92e319dbd2689dc107fb0f9194ec3fa9335c162dc134026240
   languageName: node
   linkType: hard
 
@@ -2605,24 +2352,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/serve-static@npm:*":
-  version: 1.15.1
-  resolution: "@types/serve-static@npm:1.15.1"
-  dependencies:
-    "@types/mime": "npm:*"
-    "@types/node": "npm:*"
-  checksum: 10/e556d611a4240d338afe90c080f9987bbeecee97f8fd3a8aabac07fa6bc3652a3c3f06214fb25f709547c4dcee9f0a723f24c799758484c6db7f46c0235d5b4f
-  languageName: node
-  linkType: hard
-
-"@types/serve-static@npm:^1.15.5":
-  version: 1.15.5
-  resolution: "@types/serve-static@npm:1.15.5"
+"@types/serve-static@npm:*, @types/serve-static@npm:^1.15.5":
+  version: 1.15.8
+  resolution: "@types/serve-static@npm:1.15.8"
   dependencies:
     "@types/http-errors": "npm:*"
-    "@types/mime": "npm:*"
     "@types/node": "npm:*"
-  checksum: 10/49aa21c367fffe4588fc8c57ea48af0ea7cbadde7418bc53cde85d8bd57fd2a09a293970d9ea86e79f17a87f8adeb3e20da76aab38e1c4d1567931fa15c8af38
+    "@types/send": "npm:*"
+  checksum: 10/c031f870df6056a4c0a5a0ae94c5584006ab55400c74ae44de4d68d89338fbe982422861bad478b89a073f671efca454689fd28b6147358d6adc8edbc599caea
   languageName: node
   linkType: hard
 
@@ -2635,28 +2372,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stack-utils@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "@types/stack-utils@npm:2.0.3"
+  checksum: 10/72576cc1522090fe497337c2b99d9838e320659ac57fa5560fcbdcbafcf5d0216c6b3a0a8a4ee4fdb3b1f5e3420aa4f6223ab57b82fef3578bec3206425c6cf5
+  languageName: node
+  linkType: hard
+
+"@types/webpack-env@npm:^1.18.8":
+  version: 1.18.8
+  resolution: "@types/webpack-env@npm:1.18.8"
+  checksum: 10/f3932f3d6c2530f644cfc898eda1ab8182d6ae57f555c2f0179d813549b639078671b71e4041831fc306c5ebe61f5cdac794fe4ceae281fce8bf67e23661a488
+  languageName: node
+  linkType: hard
+
 "@types/ws@npm:^8.5.10":
-  version: 8.5.10
-  resolution: "@types/ws@npm:8.5.10"
+  version: 8.18.1
+  resolution: "@types/ws@npm:8.18.1"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 10/9b414dc5e0b6c6f1ea4b1635b3568c58707357f68076df9e7cd33194747b7d1716d5189c0dbdd68c8d2521b148e88184cf881bac7429eb0e5c989b001539ed31
+  checksum: 10/1ce05e3174dcacf28dae0e9b854ef1c9a12da44c7ed73617ab6897c5cbe4fccbb155a20be5508ae9a7dde2f83bd80f5cf3baa386b934fc4b40889ec963e94f3a
   languageName: node
   linkType: hard
 
 "@types/yargs-parser@npm:*":
-  version: 21.0.0
-  resolution: "@types/yargs-parser@npm:21.0.0"
-  checksum: 10/c4caec730c1ee09466588389ba4ac83d85a01423c539b9565bb5b5a084bff3f4e47bfb7c06e963c0ef8d4929cf6fca0bc2923a33ef16727cdba60e95c8cdd0d0
+  version: 21.0.3
+  resolution: "@types/yargs-parser@npm:21.0.3"
+  checksum: 10/a794eb750e8ebc6273a51b12a0002de41343ffe46befef460bdbb57262d187fdf608bc6615b7b11c462c63c3ceb70abe2564c8dd8ee0f7628f38a314f74a9b9b
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^17.0.8":
-  version: 17.0.24
-  resolution: "@types/yargs@npm:17.0.24"
+"@types/yargs@npm:^17.0.33":
+  version: 17.0.33
+  resolution: "@types/yargs@npm:17.0.33"
   dependencies:
     "@types/yargs-parser": "npm:*"
-  checksum: 10/03d9a985cb9331b2194a52d57a66aad88bf46aa32b3968a71cc6f39fb05c74f0709f0dd3aa9c0b29099cfe670343e3b1bd2ac6df2abfab596ede4453a616f63f
+  checksum: 10/16f6681bf4d99fb671bf56029141ed01db2862e3db9df7fc92d8bea494359ac96a1b4b1c35a836d1e95e665fb18ad753ab2015fc0db663454e8fd4e5d5e2ef91
   languageName: node
   linkType: hard
 
@@ -2865,14 +2616,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"abbrev@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "abbrev@npm:2.0.0"
-  checksum: 10/ca0a54e35bea4ece0ecb68a47b312e1a9a6f772408d5bcb9051230aaa94b0460671c5b5c9cb3240eb5b7bc94c52476550eb221f65a0bbd0145bdc9f3113a6707
+"abbrev@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "abbrev@npm:3.0.1"
+  checksum: 10/ebd2c149dda6f543b66ce3779ea612151bb3aa9d0824f169773ee9876f1ca5a4e0adbcccc7eed048c04da7998e1825e2aa76fcca92d9e67dea50ac2b0a58dc2e
   languageName: node
   linkType: hard
 
-"accepts@npm:~1.3.4, accepts@npm:~1.3.5, accepts@npm:~1.3.8":
+"accepts@npm:~1.3.4, accepts@npm:~1.3.8":
   version: 1.3.8
   resolution: "accepts@npm:1.3.8"
   dependencies:
@@ -2882,70 +2633,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^8.0.0":
-  version: 8.2.0
-  resolution: "acorn-walk@npm:8.2.0"
-  checksum: 10/e69f7234f2adfeb16db3671429a7c80894105bd7534cb2032acf01bb26e6a847952d11a062d071420b43f8d82e33d2e57f26fe87d9cce0853e8143d8910ff1de
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^8.0.4, acorn@npm:^8.5.0":
-  version: 8.8.2
-  resolution: "acorn@npm:8.8.2"
-  bin:
-    acorn: bin/acorn
-  checksum: 10/b4e77d56d24d3e11a45d9ac8ae661b4e14a4af04ae33edbf1e6bf910887e5bb352cc60e9ea06a0944880e6b658f58c095d3b54e88e1921cb9319608b51085dd7
+"acorn-import-phases@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "acorn-import-phases@npm:1.0.4"
+  peerDependencies:
+    acorn: ^8.14.0
+  checksum: 10/471050ac7d9b61909c837b426de9eeef2958997f6277ad7dea88d5894fd9b3245d8ed4a225c2ca44f814dbb20688009db7a80e525e8196fc9e98c5285b66161d
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.14.0":
-  version: 8.14.0
-  resolution: "acorn@npm:8.14.0"
-  bin:
-    acorn: bin/acorn
-  checksum: 10/6df29c35556782ca9e632db461a7f97947772c6c1d5438a81f0c873a3da3a792487e83e404d1c6c25f70513e91aa18745f6eafb1fcc3a43ecd1920b21dd173d2
+"acorn-walk@npm:^8.0.0, acorn-walk@npm:^8.1.1":
+  version: 8.3.4
+  resolution: "acorn-walk@npm:8.3.4"
+  dependencies:
+    acorn: "npm:^8.11.0"
+  checksum: 10/871386764e1451c637bb8ab9f76f4995d408057e9909be6fb5ad68537ae3375d85e6a6f170b98989f44ab3ff6c74ad120bc2779a3d577606e7a0cd2b4efcaf77
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.8.2":
-  version: 8.11.3
-  resolution: "acorn@npm:8.11.3"
+"acorn@npm:^8.0.4, acorn@npm:^8.11.0, acorn@npm:^8.15.0, acorn@npm:^8.4.1":
+  version: 8.15.0
+  resolution: "acorn@npm:8.15.0"
   bin:
     acorn: bin/acorn
-  checksum: 10/b688e7e3c64d9bfb17b596e1b35e4da9d50553713b3b3630cf5690f2b023a84eac90c56851e6912b483fe60e8b4ea28b254c07e92f17ef83d72d78745a8352dd
+  checksum: 10/77f2de5051a631cf1729c090e5759148459cdb76b5f5c70f890503d629cf5052357b0ce783c0f976dd8a93c5150f59f6d18df1def3f502396a20f81282482fa4
   languageName: node
   linkType: hard
-
-"address@npm:^1.0.1, address@npm:^1.1.2":
-  version: 1.2.2
-  resolution: "address@npm:1.2.2"
-  checksum: 10/57d80a0c6ccadc8769ad3aeb130c1599e8aee86a8d25f671216c40df9b8489d6c3ef879bc2752b40d1458aa768f947c2d91e5b2fedfe63cf702c40afdfda9ba9
-  languageName: node
-  linkType: hard
-
-"adm-zip@npm:^0.5.16":
-  version: 0.5.16
-  resolution: "adm-zip@npm:0.5.16"
-  checksum: 10/e167d1b9e60cde37334efda828fa514680af9facbd4183952f36526390e5c7da9a90ca1e6880dfd3aba7b3517f1506c6178e0dc29cd630b26b98c795f97fc599
-  languageName: node
-  linkType: hard
-
-"agent-base@npm:^7.0.2, agent-base@npm:^7.1.0":
-  version: 7.1.0
-  resolution: "agent-base@npm:7.1.0"
-  dependencies:
-    debug: "npm:^4.3.4"
-  checksum: 10/f7828f991470a0cc22cb579c86a18cbae83d8a3cbed39992ab34fc7217c4d126017f1c74d0ab66be87f71455318a8ea3e757d6a37881b8d0f2a2c6aa55e5418f
+
+"adm-zip@npm:^0.5.16":
+  version: 0.5.16
+  resolution: "adm-zip@npm:0.5.16"
+  checksum: 10/e167d1b9e60cde37334efda828fa514680af9facbd4183952f36526390e5c7da9a90ca1e6880dfd3aba7b3517f1506c6178e0dc29cd630b26b98c795f97fc599
   languageName: node
   linkType: hard
 
-"aggregate-error@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "aggregate-error@npm:3.1.0"
-  dependencies:
-    clean-stack: "npm:^2.0.0"
-    indent-string: "npm:^4.0.0"
-  checksum: 10/1101a33f21baa27a2fa8e04b698271e64616b886795fd43c31068c07533c7b3facfcaf4e9e0cab3624bd88f729a592f1c901a1a229c9e490eafce411a8644b79
+"agent-base@npm:^7.1.0, agent-base@npm:^7.1.2":
+  version: 7.1.4
+  resolution: "agent-base@npm:7.1.4"
+  checksum: 10/79bef167247789f955aaba113bae74bf64aa1e1acca4b1d6bb444bdf91d82c3e07e9451ef6a6e2e35e8f71a6f97ce33e3d855a5328eb9fad1bc3cc4cfd031ed8
   languageName: node
   linkType: hard
 
@@ -2963,7 +2688,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv-keywords@npm:^3.4.1, ajv-keywords@npm:^3.5.2":
+"ajv-keywords@npm:^3.5.2":
   version: 3.5.2
   resolution: "ajv-keywords@npm:3.5.2"
   peerDependencies:
@@ -2983,7 +2708,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:8.12.0, ajv@npm:^8.0.0, ajv@npm:^8.9.0":
+"ajv@npm:8.12.0":
   version: 8.12.0
   resolution: "ajv@npm:8.12.0"
   dependencies:
@@ -2995,7 +2720,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^6.12.2, ajv@npm:^6.12.3, ajv@npm:^6.12.5":
+"ajv@npm:^6.12.3, ajv@npm:^6.12.5":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
   dependencies:
@@ -3007,6 +2732,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv@npm:^8.0.0, ajv@npm:^8.9.0":
+  version: 8.17.1
+  resolution: "ajv@npm:8.17.1"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.3"
+    fast-uri: "npm:^3.0.1"
+    json-schema-traverse: "npm:^1.0.0"
+    require-from-string: "npm:^2.0.2"
+  checksum: 10/ee3c62162c953e91986c838f004132b6a253d700f1e51253b99791e2dbfdb39161bc950ebdc2f156f8568035bb5ed8be7bd78289cd9ecbf3381fe8f5b82e3f33
+  languageName: node
+  linkType: hard
+
 "ansi-align@npm:^3.0.1":
   version: 3.0.1
   resolution: "ansi-align@npm:3.0.1"
@@ -3047,18 +2784,9 @@ __metadata:
   linkType: hard
 
 "ansi-regex@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "ansi-regex@npm:6.0.1"
-  checksum: 10/1ff8b7667cded1de4fa2c9ae283e979fc87036864317da86a2e546725f96406746411d0d85e87a2d12fa5abd715d90006de7fa4fa0477c92321ad3b4c7d4e169
-  languageName: node
-  linkType: hard
-
-"ansi-styles@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "ansi-styles@npm:3.2.1"
-  dependencies:
-    color-convert: "npm:^1.9.0"
-  checksum: 10/d85ade01c10e5dd77b6c89f34ed7531da5830d2cb5882c645f330079975b716438cd7ebb81d0d6e6b4f9c577f19ae41ab55f07f19786b02f9dfd9e0377395665
+  version: 6.2.2
+  resolution: "ansi-regex@npm:6.2.2"
+  checksum: 10/9b17ce2c6daecc75bcd5966b9ad672c23b184dc3ed9bf3c98a0702f0d2f736c15c10d461913568f2cf527a5e64291c7473358885dd493305c84a1cfed66ba94f
   languageName: node
   linkType: hard
 
@@ -3071,14 +2799,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ansi-styles@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "ansi-styles@npm:5.2.0"
+  checksum: 10/d7f4e97ce0623aea6bc0d90dcd28881ee04cba06c570b97fd3391bd7a268eedfd9d5e2dd4fdcbdd82b8105df5faf6f24aaedc08eaf3da898e702db5948f63469
+  languageName: node
+  linkType: hard
+
 "ansi-styles@npm:^6.1.0":
-  version: 6.2.1
-  resolution: "ansi-styles@npm:6.2.1"
-  checksum: 10/70fdf883b704d17a5dfc9cde206e698c16bcd74e7f196ab821511651aee4f9f76c9514bdfa6ca3a27b5e49138b89cb222a28caf3afe4567570139577f991df32
+  version: 6.2.3
+  resolution: "ansi-styles@npm:6.2.3"
+  checksum: 10/c49dad7639f3e48859bd51824c93b9eb0db628afc243c51c3dd2410c4a15ede1a83881c6c7341aa2b159c4f90c11befb38f2ba848c07c66c9f9de4bcd7cb9f30
   languageName: node
   linkType: hard
 
-"anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
+"anymatch@npm:~3.1.2":
   version: 3.1.3
   resolution: "anymatch@npm:3.1.3"
   dependencies:
@@ -3102,12 +2837,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"argparse@npm:^1.0.7":
-  version: 1.0.10
-  resolution: "argparse@npm:1.0.10"
-  dependencies:
-    sprintf-js: "npm:~1.0.2"
-  checksum: 10/c6a621343a553ff3779390bb5ee9c2263d6643ebcd7843227bdde6cc7adbed796eb5540ca98db19e3fd7b4714e1faa51551f8849b268bb62df27ddb15cbcd91e
+"arg@npm:^4.1.0":
+  version: 4.1.3
+  resolution: "arg@npm:4.1.3"
+  checksum: 10/969b491082f20cad166649fa4d2073ea9e974a4e5ac36247ca23d2e5a8b3cb12d60e9ff70a8acfe26d76566c71fd351ee5e6a9a6595157eb36f92b1fd64e1599
   languageName: node
   linkType: hard
 
@@ -3119,12 +2852,12 @@ __metadata:
   linkType: hard
 
 "array-buffer-byte-length@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "array-buffer-byte-length@npm:1.0.0"
+  version: 1.0.2
+  resolution: "array-buffer-byte-length@npm:1.0.2"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    is-array-buffer: "npm:^3.0.1"
-  checksum: 10/044e101ce150f4804ad19c51d6c4d4cfa505c5b2577bd179256e4aa3f3f6a0a5e9874c78cd428ee566ac574c8a04d7ce21af9fe52e844abfdccb82b33035a7c3
+    call-bound: "npm:^1.0.3"
+    is-array-buffer: "npm:^3.0.5"
+  checksum: 10/0ae3786195c3211b423e5be8dd93357870e6fb66357d81da968c2c39ef43583ef6eece1f9cb1caccdae4806739c65dea832b44b8593414313cd76a89795fca63
   languageName: node
   linkType: hard
 
@@ -3144,13 +2877,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-union@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "array-union@npm:2.1.0"
-  checksum: 10/5bee12395cba82da674931df6d0fea23c4aa4660cb3b338ced9f828782a65caa232573e6bf3968f23e0c5eb301764a382cef2f128b170a9dc59de0e36c39f98d
-  languageName: node
-  linkType: hard
-
 "array-uniq@npm:^1.0.1":
   version: 1.0.3
   resolution: "array-uniq@npm:1.0.3"
@@ -3194,17 +2920,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"at-least-node@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "at-least-node@npm:1.0.0"
-  checksum: 10/463e2f8e43384f1afb54bc68485c436d7622acec08b6fad269b421cb1d29cebb5af751426793d0961ed243146fe4dc983402f6d5a51b720b277818dbf6f2e49e
-  languageName: node
-  linkType: hard
-
-"available-typed-arrays@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "available-typed-arrays@npm:1.0.5"
-  checksum: 10/4d4d5e86ea0425696f40717882f66a570647b94ac8d273ddc7549a9b61e5da099e149bf431530ccbd776bd74e02039eb8b5edf426e3e2211ee61af16698a9064
+"available-typed-arrays@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "available-typed-arrays@npm:1.0.7"
+  dependencies:
+    possible-typed-array-names: "npm:^1.0.0"
+  checksum: 10/6c9da3a66caddd83c875010a1ca8ef11eac02ba15fb592dc9418b2b5e7b77b645fa7729380a92d9835c2f05f2ca1b6251f39b993e0feb3f1517c74fa1af02cab
   languageName: node
   linkType: hard
 
@@ -3216,100 +2937,57 @@ __metadata:
   linkType: hard
 
 "aws4@npm:^1.8.0":
-  version: 1.12.0
-  resolution: "aws4@npm:1.12.0"
-  checksum: 10/2b8455fe1eee87f0e7d5f32e81e7fec74dce060c72d03f528c8c631fa74209cef53aab6fede182ea17d0c9520cb1e5e3023c5fedb4f1139ae9f067fc720869a5
-  languageName: node
-  linkType: hard
-
-"babel-jest@npm:29.7.0":
-  version: 29.7.0
-  resolution: "babel-jest@npm:29.7.0"
-  dependencies:
-    "@jest/transform": "npm:^29.7.0"
-    "@types/babel__core": "npm:^7.1.14"
-    babel-plugin-istanbul: "npm:^6.1.1"
-    babel-preset-jest: "npm:^29.6.3"
-    chalk: "npm:^4.0.0"
-    graceful-fs: "npm:^4.2.9"
-    slash: "npm:^3.0.0"
-  peerDependencies:
-    "@babel/core": ^7.8.0
-  checksum: 10/8a0953bd813b3a8926008f7351611055548869e9a53dd36d6e7e96679001f71e65fd7dbfe253265c3ba6a4e630dc7c845cf3e78b17d758ef1880313ce8fba258
+  version: 1.13.2
+  resolution: "aws4@npm:1.13.2"
+  checksum: 10/290b9f84facbad013747725bfd8b4c42d0b3b04b5620d8418f0219832ef95a7dc597a4af7b1589ae7fce18bacde96f40911c3cda36199dd04d9f8e01f72fa50a
   languageName: node
   linkType: hard
 
-"babel-loader@npm:^9.2.1":
-  version: 9.2.1
-  resolution: "babel-loader@npm:9.2.1"
+"babel-loader@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "babel-loader@npm:10.0.0"
   dependencies:
-    find-cache-dir: "npm:^4.0.0"
-    schema-utils: "npm:^4.0.0"
+    find-up: "npm:^5.0.0"
   peerDependencies:
     "@babel/core": ^7.12.0
-    webpack: ">=5"
-  checksum: 10/f1f24ae3c22d488630629240b0eba9c935545f82ff843c214e8f8df66e266492b7a3d4cb34ef9c9721fb174ca222e900799951c3fd82199473bc6bac52ec03a3
-  languageName: node
-  linkType: hard
-
-"babel-plugin-istanbul@npm:^6.1.1":
-  version: 6.1.1
-  resolution: "babel-plugin-istanbul@npm:6.1.1"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.0.0"
-    "@istanbuljs/load-nyc-config": "npm:^1.0.0"
-    "@istanbuljs/schema": "npm:^0.1.2"
-    istanbul-lib-instrument: "npm:^5.0.4"
-    test-exclude: "npm:^6.0.0"
-  checksum: 10/ffd436bb2a77bbe1942a33245d770506ab2262d9c1b3c1f1da7f0592f78ee7445a95bc2efafe619dd9c1b6ee52c10033d6c7d29ddefe6f5383568e60f31dfe8d
-  languageName: node
-  linkType: hard
-
-"babel-plugin-jest-hoist@npm:^29.6.3":
-  version: 29.6.3
-  resolution: "babel-plugin-jest-hoist@npm:29.6.3"
-  dependencies:
-    "@babel/template": "npm:^7.3.3"
-    "@babel/types": "npm:^7.3.3"
-    "@types/babel__core": "npm:^7.1.14"
-    "@types/babel__traverse": "npm:^7.0.6"
-  checksum: 10/9bfa86ec4170bd805ab8ca5001ae50d8afcb30554d236ba4a7ffc156c1a92452e220e4acbd98daefc12bf0216fccd092d0a2efed49e7e384ec59e0597a926d65
+    webpack: ">=5.61.0"
+  checksum: 10/f22dc803e38a6b29cc61fbc3482f1f42a8787df2a43706dc937d328103ba6b947a223f67706b07af765d415664ad56e9fed00f85b524fe223f3ac3f00b03770b
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.10":
-  version: 0.4.10
-  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.10"
+"babel-plugin-polyfill-corejs2@npm:^0.4.14":
+  version: 0.4.14
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.14"
   dependencies:
-    "@babel/compat-data": "npm:^7.22.6"
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.1"
+    "@babel/compat-data": "npm:^7.27.7"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.5"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/9fb5e59a3235eba66fb05060b2a3ecd6923084f100df7526ab74b6272347d7adcf99e17366b82df36e592cde4e82fdb7ae24346a990eced76c7d504cac243400
+  checksum: 10/8ec00a1b821ccbfcc432630da66e98bc417f5301f4ce665269d50d245a18ad3ce8a8af2a007f28e3defcd555bb8ce65f16b0d4b6d131bd788e2b97d8b8953332
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.10.6":
-  version: 0.10.6
-  resolution: "babel-plugin-polyfill-corejs3@npm:0.10.6"
+"babel-plugin-polyfill-corejs3@npm:^0.13.0":
+  version: 0.13.0
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.13.0"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
-    core-js-compat: "npm:^3.38.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.5"
+    core-js-compat: "npm:^3.43.0"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/360ac9054a57a18c540059dc627ad5d84d15f79790cb3d84d19a02eec7188c67d08a07db789c3822d6f5df22d918e296d1f27c4055fec2e287d328f09ea8a78a
+  checksum: 10/aa36f9a09521404dd0569a4cbd5f88aa4b9abff59508749abde5d09d66c746012fb94ed1e6e2c8be3710939a2a4c6293ee3be889125d7611c93e5897d9e5babd
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-regenerator@npm:^0.6.1":
-  version: 0.6.1
-  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.1"
+"babel-plugin-polyfill-regenerator@npm:^0.6.5":
+  version: 0.6.5
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.5"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.1"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.5"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/9df4a8e9939dd419fed3d9ea26594b4479f2968f37c225e1b2aa463001d7721f5537740e6622909d2a570b61cec23256924a1701404fc9d6fd4474d3e845cedb
+  checksum: 10/ed1932fa9a31e0752fd10ebf48ab9513a654987cab1182890839523cb898559d24ae0578fdc475d9f995390420e64eeaa4b0427045b56949dace3c725bc66dbb
   languageName: node
   linkType: hard
 
@@ -3324,13 +3002,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-transform-cx-imports@workspace:packages/babel-plugin-transform-cx-imports":
+"babel-plugin-transform-cx-imports@npm:^26.0.1, babel-plugin-transform-cx-imports@npm:^26.1.0, babel-plugin-transform-cx-imports@workspace:*, babel-plugin-transform-cx-imports@workspace:packages/babel-plugin-transform-cx-imports":
   version: 0.0.0-use.local
   resolution: "babel-plugin-transform-cx-imports@workspace:packages/babel-plugin-transform-cx-imports"
   dependencies:
-    "@babel/core": "npm:^7.26.0"
-    "@babel/plugin-syntax-jsx": "npm:^7.25.9"
-    "@babel/preset-env": "npm:^7.26.0"
+    "@babel/core": "npm:^7.28.5"
+    "@babel/plugin-syntax-jsx": "npm:^7.27.1"
+    "@babel/preset-env": "npm:^7.28.5"
     mocha: "npm:^10.8.2"
   peerDependencies:
     "@babel/core": ^7.0.0-0
@@ -3348,67 +3026,48 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-transform-cx-jsx@workspace:packages/babel-plugin-transform-cx-jsx":
+"babel-plugin-transform-cx-jsx@npm:^26.1.0, babel-plugin-transform-cx-jsx@workspace:*, babel-plugin-transform-cx-jsx@workspace:packages/babel-plugin-transform-cx-jsx":
   version: 0.0.0-use.local
   resolution: "babel-plugin-transform-cx-jsx@workspace:packages/babel-plugin-transform-cx-jsx"
   dependencies:
-    "@babel/core": "npm:^7.26.0"
-    "@babel/plugin-syntax-jsx": "npm:^7.25.9"
-    "@babel/preset-env": "npm:^7.26.0"
+    "@babel/core": "npm:^7.28.5"
+    "@babel/plugin-syntax-jsx": "npm:^7.27.1"
+    "@babel/preset-env": "npm:^7.28.5"
     mocha: "npm:^10.8.2"
   peerDependencies:
     "@babel/core": ^7.0.0
   languageName: unknown
   linkType: soft
 
-"babel-preset-current-node-syntax@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "babel-preset-current-node-syntax@npm:1.0.1"
-  dependencies:
-    "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
-    "@babel/plugin-syntax-bigint": "npm:^7.8.3"
-    "@babel/plugin-syntax-class-properties": "npm:^7.8.3"
-    "@babel/plugin-syntax-import-meta": "npm:^7.8.3"
-    "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.8.3"
-    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
-    "@babel/plugin-syntax-numeric-separator": "npm:^7.8.3"
-    "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
-    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
-    "@babel/plugin-syntax-top-level-await": "npm:^7.8.3"
+"babel-preset-cx-env@npm:^24.0.0":
+  version: 24.0.0
+  resolution: "babel-preset-cx-env@npm:24.0.0"
+  dependencies:
+    "@babel/plugin-proposal-function-bind": "npm:^7.23.3"
+    "@babel/plugin-transform-react-jsx": "npm:^7.23.4"
+    babel-plugin-transform-cx-imports: "npm:^21.3.0"
+    babel-plugin-transform-cx-jsx: "npm:^21.3.0"
   peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 10/94561959cb12bfa80867c9eeeace7c3d48d61707d33e55b4c3fdbe82fc745913eb2dbfafca62aef297421b38aadcb58550e5943f50fbcebbeefd70ce2bed4b74
+    "@babel/core": ^7.0.0-0
+    "@babel/preset-env": ^7.0.0-0
+  checksum: 10/4c27256737abdcc32163c35614e7d4ae49254f9ec2fcafad7ea20b9b17481eb8147b9c1de100f5251e7995d109ed9da14646316fc738d5598f3cb9413d77d835
   languageName: node
   linkType: hard
 
-"babel-preset-cx-env@npm:^24.0.0, babel-preset-cx-env@workspace:packages/babel-preset-cx-env":
+"babel-preset-cx-env@workspace:*, babel-preset-cx-env@workspace:packages/babel-preset-cx-env":
   version: 0.0.0-use.local
   resolution: "babel-preset-cx-env@workspace:packages/babel-preset-cx-env"
   dependencies:
-    "@babel/plugin-proposal-function-bind": "npm:^7.25.9"
-    "@babel/plugin-transform-react-jsx": "npm:^7.25.9"
-    babel-plugin-transform-cx-imports: "npm:^21.3.0"
-    babel-plugin-transform-cx-jsx: "npm:^21.3.0"
+    "@babel/plugin-proposal-function-bind": "npm:^7.27.1"
+    "@babel/plugin-transform-react-jsx": "npm:^7.27.1"
+    babel-plugin-transform-cx-imports: "npm:^26.1.0"
+    babel-plugin-transform-cx-jsx: "npm:^26.1.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
     "@babel/preset-env": ^7.0.0-0
   languageName: unknown
   linkType: soft
 
-"babel-preset-jest@npm:^29.6.3":
-  version: 29.6.3
-  resolution: "babel-preset-jest@npm:29.6.3"
-  dependencies:
-    babel-plugin-jest-hoist: "npm:^29.6.3"
-    babel-preset-current-node-syntax: "npm:^1.0.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 10/aa4ff2a8a728d9d698ed521e3461a109a1e66202b13d3494e41eea30729a5e7cc03b3a2d56c594423a135429c37bf63a9fa8b0b9ce275298be3095a88c69f6fb
-  languageName: node
-  linkType: hard
-
 "balanced-match@npm:^1.0.0":
   version: 1.0.2
   resolution: "balanced-match@npm:1.0.2"
@@ -3423,6 +3082,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"baseline-browser-mapping@npm:^2.8.25":
+  version: 2.8.31
+  resolution: "baseline-browser-mapping@npm:2.8.31"
+  bin:
+    baseline-browser-mapping: dist/cli.js
+  checksum: 10/aefad7523ab6e93a28d278c2faae08b934d6f8899f9b6868a50cccb2e2cbb12bad0f5eda3ccb70d7f2e2f9e58cc1973050523e867e6bb0793ab0c63e194956b6
+  languageName: node
+  linkType: hard
+
+"baseline-browser-mapping@npm:^2.8.3":
+  version: 2.8.6
+  resolution: "baseline-browser-mapping@npm:2.8.6"
+  bin:
+    baseline-browser-mapping: dist/cli.js
+  checksum: 10/05c89fb1aa864a2a3b5fc9b7f3a4ed3e102ae4d6fa9ccf96a2b8f57fd0c995fb8b4e9ea3152b34c5661533a198026b713e1be415e96473322705b2fbd8dddc48
+  languageName: node
+  linkType: hard
+
 "batch@npm:0.6.1":
   version: 0.6.1
   resolution: "batch@npm:0.6.1"
@@ -3443,44 +3120,43 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "benchmark@workspace:benchmark"
   dependencies:
-    "@babel/core": "npm:^7.26.0"
-    "@babel/preset-env": "npm:^7.26.0"
-    "@babel/preset-typescript": "npm:^7.26.0"
-    "@types/node": "npm:^22.10.1"
-    "@types/react": "npm:^18.3.14"
-    babel-loader: "npm:^9.2.1"
+    "@babel/core": "npm:^7.28.5"
+    "@babel/preset-env": "npm:^7.28.5"
+    "@babel/preset-typescript": "npm:^7.28.5"
+    "@types/node": "npm:^25.0.3"
+    "@types/react": "npm:^19.2.7"
+    babel-loader: "npm:^10.0.0"
     babel-plugin-transform-cx-imports: "npm:^21.3.0"
     babel-plugin-transform-cx-jsx: "npm:^21.3.0"
     babel-preset-cx-env: "npm:^24.0.0"
     casual: "npm:^1.6.2"
     copy-webpack-plugin: "npm:^12.0.2"
-    core-js: "npm:^3.39.0"
+    core-js: "npm:^3.47.0"
     css-loader: "npm:^7.1.2"
-    cx: "npm:^25.4.1"
-    cx-react: "npm:^24.7.1"
+    cx: "workspace:*"
+    cx-react: "workspace:*"
     file-loader: "npm:^6.2.0"
-    html-webpack-plugin: "npm:^5.6.3"
+    html-webpack-plugin: "npm:^5.6.5"
     if-loader: "npm:^1.0.2"
     inline-manifest-webpack-plugin: "npm:^4.0.2"
     intl: "npm:^1.2.5"
     json-loader: "npm:^0.5.7"
     mini-css-extract-plugin: "npm:^2.9.2"
     modify-babel-preset: "npm:^3.2.1"
-    react: "npm:^18.3.1"
-    react-dev-utils: "npm:^12.0.1"
-    react-dom: "npm:^18.3.1"
+    react: "npm:^19.2.3"
+    react-dom: "npm:^19.2.3"
     sass: "npm:^1.77.8"
-    sass-loader: "npm:^16.0.1"
+    sass-loader: "npm:^16.0.6"
     serve: "npm:^14.2.4"
     style-loader: "npm:^4.0.0"
     svg-url-loader: "npm:^8.0.0"
     url-loader: "npm:^4.1.1"
-    webpack: "npm:^5.97.1"
+    webpack: "npm:^5.103.0"
     webpack-bundle-analyzer: "npm:^4.10.2"
     webpack-cleanup-plugin: "npm:^0.5.1"
     webpack-cli: "npm:^5.1.4"
     webpack-combine-loaders: "npm:^2.0.4"
-    webpack-dev-server: "npm:^5.1.0"
+    webpack-dev-server: "npm:^5.2.2"
     webpack-merge: "npm:^6.0.1"
     whatwg-fetch: "npm:^3.6.20"
   languageName: unknown
@@ -3494,9 +3170,9 @@ __metadata:
   linkType: hard
 
 "binary-extensions@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "binary-extensions@npm:2.2.0"
-  checksum: 10/ccd267956c58d2315f5d3ea6757cf09863c5fc703e50fbeb13a7dc849b812ef76e3cf9ca8f35a0c48498776a7478d7b4a0418e1e2b8cb9cb9731f2922aaad7f8
+  version: 2.3.0
+  resolution: "binary-extensions@npm:2.3.0"
+  checksum: 10/bcad01494e8a9283abf18c1b967af65ee79b0c6a9e6fcfafebfe91dbe6e0fc7272bafb73389e198b310516ae04f7ad17d79aacf6cb4c0d5d5202a7e2e52c7d98
   languageName: node
   linkType: hard
 
@@ -3521,12 +3197,12 @@ __metadata:
   linkType: hard
 
 "bonjour-service@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "bonjour-service@npm:1.2.1"
+  version: 1.3.0
+  resolution: "bonjour-service@npm:1.3.0"
   dependencies:
     fast-deep-equal: "npm:^3.1.3"
     multicast-dns: "npm:^7.2.5"
-  checksum: 10/8350d135ab8dd998a829136984d7f74bfc0667b162ab99ac98bae54d72ff7a6003c6fb7911739dfba7c56a113bd6ab06a4d4fe6719b18e66592c345663e7d923
+  checksum: 10/63d516d88f15fa4b89e247e6ff7d81c21a3ef5ed035b0b043c2b38e0c839f54f4ce58fbf9b7668027bf538ac86de366939dbb55cca63930f74eeea1e278c9585
   languageName: node
   linkType: hard
 
@@ -3554,30 +3230,30 @@ __metadata:
   linkType: hard
 
 "brace-expansion@npm:^1.0.0, brace-expansion@npm:^1.1.7":
-  version: 1.1.11
-  resolution: "brace-expansion@npm:1.1.11"
+  version: 1.1.12
+  resolution: "brace-expansion@npm:1.1.12"
   dependencies:
     balanced-match: "npm:^1.0.0"
     concat-map: "npm:0.0.1"
-  checksum: 10/faf34a7bb0c3fcf4b59c7808bc5d2a96a40988addf2e7e09dfbb67a2251800e0d14cd2bfc1aa79174f2f5095c54ff27f46fb1289fe2d77dac755b5eb3434cc07
+  checksum: 10/12cb6d6310629e3048cadb003e1aca4d8c9bb5c67c3c321bafdd7e7a50155de081f78ea3e0ed92ecc75a9015e784f301efc8132383132f4f7904ad1ac529c562
   languageName: node
   linkType: hard
 
 "brace-expansion@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "brace-expansion@npm:2.0.1"
+  version: 2.0.2
+  resolution: "brace-expansion@npm:2.0.2"
   dependencies:
     balanced-match: "npm:^1.0.0"
-  checksum: 10/a61e7cd2e8a8505e9f0036b3b6108ba5e926b4b55089eeb5550cd04a471fe216c96d4fe7e4c7f995c728c554ae20ddfc4244cad10aef255e72b62930afd233d1
+  checksum: 10/01dff195e3646bc4b0d27b63d9bab84d2ebc06121ff5013ad6e5356daa5a9d6b60fa26cf73c74797f2dc3fbec112af13578d51f75228c1112b26c790a87b0488
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.2, braces@npm:~3.0.2":
-  version: 3.0.2
-  resolution: "braces@npm:3.0.2"
+"braces@npm:^3.0.3, braces@npm:~3.0.2":
+  version: 3.0.3
+  resolution: "braces@npm:3.0.3"
   dependencies:
-    fill-range: "npm:^7.0.1"
-  checksum: 10/966b1fb48d193b9d155f810e5efd1790962f2c4e0829f8440b8ad236ba009222c501f70185ef732fef17a4c490bb33a03b90dab0631feafbdf447da91e8165b1
+    fill-range: "npm:^7.1.1"
+  checksum: 10/fad11a0d4697a27162840b02b1fad249c1683cbc510cd5bf1a471f2f8085c046d41094308c577a50a03a579dd99d5a6b3724c4b5e8b14df2c4443844cfcda2c6
   languageName: node
   linkType: hard
 
@@ -3588,68 +3264,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.18.1, browserslist@npm:^4.21.3":
-  version: 4.21.5
-  resolution: "browserslist@npm:4.21.5"
-  dependencies:
-    caniuse-lite: "npm:^1.0.30001449"
-    electron-to-chromium: "npm:^1.4.284"
-    node-releases: "npm:^2.0.8"
-    update-browserslist-db: "npm:^1.0.10"
-  bin:
-    browserslist: cli.js
-  checksum: 10/560ec095ab4fa878f611ddf29038193d3a40ce69282dd15e633bcb9523fa25122e566d34192ab45e261a637d768884e7318cb3545533720469ee8f10d10c3298
-  languageName: node
-  linkType: hard
-
-"browserslist@npm:^4.22.2":
-  version: 4.22.2
-  resolution: "browserslist@npm:4.22.2"
-  dependencies:
-    caniuse-lite: "npm:^1.0.30001565"
-    electron-to-chromium: "npm:^1.4.601"
-    node-releases: "npm:^2.0.14"
-    update-browserslist-db: "npm:^1.0.13"
-  bin:
-    browserslist: cli.js
-  checksum: 10/e3590793db7f66ad3a50817e7b7f195ce61e029bd7187200244db664bfbe0ac832f784e4f6b9c958aef8ea4abe001ae7880b7522682df521f4bc0a5b67660b5e
-  languageName: node
-  linkType: hard
-
-"browserslist@npm:^4.23.3":
-  version: 4.23.3
-  resolution: "browserslist@npm:4.23.3"
+"browserslist@npm:^4.24.0, browserslist@npm:^4.25.3":
+  version: 4.26.2
+  resolution: "browserslist@npm:4.26.2"
   dependencies:
-    caniuse-lite: "npm:^1.0.30001646"
-    electron-to-chromium: "npm:^1.5.4"
-    node-releases: "npm:^2.0.18"
-    update-browserslist-db: "npm:^1.1.0"
+    baseline-browser-mapping: "npm:^2.8.3"
+    caniuse-lite: "npm:^1.0.30001741"
+    electron-to-chromium: "npm:^1.5.218"
+    node-releases: "npm:^2.0.21"
+    update-browserslist-db: "npm:^1.1.3"
   bin:
     browserslist: cli.js
-  checksum: 10/e266d18c6c6c5becf9a1a7aa264477677b9796387972e8fce34854bb33dc1666194dc28389780e5dc6566e68a95e87ece2ce222e1c4ca93c2b75b61dfebd5f1c
+  checksum: 10/7f732f1a9c18c510aa146270d704b7b1acab52c9922147d453eecd70c926f21d97c7ac10f5303668d444fa60bd3b8778a63a797be249b0d348af4c3a644fa530
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.24.0, browserslist@npm:^4.24.2":
-  version: 4.24.2
-  resolution: "browserslist@npm:4.24.2"
+"browserslist@npm:^4.26.3":
+  version: 4.28.0
+  resolution: "browserslist@npm:4.28.0"
   dependencies:
-    caniuse-lite: "npm:^1.0.30001669"
-    electron-to-chromium: "npm:^1.5.41"
-    node-releases: "npm:^2.0.18"
-    update-browserslist-db: "npm:^1.1.1"
+    baseline-browser-mapping: "npm:^2.8.25"
+    caniuse-lite: "npm:^1.0.30001754"
+    electron-to-chromium: "npm:^1.5.249"
+    node-releases: "npm:^2.0.27"
+    update-browserslist-db: "npm:^1.1.4"
   bin:
     browserslist: cli.js
-  checksum: 10/f8a9d78bbabe466c57ffd5c50a9e5582a5df9aa68f43078ca62a9f6d0d6c70ba72eca72d0a574dbf177cf55cdca85a46f7eb474917a47ae5398c66f8b76f7d1c
-  languageName: node
-  linkType: hard
-
-"bser@npm:2.1.1":
-  version: 2.1.1
-  resolution: "bser@npm:2.1.1"
-  dependencies:
-    node-int64: "npm:^0.4.0"
-  checksum: 10/edba1b65bae682450be4117b695997972bd9a3c4dfee029cab5bcb72ae5393a79a8f909b8bc77957eb0deec1c7168670f18f4d5c556f46cdd3bca5f3b3a8d020
+  checksum: 10/59dc88f8d950e44a064361cb874f486e532a8ba932e0cf549aee8b36dd2b791da2bc11f36c1cf820ebb9c1f3250b100f8c56364dd6e86dbc90495af424100e19
   languageName: node
   linkType: hard
 
@@ -3693,11 +3334,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacache@npm:^18.0.0":
-  version: 18.0.1
-  resolution: "cacache@npm:18.0.1"
+"cacache@npm:^19.0.1":
+  version: 19.0.1
+  resolution: "cacache@npm:19.0.1"
   dependencies:
-    "@npmcli/fs": "npm:^3.1.0"
+    "@npmcli/fs": "npm:^4.0.0"
     fs-minipass: "npm:^3.0.0"
     glob: "npm:^10.2.2"
     lru-cache: "npm:^10.0.1"
@@ -3705,46 +3346,25 @@ __metadata:
     minipass-collect: "npm:^2.0.1"
     minipass-flush: "npm:^1.0.5"
     minipass-pipeline: "npm:^1.2.4"
-    p-map: "npm:^4.0.0"
-    ssri: "npm:^10.0.0"
-    tar: "npm:^6.1.11"
-    unique-filename: "npm:^3.0.0"
-  checksum: 10/aecafd368fbfb2fc0cda1f2f831fe5a1d8161d2121317c92ac089bcd985085e8a588e810b4471e69946f91c6d2661849400e963231563c519aa1e3dac2cf6187
-  languageName: node
-  linkType: hard
-
-"call-bind-apply-helpers@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "call-bind-apply-helpers@npm:1.0.0"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    function-bind: "npm:^1.1.2"
-  checksum: 10/853e9c30632a356ad0f66037b65f6c45eabecb5570012b6be53f2d83f03c61c845fcb0e4eb5ff8a0d7e3877d36588950d822d4beb742c9cfa90f4bf62a9fe960
+    p-map: "npm:^7.0.2"
+    ssri: "npm:^12.0.0"
+    tar: "npm:^7.4.3"
+    unique-filename: "npm:^4.0.0"
+  checksum: 10/ea026b27b13656330c2bbaa462a88181dcaa0435c1c2e705db89b31d9bdf7126049d6d0445ba746dca21454a0cfdf1d6f47fd39d34c8c8435296b30bc5738a13
   languageName: node
   linkType: hard
 
-"call-bind@npm:^1.0.0, call-bind@npm:^1.0.2":
+"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2":
   version: 1.0.2
-  resolution: "call-bind@npm:1.0.2"
-  dependencies:
-    function-bind: "npm:^1.1.1"
-    get-intrinsic: "npm:^1.0.2"
-  checksum: 10/ca787179c1cbe09e1697b56ad499fd05dc0ae6febe5081d728176ade699ea6b1589240cb1ff1fe11fcf9f61538c1af60ad37e8eb2ceb4ef21cd6085dfd3ccedd
-  languageName: node
-  linkType: hard
-
-"call-bind@npm:^1.0.4, call-bind@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "call-bind@npm:1.0.5"
+  resolution: "call-bind-apply-helpers@npm:1.0.2"
   dependencies:
+    es-errors: "npm:^1.3.0"
     function-bind: "npm:^1.1.2"
-    get-intrinsic: "npm:^1.2.1"
-    set-function-length: "npm:^1.1.1"
-  checksum: 10/246d44db6ef9bbd418828dbd5337f80b46be4398d522eded015f31554cbb2ea33025b0203b75c7ab05a1a255b56ef218880cca1743e4121e306729f9e414da39
+  checksum: 10/00482c1f6aa7cfb30fb1dbeb13873edf81cfac7c29ed67a5957d60635a56b2a4a480f1016ddbdb3395cc37900d46037fb965043a51c5c789ffeab4fc535d18b5
   languageName: node
   linkType: hard
 
-"call-bind@npm:^1.0.7":
+"call-bind@npm:^1.0.0, call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.7, call-bind@npm:^1.0.8":
   version: 1.0.8
   resolution: "call-bind@npm:1.0.8"
   dependencies:
@@ -3756,10 +3376,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"callsites@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "callsites@npm:3.1.0"
-  checksum: 10/072d17b6abb459c2ba96598918b55868af677154bec7e73d222ef95a8fdb9bbf7dae96a8421085cdad8cd190d86653b5b6dc55a4484f2e5b2e27d5e0c3fc15b3
+"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3, call-bound@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "call-bound@npm:1.0.4"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.2"
+    get-intrinsic: "npm:^1.3.0"
+  checksum: 10/ef2b96e126ec0e58a7ff694db43f4d0d44f80e641370c21549ed911fecbdbc2df3ebc9bddad918d6bbdefeafb60bb3337902006d5176d72bcd2da74820991af7
   languageName: node
   linkType: hard
 
@@ -3773,13 +3396,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:^5.3.1":
-  version: 5.3.1
-  resolution: "camelcase@npm:5.3.1"
-  checksum: 10/e6effce26b9404e3c0f301498184f243811c30dfe6d0b9051863bd8e4034d09c8c2923794f280d6827e5aa055f6c434115ff97864a16a963366fb35fd673024b
-  languageName: node
-  linkType: hard
-
 "camelcase@npm:^6.0.0":
   version: 6.3.0
   resolution: "camelcase@npm:6.3.0"
@@ -3794,31 +3410,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001449":
-  version: 1.0.30001482
-  resolution: "caniuse-lite@npm:1.0.30001482"
-  checksum: 10/a0562c1f83e00a3c0aef2db58e76dbe6fcaee2086ed91ad45e57bb8f3af13a853c171e0609feeeb44554d03713a11c0cb31697a8cb047a9926b5eea3fb46e92f
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001565":
-  version: 1.0.30001572
-  resolution: "caniuse-lite@npm:1.0.30001572"
-  checksum: 10/cf27b354c0af58d5468cdc0ecea5bff381bc382378016b36b05790929f80e321ee712470a536911dee82e946ad4be246a21326835f1da599c6ee12ec150ae8b7
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001646":
-  version: 1.0.30001655
-  resolution: "caniuse-lite@npm:1.0.30001655"
-  checksum: 10/98e80bdb5a5e4ac1738df7df14379a51aed2fcf3402b18361ac4902ac8afacf35920498afd0bfb71d6902ad4ab4ccbf2d09c792ec3a4925c2e3d186b803f6bc7
+"caniuse-lite@npm:^1.0.30001741":
+  version: 1.0.30001743
+  resolution: "caniuse-lite@npm:1.0.30001743"
+  checksum: 10/e55b13b4a547c9f610a68d5f5668a3239ada4a4aef5d198860397757ab7c03a5b0590675b7e82c5d3d57316b40499e1da52decb08a97ef3066a338871bbb5c37
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001669":
-  version: 1.0.30001687
-  resolution: "caniuse-lite@npm:1.0.30001687"
-  checksum: 10/0b6a064d5df185ec60b842dba5a27d2c54a66967b7f89571bfd0a8256f0863b1f2a910da6a19ed1b8f534bedf0663cae90309a4a6899bba2286205d459b32f95
+"caniuse-lite@npm:^1.0.30001754":
+  version: 1.0.30001757
+  resolution: "caniuse-lite@npm:1.0.30001757"
+  checksum: 10/2efcb3614a6e2618727e6ae7fc76668496650605010a7471128885cc7d8d6c789a94154ee78cb7907719e1c29b6d43bb5e14937e25e28b774f9b8dde51191968
   languageName: node
   linkType: hard
 
@@ -3848,25 +3450,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:5.0.1":
-  version: 5.0.1
-  resolution: "chalk@npm:5.0.1"
-  checksum: 10/fed38a27c848ed4111411ecd7c03bc79743f0abd4c52238f2ac969be9b8e88f41b17b313165a883ad3bd7608b583fef0b440a8f814c05fe2e1e0de077631fab1
-  languageName: node
-  linkType: hard
-
-"chalk@npm:^2.0.0, chalk@npm:^2.4.2":
-  version: 2.4.2
-  resolution: "chalk@npm:2.4.2"
-  dependencies:
-    ansi-styles: "npm:^3.2.1"
-    escape-string-regexp: "npm:^1.0.5"
-    supports-color: "npm:^5.3.0"
-  checksum: 10/3d1d103433166f6bfe82ac75724951b33769675252d8417317363ef9d54699b7c3b2d46671b772b893a8e50c3ece70c4b933c73c01e81bc60ea4df9b55afa303
-  languageName: node
-  linkType: hard
-
-"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
+"chalk@npm:^4.1.2":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -3876,13 +3460,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^5.0.1":
-  version: 5.2.0
-  resolution: "chalk@npm:5.2.0"
-  checksum: 10/daadc187314c851cd94f1058dd870a2dd351dfaef8cf69048977fc56bce120f02f7aca77eb7ca88bf7a37ab6c15922e12b43f4ffa885f4fd2d9e15dd14c61a1b
-  languageName: node
-  linkType: hard
-
 "charenc@npm:0.0.2":
   version: 0.0.2
   resolution: "charenc@npm:0.0.2"
@@ -3890,25 +3467,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.2":
-  version: 3.5.3
-  resolution: "chokidar@npm:3.5.3"
-  dependencies:
-    anymatch: "npm:~3.1.2"
-    braces: "npm:~3.0.2"
-    fsevents: "npm:~2.3.2"
-    glob-parent: "npm:~5.1.2"
-    is-binary-path: "npm:~2.1.0"
-    is-glob: "npm:~4.0.1"
-    normalize-path: "npm:~3.0.0"
-    readdirp: "npm:~3.6.0"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10/863e3ff78ee7a4a24513d2a416856e84c8e4f5e60efbe03e8ab791af1a183f569b62fc6f6b8044e2804966cb81277ddbbc1dc374fba3265bd609ea8efd62f5b3
-  languageName: node
-  linkType: hard
-
 "chokidar@npm:^3.5.3, chokidar@npm:^3.6.0":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
@@ -3928,40 +3486,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chownr@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "chownr@npm:2.0.0"
-  checksum: 10/c57cf9dd0791e2f18a5ee9c1a299ae6e801ff58fee96dc8bfd0dcb4738a6ce58dd252a3605b1c93c6418fe4f9d5093b28ffbf4d66648cb2a9c67eaef9679be2f
+"chokidar@npm:^4.0.0, chokidar@npm:^4.0.1":
+  version: 4.0.3
+  resolution: "chokidar@npm:4.0.3"
+  dependencies:
+    readdirp: "npm:^4.0.1"
+  checksum: 10/bf2a575ea5596000e88f5db95461a9d59ad2047e939d5a4aac59dd472d126be8f1c1ff3c7654b477cf532d18f42a97279ef80ee847972fd2a25410bf00b80b59
+  languageName: node
+  linkType: hard
+
+"chownr@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "chownr@npm:3.0.0"
+  checksum: 10/b63cb1f73d171d140a2ed8154ee6566c8ab775d3196b0e03a2a94b5f6a0ce7777ee5685ca56849403c8d17bd457a6540672f9a60696a6137c7a409097495b82c
   languageName: node
   linkType: hard
 
 "chrome-trace-event@npm:^1.0.2":
-  version: 1.0.3
-  resolution: "chrome-trace-event@npm:1.0.3"
-  checksum: 10/b5fbdae5bf00c96fa3213de919f2b2617a942bfcb891cdf735fbad2a6f4f3c25d42e3f2b1703328619d352c718b46b9e18999fd3af7ef86c26c91db6fae1f0da
+  version: 1.0.4
+  resolution: "chrome-trace-event@npm:1.0.4"
+  checksum: 10/1762bed739774903bf5915fe3045c3120fc3c7f7d929d88e566447ea38944937a6370ccb687278318c43c24f837ad22dac780bed67c066336815557b8cf558c6
   languageName: node
   linkType: hard
 
-"ci-info@npm:^3.2.0":
-  version: 3.8.0
-  resolution: "ci-info@npm:3.8.0"
-  checksum: 10/b00e9313c1f7042ca8b1297c157c920d6d69f0fbad7b867910235676df228c4b4f4df33d06cacae37f9efba7a160b0a167c6be85492b419ef71d85660e60606b
+"ci-info@npm:^4.2.0":
+  version: 4.3.0
+  resolution: "ci-info@npm:4.3.0"
+  checksum: 10/01e359032a34782fa2503530dd350c3ffaecede7d9ea0b120efa2ddda4c8dc80d8c2566caf1ea2287c739fad2bf277c65f70063a21f31f66203b889039c70eea
   languageName: node
   linkType: hard
 
 "clean-css@npm:^5.2.2":
-  version: 5.3.2
-  resolution: "clean-css@npm:5.3.2"
+  version: 5.3.3
+  resolution: "clean-css@npm:5.3.3"
   dependencies:
     source-map: "npm:~0.6.0"
-  checksum: 10/efd9efbf400f38a12f99324bad5359bdd153211b048721e4d4ddb629a88865dff3012dca547a14bdd783d78ccf064746e39fd91835546a08e2d811866aff0857
-  languageName: node
-  linkType: hard
-
-"clean-stack@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "clean-stack@npm:2.2.0"
-  checksum: 10/2ac8cd2b2f5ec986a3c743935ec85b07bc174d5421a5efc8017e1f146a1cf5f781ae962618f416352103b32c9cd7e203276e8c28241bbe946160cab16149fb68
+  checksum: 10/2db1ae37b384c8ff0a06a12bfa80f56cc02b4abcaaf340db98c0ae88a61dd67c856653fd8135ace6eb0ec13aeab3089c425d2e4238d2a2ad6b6917e6ccc74729
   languageName: node
   linkType: hard
 
@@ -4014,6 +3574,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cliui@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "cliui@npm:8.0.1"
+  dependencies:
+    string-width: "npm:^4.2.0"
+    strip-ansi: "npm:^6.0.1"
+    wrap-ansi: "npm:^7.0.0"
+  checksum: 10/eaa5561aeb3135c2cddf7a3b3f562fc4238ff3b3fc666869ef2adf264be0f372136702f16add9299087fb1907c2e4ec5dbfe83bd24bce815c70a80c6c1a2e950
+  languageName: node
+  linkType: hard
+
 "clone-deep@npm:^4.0.1":
   version: 4.0.1
   resolution: "clone-deep@npm:4.0.1"
@@ -4026,18 +3597,9 @@ __metadata:
   linkType: hard
 
 "codemirror@npm:^5.65.18":
-  version: 5.65.18
-  resolution: "codemirror@npm:5.65.18"
-  checksum: 10/223a3b3a5b50f5dfa9bb26318a67935c6e38320075a10189156695e88690ac376f31caecb6cf80b3ee4b8ca6f5542a0ba040c0be2e6d2b213fe13c01160ec1f7
-  languageName: node
-  linkType: hard
-
-"color-convert@npm:^1.9.0":
-  version: 1.9.3
-  resolution: "color-convert@npm:1.9.3"
-  dependencies:
-    color-name: "npm:1.1.3"
-  checksum: 10/ffa319025045f2973919d155f25e7c00d08836b6b33ea2d205418c59bd63a665d713c52d9737a9e0fe467fb194b40fbef1d849bae80d674568ee220a31ef3d10
+  version: 5.65.20
+  resolution: "codemirror@npm:5.65.20"
+  checksum: 10/62598c706bec992c5eb007dd233b4a06f29c91245d74f907246e094892c062203b11af0a394ea35064605613c80fc6d8168f6311f2cf394aa88154c75f7f6ad2
   languageName: node
   linkType: hard
 
@@ -4050,13 +3612,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:1.1.3":
-  version: 1.1.3
-  resolution: "color-name@npm:1.1.3"
-  checksum: 10/09c5d3e33d2105850153b14466501f2bfb30324a2f76568a408763a3b7433b0e50e5b4ab1947868e65cb101bb7cb75029553f2c333b6d4b8138a73fcc133d69d
-  languageName: node
-  linkType: hard
-
 "color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
@@ -4108,13 +3663,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"common-path-prefix@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "common-path-prefix@npm:3.0.0"
-  checksum: 10/09c180e8d8495d42990d617f4d4b7522b5da20f6b236afe310192d401d1da8147a7835ae1ea37797ba0c2238ef3d06f3492151591451df34539fdb4b2630f2b3
-  languageName: node
-  linkType: hard
-
 "commondir@npm:^1.0.1":
   version: 1.0.1
   resolution: "commondir@npm:1.0.1"
@@ -4122,7 +3670,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compressible@npm:~2.0.16":
+"compressible@npm:~2.0.18":
   version: 2.0.18
   resolution: "compressible@npm:2.0.18"
   dependencies:
@@ -4131,18 +3679,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compression@npm:1.7.4, compression@npm:^1.7.4":
-  version: 1.7.4
-  resolution: "compression@npm:1.7.4"
+"compression@npm:1.8.1, compression@npm:^1.7.4":
+  version: 1.8.1
+  resolution: "compression@npm:1.8.1"
   dependencies:
-    accepts: "npm:~1.3.5"
-    bytes: "npm:3.0.0"
-    compressible: "npm:~2.0.16"
+    bytes: "npm:3.1.2"
+    compressible: "npm:~2.0.18"
     debug: "npm:2.6.9"
-    on-headers: "npm:~1.0.2"
-    safe-buffer: "npm:5.1.2"
+    negotiator: "npm:~0.6.4"
+    on-headers: "npm:~1.1.0"
+    safe-buffer: "npm:5.2.1"
     vary: "npm:~1.1.2"
-  checksum: 10/469cd097908fe1d3ff146596d4c24216ad25eabb565c5456660bdcb3a14c82ebc45c23ce56e19fc642746cf407093b55ab9aa1ac30b06883b27c6c736e6383c2
+  checksum: 10/e7552bfbd780f2003c6fe8decb44561f5cc6bc82f0c61e81122caff5ec656f37824084f52155b1e8ef31d7656cecbec9a2499b7a68e92e20780ffb39b479abb7
   languageName: node
   linkType: hard
 
@@ -4183,13 +3731,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.7.0":
-  version: 1.9.0
-  resolution: "convert-source-map@npm:1.9.0"
-  checksum: 10/dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
-  languageName: node
-  linkType: hard
-
 "convert-source-map@npm:^2.0.0":
   version: 2.0.0
   resolution: "convert-source-map@npm:2.0.0"
@@ -4234,28 +3775,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.38.0":
-  version: 3.38.1
-  resolution: "core-js-compat@npm:3.38.1"
-  dependencies:
-    browserslist: "npm:^4.23.3"
-  checksum: 10/4e2f219354fd268895f79486461a12df96f24ed307321482fe2a43529c5a64e7c16bcba654980ba217d603444f5141d43a79058aeac77511085f065c5da72207
-  languageName: node
-  linkType: hard
-
-"core-js-compat@npm:^3.38.1":
-  version: 3.39.0
-  resolution: "core-js-compat@npm:3.39.0"
+"core-js-compat@npm:^3.43.0":
+  version: 3.45.1
+  resolution: "core-js-compat@npm:3.45.1"
   dependencies:
-    browserslist: "npm:^4.24.2"
-  checksum: 10/82d5fcb54087f1fc174283c2d30b62908edc828537574f95bb49a5b7f235bcc88ba43f37dbe470c47e17fd9bc01cbc1db905062fd96ba65ff1a03c235f288aca
+    browserslist: "npm:^4.25.3"
+  checksum: 10/a6eb757ccf5091ee4cf7756c4f2ddefb506b049d89526e8150221e6d9150dc2685c34cbed42f4b15a27a92dd300fd56f75c9502cd57cfe928c1bd7a8ed961a42
   languageName: node
   linkType: hard
 
-"core-js-pure@npm:^3.30.2":
-  version: 3.35.0
-  resolution: "core-js-pure@npm:3.35.0"
-  checksum: 10/cdc5c5ef95b688d7d2335bc3a27a4b78451e3bbac913e601c3763a38c31c875b19771faaf0a3d7b1ebb47438158d579d890a97f93cd94b831d3f00aef49dbf91
+"core-js-pure@npm:^3.43.0":
+  version: 3.45.1
+  resolution: "core-js-pure@npm:3.45.1"
+  checksum: 10/8c5091695fc9c5d9c45774f1a6dcd1bdc5fcf96e55749d93a40c09b9cf23dbaa72e72da187833ba93d80f67080d9d6c88f8f2256d30e9a9d20a12838f024aba1
   languageName: node
   linkType: hard
 
@@ -4266,10 +3798,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.39.0":
-  version: 3.39.0
-  resolution: "core-js@npm:3.39.0"
-  checksum: 10/a3d34e669783dfc878e545f1983f60d9ff48a3867cd1d7ff8839b849e053002a208c7c14a5ca354b8e0b54982901e2f83dc87c3d9b95de0a94b4071d1c74e5f6
+"core-js@npm:^3.47.0":
+  version: 3.47.0
+  resolution: "core-js@npm:3.47.0"
+  checksum: 10/c02dc6a091c7e6799e3527dc06a428c44bbcff7f8f6ee700ff818b90aa2ebaf1f17b0234146e692811da97cda5a39a6095ecadec9fd1a74b1135103eb0e96cb1
   languageName: node
   linkType: hard
 
@@ -4287,19 +3819,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "cosmiconfig@npm:6.0.0"
-  dependencies:
-    "@types/parse-json": "npm:^4.0.0"
-    import-fresh: "npm:^3.1.0"
-    parse-json: "npm:^5.0.0"
-    path-type: "npm:^4.0.0"
-    yaml: "npm:^1.7.2"
-  checksum: 10/b184d2bfbced9ba6840fd097dbf3455c68b7258249bb9b1277913823d516d8dfdade8c5ccbf79db0ca8ebd4cc9b9be521ccc06a18396bd242d50023c208f1594
-  languageName: node
-  linkType: hard
-
 "create-cx-app@workspace:packages/create-cx-app":
   version: 0.0.0-use.local
   resolution: "create-cx-app@workspace:packages/create-cx-app"
@@ -4310,14 +3829,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.3":
-  version: 7.0.3
-  resolution: "cross-spawn@npm:7.0.3"
+"create-require@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "create-require@npm:1.1.1"
+  checksum: 10/a9a1503d4390d8b59ad86f4607de7870b39cad43d929813599a23714831e81c520bddf61bcdd1f8e30f05fd3a2b71ae8538e946eb2786dc65c2bbc520f692eff
+  languageName: node
+  linkType: hard
+
+"cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.6":
+  version: 7.0.6
+  resolution: "cross-spawn@npm:7.0.6"
   dependencies:
     path-key: "npm:^3.1.0"
     shebang-command: "npm:^2.0.0"
     which: "npm:^2.0.1"
-  checksum: 10/e1a13869d2f57d974de0d9ef7acbf69dc6937db20b918525a01dacb5032129bd552d290d886d981e99f1b624cb03657084cc87bd40f115c07ecf376821c729ce
+  checksum: 10/0d52657d7ae36eb130999dffff1168ec348687b48dd38e2ff59992ed916c88d328cf1d07ff4a4a10bc78de5e1c23f04b306d569e42f7a2293915c081e4dfee86
   languageName: node
   linkType: hard
 
@@ -4366,9 +3892,9 @@ __metadata:
   linkType: hard
 
 "css-what@npm:^6.0.1":
-  version: 6.1.0
-  resolution: "css-what@npm:6.1.0"
-  checksum: 10/c67a3a2d0d81843af87f8bf0a4d0845b0f952377714abbb2884e48942409d57a2110eabee003609d02ee487b054614bdfcfc59ee265728ff105bd5aa221c1d0e
+  version: 6.2.2
+  resolution: "css-what@npm:6.2.2"
+  checksum: 10/3c5a53be94728089bd1716f915f7f96adde5dd8bf374610eb03982266f3d860bf1ebaf108cda30509d02ef748fe33eaa59aa75911e2c49ee05a85ef1f9fb5223
   languageName: node
   linkType: hard
 
@@ -4381,10 +3907,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2":
-  version: 3.1.2
-  resolution: "csstype@npm:3.1.2"
-  checksum: 10/1f39c541e9acd9562996d88bc9fb62d1cb234786ef11ed275567d4b2bd82e1ceacde25debc8de3d3b4871ae02c2933fa02614004c97190711caebad6347debc2
+"csstype@npm:^3.2.2":
+  version: 3.2.3
+  resolution: "csstype@npm:3.2.3"
+  checksum: 10/ad41baf7e2ffac65ab544d79107bf7cd1a4bb9bab9ac3302f59ab4ba655d5e30942a8ae46e10ba160c6f4ecea464cc95b975ca2fefbdeeacd6ac63f12f99fe1f
   languageName: node
   linkType: hard
 
@@ -4392,9 +3918,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cx-build-tools@workspace:packages/cx-build-tools"
   dependencies:
-    "@babel/core": "npm:^7.26.0"
-    "@babel/preset-env": "npm:^7.26.0"
-    "@rollup/plugin-babel": "npm:^6.0.4"
+    "@babel/core": "npm:^7.28.5"
+    "@babel/preset-env": "npm:^7.28.5"
+    "@babel/preset-typescript": "npm:^7.28.5"
+    "@rollup/plugin-babel": "npm:^6.1.0"
+    "@rollup/plugin-node-resolve": "npm:^16.0.3"
     babel-preset-cx-env: "npm:^24.0.0"
     prettier: "npm:^3.3.3"
     rollup: "npm:^4.28.1"
@@ -4418,7 +3946,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"cx-immer@npm:^25.5.0, cx-immer@workspace:packages/cx-immer":
+"cx-immer@workspace:*, cx-immer@workspace:packages/cx-immer":
   version: 0.0.0-use.local
   resolution: "cx-immer@workspace:packages/cx-immer"
   peerDependencies:
@@ -4426,10 +3954,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"cx-react@npm:^24.7.1, cx-react@workspace:packages/cx-react":
+"cx-react@workspace:*, cx-react@workspace:packages/cx-react":
   version: 0.0.0-use.local
   resolution: "cx-react@workspace:packages/cx-react"
+  dependencies:
+    "@types/react": "npm:^19.2.7"
+    "@types/react-dom": "npm:^19.2.3"
+    typescript: "npm:^5.9.3"
   peerDependencies:
+    "@types/react": ">=18"
     react: ">=18"
     react-dom: ">=18"
   languageName: unknown
@@ -4440,62 +3973,104 @@ __metadata:
   resolution: "cx-scss-manifest-webpack-plugin@workspace:packages/cx-scss-manifest-webpack-plugin"
   peerDependencies:
     cx: "*"
+    webpack: ^5.0.0
   languageName: unknown
   linkType: soft
 
-"cx-theme-aquamarine@npm:^18.7.3, cx-theme-aquamarine@workspace:packages/cx-theme-aquamarine":
+"cx-theme-aquamarine@workspace:*, cx-theme-aquamarine@workspace:packages/cx-theme-aquamarine":
   version: 0.0.0-use.local
   resolution: "cx-theme-aquamarine@workspace:packages/cx-theme-aquamarine"
+  dependencies:
+    typescript: "npm:^5.9.3"
+  peerDependencies:
+    cx: "*"
   languageName: unknown
   linkType: soft
 
-"cx-theme-dark@npm:^18.7.1, cx-theme-dark@workspace:packages/cx-theme-dark":
+"cx-theme-dark@workspace:*, cx-theme-dark@workspace:packages/cx-theme-dark":
   version: 0.0.0-use.local
   resolution: "cx-theme-dark@workspace:packages/cx-theme-dark"
+  dependencies:
+    typescript: "npm:^5.9.3"
+  peerDependencies:
+    cx: "*"
   languageName: unknown
   linkType: soft
 
-"cx-theme-frost@npm:^18.7.1, cx-theme-frost@workspace:packages/cx-theme-frost":
+"cx-theme-frost@workspace:*, cx-theme-frost@workspace:packages/cx-theme-frost":
   version: 0.0.0-use.local
   resolution: "cx-theme-frost@workspace:packages/cx-theme-frost"
+  dependencies:
+    typescript: "npm:^5.9.3"
+  peerDependencies:
+    cx: "*"
   languageName: unknown
   linkType: soft
 
-"cx-theme-material-dark@npm:^20.1.0, cx-theme-material-dark@workspace:packages/cx-theme-material-dark":
+"cx-theme-material-dark@workspace:*, cx-theme-material-dark@workspace:packages/cx-theme-material-dark":
   version: 0.0.0-use.local
   resolution: "cx-theme-material-dark@workspace:packages/cx-theme-material-dark"
+  dependencies:
+    typescript: "npm:^5.9.3"
+  peerDependencies:
+    cx: "*"
   languageName: unknown
   linkType: soft
 
-"cx-theme-material@npm:^18.7.0, cx-theme-material@workspace:packages/cx-theme-material":
+"cx-theme-material@workspace:*, cx-theme-material@workspace:packages/cx-theme-material":
   version: 0.0.0-use.local
   resolution: "cx-theme-material@workspace:packages/cx-theme-material"
+  dependencies:
+    typescript: "npm:^5.9.3"
+  peerDependencies:
+    cx: "*"
   languageName: unknown
   linkType: soft
 
-"cx-theme-packed-dark@npm:^24.4.1, cx-theme-packed-dark@workspace:packages/cx-theme-packed-dark":
+"cx-theme-packed-dark@workspace:*, cx-theme-packed-dark@workspace:packages/cx-theme-packed-dark":
   version: 0.0.0-use.local
   resolution: "cx-theme-packed-dark@workspace:packages/cx-theme-packed-dark"
+  dependencies:
+    typescript: "npm:^5.9.3"
+  peerDependencies:
+    cx: "*"
   languageName: unknown
   linkType: soft
 
-"cx-theme-space-blue@npm:^24.5.1, cx-theme-space-blue@workspace:packages/cx-theme-space-blue":
+"cx-theme-space-blue@workspace:*, cx-theme-space-blue@workspace:packages/cx-theme-space-blue":
   version: 0.0.0-use.local
   resolution: "cx-theme-space-blue@workspace:packages/cx-theme-space-blue"
+  dependencies:
+    typescript: "npm:^5.9.3"
+  peerDependencies:
+    cx: "*"
   languageName: unknown
   linkType: soft
 
-"cx@npm:^25.4.1, cx@workspace:packages/cx":
+"cx@workspace:*, cx@workspace:packages/cx":
   version: 0.0.0-use.local
   resolution: "cx@workspace:packages/cx"
   dependencies:
+    "@types/jest": "npm:^30.0.0"
+    "@types/mocha": "npm:^10.0.10"
+    "@types/node": "npm:^25.0.3"
+    "@types/react-dom": "npm:^19.2.3"
+    "@types/react-test-renderer": "npm:^19.1.0"
+    "@types/route-parser": "npm:^0.1.7"
     intl-io: "npm:^0.4.4"
-    react-test-renderer: "npm:^18.3.1"
+    mocha: "npm:^11.7.5"
+    react-test-renderer: "npm:^19.2.3"
     route-parser: "npm:^0.0.5"
-  peerDependencies:
-    "@types/react": "*"
-    react: "*"
-    react-dom: "*"
+    ts-mocha: "npm:^11.1.0"
+    ts-node: "npm:^10.9.2"
+    tsconfig-paths: "npm:^4.2.0"
+    typescript: "npm:^5.9.3"
+  peerDependencies:
+    "@types/react": ">=18"
+    "@types/react-dom": ">=18"
+    cx-react: ">=26"
+    react: ">=18"
+    react-dom: ">=18"
   languageName: unknown
   linkType: soft
 
@@ -4503,18 +4078,17 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cxjs@workspace:."
   dependencies:
-    "@babel/core": "npm:^7.26.0"
-    "@babel/plugin-transform-react-jsx": "npm:^7.25.9"
-    "@babel/preset-env": "npm:^7.26.0"
-    "@babel/register": "npm:^7.25.9"
-    "@types/react": "npm:^18.3.14"
-    babel-jest: "npm:29.7.0"
+    "@babel/core": "npm:^7.28.5"
+    "@babel/plugin-transform-react-jsx": "npm:^7.27.1"
+    "@babel/preset-env": "npm:^7.28.5"
+    "@babel/register": "npm:^7.28.3"
+    "@rollup/plugin-node-resolve": "npm:^16.0.3"
+    "@types/react": "npm:^19.2.7"
     env-test: "npm:^1.0.0"
-    mocha: "npm:^10.8.2"
     prettier: "npm:^3.3.3"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
-    webpack-dev-server: "npm:^5.1.0"
+    react: "npm:^19.2.3"
+    react-dom: "npm:^19.2.3"
+    webpack-dev-server: "npm:^5.2.2"
   languageName: unknown
   linkType: soft
 
@@ -4534,36 +4108,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:2.6.9, debug@npm:^2.6.0":
+"debug@npm:2.6.9":
   version: 2.6.9
-  resolution: "debug@npm:2.6.9"
-  dependencies:
-    ms: "npm:2.0.0"
-  checksum: 10/e07005f2b40e04f1bd14a3dd20520e9c4f25f60224cb006ce9d6781732c917964e9ec029fc7f1a151083cd929025ad5133814d4dc624a9aaf020effe4914ed14
-  languageName: node
-  linkType: hard
-
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.4":
-  version: 4.3.4
-  resolution: "debug@npm:4.3.4"
-  dependencies:
-    ms: "npm:2.1.2"
-  peerDependenciesMeta:
-    supports-color:
-      optional: true
-  checksum: 10/0073c3bcbd9cb7d71dd5f6b55be8701af42df3e56e911186dfa46fac3a5b9eb7ce7f377dd1d3be6db8977221f8eb333d945216f645cf56f6b688cd484837d255
+  resolution: "debug@npm:2.6.9"
+  dependencies:
+    ms: "npm:2.0.0"
+  checksum: 10/e07005f2b40e04f1bd14a3dd20520e9c4f25f60224cb006ce9d6781732c917964e9ec029fc7f1a151083cd929025ad5133814d4dc624a9aaf020effe4914ed14
   languageName: node
   linkType: hard
 
-"debug@npm:^4.3.5":
-  version: 4.3.6
-  resolution: "debug@npm:4.3.6"
+"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.4, debug@npm:^4.3.5":
+  version: 4.4.3
+  resolution: "debug@npm:4.4.3"
   dependencies:
-    ms: "npm:2.1.2"
+    ms: "npm:^2.1.3"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10/d3adb9af7d57a9e809a68f404490cf776122acca16e6359a2702c0f462e510e91f9765c07f707b8ab0d91e03bad57328f3256f5082631cefb5393d0394d50fb7
+  checksum: 10/9ada3434ea2993800bd9a1e320bd4aa7af69659fb51cca685d390949434bc0a8873c21ed7c9b852af6f2455a55c6d050aa3937d52b3c69f796dab666f762acad
   languageName: node
   linkType: hard
 
@@ -4638,18 +4200,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "define-data-property@npm:1.1.1"
-  dependencies:
-    get-intrinsic: "npm:^1.2.1"
-    gopd: "npm:^1.0.1"
-    has-property-descriptors: "npm:^1.0.0"
-  checksum: 10/5573c8df96b5857408cad64d9b91b69152e305ce4b06218e5f49b59c6cafdbb90a8bd8a0bb83c7bc67a8d479c04aa697063c9bc28d849b7282f9327586d6bc7b
-  languageName: node
-  linkType: hard
-
-"define-data-property@npm:^1.1.4":
+"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.4":
   version: 1.1.4
   resolution: "define-data-property@npm:1.1.4"
   dependencies:
@@ -4660,13 +4211,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-lazy-prop@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "define-lazy-prop@npm:2.0.0"
-  checksum: 10/0115fdb065e0490918ba271d7339c42453d209d4cb619dfe635870d906731eff3e1ade8028bb461ea27ce8264ec5e22c6980612d332895977e89c1bbc80fcee2
-  languageName: node
-  linkType: hard
-
 "define-lazy-prop@npm:^3.0.0":
   version: 3.0.0
   resolution: "define-lazy-prop@npm:3.0.0"
@@ -4674,13 +4218,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.3, define-properties@npm:^1.1.4, define-properties@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "define-properties@npm:1.2.0"
+"define-properties@npm:^1.1.3, define-properties@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "define-properties@npm:1.2.1"
   dependencies:
+    define-data-property: "npm:^1.0.1"
     has-property-descriptors: "npm:^1.0.0"
     object-keys: "npm:^1.1.1"
-  checksum: 10/e60aee6a19b102df4e2b1f301816804e81ab48bb91f00d0d935f269bf4b3f79c88b39e4f89eaa132890d23267335fd1140dfcd8d5ccd61031a0a2c41a54e33a6
+  checksum: 10/b4ccd00597dd46cb2d4a379398f5b19fca84a16f3374e2249201992f36b30f6835949a9429669ee6b41b6e837205a163eadd745e472069e70dfc10f03e5fcc12
   languageName: node
   linkType: hard
 
@@ -4727,6 +4272,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "detect-libc@npm:1.0.3"
+  bin:
+    detect-libc: ./bin/detect-libc.js
+  checksum: 10/3849fe7720feb153e4ac9407086956e073f1ce1704488290ef0ca8aab9430a8d48c8a9f8351889e7cdc64e5b1128589501e4fef48f3a4a49ba92cd6d112d0757
+  languageName: node
+  linkType: hard
+
 "detect-node@npm:^2.0.4":
   version: 2.1.0
   resolution: "detect-node@npm:2.1.0"
@@ -4734,23 +4288,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-port-alt@npm:^1.1.6":
-  version: 1.1.6
-  resolution: "detect-port-alt@npm:1.1.6"
-  dependencies:
-    address: "npm:^1.0.1"
-    debug: "npm:^2.6.0"
-  bin:
-    detect: ./bin/detect-port
-    detect-port: ./bin/detect-port
-  checksum: 10/35c9f9c69d12d2ca43d093f4f02d7763b47673910749bd12e6fedeb0ab5c546d27ab8e6425a9cbc65edd408490241390a8e680e8ec7e13940e84754ad81d632e
+"diff@npm:7.0.0, diff@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "diff@npm:7.0.0"
+  checksum: 10/e9b8e48d054c9c0c093c65ce8e2637af94b35f2427001607b14e5e0589e534ea3413a7f91ebe6d7c5a1494ace49cb7c7c3972f442ddd96a4767ff091999a082e
   languageName: node
   linkType: hard
 
-"diff@npm:5.1.0":
-  version: 5.1.0
-  resolution: "diff@npm:5.1.0"
-  checksum: 10/f4557032a98b2967fe27b1a91dfcf8ebb6b9a24b1afe616b5c2312465100b861e9b8d4da374be535f2d6b967ce2f53826d7f6edc2a0d32b2ab55abc96acc2f9d
+"diff@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "diff@npm:4.0.2"
+  checksum: 10/ec09ec2101934ca5966355a229d77afcad5911c92e2a77413efda5455636c4cf2ce84057e2d7715227a2eeeda04255b849bd3ae3a4dd22eb22e86e76456df069
   languageName: node
   linkType: hard
 
@@ -4761,21 +4309,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dir-glob@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "dir-glob@npm:3.0.1"
-  dependencies:
-    path-type: "npm:^4.0.0"
-  checksum: 10/fa05e18324510d7283f55862f3161c6759a3f2f8dbce491a2fc14c8324c498286c54282c1f0e933cb930da8419b30679389499b919122952a4f8592362ef4615
-  languageName: node
-  linkType: hard
-
 "dns-packet@npm:^5.2.2":
-  version: 5.6.0
-  resolution: "dns-packet@npm:5.6.0"
+  version: 5.6.1
+  resolution: "dns-packet@npm:5.6.1"
   dependencies:
     "@leichtgewicht/ip-codec": "npm:^2.0.1"
-  checksum: 10/1643bf648fe63c44f21f28dff2174f6de45034b55e47a6e9b427a179701fc8a5b15019f7f84b300b537637c69ab3d03553333c566c99cc905ba97652ea388ee8
+  checksum: 10/ef5496dd5a906e22ed262cbe1a6f5d532c0893c4f1884a7aa37d4d0d8b8376a2b43f749aab087c8bb1354d67b40444f7fca8de4017b161a4cea468543061aed3
   languageName: node
   linkType: hard
 
@@ -4783,24 +4322,25 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "docs@workspace:docs"
   dependencies:
-    "@babel/core": "npm:^7.26.0"
-    "@babel/preset-env": "npm:^7.26.0"
-    "@babel/preset-typescript": "npm:^7.26.0"
-    "@types/node": "npm:^22.10.1"
-    "@types/react": "npm:^18.3.14"
-    babel-loader: "npm:^9.2.1"
-    babel-plugin-transform-cx-imports: "npm:^21.3.0"
-    babel-plugin-transform-cx-jsx: "npm:^21.3.0"
-    babel-preset-cx-env: "npm:^24.0.0"
+    "@babel/core": "npm:^7.28.5"
+    "@babel/preset-env": "npm:^7.28.5"
+    "@babel/preset-typescript": "npm:^7.28.5"
+    "@types/node": "npm:^25.0.3"
+    "@types/react": "npm:^19.2.7"
+    babel-loader: "npm:^10.0.0"
+    babel-plugin-transform-cx-imports: "workspace:*"
+    babel-plugin-transform-cx-jsx: "workspace:*"
+    babel-preset-cx-env: "workspace:*"
     casual: "npm:^1.6.2"
     clean-webpack-plugin: "npm:^4.0.0"
     copy-webpack-plugin: "npm:^12.0.2"
-    core-js: "npm:^3.39.0"
+    core-js: "npm:^3.47.0"
     css-loader: "npm:^7.1.2"
-    cx: "npm:^25.4.1"
-    cx-react: "npm:^24.7.1"
+    cx: "workspace:*"
+    cx-react: "workspace:*"
+    cx-theme-aquamarine: "workspace:*"
     file-loader: "npm:^6.2.0"
-    html-webpack-plugin: "npm:^5.6.3"
+    html-webpack-plugin: "npm:^5.6.5"
     if-loader: "npm:^1.0.2"
     illuminate-js: "npm:^1.0.0-alpha.2"
     inline-manifest-webpack-plugin: "npm:^4.0.2"
@@ -4809,20 +4349,19 @@ __metadata:
     marked: "npm:^4.3.0"
     mini-css-extract-plugin: "npm:^2.9.2"
     modify-babel-preset: "npm:^3.2.1"
-    react: "npm:^18.3.1"
-    react-dev-utils: "npm:^12.0.1"
-    react-dom: "npm:^18.3.1"
+    react: "npm:^19.2.3"
+    react-dom: "npm:^19.2.3"
     sass: "npm:^1.77.8"
-    sass-loader: "npm:^16.0.1"
+    sass-loader: "npm:^16.0.6"
     style-loader: "npm:^4.0.0"
     svg-url-loader: "npm:^8.0.0"
     url-loader: "npm:^4.1.1"
-    webpack: "npm:^5.97.1"
+    webpack: "npm:^5.103.0"
     webpack-bundle-analyzer: "npm:^4.10.2"
     webpack-cleanup-plugin: "npm:^0.5.1"
     webpack-cli: "npm:^5.1.4"
     webpack-combine-loaders: "npm:^2.0.4"
-    webpack-dev-server: "npm:^5.1.0"
+    webpack-dev-server: "npm:^5.2.2"
     webpack-merge: "npm:^6.0.1"
     whatwg-fetch: "npm:^3.6.20"
   languageName: unknown
@@ -4885,6 +4424,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dunder-proto@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "dunder-proto@npm:1.0.1"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    gopd: "npm:^1.2.0"
+  checksum: 10/5add88a3d68d42d6e6130a0cac450b7c2edbe73364bbd2fc334564418569bea97c6943a8fcd70e27130bf32afc236f30982fc4905039b703f23e9e0433c29934
+  languageName: node
+  linkType: hard
+
 "duplexer@npm:^0.1.2":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"
@@ -4916,24 +4466,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.4.284, electron-to-chromium@npm:^1.4.601":
-  version: 1.4.617
-  resolution: "electron-to-chromium@npm:1.4.617"
-  checksum: 10/88cc13b388d6efd738cd26980cd7e9865d064d30c1d82ffa4eceb1a40ccadca024c326dcf6e0d0d2b31c344512710bcd06b7d63898a12ba99c35a3ba3d98c72b
+"electron-to-chromium@npm:^1.5.218":
+  version: 1.5.222
+  resolution: "electron-to-chromium@npm:1.5.222"
+  checksum: 10/f1f7b21598ddf77a8e44f8e288bc0fb5c82c110ae1df7174a188ea7d2f81851d8e693d46ad2916e2ae0014b7368d331f8c5bee5175e572d7180f91153b251f8d
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.5.4":
-  version: 1.5.13
-  resolution: "electron-to-chromium@npm:1.5.13"
-  checksum: 10/b3de6dbca66e399eacd4f7e2b7603394c8949c9e724d838a45e092725005ff435aabfbf00f738e45451eb23147684f7f9251a5ed75619a539642b2bccea20b45
-  languageName: node
-  linkType: hard
-
-"electron-to-chromium@npm:^1.5.41":
-  version: 1.5.71
-  resolution: "electron-to-chromium@npm:1.5.71"
-  checksum: 10/feb1655236b9de715f837e07e4bcb49b199f20ce7b6b8ab8e7e4120220bcb85b96227af72cb5bbed88ff3cb7c09110fe8b04be9504a34a24694fc2e630a64704
+"electron-to-chromium@npm:^1.5.249":
+  version: 1.5.262
+  resolution: "electron-to-chromium@npm:1.5.262"
+  checksum: 10/9934da5f5f24b7e1b82964ad171426671ddf99032079847739138af01eb3dd943b2c479a4ab633f3293549cce3ae6bb75804cd86e1fec9be93b9c77ab60ff479
   languageName: node
   linkType: hard
 
@@ -4981,23 +4524,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enhanced-resolve@npm:^5.0.0":
-  version: 5.13.0
-  resolution: "enhanced-resolve@npm:5.13.0"
-  dependencies:
-    graceful-fs: "npm:^4.2.4"
-    tapable: "npm:^2.2.0"
-  checksum: 10/736d517269abcc8f25e31b2f0090a195252139781dc30f67c595df5c9f4b585f89bb19a5fc09bec12faa69246f0248a2cb8aee1578b7f6ed093c09a43c48ce6d
-  languageName: node
-  linkType: hard
-
-"enhanced-resolve@npm:^5.17.1":
-  version: 5.17.1
-  resolution: "enhanced-resolve@npm:5.17.1"
+"enhanced-resolve@npm:^5.0.0, enhanced-resolve@npm:^5.17.3":
+  version: 5.18.3
+  resolution: "enhanced-resolve@npm:5.18.3"
   dependencies:
     graceful-fs: "npm:^4.2.4"
     tapable: "npm:^2.2.0"
-  checksum: 10/e8e03cb7a4bf3c0250a89afbd29e5ec20e90ba5fcd026066232a0754864d7d0a393fa6fc0e5379314a6529165a1834b36731147080714459d98924520410d8f5
+  checksum: 10/a4d0a1eacba3079f617b68c8f7e17583c3cbc572055c2edca41c0fa0230a49f6e9b2c6ffd4128cc5f84e15ea6cc313ae2b01e1057fcd252fabef70220a5d9f6a
   languageName: node
   linkType: hard
 
@@ -5023,11 +4556,11 @@ __metadata:
   linkType: hard
 
 "envinfo@npm:^7.7.3":
-  version: 7.8.1
-  resolution: "envinfo@npm:7.8.1"
+  version: 7.14.0
+  resolution: "envinfo@npm:7.14.0"
   bin:
     envinfo: dist/cli.js
-  checksum: 10/e7a2d71c7dfe398a4ffda0e844e242d2183ef2627f98e74e4cd71edd2af691c8707a2b34aacef92538c27b3daf9a360d32202f33c0a9f27f767c4e1c6ba8b522
+  checksum: 10/0d9d711f2b6ae02dec89dd768a3390acbcb99ac50d07f20e635a8d2db68447703476db535483592d1ed4656c3d36eee4883032d71a5118c917b4973e2d4fa027
   languageName: node
   linkType: hard
 
@@ -5038,21 +4571,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"error-ex@npm:^1.3.1":
-  version: 1.3.2
-  resolution: "error-ex@npm:1.3.2"
-  dependencies:
-    is-arrayish: "npm:^0.2.1"
-  checksum: 10/d547740aa29c34e753fb6fed2c5de81802438529c12b3673bd37b6bb1fe49b9b7abdc3c11e6062fe625d8a296b3cf769a80f878865e25e685f787763eede3ffb
-  languageName: node
-  linkType: hard
-
-"es-define-property@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "es-define-property@npm:1.0.0"
-  dependencies:
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10/f66ece0a887b6dca71848fa71f70461357c0e4e7249696f81bad0a1f347eed7b31262af4a29f5d726dc026426f085483b6b90301855e647aa8e21936f07293c6
+"es-define-property@npm:^1.0.0, es-define-property@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "es-define-property@npm:1.0.1"
+  checksum: 10/f8dc9e660d90919f11084db0a893128f3592b781ce967e4fccfb8f3106cb83e400a4032c559184ec52ee1dbd4b01e7776c7cd0b3327b1961b1a4a7008920fe78
   languageName: node
   linkType: hard
 
@@ -5081,20 +4603,22 @@ __metadata:
   linkType: hard
 
 "es-module-lexer@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "es-module-lexer@npm:1.2.1"
-  checksum: 10/4bb92673b94b46e8d2e23ff275696842c83cdabd19eaa84bab60ce37ee036051dedb158746f6d88a58b9d430f881a717c23434e2c8f05d1ba2c69d68e4f05ab4
+  version: 1.7.0
+  resolution: "es-module-lexer@npm:1.7.0"
+  checksum: 10/b6f3e576a3fed4d82b0d0ad4bbf6b3a5ad694d2e7ce8c4a069560da3db6399381eaba703616a182b16dde50ce998af64e07dcf49f2ae48153b9e07be3f107087
   languageName: node
   linkType: hard
 
-"escalade@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "escalade@npm:3.1.1"
-  checksum: 10/afa618e73362576b63f6ca83c975456621095a1ed42ff068174e3f5cea48afc422814dda548c96e6ebb5333e7265140c7292abcc81bbd6ccb1757d50d3a4e182
+"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "es-object-atoms@npm:1.1.1"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+  checksum: 10/54fe77de288451dae51c37bfbfe3ec86732dc3778f98f3eb3bdb4bf48063b2c0b8f9c93542656986149d08aa5be3204286e2276053d19582b76753f1a2728867
   languageName: node
   linkType: hard
 
-"escalade@npm:^3.1.2, escalade@npm:^3.2.0":
+"escalade@npm:^3.1.1, escalade@npm:^3.2.0":
   version: 3.2.0
   resolution: "escalade@npm:3.2.0"
   checksum: 10/9d7169e3965b2f9ae46971afa392f6e5a25545ea30f2e2dd99c9b0a95a3f52b5653681a84f5b2911a413ddad2d7a93d3514165072f349b5ffc59c75a899970d6
@@ -5108,10 +4632,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escape-string-regexp@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "escape-string-regexp@npm:1.0.5"
-  checksum: 10/6092fda75c63b110c706b6a9bfde8a612ad595b628f0bd2147eea1d3406723020810e591effc7db1da91d80a71a737a313567c5abb3813e8d9c71f4aa595b410
+"escape-string-regexp@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "escape-string-regexp@npm:2.0.0"
+  checksum: 10/9f8a2d5743677c16e85c810e3024d54f0c8dea6424fad3c79ef6666e81dd0846f7437f5e729dfcdac8981bc9e5294c39b4580814d114076b8d36318f46ae4395
   languageName: node
   linkType: hard
 
@@ -5132,16 +4656,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esprima@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "esprima@npm:4.0.1"
-  bin:
-    esparse: ./bin/esparse.js
-    esvalidate: ./bin/esvalidate.js
-  checksum: 10/f1d3c622ad992421362294f7acf866aa9409fbad4eb2e8fa230bd33944ce371d32279667b242d8b8907ec2b6ad7353a717f3c0e60e748873a34a7905174bc0eb
-  languageName: node
-  linkType: hard
-
 "esrecurse@npm:^4.3.0":
   version: 4.3.0
   resolution: "esrecurse@npm:4.3.0"
@@ -5217,14 +4731,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expect@npm:^30.0.0":
+  version: 30.1.2
+  resolution: "expect@npm:30.1.2"
+  dependencies:
+    "@jest/expect-utils": "npm:30.1.2"
+    "@jest/get-type": "npm:30.1.0"
+    jest-matcher-utils: "npm:30.1.2"
+    jest-message-util: "npm:30.1.0"
+    jest-mock: "npm:30.0.5"
+    jest-util: "npm:30.0.5"
+  checksum: 10/700bc5f3042f639624aa8c18cbef0fb7ca1fda3b4072ee464c57fd3b4298e049210804839777a635f4741520ae4ffda0ba0e1698cdfc79e981eabdf737314485
+  languageName: node
+  linkType: hard
+
 "exponential-backoff@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "exponential-backoff@npm:3.1.1"
-  checksum: 10/2d9bbb6473de7051f96790d5f9a678f32e60ed0aa70741dc7fdc96fec8d631124ec3374ac144387604f05afff9500f31a1d45bd9eee4cdc2e4f9ad2d9b9d5dbd
+  version: 3.1.2
+  resolution: "exponential-backoff@npm:3.1.2"
+  checksum: 10/ca2f01f1aa4dafd3f3917bd531ab5be08c6f5f4b2389d2e974f903de3cbeb50b9633374353516b6afd70905775e33aba11afab1232d3acf0aa2963b98a611c51
   languageName: node
   linkType: hard
 
-"express@npm:^4.19.2":
+"express@npm:^4.21.2":
   version: 4.21.2
   resolution: "express@npm:4.21.2"
   dependencies:
@@ -5291,39 +4819,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9":
-  version: 3.2.12
-  resolution: "fast-glob@npm:3.2.12"
-  dependencies:
-    "@nodelib/fs.stat": "npm:^2.0.2"
-    "@nodelib/fs.walk": "npm:^1.2.3"
-    glob-parent: "npm:^5.1.2"
-    merge2: "npm:^1.3.0"
-    micromatch: "npm:^4.0.4"
-  checksum: 10/641e748664ae0fdc4dadd23c812fd7d6c80cd92d451571cb1f81fa87edb750e917f25abf74fc9503c97438b0b67ecf75b738bb8e50a83b16bd2a88b4d64e81fa
-  languageName: node
-  linkType: hard
-
-"fast-glob@npm:^3.3.2":
-  version: 3.3.2
-  resolution: "fast-glob@npm:3.3.2"
+"fast-glob@npm:^3.3.2, fast-glob@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "fast-glob@npm:3.3.3"
   dependencies:
     "@nodelib/fs.stat": "npm:^2.0.2"
     "@nodelib/fs.walk": "npm:^1.2.3"
     glob-parent: "npm:^5.1.2"
     merge2: "npm:^1.3.0"
-    micromatch: "npm:^4.0.4"
-  checksum: 10/222512e9315a0efca1276af9adb2127f02105d7288fa746145bf45e2716383fb79eb983c89601a72a399a56b7c18d38ce70457c5466218c5f13fad957cee16df
+    micromatch: "npm:^4.0.8"
+  checksum: 10/dcc6432b269762dd47381d8b8358bf964d8f4f60286ac6aa41c01ade70bda459ff2001b516690b96d5365f68a49242966112b5d5cc9cd82395fa8f9d017c90ad
   languageName: node
   linkType: hard
 
-"fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
+"fast-json-stable-stringify@npm:^2.0.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
   checksum: 10/2c20055c1fa43c922428f16ca8bb29f2807de63e5c851f665f7ac9790176c01c3b40335257736b299764a8d383388dabc73c8083b8e1bc3d99f0a941444ec60e
   languageName: node
   linkType: hard
 
+"fast-uri@npm:^3.0.1":
+  version: 3.1.0
+  resolution: "fast-uri@npm:3.1.0"
+  checksum: 10/818b2c96dc913bcf8511d844c3d2420e2c70b325c0653633f51821e4e29013c2015387944435cd0ef5322c36c9beecc31e44f71b257aeb8e0b333c1d62bb17c2
+  languageName: node
+  linkType: hard
+
 "fastest-levenshtein@npm:^1.0.12":
   version: 1.0.16
   resolution: "fastest-levenshtein@npm:1.0.16"
@@ -5332,11 +4854,11 @@ __metadata:
   linkType: hard
 
 "fastq@npm:^1.6.0":
-  version: 1.15.0
-  resolution: "fastq@npm:1.15.0"
+  version: 1.19.1
+  resolution: "fastq@npm:1.19.1"
   dependencies:
     reusify: "npm:^1.0.4"
-  checksum: 10/67c01b1c972e2d5b6fea197a1a39d5d582982aea69ff4c504badac71080d8396d4843b165a9686e907c233048f15a86bbccb0e7f83ba771f6fa24bcde059d0c3
+  checksum: 10/75679dc226316341c4f2a6b618571f51eac96779906faecd8921b984e844d6ae42fabb2df69b1071327d398d5716693ea9c9c8941f64ac9e89ec2032ce59d730
   languageName: node
   linkType: hard
 
@@ -5349,12 +4871,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fb-watchman@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "fb-watchman@npm:2.0.2"
-  dependencies:
-    bser: "npm:2.1.1"
-  checksum: 10/4f95d336fb805786759e383fd7fff342ceb7680f53efcc0ef82f502eb479ce35b98e8b207b6dfdfeea0eba845862107dc73813775fc6b56b3098c6e90a2dad77
+"fdir@npm:^6.5.0":
+  version: 6.5.0
+  resolution: "fdir@npm:6.5.0"
+  peerDependencies:
+    picomatch: ^3 || ^4
+  peerDependenciesMeta:
+    picomatch:
+      optional: true
+  checksum: 10/14ca1c9f0a0e8f4f2e9bf4e8551065a164a09545dae548c12a18d238b72e51e5a7b39bd8e5494b56463a0877672d0a6c1ef62c6fa0677db1b0c847773be939b1
   languageName: node
   linkType: hard
 
@@ -5362,17 +4887,17 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "fiddle@workspace:fiddle"
   dependencies:
-    "@babel/core": "npm:^7.26.0"
-    "@babel/preset-env": "npm:^7.26.0"
-    "@babel/preset-typescript": "npm:^7.26.0"
-    "@babel/register": "npm:^7.25.9"
-    "@babel/runtime": "npm:^7.26.0"
-    "@babel/runtime-corejs2": "npm:^7.26.0"
-    "@babel/runtime-corejs3": "npm:^7.26.0"
-    "@types/node": "npm:^22.10.1"
-    "@types/react": "npm:^18.3.14"
+    "@babel/core": "npm:^7.28.5"
+    "@babel/preset-env": "npm:^7.28.5"
+    "@babel/preset-typescript": "npm:^7.28.5"
+    "@babel/register": "npm:^7.28.3"
+    "@babel/runtime": "npm:^7.28.4"
+    "@babel/runtime-corejs2": "npm:^7.28.4"
+    "@babel/runtime-corejs3": "npm:^7.28.4"
+    "@types/node": "npm:^25.0.3"
+    "@types/react": "npm:^19.2.7"
     assert: "npm:^2.1.0"
-    babel-loader: "npm:^9.2.1"
+    babel-loader: "npm:^10.0.0"
     babel-plugin-transform-cx-imports: "npm:^21.3.0"
     babel-plugin-transform-cx-jsx: "npm:^21.3.0"
     babel-preset-cx-env: "npm:^24.0.0"
@@ -5380,36 +4905,37 @@ __metadata:
     casual: "npm:^1.6.2"
     codemirror: "npm:^5.65.18"
     copy-webpack-plugin: "npm:^12.0.2"
-    core-js: "npm:^3.39.0"
+    core-js: "npm:^3.47.0"
     css-loader: "npm:^7.1.2"
-    cx: "npm:^25.4.1"
-    cx-react: "npm:^24.7.1"
+    cx: "workspace:*"
+    cx-react: "workspace:*"
     deep-equal: "npm:^2.2.3"
     deepmerge: "npm:^4.3.1"
     file-loader: "npm:^6.2.0"
-    html-webpack-plugin: "npm:^5.6.3"
+    html-webpack-plugin: "npm:^5.6.5"
     if-loader: "npm:^1.0.2"
     inline-manifest-webpack-plugin: "npm:^4.0.2"
     json-loader: "npm:^0.5.7"
     mini-css-extract-plugin: "npm:^2.9.2"
+    mocha: "npm:^10.8.2"
     modify-babel-preset: "npm:^3.2.1"
     path-browserify: "npm:^1.0.1"
     prettier: "npm:^3.3.3"
     process: "npm:^0.11.10"
     query-string: "npm:^9.1.0"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
+    react: "npm:^19.2.3"
+    react-dom: "npm:^19.2.3"
     sass: "npm:^1.77.8"
-    sass-loader: "npm:^16.0.1"
+    sass-loader: "npm:^16.0.6"
     style-loader: "npm:^4.0.0"
     svg-url-loader: "npm:^8.0.0"
     url-loader: "npm:^4.1.1"
-    webpack: "npm:^5.97.1"
+    webpack: "npm:^5.103.0"
     webpack-bundle-analyzer: "npm:^4.10.2"
     webpack-cleanup-plugin: "npm:^0.5.1"
     webpack-cli: "npm:^5.1.4"
     webpack-combine-loaders: "npm:^2.0.4"
-    webpack-dev-server: "npm:^5.1.0"
+    webpack-dev-server: "npm:^5.2.2"
     webpack-md5-hash: "npm:^0.0.6"
     webpack-merge: "npm:^6.0.1"
     whatwg-fetch: "npm:^3.6.20"
@@ -5428,19 +4954,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"filesize@npm:^8.0.6":
-  version: 8.0.7
-  resolution: "filesize@npm:8.0.7"
-  checksum: 10/e35f1799c314cef49a585af82fe2d15b362f743a74c95f06e3dd99cf0334ca45516ed144f6a58649ca0e2e5e63844c0ef476d9374d5d43736d26f7c13aa49dad
-  languageName: node
-  linkType: hard
-
-"fill-range@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "fill-range@npm:7.0.1"
+"fill-range@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "fill-range@npm:7.1.1"
   dependencies:
     to-regex-range: "npm:^5.0.1"
-  checksum: 10/e260f7592fd196b4421504d3597cc76f4a1ca7a9488260d533b611fc3cefd61e9a9be1417cb82d3b01ad9f9c0ff2dbf258e1026d2445e26b0cf5148ff4250429
+  checksum: 10/a7095cb39e5bc32fada2aa7c7249d3f6b01bd1ce461a61b0adabacccabd9198500c6fb1f68a7c851a657e273fce2233ba869638897f3d7ed2e87a2d89b4436ea
   languageName: node
   linkType: hard
 
@@ -5477,16 +4996,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-cache-dir@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "find-cache-dir@npm:4.0.0"
-  dependencies:
-    common-path-prefix: "npm:^3.0.0"
-    pkg-dir: "npm:^7.0.0"
-  checksum: 10/52a456a80deeb27daa3af6e06059b63bdb9cc4af4d845fc6d6229887e505ba913cd56000349caa60bc3aa59dacdb5b4c37903d4ba34c75102d83cab330b70d2f
-  languageName: node
-  linkType: hard
-
 "find-up@npm:^3.0.0":
   version: 3.0.0
   resolution: "find-up@npm:3.0.0"
@@ -5496,7 +5005,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-up@npm:^4.0.0, find-up@npm:^4.1.0":
+"find-up@npm:^4.0.0":
   version: 4.1.0
   resolution: "find-up@npm:4.1.0"
   dependencies:
@@ -5516,16 +5025,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-up@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "find-up@npm:6.3.0"
-  dependencies:
-    locate-path: "npm:^7.1.0"
-    path-exists: "npm:^5.0.0"
-  checksum: 10/4f3bdc30d41778c647e53f4923e72de5e5fb055157031f34501c5b36c2eb59f77b997edf9cb00165c6060cda7eaa2e3da82cb6be2e61d68ad3e07c4bc4cce67e
-  languageName: node
-  linkType: hard
-
 "flat@npm:^5.0.2":
   version: 5.0.2
   resolution: "flat@npm:5.0.2"
@@ -5536,31 +5035,31 @@ __metadata:
   linkType: hard
 
 "follow-redirects@npm:^1.0.0":
-  version: 1.15.2
-  resolution: "follow-redirects@npm:1.15.2"
+  version: 1.15.11
+  resolution: "follow-redirects@npm:1.15.11"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: 10/8be0d39919770054812537d376850ccde0b4762b0501c440bd08724971a078123b55f57704f2984e0664fecc0c86adea85add63295804d9dce401cd9604c91d3
+  checksum: 10/07372fd74b98c78cf4d417d68d41fdaa0be4dcacafffb9e67b1e3cf090bc4771515e65020651528faab238f10f9b9c0d9707d6c1574a6c0387c5de1042cde9ba
   languageName: node
   linkType: hard
 
-"for-each@npm:^0.3.3":
-  version: 0.3.3
-  resolution: "for-each@npm:0.3.3"
+"for-each@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "for-each@npm:0.3.5"
   dependencies:
-    is-callable: "npm:^1.1.3"
-  checksum: 10/fdac0cde1be35610bd635ae958422e8ce0cc1313e8d32ea6d34cfda7b60850940c1fd07c36456ad76bd9c24aef6ff5e03b02beb58c83af5ef6c968a64eada676
+    is-callable: "npm:^1.2.7"
+  checksum: 10/330cc2439f85c94f4609de3ee1d32c5693ae15cdd7fe3d112c4fd9efd4ce7143f2c64ef6c2c9e0cfdb0058437f33ef05b5bdae5b98fcc903fb2143fbaf0fea0f
   languageName: node
   linkType: hard
 
 "foreground-child@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "foreground-child@npm:3.1.1"
+  version: 3.3.1
+  resolution: "foreground-child@npm:3.3.1"
   dependencies:
-    cross-spawn: "npm:^7.0.0"
+    cross-spawn: "npm:^7.0.6"
     signal-exit: "npm:^4.0.1"
-  checksum: 10/087edd44857d258c4f73ad84cb8df980826569656f2550c341b27adf5335354393eec24ea2fabd43a253233fb27cee177ebe46bd0b7ea129c77e87cb1e9936fb
+  checksum: 10/427b33f997a98073c0424e5c07169264a62cda806d8d2ded159b5b903fdfc8f0a1457e06b5fc35506497acb3f1e353f025edee796300209ac6231e80edece835
   languageName: node
   linkType: hard
 
@@ -5571,37 +5070,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fork-ts-checker-webpack-plugin@npm:^6.5.0":
-  version: 6.5.3
-  resolution: "fork-ts-checker-webpack-plugin@npm:6.5.3"
-  dependencies:
-    "@babel/code-frame": "npm:^7.8.3"
-    "@types/json-schema": "npm:^7.0.5"
-    chalk: "npm:^4.1.0"
-    chokidar: "npm:^3.4.2"
-    cosmiconfig: "npm:^6.0.0"
-    deepmerge: "npm:^4.2.2"
-    fs-extra: "npm:^9.0.0"
-    glob: "npm:^7.1.6"
-    memfs: "npm:^3.1.2"
-    minimatch: "npm:^3.0.4"
-    schema-utils: "npm:2.7.0"
-    semver: "npm:^7.3.2"
-    tapable: "npm:^1.0.0"
-  peerDependencies:
-    eslint: ">= 6"
-    typescript: ">= 2.7"
-    vue-template-compiler: "*"
-    webpack: ">= 4"
-  peerDependenciesMeta:
-    eslint:
-      optional: true
-    vue-template-compiler:
-      optional: true
-  checksum: 10/415263839afe11c291be60e3335ece3ccdc80c5e0d91eeecf0d3060cfb72c7b0cb33be326dd24b325939357d53215e10c41e8187edb5db8a08fe9aaa8aa6c510
-  languageName: node
-  linkType: hard
-
 "form-data@npm:~2.3.2":
   version: 2.3.3
   resolution: "form-data@npm:2.3.3"
@@ -5627,27 +5095,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^9.0.0":
-  version: 9.1.0
-  resolution: "fs-extra@npm:9.1.0"
-  dependencies:
-    at-least-node: "npm:^1.0.0"
-    graceful-fs: "npm:^4.2.0"
-    jsonfile: "npm:^6.0.1"
-    universalify: "npm:^2.0.0"
-  checksum: 10/08600da1b49552ed23dfac598c8fc909c66776dd130fea54fbcad22e330f7fcc13488bb995f6bc9ce5651aa35b65702faf616fe76370ee56f1aade55da982dca
-  languageName: node
-  linkType: hard
-
-"fs-minipass@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "fs-minipass@npm:2.1.0"
-  dependencies:
-    minipass: "npm:^3.0.0"
-  checksum: 10/03191781e94bc9a54bd376d3146f90fe8e082627c502185dbf7b9b3032f66b0b142c1115f3b2cc5936575fc1b44845ce903dd4c21bec2a8d69f3bd56f9cee9ec
-  languageName: node
-  linkType: hard
-
 "fs-minipass@npm:^3.0.0":
   version: 3.0.3
   resolution: "fs-minipass@npm:3.0.3"
@@ -5657,13 +5104,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-monkey@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "fs-monkey@npm:1.0.3"
-  checksum: 10/af1abe305863956f5471fe41a4026da7607e866ee5f6c9a9ad6666b51eed102cbba08043eec708e15a1c78ced56bc33c72ee1ddf79720704791c77ed8f274a47
-  languageName: node
-  linkType: hard
-
 "fs.realpath@npm:^1.0.0":
   version: 1.0.0
   resolution: "fs.realpath@npm:1.0.0"
@@ -5671,7 +5111,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+"fsevents@npm:~2.3.2":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
   dependencies:
@@ -5681,7 +5121,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
+"fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
   dependencies:
@@ -5690,13 +5130,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"function-bind@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "function-bind@npm:1.1.1"
-  checksum: 10/d83f2968030678f0b8c3f2183d63dcd969344eb8b55b4eb826a94ccac6de8b87c95bebffda37a6386c74f152284eb02956ff2c496897f35d32bdc2628ac68ac5
-  languageName: node
-  linkType: hard
-
 "function-bind@npm:^1.1.2":
   version: 1.1.2
   resolution: "function-bind@npm:1.1.2"
@@ -5715,52 +5148,51 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "gallery@workspace:gallery"
   dependencies:
-    "@babel/core": "npm:^7.26.0"
-    "@babel/preset-env": "npm:^7.26.0"
-    "@babel/preset-typescript": "npm:^7.26.0"
-    "@types/node": "npm:^22.10.1"
-    "@types/react": "npm:^18.3.14"
-    babel-loader: "npm:^9.2.1"
-    babel-plugin-transform-cx-imports: "npm:^21.3.0"
+    "@babel/core": "npm:^7.28.5"
+    "@babel/preset-env": "npm:^7.28.5"
+    "@babel/preset-typescript": "npm:^7.28.5"
+    "@types/node": "npm:^25.0.3"
+    "@types/react": "npm:^19.2.7"
+    babel-loader: "npm:^10.0.0"
+    babel-plugin-transform-cx-imports: "npm:^26.0.1"
     babel-plugin-transform-cx-jsx: "npm:^21.3.0"
     babel-preset-cx-env: "npm:^24.0.0"
     casual: "npm:^1.6.2"
     clean-webpack-plugin: "npm:^4.0.0"
     copy-webpack-plugin: "npm:^12.0.2"
-    core-js: "npm:^3.39.0"
+    core-js: "npm:^3.47.0"
     css-loader: "npm:^7.1.2"
-    cx: "npm:^25.4.1"
-    cx-react: "npm:^24.7.1"
-    cx-theme-aquamarine: "npm:^18.7.3"
-    cx-theme-dark: "npm:^18.7.1"
-    cx-theme-frost: "npm:^18.7.1"
-    cx-theme-material: "npm:^18.7.0"
-    cx-theme-material-dark: "npm:^20.1.0"
-    cx-theme-packed-dark: "npm:^24.4.1"
-    cx-theme-space-blue: "npm:^24.5.1"
+    cx: "workspace:*"
+    cx-react: "workspace:*"
+    cx-theme-aquamarine: "workspace:*"
+    cx-theme-dark: "workspace:*"
+    cx-theme-frost: "workspace:*"
+    cx-theme-material: "workspace:*"
+    cx-theme-material-dark: "workspace:*"
+    cx-theme-packed-dark: "workspace:*"
+    cx-theme-space-blue: "workspace:*"
     file-loader: "npm:^6.2.0"
-    html-webpack-plugin: "npm:^5.6.3"
+    html-webpack-plugin: "npm:^5.6.5"
     if-loader: "npm:^1.0.2"
     intl: "npm:^1.2.5"
     json-loader: "npm:^0.5.7"
     mini-css-extract-plugin: "npm:^2.9.2"
     modify-babel-preset: "npm:^3.2.1"
     plural: "npm:^1.1.0"
-    react: "npm:^18.3.1"
-    react-dev-utils: "npm:^12.0.1"
-    react-dom: "npm:^18.3.1"
+    react: "npm:^19.2.3"
+    react-dom: "npm:^19.2.3"
     sass: "npm:^1.77.8"
-    sass-loader: "npm:^16.0.1"
+    sass-loader: "npm:^16.0.6"
     style-loader: "npm:^4.0.0"
     svg-url-loader: "npm:^8.0.0"
     ts-loader: "npm:^9.5.1"
-    typescript: "npm:^5.7.2"
+    typescript: "npm:^5.9.3"
     url-loader: "npm:^4.1.1"
-    webpack: "npm:^5.97.1"
+    webpack: "npm:^5.103.0"
     webpack-bundle-analyzer: "npm:^4.10.2"
     webpack-cli: "npm:^5.1.4"
     webpack-combine-loaders: "npm:^2.0.4"
-    webpack-dev-server: "npm:^5.1.0"
+    webpack-dev-server: "npm:^5.2.2"
     webpack-merge: "npm:^6.0.1"
     whatwg-fetch: "npm:^3.6.20"
   languageName: unknown
@@ -5780,46 +5212,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "get-intrinsic@npm:1.2.0"
-  dependencies:
-    function-bind: "npm:^1.1.1"
-    has: "npm:^1.0.3"
-    has-symbols: "npm:^1.0.3"
-  checksum: 10/f57c5fe67a96adace4f8e80c288728bcd0ccfdc82c9cc53e4a5ef1ec857b5f7ef4b1c289e39649b1df226bace81103630bf7e128c821f82cd603450036e54f97
-  languageName: node
-  linkType: hard
-
-"get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "get-intrinsic@npm:1.2.2"
-  dependencies:
-    function-bind: "npm:^1.1.2"
-    has-proto: "npm:^1.0.1"
-    has-symbols: "npm:^1.0.3"
-    hasown: "npm:^2.0.0"
-  checksum: 10/aa96db4f809734d26d49b59bc8669d73a0ae792da561514e987735573a1dfaede516cd102f217a078ea2b42d4c4fb1f83d487932cb15d49826b726cc9cd4470b
-  languageName: node
-  linkType: hard
-
-"get-intrinsic@npm:^1.2.4":
-  version: 1.2.4
-  resolution: "get-intrinsic@npm:1.2.4"
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "get-intrinsic@npm:1.3.0"
   dependencies:
+    call-bind-apply-helpers: "npm:^1.0.2"
+    es-define-property: "npm:^1.0.1"
     es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.1.1"
     function-bind: "npm:^1.1.2"
-    has-proto: "npm:^1.0.1"
-    has-symbols: "npm:^1.0.3"
-    hasown: "npm:^2.0.0"
-  checksum: 10/85bbf4b234c3940edf8a41f4ecbd4e25ce78e5e6ad4e24ca2f77037d983b9ef943fd72f00f3ee97a49ec622a506b67db49c36246150377efcda1c9eb03e5f06d
+    get-proto: "npm:^1.0.1"
+    gopd: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    hasown: "npm:^2.0.2"
+    math-intrinsics: "npm:^1.1.0"
+  checksum: 10/6e9dd920ff054147b6f44cb98104330e87caafae051b6d37b13384a45ba15e71af33c3baeac7cb630a0aaa23142718dcf25b45cfdd86c184c5dcb4e56d953a10
   languageName: node
   linkType: hard
 
-"get-package-type@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "get-package-type@npm:0.1.0"
-  checksum: 10/bba0811116d11e56d702682ddef7c73ba3481f114590e705fc549f4d868972263896af313c57a25c076e3c0d567e11d919a64ba1b30c879be985fc9d44f96148
+"get-proto@npm:^1.0.0, get-proto@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "get-proto@npm:1.0.1"
+  dependencies:
+    dunder-proto: "npm:^1.0.1"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10/4fc96afdb58ced9a67558698b91433e6b037aaa6f1493af77498d7c85b141382cf223c0e5946f334fb328ee85dfe6edd06d218eaf09556f4bc4ec6005d7f5f7b
   languageName: node
   linkType: hard
 
@@ -5857,6 +5274,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob-to-regex.js@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "glob-to-regex.js@npm:1.0.1"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/f56c3f62488334bd90ca458a7661c5b908351cbb7b9cd85c9cdee69456e54a163a6eb59e9e0305273ef88b5e1707b99a729c1b6c5075006e8212e19ee33b9897
+  languageName: node
+  linkType: hard
+
 "glob-to-regexp@npm:^0.4.1":
   version: 0.4.1
   resolution: "glob-to-regexp@npm:0.4.1"
@@ -5864,22 +5290,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^10.2.2, glob@npm:^10.3.10":
-  version: 10.3.10
-  resolution: "glob@npm:10.3.10"
+"glob@npm:^10.2.2":
+  version: 10.4.5
+  resolution: "glob@npm:10.4.5"
   dependencies:
     foreground-child: "npm:^3.1.0"
-    jackspeak: "npm:^2.3.5"
-    minimatch: "npm:^9.0.1"
-    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
-    path-scurry: "npm:^1.10.1"
+    jackspeak: "npm:^3.1.2"
+    minimatch: "npm:^9.0.4"
+    minipass: "npm:^7.1.2"
+    package-json-from-dist: "npm:^1.0.0"
+    path-scurry: "npm:^1.11.1"
+  bin:
+    glob: dist/esm/bin.mjs
+  checksum: 10/698dfe11828b7efd0514cd11e573eaed26b2dff611f0400907281ce3eab0c1e56143ef9b35adc7c77ecc71fba74717b510c7c223d34ca8a98ec81777b293d4ac
+  languageName: node
+  linkType: hard
+
+"glob@npm:^10.4.5":
+  version: 10.5.0
+  resolution: "glob@npm:10.5.0"
+  dependencies:
+    foreground-child: "npm:^3.1.0"
+    jackspeak: "npm:^3.1.2"
+    minimatch: "npm:^9.0.4"
+    minipass: "npm:^7.1.2"
+    package-json-from-dist: "npm:^1.0.0"
+    path-scurry: "npm:^1.11.1"
   bin:
     glob: dist/esm/bin.mjs
-  checksum: 10/38bdb2c9ce75eb5ed168f309d4ed05b0798f640b637034800a6bf306f39d35409bf278b0eaaffaec07591085d3acb7184a201eae791468f0f617771c2486a6a8
+  checksum: 10/ab3bccfefcc0afaedbd1f480cd0c4a2c0e322eb3f0aa7ceaa31b3f00b825069f17cf0f1fc8b6f256795074b903f37c0ade37ddda6a176aa57f1c2bbfe7240653
   languageName: node
   linkType: hard
 
-"glob@npm:^7.0.3, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
+"glob@npm:^7.0.3, glob@npm:^7.1.3":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -5906,58 +5349,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"global-modules@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "global-modules@npm:2.0.0"
-  dependencies:
-    global-prefix: "npm:^3.0.0"
-  checksum: 10/4aee73adf533fe82ead2ad15c8bfb6ea4fb29e16d2d067521ab39d3b45b8f834d71c47a807e4f8f696e79497c3946d4ccdcd708da6f3a4522d65b087b8852f64
-  languageName: node
-  linkType: hard
-
-"global-prefix@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "global-prefix@npm:3.0.0"
-  dependencies:
-    ini: "npm:^1.3.5"
-    kind-of: "npm:^6.0.2"
-    which: "npm:^1.3.1"
-  checksum: 10/a405b9f83c7d88a49dc1c1e458d6585e258356810d3d0f41094265152a06a0f393b14d911f45616e35a4ce3894176a73be2984883575e778f55e90bf812d7337
-  languageName: node
-  linkType: hard
-
-"globals@npm:^11.1.0":
-  version: 11.12.0
-  resolution: "globals@npm:11.12.0"
-  checksum: 10/9f054fa38ff8de8fa356502eb9d2dae0c928217b8b5c8de1f09f5c9b6c8a96d8b9bd3afc49acbcd384a98a81fea713c859e1b09e214c60509517bb8fc2bc13c2
-  languageName: node
-  linkType: hard
-
-"globby@npm:^11.0.4":
-  version: 11.1.0
-  resolution: "globby@npm:11.1.0"
-  dependencies:
-    array-union: "npm:^2.1.0"
-    dir-glob: "npm:^3.0.1"
-    fast-glob: "npm:^3.2.9"
-    ignore: "npm:^5.2.0"
-    merge2: "npm:^1.4.1"
-    slash: "npm:^3.0.0"
-  checksum: 10/288e95e310227bbe037076ea81b7c2598ccbc3122d87abc6dab39e1eec309aa14f0e366a98cdc45237ffcfcbad3db597778c0068217dcb1950fef6249104e1b1
-  languageName: node
-  linkType: hard
-
 "globby@npm:^14.0.0":
-  version: 14.0.1
-  resolution: "globby@npm:14.0.1"
+  version: 14.1.0
+  resolution: "globby@npm:14.1.0"
   dependencies:
     "@sindresorhus/merge-streams": "npm:^2.1.0"
-    fast-glob: "npm:^3.3.2"
-    ignore: "npm:^5.2.4"
-    path-type: "npm:^5.0.0"
+    fast-glob: "npm:^3.3.3"
+    ignore: "npm:^7.0.3"
+    path-type: "npm:^6.0.0"
     slash: "npm:^5.1.0"
-    unicorn-magic: "npm:^0.1.0"
-  checksum: 10/b36f57afc45a857a884d82657603c7e1663b1e6f3f9afbeb53d12e42230469fc5b26a7e14a01e51086f3f25c138f58a7002036fcc8f3ca054097b6dd7c71d639
+    unicorn-magic: "npm:^0.3.0"
+  checksum: 10/e527ff54f0dddf60abfabd0d9e799768619d957feecd8b13ef60481f270bfdce0d28f6b09267c60f8064798fb3003b8ec991375f7fe0233fbce5304e1741368c
   languageName: node
   linkType: hard
 
@@ -5974,16 +5376,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gopd@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "gopd@npm:1.0.1"
-  dependencies:
-    get-intrinsic: "npm:^1.1.3"
-  checksum: 10/5fbc7ad57b368ae4cd2f41214bd947b045c1a4be2f194a7be1778d71f8af9dbf4004221f3b6f23e30820eb0d052b4f819fe6ebe8221e2a3c6f0ee4ef173421ca
+"gopd@npm:^1.0.1, gopd@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "gopd@npm:1.2.0"
+  checksum: 10/94e296d69f92dc1c0768fcfeecfb3855582ab59a7c75e969d5f96ce50c3d201fd86d5a2857c22565764d5bb8a816c7b1e58f133ec318cd56274da36c5e3fb1a1
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10/bf152d0ed1dc159239db1ba1f74fdbc40cb02f626770dcd5815c427ce0688c2635a06ed69af364396da4636d0408fcf7d4afdf7881724c3307e46aff30ca49e2
@@ -6023,17 +5423,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-bigints@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "has-bigints@npm:1.0.2"
-  checksum: 10/4e0426c900af034d12db14abfece02ce7dbf53f2022d28af1a97913ff4c07adb8799476d57dc44fbca0e07d1dbda2a042c2928b1f33d3f09c15de0640a7fb81b
-  languageName: node
-  linkType: hard
-
-"has-flag@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "has-flag@npm:3.0.0"
-  checksum: 10/4a15638b454bf086c8148979aae044dd6e39d63904cd452d970374fa6a87623423da485dfb814e7be882e05c096a7ccf1ebd48e7e7501d0208d8384ff4dea73b
+"has-bigints@npm:^1.0.2":
+  version: 1.1.0
+  resolution: "has-bigints@npm:1.1.0"
+  checksum: 10/90fb1b24d40d2472bcd1c8bd9dd479037ec240215869bdbff97b2be83acef57d28f7e96bdd003a21bed218d058b49097f4acc8821c05b1629cc5d48dd7bfcccd
   languageName: node
   linkType: hard
 
@@ -6044,16 +5437,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-property-descriptors@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "has-property-descriptors@npm:1.0.0"
-  dependencies:
-    get-intrinsic: "npm:^1.1.1"
-  checksum: 10/a6d3f0a266d0294d972e354782e872e2fe1b6495b321e6ef678c9b7a06a40408a6891817350c62e752adced73a94ac903c54734fee05bf65b1905ee1368194bb
-  languageName: node
-  linkType: hard
-
-"has-property-descriptors@npm:^1.0.2":
+"has-property-descriptors@npm:^1.0.0, has-property-descriptors@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-property-descriptors@npm:1.0.2"
   dependencies:
@@ -6062,44 +5446,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-proto@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "has-proto@npm:1.0.1"
-  checksum: 10/eab2ab0ed1eae6d058b9bbc4c1d99d2751b29717be80d02fd03ead8b62675488de0c7359bc1fdd4b87ef6fd11e796a9631ad4d7452d9324fdada70158c2e5be7
-  languageName: node
-  linkType: hard
-
-"has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "has-symbols@npm:1.0.3"
-  checksum: 10/464f97a8202a7690dadd026e6d73b1ceeddd60fe6acfd06151106f050303eaa75855aaa94969df8015c11ff7c505f196114d22f7386b4a471038da5874cf5e9b
-  languageName: node
-  linkType: hard
-
-"has-tostringtag@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "has-tostringtag@npm:1.0.0"
-  dependencies:
-    has-symbols: "npm:^1.0.2"
-  checksum: 10/95546e7132efc895a9ae64a8a7cf52588601fc3d52e0304ed228f336992cdf0baaba6f3519d2655e560467db35a1ed79f6420c286cc91a13aa0647a31ed92570
+"has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "has-symbols@npm:1.1.0"
+  checksum: 10/959385c98696ebbca51e7534e0dc723ada325efa3475350951363cce216d27373e0259b63edb599f72eb94d6cde8577b4b2375f080b303947e560f85692834fa
   languageName: node
   linkType: hard
 
-"has@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "has@npm:1.0.3"
+"has-tostringtag@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "has-tostringtag@npm:1.0.2"
   dependencies:
-    function-bind: "npm:^1.1.1"
-  checksum: 10/a449f3185b1d165026e8d25f6a8c3390bd25c201ff4b8c1aaf948fc6a5fcfd6507310b8c00c13a3325795ea9791fcc3d79d61eafa313b5750438fc19183df57b
+    has-symbols: "npm:^1.0.3"
+  checksum: 10/c74c5f5ceee3c8a5b8bc37719840dc3749f5b0306d818974141dda2471a1a2ca6c8e46b9d6ac222c5345df7a901c9b6f350b1e6d62763fec877e26609a401bfe
   languageName: node
   linkType: hard
 
-"hasown@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "hasown@npm:2.0.0"
+"hasown@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "hasown@npm:2.0.2"
   dependencies:
     function-bind: "npm:^1.1.2"
-  checksum: 10/c330f8d93f9d23fe632c719d4db3d698ef7d7c367d51548b836069e06a90fa9151e868c8e67353cfe98d67865bf7354855db28fa36eb1b18fa5d4a3f4e7f1c90
+  checksum: 10/7898a9c1788b2862cf0f9c345a6bec77ba4a0c0983c7f19d610c382343d4f98fa260686b225dfb1f88393a66679d2ec58ee310c1d6868c081eda7918f32cc70a
   languageName: node
   linkType: hard
 
@@ -6124,13 +5492,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-entities@npm:^2.4.0":
-  version: 2.5.2
-  resolution: "html-entities@npm:2.5.2"
-  checksum: 10/4ec12ebdf2d5ba8192c68e1aef3c1e4a4f36b29246a0a88464fe278a54517d0196d3489af46a3145c7ecacb4fc5fd50497be19eb713b810acab3f0efcf36fdc2
-  languageName: node
-  linkType: hard
-
 "html-escaper@npm:^2.0.2":
   version: 2.0.2
   resolution: "html-escaper@npm:2.0.2"
@@ -6155,9 +5516,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-webpack-plugin@npm:^5.6.3":
-  version: 5.6.3
-  resolution: "html-webpack-plugin@npm:5.6.3"
+"html-webpack-plugin@npm:^5.6.5":
+  version: 5.6.5
+  resolution: "html-webpack-plugin@npm:5.6.5"
   dependencies:
     "@types/html-minifier-terser": "npm:^6.0.0"
     html-minifier-terser: "npm:^6.0.2"
@@ -6172,7 +5533,7 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: 10/fd2bf1ac04823526c8b609555d027b38b9d61b4ba9f5c8116a37cc6b62d5b86cab1f478616e8c5344fee13663d2566f5c470c66265ecb1e9574dc38d0459889d
+  checksum: 10/89e84f6ede068242348b2c2f09da67bf39a6b22d14399eaf16e399be05a4e2bb1f3f1c71ec03b7193aed96ebe2cf61d45a70565408b271661f7ea8635b237701
   languageName: node
   linkType: hard
 
@@ -6189,9 +5550,9 @@ __metadata:
   linkType: hard
 
 "http-cache-semantics@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "http-cache-semantics@npm:4.1.1"
-  checksum: 10/362d5ed66b12ceb9c0a328fb31200b590ab1b02f4a254a697dc796850cc4385603e75f53ec59f768b2dad3bfa1464bd229f7de278d2899a0e3beffc634b6683f
+  version: 4.2.0
+  resolution: "http-cache-semantics@npm:4.2.0"
+  checksum: 10/4efd2dfcfeea9d5e88c84af450b9980be8a43c2c8179508b1c57c7b4421c855f3e8efe92fa53e0b3f4a43c85824ada930eabbc306d1b3beab750b6dcc5187693
   languageName: node
   linkType: hard
 
@@ -6228,25 +5589,25 @@ __metadata:
   linkType: hard
 
 "http-parser-js@npm:>=0.5.1":
-  version: 0.5.8
-  resolution: "http-parser-js@npm:0.5.8"
-  checksum: 10/2a78a567ee6366dae0129d819b799dce1f95ec9732c5ab164a78ee69804ffb984abfa0660274e94e890fc54af93546eb9f12b6d10edbaed017e2d41c29b7cf29
+  version: 0.5.10
+  resolution: "http-parser-js@npm:0.5.10"
+  checksum: 10/33c53b458cfdf7e43f1517f9bcb6bed1c614b1c7c5d65581a84304110eb9eb02a48f998c7504b8bee432ef4a8ec9318e7009406b506b28b5610fed516242b20a
   languageName: node
   linkType: hard
 
 "http-proxy-agent@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "http-proxy-agent@npm:7.0.0"
+  version: 7.0.2
+  resolution: "http-proxy-agent@npm:7.0.2"
   dependencies:
     agent-base: "npm:^7.1.0"
     debug: "npm:^4.3.4"
-  checksum: 10/dbaaf3d9f3fc4df4a5d7ec45d456ec50f575240b557160fa63427b447d1f812dd7fe4a4f17d2e1ba003d231f07edf5a856ea6d91cb32d533062ff20a7803ccac
+  checksum: 10/d062acfa0cb82beeb558f1043c6ba770ea892b5fb7b28654dbc70ea2aeea55226dd34c02a294f6c1ca179a5aa483c4ea641846821b182edbd9cc5d89b54c6848
   languageName: node
   linkType: hard
 
-"http-proxy-middleware@npm:^2.0.3":
-  version: 2.0.6
-  resolution: "http-proxy-middleware@npm:2.0.6"
+"http-proxy-middleware@npm:^2.0.9":
+  version: 2.0.9
+  resolution: "http-proxy-middleware@npm:2.0.9"
   dependencies:
     "@types/http-proxy": "npm:^1.17.8"
     http-proxy: "npm:^1.18.1"
@@ -6258,7 +5619,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/express":
       optional: true
-  checksum: 10/768e7ae5a422bbf4b866b64105b4c2d1f468916b7b0e9c96750551c7732383069b411aa7753eb7b34eab113e4f77fb770122cb7fb9c8ec87d138d5ddaafda891
+  checksum: 10/4ece416a91d52e96f8136c5f4abfbf7ac2f39becbad21fa8b158a12d7e7d8f808287ff1ae342b903fd1f15f2249dee87fabc09e1f0e73106b83331c496d67660
   languageName: node
   linkType: hard
 
@@ -6285,12 +5646,12 @@ __metadata:
   linkType: hard
 
 "https-proxy-agent@npm:^7.0.1":
-  version: 7.0.2
-  resolution: "https-proxy-agent@npm:7.0.2"
+  version: 7.0.6
+  resolution: "https-proxy-agent@npm:7.0.6"
   dependencies:
-    agent-base: "npm:^7.0.2"
+    agent-base: "npm:^7.1.2"
     debug: "npm:4"
-  checksum: 10/9ec844f78fd643608239c9c3f6819918631df5cd3e17d104cc507226a39b5d4adda9d790fc9fd63ac0d2bb8a761b2f9f60faa80584a9bf9d7f2e8c5ed0acd330
+  checksum: 10/784b628cbd55b25542a9d85033bdfd03d4eda630fb8b3c9477959367f3be95dc476ed2ecbb9836c359c7c698027fc7b45723a302324433590f45d6c1706e8c13
   languageName: node
   linkType: hard
 
@@ -6301,6 +5662,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hyperdyperid@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "hyperdyperid@npm:1.2.0"
+  checksum: 10/64abb5568ff17aa08ac0175ae55e46e22831c5552be98acdd1692081db0209f36fff58b31432017b4e1772c178962676a2cc3c54e4d5d7f020d7710cec7ad7a6
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -6342,67 +5710,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.2.0":
-  version: 5.2.4
-  resolution: "ignore@npm:5.2.4"
-  checksum: 10/4f7caf5d2005da21a382d4bd1d2aa741a3bed51de185c8562dd7f899a81a620ac4fd0619b06f7029a38ae79e4e4c134399db3bd0192c703c3ef54bb82df3086c
-  languageName: node
-  linkType: hard
-
-"ignore@npm:^5.2.4":
-  version: 5.3.1
-  resolution: "ignore@npm:5.3.1"
-  checksum: 10/0a884c2fbc8c316f0b9f92beaf84464253b73230a4d4d286697be45fca081199191ca33e1c2e82d9e5f851f5e9a48a78e25a35c951e7eb41e59f150db3530065
+"ignore@npm:^7.0.3":
+  version: 7.0.5
+  resolution: "ignore@npm:7.0.5"
+  checksum: 10/f134b96a4de0af419196f52c529d5c6120c4456ff8a6b5a14ceaaa399f883e15d58d2ce651c9b69b9388491d4669dda47285d307e827de9304a53a1824801bc6
   languageName: node
   linkType: hard
 
 "illuminate-js@npm:^1.0.0-alpha.2":
   version: 1.0.0-alpha.2
   resolution: "illuminate-js@npm:1.0.0-alpha.2"
-  checksum: 10/a5ee977dfe41b929e5d33c183069052a85da6d4e855bccd80f83ba4b9f48f4b3b994bc72a6f15e71160abff66fa401d02ec2ded7c5048c9b7bbf41abd5c5e135
-  languageName: node
-  linkType: hard
-
-"immer@npm:^10.1.1":
-  version: 10.1.1
-  resolution: "immer@npm:10.1.1"
-  checksum: 10/9dacf1e8c201d69191ccd88dc5d733bafe166cd45a5a360c5d7c88f1de0dff974a94114d72b35f3106adfe587fcfb131c545856184a2247d89d735ad25589863
-  languageName: node
-  linkType: hard
-
-"immer@npm:^9.0.7":
-  version: 9.0.21
-  resolution: "immer@npm:9.0.21"
-  checksum: 10/8455d6b4dc8abfe40f06eeec9bcc944d147c81279424c0f927a4d4905ae34e5af19ab6da60bcc700c14f51c452867d7089b3b9236f5a9a2248e39b4a09ee89de
+  checksum: 10/a5ee977dfe41b929e5d33c183069052a85da6d4e855bccd80f83ba4b9f48f4b3b994bc72a6f15e71160abff66fa401d02ec2ded7c5048c9b7bbf41abd5c5e135
   languageName: node
   linkType: hard
 
-"immutable@npm:^4.0.0":
-  version: 4.3.0
-  resolution: "immutable@npm:4.3.0"
-  checksum: 10/0a2d1cb374da24752a063466ae5a8189bfcbcfa38f307c3193cebd9224209b467ca14cc6f94b89e98c3c73572e12d23460078fb28931b34b6bd5dbc71f3a60cd
+"immer@npm:^10.1.1":
+  version: 10.1.3
+  resolution: "immer@npm:10.1.3"
+  checksum: 10/672faf5fc84177eecbfb49143ea8f6b5c1f981bd78c57e1562469354f6df658921ed6e0372b9ceed1e07c031e0c6d66863c4df80605928c6c774840b945aef83
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.1.0":
-  version: 3.3.0
-  resolution: "import-fresh@npm:3.3.0"
-  dependencies:
-    parent-module: "npm:^1.0.0"
-    resolve-from: "npm:^4.0.0"
-  checksum: 10/2cacfad06e652b1edc50be650f7ec3be08c5e5a6f6d12d035c440a42a8cc028e60a5b99ca08a77ab4d6b1346da7d971915828f33cdab730d3d42f08242d09baa
+"immutable@npm:^5.0.2":
+  version: 5.1.3
+  resolution: "immutable@npm:5.1.3"
+  checksum: 10/6d29b29036143e7ea1e7f7be581c71bca873ea77c175d33c6c839bf4017265a58c41ec269e3ffcd7b483797fc7fa9c928b4ed3d6edfeeb1b5711d84f60d04090
   languageName: node
   linkType: hard
 
 "import-local@npm:^3.0.2":
-  version: 3.1.0
-  resolution: "import-local@npm:3.1.0"
+  version: 3.2.0
+  resolution: "import-local@npm:3.2.0"
   dependencies:
     pkg-dir: "npm:^4.2.0"
     resolve-cwd: "npm:^3.0.0"
   bin:
     import-local-fixture: fixtures/cli.js
-  checksum: 10/bfcdb63b5e3c0e245e347f3107564035b128a414c4da1172a20dc67db2504e05ede4ac2eee1252359f78b0bfd7b19ef180aec427c2fce6493ae782d73a04cddd
+  checksum: 10/0b0b0b412b2521739fbb85eeed834a3c34de9bc67e670b3d0b86248fc460d990a7b116ad056c084b87a693ef73d1f17268d6a5be626bb43c998a8b1c8a230004
   languageName: node
   linkType: hard
 
@@ -6413,13 +5757,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"indent-string@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "indent-string@npm:4.0.0"
-  checksum: 10/cd3f5cbc9ca2d624c6a1f53f12e6b341659aba0e2d3254ae2b4464aaea8b4294cdb09616abbc59458f980531f2429784ed6a420d48d245bcad0811980c9efae9
-  languageName: node
-  linkType: hard
-
 "inflight@npm:^1.0.4":
   version: 1.0.6
   resolution: "inflight@npm:1.0.6"
@@ -6444,7 +5781,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ini@npm:^1.3.5, ini@npm:~1.3.0":
+"ini@npm:~1.3.0":
   version: 1.3.8
   resolution: "ini@npm:1.3.8"
   checksum: 10/314ae176e8d4deb3def56106da8002b462221c174ddb7ce0c49ee72c8cd1f9044f7b10cc555a7d8850982c3b9ca96fc212122749f5234bc2b6fb05fb942ed566
@@ -6460,14 +5797,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.4":
-  version: 1.0.5
-  resolution: "internal-slot@npm:1.0.5"
+"internal-slot@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "internal-slot@npm:1.1.0"
   dependencies:
-    get-intrinsic: "npm:^1.2.0"
-    has: "npm:^1.0.3"
-    side-channel: "npm:^1.0.4"
-  checksum: 10/e2eb5b348e427957dd4092cb57b9374a2cbcabbf61e5e5b4d99cb68eeaae29394e8efd79f23dc2b1831253346f3c16b82010737b84841225e934d80d04d68643
+    es-errors: "npm:^1.3.0"
+    hasown: "npm:^2.0.2"
+    side-channel: "npm:^1.1.0"
+  checksum: 10/1d5219273a3dab61b165eddf358815eefc463207db33c20fcfca54717da02e3f492003757721f972fd0bf21e4b426cab389c5427b99ceea4b8b670dc88ee6d4a
   languageName: node
   linkType: hard
 
@@ -6492,10 +5829,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ip@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "ip@npm:2.0.0"
-  checksum: 10/1270b11e534a466fb4cf4426cbcc3a907c429389f7f4e4e3b288b42823562e88d6a509ceda8141a507de147ca506141f745005c0aa144569d94cf24a54eb52bc
+"ip-address@npm:^10.0.1":
+  version: 10.0.1
+  resolution: "ip-address@npm:10.0.1"
+  checksum: 10/09731acda32cd8e14c46830c137e7e5940f47b36d63ffb87c737331270287d631cf25aa95570907a67d3f919fdb25f4470c404eda21e62f22e0a55927f4dd0fb
   languageName: node
   linkType: hard
 
@@ -6507,46 +5844,39 @@ __metadata:
   linkType: hard
 
 "ipaddr.js@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "ipaddr.js@npm:2.1.0"
-  checksum: 10/42c16d95cf451399707c2c46e605b88db1ea2b1477b25774b5a7ee96852b0bb1efdc01adbff01fedbe702ff246e1aca5c5e915a6f5a1f1485233a5f7c2eb73c2
+  version: 2.2.0
+  resolution: "ipaddr.js@npm:2.2.0"
+  checksum: 10/9e1cdd9110b3bca5d910ab70d7fb1933e9c485d9b92cb14ef39f30c412ba3fe02a553921bf696efc7149cc653453c48ccf173adb996ec27d925f1f340f872986
   languageName: node
   linkType: hard
 
 "is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "is-arguments@npm:1.1.1"
+  version: 1.2.0
+  resolution: "is-arguments@npm:1.2.0"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/a170c7e26082e10de9be6e96d32ae3db4d5906194051b792e85fae3393b53cf2cb5b3557863e5c8ccbab55e2fd8f2f75aa643d437613f72052cf0356615c34be
+    call-bound: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/471a8ef631b8ee8829c43a8ab05c081700c0e25180c73d19f3bf819c1a8448c426a9e8e601f278973eca68966384b16ceb78b8c63af795b099cd199ea5afc457
   languageName: node
   linkType: hard
 
-"is-array-buffer@npm:^3.0.1, is-array-buffer@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "is-array-buffer@npm:3.0.2"
+"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "is-array-buffer@npm:3.0.5"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.2.0"
-    is-typed-array: "npm:^1.1.10"
-  checksum: 10/dcac9dda66ff17df9cabdc58214172bf41082f956eab30bb0d86bc0fab1e44b690fc8e1f855cf2481245caf4e8a5a006a982a71ddccec84032ed41f9d8da8c14
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10/ef1095c55b963cd0dcf6f88a113e44a0aeca91e30d767c475e7d746d28d1195b10c5076b94491a7a0cd85020ca6a4923070021d74651d093dc909e9932cf689b
   languageName: node
   linkType: hard
 
-"is-arrayish@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "is-arrayish@npm:0.2.1"
-  checksum: 10/73ced84fa35e59e2c57da2d01e12cd01479f381d7f122ce41dcbb713f09dbfc651315832cd2bf8accba7681a69e4d6f1e03941d94dd10040d415086360e7005e
-  languageName: node
-  linkType: hard
-
-"is-bigint@npm:^1.0.1":
-  version: 1.0.4
-  resolution: "is-bigint@npm:1.0.4"
+"is-bigint@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "is-bigint@npm:1.1.0"
   dependencies:
-    has-bigints: "npm:^1.0.1"
-  checksum: 10/cc981cf0564c503aaccc1e5f39e994ae16ae2d1a8fcd14721f14ad431809071f39ec568cfceef901cff408045f1a6d6bac90d1b43eeb0b8e3bc34c8eb1bdb4c4
+    has-bigints: "npm:^1.0.2"
+  checksum: 10/10cf327310d712fe227cfaa32d8b11814c214392b6ac18c827f157e1e85363cf9c8e2a22df526689bd5d25e53b58cc110894787afb54e138e7c504174dba15fd
   languageName: node
   linkType: hard
 
@@ -6559,13 +5889,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-boolean-object@npm:^1.1.0":
-  version: 1.1.2
-  resolution: "is-boolean-object@npm:1.1.2"
+"is-boolean-object@npm:^1.2.1":
+  version: 1.2.2
+  resolution: "is-boolean-object@npm:1.2.2"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/ba794223b56a49a9f185e945eeeb6b7833b8ea52a335cec087d08196cf27b538940001615d3bb976511287cefe94e5907d55f00bb49580533f9ca9b4515fcc2e
+    call-bound: "npm:^1.0.3"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/051fa95fdb99d7fbf653165a7e6b2cba5d2eb62f7ffa81e793a790f3fb5366c91c1b7b6af6820aa2937dd86c73aa3ca9d9ca98f500988457b1c59692c52ba911
   languageName: node
   linkType: hard
 
@@ -6576,32 +5906,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-callable@npm:^1.1.3":
+"is-callable@npm:^1.2.7":
   version: 1.2.7
   resolution: "is-callable@npm:1.2.7"
   checksum: 10/48a9297fb92c99e9df48706241a189da362bff3003354aea4048bd5f7b2eb0d823cd16d0a383cece3d76166ba16d85d9659165ac6fcce1ac12e6c649d66dbdb9
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.13.0":
-  version: 2.13.1
-  resolution: "is-core-module@npm:2.13.1"
+"is-core-module@npm:^2.16.0":
+  version: 2.16.1
+  resolution: "is-core-module@npm:2.16.1"
   dependencies:
-    hasown: "npm:^2.0.0"
-  checksum: 10/d53bd0cc24b0a0351fb4b206ee3908f71b9bbf1c47e9c9e14e5f06d292af1663704d2abd7e67700d6487b2b7864e0d0f6f10a1edf1892864bdffcb197d1845a2
+    hasown: "npm:^2.0.2"
+  checksum: 10/452b2c2fb7f889cbbf7e54609ef92cf6c24637c568acc7e63d166812a0fb365ae8a504c333a29add8bdb1686704068caa7f4e4b639b650dde4f00a038b8941fb
   languageName: node
   linkType: hard
 
 "is-date-object@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "is-date-object@npm:1.0.5"
+  version: 1.1.0
+  resolution: "is-date-object@npm:1.1.0"
   dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/cc80b3a4b42238fa0d358b9a6230dae40548b349e64a477cb7c5eff9b176ba194c11f8321daaf6dd157e44073e9b7fd01f87db1f14952a88d5657acdcd3a56e2
+    call-bound: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/3a811b2c3176fb31abee1d23d3dc78b6c65fd9c07d591fcb67553cab9e7f272728c3dd077d2d738b53f9a2103255b0a6e8dfc9568a7805c56a78b2563e8d1dec
   languageName: node
   linkType: hard
 
-"is-docker@npm:^2.0.0, is-docker@npm:^2.1.1":
+"is-docker@npm:^2.0.0":
   version: 2.2.1
   resolution: "is-docker@npm:2.2.1"
   bin:
@@ -6634,11 +5965,14 @@ __metadata:
   linkType: hard
 
 "is-generator-function@npm:^1.0.7":
-  version: 1.0.10
-  resolution: "is-generator-function@npm:1.0.10"
+  version: 1.1.0
+  resolution: "is-generator-function@npm:1.1.0"
   dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/499a3ce6361064c3bd27fbff5c8000212d48506ebe1977842bbd7b3e708832d0deb1f4cc69186ece3640770e8c4f1287b24d99588a0b8058b2dbdd344bc1f47f
+    call-bound: "npm:^1.0.3"
+    get-proto: "npm:^1.0.0"
+    has-tostringtag: "npm:^1.0.2"
+    safe-regex-test: "npm:^1.1.0"
+  checksum: 10/5906ff51a856a5fbc6b90a90fce32040b0a6870da905f98818f1350f9acadfc9884f7c3dec833fce04b83dd883937b86a190b6593ede82e8b1af8b6c4ecf7cbd
   languageName: node
   linkType: hard
 
@@ -6662,17 +5996,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-lambda@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-lambda@npm:1.0.1"
-  checksum: 10/93a32f01940220532e5948538699ad610d5924ac86093fcee83022252b363eb0cc99ba53ab084a04e4fb62bf7b5731f55496257a4c38adf87af9c4d352c71c35
+"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-map@npm:2.0.3"
+  checksum: 10/8de7b41715b08bcb0e5edb0fb9384b80d2d5bcd10e142188f33247d19ff078abaf8e9b6f858e2302d8d05376a26a55cd23a3c9f8ab93292b02fcd2cc9e4e92bb
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.1, is-map@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "is-map@npm:2.0.2"
-  checksum: 10/60ba910f835f2eacb1fdf5b5a6c60fe1c702d012a7673e6546992bcc0c873f62ada6e13d327f9e48f1720d49c152d6cdecae1fa47a261ef3d247c3ce6f0e1d39
+"is-module@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-module@npm:1.0.0"
+  checksum: 10/8cd5390730c7976fb4e8546dd0b38865ee6f7bacfa08dfbb2cc07219606755f0b01709d9361e01f13009bbbd8099fa2927a8ed665118a6105d66e40f1b838c3f
   languageName: node
   linkType: hard
 
@@ -6687,18 +6021,19 @@ __metadata:
   linkType: hard
 
 "is-network-error@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "is-network-error@npm:1.0.1"
-  checksum: 10/165d61500c4186c62db5a3a693d6bfa14ca40fe9b471ef4cd4f27b20ef6760880faf5386dc01ca9867531631782941fedaa94521d09959edf71f046e393c7b91
+  version: 1.3.0
+  resolution: "is-network-error@npm:1.3.0"
+  checksum: 10/56dc0b8ed9c0bb72202058f172ad0c3121cf68772e8cbba343d3775f6e2ec7877d423cbcea45f4cedcd345de8693de1b52dfe0c6fc15d652c4aa98c2abf0185a
   languageName: node
   linkType: hard
 
-"is-number-object@npm:^1.0.4":
-  version: 1.0.7
-  resolution: "is-number-object@npm:1.0.7"
+"is-number-object@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-number-object@npm:1.1.1"
   dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/8700dcf7f602e0a9625830541345b8615d04953655acbf5c6d379c58eb1af1465e71227e95d501343346e1d49b6f2d53cbc166b1fc686a7ec19151272df582f9
+    call-bound: "npm:^1.0.3"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/a5922fb8779ab1ea3b8a9c144522b3d0bea5d9f8f23f7a72470e61e1e4df47714e28e0154ac011998b709cce260c3c9447ad3cd24a96c2f2a0abfdb2cbdc76c8
   languageName: node
   linkType: hard
 
@@ -6734,6 +6069,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-path-inside@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "is-path-inside@npm:3.0.3"
+  checksum: 10/abd50f06186a052b349c15e55b182326f1936c89a78bf6c8f2b707412517c097ce04bc49a0ca221787bc44e1049f51f09a2ffb63d22899051988d3a618ba13e9
+  languageName: node
+  linkType: hard
+
 "is-plain-obj@npm:^2.1.0":
   version: 2.1.0
   resolution: "is-plain-obj@npm:2.1.0"
@@ -6764,36 +6106,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "is-regex@npm:1.1.4"
+"is-regex@npm:^1.1.4, is-regex@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "is-regex@npm:1.2.1"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/36d9174d16d520b489a5e9001d7d8d8624103b387be300c50f860d9414556d0485d74a612fdafc6ebbd5c89213d947dcc6b6bff6b2312093f71ea03cbb19e564
-  languageName: node
-  linkType: hard
-
-"is-root@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "is-root@npm:2.1.0"
-  checksum: 10/37eea0822a2a9123feb58a9d101558ba276771a6d830f87005683349a9acff15958a9ca590a44e778c6b335660b83e85c744789080d734f6081a935a4880aee2
+    call-bound: "npm:^1.0.2"
+    gopd: "npm:^1.2.0"
+    has-tostringtag: "npm:^1.0.2"
+    hasown: "npm:^2.0.2"
+  checksum: 10/c42b7efc5868a5c9a4d8e6d3e9816e8815c611b09535c00fead18a1138455c5cb5e1887f0023a467ad3f9c419d62ba4dc3d9ba8bafe55053914d6d6454a945d2
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.1, is-set@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "is-set@npm:2.0.2"
-  checksum: 10/d89e82acdc7760993474f529e043f9c4a1d63ed4774d21cc2e331d0e401e5c91c27743cd7c889137028f6a742234759a4bd602368fbdbf0b0321994aefd5603f
+"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-set@npm:2.0.3"
+  checksum: 10/5685df33f0a4a6098a98c72d94d67cad81b2bc72f1fb2091f3d9283c4a1c582123cd709145b02a9745f0ce6b41e3e43f1c944496d1d74d4ea43358be61308669
   languageName: node
   linkType: hard
 
 "is-shared-array-buffer@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "is-shared-array-buffer@npm:1.0.2"
+  version: 1.0.4
+  resolution: "is-shared-array-buffer@npm:1.0.4"
   dependencies:
-    call-bind: "npm:^1.0.2"
-  checksum: 10/23d82259d6cd6dbb7c4ff3e4efeff0c30dbc6b7f88698498c17f9821cb3278d17d2b6303a5341cbd638ab925a28f3f086a6c79b3df70ac986cc526c725d43b4f
+    call-bound: "npm:^1.0.3"
+  checksum: 10/0380d7c60cc692856871526ffcd38a8133818a2ee42d47bb8008248a0cd2121d8c8b5f66b6da3cac24bc5784553cacb6faaf678f66bc88c6615b42af2825230e
   languageName: node
   linkType: hard
 
@@ -6804,34 +6141,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-string@npm:^1.0.5, is-string@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "is-string@npm:1.0.7"
+"is-string@npm:^1.0.7, is-string@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-string@npm:1.1.1"
   dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/2bc292fe927493fb6dfc3338c099c3efdc41f635727c6ebccf704aeb2a27bca7acb9ce6fd34d103db78692b10b22111a8891de26e12bfa1c5e11e263c99d1fef
+    call-bound: "npm:^1.0.3"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/5277cb9e225a7cc8a368a72623b44a99f2cfa139659c6b203553540681ad4276bfc078420767aad0e73eef5f0bd07d4abf39a35d37ec216917879d11cebc1f8b
   languageName: node
   linkType: hard
 
-"is-symbol@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "is-symbol@npm:1.0.4"
+"is-symbol@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-symbol@npm:1.1.1"
   dependencies:
-    has-symbols: "npm:^1.0.2"
-  checksum: 10/a47dd899a84322528b71318a89db25c7ecdec73197182dad291df15ffea501e17e3c92c8de0bfb50e63402747399981a687b31c519971b1fa1a27413612be929
+    call-bound: "npm:^1.0.2"
+    has-symbols: "npm:^1.1.0"
+    safe-regex-test: "npm:^1.1.0"
+  checksum: 10/db495c0d8cd0a7a66b4f4ef7fccee3ab5bd954cb63396e8ac4d32efe0e9b12fdfceb851d6c501216a71f4f21e5ff20fc2ee845a3d52d455e021c466ac5eb2db2
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.3":
-  version: 1.1.10
-  resolution: "is-typed-array@npm:1.1.10"
+"is-typed-array@npm:^1.1.3":
+  version: 1.1.15
+  resolution: "is-typed-array@npm:1.1.15"
   dependencies:
-    available-typed-arrays: "npm:^1.0.5"
-    call-bind: "npm:^1.0.2"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/2392b2473bbc994f5c30d6848e32bab3cab6c80b795aaec3020baf5419ff7df38fc11b3a043eb56d50f842394c578dbb204a7a29398099f895cf111c5b27f327
+    which-typed-array: "npm:^1.1.16"
+  checksum: 10/e8cf60b9ea85667097a6ad68c209c9722cfe8c8edf04d6218366469e51944c5cc25bae45ffb845c23f811d262e4314d3b0168748eb16711aa34d12724cdf0735
   languageName: node
   linkType: hard
 
@@ -6849,20 +6185,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakmap@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "is-weakmap@npm:2.0.1"
-  checksum: 10/289fa4e8ba1bdda40ca78481266f6925b7c46a85599e6a41a77010bf91e5a24dfb660db96863bbf655ecdbda0ab517204d6a4e0c151dbec9d022c556321f3776
+"is-weakmap@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "is-weakmap@npm:2.0.2"
+  checksum: 10/a7b7e23206c542dcf2fa0abc483142731788771527e90e7e24f658c0833a0d91948a4f7b30d78f7a65255a48512e41a0288b778ba7fc396137515c12e201fd11
   languageName: node
   linkType: hard
 
-"is-weakset@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "is-weakset@npm:2.0.2"
+"is-weakset@npm:^2.0.3":
+  version: 2.0.4
+  resolution: "is-weakset@npm:2.0.4"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.1.1"
-  checksum: 10/8f2ddb9639716fd7936784e175ea1183c5c4c05274c34f34f6a53175313cb1c9c35a8b795623306995e2f7cc8f25aa46302f15a2113e51c5052d447be427195c
+    call-bound: "npm:^1.0.3"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10/1d5e1d0179beeed3661125a6faa2e59bfb48afda06fc70db807f178aa0ebebc3758fb6358d76b3d528090d5ef85148c345dcfbf90839592fe293e3e5e82f2134
   languageName: node
   linkType: hard
 
@@ -6926,80 +6262,89 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-lib-coverage@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "istanbul-lib-coverage@npm:3.2.0"
-  checksum: 10/31621b84ad29339242b63d454243f558a7958ee0b5177749bacf1f74be7d95d3fd93853738ef7eebcddfaf3eab014716e51392a8dbd5aa1bdc1b15c2ebc53c24
+"jackspeak@npm:^3.1.2":
+  version: 3.4.3
+  resolution: "jackspeak@npm:3.4.3"
+  dependencies:
+    "@isaacs/cliui": "npm:^8.0.2"
+    "@pkgjs/parseargs": "npm:^0.11.0"
+  dependenciesMeta:
+    "@pkgjs/parseargs":
+      optional: true
+  checksum: 10/96f8786eaab98e4bf5b2a5d6d9588ea46c4d06bbc4f2eb861fdd7b6b182b16f71d8a70e79820f335d52653b16d4843b29dd9cdcf38ae80406756db9199497cf3
   languageName: node
   linkType: hard
 
-"istanbul-lib-instrument@npm:^5.0.4":
-  version: 5.2.1
-  resolution: "istanbul-lib-instrument@npm:5.2.1"
+"jest-diff@npm:30.1.2":
+  version: 30.1.2
+  resolution: "jest-diff@npm:30.1.2"
   dependencies:
-    "@babel/core": "npm:^7.12.3"
-    "@babel/parser": "npm:^7.14.7"
-    "@istanbuljs/schema": "npm:^0.1.2"
-    istanbul-lib-coverage: "npm:^3.2.0"
-    semver: "npm:^6.3.0"
-  checksum: 10/bbc4496c2f304d799f8ec22202ab38c010ac265c441947f075c0f7d46bd440b45c00e46017cf9053453d42182d768b1d6ed0e70a142c95ab00df9843aa5ab80e
+    "@jest/diff-sequences": "npm:30.0.1"
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    pretty-format: "npm:30.0.5"
+  checksum: 10/5f1a66750dec98b94f3a9dfaaba32f27bd7ebcff3f4303b1bd72fc5665d70eb146c8077a0b9baeed89e42008d0f28629b2c33696e0e6faabad130bebd7a14383
   languageName: node
   linkType: hard
 
-"jackspeak@npm:^2.3.5":
-  version: 2.3.6
-  resolution: "jackspeak@npm:2.3.6"
+"jest-matcher-utils@npm:30.1.2":
+  version: 30.1.2
+  resolution: "jest-matcher-utils@npm:30.1.2"
   dependencies:
-    "@isaacs/cliui": "npm:^8.0.2"
-    "@pkgjs/parseargs": "npm:^0.11.0"
-  dependenciesMeta:
-    "@pkgjs/parseargs":
-      optional: true
-  checksum: 10/6e6490d676af8c94a7b5b29b8fd5629f21346911ebe2e32931c2a54210134408171c24cee1a109df2ec19894ad04a429402a8438cbf5cc2794585d35428ace76
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    jest-diff: "npm:30.1.2"
+    pretty-format: "npm:30.0.5"
+  checksum: 10/2bad65eeec699b694335e219ac8115323e6c651ca2fb625f83b6e7f5bf7940302e3b0f1683c4c7d88be0112a7892d00db42515aa2e14f71dd8c2742496d5124c
+  languageName: node
+  linkType: hard
+
+"jest-message-util@npm:30.1.0":
+  version: 30.1.0
+  resolution: "jest-message-util@npm:30.1.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.27.1"
+    "@jest/types": "npm:30.0.5"
+    "@types/stack-utils": "npm:^2.0.3"
+    chalk: "npm:^4.1.2"
+    graceful-fs: "npm:^4.2.11"
+    micromatch: "npm:^4.0.8"
+    pretty-format: "npm:30.0.5"
+    slash: "npm:^3.0.0"
+    stack-utils: "npm:^2.0.6"
+  checksum: 10/8006b8e6070e18d28cfd0bcdce7f7538688f59e1edc1ebf705a2435dc35ad293b37c70d97fb7624cf64e554b229f815d27c85b9bcfc9177584dad949c9375ff7
   languageName: node
   linkType: hard
 
-"jest-haste-map@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "jest-haste-map@npm:29.7.0"
+"jest-mock@npm:30.0.5":
+  version: 30.0.5
+  resolution: "jest-mock@npm:30.0.5"
   dependencies:
-    "@jest/types": "npm:^29.6.3"
-    "@types/graceful-fs": "npm:^4.1.3"
+    "@jest/types": "npm:30.0.5"
     "@types/node": "npm:*"
-    anymatch: "npm:^3.0.3"
-    fb-watchman: "npm:^2.0.0"
-    fsevents: "npm:^2.3.2"
-    graceful-fs: "npm:^4.2.9"
-    jest-regex-util: "npm:^29.6.3"
-    jest-util: "npm:^29.7.0"
-    jest-worker: "npm:^29.7.0"
-    micromatch: "npm:^4.0.4"
-    walker: "npm:^1.0.8"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10/8531b42003581cb18a69a2774e68c456fb5a5c3280b1b9b77475af9e346b6a457250f9d756bfeeae2fe6cbc9ef28434c205edab9390ee970a919baddfa08bb85
+    jest-util: "npm:30.0.5"
+  checksum: 10/a20386a9e4019c8e2957b95232a85dda6b705d810c2f9267278b40369db247bc311f84eeed72e13b227e15f40d554bd9fd66fafb4adb629dd37c9c14087a4106
   languageName: node
   linkType: hard
 
-"jest-regex-util@npm:^29.6.3":
-  version: 29.6.3
-  resolution: "jest-regex-util@npm:29.6.3"
-  checksum: 10/0518beeb9bf1228261695e54f0feaad3606df26a19764bc19541e0fc6e2a3737191904607fb72f3f2ce85d9c16b28df79b7b1ec9443aa08c3ef0e9efda6f8f2a
+"jest-regex-util@npm:30.0.1":
+  version: 30.0.1
+  resolution: "jest-regex-util@npm:30.0.1"
+  checksum: 10/fa8dac80c3e94db20d5e1e51d1bdf101cf5ede8f4e0b8f395ba8b8ea81e71804ffd747452a6bb6413032865de98ac656ef8ae43eddd18d980b6442a2764ed562
   languageName: node
   linkType: hard
 
-"jest-util@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "jest-util@npm:29.7.0"
+"jest-util@npm:30.0.5":
+  version: 30.0.5
+  resolution: "jest-util@npm:30.0.5"
   dependencies:
-    "@jest/types": "npm:^29.6.3"
+    "@jest/types": "npm:30.0.5"
     "@types/node": "npm:*"
-    chalk: "npm:^4.0.0"
-    ci-info: "npm:^3.2.0"
-    graceful-fs: "npm:^4.2.9"
-    picomatch: "npm:^2.2.3"
-  checksum: 10/30d58af6967e7d42bd903ccc098f3b4d3859ed46238fbc88d4add6a3f10bea00c226b93660285f058bc7a65f6f9529cf4eb80f8d4707f79f9e3a23686b4ab8f3
+    chalk: "npm:^4.1.2"
+    ci-info: "npm:^4.2.0"
+    graceful-fs: "npm:^4.2.11"
+    picomatch: "npm:^4.0.2"
+  checksum: 10/44207c4b8c27b0cce809c76280c8a949514badef6af875edafd153f1df638727235b472f8790953045214ce3f17ad77a9dfd5c1826444c0431fe64bd580ba2d6
   languageName: node
   linkType: hard
 
@@ -7014,37 +6359,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "jest-worker@npm:29.7.0"
-  dependencies:
-    "@types/node": "npm:*"
-    jest-util: "npm:^29.7.0"
-    merge-stream: "npm:^2.0.0"
-    supports-color: "npm:^8.0.0"
-  checksum: 10/364cbaef00d8a2729fc760227ad34b5e60829e0869bd84976bdfbd8c0d0f9c2f22677b3e6dd8afa76ed174765351cd12bae3d4530c62eefb3791055127ca9745
-  languageName: node
-  linkType: hard
-
-"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
+"js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
   checksum: 10/af37d0d913fb56aec6dc0074c163cc71cd23c0b8aad5c2350747b6721d37ba118af35abdd8b33c47ec2800de07dedb16a527ca9c530ee004093e04958bd0cbf2
   languageName: node
   linkType: hard
 
-"js-yaml@npm:^3.13.1":
-  version: 3.14.1
-  resolution: "js-yaml@npm:3.14.1"
-  dependencies:
-    argparse: "npm:^1.0.7"
-    esprima: "npm:^4.0.0"
-  bin:
-    js-yaml: bin/js-yaml.js
-  checksum: 10/9e22d80b4d0105b9899135365f746d47466ed53ef4223c529b3c0f7a39907743fdbd3c4379f94f1106f02755b5e90b2faaf84801a891135544e1ea475d1a1379
-  languageName: node
-  linkType: hard
-
 "js-yaml@npm:^4.1.0":
   version: 4.1.0
   resolution: "js-yaml@npm:4.1.0"
@@ -7063,30 +6384,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsesc@npm:^2.5.1":
-  version: 2.5.2
-  resolution: "jsesc@npm:2.5.2"
-  bin:
-    jsesc: bin/jsesc
-  checksum: 10/d2096abdcdec56969764b40ffc91d4a23408aa2f351b4d1c13f736f25476643238c43fdbaf38a191c26b1b78fd856d965f5d4d0dde7b89459cd94025190cdf13
-  languageName: node
-  linkType: hard
-
-"jsesc@npm:^3.0.2, jsesc@npm:~3.0.2":
-  version: 3.0.2
-  resolution: "jsesc@npm:3.0.2"
-  bin:
-    jsesc: bin/jsesc
-  checksum: 10/8e5a7de6b70a8bd71f9cb0b5a7ade6a73ae6ab55e697c74cc997cede97417a3a65ed86c36f7dd6125fe49766e8386c845023d9e213916ca92c9dfdd56e2babf3
-  languageName: node
-  linkType: hard
-
-"jsesc@npm:~0.5.0":
-  version: 0.5.0
-  resolution: "jsesc@npm:0.5.0"
+"jsesc@npm:^3.0.2, jsesc@npm:~3.1.0":
+  version: 3.1.0
+  resolution: "jsesc@npm:3.1.0"
   bin:
     jsesc: bin/jsesc
-  checksum: 10/fab949f585c71e169c5cbe00f049f20de74f067081bbd64a55443bad1c71e1b5a5b448f2359bf2fe06f5ed7c07e2e4a9101843b01c823c30b6afc11f5bfaf724
+  checksum: 10/20bd37a142eca5d1794f354db8f1c9aeb54d85e1f5c247b371de05d23a9751ecd7bd3a9c4fc5298ea6fa09a100dafb4190fa5c98c6610b75952c3487f3ce7967
   languageName: node
   linkType: hard
 
@@ -7097,7 +6400,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-parse-even-better-errors@npm:^2.3.0, json-parse-even-better-errors@npm:^2.3.1":
+"json-parse-even-better-errors@npm:^2.3.1":
   version: 2.3.1
   resolution: "json-parse-even-better-errors@npm:2.3.1"
   checksum: 10/5f3a99009ed5f2a5a67d06e2f298cc97bc86d462034173308156f15b43a6e850be8511dc204b9b94566305da2947f7d90289657237d210351a39059ff9d666cf
@@ -7141,19 +6444,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonfile@npm:^6.0.1":
-  version: 6.1.0
-  resolution: "jsonfile@npm:6.1.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.6"
-    universalify: "npm:^2.0.0"
-  dependenciesMeta:
-    graceful-fs:
-      optional: true
-  checksum: 10/03014769e7dc77d4cf05fa0b534907270b60890085dd5e4d60a382ff09328580651da0b8b4cdf44d91e4c8ae64d91791d965f05707beff000ed494a38b6fec85
-  languageName: node
-  linkType: hard
-
 "jsprim@npm:^1.2.2":
   version: 1.4.2
   resolution: "jsprim@npm:1.4.2"
@@ -7173,27 +6463,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kleur@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "kleur@npm:3.0.3"
-  checksum: 10/0c0ecaf00a5c6173d25059c7db2113850b5457016dfa1d0e3ef26da4704fbb186b4938d7611246d86f0ddf1bccf26828daa5877b1f232a65e7373d0122a83e7f
-  languageName: node
-  linkType: hard
-
 "launch-editor@npm:^2.6.1":
-  version: 2.6.1
-  resolution: "launch-editor@npm:2.6.1"
+  version: 2.11.1
+  resolution: "launch-editor@npm:2.11.1"
   dependencies:
-    picocolors: "npm:^1.0.0"
-    shell-quote: "npm:^1.8.1"
-  checksum: 10/e06d193075ac09f7f8109f10cabe464a211bf7ed4cbe75f83348d6f67bf4d9f162f06e7a1ab3e1cd7fc250b5342c3b57080618aff2e646dc34248fe499227601
-  languageName: node
-  linkType: hard
-
-"lines-and-columns@npm:^1.1.6":
-  version: 1.2.4
-  resolution: "lines-and-columns@npm:1.2.4"
-  checksum: 10/0c37f9f7fa212b38912b7145e1cd16a5f3cd34d782441c3e6ca653485d326f58b3caccda66efce1c5812bde4961bbde3374fae4b0d11bf1226152337f3894aa5
+    picocolors: "npm:^1.1.1"
+    shell-quote: "npm:^1.8.3"
+  checksum: 10/652230807292551876b6ee9c504c3e85193a0c21722f6975a990edb0747b0584900550a3ea001fb3adacc7d14cc6681c4f07a51ab9d6fe255aad1bd30e5a878d
   languageName: node
   linkType: hard
 
@@ -7201,24 +6477,24 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "litmus@workspace:litmus"
   dependencies:
-    "@babel/core": "npm:^7.26.0"
-    "@babel/preset-env": "npm:^7.26.0"
-    "@babel/preset-typescript": "npm:^7.26.0"
-    "@types/node": "npm:^22.10.1"
-    "@types/react": "npm:^18.3.14"
-    babel-loader: "npm:^9.2.1"
+    "@babel/core": "npm:^7.28.5"
+    "@babel/preset-env": "npm:^7.28.5"
+    "@babel/preset-typescript": "npm:^7.28.5"
+    "@types/node": "npm:^25.0.3"
+    "@types/react": "npm:^19.2.7"
+    babel-loader: "npm:^10.0.0"
     babel-plugin-transform-cx-imports: "npm:^21.3.0"
     babel-plugin-transform-cx-jsx: "npm:^21.3.0"
     babel-preset-cx-env: "npm:^24.0.0"
     casual: "npm:^1.6.2"
     copy-webpack-plugin: "npm:^12.0.2"
-    core-js: "npm:^3.39.0"
+    core-js: "npm:^3.47.0"
     css-loader: "npm:^7.1.2"
-    cx: "npm:^25.4.1"
-    cx-immer: "npm:^25.5.0"
-    cx-react: "npm:^24.7.1"
+    cx: "workspace:*"
+    cx-immer: "workspace:*"
+    cx-react: "workspace:*"
     file-loader: "npm:^6.2.0"
-    html-webpack-plugin: "npm:^5.6.3"
+    html-webpack-plugin: "npm:^5.6.5"
     if-loader: "npm:^1.0.2"
     immer: "npm:^10.1.1"
     inline-manifest-webpack-plugin: "npm:^4.0.2"
@@ -7227,31 +6503,30 @@ __metadata:
     mini-css-extract-plugin: "npm:^2.9.2"
     modify-babel-preset: "npm:^3.2.1"
     process: "npm:^0.11.10"
-    react: "npm:^18.3.1"
-    react-dev-utils: "npm:^12.0.1"
-    react-dom: "npm:^18.3.1"
+    react: "npm:^19.2.3"
+    react-dom: "npm:^19.2.3"
     sass: "npm:^1.77.8"
-    sass-loader: "npm:^16.0.1"
+    sass-loader: "npm:^16.0.6"
     style-loader: "npm:^4.0.0"
     svg-url-loader: "npm:^8.0.0"
     ts-loader: "npm:^9.5.1"
     typescript: "npm:^5.7.2"
     url-loader: "npm:^4.1.1"
-    webpack: "npm:^5.97.1"
+    webpack: "npm:^5.103.0"
     webpack-bundle-analyzer: "npm:^4.10.2"
     webpack-cleanup-plugin: "npm:^0.5.1"
     webpack-cli: "npm:^5.1.4"
     webpack-combine-loaders: "npm:^2.0.4"
-    webpack-dev-server: "npm:^5.1.0"
+    webpack-dev-server: "npm:^5.2.2"
     webpack-merge: "npm:^6.0.1"
     whatwg-fetch: "npm:^3.6.20"
   languageName: unknown
   linkType: soft
 
-"loader-runner@npm:^4.2.0":
-  version: 4.3.0
-  resolution: "loader-runner@npm:4.3.0"
-  checksum: 10/555ae002869c1e8942a0efd29a99b50a0ce6c3296efea95caf48f00d7f6f7f659203ed6613688b6181aa81dc76de3e65ece43094c6dffef3127fe1a84d973cd3
+"loader-runner@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "loader-runner@npm:4.3.1"
+  checksum: 10/d77127497c3f91fdba351e3e91156034e6e590e9f050b40df6c38ac16c54b5c903f7e2e141e09fefd046ee96b26fb50773c695ebc0aa205a4918683b124b04ba
   languageName: node
   linkType: hard
 
@@ -7266,13 +6541,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^3.2.0":
-  version: 3.2.1
-  resolution: "loader-utils@npm:3.2.1"
-  checksum: 10/177f5bb9b4c651263714fcd1b50682c1367b06893462529f510287775f9e461ca27a41bf364c8dffa9cd74ed9e8b1fdb30c03a526f6bcf12573bdc1a1644d086
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^3.0.0":
   version: 3.0.0
   resolution: "locate-path@npm:3.0.0"
@@ -7301,15 +6569,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"locate-path@npm:^7.1.0":
-  version: 7.2.0
-  resolution: "locate-path@npm:7.2.0"
-  dependencies:
-    p-locate: "npm:^6.0.0"
-  checksum: 10/1c6d269d4efec555937081be964e8a9b4a136319c79ca1d45ac6382212a8466113c75bd89e44521ca8ecd1c47fb08523b56eee5c0712bc7d14fec5f729deeb42
-  languageName: node
-  linkType: hard
-
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -7369,17 +6628,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0":
-  version: 1.4.0
-  resolution: "loose-envify@npm:1.4.0"
-  dependencies:
-    js-tokens: "npm:^3.0.0 || ^4.0.0"
-  bin:
-    loose-envify: cli.js
-  checksum: 10/6517e24e0cad87ec9888f500c5b5947032cdfe6ef65e1c1936a0c48a524b81e65542c9c3edc91c97d5bddc806ee2a985dbc79be89215d613b1de5db6d1cfe6f4
-  languageName: node
-  linkType: hard
-
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"
@@ -7389,10 +6637,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.1, lru-cache@npm:^9.1.1 || ^10.0.0":
-  version: 10.1.0
-  resolution: "lru-cache@npm:10.1.0"
-  checksum: 10/207278d6fa711fb1f94a0835d4d4737441d2475302482a14785b10515e4c906a57ebf9f35bf060740c9560e91c7c1ad5a04fd7ed030972a9ba18bce2a228e95b
+"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
+  version: 10.4.3
+  resolution: "lru-cache@npm:10.4.3"
+  checksum: 10/e6e90267360476720fa8e83cc168aa2bf0311f3f2eea20a6ba78b90a885ae72071d9db132f40fda4129c803e7dcec3a6b6a6fbb44ca90b081630b810b5d6a41a
   languageName: node
   linkType: hard
 
@@ -7405,21 +6653,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "lru-cache@npm:6.0.0"
-  dependencies:
-    yallist: "npm:^4.0.0"
-  checksum: 10/fc1fe2ee205f7c8855fa0f34c1ab0bcf14b6229e35579ec1fd1079f31d6fc8ef8eb6fd17f2f4d99788d7e339f50e047555551ebd5e434dda503696e7c6591825
-  languageName: node
-  linkType: hard
-
-"magic-string@npm:0.30.5":
-  version: 0.30.5
-  resolution: "magic-string@npm:0.30.5"
+"magic-string@npm:0.30.17":
+  version: 0.30.17
+  resolution: "magic-string@npm:0.30.17"
   dependencies:
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-  checksum: 10/c8a6b25f813215ca9db526f3a407d6dc0bf35429c2b8111d6f1c2cf6cf6afd5e2d9f9cd189416a0e3959e20ecd635f73639f9825c73de1074b29331fe36ace59
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+  checksum: 10/2f71af2b0afd78c2e9012a29b066d2c8ba45a9cd0c8070f7fd72de982fb1c403b4e3afdb1dae00691d56885ede66b772ef6bedf765e02e3a7066208fe2fec4aa
   languageName: node
   linkType: hard
 
@@ -7433,31 +6672,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-fetch-happen@npm:^13.0.0":
-  version: 13.0.0
-  resolution: "make-fetch-happen@npm:13.0.0"
+"make-error@npm:^1.1.1":
+  version: 1.3.6
+  resolution: "make-error@npm:1.3.6"
+  checksum: 10/b86e5e0e25f7f777b77fabd8e2cbf15737972869d852a22b7e73c17623928fccb826d8e46b9951501d3f20e51ad74ba8c59ed584f610526a48f8ccf88aaec402
+  languageName: node
+  linkType: hard
+
+"make-fetch-happen@npm:^14.0.3":
+  version: 14.0.3
+  resolution: "make-fetch-happen@npm:14.0.3"
   dependencies:
-    "@npmcli/agent": "npm:^2.0.0"
-    cacache: "npm:^18.0.0"
+    "@npmcli/agent": "npm:^3.0.0"
+    cacache: "npm:^19.0.1"
     http-cache-semantics: "npm:^4.1.1"
-    is-lambda: "npm:^1.0.1"
     minipass: "npm:^7.0.2"
-    minipass-fetch: "npm:^3.0.0"
+    minipass-fetch: "npm:^4.0.0"
     minipass-flush: "npm:^1.0.5"
     minipass-pipeline: "npm:^1.2.4"
-    negotiator: "npm:^0.6.3"
+    negotiator: "npm:^1.0.0"
+    proc-log: "npm:^5.0.0"
     promise-retry: "npm:^2.0.1"
-    ssri: "npm:^10.0.0"
-  checksum: 10/ded5a91a02b76381b06a4ec4d5c1d23ebbde15d402b3c3e4533b371dac7e2f7ca071ae71ae6dae72aa261182557b7b1b3fd3a705b39252dc17f74fa509d3e76f
-  languageName: node
-  linkType: hard
-
-"makeerror@npm:1.0.12":
-  version: 1.0.12
-  resolution: "makeerror@npm:1.0.12"
-  dependencies:
-    tmpl: "npm:1.0.5"
-  checksum: 10/4c66ddfc654537333da952c084f507fa4c30c707b1635344eb35be894d797ba44c901a9cebe914aa29a7f61357543ba09b09dddbd7f65b4aee756b450f169f40
+    ssri: "npm:^12.0.0"
+  checksum: 10/fce0385840b6d86b735053dfe941edc2dd6468fda80fe74da1eeff10cbd82a75760f406194f2bc2fa85b99545b2bc1f84c08ddf994b21830775ba2d1a87e8bdf
   languageName: node
   linkType: hard
 
@@ -7470,6 +6707,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"math-intrinsics@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "math-intrinsics@npm:1.1.0"
+  checksum: 10/11df2eda46d092a6035479632e1ec865b8134bdfc4bd9e571a656f4191525404f13a283a515938c3a8de934dbfd9c09674d9da9fa831e6eb7e22b50b197d2edd
+  languageName: node
+  linkType: hard
+
 "md5@npm:^2.0.0":
   version: 2.3.0
   resolution: "md5@npm:2.3.0"
@@ -7488,21 +6732,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memfs@npm:^3.1.2":
-  version: 3.5.1
-  resolution: "memfs@npm:3.5.1"
-  dependencies:
-    fs-monkey: "npm:^1.0.3"
-  checksum: 10/47a112689adcc282a0b80fc296d9145564c398c567ffa27f8e7c2d0ed0059e1604109dc1d0469bf3d810af3e9d3a4fea02b18adfc556155b5def1ccf1ae13836
-  languageName: node
-  linkType: hard
-
 "memfs@npm:^4.6.0":
-  version: 4.7.7
-  resolution: "memfs@npm:4.7.7"
-  dependencies:
+  version: 4.43.0
+  resolution: "memfs@npm:4.43.0"
+  dependencies:
+    "@jsonjoy.com/json-pack": "npm:^1.11.0"
+    "@jsonjoy.com/util": "npm:^1.9.0"
+    glob-to-regex.js: "npm:^1.0.1"
+    thingies: "npm:^2.5.0"
+    tree-dump: "npm:^1.0.3"
     tslib: "npm:^2.0.0"
-  checksum: 10/311633e5857c91f41021b43f00eda8d540fed2c2d9e02c780fe78de720cfb55d15ab2d5b5ce9f2576637589b82e84488f1b9ff503563e817ed65200ad24617fb
+  checksum: 10/dfe692f574f22b637206af6a3ec8208bbecb25e629e3840584796f117fe5709be279592d0ca9735c20c109ef827a720c6bc53fc512a5b10cf6af220e8734fb24
   languageName: node
   linkType: hard
 
@@ -7520,7 +6760,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
+"merge2@npm:^1.3.0":
   version: 1.4.1
   resolution: "merge2@npm:1.4.1"
   checksum: 10/7268db63ed5169466540b6fb947aec313200bcf6d40c5ab722c22e242f651994619bcd85601602972d3c85bd2cc45a358a4c61937e9f11a061919a1da569b0c2
@@ -7541,23 +6781,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4":
-  version: 4.0.5
-  resolution: "micromatch@npm:4.0.5"
+"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "micromatch@npm:4.0.8"
   dependencies:
-    braces: "npm:^3.0.2"
+    braces: "npm:^3.0.3"
     picomatch: "npm:^2.3.1"
-  checksum: 10/a749888789fc15cac0e03273844dbd749f9f8e8d64e70c564bcf06a033129554c789bb9e30d7566d7ff6596611a08e58ac12cf2a05f6e3c9c47c50c4c7e12fa2
+  checksum: 10/6bf2a01672e7965eb9941d1f02044fad2bd12486b5553dc1116ff24c09a8723157601dc992e74c911d896175918448762df3b3fd0a6b61037dd1a9766ddfbf58
   languageName: node
   linkType: hard
 
-"mime-db@npm:1.52.0, mime-db@npm:>= 1.43.0 < 2":
+"mime-db@npm:1.52.0":
   version: 1.52.0
   resolution: "mime-db@npm:1.52.0"
   checksum: 10/54bb60bf39e6f8689f6622784e668a3d7f8bed6b0d886f5c3c446cb3284be28b30bf707ed05d0fe44a036f8469976b2629bbea182684977b084de9da274694d7
   languageName: node
   linkType: hard
 
+"mime-db@npm:>= 1.43.0 < 2, mime-db@npm:^1.54.0":
+  version: 1.54.0
+  resolution: "mime-db@npm:1.54.0"
+  checksum: 10/9e7834be3d66ae7f10eaa69215732c6d389692b194f876198dca79b2b90cbf96688d9d5d05ef7987b20f749b769b11c01766564264ea5f919c88b32a29011311
+  languageName: node
+  linkType: hard
+
 "mime-db@npm:~1.33.0":
   version: 1.33.0
   resolution: "mime-db@npm:1.33.0"
@@ -7574,7 +6821,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:~2.1.17, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
+"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:~2.1.17, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -7583,6 +6830,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime-types@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "mime-types@npm:3.0.1"
+  dependencies:
+    mime-db: "npm:^1.54.0"
+  checksum: 10/fa1d3a928363723a8046c346d87bf85d35014dae4285ad70a3ff92bd35957992b3094f8417973cfe677330916c6ef30885109624f1fb3b1e61a78af509dba120
+  languageName: node
+  linkType: hard
+
 "mime@npm:1.6.0":
   version: 1.6.0
   resolution: "mime@npm:1.6.0"
@@ -7600,14 +6856,14 @@ __metadata:
   linkType: hard
 
 "mini-css-extract-plugin@npm:^2.9.2":
-  version: 2.9.2
-  resolution: "mini-css-extract-plugin@npm:2.9.2"
+  version: 2.9.4
+  resolution: "mini-css-extract-plugin@npm:2.9.4"
   dependencies:
     schema-utils: "npm:^4.0.0"
     tapable: "npm:^2.2.1"
   peerDependencies:
     webpack: ^5.0.0
-  checksum: 10/db6ddb8ba56affa1a295b57857d66bad435d36e48e1f95c75d16fadd6c70e3ba33e8c4141c3fb0e22b4d875315b41c4f58550c6ac73b50bdbe429f768297e3ff
+  checksum: 10/24a0418dc49baed58a10a8b81e4d2fe474e89ccdc9370a7c69bd0aeeb5a70d2b4ee12f33b98c95a68423c79c1de7cc2a25aaa2105600b712e7d594cb0d56c9d4
   languageName: node
   linkType: hard
 
@@ -7627,7 +6883,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:3.1.2, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1":
+"minimatch@npm:3.1.2, minimatch@npm:^3.1.1":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -7645,16 +6901,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^9.0.1":
-  version: 9.0.3
-  resolution: "minimatch@npm:9.0.3"
+"minimatch@npm:^9.0.4, minimatch@npm:^9.0.5":
+  version: 9.0.5
+  resolution: "minimatch@npm:9.0.5"
   dependencies:
     brace-expansion: "npm:^2.0.1"
-  checksum: 10/c81b47d28153e77521877649f4bab48348d10938df9e8147a58111fe00ef89559a2938de9f6632910c4f7bf7bb5cd81191a546167e58d357f0cfb1e18cecc1c5
+  checksum: 10/dd6a8927b063aca6d910b119e1f2df6d2ce7d36eab91de83167dd136bb85e1ebff97b0d3de1cb08bd1f7e018ca170b4962479fefab5b2a69e2ae12cb2edc8348
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.0":
+"minimist@npm:^1.2.0, minimist@npm:^1.2.6":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
@@ -7670,18 +6926,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass-fetch@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "minipass-fetch@npm:3.0.4"
+"minipass-fetch@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "minipass-fetch@npm:4.0.1"
   dependencies:
     encoding: "npm:^0.1.13"
     minipass: "npm:^7.0.3"
     minipass-sized: "npm:^1.0.3"
-    minizlib: "npm:^2.1.2"
+    minizlib: "npm:^3.0.1"
   dependenciesMeta:
     encoding:
       optional: true
-  checksum: 10/3edf72b900e30598567eafe96c30374432a8709e61bb06b87198fa3192d466777e2ec21c52985a0999044fa6567bd6f04651585983a1cbb27e2c1770a07ed2a2
+  checksum: 10/7ddfebdbb87d9866e7b5f7eead5a9e3d9d507992af932a11d275551f60006cf7d9178e66d586dbb910894f3e3458d27c0ddf93c76e94d49d0a54a541ddc1263d
   languageName: node
   linkType: hard
 
@@ -7721,36 +6977,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "minipass@npm:5.0.0"
-  checksum: 10/61682162d29f45d3152b78b08bab7fb32ca10899bc5991ffe98afc18c9e9543bd1e3be94f8b8373ba6262497db63607079dc242ea62e43e7b2270837b7347c93
-  languageName: node
-  linkType: hard
-
-"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3":
-  version: 7.0.4
-  resolution: "minipass@npm:7.0.4"
-  checksum: 10/e864bd02ceb5e0707696d58f7ce3a0b89233f0d686ef0d447a66db705c0846a8dc6f34865cd85256c1472ff623665f616b90b8ff58058b2ad996c5de747d2d18
+"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.0.4, minipass@npm:^7.1.2":
+  version: 7.1.2
+  resolution: "minipass@npm:7.1.2"
+  checksum: 10/c25f0ee8196d8e6036661104bacd743785b2599a21de5c516b32b3fa2b83113ac89a2358465bc04956baab37ffb956ae43be679b2262bf7be15fce467ccd7950
   languageName: node
   linkType: hard
 
-"minizlib@npm:^2.1.1, minizlib@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "minizlib@npm:2.1.2"
+"minizlib@npm:^3.0.1, minizlib@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "minizlib@npm:3.1.0"
   dependencies:
-    minipass: "npm:^3.0.0"
-    yallist: "npm:^4.0.0"
-  checksum: 10/ae0f45436fb51344dcb87938446a32fbebb540d0e191d63b35e1c773d47512e17307bf54aa88326cc6d176594d00e4423563a091f7266c2f9a6872cdc1e234d1
-  languageName: node
-  linkType: hard
-
-"mkdirp@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "mkdirp@npm:1.0.4"
-  bin:
-    mkdirp: bin/cmd.js
-  checksum: 10/d71b8dcd4b5af2fe13ecf3bd24070263489404fe216488c5ba7e38ece1f54daf219e72a833a3a2dc404331e870e9f44963a33399589490956bff003a3404d3b2
+    minipass: "npm:^7.1.2"
+  checksum: 10/f47365cc2cb7f078cbe7e046eb52655e2e7e97f8c0a9a674f4da60d94fb0624edfcec9b5db32e8ba5a99a5f036f595680ae6fe02a262beaa73026e505cc52f99
   languageName: node
   linkType: hard
 
@@ -7785,6 +7024,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mocha@npm:^11.7.5":
+  version: 11.7.5
+  resolution: "mocha@npm:11.7.5"
+  dependencies:
+    browser-stdout: "npm:^1.3.1"
+    chokidar: "npm:^4.0.1"
+    debug: "npm:^4.3.5"
+    diff: "npm:^7.0.0"
+    escape-string-regexp: "npm:^4.0.0"
+    find-up: "npm:^5.0.0"
+    glob: "npm:^10.4.5"
+    he: "npm:^1.2.0"
+    is-path-inside: "npm:^3.0.3"
+    js-yaml: "npm:^4.1.0"
+    log-symbols: "npm:^4.1.0"
+    minimatch: "npm:^9.0.5"
+    ms: "npm:^2.1.3"
+    picocolors: "npm:^1.1.1"
+    serialize-javascript: "npm:^6.0.2"
+    strip-json-comments: "npm:^3.1.1"
+    supports-color: "npm:^8.1.1"
+    workerpool: "npm:^9.2.0"
+    yargs: "npm:^17.7.2"
+    yargs-parser: "npm:^21.1.1"
+    yargs-unparser: "npm:^2.0.0"
+  bin:
+    _mocha: bin/_mocha
+    mocha: bin/mocha.js
+  checksum: 10/878fcec45d79dad3ec01b896ae75eabd0075b8f91866b338b81b2ef8a2279f1e70fb07fc89054108a46864fbc1e6f6898dc31e64c033ded585748c5fcbf7e704
+  languageName: node
+  linkType: hard
+
 "modify-babel-preset@npm:^3.2.1":
   version: 3.2.1
   resolution: "modify-babel-preset@npm:3.2.1"
@@ -7795,16 +7066,16 @@ __metadata:
   linkType: hard
 
 "moment@npm:^2.15.2":
-  version: 2.29.4
-  resolution: "moment@npm:2.29.4"
-  checksum: 10/157c5af5a0ba8196e577bc67feb583303191d21ba1f7f2af30b3b40d4c63a64d505ba402be2a1454832082fac6be69db1e0d186c3279dae191e6634b0c33705c
+  version: 2.30.1
+  resolution: "moment@npm:2.30.1"
+  checksum: 10/ae42d876d4ec831ef66110bdc302c0657c664991e45cf2afffc4b0f6cd6d251dde11375c982a5c0564ccc0fa593fc564576ddceb8c8845e87c15f58aa6baca69
   languageName: node
   linkType: hard
 
 "mrmime@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "mrmime@npm:2.0.0"
-  checksum: 10/8d95f714ea200c6cf3e3777cbc6168be04b05ac510090a9b41eef5ec081efeb1d1de3e535ffb9c9689fffcc42f59864fd52a500e84a677274f070adeea615c45
+  version: 2.0.1
+  resolution: "mrmime@npm:2.0.1"
+  checksum: 10/1f966e2c05b7264209c4149ae50e8e830908eb64dd903535196f6ad72681fa109b794007288a3c2814f7a1ecf9ca192769909c0c374d974d604a8de5fc095d4a
   languageName: node
   linkType: hard
 
@@ -7815,13 +7086,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.2":
-  version: 2.1.2
-  resolution: "ms@npm:2.1.2"
-  checksum: 10/673cdb2c3133eb050c745908d8ce632ed2c02d85640e2edb3ace856a2266a813b30c613569bf3354fdf4ea7d1a1494add3bfa95e2713baa27d0c2c71fc44f58f
-  languageName: node
-  linkType: hard
-
 "ms@npm:2.1.3, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
@@ -7841,22 +7105,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.7":
-  version: 3.3.7
-  resolution: "nanoid@npm:3.3.7"
+"nanoid@npm:^3.3.11":
+  version: 3.3.11
+  resolution: "nanoid@npm:3.3.11"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 10/ac1eb60f615b272bccb0e2b9cd933720dad30bf9708424f691b8113826bb91aca7e9d14ef5d9415a6ba15c266b37817256f58d8ce980c82b0ba3185352565679
+  checksum: 10/73b5afe5975a307aaa3c95dfe3334c52cdf9ae71518176895229b8d65ab0d1c0417dd081426134eb7571c055720428ea5d57c645138161e7d10df80815527c48
   languageName: node
   linkType: hard
 
-"negotiator@npm:0.6.3, negotiator@npm:^0.6.3":
+"negotiator@npm:0.6.3":
   version: 0.6.3
   resolution: "negotiator@npm:0.6.3"
   checksum: 10/2723fb822a17ad55c93a588a4bc44d53b22855bf4be5499916ca0cab1e7165409d0b288ba2577d7b029f10ce18cf2ed8e703e5af31c984e1e2304277ef979837
   languageName: node
   linkType: hard
 
+"negotiator@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "negotiator@npm:1.0.0"
+  checksum: 10/b5734e87295324fabf868e36fb97c84b7d7f3156ec5f4ee5bf6e488079c11054f818290fc33804cef7b1ee21f55eeb14caea83e7dafae6492a409b3e573153e5
+  languageName: node
+  linkType: hard
+
+"negotiator@npm:~0.6.4":
+  version: 0.6.4
+  resolution: "negotiator@npm:0.6.4"
+  checksum: 10/d98c04a136583afd055746168f1067d58ce4bfe6e4c73ca1d339567f81ea1f7e665b5bd1e81f4771c67b6c2ea89b21cb2adaea2b16058c7dc31317778f931dab
+  languageName: node
+  linkType: hard
+
 "neo-async@npm:^2.6.2":
   version: 2.6.2
   resolution: "neo-async@npm:2.6.2"
@@ -7874,6 +7152,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-addon-api@npm:^7.0.0":
+  version: 7.1.1
+  resolution: "node-addon-api@npm:7.1.1"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10/ee1e1ed6284a2f8cd1d59ac6175ecbabf8978dcf570345e9a8095a9d0a2b9ced591074ae77f9009287b00c402352b38aa9322a34f2199cdc9f567b842a636b94
+  languageName: node
+  linkType: hard
+
 "node-forge@npm:^1":
   version: 1.3.1
   resolution: "node-forge@npm:1.3.1"
@@ -7882,61 +7169,47 @@ __metadata:
   linkType: hard
 
 "node-gyp@npm:latest":
-  version: 10.0.1
-  resolution: "node-gyp@npm:10.0.1"
+  version: 11.4.2
+  resolution: "node-gyp@npm:11.4.2"
   dependencies:
     env-paths: "npm:^2.2.0"
     exponential-backoff: "npm:^3.1.1"
-    glob: "npm:^10.3.10"
     graceful-fs: "npm:^4.2.6"
-    make-fetch-happen: "npm:^13.0.0"
-    nopt: "npm:^7.0.0"
-    proc-log: "npm:^3.0.0"
+    make-fetch-happen: "npm:^14.0.3"
+    nopt: "npm:^8.0.0"
+    proc-log: "npm:^5.0.0"
     semver: "npm:^7.3.5"
-    tar: "npm:^6.1.2"
-    which: "npm:^4.0.0"
+    tar: "npm:^7.4.3"
+    tinyglobby: "npm:^0.2.12"
+    which: "npm:^5.0.0"
   bin:
     node-gyp: bin/node-gyp.js
-  checksum: 10/578cf0c821f258ce4b6ebce4461eca4c991a4df2dee163c0624f2fe09c7d6d37240be4942285a0048d307230248ee0b18382d6623b9a0136ce9533486deddfa8
-  languageName: node
-  linkType: hard
-
-"node-int64@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "node-int64@npm:0.4.0"
-  checksum: 10/b7afc2b65e56f7035b1a2eec57ae0fbdee7d742b1cdcd0f4387562b6527a011ab1cbe9f64cc8b3cca61e3297c9637c8bf61cec2e6b8d3a711d4b5267dfafbe02
-  languageName: node
-  linkType: hard
-
-"node-releases@npm:^2.0.14":
-  version: 2.0.14
-  resolution: "node-releases@npm:2.0.14"
-  checksum: 10/0f7607ec7db5ef1dc616899a5f24ae90c869b6a54c2d4f36ff6d84a282ab9343c7ff3ca3670fe4669171bb1e8a9b3e286e1ef1c131f09a83d70554f855d54f24
+  checksum: 10/de0fdd1a23d27976974f2480b1c5a2954180050f4d7d682b2fcd36a7c996100981fc37ba0c893d02471ccf1730240f73c3073a6a9397c5eb3bb7578ca82808ed
   languageName: node
   linkType: hard
 
-"node-releases@npm:^2.0.18":
-  version: 2.0.18
-  resolution: "node-releases@npm:2.0.18"
-  checksum: 10/241e5fa9556f1c12bafb83c6c3e94f8cf3d8f2f8f904906ecef6e10bcaa1d59aa61212d4651bec70052015fc54bd3fdcdbe7fc0f638a17e6685aa586c076ec4e
+"node-releases@npm:^2.0.21":
+  version: 2.0.21
+  resolution: "node-releases@npm:2.0.21"
+  checksum: 10/5344d634b39d20f47c0d85a1c64567fdb9cf46f7b27ed3d141f752642faab47dae326835c2109636f823758afb16ffbed7b0c0fe6f800ef91cec9f2beb4f2b4a
   languageName: node
   linkType: hard
 
-"node-releases@npm:^2.0.8":
-  version: 2.0.10
-  resolution: "node-releases@npm:2.0.10"
-  checksum: 10/d784ecde25696a15d449c4433077f5cce620ed30a1656c4abf31282bfc691a70d9618bae6868d247a67914d1be5cc4fde22f65a05f4398cdfb92e0fc83cadfbc
+"node-releases@npm:^2.0.27":
+  version: 2.0.27
+  resolution: "node-releases@npm:2.0.27"
+  checksum: 10/f6c78ddb392ae500719644afcbe68a9ea533242c02312eb6a34e8478506eb7482a3fb709c70235b01c32fe65625b68dfa9665113f816d87f163bc3819b62b106
   languageName: node
   linkType: hard
 
-"nopt@npm:^7.0.0":
-  version: 7.2.0
-  resolution: "nopt@npm:7.2.0"
+"nopt@npm:^8.0.0":
+  version: 8.1.0
+  resolution: "nopt@npm:8.1.0"
   dependencies:
-    abbrev: "npm:^2.0.0"
+    abbrev: "npm:^3.0.0"
   bin:
     nopt: bin/nopt.js
-  checksum: 10/1e7489f17cbda452c8acaf596a8defb4ae477d2a9953b76eb96f4ec3f62c6b421cd5174eaa742f88279871fde9586d8a1d38fb3f53fa0c405585453be31dff4c
+  checksum: 10/26ab456c51a96f02a9e5aa8d1b80ef3219f2070f3f3528a040e32fb735b1e651e17bdf0f1476988d3a46d498f35c65ed662d122f340d38ce4a7e71dd7b20c4bc
   languageName: node
   linkType: hard
 
@@ -7972,34 +7245,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
+"object-assign@npm:^4.0.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: 10/fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
   languageName: node
   linkType: hard
 
-"object-inspect@npm:^1.13.1":
-  version: 1.13.3
-  resolution: "object-inspect@npm:1.13.3"
-  checksum: 10/14cb973d8381c69e14d7f1c8c75044eb4caf04c6dabcf40ca5c2ce42dc2073ae0bb2a9939eeca142b0c05215afaa1cd5534adb7c8879c32cba2576e045ed8368
-  languageName: node
-  linkType: hard
-
-"object-inspect@npm:^1.9.0":
-  version: 1.12.3
-  resolution: "object-inspect@npm:1.12.3"
-  checksum: 10/532b0036f0472f561180fac0d04fe328ee01f57637624c83fb054f81b5bfe966cdf4200612a499ed391a7ca3c46b20a0bc3a55fc8241d944abe687c556a32b39
+"object-inspect@npm:^1.13.3":
+  version: 1.13.4
+  resolution: "object-inspect@npm:1.13.4"
+  checksum: 10/aa13b1190ad3e366f6c83ad8a16ed37a19ed57d267385aa4bfdccda833d7b90465c057ff6c55d035a6b2e52c1a2295582b294217a0a3a1ae7abdd6877ef781fb
   languageName: node
   linkType: hard
 
 "object-is@npm:^1.1.5":
-  version: 1.1.5
-  resolution: "object-is@npm:1.1.5"
+  version: 1.1.6
+  resolution: "object-is@npm:1.1.6"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.1.3"
-  checksum: 10/75365aff5da4bebad5d20efd9f9a7a13597e603f5eb03d89da8f578c3f3937fe01c6cb5fce86c0611c48795c0841401fd37c943821db0de703c7b30a290576ad
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+  checksum: 10/4f6f544773a595da21c69a7531e0e1d6250670f4e09c55f47eb02c516035cfcb1b46ceb744edfd3ecb362309dbccb6d7f88e43bf42e4d4595ac10a329061053a
   languageName: node
   linkType: hard
 
@@ -8011,14 +7277,16 @@ __metadata:
   linkType: hard
 
 "object.assign@npm:^4.1.4":
-  version: 4.1.4
-  resolution: "object.assign@npm:4.1.4"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.1.4"
-    has-symbols: "npm:^1.0.3"
+  version: 4.1.7
+  resolution: "object.assign@npm:4.1.7"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.0.0"
+    has-symbols: "npm:^1.1.0"
     object-keys: "npm:^1.1.1"
-  checksum: 10/fd82d45289df0a952d772817622ecbaeb4ec933d3abb53267aede083ee38f6a395af8fadfbc569ee575115b0b7c9b286e7cfb2b7a2557b1055f7acbce513bc29
+  checksum: 10/3fe28cdd779f2a728a9a66bd688679ba231a2b16646cd1e46b528fe7c947494387dda4bc189eff3417f3717ef4f0a8f2439347cf9a9aa3cef722fbfd9f615587
   languageName: node
   linkType: hard
 
@@ -8038,10 +7306,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"on-headers@npm:~1.0.2":
-  version: 1.0.2
-  resolution: "on-headers@npm:1.0.2"
-  checksum: 10/870766c16345855e2012e9422ba1ab110c7e44ad5891a67790f84610bd70a72b67fdd71baf497295f1d1bf38dd4c92248f825d48729c53c0eae5262fb69fa171
+"on-headers@npm:~1.1.0":
+  version: 1.1.0
+  resolution: "on-headers@npm:1.1.0"
+  checksum: 10/98aa64629f986fb8cc4517dd8bede73c980e31208cba97f4442c330959f60ced3dc6214b83420491f5111fc7c4f4343abe2ea62c85f505cf041d67850f238776
   languageName: node
   linkType: hard
 
@@ -8064,25 +7332,14 @@ __metadata:
   linkType: hard
 
 "open@npm:^10.0.3":
-  version: 10.0.4
-  resolution: "open@npm:10.0.4"
+  version: 10.2.0
+  resolution: "open@npm:10.2.0"
   dependencies:
     default-browser: "npm:^5.2.1"
     define-lazy-prop: "npm:^3.0.0"
     is-inside-container: "npm:^1.0.0"
-    is-wsl: "npm:^3.1.0"
-  checksum: 10/6d3a1f1daa6a485f82fae3301319e32faa32f724f7cbc857fc27fcdd6272fdaab36142b785d12cccb472539dfc192e78e5ac6de4bc83aba60f8c1e27cc6fa884
-  languageName: node
-  linkType: hard
-
-"open@npm:^8.4.0":
-  version: 8.4.2
-  resolution: "open@npm:8.4.2"
-  dependencies:
-    define-lazy-prop: "npm:^2.0.0"
-    is-docker: "npm:^2.1.1"
-    is-wsl: "npm:^2.2.0"
-  checksum: 10/acd81a1d19879c818acb3af2d2e8e9d81d17b5367561e623248133deb7dd3aefaed527531df2677d3e6aaf0199f84df57b6b2262babff8bf46ea0029aac536c9
+    wsl-utils: "npm:^0.1.0"
+  checksum: 10/e6ad9474734eac3549dcc7d85e952394856ccaee48107c453bd6a725b82e3b8ed5f427658935df27efa76b411aeef62888edea8a9e347e8e7c82632ec966b30e
   languageName: node
   linkType: hard
 
@@ -8113,15 +7370,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-limit@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "p-limit@npm:4.0.0"
-  dependencies:
-    yocto-queue: "npm:^1.0.0"
-  checksum: 10/01d9d70695187788f984226e16c903475ec6a947ee7b21948d6f597bed788e3112cc7ec2e171c1d37125057a5f45f3da21d8653e04a3a793589e12e9e80e756b
-  languageName: node
-  linkType: hard
-
 "p-locate@npm:^3.0.0":
   version: 3.0.0
   resolution: "p-locate@npm:3.0.0"
@@ -8149,15 +7397,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-locate@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "p-locate@npm:6.0.0"
-  dependencies:
-    p-limit: "npm:^4.0.0"
-  checksum: 10/2bfe5234efa5e7a4e74b30a5479a193fdd9236f8f6b4d2f3f69e3d286d9a7d7ab0c118a2a50142efcf4e41625def635bd9332d6cbf9cc65d85eb0718c579ab38
-  languageName: node
-  linkType: hard
-
 "p-map@npm:^2.0.0":
   version: 2.1.0
   resolution: "p-map@npm:2.1.0"
@@ -8165,23 +7404,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-map@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "p-map@npm:4.0.0"
-  dependencies:
-    aggregate-error: "npm:^3.0.0"
-  checksum: 10/7ba4a2b1e24c05e1fc14bbaea0fc6d85cf005ae7e9c9425d4575550f37e2e584b1af97bcde78eacd7559208f20995988d52881334db16cf77bc1bcf68e48ed7c
+"p-map@npm:^7.0.2":
+  version: 7.0.3
+  resolution: "p-map@npm:7.0.3"
+  checksum: 10/2ef48ccfc6dd387253d71bf502604f7893ed62090b2c9d73387f10006c342606b05233da0e4f29388227b61eb5aeface6197e166520c465c234552eeab2fe633
   languageName: node
   linkType: hard
 
 "p-retry@npm:^6.2.0":
-  version: 6.2.0
-  resolution: "p-retry@npm:6.2.0"
+  version: 6.2.1
+  resolution: "p-retry@npm:6.2.1"
   dependencies:
     "@types/retry": "npm:0.12.2"
     is-network-error: "npm:^1.0.0"
     retry: "npm:^0.13.1"
-  checksum: 10/1a5ac16828c96c03c354f78d643dfc7aa8f8b998e1b60e27533da2c75e5cabfb1c7f88ce312e813e09a80b056011fbb372d384132e9c92d27d052bd7c282a978
+  checksum: 10/7104ef13703b155d70883b0d3654ecc03148407d2711a4516739cf93139e8bec383451e14925e25e3c1ae04dbace3ed53c26dc3853c1e9b9867fcbdde25f4cdc
   languageName: node
   linkType: hard
 
@@ -8192,6 +7429,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"package-json-from-dist@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "package-json-from-dist@npm:1.0.1"
+  checksum: 10/58ee9538f2f762988433da00e26acc788036914d57c71c246bf0be1b60cdbd77dd60b6a3e1a30465f0b248aeb80079e0b34cb6050b1dfa18c06953bb1cbc7602
+  languageName: node
+  linkType: hard
+
 "param-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "param-case@npm:3.0.4"
@@ -8202,27 +7446,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parent-module@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "parent-module@npm:1.0.1"
-  dependencies:
-    callsites: "npm:^3.0.0"
-  checksum: 10/6ba8b255145cae9470cf5551eb74be2d22281587af787a2626683a6c20fbb464978784661478dd2a3f1dad74d1e802d403e1b03c1a31fab310259eec8ac560ff
-  languageName: node
-  linkType: hard
-
-"parse-json@npm:^5.0.0":
-  version: 5.2.0
-  resolution: "parse-json@npm:5.2.0"
-  dependencies:
-    "@babel/code-frame": "npm:^7.0.0"
-    error-ex: "npm:^1.3.1"
-    json-parse-even-better-errors: "npm:^2.3.0"
-    lines-and-columns: "npm:^1.1.6"
-  checksum: 10/62085b17d64da57f40f6afc2ac1f4d95def18c4323577e1eced571db75d9ab59b297d1d10582920f84b15985cbfc6b6d450ccbf317644cfa176f3ed982ad87e2
-  languageName: node
-  linkType: hard
-
 "parseurl@npm:~1.3.2, parseurl@npm:~1.3.3":
   version: 1.3.3
   resolution: "parseurl@npm:1.3.3"
@@ -8261,13 +7484,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-exists@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "path-exists@npm:5.0.0"
-  checksum: 10/8ca842868cab09423994596eb2c5ec2a971c17d1a3cb36dbf060592c730c725cd524b9067d7d2a1e031fef9ba7bd2ac6dc5ec9fb92aa693265f7be3987045254
-  languageName: node
-  linkType: hard
-
 "path-is-absolute@npm:^1.0.0":
   version: 1.0.1
   resolution: "path-is-absolute@npm:1.0.1"
@@ -8296,13 +7512,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-scurry@npm:^1.10.1":
-  version: 1.10.1
-  resolution: "path-scurry@npm:1.10.1"
+"path-scurry@npm:^1.11.1":
+  version: 1.11.1
+  resolution: "path-scurry@npm:1.11.1"
   dependencies:
-    lru-cache: "npm:^9.1.1 || ^10.0.0"
+    lru-cache: "npm:^10.2.0"
     minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
-  checksum: 10/eebfb8304fef1d4f7e1486df987e4fd77413de4fce16508dea69fcf8eb318c09a6b15a7a2f4c22877cec1cb7ecbd3071d18ca9de79eeece0df874a00f1f0bdc8
+  checksum: 10/5e8845c159261adda6f09814d7725683257fcc85a18f329880ab4d7cc1d12830967eae5d5894e453f341710d5484b8fdbbd4d75181b4d6e1eb2f4dc7aeadc434
   languageName: node
   linkType: hard
 
@@ -8320,17 +7536,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-type@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "path-type@npm:4.0.0"
-  checksum: 10/5b1e2daa247062061325b8fdbfd1fb56dde0a448fb1455453276ea18c60685bdad23a445dc148cf87bc216be1573357509b7d4060494a6fd768c7efad833ee45
-  languageName: node
-  linkType: hard
-
-"path-type@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "path-type@npm:5.0.0"
-  checksum: 10/15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5
+"path-type@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "path-type@npm:6.0.0"
+  checksum: 10/b9f6eaf7795c48d5c9bc4c6bc3ac61315b8d36975a73497ab2e02b764c0836b71fb267ea541863153f633a069a1c2ed3c247cb781633842fc571c655ac57c00e
   languageName: node
   linkType: hard
 
@@ -8341,34 +7550,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "picocolors@npm:1.0.0"
-  checksum: 10/a2e8092dd86c8396bdba9f2b5481032848525b3dc295ce9b57896f931e63fc16f79805144321f72976383fc249584672a75cc18d6777c6b757603f372f745981
-  languageName: node
-  linkType: hard
-
-"picocolors@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "picocolors@npm:1.1.0"
-  checksum: 10/a2ad60d94d185c30f2a140b19c512547713fb89b920d32cc6cf658fa786d63a37ba7b8451872c3d9fc34883971fb6e5878e07a20b60506e0bb2554dce9169ccb
-  languageName: node
-  linkType: hard
-
-"picocolors@npm:^1.1.0":
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10/e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 10/60c2595003b05e4535394d1da94850f5372c9427ca4413b71210f437f7b2ca091dbd611c45e8b37d10036fa8eade25c1b8951654f9d3973bfa66a2ff4d3b08bc
   languageName: node
   linkType: hard
 
+"picomatch@npm:^4.0.2, picomatch@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "picomatch@npm:4.0.3"
+  checksum: 10/57b99055f40b16798f2802916d9c17e9744e620a0db136554af01d19598b96e45e2f00014c91d1b8b13874b80caa8c295b3d589a3f72373ec4aaf54baa5962d5
+  languageName: node
+  linkType: hard
+
 "pify@npm:^2.0.0":
   version: 2.3.0
   resolution: "pify@npm:2.3.0"
@@ -8399,17 +7601,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pirates@npm:^4.0.4":
-  version: 4.0.5
-  resolution: "pirates@npm:4.0.5"
-  checksum: 10/3728bae0cf6c18c3d25f5449ee8c5bc1a6a83bca688abe0e1654ce8c069bfd408170397cef133ed9ec8b0faeb4093c5c728d0e72ab7b3385256cd87008c40364
-  languageName: node
-  linkType: hard
-
 "pirates@npm:^4.0.6":
-  version: 4.0.6
-  resolution: "pirates@npm:4.0.6"
-  checksum: 10/d02dda76f4fec1cbdf395c36c11cf26f76a644f9f9a1bfa84d3167d0d3154d5289aacc72677aa20d599bb4a6937a471de1b65c995e2aea2d8687cbcd7e43ea5f
+  version: 4.0.7
+  resolution: "pirates@npm:4.0.7"
+  checksum: 10/2427f371366081ae42feb58214f04805d6b41d6b84d74480ebcc9e0ddbd7105a139f7c653daeaf83ad8a1a77214cf07f64178e76de048128fec501eab3305a96
   languageName: node
   linkType: hard
 
@@ -8431,24 +7626,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pkg-dir@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "pkg-dir@npm:7.0.0"
-  dependencies:
-    find-up: "npm:^6.3.0"
-  checksum: 10/94298b20a446bfbbd66604474de8a0cdd3b8d251225170970f15d9646f633e056c80520dd5b4c1d1050c9fed8f6a9e5054b141c93806439452efe72e57562c03
-  languageName: node
-  linkType: hard
-
-"pkg-up@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "pkg-up@npm:3.1.0"
-  dependencies:
-    find-up: "npm:^3.0.0"
-  checksum: 10/5bac346b7c7c903613c057ae3ab722f320716199d753f4a7d053d38f2b5955460f3e6ab73b4762c62fd3e947f58e04f1343e92089e7bb6091c90877406fcd8c8
-  languageName: node
-  linkType: hard
-
 "plural@npm:^1.1.0":
   version: 1.1.0
   resolution: "plural@npm:1.1.0"
@@ -8456,6 +7633,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"possible-typed-array-names@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "possible-typed-array-names@npm:1.1.0"
+  checksum: 10/2f44137b8d3dd35f4a7ba7469eec1cd9cfbb46ec164b93a5bc1f4c3d68599c9910ee3b91da1d28b4560e9cc8414c3cd56fedc07259c67e52cc774476270d3302
+  languageName: node
+  linkType: hard
+
 "postcss-modules-extract-imports@npm:^3.1.0":
   version: 3.1.0
   resolution: "postcss-modules-extract-imports@npm:3.1.0"
@@ -8466,26 +7650,26 @@ __metadata:
   linkType: hard
 
 "postcss-modules-local-by-default@npm:^4.0.5":
-  version: 4.0.5
-  resolution: "postcss-modules-local-by-default@npm:4.0.5"
+  version: 4.2.0
+  resolution: "postcss-modules-local-by-default@npm:4.2.0"
   dependencies:
     icss-utils: "npm:^5.0.0"
-    postcss-selector-parser: "npm:^6.0.2"
+    postcss-selector-parser: "npm:^7.0.0"
     postcss-value-parser: "npm:^4.1.0"
   peerDependencies:
     postcss: ^8.1.0
-  checksum: 10/b08b01aa7f3d1a80bb1a5508ba3a208578fdd2fb6e54e5613fac244a4e014aa7ca639a614859fec93b399e5a6f86938f7690ca60f7e57c4e35b75621d3c07734
+  checksum: 10/552329aa39fbf229b8ac5a04f8aed0b1553e7a3c10b165ee700d1deb020c071875b3df7ab5e3591f6af33d461df66d330ec9c1256229e45fc618a47c60f41536
   languageName: node
   linkType: hard
 
 "postcss-modules-scope@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "postcss-modules-scope@npm:3.2.0"
+  version: 3.2.1
+  resolution: "postcss-modules-scope@npm:3.2.1"
   dependencies:
-    postcss-selector-parser: "npm:^6.0.4"
+    postcss-selector-parser: "npm:^7.0.0"
   peerDependencies:
     postcss: ^8.1.0
-  checksum: 10/17c293ad13355ba456498aa5815ddb7a4a736f7b781d89b294e1602a53b8d0e336131175f82460e290a0d672642f9039540042edc361d9000b682c44e766925b
+  checksum: 10/51c747fa15cedf1b2856da472985ea7a7bb510a63daf30f95f250f34fce9e28ef69b802e6cc03f9c01f69043d171bc33279109a9235847c2d3a75c44eac67334
   languageName: node
   linkType: hard
 
@@ -8500,13 +7684,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
-  version: 6.0.12
-  resolution: "postcss-selector-parser@npm:6.0.12"
+"postcss-selector-parser@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "postcss-selector-parser@npm:7.1.0"
   dependencies:
     cssesc: "npm:^3.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10/fb2df46409098a3a49c6edf78cb0dc1c26992090589ee28fb7ebd69d57a7a8e073d2ea22dbb4175b8cc0141f004b75546e636e7dbd7c627d8ed1e579db9c6214
+  checksum: 10/2caf09e66e2be81d45538f8afdc5439298c89bea71e9943b364e69dce9443d9c5ab33f4dd8b237f1ed7d2f38530338dcc189c1219d888159e6afb5b0afe58b19
   languageName: node
   linkType: hard
 
@@ -8518,22 +7702,22 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.4.33":
-  version: 8.4.35
-  resolution: "postcss@npm:8.4.35"
+  version: 8.5.6
+  resolution: "postcss@npm:8.5.6"
   dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.0.0"
-    source-map-js: "npm:^1.0.2"
-  checksum: 10/93a7ce50cd6188f5f486a9ca98950ad27c19dfed996c45c414fa242944497e4d084a8760d3537f078630226f2bd3c6ab84b813b488740f4432e7c7039cd73a20
+    nanoid: "npm:^3.3.11"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/9e4fbe97574091e9736d0e82a591e29aa100a0bf60276a926308f8c57249698935f35c5d2f4e80de778d0cbb8dcffab4f383d85fd50c5649aca421c3df729b86
   languageName: node
   linkType: hard
 
 "prettier@npm:^3.3.3":
-  version: 3.3.3
-  resolution: "prettier@npm:3.3.3"
+  version: 3.6.2
+  resolution: "prettier@npm:3.6.2"
   bin:
     prettier: bin/prettier.cjs
-  checksum: 10/5beac1f30b5b40162532b8e2f7c3a4eb650910a2695e9c8512a62ffdc09dae93190c29db9107fa7f26d1b6c71aad3628ecb9b5de1ecb0911191099be109434d7
+  checksum: 10/1213691706bcef1371d16ef72773c8111106c3533b660b1cc8ec158bd109cdf1462804125f87f981f23c4a3dba053b6efafda30ab0114cc5b4a725606bb9ff26
   languageName: node
   linkType: hard
 
@@ -8547,10 +7731,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proc-log@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "proc-log@npm:3.0.0"
-  checksum: 10/02b64e1b3919e63df06f836b98d3af002b5cd92655cab18b5746e37374bfb73e03b84fe305454614b34c25b485cc687a9eebdccf0242cda8fda2475dd2c97e02
+"pretty-format@npm:30.0.5, pretty-format@npm:^30.0.0":
+  version: 30.0.5
+  resolution: "pretty-format@npm:30.0.5"
+  dependencies:
+    "@jest/schemas": "npm:30.0.5"
+    ansi-styles: "npm:^5.2.0"
+    react-is: "npm:^18.3.1"
+  checksum: 10/bb65e53092f321257d80cd2c0165e65123805c9d4c4ada1ddac15b08c8879d6d031e6f01ac80e2685ef95ac35d302065196a036c63cd8729747f6e0fa21a55bf
+  languageName: node
+  linkType: hard
+
+"proc-log@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "proc-log@npm:5.0.0"
+  checksum: 10/35610bdb0177d3ab5d35f8827a429fb1dc2518d9e639f2151ac9007f01a061c30e0c635a970c9b00c39102216160f6ec54b62377c92fac3b7bfc2ad4b98d195c
   languageName: node
   linkType: hard
 
@@ -8578,16 +7773,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prompts@npm:^2.4.2":
-  version: 2.4.2
-  resolution: "prompts@npm:2.4.2"
-  dependencies:
-    kleur: "npm:^3.0.3"
-    sisteransi: "npm:^1.0.5"
-  checksum: 10/c52536521a4d21eff4f2f2aa4572446cad227464066365a7167e52ccf8d9839c099f9afec1aba0eed3d5a2514b3e79e0b3e7a1dc326b9acde6b75d27ed74b1a9
-  languageName: node
-  linkType: hard
-
 "proxy-addr@npm:~2.0.7":
   version: 2.0.7
   resolution: "proxy-addr@npm:2.0.7"
@@ -8599,16 +7784,18 @@ __metadata:
   linkType: hard
 
 "psl@npm:^1.1.28":
-  version: 1.9.0
-  resolution: "psl@npm:1.9.0"
-  checksum: 10/d07879d4bfd0ac74796306a8e5a36a93cfb9c4f4e8ee8e63fbb909066c192fe1008cd8f12abd8ba2f62ca28247949a20c8fb32e1d18831d9e71285a1569720f9
+  version: 1.15.0
+  resolution: "psl@npm:1.15.0"
+  dependencies:
+    punycode: "npm:^2.3.1"
+  checksum: 10/5e7467eb5196eb7900d156783d12907d445c0122f76c73203ce96b148a6ccf8c5450cc805887ffada38ff92d634afcf33720c24053cb01d5b6598d1c913c5caf
   languageName: node
   linkType: hard
 
-"punycode@npm:^2.1.0, punycode@npm:^2.1.1":
-  version: 2.3.0
-  resolution: "punycode@npm:2.3.0"
-  checksum: 10/d4e7fbb96f570c57d64b09a35a1182c879ac32833de7c6926a2c10619632c1377865af3dab5479f59d51da18bcd5035a20a5ef6ceb74020082a3e78025d9a9ca
+"punycode@npm:^2.1.0, punycode@npm:^2.1.1, punycode@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "punycode@npm:2.3.1"
+  checksum: 10/febdc4362bead22f9e2608ff0171713230b57aff9dddc1c273aa2a651fbd366f94b7d6a71d78342a7c0819906750351ca7f2edd26ea41b626d87d6a13d1bd059
   languageName: node
   linkType: hard
 
@@ -8622,11 +7809,11 @@ __metadata:
   linkType: hard
 
 "qs@npm:^6.5.2":
-  version: 6.11.1
-  resolution: "qs@npm:6.11.1"
+  version: 6.14.0
+  resolution: "qs@npm:6.14.0"
   dependencies:
-    side-channel: "npm:^1.0.4"
-  checksum: 10/f3e00fc1f65854ddd10ace6a4209baea9f74b2cef5b203e62604be70c743801e1c5ea55631430aaa059c2740b48f2b026f7f183b496f103b08d82f2b602f4d41
+    side-channel: "npm:^1.1.0"
+  checksum: 10/a60e49bbd51c935a8a4759e7505677b122e23bf392d6535b8fc31c1e447acba2c901235ecb192764013cd2781723dc1f61978b5fdd93cc31d7043d31cdc01974
   languageName: node
   linkType: hard
 
@@ -8638,13 +7825,13 @@ __metadata:
   linkType: hard
 
 "query-string@npm:^9.1.0":
-  version: 9.1.0
-  resolution: "query-string@npm:9.1.0"
+  version: 9.3.1
+  resolution: "query-string@npm:9.3.1"
   dependencies:
     decode-uri-component: "npm:^0.4.1"
     filter-obj: "npm:^5.1.0"
     split-on-first: "npm:^3.0.0"
-  checksum: 10/87a0ea851f62d6abe5c6c60bc0114e5df1af73f6dbdfd3086ab82624330cafe92310029d834ee6117d92e3de877f2959cb634c31a55a1aef4acddaa11ad8be20
+  checksum: 10/c56a2242ba749b14413998f620fa52dafaf6fe4fbc4572e46c3d7f5ad1ef2811d4ed4d256f53ed8b9d5e073d2dd672c20cc05ae363b65c8745120e81a5d520a6
   languageName: node
   linkType: hard
 
@@ -8704,61 +7891,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dev-utils@npm:^12.0.1":
-  version: 12.0.1
-  resolution: "react-dev-utils@npm:12.0.1"
-  dependencies:
-    "@babel/code-frame": "npm:^7.16.0"
-    address: "npm:^1.1.2"
-    browserslist: "npm:^4.18.1"
-    chalk: "npm:^4.1.2"
-    cross-spawn: "npm:^7.0.3"
-    detect-port-alt: "npm:^1.1.6"
-    escape-string-regexp: "npm:^4.0.0"
-    filesize: "npm:^8.0.6"
-    find-up: "npm:^5.0.0"
-    fork-ts-checker-webpack-plugin: "npm:^6.5.0"
-    global-modules: "npm:^2.0.0"
-    globby: "npm:^11.0.4"
-    gzip-size: "npm:^6.0.0"
-    immer: "npm:^9.0.7"
-    is-root: "npm:^2.1.0"
-    loader-utils: "npm:^3.2.0"
-    open: "npm:^8.4.0"
-    pkg-up: "npm:^3.1.0"
-    prompts: "npm:^2.4.2"
-    react-error-overlay: "npm:^6.0.11"
-    recursive-readdir: "npm:^2.2.2"
-    shell-quote: "npm:^1.7.3"
-    strip-ansi: "npm:^6.0.1"
-    text-table: "npm:^0.2.0"
-  checksum: 10/4f6e04a3c4c6bc041bb85586646cff5e611049dd91f505e73cec47e284a854f28a25a4f50ff24b46e7df051b2a82c387870c8e08da232edbbbb36c01d4e94a2b
-  languageName: node
-  linkType: hard
-
-"react-dom@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react-dom@npm:18.3.1"
+"react-dom@npm:^19.2.3":
+  version: 19.2.3
+  resolution: "react-dom@npm:19.2.3"
   dependencies:
-    loose-envify: "npm:^1.1.0"
-    scheduler: "npm:^0.23.2"
+    scheduler: "npm:^0.27.0"
   peerDependencies:
-    react: ^18.3.1
-  checksum: 10/3f4b73a3aa083091173b29812b10394dd06f4ac06aff410b74702cfb3aa29d7b0ced208aab92d5272919b612e5cda21aeb1d54191848cf6e46e9e354f3541f81
-  languageName: node
-  linkType: hard
-
-"react-error-overlay@npm:^6.0.11":
-  version: 6.0.11
-  resolution: "react-error-overlay@npm:6.0.11"
-  checksum: 10/b4ac746fc4fb50da733768aadbc638d34dd56d4e46ed4b2f2d1ac54dced0c5fa5fe47ebbbf90810ada44056ed0713bba5b9b930b69f4e45466e7f59fc806c44e
-  languageName: node
-  linkType: hard
-
-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0":
-  version: 18.2.0
-  resolution: "react-is@npm:18.2.0"
-  checksum: 10/200cd65bf2e0be7ba6055f647091b725a45dd2a6abef03bf2380ce701fd5edccee40b49b9d15edab7ac08a762bf83cb4081e31ec2673a5bfb549a36ba21570df
+    react: ^19.2.3
+  checksum: 10/5780f6d4c8e8ece09f82c5500ba2d55e01c30b5273f9281734d7d3b65013cd1fa52ec4e4436e5248c0a9e5bc340836044051168bbad8d7eac4d33ee6c2a867a1
   languageName: node
   linkType: hard
 
@@ -8769,37 +7909,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-shallow-renderer@npm:^16.15.0":
-  version: 16.15.0
-  resolution: "react-shallow-renderer@npm:16.15.0"
-  dependencies:
-    object-assign: "npm:^4.1.1"
-    react-is: "npm:^16.12.0 || ^17.0.0 || ^18.0.0"
-  peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/06457fe5bcaa44aeca998905b6849304742ea1cc2d3841e4a0964c745ff392bc4dec07f8c779f317faacce3a0bf6f84e15020ac0fa81adb931067dbb0baf707b
+"react-is@npm:^19.2.3":
+  version: 19.2.3
+  resolution: "react-is@npm:19.2.3"
+  checksum: 10/547ac397308204742447b5e4cf556cf09aa97f4cc1c95c4a28e4b2e73a7efab03e59d7b89b4a01f67bf9bf0ca87348a7f0e88bc87c0af6be458aaac1dec5e132
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react-test-renderer@npm:18.3.1"
+"react-test-renderer@npm:^19.2.3":
+  version: 19.2.3
+  resolution: "react-test-renderer@npm:19.2.3"
   dependencies:
-    react-is: "npm:^18.3.1"
-    react-shallow-renderer: "npm:^16.15.0"
-    scheduler: "npm:^0.23.2"
+    react-is: "npm:^19.2.3"
+    scheduler: "npm:^0.27.0"
   peerDependencies:
-    react: ^18.3.1
-  checksum: 10/d53137315c677bdfba702a7179a69828233fc7635ae1e0c03b203923d643400ace72b343cb3dd3dafba8911c20bef53f55bff7aa2e4ddff3ccc423fdd9deeee2
+    react: ^19.2.3
+  checksum: 10/a9de4d869b1555a54c02e8701be262dfa669eb366ff5cdb43ba49fa516beae439cbec2c3e5606c909e773c232328993e231b393af5eef25e87a845d4c7fb00dc
   languageName: node
   linkType: hard
 
-"react@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react@npm:18.3.1"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10/261137d3f3993eaa2368a83110466fc0e558bc2c7f7ae7ca52d94f03aac945f45146bd85e5f481044db1758a1dbb57879e2fcdd33924e2dde1bdc550ce73f7bf
+"react@npm:^19.2.3":
+  version: 19.2.3
+  resolution: "react@npm:19.2.3"
+  checksum: 10/d16b7f35c0d35a56f63d9d1693819762e4abc479c57dd6310298920bed3820fcec7e17a99d44983416d8f5049143ea45b8005d3ab8324bae8973224400502b08
   languageName: node
   linkType: hard
 
@@ -8829,6 +7961,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:^4.0.1":
+  version: 4.1.2
+  resolution: "readdirp@npm:4.1.2"
+  checksum: 10/7b817c265940dba90bb9c94d82920d76c3a35ea2d67f9f9d8bd936adcfe02d50c802b14be3dd2e725e002dddbe2cc1c7a0edfb1bc3a365c9dfd5a61e612eea1e
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -8854,30 +7993,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recursive-readdir@npm:^2.2.2":
-  version: 2.2.3
-  resolution: "recursive-readdir@npm:2.2.3"
-  dependencies:
-    minimatch: "npm:^3.0.5"
-  checksum: 10/19298852b0b87810aed5f2c81a73bfaaeb9ade7c9bf363f350fc1443f2cc3df66ecade5e102dfbb153fcd9df20342c301848e11e149e5f78759c1d55aa2c9c39
-  languageName: node
-  linkType: hard
-
-"regenerate-unicode-properties@npm:^10.1.0":
-  version: 10.1.0
-  resolution: "regenerate-unicode-properties@npm:10.1.0"
-  dependencies:
-    regenerate: "npm:^1.4.2"
-  checksum: 10/25b268659898955ad105267b4efba20e361e27b233670694b683728a2800314bec3053918d3bf71b0604376fd76fe9bc9c6f80379cfb6d1e209a58de44101aac
-  languageName: node
-  linkType: hard
-
-"regenerate-unicode-properties@npm:^10.2.0":
-  version: 10.2.0
-  resolution: "regenerate-unicode-properties@npm:10.2.0"
+"regenerate-unicode-properties@npm:^10.2.2":
+  version: 10.2.2
+  resolution: "regenerate-unicode-properties@npm:10.2.2"
   dependencies:
     regenerate: "npm:^1.4.2"
-  checksum: 10/9150eae6fe04a8c4f2ff06077396a86a98e224c8afad8344b1b656448e89e84edcd527e4b03aa5476774129eb6ad328ed684f9c1459794a935ec0cc17ce14329
+  checksum: 10/5041ee31185c4700de9dd76783fab9def51c412751190d523d621db5b8e35a6c2d91f1642c12247e7d94f84b8ae388d044baac1e88fc2ba0ac215ca8dc7bed38
   languageName: node
   linkType: hard
 
@@ -8888,65 +8009,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.13.11":
-  version: 0.13.11
-  resolution: "regenerator-runtime@npm:0.13.11"
-  checksum: 10/d493e9e118abef5b099c78170834f18540c4933cedf9bfabc32d3af94abfb59a7907bd7950259cbab0a929ebca7db77301e8024e5121e6482a82f78283dfd20c
-  languageName: node
-  linkType: hard
-
-"regenerator-runtime@npm:^0.14.0":
-  version: 0.14.1
-  resolution: "regenerator-runtime@npm:0.14.1"
-  checksum: 10/5db3161abb311eef8c45bcf6565f4f378f785900ed3945acf740a9888c792f75b98ecb77f0775f3bf95502ff423529d23e94f41d80c8256e8fa05ed4b07cf471
-  languageName: node
-  linkType: hard
-
-"regenerator-transform@npm:^0.15.2":
-  version: 0.15.2
-  resolution: "regenerator-transform@npm:0.15.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.8.4"
-  checksum: 10/c4fdcb46d11bbe32605b4b9ed76b21b8d3f241a45153e9dc6f5542fed4c7744fed459f42701f650d5d5956786bf7de57547329d1c05a9df2ed9e367b9d903302
-  languageName: node
-  linkType: hard
-
 "regexp.prototype.flags@npm:^1.5.1":
-  version: 1.5.1
-  resolution: "regexp.prototype.flags@npm:1.5.1"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    set-function-name: "npm:^2.0.0"
-  checksum: 10/3fa5610b8e411bbc3a43ddfd13162f3a817beb43155fbd8caa24d4fd0ce2f431a8197541808772a5a06e5946cebfb68464c827827115bde0d11720a92fe2981a
-  languageName: node
-  linkType: hard
-
-"regexpu-core@npm:^5.3.1":
-  version: 5.3.2
-  resolution: "regexpu-core@npm:5.3.2"
+  version: 1.5.4
+  resolution: "regexp.prototype.flags@npm:1.5.4"
   dependencies:
-    "@babel/regjsgen": "npm:^0.8.0"
-    regenerate: "npm:^1.4.2"
-    regenerate-unicode-properties: "npm:^10.1.0"
-    regjsparser: "npm:^0.9.1"
-    unicode-match-property-ecmascript: "npm:^2.0.0"
-    unicode-match-property-value-ecmascript: "npm:^2.1.0"
-  checksum: 10/ed0d7c66d84c633fbe8db4939d084c780190eca11f6920807dfb8ebac59e2676952cd8f2008d9c86ae8cf0463ea5fd12c5cff09ef2ce7d51ee6b420a5eb4d177
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-errors: "npm:^1.3.0"
+    get-proto: "npm:^1.0.1"
+    gopd: "npm:^1.2.0"
+    set-function-name: "npm:^2.0.2"
+  checksum: 10/8ab897ca445968e0b96f6237641510f3243e59c180ee2ee8d83889c52ff735dd1bf3657fcd36db053e35e1d823dd53f2565d0b8021ea282c9fe62401c6c3bd6d
   languageName: node
   linkType: hard
 
 "regexpu-core@npm:^6.2.0":
-  version: 6.2.0
-  resolution: "regexpu-core@npm:6.2.0"
+  version: 6.4.0
+  resolution: "regexpu-core@npm:6.4.0"
   dependencies:
     regenerate: "npm:^1.4.2"
-    regenerate-unicode-properties: "npm:^10.2.0"
+    regenerate-unicode-properties: "npm:^10.2.2"
     regjsgen: "npm:^0.8.0"
-    regjsparser: "npm:^0.12.0"
+    regjsparser: "npm:^0.13.0"
     unicode-match-property-ecmascript: "npm:^2.0.0"
-    unicode-match-property-value-ecmascript: "npm:^2.1.0"
-  checksum: 10/4d054ffcd98ca4f6ca7bf0df6598ed5e4a124264602553308add41d4fa714a0c5bcfb5bc868ac91f7060a9c09889cc21d3180a3a14c5f9c5838442806129ced3
+    unicode-match-property-value-ecmascript: "npm:^2.2.1"
+  checksum: 10/bf5f85a502a17f127a1f922270e2ecc1f0dd071ff76a3ec9afcd6b1c2bf7eae1486d1e3b1a6d621aee8960c8b15139e6b5058a84a68e518e1a92b52e9322faf9
   languageName: node
   linkType: hard
 
@@ -8976,25 +8063,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regjsparser@npm:^0.12.0":
-  version: 0.12.0
-  resolution: "regjsparser@npm:0.12.0"
-  dependencies:
-    jsesc: "npm:~3.0.2"
-  bin:
-    regjsparser: bin/parser
-  checksum: 10/c2d6506b3308679de5223a8916984198e0493649a67b477c66bdb875357e3785abbf3bedf7c5c2cf8967d3b3a7bdf08b7cbd39e65a70f9e1ffad584aecf5f06a
-  languageName: node
-  linkType: hard
-
-"regjsparser@npm:^0.9.1":
-  version: 0.9.1
-  resolution: "regjsparser@npm:0.9.1"
+"regjsparser@npm:^0.13.0":
+  version: 0.13.0
+  resolution: "regjsparser@npm:0.13.0"
   dependencies:
-    jsesc: "npm:~0.5.0"
+    jsesc: "npm:~3.1.0"
   bin:
     regjsparser: bin/parser
-  checksum: 10/be7757ef76e1db10bf6996001d1021048b5fb12f5cb470a99b8cf7f3ff943f0f0e2291c0dcdbb418b458ddc4ac10e48680a822b69ef487a0284c8b6b77beddc3
+  checksum: 10/eeaabd3454f59394cbb3bfeb15fd789e638040f37d0bee9071a9b0b85524ddc52b5f7aaaaa4847304c36fa37429e53d109c4dbf6b878cb5ffa4f4198c1042fb7
   languageName: node
   linkType: hard
 
@@ -9083,13 +8159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-from@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "resolve-from@npm:4.0.0"
-  checksum: 10/91eb76ce83621eea7bbdd9b55121a5c1c4a39e54a9ce04a9ad4517f102f8b5131c2cf07622c738a6683991bf54f2ce178f5a42803ecbd527ddc5105f362cc9e3
-  languageName: node
-  linkType: hard
-
 "resolve-from@npm:^5.0.0":
   version: 5.0.0
   resolution: "resolve-from@npm:5.0.0"
@@ -9097,29 +8166,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.14.2, resolve@npm:^1.20.0":
-  version: 1.22.8
-  resolution: "resolve@npm:1.22.8"
+"resolve@npm:^1.14.2, resolve@npm:^1.20.0, resolve@npm:^1.22.1":
+  version: 1.22.10
+  resolution: "resolve@npm:1.22.10"
   dependencies:
-    is-core-module: "npm:^2.13.0"
+    is-core-module: "npm:^2.16.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10/c473506ee01eb45cbcfefb68652ae5759e092e6b0fb64547feadf9736a6394f258fbc6f88e00c5ca36d5477fbb65388b272432a3600fa223062e54333c156753
+  checksum: 10/0a398b44da5c05e6e421d70108822c327675febb880eebe905587628de401854c61d5df02866ff34fc4cb1173a51c9f0e84a94702738df3611a62e2acdc68181
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>":
-  version: 1.22.8
-  resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
+"resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>":
+  version: 1.22.10
+  resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
   dependencies:
-    is-core-module: "npm:^2.13.0"
+    is-core-module: "npm:^2.16.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10/f345cd37f56a2c0275e3fe062517c650bb673815d885e7507566df589375d165bbbf4bdb6aa95600a9bc55f4744b81f452b5a63f95b9f10a72787dba3c90890a
+  checksum: 10/d4d878bfe3702d215ea23e75e0e9caf99468e3db76f5ca100d27ebdc527366fee3877e54bce7d47cc72ca8952fc2782a070d238bfa79a550eeb0082384c3b81a
   languageName: node
   linkType: hard
 
@@ -9138,9 +8207,9 @@ __metadata:
   linkType: hard
 
 "reusify@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "reusify@npm:1.0.4"
-  checksum: 10/14222c9e1d3f9ae01480c50d96057228a8524706db79cdeb5a2ce5bb7070dd9f409a6f84a02cbef8cdc80d39aef86f2dd03d155188a1300c599b05437dcd2ffb
+  version: 1.1.0
+  resolution: "reusify@npm:1.1.0"
+  checksum: 10/af47851b547e8a8dc89af144fceee17b80d5beaf5e6f57ed086432d79943434ff67ca526e92275be6f54b6189f6920a24eace75c2657eed32d02c400312b21ec
   languageName: node
   linkType: hard
 
@@ -9156,47 +8225,50 @@ __metadata:
   linkType: hard
 
 "rollup-plugin-prettier@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "rollup-plugin-prettier@npm:4.1.1"
+  version: 4.1.2
+  resolution: "rollup-plugin-prettier@npm:4.1.2"
   dependencies:
     "@types/prettier": "npm:^1.0.0 || ^2.0.0 || ^3.0.0"
-    diff: "npm:5.1.0"
+    diff: "npm:7.0.0"
     lodash.hasin: "npm:4.5.2"
     lodash.isempty: "npm:4.4.0"
     lodash.isnil: "npm:4.0.0"
     lodash.omitby: "npm:4.6.0"
-    magic-string: "npm:0.30.5"
+    magic-string: "npm:0.30.17"
   peerDependencies:
     prettier: ^1.0.0 || ^2.0.0 || ^3.0.0
     rollup: ^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
-  checksum: 10/5f5c0acb4154099d4f08e6d0d8688e6af3abe58df8d7b1ccf37cbe75b455a466d52bd426ad6ba1a1b8339ef1893a76b4d87a8fab22e4e72fe1de8f826ae4034f
+  checksum: 10/661120a8095d129fd53379658d492ccbeceed96cd1ab99458b8ae85bddeeaaf76900e039f30cac79c99fc1a657cab4387bbcd47ef194f317bb4bb50afbd4a8cc
   languageName: node
   linkType: hard
 
 "rollup@npm:^4.28.1":
-  version: 4.28.1
-  resolution: "rollup@npm:4.28.1"
-  dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.28.1"
-    "@rollup/rollup-android-arm64": "npm:4.28.1"
-    "@rollup/rollup-darwin-arm64": "npm:4.28.1"
-    "@rollup/rollup-darwin-x64": "npm:4.28.1"
-    "@rollup/rollup-freebsd-arm64": "npm:4.28.1"
-    "@rollup/rollup-freebsd-x64": "npm:4.28.1"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.28.1"
-    "@rollup/rollup-linux-arm-musleabihf": "npm:4.28.1"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.28.1"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.28.1"
-    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.28.1"
-    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.28.1"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.28.1"
-    "@rollup/rollup-linux-s390x-gnu": "npm:4.28.1"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.28.1"
-    "@rollup/rollup-linux-x64-musl": "npm:4.28.1"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.28.1"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.28.1"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.28.1"
-    "@types/estree": "npm:1.0.6"
+  version: 4.52.0
+  resolution: "rollup@npm:4.52.0"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.52.0"
+    "@rollup/rollup-android-arm64": "npm:4.52.0"
+    "@rollup/rollup-darwin-arm64": "npm:4.52.0"
+    "@rollup/rollup-darwin-x64": "npm:4.52.0"
+    "@rollup/rollup-freebsd-arm64": "npm:4.52.0"
+    "@rollup/rollup-freebsd-x64": "npm:4.52.0"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.52.0"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.52.0"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.52.0"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.52.0"
+    "@rollup/rollup-linux-loong64-gnu": "npm:4.52.0"
+    "@rollup/rollup-linux-ppc64-gnu": "npm:4.52.0"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.52.0"
+    "@rollup/rollup-linux-riscv64-musl": "npm:4.52.0"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.52.0"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.52.0"
+    "@rollup/rollup-linux-x64-musl": "npm:4.52.0"
+    "@rollup/rollup-openharmony-arm64": "npm:4.52.0"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.52.0"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.52.0"
+    "@rollup/rollup-win32-x64-gnu": "npm:4.52.0"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.52.0"
+    "@types/estree": "npm:1.0.8"
     fsevents: "npm:~2.3.2"
   dependenciesMeta:
     "@rollup/rollup-android-arm-eabi":
@@ -9219,29 +8291,35 @@ __metadata:
       optional: true
     "@rollup/rollup-linux-arm64-musl":
       optional: true
-    "@rollup/rollup-linux-loongarch64-gnu":
+    "@rollup/rollup-linux-loong64-gnu":
       optional: true
-    "@rollup/rollup-linux-powerpc64le-gnu":
+    "@rollup/rollup-linux-ppc64-gnu":
       optional: true
     "@rollup/rollup-linux-riscv64-gnu":
       optional: true
+    "@rollup/rollup-linux-riscv64-musl":
+      optional: true
     "@rollup/rollup-linux-s390x-gnu":
       optional: true
     "@rollup/rollup-linux-x64-gnu":
       optional: true
     "@rollup/rollup-linux-x64-musl":
       optional: true
+    "@rollup/rollup-openharmony-arm64":
+      optional: true
     "@rollup/rollup-win32-arm64-msvc":
       optional: true
     "@rollup/rollup-win32-ia32-msvc":
       optional: true
+    "@rollup/rollup-win32-x64-gnu":
+      optional: true
     "@rollup/rollup-win32-x64-msvc":
       optional: true
     fsevents:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 10/4337898d07e646835b52494b43b4ccd6929da87af2b0febc05ab217fd2425cfda05af5efaea6037c1641c90d803eb5b3e491eefdd47b28fda85af4f46a0dad34
+  checksum: 10/76bd97c8c9813d3204f4a30b60fc990bab3051b527874123a37c71d4ad41e516c39377f50e64c5bf9413996cd1b23c1cfead4e83de1bdc569b5d57fe580c6928
   languageName: node
   linkType: hard
 
@@ -9253,9 +8331,9 @@ __metadata:
   linkType: hard
 
 "run-applescript@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "run-applescript@npm:7.0.0"
-  checksum: 10/b02462454d8b182ad4117e5d4626e9e6782eb2072925c9fac582170b0627ae3c1ea92ee9b2df7daf84b5e9ffe14eb1cf5fb70bc44b15c8a0bfcdb47987e2410c
+  version: 7.1.0
+  resolution: "run-applescript@npm:7.1.0"
+  checksum: 10/8659fb5f2717b2b37a68cbfe5f678254cf24b5a82a6df3372b180c80c7c137dcd757a4166c3887e459f59a090ca414e8ea7ca97cf3ee5123db54b3b4006d7b7a
   languageName: node
   linkType: hard
 
@@ -9268,17 +8346,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.2, safe-buffer@npm:~5.2.0":
+  version: 5.2.1
+  resolution: "safe-buffer@npm:5.2.1"
+  checksum: 10/32872cd0ff68a3ddade7a7617b8f4c2ae8764d8b7d884c651b74457967a9e0e886267d3ecc781220629c44a865167b61c375d2da6c720c840ecd73f45d5d9451
+  languageName: node
+  linkType: hard
+
+"safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
   version: 5.1.2
   resolution: "safe-buffer@npm:5.1.2"
   checksum: 10/7eb5b48f2ed9a594a4795677d5a150faa7eb54483b2318b568dc0c4fc94092a6cce5be02c7288a0500a156282f5276d5688bce7259299568d1053b2150ef374a
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.2, safe-buffer@npm:~5.2.0":
-  version: 5.2.1
-  resolution: "safe-buffer@npm:5.2.1"
-  checksum: 10/32872cd0ff68a3ddade7a7617b8f4c2ae8764d8b7d884c651b74457967a9e0e886267d3ecc781220629c44a865167b61c375d2da6c720c840ecd73f45d5d9451
+"safe-regex-test@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "safe-regex-test@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    is-regex: "npm:^1.2.1"
+  checksum: 10/ebdb61f305bf4756a5b023ad86067df5a11b26898573afe9e52a548a63c3bd594825d9b0e2dde2eb3c94e57e0e04ac9929d4107c394f7b8e56a4613bed46c69a
   languageName: node
   linkType: hard
 
@@ -9289,9 +8378,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass-loader@npm:^16.0.1":
-  version: 16.0.1
-  resolution: "sass-loader@npm:16.0.1"
+"sass-loader@npm:^16.0.6":
+  version: 16.0.6
+  resolution: "sass-loader@npm:16.0.6"
   dependencies:
     neo-async: "npm:^2.6.2"
   peerDependencies:
@@ -9311,55 +8400,35 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: 10/3ba0ecfbfd3c0caa48fe58e9a1f4ccd08e5a95b1233978f985567be04fb153ef6736b95e54cc1a5a6e7a3485c3fa09dc165d028c031ae431f71f64f5ddd93608
+  checksum: 10/ff4d11c48a4286dbee0de0aa9c9225e96a4390039f8fccc3333e21b7d9ac27c4ed9572212ec733a31723ec740808f6d446aea20f1d05fd47e6ce0f23d4942fb8
   languageName: node
   linkType: hard
 
 "sass@npm:^1.77.8":
-  version: 1.77.8
-  resolution: "sass@npm:1.77.8"
+  version: 1.93.0
+  resolution: "sass@npm:1.93.0"
   dependencies:
-    chokidar: "npm:>=3.0.0 <4.0.0"
-    immutable: "npm:^4.0.0"
+    "@parcel/watcher": "npm:^2.4.1"
+    chokidar: "npm:^4.0.0"
+    immutable: "npm:^5.0.2"
     source-map-js: "npm:>=0.6.2 <2.0.0"
+  dependenciesMeta:
+    "@parcel/watcher":
+      optional: true
   bin:
     sass: sass.js
-  checksum: 10/4bf6e3007fef62dd6dfc657c89c2890872a6b5dc43e2dc4d61bcf9ae1bdc2dd95b59454a3cbd3c8363c98b673b028e1578b26135190d0f2a8a184a38ab41e99b
-  languageName: node
-  linkType: hard
-
-"scheduler@npm:^0.23.2":
-  version: 0.23.2
-  resolution: "scheduler@npm:0.23.2"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10/e8d68b89d18d5b028223edf090092846868a765a591944760942b77ea1f69b17235f7e956696efbb62c8130ab90af7e0949bfb8eba7896335507317236966bc9
-  languageName: node
-  linkType: hard
-
-"schema-utils@npm:2.7.0":
-  version: 2.7.0
-  resolution: "schema-utils@npm:2.7.0"
-  dependencies:
-    "@types/json-schema": "npm:^7.0.4"
-    ajv: "npm:^6.12.2"
-    ajv-keywords: "npm:^3.4.1"
-  checksum: 10/e5afb6ecf8e9c63ce5f964cd8f2a2e7bdc8c3a63f6bc7dd5cfdc475aa90c1b9ade1555a749519c1673a0bfa203a12e04499e7d6d956163f8e7a77aaa3f12935c
+  checksum: 10/37f22e016e1d5ad04754123009064260c1f568771688742a2b34c763d7c30b706e8c991dffb578ca6a1ecf598ea57e7392597719786eff5eb47b099b7dbf03cd
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^3.0.0, schema-utils@npm:^3.1.1":
-  version: 3.1.2
-  resolution: "schema-utils@npm:3.1.2"
-  dependencies:
-    "@types/json-schema": "npm:^7.0.8"
-    ajv: "npm:^6.12.5"
-    ajv-keywords: "npm:^3.5.2"
-  checksum: 10/f382d437dec0a424683444d782533260f9a8a4d82cf1c7e8f64305d81c5c927f7a0a645a414af78a891edd74d07a0e885120c1ef8254ce5843d01b4d67c0e81c
+"scheduler@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "scheduler@npm:0.27.0"
+  checksum: 10/eab3c3a8373195173e59c147224fc30dabe6dd453f248f5e610e8458512a5a2ee3a06465dc400ebfe6d35c9f5b7f3bb6b2e41c88c86fd177c25a73e7286a1e06
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^3.2.0":
+"schema-utils@npm:^3.0.0":
   version: 3.3.0
   resolution: "schema-utils@npm:3.3.0"
   dependencies:
@@ -9370,27 +8439,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "schema-utils@npm:4.0.1"
+"schema-utils@npm:^4.0.0, schema-utils@npm:^4.2.0, schema-utils@npm:^4.3.0":
+  version: 4.3.2
+  resolution: "schema-utils@npm:4.3.2"
   dependencies:
     "@types/json-schema": "npm:^7.0.9"
     ajv: "npm:^8.9.0"
     ajv-formats: "npm:^2.1.1"
     ajv-keywords: "npm:^5.1.0"
-  checksum: 10/f439ffa1eb8fc0893526181202b1e1869a1474a10dfc7fb634d160056510763efa29f1cad480abc1d4659b7725ac9b65438d87c3304c6cb42e54aee4cbe3049e
+  checksum: 10/02c32c34aae762d48468f98465a96a167fede637772871c7c7d8923671ddb9f20b2cc6f6e8448ae6bef5363e3597493c655212c8b06a4ee73aa099d9452fbd8b
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "schema-utils@npm:4.2.0"
+"schema-utils@npm:^4.3.3":
+  version: 4.3.3
+  resolution: "schema-utils@npm:4.3.3"
   dependencies:
     "@types/json-schema": "npm:^7.0.9"
     ajv: "npm:^8.9.0"
     ajv-formats: "npm:^2.1.1"
     ajv-keywords: "npm:^5.1.0"
-  checksum: 10/808784735eeb153ab7f3f787f840aa3bc63f423d2a5a7e96c9e70a0e53d0bc62d7b37ea396fc598ce19196e4fb86a72f897154b7c6ce2358bbc426166f205e14
+  checksum: 10/dba77a46ad7ff0c906f7f09a1a61109e6cb56388f15a68070b93c47a691f516c6a3eb454f81a8cceb0a0e55b87f8b05770a02bfb1f4e0a3143b5887488b2f900
   languageName: node
   linkType: hard
 
@@ -9412,24 +8481,15 @@ __metadata:
   linkType: hard
 
 "semver@npm:^5.6.0":
-  version: 5.7.1
-  resolution: "semver@npm:5.7.1"
-  bin:
-    semver: ./bin/semver
-  checksum: 10/fbc71cf00736480ca0dd67f2527cda6e0fde5447af00bd2ce06cb522d510216603a63ed0c6c87d8904507c1a4e8113e628a71424ebd9e0fd7d345ee8ed249690
-  languageName: node
-  linkType: hard
-
-"semver@npm:^6.1.2, semver@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "semver@npm:6.3.0"
+  version: 5.7.2
+  resolution: "semver@npm:5.7.2"
   bin:
-    semver: ./bin/semver.js
-  checksum: 10/8dd72e7c7cdbd8cff66b5530eeff9eec2342b127eef2c956259cdf66b85addf4829e6e4a045ca30d974d075595b0b03faa6318a597307eb3984649516b98b501
+    semver: bin/semver
+  checksum: 10/fca14418a174d4b4ef1fecb32c5941e3412d52a4d3d85165924ce3a47fbc7073372c26faf7484ceb4bbc2bde25880c6b97e492473dc7e9708fdfb1c6a02d546e
   languageName: node
   linkType: hard
 
-"semver@npm:^6.3.1":
+"semver@npm:^6.1.2, semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"
   bin:
@@ -9438,36 +8498,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.2, semver@npm:^7.3.4":
-  version: 7.5.0
-  resolution: "semver@npm:7.5.0"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
-  bin:
-    semver: bin/semver.js
-  checksum: 10/5aaa7675f8439b845db0a383f1420217a206fa084f2bc4ebc4bb31c0a50b02e9c922be3da274214ba7d9870d77f63085ac163f84f6ac910346675e9ac8681bf8
-  languageName: node
-  linkType: hard
-
-"semver@npm:^7.3.5":
-  version: 7.5.4
-  resolution: "semver@npm:7.5.4"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
-  bin:
-    semver: bin/semver.js
-  checksum: 10/985dec0d372370229a262c737063860fabd4a1c730662c1ea3200a2f649117761a42184c96df62a0e885e76fbd5dace41087d6c1ac0351b13c0df5d6bcb1b5ac
-  languageName: node
-  linkType: hard
-
-"semver@npm:^7.5.4":
-  version: 7.6.0
-  resolution: "semver@npm:7.6.0"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
+"semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.4":
+  version: 7.7.2
+  resolution: "semver@npm:7.7.2"
   bin:
     semver: bin/semver.js
-  checksum: 10/1b41018df2d8aca5a1db4729985e8e20428c650daea60fcd16e926e9383217d00f574fab92d79612771884a98d2ee2a1973f49d630829a8d54d6570defe62535
+  checksum: 10/7a24cffcaa13f53c09ce55e05efe25cd41328730b2308678624f8b9f5fc3093fc4d189f47950f0b811ff8f3c3039c24a2c36717ba7961615c682045bf03e1dda
   languageName: node
   linkType: hard
 
@@ -9492,15 +8528,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serialize-javascript@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "serialize-javascript@npm:6.0.1"
-  dependencies:
-    randombytes: "npm:^2.1.0"
-  checksum: 10/f756b1ff34b655b2183c64dd6683d28d4d9b9a80284b264cac9fd421c73890491eafd6c5c2bbe93f1f21bf78b572037c5a18d24b044c317ee1c9dc44d22db94c
-  languageName: node
-  linkType: hard
-
 "serialize-javascript@npm:^6.0.2":
   version: 6.0.2
   resolution: "serialize-javascript@npm:6.0.2"
@@ -9553,8 +8580,8 @@ __metadata:
   linkType: hard
 
 "serve@npm:^14.2.4":
-  version: 14.2.4
-  resolution: "serve@npm:14.2.4"
+  version: 14.2.5
+  resolution: "serve@npm:14.2.5"
   dependencies:
     "@zeit/schemas": "npm:2.36.0"
     ajv: "npm:8.12.0"
@@ -9563,25 +8590,13 @@ __metadata:
     chalk: "npm:5.0.1"
     chalk-template: "npm:0.4.0"
     clipboardy: "npm:3.0.0"
-    compression: "npm:1.7.4"
+    compression: "npm:1.8.1"
     is-port-reachable: "npm:4.0.0"
     serve-handler: "npm:6.1.6"
     update-check: "npm:1.5.4"
   bin:
     serve: build/main.js
-  checksum: 10/79627f399226b765f6e2f0f62faeceda5db17d00f40f9ad9faa39049729ea4ce7b595a72cc0dba3543947288772cb60f2b0ab91efa3bbedfe644ca7ee0484df1
-  languageName: node
-  linkType: hard
-
-"set-function-length@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "set-function-length@npm:1.1.1"
-  dependencies:
-    define-data-property: "npm:^1.1.1"
-    get-intrinsic: "npm:^1.2.1"
-    gopd: "npm:^1.0.1"
-    has-property-descriptors: "npm:^1.0.0"
-  checksum: 10/745ed1d7dc69a6185e0820082fe73838ab3dfd01e75cce83a41e4c1d68bbf34bc5fb38f32ded542ae0b557536b5d2781594499b5dcd19e7db138e06292a76c7b
+  checksum: 10/ff021bd16697f4342e712e5fda507cbf95e900cede1c38d72a02a7b570a355e3824284e95dc35ca9b49acbca27b8d515fd0648c1dde0a3341511ea6ba1ca30f1
   languageName: node
   linkType: hard
 
@@ -9599,14 +8614,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-function-name@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "set-function-name@npm:2.0.1"
+"set-function-name@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "set-function-name@npm:2.0.2"
   dependencies:
-    define-data-property: "npm:^1.0.1"
+    define-data-property: "npm:^1.1.4"
+    es-errors: "npm:^1.3.0"
     functions-have-names: "npm:^1.2.3"
-    has-property-descriptors: "npm:^1.0.0"
-  checksum: 10/4975d17d90c40168eee2c7c9c59d023429f0a1690a89d75656306481ece0c3c1fb1ebcc0150ea546d1913e35fbd037bace91372c69e543e51fc5d1f31a9fa126
+    has-property-descriptors: "npm:^1.0.2"
+  checksum: 10/c7614154a53ebf8c0428a6c40a3b0b47dac30587c1a19703d1b75f003803f73cdfa6a93474a9ba678fa565ef5fbddc2fae79bca03b7d22ab5fd5163dbe571a74
   languageName: node
   linkType: hard
 
@@ -9649,37 +8665,62 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shell-quote@npm:^1.7.3, shell-quote@npm:^1.8.1":
-  version: 1.8.1
-  resolution: "shell-quote@npm:1.8.1"
-  checksum: 10/af19ab5a1ec30cb4b2f91fd6df49a7442d5c4825a2e269b3712eded10eedd7f9efeaab96d57829880733fc55bcdd8e9b1d8589b4befb06667c731d08145e274d
+"shell-quote@npm:^1.8.3":
+  version: 1.8.3
+  resolution: "shell-quote@npm:1.8.3"
+  checksum: 10/5473e354637c2bd698911224129c9a8961697486cff1fb221f234d71c153fc377674029b0223d1d3c953a68d451d79366abfe53d1a0b46ee1f28eb9ade928f4c
   languageName: node
   linkType: hard
 
-"side-channel@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "side-channel@npm:1.0.4"
+"side-channel-list@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "side-channel-list@npm:1.0.0"
   dependencies:
-    call-bind: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.0.2"
-    object-inspect: "npm:^1.9.0"
-  checksum: 10/c4998d9fc530b0e75a7fd791ad868fdc42846f072734f9080ff55cc8dc7d3899abcda24fd896aa6648c3ab7021b4bb478073eb4f44dfd55bce9714bc1a7c5d45
+    es-errors: "npm:^1.3.0"
+    object-inspect: "npm:^1.13.3"
+  checksum: 10/603b928997abd21c5a5f02ae6b9cc36b72e3176ad6827fab0417ead74580cc4fb4d5c7d0a8a2ff4ead34d0f9e35701ed7a41853dac8a6d1a664fcce1a044f86f
   languageName: node
   linkType: hard
 
-"side-channel@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "side-channel@npm:1.0.6"
+"side-channel-map@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "side-channel-map@npm:1.0.1"
   dependencies:
-    call-bind: "npm:^1.0.7"
+    call-bound: "npm:^1.0.2"
     es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.4"
-    object-inspect: "npm:^1.13.1"
-  checksum: 10/eb10944f38cebad8ad643dd02657592fa41273ce15b8bfa928d3291aff2d30c20ff777cfe908f76ccc4551ace2d1245822fdc576657cce40e9066c638ca8fa4d
+    get-intrinsic: "npm:^1.2.5"
+    object-inspect: "npm:^1.13.3"
+  checksum: 10/5771861f77feefe44f6195ed077a9e4f389acc188f895f570d56445e251b861754b547ea9ef73ecee4e01fdada6568bfe9020d2ec2dfc5571e9fa1bbc4a10615
+  languageName: node
+  linkType: hard
+
+"side-channel-weakmap@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "side-channel-weakmap@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.5"
+    object-inspect: "npm:^1.13.3"
+    side-channel-map: "npm:^1.0.1"
+  checksum: 10/a815c89bc78c5723c714ea1a77c938377ea710af20d4fb886d362b0d1f8ac73a17816a5f6640f354017d7e292a43da9c5e876c22145bac00b76cfb3468001736
+  languageName: node
+  linkType: hard
+
+"side-channel@npm:^1.0.4, side-channel@npm:^1.0.6, side-channel@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "side-channel@npm:1.1.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    object-inspect: "npm:^1.13.3"
+    side-channel-list: "npm:^1.0.0"
+    side-channel-map: "npm:^1.0.1"
+    side-channel-weakmap: "npm:^1.0.2"
+  checksum: 10/7d53b9db292c6262f326b6ff3bc1611db84ece36c2c7dc0e937954c13c73185b0406c56589e2bb8d071d6fee468e14c39fb5d203ee39be66b7b8174f179afaba
   languageName: node
   linkType: hard
 
-"signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7":
+"signal-exit@npm:^3.0.3":
   version: 3.0.7
   resolution: "signal-exit@npm:3.0.7"
   checksum: 10/a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318
@@ -9704,13 +8745,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sisteransi@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "sisteransi@npm:1.0.5"
-  checksum: 10/aba6438f46d2bfcef94cf112c835ab395172c75f67453fe05c340c770d3c402363018ae1ab4172a1026a90c47eaccf3af7b6ff6fa749a680c2929bd7fa2b37a4
-  languageName: node
-  linkType: hard
-
 "slash@npm:^3.0.0":
   version: 3.0.0
   resolution: "slash@npm:3.0.0"
@@ -9743,31 +8777,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"socks-proxy-agent@npm:^8.0.1":
-  version: 8.0.2
-  resolution: "socks-proxy-agent@npm:8.0.2"
+"socks-proxy-agent@npm:^8.0.3":
+  version: 8.0.5
+  resolution: "socks-proxy-agent@npm:8.0.5"
   dependencies:
-    agent-base: "npm:^7.0.2"
+    agent-base: "npm:^7.1.2"
     debug: "npm:^4.3.4"
-    socks: "npm:^2.7.1"
-  checksum: 10/ea727734bd5b2567597aa0eda14149b3b9674bb44df5937bbb9815280c1586994de734d965e61f1dd45661183d7b41f115fb9e432d631287c9063864cfcc2ecc
+    socks: "npm:^2.8.3"
+  checksum: 10/ee99e1dacab0985b52cbe5a75640be6e604135e9489ebdc3048635d186012fbaecc20fbbe04b177dee434c319ba20f09b3e7dfefb7d932466c0d707744eac05c
   languageName: node
   linkType: hard
 
-"socks@npm:^2.7.1":
-  version: 2.7.1
-  resolution: "socks@npm:2.7.1"
+"socks@npm:^2.8.3":
+  version: 2.8.7
+  resolution: "socks@npm:2.8.7"
   dependencies:
-    ip: "npm:^2.0.0"
+    ip-address: "npm:^10.0.1"
     smart-buffer: "npm:^4.2.0"
-  checksum: 10/5074f7d6a13b3155fa655191df1c7e7a48ce3234b8ccf99afa2ccb56591c195e75e8bb78486f8e9ea8168e95a29573cbaad55b2b5e195160ae4d2ea6811ba833
+  checksum: 10/d19366c95908c19db154f329bbe94c2317d315dc933a7c2b5101e73f32a555c84fb199b62174e1490082a593a4933d8d5a9b297bde7d1419c14a11a965f51356
   languageName: node
   linkType: hard
 
-"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "source-map-js@npm:1.0.2"
-  checksum: 10/38e2d2dd18d2e331522001fc51b54127ef4a5d473f53b1349c5cca2123562400e0986648b52e9407e348eaaed53bce49248b6e2641e6d793ca57cb2c360d6d51
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3
   languageName: node
   linkType: hard
 
@@ -9796,9 +8830,9 @@ __metadata:
   linkType: hard
 
 "source-map@npm:^0.7.4":
-  version: 0.7.4
-  resolution: "source-map@npm:0.7.4"
-  checksum: 10/a0f7c9b797eda93139842fd28648e868a9a03ea0ad0d9fa6602a0c1f17b7fb6a7dcca00c144476cccaeaae5042e99a285723b1a201e844ad67221bf5d428f1dc
+  version: 0.7.6
+  resolution: "source-map@npm:0.7.6"
+  checksum: 10/c8d2da7c57c14f3fd7568f764b39ad49bbf9dd7632b86df3542b31fed117d4af2fb74a4f886fc06baf7a510fee68e37998efc3080aacdac951c36211dc29a7a3
   languageName: node
   linkType: hard
 
@@ -9836,16 +8870,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sprintf-js@npm:~1.0.2":
-  version: 1.0.3
-  resolution: "sprintf-js@npm:1.0.3"
-  checksum: 10/c34828732ab8509c2741e5fd1af6b767c3daf2c642f267788f933a65b1614943c282e74c4284f4fa749c264b18ee016a0d37a3e5b73aee446da46277d3a85daa
-  languageName: node
-  linkType: hard
-
 "sshpk@npm:^1.7.0":
-  version: 1.17.0
-  resolution: "sshpk@npm:1.17.0"
+  version: 1.18.0
+  resolution: "sshpk@npm:1.18.0"
   dependencies:
     asn1: "npm:~0.2.3"
     assert-plus: "npm:^1.0.0"
@@ -9860,16 +8887,25 @@ __metadata:
     sshpk-conv: bin/sshpk-conv
     sshpk-sign: bin/sshpk-sign
     sshpk-verify: bin/sshpk-verify
-  checksum: 10/668c2a279a6ce66fd739ce5684e37927dd75427cc020c828a208f85890a4c400705d4ba09f32fa44efca894339dc6931941664f6f6ba36dfa543de6d006cbe9c
+  checksum: 10/858339d43e3c6b6a848772a66f69442ce74f1a37655d9f35ba9d1f85329499ff0000af9f8ab83dbb39ad24c0c370edabe0be1e39863f70c6cded9924b8458c34
   languageName: node
   linkType: hard
 
-"ssri@npm:^10.0.0":
-  version: 10.0.5
-  resolution: "ssri@npm:10.0.5"
+"ssri@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "ssri@npm:12.0.0"
   dependencies:
     minipass: "npm:^7.0.3"
-  checksum: 10/453f9a1c241c13f5dfceca2ab7b4687bcff354c3ccbc932f35452687b9ef0ccf8983fd13b8a3baa5844c1a4882d6e3ddff48b0e7fd21d743809ef33b80616d79
+  checksum: 10/7024c1a6e39b3f18aa8f1c8290e884fe91b0f9ca5a6c6d410544daad54de0ba664db879afe16412e187c6c292fd60b937f047ee44292e5c2af2dcc6d8e1a9b48
+  languageName: node
+  linkType: hard
+
+"stack-utils@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "stack-utils@npm:2.0.6"
+  dependencies:
+    escape-string-regexp: "npm:^2.0.0"
+  checksum: 10/cdc988acbc99075b4b036ac6014e5f1e9afa7e564482b687da6384eee6a1909d7eaffde85b0a17ffbe186c5247faf6c2b7544e802109f63b72c7be69b13151bb
   languageName: node
   linkType: hard
 
@@ -9888,15 +8924,16 @@ __metadata:
   linkType: hard
 
 "stop-iteration-iterator@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "stop-iteration-iterator@npm:1.0.0"
+  version: 1.1.0
+  resolution: "stop-iteration-iterator@npm:1.1.0"
   dependencies:
-    internal-slot: "npm:^1.0.4"
-  checksum: 10/2a23a36f4f6bfa63f46ae2d53a3f80fe8276110b95a55345d8ed3d92125413494033bc8697eb774e8f7aeb5725f70e3d69753caa2ecacdac6258c16fa8aa8b0f
+    es-errors: "npm:^1.3.0"
+    internal-slot: "npm:^1.1.0"
+  checksum: 10/ff36c4db171ee76c936ccfe9541946b77017f12703d4c446652017356816862d3aa029a64e7d4c4ceb484e00ed4a81789333896390d808458638f3a216aa1f41
   languageName: node
   linkType: hard
 
-"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
   dependencies:
@@ -9946,11 +8983,18 @@ __metadata:
   linkType: hard
 
 "strip-ansi@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "strip-ansi@npm:7.0.1"
+  version: 7.1.2
+  resolution: "strip-ansi@npm:7.1.2"
   dependencies:
     ansi-regex: "npm:^6.0.1"
-  checksum: 10/07b3142f515d673e05d2da1ae07bba1eb2ba3b588135a38dea598ca11913b6e9487a9f2c9bed4c74cd31e554012b4503d9fb7e6034c7324973854feea2319110
+  checksum: 10/db0e3f9654e519c8a33c50fc9304d07df5649388e7da06d3aabf66d29e5ad65d5e6315d8519d409c15b32fa82c1df7e11ed6f8cd50b0e4404463f0c9d77c8d0b
+  languageName: node
+  linkType: hard
+
+"strip-bom@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "strip-bom@npm:3.0.0"
+  checksum: 10/8d50ff27b7ebe5ecc78f1fe1e00fcdff7af014e73cf724b46fb81ef889eeb1015fc5184b64e81a2efe002180f3ba431bdd77e300da5c6685d702780fbf0c8d5b
   languageName: node
   linkType: hard
 
@@ -9984,15 +9028,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^5.3.0":
-  version: 5.5.0
-  resolution: "supports-color@npm:5.5.0"
-  dependencies:
-    has-flag: "npm:^3.0.0"
-  checksum: 10/5f505c6fa3c6e05873b43af096ddeb22159831597649881aeb8572d6fe3b81e798cc10840d0c9735e0026b250368851b7f77b65e84f4e4daa820a4f69947f55b
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^7.1.0":
   version: 7.2.0
   resolution: "supports-color@npm:7.2.0"
@@ -10029,43 +9064,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tapable@npm:^1.0.0":
-  version: 1.1.3
-  resolution: "tapable@npm:1.1.3"
-  checksum: 10/1cec71f00f9a6cb1d88961b5d4f2dead4e185508b18b1bf1e688c8135039a391dd3e12b0887232b682ef28f1ef6f0c5e9a48794f6f5ef68f35d05de7e7a0a578
+"tapable@npm:^2.0.0, tapable@npm:^2.2.0, tapable@npm:^2.2.1":
+  version: 2.2.3
+  resolution: "tapable@npm:2.2.3"
+  checksum: 10/15e0472f662e40ea865cee2664163d4809c14369777c6b6dec27e3163dd24f8f3e4f3bf59c629e772402aec9a45e7daf40f9df9606b7304722d3c81f3b49235d
   languageName: node
   linkType: hard
 
-"tapable@npm:^2.0.0, tapable@npm:^2.1.1, tapable@npm:^2.2.0, tapable@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "tapable@npm:2.2.1"
-  checksum: 10/1769336dd21481ae6347611ca5fca47add0962fd8e80466515032125eca0084a4f0ede11e65341b9c0018ef4e1cf1ad820adbb0fba7cc99865c6005734000b0a
+"tapable@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "tapable@npm:2.3.0"
+  checksum: 10/496a841039960533bb6e44816a01fffc2a1eb428bb2051ecab9e87adf07f19e1f937566cbbbb09dceff31163c0ffd81baafcad84db900b601f0155dd0b37e9f2
   languageName: node
   linkType: hard
 
-"tar@npm:^6.1.11, tar@npm:^6.1.2":
-  version: 6.2.0
-  resolution: "tar@npm:6.2.0"
+"tar@npm:^7.4.3":
+  version: 7.4.4
+  resolution: "tar@npm:7.4.4"
   dependencies:
-    chownr: "npm:^2.0.0"
-    fs-minipass: "npm:^2.0.0"
-    minipass: "npm:^5.0.0"
-    minizlib: "npm:^2.1.1"
-    mkdirp: "npm:^1.0.3"
-    yallist: "npm:^4.0.0"
-  checksum: 10/2042bbb14830b5cd0d584007db0eb0a7e933e66d1397e72a4293768d2332449bc3e312c266a0887ec20156dea388d8965e53b4fc5097f42d78593549016da089
+    "@isaacs/fs-minipass": "npm:^4.0.0"
+    chownr: "npm:^3.0.0"
+    minipass: "npm:^7.1.2"
+    minizlib: "npm:^3.1.0"
+    yallist: "npm:^5.0.0"
+  checksum: 10/be7d95e019b029ac507e7cd4b23c243ba896b67d0837c4f53d18c32a5014a24b7b247e982f4d47147b8d637c491b35cc122e19e29246137ecb2b88a495aaf1fb
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.3.10":
-  version: 5.3.10
-  resolution: "terser-webpack-plugin@npm:5.3.10"
+"terser-webpack-plugin@npm:^5.3.11":
+  version: 5.3.14
+  resolution: "terser-webpack-plugin@npm:5.3.14"
   dependencies:
-    "@jridgewell/trace-mapping": "npm:^0.3.20"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
     jest-worker: "npm:^27.4.5"
-    schema-utils: "npm:^3.1.1"
-    serialize-javascript: "npm:^6.0.1"
-    terser: "npm:^5.26.0"
+    schema-utils: "npm:^4.3.0"
+    serialize-javascript: "npm:^6.0.2"
+    terser: "npm:^5.31.1"
   peerDependencies:
     webpack: ^5.1.0
   peerDependenciesMeta:
@@ -10075,53 +9109,30 @@ __metadata:
       optional: true
     uglify-js:
       optional: true
-  checksum: 10/fb1c2436ae1b4e983be043fa0a3d355c047b16b68f102437d08c736d7960c001e7420e2f722b9d99ce0dc70ca26a68cc63c0b82bc45f5b48671142b352a9d938
-  languageName: node
-  linkType: hard
-
-"terser@npm:^5.10.0":
-  version: 5.17.1
-  resolution: "terser@npm:5.17.1"
-  dependencies:
-    "@jridgewell/source-map": "npm:^0.3.2"
-    acorn: "npm:^8.5.0"
-    commander: "npm:^2.20.0"
-    source-map-support: "npm:~0.5.20"
-  bin:
-    terser: bin/terser
-  checksum: 10/b7d44c0d35bf74da9ba1415f73771cdc9fae9c3adc667724951dec27274e9acb796261c3d971dbafb4d9fdf43da98172b8213263a501025b9c9fe93cdd94d262
+  checksum: 10/5b7290f7edb179b83cefb8827c12371ddddc088cf251cf58a1c738d82628331ae6604273b61fe991d77411d4bb6b7178c3826aa47edf01b4ee21f973d6c8b8fb
   languageName: node
   linkType: hard
 
-"terser@npm:^5.26.0":
-  version: 5.29.1
-  resolution: "terser@npm:5.29.1"
+"terser@npm:^5.10.0, terser@npm:^5.31.1":
+  version: 5.44.0
+  resolution: "terser@npm:5.44.0"
   dependencies:
     "@jridgewell/source-map": "npm:^0.3.3"
-    acorn: "npm:^8.8.2"
+    acorn: "npm:^8.15.0"
     commander: "npm:^2.20.0"
     source-map-support: "npm:~0.5.20"
   bin:
     terser: bin/terser
-  checksum: 10/e8c036e7cd7d9e988765272453acdc52a019827e10710cf109c86d6f31248c8d4d8aa3a3deef30f931a2bb75a8ffc731ca947bd126e7d4e6dda157e6fe892ac0
-  languageName: node
-  linkType: hard
-
-"test-exclude@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "test-exclude@npm:6.0.0"
-  dependencies:
-    "@istanbuljs/schema": "npm:^0.1.2"
-    glob: "npm:^7.1.4"
-    minimatch: "npm:^3.0.4"
-  checksum: 10/8fccb2cb6c8fcb6bb4115394feb833f8b6cf4b9503ec2485c2c90febf435cac62abe882a0c5c51a37b9bbe70640cdd05acf5f45e486ac4583389f4b0855f69e5
+  checksum: 10/e094a905016b00dd665a71f47311826618ea67f2d9f5aec37834114f9d27ed0de47e18a4b3bc2421b274bbf3028ac2b082e2d20f0e3b9f24d912ea126c9da4bf
   languageName: node
   linkType: hard
 
-"text-table@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "text-table@npm:0.2.0"
-  checksum: 10/4383b5baaeffa9bb4cda2ac33a4aa2e6d1f8aaf811848bf73513a9b88fd76372dc461f6fd6d2e9cb5100f48b473be32c6f95bd983509b7d92bb4d92c10747452
+"thingies@npm:^2.5.0":
+  version: 2.5.0
+  resolution: "thingies@npm:2.5.0"
+  peerDependencies:
+    tslib: ^2
+  checksum: 10/b8b028a474aab798ff12ad5a5648306059976d3e23870327ae4ef640012953314b1d7f208dd5a8e9ebaeee6dd1cdb05503bb829699ee8f36514c37f771f2f035
   languageName: node
   linkType: hard
 
@@ -10132,17 +9143,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tmpl@npm:1.0.5":
-  version: 1.0.5
-  resolution: "tmpl@npm:1.0.5"
-  checksum: 10/cd922d9b853c00fe414c5a774817be65b058d54a2d01ebb415840960406c669a0fc632f66df885e24cb022ec812739199ccbdb8d1164c3e513f85bfca5ab2873
-  languageName: node
-  linkType: hard
-
-"to-fast-properties@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "to-fast-properties@npm:2.0.0"
-  checksum: 10/be2de62fe58ead94e3e592680052683b1ec986c72d589e7b21e5697f8744cdbf48c266fa72f6c15932894c10187b5f54573a3bcf7da0bfd964d5caf23d436168
+"tinyglobby@npm:^0.2.12":
+  version: 0.2.15
+  resolution: "tinyglobby@npm:0.2.15"
+  dependencies:
+    fdir: "npm:^6.5.0"
+    picomatch: "npm:^4.0.3"
+  checksum: 10/d72bd826a8b0fa5fa3929e7fe5ba48fceb2ae495df3a231b6c5408cd7d8c00b58ab5a9c2a76ba56a62ee9b5e083626f1f33599734bed1ffc4b792406408f0ca2
   languageName: node
   linkType: hard
 
@@ -10179,9 +9186,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-loader@npm:^9.5.1":
-  version: 9.5.1
-  resolution: "ts-loader@npm:9.5.1"
+"tree-dump@npm:^1.0.3":
+  version: 1.1.0
+  resolution: "tree-dump@npm:1.1.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/2c20118d2671996aa6f1ba1310cef1404fb525bde5d989ab542013f62b23a3633c0f0b32cbd516ee6205051ec21912b2470dabca006d19c9eba0740b567e2b60
+  languageName: node
+  linkType: hard
+
+"ts-loader@npm:9.5.4, ts-loader@npm:^9.5.1":
+  version: 9.5.4
+  resolution: "ts-loader@npm:9.5.4"
   dependencies:
     chalk: "npm:^4.1.0"
     enhanced-resolve: "npm:^5.0.0"
@@ -10191,21 +9207,115 @@ __metadata:
   peerDependencies:
     typescript: "*"
     webpack: ^5.0.0
-  checksum: 10/a85d43bb6f72858d613290ac02d1d24e81c38ba2dcb98b90465dc97eb6c2036bf9a389542c1a7865548643e7ed39f063fdff2dbb3e5aafbc511de6a3eb275adf
+  checksum: 10/a9977dce1cda5af08010ae92d96fb57981ce52cb6123054b232fc7f71e151969f45e36ca055c0babe01b3b97dcba54b631ad7a50e3e96e839dfd7033c385de05
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0":
-  version: 2.6.2
-  resolution: "tslib@npm:2.6.2"
-  checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca
+"ts-minimal@workspace:ts-minimal":
+  version: 0.0.0-use.local
+  resolution: "ts-minimal@workspace:ts-minimal"
+  dependencies:
+    "@babel/core": "npm:^7.28.5"
+    "@types/node": "npm:^25.0.3"
+    "@types/react": "npm:^19.2.7"
+    "@types/webpack-env": "npm:^1.18.8"
+    babel-loader: "npm:^10.0.0"
+    babel-plugin-transform-cx-imports: "npm:^26.0.1"
+    copy-webpack-plugin: "npm:^12.0.2"
+    css-loader: "npm:^7.1.2"
+    cx: "workspace:*"
+    cx-react: "workspace:*"
+    file-loader: "npm:^6.2.0"
+    html-webpack-plugin: "npm:^5.6.5"
+    mini-css-extract-plugin: "npm:^2.9.2"
+    react: "npm:^19.2.3"
+    react-dom: "npm:^19.2.3"
+    sass: "npm:^1.77.8"
+    sass-loader: "npm:^16.0.6"
+    style-loader: "npm:^4.0.0"
+    svg-url-loader: "npm:^8.0.0"
+    ts-loader: "npm:9.5.4"
+    typescript: "npm:^5.7.2"
+    url-loader: "npm:^4.1.1"
+    webpack: "npm:^5.103.0"
+    webpack-bundle-analyzer: "npm:^4.10.2"
+    webpack-cleanup-plugin: "npm:^0.5.1"
+    webpack-cli: "npm:^5.1.4"
+    webpack-combine-loaders: "npm:^2.0.4"
+    webpack-dev-server: "npm:^5.2.2"
+    webpack-merge: "npm:^6.0.1"
+  languageName: unknown
+  linkType: soft
+
+"ts-mocha@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "ts-mocha@npm:11.1.0"
+  peerDependencies:
+    mocha: ^3.X.X || ^4.X.X || ^5.X.X || ^6.X.X || ^7.X.X || ^8.X.X || ^9.X.X || ^10.X.X || ^11.X.X
+    ts-node: ^7.X.X || ^8.X.X || ^9.X.X || ^10.X.X
+    tsconfig-paths: ^4.X.X
+  peerDependenciesMeta:
+    tsconfig-paths:
+      optional: true
+  bin:
+    ts-mocha: bin/ts-mocha
+  checksum: 10/1e1b508e164702b7d8bc7298c50060a8eb13338a89d8b6dd61ff31237443aab2b1494dd779e72fdba3fab2d46cdf4f32ae4821f9cf66ca76ee4a74e8e9399b5e
+  languageName: node
+  linkType: hard
+
+"ts-node@npm:^10.9.2":
+  version: 10.9.2
+  resolution: "ts-node@npm:10.9.2"
+  dependencies:
+    "@cspotcode/source-map-support": "npm:^0.8.0"
+    "@tsconfig/node10": "npm:^1.0.7"
+    "@tsconfig/node12": "npm:^1.0.7"
+    "@tsconfig/node14": "npm:^1.0.0"
+    "@tsconfig/node16": "npm:^1.0.2"
+    acorn: "npm:^8.4.1"
+    acorn-walk: "npm:^8.1.1"
+    arg: "npm:^4.1.0"
+    create-require: "npm:^1.1.0"
+    diff: "npm:^4.0.1"
+    make-error: "npm:^1.1.1"
+    v8-compile-cache-lib: "npm:^3.0.1"
+    yn: "npm:3.1.1"
+  peerDependencies:
+    "@swc/core": ">=1.2.50"
+    "@swc/wasm": ">=1.2.50"
+    "@types/node": "*"
+    typescript: ">=2.7"
+  peerDependenciesMeta:
+    "@swc/core":
+      optional: true
+    "@swc/wasm":
+      optional: true
+  bin:
+    ts-node: dist/bin.js
+    ts-node-cwd: dist/bin-cwd.js
+    ts-node-esm: dist/bin-esm.js
+    ts-node-script: dist/bin-script.js
+    ts-node-transpile-only: dist/bin-transpile.js
+    ts-script: dist/bin-script-deprecated.js
+  checksum: 10/a91a15b3c9f76ac462f006fa88b6bfa528130dcfb849dd7ef7f9d640832ab681e235b8a2bc58ecde42f72851cc1d5d4e22c901b0c11aa51001ea1d395074b794
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.3":
-  version: 2.5.0
-  resolution: "tslib@npm:2.5.0"
-  checksum: 10/ea556fbdf396fe15dbd45e242754e86e7c36e0dce8644404a7c8a81ae1e940744dc639569aeca1ae370a7f804d82872f3fd8564eb23be9adb7618201d0314dac
+"tsconfig-paths@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "tsconfig-paths@npm:4.2.0"
+  dependencies:
+    json5: "npm:^2.2.2"
+    minimist: "npm:^1.2.6"
+    strip-bom: "npm:^3.0.0"
+  checksum: 10/5e55cc2fb6b800eb72011522e10edefccb45b1f9af055681a51354c9b597d1390c6fa9cc356b8c7529f195ac8a90a78190d563159f3a1eed10e01bbd4d01a8ab
+  languageName: node
+  linkType: hard
+
+"tslib@npm:^2.0.0, tslib@npm:^2.0.3":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7
   languageName: node
   linkType: hard
 
@@ -10243,36 +9353,63 @@ __metadata:
   linkType: hard
 
 "typescript@npm:^5.7.2":
-  version: 5.7.2
-  resolution: "typescript@npm:5.7.2"
+  version: 5.9.2
+  resolution: "typescript@npm:5.9.2"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/cc2fe6c822819de5d453fa25aa9f32096bf70dde215d481faa1ad84a283dfb264e33988ed8f6d36bc803dd0b16dbe943efa311a798ef76d5b3892a05dfbfd628
+  languageName: node
+  linkType: hard
+
+"typescript@npm:^5.9.3":
+  version: 5.9.3
+  resolution: "typescript@npm:5.9.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10/4caa3904df69db9d4a8bedc31bafc1e19ffb7b24fbde2997a1633ae1398d0de5bdbf8daf602ccf3b23faddf1aeeb9b795223a2ed9c9a4fdcaf07bfde114a401a
+  checksum: 10/c089d9d3da2729fd4ac517f9b0e0485914c4b3c26f80dc0cffcb5de1719a17951e92425d55db59515c1a7ddab65808466debb864d0d56dcf43f27007d0709594
   languageName: node
   linkType: hard
 
 "typescript@patch:typescript@npm%3A^5.7.2#optional!builtin<compat/typescript>":
-  version: 5.7.2
-  resolution: "typescript@patch:typescript@npm%3A5.7.2#optional!builtin<compat/typescript>::version=5.7.2&hash=8c6c40"
+  version: 5.9.2
+  resolution: "typescript@patch:typescript@npm%3A5.9.2#optional!builtin<compat/typescript>::version=5.9.2&hash=8c6c40"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/a8606016982f2f46ed085e9b4b84d8a5251b42ff0560c995c20f3c3ab9543e37c1015d92ab2f1cc7b2af2b499d12bac57e11789da271fb3225af8ec0b24e5b64
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A^5.9.3#optional!builtin<compat/typescript>":
+  version: 5.9.3
+  resolution: "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>::version=5.9.3&hash=8c6c40"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10/ff27fc124bceb8969be722baa38af945b2505767cf794de3e2715e58f61b43780284060287d651fcbbdfb6f917f4653b20f4751991f17e0706db389b9bb3f75d
+  checksum: 10/5d416ad4f2ea564f515a3f919e901edbfa4b497cc17dd325c5726046c3eef7ed22d1f59c787267d478311f6f0a265ff790f8a6c7e9df3ea3471458f5ec81e8b7
   languageName: node
   linkType: hard
 
-"undici-types@npm:~6.20.0":
-  version: 6.20.0
-  resolution: "undici-types@npm:6.20.0"
-  checksum: 10/583ac7bbf4ff69931d3985f4762cde2690bb607844c16a5e2fbb92ed312fe4fa1b365e953032d469fa28ba8b224e88a595f0b10a449332f83fa77c695e567dbe
+"undici-types@npm:~7.12.0":
+  version: 7.12.0
+  resolution: "undici-types@npm:7.12.0"
+  checksum: 10/4a0f927c98828f76fb0d64f356e36e5ac6e074ae4c7bec08d6de8bc36b7cf08ae27a3518fa8eb703f51c1a675241e2d07359bbce63f5575299148a270cea7e43
+  languageName: node
+  linkType: hard
+
+"undici-types@npm:~7.16.0":
+  version: 7.16.0
+  resolution: "undici-types@npm:7.16.0"
+  checksum: 10/db43439f69c2d94cc29f75cbfe9de86df87061d6b0c577ebe9bb3255f49b22c50162a7d7eb413b0458b6510b8ca299ac7cff38c3a29fbd31af9f504bcf7fbc0d
   languageName: node
   linkType: hard
 
 "unicode-canonical-property-names-ecmascript@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "unicode-canonical-property-names-ecmascript@npm:2.0.0"
-  checksum: 10/39be078afd014c14dcd957a7a46a60061bc37c4508ba146517f85f60361acf4c7539552645ece25de840e17e293baa5556268d091ca6762747fdd0c705001a45
+  version: 2.0.1
+  resolution: "unicode-canonical-property-names-ecmascript@npm:2.0.1"
+  checksum: 10/3c3dabdb1d22aef4904399f9e810d0b71c0b12b3815169d96fac97e56d5642840c6071cf709adcace2252bc6bb80242396c2ec74b37224eb015c5f7aca40bad7
   languageName: node
   linkType: hard
 
@@ -10286,49 +9423,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unicode-match-property-value-ecmascript@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "unicode-match-property-value-ecmascript@npm:2.1.0"
-  checksum: 10/06661bc8aba2a60c7733a7044f3e13085808939ad17924ffd4f5222a650f88009eb7c09481dc9c15cfc593d4ad99bd1cde8d54042733b335672591a81c52601c
+"unicode-match-property-value-ecmascript@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "unicode-match-property-value-ecmascript@npm:2.2.1"
+  checksum: 10/a42bebebab4c82ea6d8363e487b1fb862f82d1b54af1b67eb3fef43672939b685780f092c4f235266b90225863afa1258d57e7be3578d8986a08d8fc309aabe1
   languageName: node
   linkType: hard
 
 "unicode-property-aliases-ecmascript@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "unicode-property-aliases-ecmascript@npm:2.1.0"
-  checksum: 10/243524431893649b62cc674d877bd64ef292d6071dd2fd01ab4d5ad26efbc104ffcd064f93f8a06b7e4ec54c172bf03f6417921a0d8c3a9994161fe1f88f815b
+  version: 2.2.0
+  resolution: "unicode-property-aliases-ecmascript@npm:2.2.0"
+  checksum: 10/0dd0f6e70130c59b4a841bac206758f70227b113145e4afe238161e3e8540e8eb79963e7a228cd90ad13d499e96f7ef4ee8940835404b2181ad9bf9c174818e3
   languageName: node
   linkType: hard
 
-"unicorn-magic@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "unicorn-magic@npm:0.1.0"
-  checksum: 10/9b4d0e9809807823dc91d0920a4a4c0cff2de3ebc54ee87ac1ee9bc75eafd609b09d1f14495e0173aef26e01118706196b6ab06a75fe0841028b3983a8af313f
+"unicorn-magic@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "unicorn-magic@npm:0.3.0"
+  checksum: 10/bdd7d7c522f9456f32a0b77af23f8854f9a7db846088c3868ec213f9550683ab6a2bdf3803577eacbafddb4e06900974385841ccb75338d17346ccef45f9cb01
   languageName: node
   linkType: hard
 
-"unique-filename@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "unique-filename@npm:3.0.0"
+"unique-filename@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unique-filename@npm:4.0.0"
   dependencies:
-    unique-slug: "npm:^4.0.0"
-  checksum: 10/8e2f59b356cb2e54aab14ff98a51ac6c45781d15ceaab6d4f1c2228b780193dc70fae4463ce9e1df4479cb9d3304d7c2043a3fb905bdeca71cc7e8ce27e063df
+    unique-slug: "npm:^5.0.0"
+  checksum: 10/6a62094fcac286b9ec39edbd1f8f64ff92383baa430af303dfed1ffda5e47a08a6b316408554abfddd9730c78b6106bef4ca4d02c1231a735ddd56ced77573df
   languageName: node
   linkType: hard
 
-"unique-slug@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "unique-slug@npm:4.0.0"
+"unique-slug@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unique-slug@npm:5.0.0"
   dependencies:
     imurmurhash: "npm:^0.1.4"
-  checksum: 10/40912a8963fc02fb8b600cf50197df4a275c602c60de4cac4f75879d3c48558cfac48de08a25cc10df8112161f7180b3bbb4d662aadb711568602f9eddee54f0
-  languageName: node
-  linkType: hard
-
-"universalify@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "universalify@npm:2.0.0"
-  checksum: 10/2406a4edf4a8830aa6813278bab1f953a8e40f2f63a37873ffa9a3bc8f9745d06cc8e88f3572cb899b7e509013f7f6fcc3e37e8a6d914167a5381d8440518c44
+  checksum: 10/beafdf3d6f44990e0a5ce560f8f881b4ee811be70b6ba0db25298c31c8cf525ed963572b48cd03be1c1349084f9e339be4241666d7cf1ebdad20598d3c652b27
   languageName: node
   linkType: hard
 
@@ -10339,59 +9469,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.0.10":
-  version: 1.0.11
-  resolution: "update-browserslist-db@npm:1.0.11"
-  dependencies:
-    escalade: "npm:^3.1.1"
-    picocolors: "npm:^1.0.0"
-  peerDependencies:
-    browserslist: ">= 4.21.0"
-  bin:
-    update-browserslist-db: cli.js
-  checksum: 10/cc1c7a38d15413046bea28ff3c7668a7cb6b4a53d83e8089fa960efd896deb6d1a9deffc2beb8dc0506186a352c8d19804efe5ec7eeb401037e14cf3ea5363f8
-  languageName: node
-  linkType: hard
-
-"update-browserslist-db@npm:^1.0.13":
-  version: 1.0.13
-  resolution: "update-browserslist-db@npm:1.0.13"
-  dependencies:
-    escalade: "npm:^3.1.1"
-    picocolors: "npm:^1.0.0"
-  peerDependencies:
-    browserslist: ">= 4.21.0"
-  bin:
-    update-browserslist-db: cli.js
-  checksum: 10/9074b4ef34d2ed931f27d390aafdd391ee7c45ad83c508e8fed6aaae1eb68f81999a768ed8525c6f88d4001a4fbf1b8c0268f099d0e8e72088ec5945ac796acf
-  languageName: node
-  linkType: hard
-
-"update-browserslist-db@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "update-browserslist-db@npm:1.1.0"
+"update-browserslist-db@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "update-browserslist-db@npm:1.1.3"
   dependencies:
-    escalade: "npm:^3.1.2"
-    picocolors: "npm:^1.0.1"
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.1"
   peerDependencies:
     browserslist: ">= 4.21.0"
   bin:
     update-browserslist-db: cli.js
-  checksum: 10/d70b9efeaf4601aadb1a4f6456a7a5d9118e0063d995866b8e0c5e0cf559482671dab6ce7b079f9536b06758a344fbd83f974b965211e1c6e8d1958540b0c24c
+  checksum: 10/87af2776054ffb9194cf95e0201547d041f72ee44ce54b144da110e65ea7ca01379367407ba21de5c9edd52c74d95395366790de67f3eb4cc4afa0fe4424e76f
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "update-browserslist-db@npm:1.1.1"
+"update-browserslist-db@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "update-browserslist-db@npm:1.1.4"
   dependencies:
     escalade: "npm:^3.2.0"
-    picocolors: "npm:^1.1.0"
+    picocolors: "npm:^1.1.1"
   peerDependencies:
     browserslist: ">= 4.21.0"
   bin:
     update-browserslist-db: cli.js
-  checksum: 10/7678dd8609750588d01aa7460e8eddf2ff9d16c2a52fb1811190e0d056390f1fdffd94db3cf8fb209cf634ab4fa9407886338711c71cc6ccade5eeb22b093734
+  checksum: 10/79b2c0a31e9b837b49dc55d5cb7b77f44a69502847c7be352a44b1d35ac2032bf0e1bb7543f992809ed427bf9d32aa3f7ad41cef96198fa959c1666870174c06
   languageName: node
   linkType: hard
 
@@ -10483,6 +9585,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"v8-compile-cache-lib@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "v8-compile-cache-lib@npm:3.0.1"
+  checksum: 10/88d3423a52b6aaf1836be779cab12f7016d47ad8430dffba6edf766695e6d90ad4adaa3d8eeb512cc05924f3e246c4a4ca51e089dccf4402caa536b5e5be8961
+  languageName: node
+  linkType: hard
+
 "vary@npm:~1.1.2":
   version: 1.1.2
   resolution: "vary@npm:1.1.2"
@@ -10501,22 +9610,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"walker@npm:^1.0.8":
-  version: 1.0.8
-  resolution: "walker@npm:1.0.8"
-  dependencies:
-    makeerror: "npm:1.0.12"
-  checksum: 10/ad7a257ea1e662e57ef2e018f97b3c02a7240ad5093c392186ce0bcf1f1a60bbadd520d073b9beb921ed99f64f065efb63dfc8eec689a80e569f93c1c5d5e16c
-  languageName: node
-  linkType: hard
-
-"watchpack@npm:^2.4.1":
-  version: 2.4.1
-  resolution: "watchpack@npm:2.4.1"
+"watchpack@npm:^2.4.4":
+  version: 2.4.4
+  resolution: "watchpack@npm:2.4.4"
   dependencies:
     glob-to-regexp: "npm:^0.4.1"
     graceful-fs: "npm:^4.1.2"
-  checksum: 10/0736ebd20b75d3931f9b6175c819a66dee29297c1b389b2e178bc53396a6f867ecc2fd5d87a713ae92dcb73e487daec4905beee20ca00a9e27f1184a7c2bca5e
+  checksum: 10/cfa3473fc12a1a1b88123056941e90c462a67aedc10b242229eeeccdd45ed0b763c3b591caaffb0f7d77295b539b5518bb1ad3bcd891ae6505dfeae4cf51fd15
   languageName: node
   linkType: hard
 
@@ -10604,12 +9704,12 @@ __metadata:
   linkType: hard
 
 "webpack-dev-middleware@npm:^7.4.2":
-  version: 7.4.2
-  resolution: "webpack-dev-middleware@npm:7.4.2"
+  version: 7.4.3
+  resolution: "webpack-dev-middleware@npm:7.4.3"
   dependencies:
     colorette: "npm:^2.0.10"
     memfs: "npm:^4.6.0"
-    mime-types: "npm:^2.1.31"
+    mime-types: "npm:^3.0.1"
     on-finished: "npm:^2.4.1"
     range-parser: "npm:^1.2.1"
     schema-utils: "npm:^4.0.0"
@@ -10618,17 +9718,18 @@ __metadata:
   peerDependenciesMeta:
     webpack:
       optional: true
-  checksum: 10/608d101b82081a5bc6c0237f9945e14a8eefce1664c10877f3feb0042710f6c8b4288b07986505f791302d81b3c51180f679b97c91c3cdabd3fd0687a464ca1c
+  checksum: 10/e04fdac620d99524a688280ec1104f1b0e5686f7a239b70761db90fc1117b6adf6bb1013059bb95fa9e6a07505e86353b7acc97b8487813079df2a12a37b6747
   languageName: node
   linkType: hard
 
-"webpack-dev-server@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "webpack-dev-server@npm:5.1.0"
+"webpack-dev-server@npm:^5.2.2":
+  version: 5.2.2
+  resolution: "webpack-dev-server@npm:5.2.2"
   dependencies:
     "@types/bonjour": "npm:^3.5.13"
     "@types/connect-history-api-fallback": "npm:^1.5.4"
     "@types/express": "npm:^4.17.21"
+    "@types/express-serve-static-core": "npm:^4.17.21"
     "@types/serve-index": "npm:^1.9.4"
     "@types/serve-static": "npm:^1.15.5"
     "@types/sockjs": "npm:^0.3.36"
@@ -10639,10 +9740,9 @@ __metadata:
     colorette: "npm:^2.0.10"
     compression: "npm:^1.7.4"
     connect-history-api-fallback: "npm:^2.0.0"
-    express: "npm:^4.19.2"
+    express: "npm:^4.21.2"
     graceful-fs: "npm:^4.2.6"
-    html-entities: "npm:^2.4.0"
-    http-proxy-middleware: "npm:^2.0.3"
+    http-proxy-middleware: "npm:^2.0.9"
     ipaddr.js: "npm:^2.1.0"
     launch-editor: "npm:^2.6.1"
     open: "npm:^10.0.3"
@@ -10663,7 +9763,7 @@ __metadata:
       optional: true
   bin:
     webpack-dev-server: bin/webpack-dev-server.js
-  checksum: 10/f23255681cc5e2c2709b23ca7b2185aeed83b1c9912657d4512eda8685625a46d7a103a92446494a55fe2afdfab936f9bd4f037d20b52f7fdfff303e7e7199c7
+  checksum: 10/59517409cd38c01a875a03b9658f3d20d492b5b8bead9ded4a0f3d33e6857daf2d352fe89f0181dcaea6d0fbe84b0494cb4750a87120fe81cdbb3c32b499451c
   languageName: node
   linkType: hard
 
@@ -10677,12 +9777,13 @@ __metadata:
   linkType: hard
 
 "webpack-merge@npm:^5.7.3":
-  version: 5.8.0
-  resolution: "webpack-merge@npm:5.8.0"
+  version: 5.10.0
+  resolution: "webpack-merge@npm:5.10.0"
   dependencies:
     clone-deep: "npm:^4.0.1"
+    flat: "npm:^5.0.2"
     wildcard: "npm:^2.0.0"
-  checksum: 10/c22812671a93d938bed21c02461d0efb0a7ec0b0f5e7cf28853b2c428a9ad947a26076e97243b1d9cb1cc5a3f92f24e467fc442f03f6e583d082bb3f3f460baf
+  checksum: 10/fa46ab200f17d06c7cb49fc37ad91f15769753953c9724adac1061fa305a2a223cb37c3ed25a5f501580c91f11a0800990fe3814c70a77bf1aa5b3fca45a2ac6
   languageName: node
   linkType: hard
 
@@ -10697,46 +9798,48 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-sources@npm:^3.2.3":
-  version: 3.2.3
-  resolution: "webpack-sources@npm:3.2.3"
-  checksum: 10/a661f41795d678b7526ae8a88cd1b3d8ce71a7d19b6503da8149b2e667fc7a12f9b899041c1665d39e38245ed3a59ab68de648ea31040c3829aa695a5a45211d
+"webpack-sources@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "webpack-sources@npm:3.3.3"
+  checksum: 10/ec5d72607e8068467370abccbfff855c596c098baedbe9d198a557ccf198e8546a322836a6f74241492576adba06100286592993a62b63196832cdb53c8bae91
   languageName: node
   linkType: hard
 
-"webpack@npm:^5.97.1":
-  version: 5.97.1
-  resolution: "webpack@npm:5.97.1"
+"webpack@npm:^5.103.0":
+  version: 5.103.0
+  resolution: "webpack@npm:5.103.0"
   dependencies:
     "@types/eslint-scope": "npm:^3.7.7"
-    "@types/estree": "npm:^1.0.6"
+    "@types/estree": "npm:^1.0.8"
+    "@types/json-schema": "npm:^7.0.15"
     "@webassemblyjs/ast": "npm:^1.14.1"
     "@webassemblyjs/wasm-edit": "npm:^1.14.1"
     "@webassemblyjs/wasm-parser": "npm:^1.14.1"
-    acorn: "npm:^8.14.0"
-    browserslist: "npm:^4.24.0"
+    acorn: "npm:^8.15.0"
+    acorn-import-phases: "npm:^1.0.3"
+    browserslist: "npm:^4.26.3"
     chrome-trace-event: "npm:^1.0.2"
-    enhanced-resolve: "npm:^5.17.1"
+    enhanced-resolve: "npm:^5.17.3"
     es-module-lexer: "npm:^1.2.1"
     eslint-scope: "npm:5.1.1"
     events: "npm:^3.2.0"
     glob-to-regexp: "npm:^0.4.1"
     graceful-fs: "npm:^4.2.11"
     json-parse-even-better-errors: "npm:^2.3.1"
-    loader-runner: "npm:^4.2.0"
+    loader-runner: "npm:^4.3.1"
     mime-types: "npm:^2.1.27"
     neo-async: "npm:^2.6.2"
-    schema-utils: "npm:^3.2.0"
-    tapable: "npm:^2.1.1"
-    terser-webpack-plugin: "npm:^5.3.10"
-    watchpack: "npm:^2.4.1"
-    webpack-sources: "npm:^3.2.3"
+    schema-utils: "npm:^4.3.3"
+    tapable: "npm:^2.3.0"
+    terser-webpack-plugin: "npm:^5.3.11"
+    watchpack: "npm:^2.4.4"
+    webpack-sources: "npm:^3.3.3"
   peerDependenciesMeta:
     webpack-cli:
       optional: true
   bin:
     webpack: bin/webpack.js
-  checksum: 10/665bd3b8c84b20f0b1f250159865e4d3e9b76c682030313d49124d5f8e96357ccdcc799dd9fe0ebf010fdb33dbc59d9863d79676a308e868e360ac98f7c09987
+  checksum: 10/0018e77d159da412aa8cc1c3ac1d7c0b44228d0f5ce3939b4f424c04feba69747d8490541bcf8143b358a64afbbd69daad95e573ec9c4a90a99bef55d51dd43e
   languageName: node
   linkType: hard
 
@@ -10766,65 +9869,42 @@ __metadata:
   linkType: hard
 
 "which-boxed-primitive@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "which-boxed-primitive@npm:1.0.2"
+  version: 1.1.1
+  resolution: "which-boxed-primitive@npm:1.1.1"
   dependencies:
-    is-bigint: "npm:^1.0.1"
-    is-boolean-object: "npm:^1.1.0"
-    is-number-object: "npm:^1.0.4"
-    is-string: "npm:^1.0.5"
-    is-symbol: "npm:^1.0.3"
-  checksum: 10/9c7ca7855255f25ac47f4ce8b59c4cc33629e713fd7a165c9d77a2bb47bf3d9655a5664660c70337a3221cf96742f3589fae15a3a33639908d33e29aa2941efb
+    is-bigint: "npm:^1.1.0"
+    is-boolean-object: "npm:^1.2.1"
+    is-number-object: "npm:^1.1.1"
+    is-string: "npm:^1.1.1"
+    is-symbol: "npm:^1.1.1"
+  checksum: 10/a877c0667bc089518c83ad4d845cf8296b03efe3565c1de1940c646e00a2a1ae9ed8a185bcfa27cbf352de7906f0616d83b9d2f19ca500ee02a551fb5cf40740
   languageName: node
   linkType: hard
 
 "which-collection@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "which-collection@npm:1.0.1"
-  dependencies:
-    is-map: "npm:^2.0.1"
-    is-set: "npm:^2.0.1"
-    is-weakmap: "npm:^2.0.1"
-    is-weakset: "npm:^2.0.1"
-  checksum: 10/85c95fcf92df7972ce66bed879e53d9dc752a30ef08e1ca4696df56bcf1c302e3b9965a39b04a20fa280a997fad6c170eb0b4d62435569b7f6c0bc7be910572b
-  languageName: node
-  linkType: hard
-
-"which-typed-array@npm:^1.1.13":
-  version: 1.1.13
-  resolution: "which-typed-array@npm:1.1.13"
-  dependencies:
-    available-typed-arrays: "npm:^1.0.5"
-    call-bind: "npm:^1.0.4"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/605e3e10b7118af904a0e79d0d50b95275102f06ec902734024989cd71354929f7acee50de43529d3baf5858e2e4eb32c75e6ebd226c888ad976d8140e4a3e71
-  languageName: node
-  linkType: hard
-
-"which-typed-array@npm:^1.1.2":
-  version: 1.1.9
-  resolution: "which-typed-array@npm:1.1.9"
+  version: 1.0.2
+  resolution: "which-collection@npm:1.0.2"
   dependencies:
-    available-typed-arrays: "npm:^1.0.5"
-    call-bind: "npm:^1.0.2"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-tostringtag: "npm:^1.0.0"
-    is-typed-array: "npm:^1.1.10"
-  checksum: 10/90ef760a09dcffc479138a6bc77fd2933a81a41d531f4886ae212f6edb54a0645a43a6c24de2c096aea910430035ac56b3d22a06f3d64e5163fa178d0f24e08e
+    is-map: "npm:^2.0.3"
+    is-set: "npm:^2.0.3"
+    is-weakmap: "npm:^2.0.2"
+    is-weakset: "npm:^2.0.3"
+  checksum: 10/674bf659b9bcfe4055f08634b48a8588e879161b9fefed57e9ec4ff5601e4d50a05ccd76cf10f698ef5873784e5df3223336d56c7ce88e13bcf52ebe582fc8d7
   languageName: node
   linkType: hard
 
-"which@npm:^1.3.1":
-  version: 1.3.1
-  resolution: "which@npm:1.3.1"
+"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.2":
+  version: 1.1.19
+  resolution: "which-typed-array@npm:1.1.19"
   dependencies:
-    isexe: "npm:^2.0.0"
-  bin:
-    which: ./bin/which
-  checksum: 10/549dcf1752f3ee7fbb64f5af2eead4b9a2f482108b7de3e85c781d6c26d8cf6a52d37cfbe0642a155fa6470483fe892661a859c03157f24c669cf115f3bbab5e
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
+    for-each: "npm:^0.3.5"
+    get-proto: "npm:^1.0.1"
+    gopd: "npm:^1.2.0"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/12be30fb88567f9863186bee1777f11bea09dd59ed8b3ce4afa7dd5cade75e2f4cc56191a2da165113cc7cf79987ba021dac1e22b5b62aa7e5c56949f2469a68
   languageName: node
   linkType: hard
 
@@ -10839,14 +9919,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "which@npm:4.0.0"
+"which@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "which@npm:5.0.0"
   dependencies:
     isexe: "npm:^3.1.1"
   bin:
     node-which: bin/which.js
-  checksum: 10/f17e84c042592c21e23c8195108cff18c64050b9efb8459589116999ea9da6dd1509e6a1bac3aeebefd137be00fabbb61b5c2bc0aa0f8526f32b58ee2f545651
+  checksum: 10/6ec99e89ba32c7e748b8a3144e64bfc74aa63e2b2eacbb61a0060ad0b961eb1a632b08fb1de067ed59b002cec3e21de18299216ebf2325ef0f78e0f121e14e90
   languageName: node
   linkType: hard
 
@@ -10873,6 +9953,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"workerpool@npm:^9.2.0":
+  version: 9.3.4
+  resolution: "workerpool@npm:9.3.4"
+  checksum: 10/afe729dde73bb541ba84d023813cc920b8e930e453295f58af3c45a3e42e11a2dbb6202f2a693358892d40d1e315b9a14f142d2dfd46a6078b23deda42680495
+  languageName: node
+  linkType: hard
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"
@@ -10902,19 +9989,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"write-file-atomic@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "write-file-atomic@npm:4.0.2"
-  dependencies:
-    imurmurhash: "npm:^0.1.4"
-    signal-exit: "npm:^3.0.7"
-  checksum: 10/3be1f5508a46c190619d5386b1ac8f3af3dbe951ed0f7b0b4a0961eed6fc626bd84b50cf4be768dabc0a05b672f5d0c5ee7f42daa557b14415d18c3a13c7d246
-  languageName: node
-  linkType: hard
-
 "ws@npm:^7.3.1":
-  version: 7.5.9
-  resolution: "ws@npm:7.5.9"
+  version: 7.5.10
+  resolution: "ws@npm:7.5.10"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ^5.0.2
@@ -10923,13 +10000,13 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 10/171e35012934bd8788150a7f46f963e50bac43a4dc524ee714c20f258693ac4d3ba2abadb00838fdac42a47af9e958c7ae7e6f4bc56db047ba897b8a2268cf7c
+  checksum: 10/9c796b84ba80ffc2c2adcdfc9c8e9a219ba99caa435c9a8d45f9ac593bba325563b3f83edc5eb067cc6d21b9a6bf2c930adf76dd40af5f58a5ca6859e81858f0
   languageName: node
   linkType: hard
 
 "ws@npm:^8.18.0":
-  version: 8.18.0
-  resolution: "ws@npm:8.18.0"
+  version: 8.18.3
+  resolution: "ws@npm:8.18.3"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -10938,7 +10015,16 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 10/70dfe53f23ff4368d46e4c0b1d4ca734db2c4149c6f68bc62cb16fc21f753c47b35fcc6e582f3bdfba0eaeb1c488cddab3c2255755a5c3eecb251431e42b3ff6
+  checksum: 10/725964438d752f0ab0de582cd48d6eeada58d1511c3f613485b5598a83680bedac6187c765b0fe082e2d8cc4341fc57707c813ae780feee82d0c5efe6a4c61b6
+  languageName: node
+  linkType: hard
+
+"wsl-utils@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "wsl-utils@npm:0.1.0"
+  dependencies:
+    is-wsl: "npm:^3.1.0"
+  checksum: 10/de4c92187e04c3c27b4478f410a02e81c351dc85efa3447bf1666f34fc80baacd890a6698ec91995631714086992036013286aea3d77e6974020d40a08e00aec
   languageName: node
   linkType: hard
 
@@ -10963,10 +10049,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^1.7.2":
-  version: 1.10.2
-  resolution: "yaml@npm:1.10.2"
-  checksum: 10/e088b37b4d4885b70b50c9fa1b7e54bd2e27f5c87205f9deaffd1fb293ab263d9c964feadb9817a7b129a5bf30a06582cb08750f810568ecc14f3cdbabb79cb3
+"yallist@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "yallist@npm:5.0.0"
+  checksum: 10/1884d272d485845ad04759a255c71775db0fac56308764b4c77ea56a20d56679fad340213054c8c9c9c26fcfd4c4b2a90df993b7e0aaf3cdb73c618d1d1a802a
   languageName: node
   linkType: hard
 
@@ -10977,6 +10063,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs-parser@npm:^21.1.1":
+  version: 21.1.1
+  resolution: "yargs-parser@npm:21.1.1"
+  checksum: 10/9dc2c217ea3bf8d858041252d43e074f7166b53f3d010a8c711275e09cd3d62a002969a39858b92bbda2a6a63a585c7127014534a560b9c69ed2d923d113406e
+  languageName: node
+  linkType: hard
+
 "yargs-unparser@npm:^2.0.0":
   version: 2.0.0
   resolution: "yargs-unparser@npm:2.0.0"
@@ -11004,16 +10097,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs@npm:^17.7.2":
+  version: 17.7.2
+  resolution: "yargs@npm:17.7.2"
+  dependencies:
+    cliui: "npm:^8.0.1"
+    escalade: "npm:^3.1.1"
+    get-caller-file: "npm:^2.0.5"
+    require-directory: "npm:^2.1.1"
+    string-width: "npm:^4.2.3"
+    y18n: "npm:^5.0.5"
+    yargs-parser: "npm:^21.1.1"
+  checksum: 10/abb3e37678d6e38ea85485ed86ebe0d1e3464c640d7d9069805ea0da12f69d5a32df8e5625e370f9c96dd1c2dc088ab2d0a4dd32af18222ef3c4224a19471576
+  languageName: node
+  linkType: hard
+
+"yn@npm:3.1.1":
+  version: 3.1.1
+  resolution: "yn@npm:3.1.1"
+  checksum: 10/2c487b0e149e746ef48cda9f8bad10fc83693cd69d7f9dcd8be4214e985de33a29c9e24f3c0d6bcf2288427040a8947406ab27f7af67ee9456e6b84854f02dd6
+  languageName: node
+  linkType: hard
+
 "yocto-queue@npm:^0.1.0":
   version: 0.1.0
   resolution: "yocto-queue@npm:0.1.0"
   checksum: 10/f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
   languageName: node
   linkType: hard
-
-"yocto-queue@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "yocto-queue@npm:1.0.0"
-  checksum: 10/2cac84540f65c64ccc1683c267edce396b26b1e931aa429660aefac8fbe0188167b7aee815a3c22fa59a28a58d898d1a2b1825048f834d8d629f4c2a5d443801
-  languageName: node
-  linkType: hard