diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 144c22476e..17466de534 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -32,11 +32,3 @@ updates:
         update-types: ["version-update:semver-major"]
       - dependency-name: "replace-in-file"
         update-types: ["version-update:semver-major"]
-      - dependency-name: "react"
-        update-types: ["version-update:semver-major"]
-      - dependency-name: "react-*"
-        update-types: ["version-update:semver-major"]
-      - dependency-name: "@types/react"
-        update-types: ["version-update:semver-major"]
-      - dependency-name: "@types/react-"
-        update-types: ["version-update:semver-major"]
diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md
index 26cfe033a9..526e896d9f 100644
--- a/etc/lime-elements.api.md
+++ b/etc/lime-elements.api.md
@@ -980,9 +980,9 @@ export type InputType = 'date' | 'datetime-local' | 'email' | 'month' | 'number'
 // Warning: (ae-missing-release-tag) "LocalJSX" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-namespace JSX_2 {
+export namespace JSX {
     // (undocumented)
-    interface IntrinsicElements {
+    export interface IntrinsicElements {
         // (undocumented)
         "limel-3d-hover-effect-glow": Limel3dHoverEffectGlow;
         // (undocumented)
@@ -1003,11 +1003,11 @@ namespace JSX_2 {
         "limel-button-group": LimelButtonGroup;
         // (undocumented)
         "limel-callout": LimelCallout;
-        // Warning: (ae-incompatible-release-tags) The symbol ""limel-card"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
+        // Warning: (ae-incompatible-release-tags) The symbol ""limel-card"" is marked as @public, but its signature references "JSX" which is marked as @beta
         //
         // (undocumented)
         "limel-card": LimelCard;
-        // Warning: (ae-incompatible-release-tags) The symbol ""limel-chart"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
+        // Warning: (ae-incompatible-release-tags) The symbol ""limel-chart"" is marked as @public, but its signature references "JSX" which is marked as @beta
         //
         // (undocumented)
         "limel-chart": LimelChart;
@@ -1037,7 +1037,7 @@ namespace JSX_2 {
         "limel-dock": LimelDock;
         // (undocumented)
         "limel-dock-button": LimelDockButton;
-        // Warning: (ae-incompatible-release-tags) The symbol ""limel-dynamic-label"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
+        // Warning: (ae-incompatible-release-tags) The symbol ""limel-dynamic-label"" is marked as @public, but its signature references "JSX" which is marked as @beta
         //
         // (undocumented)
         "limel-dynamic-label": LimelDynamicLabel;
@@ -1047,7 +1047,7 @@ namespace JSX_2 {
         "limel-file-dropzone": LimelFileDropzone;
         // (undocumented)
         "limel-file-input": LimelFileInput;
-        // Warning: (ae-incompatible-release-tags) The symbol ""limel-file-viewer"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
+        // Warning: (ae-incompatible-release-tags) The symbol ""limel-file-viewer"" is marked as @public, but its signature references "JSX" which is marked as @beta
         //
         // (undocumented)
         "limel-file-viewer": LimelFileViewer;
@@ -1099,7 +1099,7 @@ namespace JSX_2 {
         "limel-progress-flow": LimelProgressFlow;
         // (undocumented)
         "limel-progress-flow-item": LimelProgressFlowItem;
-        // Warning: (ae-incompatible-release-tags) The symbol ""limel-prosemirror-adapter"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
+        // Warning: (ae-incompatible-release-tags) The symbol ""limel-prosemirror-adapter"" is marked as @public, but its signature references "JSX" which is marked as @beta
         //
         // (undocumented)
         "limel-prosemirror-adapter": LimelProsemirrorAdapter;
@@ -1123,11 +1123,11 @@ namespace JSX_2 {
         "limel-tab-panel": LimelTabPanel;
         // (undocumented)
         "limel-table": LimelTable;
-        // Warning: (ae-incompatible-release-tags) The symbol ""limel-text-editor"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
+        // Warning: (ae-incompatible-release-tags) The symbol ""limel-text-editor"" is marked as @public, but its signature references "JSX" which is marked as @beta
         //
         // (undocumented)
         "limel-text-editor": LimelTextEditor;
-        // Warning: (ae-incompatible-release-tags) The symbol ""limel-text-editor-link-menu"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
+        // Warning: (ae-incompatible-release-tags) The symbol ""limel-text-editor-link-menu"" is marked as @public, but its signature references "JSX" which is marked as @beta
         //
         // (undocumented)
         "limel-text-editor-link-menu": LimelTextEditorLinkMenu;
@@ -1136,9 +1136,9 @@ namespace JSX_2 {
         // (undocumented)
         "limel-tooltip-content": LimelTooltipContent;
     }
-    interface Limel3dHoverEffectGlow {
+    export interface Limel3dHoverEffectGlow {
     }
-    interface LimelActionBar {
+    export interface LimelActionBar {
         "accessibleLabel"?: string;
         "actions"?: Array<ActionBarItem | ListSeparator>;
         "layout"?: 'fullWidth' | 'floating';
@@ -1146,33 +1146,33 @@ namespace JSX_2 {
         "openDirection"?: OpenDirection;
     }
     // (undocumented)
-    interface LimelActionBarItem {
+    export interface LimelActionBarItem {
         "isVisible"?: boolean;
         "item": ActionBarItem | ListSeparator;
         "onSelect"?: (event: LimelActionBarItemCustomEvent<ActionBarItem | ListSeparator>) => void;
         "selected"?: boolean;
     }
     // (undocumented)
-    interface LimelActionBarOverflowMenu {
+    export interface LimelActionBarOverflowMenu {
         "items"?: Array<MenuItem | ListSeparator>;
         "onSelect"?: (event: LimelActionBarOverflowMenuCustomEvent<ActionBarItem>) => void;
         "openDirection"?: OpenDirection;
     }
-    interface LimelBadge {
+    export interface LimelBadge {
         "label"?: number | string;
     }
     // (undocumented)
-    interface LimelBanner {
+    export interface LimelBanner {
         "icon"?: string;
         "message"?: string;
     }
-    interface LimelBreadcrumbs {
+    export interface LimelBreadcrumbs {
         "divider"?: string;
         "items"?: BreadcrumbsItem[];
         "onSelect"?: (event: LimelBreadcrumbsCustomEvent<BreadcrumbsItem>) => void;
     }
     // (undocumented)
-    interface LimelButton {
+    export interface LimelButton {
         "disabled"?: boolean;
         "icon"?: string;
         "label"?: string;
@@ -1181,19 +1181,19 @@ namespace JSX_2 {
         "outlined"?: boolean;
         "primary"?: boolean;
     }
-    interface LimelButtonGroup {
+    export interface LimelButtonGroup {
         "disabled"?: boolean;
         "onChange"?: (event: LimelButtonGroupCustomEvent<Button>) => void;
         "value"?: Button[];
     }
-    interface LimelCallout {
+    export interface LimelCallout {
         "heading"?: string;
         "icon"?: string;
         "language"?: Languages;
         "type"?: CalloutType;
     }
     // @beta
-    interface LimelCard {
+    export interface LimelCard {
         "actions"?: Array<ActionBarItem | ListSeparator>;
         "clickable"?: boolean;
         "heading"?: string;
@@ -1205,7 +1205,7 @@ namespace JSX_2 {
         "value"?: string;
     }
     // @beta
-    interface LimelChart {
+    export interface LimelChart {
         "accessibleItemsLabel"?: string;
         "accessibleLabel"?: string;
         "axisIncrement"?: number;
@@ -1224,7 +1224,7 @@ namespace JSX_2 {
         | 'dot'
         | 'stacked-bar';
     }
-    interface LimelCheckbox {
+    export interface LimelCheckbox {
         "checked"?: boolean;
         "disabled"?: boolean;
         "helperText"?: string;
@@ -1237,7 +1237,7 @@ namespace JSX_2 {
         "readonlyLabels"?: Array<Label<boolean>>;
         "required"?: boolean;
     }
-    interface LimelChip {
+    export interface LimelChip {
         "badge"?: string | number;
         "disabled"?: boolean;
         "icon"?: string | Icon;
@@ -1258,7 +1258,7 @@ namespace JSX_2 {
         // @beta
         "type"?: ChipType;
     }
-    interface LimelChipSet {
+    export interface LimelChipSet {
         "autocomplete"?: string;
         "clearAllButton"?: boolean;
         "delimiter"?: string;
@@ -1282,7 +1282,7 @@ namespace JSX_2 {
         "type"?: 'choice' | 'filter' | 'input';
         "value"?: Chip[];
     }
-    interface LimelCircularProgress {
+    export interface LimelCircularProgress {
         "displayPercentageColors"?: boolean;
         "maxValue"?: number;
         "prefix"?: string;
@@ -1291,7 +1291,7 @@ namespace JSX_2 {
         "value"?: number;
     }
     // (undocumented)
-    interface LimelCodeEditor {
+    export interface LimelCodeEditor {
         "colorScheme"?: ColorScheme;
         "fold"?: boolean;
         "language"?: Language;
@@ -1302,7 +1302,7 @@ namespace JSX_2 {
         "value"?: string;
     }
     // (undocumented)
-    interface LimelCollapsibleSection {
+    export interface LimelCollapsibleSection {
         "actions"?: Action[];
         "header"?: string;
         "isOpen"?: boolean;
@@ -1310,7 +1310,7 @@ namespace JSX_2 {
         "onClose"?: (event: LimelCollapsibleSectionCustomEvent<void>) => void;
         "onOpen"?: (event: LimelCollapsibleSectionCustomEvent<void>) => void;
     }
-    interface LimelColorPicker {
+    export interface LimelColorPicker {
         "helperText"?: string;
         "label"?: string;
         "onChange"?: (event: LimelColorPickerCustomEvent<string>) => void;
@@ -1320,18 +1320,18 @@ namespace JSX_2 {
         "value"?: string;
     }
     // (undocumented)
-    interface LimelColorPickerPalette {
+    export interface LimelColorPickerPalette {
         "helperText"?: string;
         "label"?: string;
         "onChange"?: (event: LimelColorPickerPaletteCustomEvent<string>) => void;
         "required"?: boolean;
         "value"?: string;
     }
-    interface LimelConfig {
+    export interface LimelConfig {
         "config"?: Config;
     }
     // (undocumented)
-    interface LimelDatePicker {
+    export interface LimelDatePicker {
         "disabled"?: boolean;
         "format"?: string;
         "formatter"?: (date: Date) => string;
@@ -1346,7 +1346,7 @@ namespace JSX_2 {
         "type"?: DateType;
         "value"?: Date;
     }
-    interface LimelDialog {
+    export interface LimelDialog {
         "closingActions"?: ClosingActions;
         "fullscreen"?: boolean;
         "heading"?: string | DialogHeading;
@@ -1355,7 +1355,7 @@ namespace JSX_2 {
         "open"?: boolean;
     }
     // (undocumented)
-    interface LimelDock {
+    export interface LimelDock {
         "accessibleLabel"?: string;
         "allowResize"?: boolean;
         "dockFooterItems"?: DockItem[];
@@ -1368,7 +1368,7 @@ namespace JSX_2 {
         "onMenuOpen"?: (event: LimelDockCustomEvent<DockItem>) => void;
     }
     // (undocumented)
-    interface LimelDockButton {
+    export interface LimelDockButton {
         "expanded"?: boolean;
         "item": DockItem;
         "onClose"?: (event: LimelDockButtonCustomEvent<void>) => void;
@@ -1377,12 +1377,12 @@ namespace JSX_2 {
         "useMobileLayout"?: boolean;
     }
     // @beta
-    interface LimelDynamicLabel {
+    export interface LimelDynamicLabel {
         "defaultLabel"?: Omit<Label, 'value'>;
         "labels"?: Label[];
         "value"?: LabelValue;
     }
-    interface LimelFile {
+    export interface LimelFile {
         "accept"?: string;
         "disabled"?: boolean;
         "invalid"?: boolean;
@@ -1394,7 +1394,7 @@ namespace JSX_2 {
         "required"?: boolean;
         "value"?: FileInfo;
     }
-    interface LimelFileDropzone {
+    export interface LimelFileDropzone {
         "accept"?: string;
         "disabled"?: boolean;
         "helperText"?: string;
@@ -1402,14 +1402,14 @@ namespace JSX_2 {
         "onFilesSelected"?: (event: LimelFileDropzoneCustomEvent<FileInfo[]>) => void;
         "text"?: string;
     }
-    interface LimelFileInput {
+    export interface LimelFileInput {
         "accept"?: string;
         "disabled"?: boolean;
         "multiple"?: boolean;
         "onFilesSelected"?: (event: LimelFileInputCustomEvent<FileInfo[]>) => void;
     }
     // @beta
-    interface LimelFileViewer {
+    export interface LimelFileViewer {
         "actions"?: ListItem[];
         "allowDownload"?: boolean;
         "allowFullscreen"?: boolean;
@@ -1421,7 +1421,7 @@ namespace JSX_2 {
         "onAction"?: (event: LimelFileViewerCustomEvent<ListItem>) => void;
         "url"?: string;
     }
-    interface LimelFlatpickrAdapter {
+    export interface LimelFlatpickrAdapter {
         "format"?: string;
         // (undocumented)
         "formatter": (date: Date) => string;
@@ -1433,14 +1433,14 @@ namespace JSX_2 {
         "value"?: Date;
     }
     // @deprecated
-    interface LimelFlexContainer {
+    export interface LimelFlexContainer {
         "align"?: FlexContainerAlign;
         "direction"?: FlexContainerDirection;
         "justify"?: FlexContainerJustify;
         "reverse"?: boolean;
     }
     // (undocumented)
-    interface LimelForm {
+    export interface LimelForm {
         "disabled"?: boolean;
         "errors"?: ValidationError;
         "onChange"?: (event: LimelFormCustomEvent<object>) => void;
@@ -1450,47 +1450,47 @@ namespace JSX_2 {
         "transformErrors"?: (errors: FormError[]) => FormError[];
         "value"?: object;
     }
-    interface LimelGrid {
+    export interface LimelGrid {
     }
-    interface LimelHeader {
+    export interface LimelHeader {
         "heading"?: string;
         "icon"?: string | Icon;
         "subheading"?: string;
         "subheadingDivider"?: string;
         "supportingText"?: string;
     }
-    interface LimelHelp {
+    export interface LimelHelp {
         "openDirection"?: OpenDirection;
         "readMoreLink"?: Link;
         "trigger"?: string;
         "value"?: string;
     }
-    interface LimelHelpContent {
+    export interface LimelHelpContent {
         // (undocumented)
         "readMoreLink"?: Link;
         // (undocumented)
         "value"?: string;
     }
-    interface LimelHelperLine {
+    export interface LimelHelperLine {
         "helperText"?: string;
         "helperTextId"?: string;
         "invalid"?: boolean;
         "length"?: number;
         "maxLength"?: number;
     }
-    interface LimelIcon {
+    export interface LimelIcon {
         "badge"?: boolean;
         "name"?: string;
         "size"?: IconSize;
     }
     // (undocumented)
-    interface LimelIconButton {
+    export interface LimelIconButton {
         "disabled"?: boolean;
         "elevated"?: boolean;
         "icon"?: string;
         "label"?: string;
     }
-    interface LimelInfoTile {
+    export interface LimelInfoTile {
         "badge"?: number | string;
         "disabled"?: boolean;
         "icon"?: string;
@@ -1503,7 +1503,7 @@ namespace JSX_2 {
         "value"?: number | string;
     }
     // (undocumented)
-    interface LimelInputField {
+    export interface LimelInputField {
         "completions"?: string[];
         "disabled"?: boolean;
         "formatNumber"?: boolean;
@@ -1530,14 +1530,14 @@ namespace JSX_2 {
         "type"?: InputType;
         "value"?: string;
     }
-    interface LimelLinearProgress {
+    export interface LimelLinearProgress {
         "accessibleLabel"?: string;
         "indeterminate"?: boolean;
         "language"?: Languages;
         "value"?: number;
     }
     // (undocumented)
-    interface LimelList {
+    export interface LimelList {
         "badgeIcons"?: boolean;
         "iconSize"?: IconSize;
         "items"?: Array<ListItem | ListSeparator>;
@@ -1547,13 +1547,13 @@ namespace JSX_2 {
         "onSelect"?: (event: LimelListCustomEvent<ListItem | ListItem[]>) => void;
         "type"?: ListType;
     }
-    interface LimelMarkdown {
+    export interface LimelMarkdown {
         "value"?: string;
         // @alpha
         "whitelist"?: CustomElementDefinition[];
     }
     // (undocumented)
-    interface LimelMenu {
+    export interface LimelMenu {
         "badgeIcons"?: boolean;
         "disabled"?: boolean;
         "emptyResultMessage"?: string;
@@ -1569,7 +1569,7 @@ namespace JSX_2 {
         "surfaceWidth"?: SurfaceWidth;
     }
     // (undocumented)
-    interface LimelMenuList {
+    export interface LimelMenuList {
         "badgeIcons"?: boolean;
         "iconSize"?: IconSize;
         "items"?: Array<MenuItem | ListSeparator>;
@@ -1579,13 +1579,13 @@ namespace JSX_2 {
         "type"?: MenuListType;
     }
     // (undocumented)
-    interface LimelMenuSurface {
+    export interface LimelMenuSurface {
         "allowClicksElement"?: HTMLElement;
         "onDismiss"?: (event: LimelMenuSurfaceCustomEvent<void>) => void;
         "open"?: boolean;
     }
     // (undocumented)
-    interface LimelPicker {
+    export interface LimelPicker {
         "actionPosition"?: ActionPosition;
         "actions"?: Array<ListItem<Action>>;
         "actionScrollBehavior"?: ActionScrollBehavior;
@@ -1608,16 +1608,16 @@ namespace JSX_2 {
         "searchLabel"?: string;
         "value"?: ListItem<PickerValue> | Array<ListItem<PickerValue>>;
     }
-    interface LimelPopover {
+    export interface LimelPopover {
         "onClose"?: (event: LimelPopoverCustomEvent<void>) => void;
         "open"?: boolean;
         "openDirection"?: OpenDirection;
     }
     // (undocumented)
-    interface LimelPopoverSurface {
+    export interface LimelPopoverSurface {
         "contentCollection"?: HTMLCollection;
     }
-    interface LimelPortal {
+    export interface LimelPortal {
         "anchor"?: HTMLElement;
         "containerId"?: string;
         "containerStyle"?: object;
@@ -1627,14 +1627,14 @@ namespace JSX_2 {
         "visible"?: boolean;
     }
     // (undocumented)
-    interface LimelProgressFlow {
+    export interface LimelProgressFlow {
         "disabled"?: boolean;
         "flowItems"?: FlowItem[];
         "onChange"?: (event: LimelProgressFlowCustomEvent<FlowItem>) => void;
         "readonly"?: boolean;
     }
     // (undocumented)
-    interface LimelProgressFlowItem {
+    export interface LimelProgressFlowItem {
         "currentStep"?: boolean;
         "disabled"?: boolean;
         "item"?: FlowItem;
@@ -1642,7 +1642,7 @@ namespace JSX_2 {
         "readonly"?: boolean;
     }
     // @beta
-    interface LimelProsemirrorAdapter {
+    export interface LimelProsemirrorAdapter {
         "contentType"?: 'markdown' | 'html';
         // @alpha
         "customElements"?: CustomElementDefinition[];
@@ -1654,7 +1654,7 @@ namespace JSX_2 {
         "value"?: string;
     }
     // (undocumented)
-    interface LimelSelect {
+    export interface LimelSelect {
         "disabled"?: boolean;
         "helperText"?: string;
         "invalid"?: boolean;
@@ -1666,7 +1666,7 @@ namespace JSX_2 {
         "required"?: boolean;
         "value"?: Option_2 | Option_2[];
     }
-    interface LimelShortcut {
+    export interface LimelShortcut {
         "badge"?: number | string;
         "disabled"?: boolean;
         "icon"?: string;
@@ -1674,7 +1674,7 @@ namespace JSX_2 {
         "link"?: Link;
     }
     // (undocumented)
-    interface LimelSlider {
+    export interface LimelSlider {
         "disabled"?: boolean;
         "factor"?: number;
         "helperText"?: string;
@@ -1687,7 +1687,7 @@ namespace JSX_2 {
         "valuemax"?: number;
         "valuemin"?: number;
     }
-    interface LimelSnackbar {
+    export interface LimelSnackbar {
         "actionText"?: string;
         "dismissible"?: boolean;
         "language"?: Languages;
@@ -1700,11 +1700,11 @@ namespace JSX_2 {
         "timeout"?: number;
     }
     // (undocumented)
-    interface LimelSpinner {
+    export interface LimelSpinner {
         "limeBranded"?: boolean;
         "size"?: SpinnerSize;
     }
-    interface LimelSplitButton {
+    export interface LimelSplitButton {
         "disabled"?: boolean;
         "icon"?: string;
         "items"?: Array<MenuItem | ListSeparator>;
@@ -1714,7 +1714,7 @@ namespace JSX_2 {
         "onSelect"?: (event: LimelSplitButtonCustomEvent<MenuItem>) => void;
         "primary"?: boolean;
     }
-    interface LimelSwitch {
+    export interface LimelSwitch {
         "disabled"?: boolean;
         "helperText"?: string;
         "invalid"?: boolean;
@@ -1725,12 +1725,12 @@ namespace JSX_2 {
         "readonlyLabels"?: Array<Label<boolean>>;
         "value"?: boolean;
     }
-    interface LimelTabBar {
+    export interface LimelTabBar {
         "onChangeTab"?: (event: LimelTabBarCustomEvent<Tab>) => void;
         "tabs"?: Tab[];
     }
     // (undocumented)
-    interface LimelTable {
+    export interface LimelTable {
         "activeRow"?: RowData;
         "aggregates"?: ColumnAggregate[];
         "columns"?: Column[];
@@ -1754,12 +1754,12 @@ namespace JSX_2 {
         "sorting"?: ColumnSorter[];
         "totalRows"?: number;
     }
-    interface LimelTabPanel {
+    export interface LimelTabPanel {
         "onChangeTab"?: (event: LimelTabPanelCustomEvent<Tab>) => void;
         "tabs"?: Tab[];
     }
     // @beta
-    interface LimelTextEditor {
+    export interface LimelTextEditor {
         "allowResize"?: boolean;
         "contentType"?: 'markdown' | 'html';
         // @alpha
@@ -1785,7 +1785,7 @@ namespace JSX_2 {
         "value"?: string;
     }
     // @beta
-    interface LimelTextEditorLinkMenu {
+    export interface LimelTextEditorLinkMenu {
         "isOpen"?: boolean;
         "language"?: Languages;
         "link"?: EditorTextLink;
@@ -1793,20 +1793,19 @@ namespace JSX_2 {
         "onLinkChange"?: (event: LimelTextEditorLinkMenuCustomEvent<EditorTextLink>) => void;
         "onSave"?: (event: LimelTextEditorLinkMenuCustomEvent<void>) => void;
     }
-    interface LimelTooltip {
+    export interface LimelTooltip {
         "elementId": string;
         "helperLabel"?: string;
         "label": string;
         "maxlength"?: number;
         "openDirection"?: OpenDirection;
     }
-    interface LimelTooltipContent {
+    export interface LimelTooltipContent {
         "helperLabel"?: string;
         "label": string;
         "maxlength"?: number;
     }
 }
-export { JSX_2 as JSX }
 
 // @beta (undocumented)
 export interface Label<T = LabelValue> {
diff --git a/package-lock.json b/package-lock.json
index c2686b2d57..87568919bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,8 +22,8 @@
         "@types/html-escaper": "^3.0.2",
         "@types/jest": "^27.4.0",
         "@types/lodash-es": "^4.17.12",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
+        "@types/react": "^19.0.6",
+        "@types/react-dom": "^19.0.3",
         "@types/tabulator-tables": "^4.9.4",
         "@typescript-eslint/eslint-plugin": "^8.20.0",
         "@typescript-eslint/parser": "^8.20.0",
@@ -58,8 +58,8 @@
         "prosemirror-schema-basic": "^1.2.3",
         "prosemirror-tables": "^1.6.2",
         "puppeteer": "^19.11.1",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "react-shadow-dom-retarget-events": "^1.1.0",
         "rehype-external-links": "^3.0.0",
         "rehype-parse": "^9.0.1",
@@ -4129,29 +4129,22 @@
       "integrity": "sha512-6gOkRe7OIioWAXfnO/2lFiv+SJichKVSys1mSsgyrYHSEjk8Ctv4tSR/Odvnu+HWlH2C8j53dahU03XmQdd5fA==",
       "dev": true
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.3",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
-      "dev": true
-    },
     "node_modules/@types/react": {
-      "version": "18.3.12",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
-      "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
+      "version": "19.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.6.tgz",
+      "integrity": "sha512-gIlMztcTeDgXCUj0vCBOqEuSEhX//63fW9SZtCJ+agxoQTOklwDfiEMlTWn4mR/C/UK5VHlpwsCsOyf7/hc4lw==",
       "dev": true,
       "dependencies": {
-        "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+      "version": "19.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.3.tgz",
+      "integrity": "sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==",
       "dev": true,
-      "dependencies": {
-        "@types/react": "*"
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
       }
     },
     "node_modules/@types/resolve": {
@@ -13033,13 +13026,10 @@
       }
     },
     "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
       "dev": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13074,16 +13064,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
+      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
       "dev": true,
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
+        "scheduler": "^0.25.0"
       },
       "peerDependencies": {
-        "react": "^18.3.1"
+        "react": "^19.0.0"
       }
     },
     "node_modules/react-is": {
@@ -14077,13 +14066,10 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "dev": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "dev": true
     },
     "node_modules/scslre": {
       "version": "0.3.0",
@@ -19100,30 +19086,21 @@
       "integrity": "sha512-6gOkRe7OIioWAXfnO/2lFiv+SJichKVSys1mSsgyrYHSEjk8Ctv4tSR/Odvnu+HWlH2C8j53dahU03XmQdd5fA==",
       "dev": true
     },
-    "@types/prop-types": {
-      "version": "15.7.3",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
-      "dev": true
-    },
     "@types/react": {
-      "version": "18.3.12",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
-      "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
+      "version": "19.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.6.tgz",
+      "integrity": "sha512-gIlMztcTeDgXCUj0vCBOqEuSEhX//63fW9SZtCJ+agxoQTOklwDfiEMlTWn4mR/C/UK5VHlpwsCsOyf7/hc4lw==",
       "dev": true,
       "requires": {
-        "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "@types/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+      "version": "19.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.3.tgz",
+      "integrity": "sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==",
       "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
+      "requires": {}
     },
     "@types/resolve": {
       "version": "1.17.1",
@@ -25661,13 +25638,10 @@
       }
     },
     "react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "dev": true,
-      "requires": {
-        "loose-envify": "^1.1.0"
-      }
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "dev": true
     },
     "react-app-polyfill": {
       "version": "1.0.6",
@@ -25692,13 +25666,12 @@
       }
     },
     "react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
+      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
       "dev": true,
       "requires": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
+        "scheduler": "^0.25.0"
       }
     },
     "react-is": {
@@ -26468,13 +26441,10 @@
       }
     },
     "scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "dev": true,
-      "requires": {
-        "loose-envify": "^1.1.0"
-      }
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "dev": true
     },
     "scslre": {
       "version": "0.3.0",
diff --git a/package.json b/package.json
index 90ac607f2c..95379f0083 100644
--- a/package.json
+++ b/package.json
@@ -56,8 +56,8 @@
     "@types/html-escaper": "^3.0.2",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.3",
     "@types/tabulator-tables": "^4.9.4",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
@@ -92,8 +92,8 @@
     "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-tables": "^1.6.2",
     "puppeteer": "^19.11.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-shadow-dom-retarget-events": "^1.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-parse": "^9.0.1",
diff --git a/src/components/form/adapters/base-adapter.ts b/src/components/form/adapters/base-adapter.ts
deleted file mode 100644
index ab56f5c8e9..0000000000
--- a/src/components/form/adapters/base-adapter.ts
+++ /dev/null
@@ -1,284 +0,0 @@
-import React from 'react';
-import {
-    isNil,
-    isNumber,
-    isString,
-    isBoolean,
-    pickBy,
-    negate,
-    kebabCase,
-    mapKeys,
-    has,
-    isEmpty,
-    toPairs,
-    isEqual,
-} from 'lodash-es';
-
-/**
- * Given a value, check if it is primitive or not
- *
- * This function treats the definition of primitive a little differently than
- * the real definition of a primitive in javascript. In this context, primitive
- * really means "can be properly rendered to the dom by react". It just so
- * happens that react can render most primitives to the dom correctly.
- *
- * @see https://developer.mozilla.org/en-US/docs/Glossary/Primitive
- * @param value - the value to check
- * @returns Whether or not the value is primitive
- */
-const isPrimitive = (value) =>
-    isNil(value) || isNumber(value) || isString(value) || isBoolean(value);
-
-/**
- * Renders a webcomponent by name
- *
- * Much of the complexity of this component comes from:
- * 1. Splitting primitive and non primitive properties
- * 2. Setting and updating events
- *
- * We need to split primitive and non primitive values because React will not properly
- * render non primitive values on the web component. So we have to set non primitive values manually
- *
- * We need to set events manually because React does not properly subscribe to events on web components
- *
- * We need to update events correctly because we want to avoid duplicate event listeners. With checking for changing
- * event listener functions, event listeners are either never updated for the lifetime of the component, or
- * new event listeners are added event cycle causing a continuous increase in event listeners.
- */
-export class LimeElementsAdapter extends React.Component<any, any> {
-    component = null;
-
-    static defaultProps = {
-        // The events to bind the the web component
-        events: {},
-        // The props to pass to the web component
-        elementProps: {},
-    };
-
-    constructor(
-        public props: {
-            name: string;
-            events?: any;
-            elementProps?: any;
-        },
-    ) {
-        super(props);
-
-        this.state = {
-            prevEvents: {},
-        };
-
-        this.component = React.createRef();
-
-        this.setComponentProperty = this.setComponentProperty.bind(this);
-    }
-
-    /**
-     * Given a key a value set the value of property named `key` to
-     * the value of `value`
-     *
-     * @param key - The name of the property
-     * @param value - The value of the property
-     */
-    setComponentProperty(key: string, value: any): void {
-        const element = this.component.current;
-        element[key] = value;
-    }
-
-    /**
-     * Get the handler for an event.
-     *
-     * Events must be bound using this function otherwise events will bubble up too far
-     * since react events are different that native dom events
-     *
-     * @param eventName - the name of the event to get the handler for
-     * @returns the handler to bind to the component for the event name
-     */
-    getHandler(eventName: string) {
-        const { events } = this.props;
-
-        return (event) => {
-            event.stopPropagation();
-            events[eventName](event);
-        };
-    }
-
-    /**
-     * Set events on the web component
-     *
-     * @param events - Event names to handlers
-     */
-    setEvents(events: object) {
-        const element = this.component.current;
-        for (const event of Object.keys(events)) {
-            element.addEventListener(event, this.getHandler(event));
-        }
-    }
-
-    /**
-     * Remove events on the web component
-     *
-     * @param events - Event names to handlers
-     */
-    removeEvents(events: object) {
-        const element = this.component.current;
-        for (const event of Object.keys(events)) {
-            element.removeEventListener(event, events[event]);
-        }
-    }
-
-    /**
-     * Get the events to remove from the component
-     *
-     * @param prevEvents - previous events
-     * @param nextEvents - new events
-     * @returns the events to remove
-     */
-    getEventsToRemove(prevEvents: object, nextEvents: object): object {
-        return pickBy(
-            prevEvents,
-            (value, key) => !has(nextEvents, key) || nextEvents[key] !== value,
-        );
-    }
-
-    /**
-     * Get the events to add to the component
-     *
-     * @param prevEvents - previous events
-     * @param nextEvents - new events
-     * @returns the events to add
-     */
-    getEventsToAdd(prevEvents: object, nextEvents: object): object {
-        return pickBy(
-            nextEvents,
-            (value, key) => !has(prevEvents, key) || prevEvents[key] !== value,
-        );
-    }
-
-    /**
-     * Detect if event handlers have changed. If they
-     * have changed, store them in the state, and remove and
-     * re-add the changed event handlers
-     */
-    updateEvents() {
-        const { prevEvents } = this.state;
-        const { events } = this.props;
-
-        // isEqual does a deep equal but since events is just an object of string keys to
-        // function values it won't be very expensive especially because isEqual
-        // compares functions with ===. But we want to check equality of the functions
-        // not the wrapping object to avoid excessive rerenders.
-        if (isEqual(prevEvents, events)) {
-            return;
-        }
-
-        this.setState({ prevEvents: events });
-
-        const eventsToAdd = this.getEventsToAdd(prevEvents, events);
-        const eventsToRemove = this.getEventsToRemove(prevEvents, events);
-
-        if (!isEmpty(eventsToRemove)) {
-            this.removeEvents(eventsToRemove);
-        }
-
-        if (!isEmpty(eventsToAdd)) {
-            this.setEvents(eventsToAdd);
-        }
-    }
-
-    /**
-     * Get non primitive props. i.e. object, function, array, etc
-     *
-     * @param elementProps - the props to pass the webcomponet
-     * @returns non primitive props
-     */
-    getNonPrimitiveProps(elementProps: object) {
-        return pickBy(elementProps, negate(isPrimitive));
-    }
-
-    /**
-     * Get primitive props. i.e. integer, boolean, etc
-     *
-     * @param elementProps - the props to pass the webcomponet
-     * @returns primitive props
-     */
-    getPrimitiveProps(elementProps: object): object {
-        return pickBy(elementProps, isPrimitive);
-    }
-
-    /**
-     * Given the previous renders props and the next renders props,
-     * check if any of the property values have changed and return an
-     * object with only those values
-     *
-     * @param prevNonPrimitiveProps - the previous renders non primitive props
-     * @param nextNonPrimitiveProps - the current renders non primitive props
-     * @returns the changed primitive props
-     */
-    getChangedNonPrimitiveProps(
-        prevNonPrimitiveProps: object,
-        nextNonPrimitiveProps: object,
-    ): object {
-        return pickBy(
-            nextNonPrimitiveProps,
-            (value, key) => prevNonPrimitiveProps[key] !== value,
-        );
-    }
-
-    /**
-     * Set non primitive props on the web component.
-     *
-     * We have to set non primitive props via the setComponentProperty
-     * instead of passing them as props the the React.createElement
-     * function because non primitive props are not passed properly to the web
-     * component via React.createElement
-     *
-     * @param elementProps - element props to set
-     */
-    setNonPrimitives(elementProps: object): void {
-        toPairs(elementProps).forEach(([key, value]) =>
-            this.setComponentProperty(key, value),
-        );
-    }
-
-    componentDidMount() {
-        const { elementProps } = this.props;
-
-        this.setNonPrimitives(this.getNonPrimitiveProps(elementProps));
-
-        this.updateEvents();
-    }
-
-    componentWillUnmount() {
-        this.removeEvents(this.state.prevEvents);
-    }
-
-    componentDidUpdate(prevProps) {
-        const { elementProps: nextElementProps } = this.props;
-        const { elementProps: prevElementProps } = prevProps;
-
-        this.setNonPrimitives(
-            this.getChangedNonPrimitiveProps(
-                prevElementProps,
-                nextElementProps,
-            ),
-        );
-
-        this.updateEvents();
-    }
-
-    render() {
-        const { name, elementProps } = this.props;
-
-        let primitiveProps = this.getPrimitiveProps(elementProps);
-
-        // Map all keys to kebabcase for react because react doesn't properly map
-        // camelCase to kebab-case when setting properties on web-components
-        primitiveProps = mapKeys(primitiveProps, (_, key) => kebabCase(key));
-
-        return React.createElement(name, {
-            ...primitiveProps,
-            ref: this.component,
-        });
-    }
-}
diff --git a/src/components/form/adapters/index.ts b/src/components/form/adapters/index.ts
index 37f62f4b38..68f7f59ac4 100644
--- a/src/components/form/adapters/index.ts
+++ b/src/components/form/adapters/index.ts
@@ -1,2 +1 @@
-export * from './base-adapter';
 export * from './widget-adapter';
diff --git a/src/components/form/adapters/widget-adapter.ts b/src/components/form/adapters/widget-adapter.ts
index c93f988a03..94866a167c 100644
--- a/src/components/form/adapters/widget-adapter.ts
+++ b/src/components/form/adapters/widget-adapter.ts
@@ -1,15 +1,14 @@
 import React from 'react';
 import { WidgetProps } from '../widgets/types';
-import { LimeElementsAdapter } from './base-adapter';
 import { capitalize } from 'lodash-es';
 import { getHelpComponent } from '../help';
 
-interface WidgetAdapterProps {
+export interface WidgetAdapterProps {
     name: string;
     value?: any;
     widgetProps: WidgetProps;
     extraProps?: any;
-    events?: { [key: string]: (event: any) => void };
+    events: { change: (event: CustomEvent) => void };
 }
 
 /**
@@ -22,7 +21,7 @@ interface WidgetAdapterProps {
  * Please read the docs for more info.
  * Link: https://react-jsonschema-form.readthedocs.io/
  */
-export class LimeElementsWidgetAdapter extends React.Component {
+export class LimeElementsWidgetAdapter extends React.Component<WidgetAdapterProps> {
     state = {
         modified: false,
     };
@@ -102,38 +101,36 @@ export class LimeElementsWidgetAdapter extends React.Component {
     }
 
     render() {
-        const { name, events, extraProps } = this.props;
+        const { name, extraProps } = this.props;
         const disabled = this.isDisabled();
         const value = this.getValue();
         const readonly = this.isReadOnly();
 
-        const newEvents = {
-            change: this.props.widgetProps.onChange,
-            blur: this.handleBlur,
-            ...events,
-        };
-
         return React.createElement(
             React.Fragment,
             {},
-            React.createElement(LimeElementsAdapter, {
-                name: name,
-                elementProps: {
-                    value: value,
-                    label: this.getLabel(),
-                    disabled: disabled,
-                    readonly: readonly,
-                    required: this.isRequired(),
-                    invalid: this.isInvalid(),
-                    'helper-text': this.getHelperText(),
-                    ...extraProps,
-                },
-                events: newEvents,
+            React.createElement(name, {
+                value: value,
+                label: this.getLabel(),
+                disabled: disabled,
+                readonly: readonly,
+                required: this.isRequired(),
+                invalid: this.isInvalid(),
+                'helper-text': this.getHelperText(),
+                ...extraProps,
+                onChange: this.handleChange,
+                onBlur: this.handleBlur,
             }),
             getHelpComponent(this.props.widgetProps.schema),
         );
     }
 
+    private handleChange = (
+        event: React.SyntheticEvent<Element, CustomEvent>,
+    ) => {
+        this.props.events.change(event.nativeEvent);
+    };
+
     private isDisabled() {
         const widgetProps = this.props.widgetProps;
         const options = widgetProps.schema.lime;
diff --git a/src/components/form/fields/schema-field.ts b/src/components/form/fields/schema-field.ts
index 2407ea5a64..39a5674a7c 100644
--- a/src/components/form/fields/schema-field.ts
+++ b/src/components/form/fields/schema-field.ts
@@ -1,4 +1,3 @@
-import { LimeElementsAdapter } from '../adapters';
 import JSONSchemaField from '@rjsf/core/lib/components/fields/SchemaField';
 import React from 'react';
 import { FieldProps } from './types';
@@ -6,7 +5,7 @@ import { isEmpty, capitalize } from 'lodash-es';
 import { resetDependentFields } from './field-helpers';
 import { FieldTemplate } from '../templates';
 import { getHelpComponent } from '../help';
-import { FormSchema } from '../form.types';
+import { FormComponent, FormSchema } from '../form.types';
 import { TimePicker } from '../widgets/time-picker';
 
 /**
@@ -180,11 +179,13 @@ export class SchemaField extends React.Component<FieldProps> {
         return formData;
     }
 
-    private handleCustomComponentChange(event) {
+    private handleCustomComponentChange(
+        event: React.SyntheticEvent<Element, CustomEvent>,
+    ) {
         const { schema } = this.props;
         event.stopPropagation();
 
-        let value = event.detail;
+        let value = event.nativeEvent.detail;
 
         if (shouldChangeToUndefined(value, schema)) {
             value = undefined;
@@ -230,13 +231,17 @@ export class SchemaField extends React.Component<FieldProps> {
             invalid: this.isInvalid(),
             label: this.getLabel(),
             helperText: this.getHelperText(),
-            formInfo: {
-                schema: schema,
-                rootSchema: registry.formContext.schema,
-                errorSchema: errorSchema,
-                rootValue: registry.formContext.rootValue,
-                name: name,
-                schemaPath: this.getSchemaPath(idSchema?.$id),
+            ref: (element: FormComponent) => {
+                element.formInfo = {
+                    schema: schema,
+                    rootSchema: registry.formContext.schema,
+                    errorSchema: errorSchema,
+                    rootValue: registry.formContext.rootValue,
+                    name: name,
+                    schemaPath: this.getSchemaPath(idSchema?.$id),
+                };
+
+                return () => {};
             },
         };
     }
@@ -248,15 +253,10 @@ export class SchemaField extends React.Component<FieldProps> {
 
         verifyCustomComponentIsDefined(name);
 
-        const component = React.createElement(LimeElementsAdapter, {
-            name: name,
-            elementProps: {
-                ...userDefinedComponentProps,
-                ...this.buildCustomComponentProps(),
-            },
-            events: {
-                change: this.handleCustomComponentChange,
-            },
+        const component = React.createElement(name, {
+            ...userDefinedComponentProps,
+            ...this.buildCustomComponentProps(),
+            onChange: this.handleCustomComponentChange,
         });
 
         return React.createElement(
diff --git a/src/components/form/help/help.ts b/src/components/form/help/help.ts
index 97e72da971..3171d81f24 100644
--- a/src/components/form/help/help.ts
+++ b/src/components/form/help/help.ts
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LimeElementsAdapter } from '../adapters/base-adapter';
 import { FormSchema } from '../form.types';
 
 export function getHelpComponent(schema: FormSchema) {
@@ -15,8 +14,5 @@ export function getHelpComponent(schema: FormSchema) {
 
     const helpProps = help;
 
-    return React.createElement(LimeElementsAdapter, {
-        name: 'limel-help',
-        elementProps: helpProps,
-    });
+    return React.createElement('limel-help', helpProps);
 }
diff --git a/src/components/form/templates/array-field-collapsible-item.ts b/src/components/form/templates/array-field-collapsible-item.ts
index 58f8b2f8d5..bef04d76b0 100644
--- a/src/components/form/templates/array-field-collapsible-item.ts
+++ b/src/components/form/templates/array-field-collapsible-item.ts
@@ -33,7 +33,6 @@ interface CollapsibleItemProps {
 }
 
 export class CollapsibleItemTemplate extends React.Component {
-    public refs: { section: any };
     state = {
         isOpen: false,
     };
@@ -48,8 +47,10 @@ export class CollapsibleItemTemplate extends React.Component {
         };
     }
 
+    private section: HTMLLimelCollapsibleSectionElement;
+
     public componentDidMount() {
-        const section: HTMLLimelCollapsibleSectionElement = this.refs.section;
+        const section = this.section;
         section.addEventListener('action', this.handleAction);
         section.addEventListener('open', this.handleOpen);
 
@@ -57,12 +58,11 @@ export class CollapsibleItemTemplate extends React.Component {
     }
 
     public componentDidUpdate() {
-        const section: HTMLLimelCollapsibleSectionElement = this.refs.section;
-        this.setActions(section);
+        this.setActions(this.section);
     }
 
     public componentWillUnmount() {
-        const section: HTMLLimelCollapsibleSectionElement = this.refs.section;
+        const section = this.section;
         section.removeEventListener('action', this.handleAction);
         section.removeEventListener('open', this.handleOpen);
     }
@@ -79,7 +79,9 @@ export class CollapsibleItemTemplate extends React.Component {
             {
                 header: findTitle(data, schema, formSchema) || 'New item',
                 class: 'limel-form-array-item--object',
-                ref: 'section',
+                ref: (section: HTMLLimelCollapsibleSectionElement) => {
+                    this.section = section;
+                },
                 'is-open': this.state.isOpen,
             },
             children,
diff --git a/src/components/form/templates/array-field-simple-item.ts b/src/components/form/templates/array-field-simple-item.ts
index a6da4b58c5..d9db44cb69 100644
--- a/src/components/form/templates/array-field-simple-item.ts
+++ b/src/components/form/templates/array-field-simple-item.ts
@@ -9,40 +9,39 @@ interface SimpleItemProps {
 const LIMEL_ICON_BUTTON = 'limel-icon-button';
 
 export class SimpleItemTemplate extends React.Component {
-    public refs: { removeButton: any; moveUpButton: any; moveDownButton: any };
-
     constructor(public props: SimpleItemProps) {
         super(props);
     }
 
+    private removeButton: HTMLLimelButtonElement;
+    private moveUpButton: HTMLLimelButtonElement;
+    private moveDownButton: HTMLLimelButtonElement;
+
     private removeHandler: (event: any) => void;
     private moveUpHandler: (event: any) => void;
     private moveDownHandler: (event: any) => void;
 
     public componentDidMount() {
         const { item, index } = this.props;
-        const removeButton: HTMLLimelButtonElement = this.refs.removeButton;
+        const removeButton = this.removeButton;
         this.removeHandler = item.onDropIndexClick(index);
         removeButton.addEventListener('click', this.removeHandler);
 
-        const upButton: HTMLLimelButtonElement = this.refs.moveUpButton;
+        const upButton = this.moveUpButton;
         this.moveUpHandler = item.onReorderClick(index, index - 1);
         upButton.addEventListener('click', this.moveUpHandler);
 
-        const downButton: HTMLLimelButtonElement = this.refs.moveDownButton;
+        const downButton = this.moveDownButton;
         this.moveDownHandler = item.onReorderClick(index, index + 1);
         downButton.addEventListener('click', this.moveDownHandler);
     }
 
     public componentWillUnmount() {
-        const removeButton: HTMLLimelButtonElement = this.refs.removeButton;
-        removeButton.removeEventListener('click', this.removeHandler);
+        this.removeButton.removeEventListener('click', this.removeHandler);
 
-        const upButton: HTMLLimelButtonElement = this.refs.moveUpButton;
-        upButton.removeEventListener('click', this.moveUpHandler);
+        this.moveUpButton.removeEventListener('click', this.moveUpHandler);
 
-        const downButton: HTMLLimelButtonElement = this.refs.moveDownButton;
-        downButton.removeEventListener('click', this.moveDownHandler);
+        this.moveDownButton.removeEventListener('click', this.moveDownHandler);
     }
 
     public render() {
@@ -63,7 +62,9 @@ export class SimpleItemTemplate extends React.Component {
     private renderRemoveButton(item: ArrayFieldItem) {
         const props: any = {
             icon: 'trash',
-            ref: 'removeButton',
+            ref: (button: HTMLLimelButtonElement) => {
+                this.removeButton = button;
+            },
         };
         if (!item.hasRemove) {
             props.disabled = true;
@@ -75,7 +76,9 @@ export class SimpleItemTemplate extends React.Component {
     private renderMoveUpButton(item: ArrayFieldItem) {
         const props: any = {
             icon: 'up_arrow',
-            ref: 'moveUpButton',
+            ref: (button: HTMLLimelButtonElement) => {
+                this.moveUpButton = button;
+            },
         };
         if (!item.hasMoveUp) {
             props.disabled = true;
@@ -87,7 +90,9 @@ export class SimpleItemTemplate extends React.Component {
     private renderMoveDownButton(item: ArrayFieldItem) {
         const props: any = {
             icon: 'down_arrow',
-            ref: 'moveDownButton',
+            ref: (button: HTMLLimelButtonElement) => {
+                this.moveDownButton = button;
+            },
         };
         if (!item.hasMoveDown) {
             props.disabled = true;
diff --git a/src/components/form/widgets/code-editor.ts b/src/components/form/widgets/code-editor.ts
index cf862e68ee..7137a3d60c 100644
--- a/src/components/form/widgets/code-editor.ts
+++ b/src/components/form/widgets/code-editor.ts
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LimeElementsAdapter } from '../adapters';
 import { FieldProps } from '@rjsf/core';
 
 export class CodeEditor extends React.Component {
@@ -18,22 +17,22 @@ export class CodeEditor extends React.Component {
             // N/A
         }
 
-        return React.createElement(LimeElementsAdapter, {
-            name: 'limel-code-editor',
-            elementProps: {
-                value: value,
-                language: 'json',
-                lineNumbers: true,
-                fold: true,
-                lint: true,
-            },
-            events: {
-                change: this.handleChange,
-            },
+        return React.createElement('limel-code-editor', {
+            value: value,
+            language: 'json',
+            lineNumbers: true,
+            fold: true,
+            lint: true,
+            onChange: this.handleChange,
         });
     }
 
-    private handleChange(event: CustomEvent<string>) {
+    private handleChange(
+        event: React.SyntheticEvent<
+            HTMLLimelCodeEditorElement,
+            CustomEvent<string>
+        >,
+    ) {
         const props = this.props;
         event.stopPropagation();
 
@@ -42,7 +41,7 @@ export class CodeEditor extends React.Component {
         }
 
         try {
-            const value = JSON.parse(event.detail);
+            const value = JSON.parse(event.nativeEvent.detail);
 
             props.onChange(value);
             props.onValidate();
diff --git a/src/design-guidelines/color-system/examples/extended-color-palette.tsx b/src/design-guidelines/color-system/examples/extended-color-palette.tsx
index 064697c990..1526d14630 100644
--- a/src/design-guidelines/color-system/examples/extended-color-palette.tsx
+++ b/src/design-guidelines/color-system/examples/extended-color-palette.tsx
@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, JSX } from '@stencil/core';
 
 @Component({
     tag: 'limel-example-extended-color-palette',
diff --git a/src/design-guidelines/color-system/examples/primary-color-palette.tsx b/src/design-guidelines/color-system/examples/primary-color-palette.tsx
index 9c2e162ffe..d5f90f3d9b 100644
--- a/src/design-guidelines/color-system/examples/primary-color-palette.tsx
+++ b/src/design-guidelines/color-system/examples/primary-color-palette.tsx
@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, JSX } from '@stencil/core';
 
 @Component({
     tag: 'limel-example-primary-color-palette',